Spaces:
Running
Running
Desarrolle e implemente completamente una interfaz de usuario y experiencia UX/UI de vanguardia y futurista de m谩ximo rendimiento, full responsive para todo tipo de dispositivos, implementando el c贸digo en diferentes paginas independientes interconectadas, para la aplicaci贸n detallada en los siguientes diagramas, cumpliendo con los siguientes requisitos t茅cnicos y de dise帽o:
af9f3d2
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Markets | QuantumTrade Nexus</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#3B82F6', | |
| }, | |
| secondary: { | |
| 500: '#10B981', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2); | |
| border-color: rgba(59, 130, 246, 0.3); | |
| } | |
| .market-chart { | |
| height: 300px; | |
| background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.8) 100%); | |
| border-radius: 0.5rem; | |
| position: relative; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen relative"> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold text-primary-500 glow">QT<span class="text-secondary-500">N</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="#" class="text-primary-500 px-3 py-2 rounded-md text-sm font-medium">Markets</a> | |
| <a href="strategies.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Strategies</a> | |
| <a href="analytics.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Analytics</a> | |
| <a href="signals.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Signals</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none"> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/42" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <!-- Market Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white">Market Overview</h1> | |
| <p class="text-gray-400 mt-1">Real-time prices and analytics across all markets</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search markets..." class="bg-gray-700 text-white text-sm rounded-lg pl-10 pr-4 py-2 border border-gray-600 focus:outline-none focus:border-primary-500 w-64"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400 w-5 h-5"></i> | |
| </div> | |
| <select class="bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none"> | |
| <option>All Markets</option> | |
| <option>Forex</option> | |
| <option>Stocks</option> | |
| <option>Crypto</option> | |
| <option>Commodities</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Market Tabs --> | |
| <div class="border-b border-gray-700 mb-6"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <a href="#" class="border-primary-500 text-primary-500 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">All Markets</a> | |
| <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Forex</a> | |
| <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Stocks</a> | |
| <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Crypto</a> | |
| <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Indices</a> | |
| <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Commodities</a> | |
| </nav> | |
| </div> | |
| <!-- Market Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Forex --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/1" alt=""> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-bold text-white">EUR/USD</h3> | |
| <p class="text-sm text-gray-400">Euro / US Dollar</p> | |
| </div> | |
| </div> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/30 text-green-400">Forex</span> | |
| </div> | |
| <div class="market-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Price</p> | |
| <p class="text-xl font-bold text-white">1.0934</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">24h Change</p> | |
| <p class="text-xl font-bold text-green-500 flex items-center"> | |
| <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> +0.42% | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Volume</p> | |
| <p class="text-sm font-medium text-white">2.4M</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Signal</p> | |
| <p class="text-sm font-medium text-primary-500">Strong Buy</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between"> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button> | |
| <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button> | |
| </div> | |
| </div> | |
| <!-- Crypto --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/2" alt=""> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-bold text-white">BTC/USD</h3> | |
| <p class="text-sm text-gray-400">Bitcoin / US Dollar</p> | |
| </div> | |
| </div> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-purple-900/30 text-purple-400">Crypto</span> | |
| </div> | |
| <div class="market-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Price</p> | |
| <p class="text-xl font-bold text-white">42,850.00</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">24h Change</p> | |
| <p class="text-xl font-bold text-red-500 flex items-center"> | |
| <i data-feather="arrow-down" class="w-4 h-4 mr-1"></i> -1.87% | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Volume</p> | |
| <p class="text-sm font-medium text-white">18.2K BTC</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Signal</p> | |
| <p class="text-sm font-medium text-yellow-500">Hold</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between"> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button> | |
| <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button> | |
| </div> | |
| </div> | |
| <!-- Stock --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/3" alt=""> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-bold text-white">AAPL</h3> | |
| <p class="text-sm text-gray-400">Apple Inc.</p> | |
| </div> | |
| </div> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-900/30 text-blue-400">Stock</span> | |
| </div> | |
| <div class="market-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Price</p> | |
| <p class="text-xl font-bold text-white">185.32</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">24h Change</p> | |
| <p class="text-xl font-bold text-green-500 flex items-center"> | |
| <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> +2.15% | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Volume</p> | |
| <p class="text-sm font-medium text-white">12.8M</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Signal</p> | |
| <p class="text-sm font-medium text-primary-500">Buy</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between"> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button> | |
| <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button> | |
| </div> | |
| </div> | |
| <!-- Stock 2 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/4" alt=""> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-bold text-white">TSLA</h3> | |
| <p class="text-sm text-gray-400">Tesla Inc.</p> | |
| </div> | |
| </div> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-900/30 text-blue-400">Stock</span> | |
| </div> | |
| <div class="market-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Price</p> | |
| <p class="text-xl font-bold text-white">210.45</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">24h Change</p> | |
| <p class="text-xl font-bold text-red-500 flex items-center"> | |
| <i data-feather="arrow-down" class="w-4 h-4 mr-1"></i> -3.22% | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Volume</p> | |
| <p class="text-sm font-medium text-white">8.5M</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Signal</p> | |
| <p class="text-sm font-medium text-red-500">Sell</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between"> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button> | |
| <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button> | |
| </div> | |
| </div> | |
| <!-- Forex 2 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/5" alt=""> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-bold text-white">GBP/USD</h3> | |
| <p class="text-sm text-gray-400">British Pound / US Dollar</p> | |
| </div> | |
| </div> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/30 text-green-400">Forex</span> | |
| </div> | |
| <div class="market-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Price</p> | |
| <p class="text-xl font-bold text-white">1.2745</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">24h Change</p> | |
| <p class="text-xl font-bold text-green-500 flex items-center"> | |
| <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> +0.18% | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Volume</p> | |
| <p class="text-sm font-medium text-white">1.8M</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Signal</p> | |
| <p class="text-sm font-medium text-primary-500">Buy</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between"> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button> | |
| <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button> | |
| </div> | |
| </div> | |
| <!-- Crypto 2 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/6" alt=""> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-bold text-white">ETH/USD</h3> | |
| <p class="text-sm text-gray-400">Ethereum / US Dollar</p> | |
| </div> | |
| </div> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-purple-900/30 text-purple-400">Crypto</span> | |
| </div> | |
| <div class="market-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Price</p> | |
| <p class="text-xl font-bold text-white">2,305.42</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">24h Change</p> | |
| <p class="text-xl font-bold text-red-500 flex items-center"> | |
| <i data-feather="arrow-down" class="w-4 h-4 mr-1"></i> -0.92% | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Volume</p> | |
| <p class="text-sm font-medium text-white">245K ETH</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Signal</p> | |
| <p class="text-sm font-medium text-yellow-500">Hold</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between"> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button> | |
| <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex items-center justify-between mt-8"> | |
| <div class="text-sm text-gray-400"> | |
| Showing <span class="font-medium text-white">1</span> to <span class="font-medium text-white">6</span> of <span class="font-medium text-white">24</span> markets | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">Previous</button> | |
| <button class="px-3 py-1 rounded-md bg-primary-500 text-white text-sm font-medium">1</button> | |
| <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">2</button> | |
| <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">3</button> | |
| <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">Next</button> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0x111827, | |
| points: 10.00, | |
| maxDistance: 20.00, | |
| spacing: 18.00 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |