| <!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"> |
| |
| <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(); |
| |
| |
| function fetchCryptoData() { |
| |
| setTimeout(() => { |
| |
| console.log('Updating crypto data...'); |
| }, 30000); |
| } |
| |
| |
| fetchCryptoData(); |
| </script> |
| </body> |
| </html> |
