Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crypto Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <custom-sidebar></custom-sidebar> | |
| <div class="lg:ml-64"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Portfolio Overview --> | |
| <div class="bg-gradient-to-r from-purple-900 to-pink-900 rounded-2xl p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <div> | |
| <h2 class="text-2xl font-bold mb-2">Portfolio Balance</h2> | |
| <p class="text-4xl font-bold mb-2">$24,568.72</p> | |
| <div class="flex items-center"> | |
| <span class="text-green-400 flex items-center mr-4"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| +2.34% | |
| </span> | |
| <span class="text-gray-300 text-sm">Last 24 hours</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3 mt-4 md:mt-0"> | |
| <button class="bg-white text-purple-900 font-bold py-2 px-4 rounded-lg hover:bg-gray-100 transition duration-300"> | |
| Buy Crypto | |
| </button> | |
| <button class="bg-transparent border border-white text-white font-bold py-2 px-4 rounded-lg hover:bg-white hover:text-purple-900 transition duration-300"> | |
| Send/Receive | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Market Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Bitcoin</p> | |
| <p class="text-2xl font-bold mt-1">BTC</p> | |
| </div> | |
| <div class="bg-gray-700 rounded-full p-2"> | |
| <img src="http://static.photos/cryptocurrency/64x64/1" alt="BTC" class="w-8 h-8"> | |
| </div> | |
| </div> | |
| <p class="text-2xl font-bold mt-3">$43,256.78</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-green-400 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| 3.25% | |
| </span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Ethereum</p> | |
| <p class="text-2xl font-bold mt-1">ETH</p> | |
| </div> | |
| <div class="bg-gray-700 rounded-full p-2"> | |
| <img src="http://static.photos/cryptocurrency/64x64/2" alt="ETH" class="w-8 h-8"> | |
| </div> | |
| </div> | |
| <p class="text-2xl font-bold mt-3">$2,456.32</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-red-400 flex items-center"> | |
| <i data-feather="trending-down" class="w-4 h-4 mr-1"></i> | |
| 1.12% | |
| </span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Cardano</p> | |
| <p class="text-2xl font-bold mt-1">ADA</p> | |
| </div> | |
| <div class="bg-gray-700 rounded-full p-2"> | |
| <img src="http://static.photos/cryptocurrency/64x64/3" alt="ADA" class="w-8 h-8"> | |
| </div> | |
| </div> | |
| <p class="text-2xl font-bold mt-3">$0.58</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-green-400 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| 5.67% | |
| </span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Solana</p> | |
| <p class="text-2xl font-bold mt-1">SOL</p> | |
| </div> | |
| <div class="bg-gray-700 rounded-full p-2"> | |
| <img src="http://static.photos/cryptocurrency/64x64/4" alt="SOL" class="w-8 h-8"> | |
| </div> | |
| </div> | |
| <p class="text-2xl font-bold mt-3">$98.42</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-green-400 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| 8.34% | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <div class="bg-gray-800 rounded-2xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Market Trends</h3> | |
| <div class="flex space-x-2"> | |
| <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm">1D</button> | |
| <button class="bg-gray-700 text-gray-300 px-3 py-1 rounded-lg text-sm hover:bg-gray-600">1W</button> | |
| <button class="bg-gray-700 text-gray-300 px-3 py-1 rounded-lg text-sm hover:bg-gray-600">1M</button> | |
| </div> | |
| </div> | |
| <div class="h-64 flex items-center justify-center"> | |
| <img src="http://static.photos/finance/640x360/456" alt="Market Chart" class="w-full rounded-lg"> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-2xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Your Assets</h3> | |
| <button class="text-purple-400 flex items-center"> | |
| View All | |
| <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between py-3 border-b border-gray-700"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/40x40/1" alt="BTC" class="w-10 h-10 mr-3"> | |
| <div> | |
| <p class="font-bold">Bitcoin</p> | |
| <p class="text-gray-400 text-sm">BTC</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-bold">0.5235 BTC</p> | |
| <p class="text-gray-400 text-sm">$22,642.15</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between py-3 border-b border-gray-700"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/40x40/2" alt="ETH" class="w-10 h-10 mr-3"> | |
| <div> | |
| <p class="font-bold">Ethereum</p> | |
| <p class="text-gray-400 text-sm">ETH</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-bold">3.25 ETH</p> | |
| <p class="text-gray-400 text-sm">$8,498.25</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between py-3 border-b border-gray-700"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/40x40/5" alt="DOT" class="w-10 h-10 mr-3"> | |
| <div> | |
| <p class="font-bold">Polkadot</p> | |
| <p class="text-gray-400 text-sm">DOT</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-bold">125 DOT</p> | |
| <p class="text-gray-400 text-sm">$842.50</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between py-3"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/40x40/6" alt="LINK" class="w-10 h-10 mr-3"> | |
| <div> | |
| <p class="font-bold">Chainlink</p> | |
| <p class="text-gray-400 text-sm">LINK</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-bold">85 LINK</p> | |
| <p class="text-gray-400 text-sm">$527.95</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Cryptocurrencies --> | |
| <div class="bg-gray-800 rounded-2xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Top Cryptocurrencies</h3> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="bg-gray-700 border border-gray-600 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <i data-feather="search" class="w-5 h-5 absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-gray-400 text-left border-b border-gray-700"> | |
| <th class="pb-4">#</th> | |
| <th class="pb-4">Name</th> | |
| <th class="pb-4 text-right">Price</th> | |
| <th class="pb-4 text-right">24h %</th> | |
| <th class="pb-4 text-right">Market Cap</th> | |
| <th class="pb-4 text-right">Chart (7d)</th> | |
| <th class="pb-4 text-right">Trade</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-700 hover:bg-gray-750"> | |
| <td class="py-4">1</td> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/32x32/1" alt="BTC" class="w-8 h-8 mr-3"> | |
| <div> | |
| <p class="font-bold">Bitcoin</p> | |
| <p class="text-gray-400 text-sm">BTC</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 text-right font-bold">$43,256.78</td> | |
| <td class="py-4 text-right text-green-400">+3.25%</td> | |
| <td class="py-4 text-right">$842.5B</td> | |
| <td class="py-4 text-right"> | |
| <img src="http://static.photos/chart/120x40/1" alt="Chart" class="inline"> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-1 rounded-lg text-sm">Trade</button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-750"> | |
| <td class="py-4">2</td> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/32x32/2" alt="ETH" class="w-8 h-8 mr-3"> | |
| <div> | |
| <p class="font-bold">Ethereum</p> | |
| <p class="text-gray-400 text-sm">ETH</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 text-right font-bold">$2,456.32</td> | |
| <td class="py-4 text-right text-red-400">-1.12%</td> | |
| <td class="py-4 text-right">$298.4B</td> | |
| <td class="py-4 text-right"> | |
| <img src="http://static.photos/chart/120x40/2" alt="Chart" class="inline"> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-1 rounded-lg text-sm">Trade</button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-750"> | |
| <td class="py-4">3</td> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/32x32/7" alt="BNB" class="w-8 h-8 mr-3"> | |
| <div> | |
| <p class="font-bold">BNB</p> | |
| <p class="text-gray-400 text-sm">BNB</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 text-right font-bold">$312.45</td> | |
| <td class="py-4 text-right text-green-400">+2.34%</td> | |
| <td class="py-4 text-right">$48.2B</td> | |
| <td class="py-4 text-right"> | |
| <img src="http://static.photos/chart/120x40/3" alt="Chart" class="inline"> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-1 rounded-lg text-sm">Trade</button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-750"> | |
| <td class="py-4">4</td> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/32x32/8" alt="XRP" class="w-8 h-8 mr-3"> | |
| <div> | |
| <p class="font-bold">XRP</p> | |
| <p class="text-gray-400 text-sm">XRP</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 text-right font-bold">$0.6234</td> | |
| <td class="py-4 text-right text-green-400">+0.56%</td> | |
| <td class="py-4 text-right">$34.1B</td> | |
| <td class="py-4 text-right"> | |
| <img src="http://static.photos/chart/120x40/4" alt="Chart" class="inline"> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-1 rounded-lg text-sm">Trade</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4">5</td> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/cryptocurrency/32x32/9" alt="ADA" class="w-8 h-8 mr-3"> | |
| <div> | |
| <p class="font-bold">Cardano</p> | |
| <p class="text-gray-400 text-sm">ADA</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 text-right font-bold">$0.5832</td> | |
| <td class="py-4 text-right text-green-400">+5.21%</td> | |
| <td class="py-4 text-right">$20.6B</td> | |
| <td class="py-4 text-right"> | |
| <img src="http://static.photos/chart/120x40/5" alt="Chart" class="inline"> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-1 rounded-lg text-sm">Trade</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| </div> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |