File size: 7,684 Bytes
ceb3cf5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | <!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">
<!-- Countdown Banner -->
<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>
<!-- News Carousels -->
<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">
<!-- News cards will be inserted here by JavaScript -->
</div>
</div>
</div>
</section>
<!-- Watchlist (shown when logged in) -->
<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">
<!-- Watchlist items will be inserted here by JavaScript -->
</tbody>
</table>
</div>
</section>
</main>
<script>
// Countdown timer functionality
function updateCountdown() {
const eventTime = new Date(Date.now() + 30 * 60 * 1000); // Example: 30 minutes from now
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) { // Less than 10 minutes
timer.classList.add('countdown-imminent');
} else {
timer.classList.remove('countdown-imminent');
timer.classList.remove('countdown-live');
}
}
// Initialize and update countdown every second
updateCountdown();
setInterval(updateCountdown, 1000);
// News carousel filtering
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');
// Filter logic would go here
});
});
feather.replace();
</script>
</body>
</html> |