| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Market Dashboard | CodeWizard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/framer-motion@10.16.4/dist/framer-motion.min.js"></script> |
| <style> |
| .countdown-imminent { color: #f97316; } |
| .countdown-live { |
| color: #ef4444; |
| animation: pulse 1.5s infinite; |
| } |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| .news-card:hover { |
| transform: scale(1.05); |
| border-color: #2563eb; |
| } |
| .price-up { animation: flashGreen 1s; } |
| .price-down { animation: flashRed 1s; } |
| @keyframes flashGreen { |
| 0% { background-color: rgba(34, 197, 94, 0.3); } |
| 100% { background-color: transparent; } |
| } |
| @keyframes flashRed { |
| 0% { background-color: rgba(239, 68, 68, 0.3); } |
| 100% { background-color: transparent; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| <header class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16 items-center"> |
| <a href="index.html" class="flex items-center"> |
| <i data-feather="code" class="text-purple-600 mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">CodeWizard</span> |
| </a> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="dashboard.html" class="text-purple-600 font-medium">Dashboard</a> |
| <a href="crypto.html" class="text-gray-600 hover:text-purple-600">Crypto</a> |
| <a href="heatmap.html" class="text-gray-600 hover:text-purple-600">Liquidation Heatmap</a> |
| <a href="#" class="text-gray-600 hover:text-purple-600" id="login-btn">Login</a> |
| </nav> |
| <button class="md:hidden text-gray-600"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| |
| <section class="bg-slate-800 text-white rounded-lg mb-8 p-4" id="countdown-banner"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i data-feather="alert-circle" class="mr-3 w-6 h-6"></i> |
| <div id="countdown-timer" class="text-2xl font-mono">00:30:15</div> |
| </div> |
| <div class="text-center mb-4 md:mb-0"> |
| <h3 class="font-bold" id="event-title">FOMC Rate Decision</h3> |
| <p class="text-sm text-slate-300" id="event-time">Today at 14:00 ET</p> |
| </div> |
| <button class="flex items-center bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg"> |
| <i data-feather="calendar" class="mr-2"></i> |
| Add to Calendar |
| </button> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12"> |
| <div class="flex space-x-4 mb-4 overflow-x-auto pb-2"> |
| <button class="filter-btn active px-4 py-2 bg-blue-600 text-white rounded-full" data-filter="all">All</button> |
| <button class="filter-btn px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-full" data-filter="crypto">Crypto</button> |
| <button class="filter-btn px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-full" data-filter="forex">Forex</button> |
| <button class="filter-btn px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-full" data-filter="stocks">Stocks</button> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="relative h-64 overflow-hidden"> |
| <div class="absolute inset-0 flex items-center" id="news-carousel-1"> |
| |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="watchlist-section" class="hidden mb-12"> |
| <h2 class="text-2xl font-bold mb-4">My Watchlist</h2> |
| <div class="bg-white rounded-lg shadow overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">24h Change</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| </tr> |
| </thead> |
| <tbody id="watchlist-body" class="bg-white divide-y divide-gray-200"> |
| |
| </tbody> |
| </table> |
| </div> |
| </section> |
| </main> |
|
|
| <script> |
| |
| function updateCountdown() { |
| const eventTime = new Date(Date.now() + 30 * 60 * 1000); |
| const now = new Date(); |
| const diff = eventTime - now; |
| |
| if (diff <= 0) { |
| document.getElementById('countdown-timer').textContent = 'LIVE NOW'; |
| document.getElementById('countdown-timer').classList.add('countdown-live'); |
| document.getElementById('countdown-timer').classList.remove('countdown-imminent'); |
| return; |
| } |
| |
| const hours = Math.floor(diff / (1000 * 60 * 60)); |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); |
| |
| const timer = document.getElementById('countdown-timer'); |
| timer.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
| |
| if (diff < 10 * 60 * 1000) { |
| timer.classList.add('countdown-imminent'); |
| } else { |
| timer.classList.remove('countdown-imminent'); |
| timer.classList.remove('countdown-live'); |
| } |
| } |
| |
| |
| updateCountdown(); |
| setInterval(updateCountdown, 1000); |
| |
| |
| document.querySelectorAll('.filter-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active', 'bg-blue-600', 'text-white')); |
| this.classList.add('active', 'bg-blue-600', 'text-white'); |
| |
| }); |
| }); |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
