-
-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
203 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,203 @@ | ||
| <html> | ||
| <head> | ||
| <title> | ||
| Fantasy Exchange - The Most Super Advanced High-Tech Exchange in the Universe | ||
| </title> | ||
| <script src="https://cdn.tailwindcss.com"> | ||
| </script> | ||
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"/> | ||
| <style> | ||
| body { | ||
| font-family: 'Roboto', sans-serif; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body class="bg-gray-900 text-white"> | ||
| <div class="flex h-screen"> | ||
| <!-- Sidebar --> | ||
| <div class="w-1/5 bg-gray-800 p-4"> | ||
| <div class="text-center mb-6"> | ||
| <h1 class="text-2xl font-bold"> | ||
| Fantasy Exchange | ||
| </h1> | ||
| <p class="text-sm text-gray-400"> | ||
| The Most Super Advanced High-Tech Exchange in the Universe | ||
| </p> | ||
| </div> | ||
| <nav> | ||
| <ul> | ||
| <li class="mb-4"> | ||
| <a class="flex items-center text-gray-400 hover:text-white" href="#"> | ||
| <i class="fas fa-home mr-2"> | ||
| </i> | ||
| Home | ||
| </a> | ||
| </li> | ||
| <li class="mb-4"> | ||
| <a class="flex items-center text-gray-400 hover:text-white" href="#"> | ||
| <i class="fas fa-chart-line mr-2"> | ||
| </i> | ||
| Markets | ||
| </a> | ||
| </li> | ||
| <li class="mb-4"> | ||
| <a class="flex items-center text-gray-400 hover:text-white" href="#"> | ||
| <i class="fas fa-wallet mr-2"> | ||
| </i> | ||
| Wallet | ||
| </a> | ||
| </li> | ||
| <li class="mb-4"> | ||
| <a class="flex items-center text-gray-400 hover:text-white" href="#"> | ||
| <i class="fas fa-cog mr-2"> | ||
| </i> | ||
| Settings | ||
| </a> | ||
| </li> | ||
| <li class="mb-4"> | ||
| <a class="flex items-center text-gray-400 hover:text-white" href="#"> | ||
| <i class="fas fa-robot mr-2"> | ||
| </i> | ||
| AI Assistant | ||
| </a> | ||
| </li> | ||
| <li class="mb-4"> | ||
| <a class="flex items-center text-gray-400 hover:text-white" href="#"> | ||
| <i class="fas fa-shield-alt mr-2"> | ||
| </i> | ||
| Security | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| <!-- Main Content --> | ||
| <div class="w-4/5 p-6"> | ||
| <!-- Top Bar --> | ||
| <div class="flex justify-between items-center mb-6"> | ||
| <div class="flex items-center"> | ||
| <input class="bg-gray-700 text-white p-2 rounded-lg mr-4" placeholder="Search..." type="text"/> | ||
| <button class="bg-blue-600 p-2 rounded-lg"> | ||
| Search | ||
| </button> | ||
| </div> | ||
| <div class="flex items-center"> | ||
| <button class="bg-gray-700 p-2 rounded-lg mr-4"> | ||
| <i class="fas fa-bell"> | ||
| </i> | ||
| </button> | ||
| <button class="bg-gray-700 p-2 rounded-lg"> | ||
| <i class="fas fa-user"> | ||
| </i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <!-- Chart --> | ||
| <div class="bg-gray-800 p-6 rounded-lg mb-6"> | ||
| <h2 class="text-xl font-bold mb-4"> | ||
| Market Overview | ||
| </h2> | ||
| <img alt="Chart showing market trends" class="w-full h-64 object-cover rounded-lg" height="400" src="https://storage.googleapis.com/a1aa/image/cAVHopfTeHtAdE2Cu1eRXgQszDBiGrq4xfc5bbzBTTFWPELOB.jpg" width="800"/> | ||
| </div> | ||
| <!-- Table --> | ||
| <div class="bg-gray-800 p-6 rounded-lg"> | ||
| <h2 class="text-xl font-bold mb-4"> | ||
| Recent Transactions | ||
| </h2> | ||
| <table class="w-full text-left"> | ||
| <thead> | ||
| <tr> | ||
| <th class="pb-2"> | ||
| Asset | ||
| </th> | ||
| <th class="pb-2"> | ||
| Price | ||
| </th> | ||
| <th class="pb-2"> | ||
| Change | ||
| </th> | ||
| <th class="pb-2"> | ||
| Volume | ||
| </th> | ||
| <th class="pb-2"> | ||
| Time | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr class="border-t border-gray-700"> | ||
| <td class="py-2"> | ||
| Bitcoin | ||
| </td> | ||
| <td class="py-2"> | ||
| $50,000 | ||
| </td> | ||
| <td class="py-2 text-green-500"> | ||
| +5% | ||
| </td> | ||
| <td class="py-2"> | ||
| 1,200 BTC | ||
| </td> | ||
| <td class="py-2"> | ||
| 10:30 AM | ||
| </td> | ||
| </tr> | ||
| <tr class="border-t border-gray-700"> | ||
| <td class="py-2"> | ||
| Ethereum | ||
| </td> | ||
| <td class="py-2"> | ||
| $4,000 | ||
| </td> | ||
| <td class="py-2 text-red-500"> | ||
| -2% | ||
| </td> | ||
| <td class="py-2"> | ||
| 5,000 ETH | ||
| </td> | ||
| <td class="py-2"> | ||
| 10:45 AM | ||
| </td> | ||
| </tr> | ||
| <tr class="border-t border-gray-700"> | ||
| <td class="py-2"> | ||
| Ripple | ||
| </td> | ||
| <td class="py-2"> | ||
| $1.20 | ||
| </td> | ||
| <td class="py-2 text-green-500"> | ||
| +1% | ||
| </td> | ||
| <td class="py-2"> | ||
| 10,000 XRP | ||
| </td> | ||
| <td class="py-2"> | ||
| 11:00 AM | ||
| </td> | ||
| </tr> | ||
| <tr class="border-t border-gray-700"> | ||
| <td class="py-2"> | ||
| Litecoin | ||
| </td> | ||
| <td class="py-2"> | ||
| $200 | ||
| </td> | ||
| <td class="py-2 text-green-500"> | ||
| +3% | ||
| </td> | ||
| <td class="py-2"> | ||
| 2,000 LTC | ||
| </td> | ||
| <td class="py-2"> | ||
| 11:15 AM | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |