1. Global Principles & Core Technologies

1.1. Core Philosophy
Real-time: The application must feel alive. Data is the lifeblood, and it should be presented to the user with minimal delay.

Clarity over Clutter: Despite the density of information, the design must prioritize scannability and intuitive understanding through strong visual hierarchy.

Performance is a Feature: Every interaction, from page load to data filtering, must be fast and responsive.

1.2. Non-Functional Requirements
Responsiveness: All components are built mobile-first and must provide a seamless experience on all screen sizes.

Performance:

API Response Time: All endpoints must respond in < 300ms.

Frontend Page Load (LCP): Initial page load should be < 2 seconds.

Interaction Latency: UI reactions to user input (e.g., filtering, sorting) should feel instantaneous (<100ms).

Animation: All animations are handled by Framer Motion and must be smooth (targeting 60fps). They will be used to provide visual feedback, guide the user's attention, and manage state transitions gracefully (e.g., loading states, modal pop-ups).

2. End-to-End Feature Specifications: Core Dashboard
2.1. Feature: Countdown Banner
User Goal: To instantly see and prepare for the next major market-moving economic event.

Frontend - UI & Design:

A full-width banner at the top of the page with a slate-800 background.

Layout: A 3-column flex container. Left: Icon and Timer. Center: Event Details. Right: Calendar Button.

States:

Default: White timer text.

Imminent (T-10 mins): Timer text turns orange.

Live (T+10 mins): Timer is replaced with a red, pulsing "LIVE NOW" text element.

Frontend - Interaction & Animation:

The HH:MM:SS timer is a state variable that updates every second, causing a re-render of only the timer text, not the whole banner.

The transition to the "LIVE NOW" state is a smooth fade-in/fade-out. The pulse animation is a subtle, continuous scale and opacity change.

Data Flow:

On initial page load, the frontend calls GET /events/next.

A background polling mechanism re-calls this endpoint every 60 seconds to ensure the data is current.

Backend - Working:

The GET /events/next endpoint executes a targeted Supabase query: SELECT * FROM events WHERE importance = 'High' AND time >= NOW() ORDER BY time ASC LIMIT 1.

It returns a single JSON object for the event, or null if none are scheduled.

2.2. Feature: Dual News Carousels & Filtering
User Goal: To passively consume a broad range of breaking news and filter it down to topics of interest.

Frontend - UI & Design:

Two rows of horizontally scrolling news cards.

Cards have a clean layout with a bold headline, a multi-line summary, and a timestamp.

A row of filter buttons ("All", "Crypto", etc.) sits above the carousels. The active filter has a distinct blue-600 background.

Frontend - Interaction & Animation:

The carousels are powered by a seamless, linear animate property in Framer Motion for an infinite loop.

Hovering a card animates its scale (scale: 1.05) and shows a blue border.

Clicking a filter button updates the parent component's state, which smoothly re-renders the carousels with the new list of items using an animated layout.

Clicking a card opens the NewsModal. The modal itself animates in with a scale and fade transition, while the background darkens. The specific carousel's animation is paused.

Data Flow:

On load, the frontend calls GET /news/latest to fetch the master list of 50 news items.

The data is stored in a state variable. Filtering happens on the client-side for maximum speed.

The news is re-fetched every 2-3 minutes.

Backend - Working:

The GET /news/latest endpoint queries Supabase: SELECT * FROM news ORDER BY published_at DESC LIMIT 50.

The backend's scheduled jobs (fetch_and_store_news_from_feeds, fetch_forexfactory_news) are constantly populating the news table in the background.

3. End-to-End Feature Specifications: Advanced Pages
3.1. Feature: Crypto Screener
User Goal: To efficiently find and analyze cryptocurrencies based on real-time market data.

Frontend - UI & Design:

A full-page, responsive data table.

Controls at the top include a search bar and filter dropdowns/sliders for Market Cap and Volume.

Table columns are sortable. Price cells are monospaced for clarity.

Frontend - Interaction & Animation:

As the user types in the search bar, the table filters instantly with a smooth, animated re-ordering of rows.

Price updates are the key animation: the cell background briefly flashes green for an increase or red for a decrease before fading back to the default.

Sorting by clicking a column header triggers an animated re-shuffle of the table rows.

Data Flow:

On page load, a call is made to the backend proxy GET /crypto/all.

For live prices, a WebSocket connection is preferred. As a fallback, the frontend will poll the endpoint every 30-60 seconds.

Backend - Working:

The GET /crypto/all endpoint is a secure proxy. It receives the request from the frontend.

It makes a server-to-server call to the CoinGecko API, injecting a secret API key.

It implements a 60-second cache to prevent hitting API rate limits on high-frequency requests.

It forwards the JSON response from CoinGecko to the client.

3.2. Feature: Liquidation Heatmap
User Goal: To visually identify high-liquidity price zones that could act as magnets or support/resistance.

Frontend - UI & Design:

A large chart area is the main focus.

Buttons at the top allow users to switch between assets (BTCUSDT, ETHUSDT).

The chart displays the price on the Y-axis. Horizontal bands are drawn at key price levels, with their color intensity (yellow -> orange -> red) indicating the magnitude of liquidations.

Frontend - Interaction & Animation:

Switching assets triggers a loading state (e.g., a skeleton loader or spinner) and then smoothly fades the new chart and heatmap data into view.

Hovering over a liquidation band displays a tooltip that follows the cursor, providing detailed information without clicks.

Data Flow:

On load, the frontend calls GET /liquidations/BTCUSDT.

When the user clicks "ETHUSDT", a new call is made to GET /liquidations/ETHUSDT.

The data is refreshed automatically every 5 minutes.

Backend - Working:

A scheduled job, fetch_liquidation_data, runs every 15 minutes. It calls an external API (e.g., CoinGlass), processes the data, and stores it in the liquidation_levels table in Supabase.

The GET /liquidations/{asset} endpoint simply performs a SELECT * FROM liquidation_levels WHERE asset_ticker = {asset} to serve the pre-processed data to the frontend.

3.3. Feature: User Accounts & Watchlists
User Goal: To save and track a personalized list of assets and preferences.

Frontend - UI & Design:

Login/Signup is handled in a clean, centered modal.

Once logged in, a "My Watchlist" widget appears on the dashboard, showing a compact table of the user's assets with live-ticking prices.

Frontend - Interaction & Animation:

Adding an asset to the watchlist provides instant feedback, with the item smoothly animating into the list.

Price ticks in the watchlist widget use the same green/red flash animation as the screener.

Data Flow:

Authentication is handled client-side using the supabase-js library, which securely manages JWTs.

Once logged in, the frontend makes authenticated requests to POST /watchlist or DELETE /watchlist to manage the list.

Backend - Working:

The backend endpoints for /watchlist are protected. They require a valid JWT.

The logic uses the user_id from the decoded token to interact with the watchlists table.

All security is enforced by Supabase's Row Level Security policies, ensuring a user can only ever modify their own data. The backend code is simple and acts as a passthrough to the secure database

crypto.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crypto Screener | 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>
+        .monospace { font-family: monospace; }
+        .price-up { color: #10b981; }
+        .price-down { color: #ef4444; }
+        .price-flash-up { animation: flashGreen 1s; }
+        .price-flash-down { animation: flashRed 1s; }
+        @keyframes flashGreen {
+            0% { background-color: rgba(16, 185, 129, 0.3); }
+            100% { background-color: transparent; }
+        }
+        @keyframes flashRed {
+            0% { background-color: rgba(239, 68, 68, 0.3); }
+            100% { background-color: transparent; }
+        }
+        .table-row:hover { background-color: #f9fafb; }
+    </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-gray-600 hover:text-purple-600">Dashboard</a>
+                    <a href="crypto.html" class="text-purple-600 font-medium">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">
+        <div class="flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-bold">Crypto Screener</h1>
+            <div class="flex space-x-4">
+                <div class="relative">
+                    <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600">
+                    <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
+                </div>
+                <button class="flex items-center bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg">
+                    <i data-feather="plus" class="mr-2"></i>
+                    Add to Watchlist
+                </button>
+            </div>
+        </div>
+
+        <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 cursor-pointer">Asset</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">Price</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">24h Change</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">24h Volume</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">Market Cap</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="crypto-table-body" class="bg-white divide-y divide-gray-200">
+                    <!-- Example row - would be populated by JavaScript -->
+                    <tr class="table-row">
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="flex items-center">
+                                <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
+                                <div>
+                                    <div class="font-medium">Bitcoin</div>
+                                    <div class="text-gray-500 text-sm">BTC</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap monospace">$42,123.45</td>
+                        <td class="px-6 py-4 whitespace-nowrap price-up">+2.34%</td>
+                        <td class="px-6 py-4 whitespace-nowrap">$24.5B</td>
+                        <td class="px-6 py-4 whitespace-nowrap">$820.3B</td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <button class="text-purple-600 hover:text-purple-800">
+                                <i data-feather="eye" class="w-4 h-4"></i>
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </main>
+
+    <script>
+        feather.replace();
+        
+        // This would be replaced with actual API calls
+        function fetchCryptoData() {
+            // Simulating API call with setTimeout
+            setTimeout(() => {
+                // This would update the table with real data
+                console.log('Updating crypto data...');
+            }, 30000); // Update every 30 seconds
+        }
+
+        // Initial fetch
+        fetchCryptoData();
+    </script>
+</body>
+</html>

dashboard.html

@@ -0,0 +1,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>

heatmap.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liquidation Heatmap | CodeWizard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        .heatmap-gradient {
+            background: linear-gradient(90deg, #fef08a 0%, #f59e0b 50%, #ef4444 100%);
+        }
+        .tooltip {
+            position: absolute;
+            pointer-events: none;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+    </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-gray-600 hover:text-purple-600">Dashboard</a>
+                    <a href="crypto.html" class="text-gray-600 hover:text-purple-600">Crypto</a>
+                    <a href="heatmap.html" class="text-purple-600 font-medium">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">
+        <div class="flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-bold">Liquidation Heatmap</h1>
+            <div class="flex space-x-2">
+                <button class="asset-btn active px-4 py-2 bg-purple-600 text-white rounded-lg" data-asset="BTCUSDT">BTC/USDT</button>
+                <button class="asset-btn px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg" data-asset="ETHUSDT">ETH/USDT</button>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-lg shadow p-6">
+            <div class="flex justify-between items-center mb-4">
+                <div class="flex items-center">
+                    <div class="mr-2 text-sm">Legend:</div>
+                    <div class="heatmap-gradient w-32 h-4 rounded"></div>
+                    <div class="ml-2 text-sm">Low to High Liquidity</div>
+                </div>
+                <div class="text-sm text-gray-500">Updated: <span id="update-time">Just now</span></div>
+            </div>
+            
+            <div class="relative h-96">
+                <canvas id="heatmap-chart"></canvas>
+                <div class="tooltip" id="heatmap-tooltip"></div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        feather.replace();
+
+        // Sample data - would be replaced with real API data
+        const heatmapData = {
+            BTCUSDT: {
+                levels: [
+                    { price: 42000, liquidity: 10000000, type: 'long' },
+                    { price: 41500, liquidity: 8000000, type: 'long' },
+                    { price: 41000, liquidity: 12000000, type: 'long' },
+                    { price: 42500, liquidity: 9000000, type: 'short' },
+                    { price: 43000, liquidity: 15000000, type: 'short' },
+                ],
+                currentPrice: 42356.78
+            },
+            ETHUSDT: {
+                levels: [
+                    { price: 2500, liquidity: 5000000, type: 'long' },
+                    { price: 2450, liquidity: 4000000, type: 'long' },
+                    { price: 2550, liquidity: 6000000, type: 'short' },
+                    { price: 2600, liquidity: 7000000, type: 'short' },
+                ],
+                currentPrice: 2532.45
+            }
+        };
+
+        let currentAsset = 'BTCUSDT';
+        let chart;
+
+        function initChart() {
+            const ctx = document.getElementById('heatmap-chart').getContext('2d');
+            const data = heatmapData[currentAsset];
+            
+            chart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: data.levels.map(level => `$${level.price.toLocaleString()}`),
+                    datasets: [{
+                        data: data.levels.map(level => level.liquidity / 1000000), // Convert to millions
+                        backgroundColor: data.levels.map(level => 
+                            level.type === 'long' ? 'rgba(16, 185, 129, 0.7)' : 'rgba(239, 68, 68, 0.7)'
+                        ),
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Price Levels'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'Liquidation Volume (millions)'
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            enabled: false
+                        }
+                    },
+                    onClick: (e) => {
+                        // Handle click events if needed
+                    }
+                }
+            });
+
+            // Add event listeners for hover tooltips
+            const canvas = document.getElementById('heatmap-chart');
+            const tooltip = document.getElementById('heatmap-tooltip');
+            
+            canvas.addEventListener('mousemove', (e) => {
+                const points = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false);
+                if (points.length) {
+                    const point = points[0];
+                    const level = data.levels[point.index];
+                    
+                    tooltip.innerHTML = `
+                        <div>Price: $${level.price.toLocaleString()}</div>
+                        <div>Liquidity: $${(level.liquidity / 1000000).toFixed(2)}M</div>
+                        <div>Type: ${level.type === 'long' ? 'Long' : 'Short'} liquidations</div>
+                    `;
+                    tooltip.style.left = `${e.offsetX + 10}px`;
+                    tooltip.style.top = `${e.offsetY + 10}px`;
+                    tooltip.style.opacity = '1';
+                } else {
+                    tooltip.style.opacity = '0';
+                }
+            });
+            
+            canvas.addEventListener('mouseout', () => {
+                tooltip.style.opacity = '0';
+            });
+        }
+
+        // Initialize chart on page load
+        initChart();
+
+        // Handle asset switching
+        document.querySelectorAll('.asset-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                if (this.classList.contains('active')) return;
+                
+                document.querySelectorAll('.asset-btn').forEach(b => b.classList.remove('active', 'bg-purple-600', 'text-white'));
+                this.classList.add('active', 'bg-purple-600', 'text-white');
+                currentAsset = this.dataset.asset;
+                
+                // Show loading state
+                document.getElementById('update-time').textContent = 'Loading...';
+                
+                // Simulate API call
+                setTimeout(() => {
+                    chart.destroy();
+                    initChart();
+                    document.getElementById('update-time').textContent = 'Just now';
+                }, 500);
+            });
+        });
+
+        // Simulate data updates
+        setInterval(() => {
+            document.getElementById('update-time').textContent = new Date().toLocaleTimeString();
+        }, 300000); // 5 minutes
+    </script>
+</body>
+</html>

index.html

@@ -34,11 +34,11 @@
                         <span class="text-xl font-bold text-gray-900">CodeWizard</span>
                     </div>
                     <div class="hidden md:flex items-center space-x-8">
-                        <a href="#" class="text-purple-600 font-medium">Home</a>
-                        <a href="#" class="text-gray-600 hover:text-purple-600">Services</a>
-                        <a href="#" class="text-gray-600 hover:text-purple-600">Portfolio</a>
-                        <a href="#" class="text-gray-600 hover:text-purple-600">About</a>
-                        <a href="#" class="text-gray-600 hover:text-purple-600">Contact</a>
+                        <a href="index.html" class="text-purple-600 font-medium">Home</a>
+                        <a href="dashboard.html" class="text-gray-600 hover:text-purple-600">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">Heatmap</a>
+                        <a href="#" class="text-gray-600 hover:text-purple-600" id="login-btn">Login</a>
                     </div>
                     <button class="md:hidden text-gray-600">
                         <i data-feather="menu"></i>
@@ -182,10 +182,10 @@
                     <div>
                         <h4 class="font-bold mb-4">Quick Links</h4>
                         <ul class="space-y-2">
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
+                            <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
+                            <li><a href="dashboard.html" class="text-gray-400 hover:text-white transition">Dashboard</a></li>
+                            <li><a href="crypto.html" class="text-gray-400 hover:text-white transition">Crypto</a></li>
+                            <li><a href="heatmap.html" class="text-gray-400 hover:text-white transition">Heatmap</a></li>
                         </ul>
                     </div>
                     <div>