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>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); | |
| } | |
| </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="#" class="text-primary-500 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="markets.html" class="text-gray-300 hover:text-white 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"> | |
| <!-- Stats Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-400">Portfolio Value</p> | |
| <h3 class="text-2xl font-bold text-white mt-1">$42,850.00</h3> | |
| <p class="text-sm text-green-500 mt-1 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> 12.3% this week | |
| </p> | |
| </div> | |
| <div class="bg-primary-500/10 p-3 rounded-lg"> | |
| <i data-feather="dollar-sign" class="text-primary-500 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-400">Active Trades</p> | |
| <h3 class="text-2xl font-bold text-white mt-1">8</h3> | |
| <p class="text-sm text-green-500 mt-1 flex items-center"> | |
| <i data-feather="activity" class="w-4 h-4 mr-1"></i> 4 new today | |
| </p> | |
| </div> | |
| <div class="bg-secondary-500/10 p-3 rounded-lg"> | |
| <i data-feather="bar-chart-2" class="text-secondary-500 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-400">Today's P&L</p> | |
| <h3 class="text-2xl font-bold text-white mt-1">$1,245.50</h3> | |
| <p class="text-sm text-green-500 mt-1 flex items-center"> | |
| <i data-feather="arrow-up-right" class="w-4 h-4 mr-1"></i> 3.1% today | |
| </p> | |
| </div> | |
| <div class="bg-purple-500/10 p-3 rounded-lg"> | |
| <i data-feather="dollar-sign" class="text-purple-500 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-400">Win Rate</p> | |
| <h3 class="text-2xl font-bold text-white mt-1">78.6%</h3> | |
| <p class="text-sm text-green-500 mt-1 flex items-center"> | |
| <i data-feather="check-circle" class="w-4 h-4 mr-1"></i> 2.2% better | |
| </p> | |
| </div> | |
| <div class="bg-yellow-500/10 p-3 rounded-lg"> | |
| <i data-feather="target" class="text-yellow-500 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Market Overview --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold text-white">Market Overview</h2> | |
| <div class="flex space-x-2"> | |
| <select class="bg-gray-700 text-white text-sm rounded-lg px-3 py-1 border border-gray-600 focus:outline-none"> | |
| <option>All Markets</option> | |
| <option>Forex</option> | |
| <option>Stocks</option> | |
| <option>Crypto</option> | |
| </select> | |
| <select class="bg-gray-700 text-white text-sm rounded-lg px-3 py-1 border border-gray-600 focus:outline-none"> | |
| <option>Today</option> | |
| <option>This Week</option> | |
| <option>This Month</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-700"> | |
| <thead> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Symbol</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Price</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Change</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Volume</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Signal</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-700"> | |
| <tr class="hover:bg-gray-700/50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/1" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">EUR/USD</div> | |
| <div class="text-sm text-gray-400">Forex</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">1.0934</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-100"> | |
| +0.42% | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400"> | |
| 2.4M | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary-900 text-primary-200"> | |
| <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> Strong Buy | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-primary-500 hover:text-primary-400">Trade</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-700/50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/2" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">BTC/USD</div> | |
| <div class="text-sm text-gray-400">Crypto</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">42,850.00</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-100"> | |
| -1.87% | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400"> | |
| 18.2K BTC | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-900 text-yellow-200"> | |
| <i data-feather="minus" class="w-3 h-3 mr-1"></i> Hold | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-primary-500 hover:text-primary-400">Trade</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-700/50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/3" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">AAPL</div> | |
| <div class="text-sm text-gray-400">Stock</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">185.32</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-100"> | |
| +2.15% | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400"> | |
| 12.8M | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary-900 text-primary-200"> | |
| <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> Buy | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-primary-500 hover:text-primary-400">Trade</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-700/50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/4" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">TSLA</div> | |
| <div class="text-sm text-gray-400">Stock</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">210.45</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-100"> | |
| -3.22% | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400"> | |
| 8.5M | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-200"> | |
| <i data-feather="arrow-down" class="w-3 h-3 mr-1"></i> Sell | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-primary-500 hover:text-primary-400">Trade</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Recent Signals & Performance --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Recent Signals --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold text-white">Recent Signals</h2> | |
| <button class="text-sm text-primary-500 hover:text-primary-400">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start p-3 rounded-lg hover:bg-gray-700/30 transition-colors"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <span class="h-8 w-8 rounded-full bg-green-900/30 flex items-center justify-center"> | |
| <i data-feather="arrow-up" class="text-green-500 w-4 h-4"></i> | |
| </span> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-white">EUR/USD</h3> | |
| <span class="text-xs text-gray-400">2 min ago</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mt-1">Strong buy signal detected with 87% confidence</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-900/30 text-green-400">Trend: Bullish</span> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-900/30 text-blue-400">AI Model: v4.2</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 rounded-lg hover:bg-gray-700/30 transition-colors"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <span class="h-8 w-8 rounded-full bg-red-900/30 flex items-center justify-center"> | |
| <i data-feather="arrow-down" class="text-red-500 w-4 h-4"></i> | |
| </span> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-white">TSLA</h3> | |
| <span class="text-xs text-gray-400">15 min ago</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mt-1">Sell recommendation with 76% confidence</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-900/30 text-red-400">Trend: Bearish</span> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-900/30 text-blue-400">AI Model: v4.2</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 rounded-lg hover:bg-gray-700/30 transition-colors"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <span class="h-8 w-8 rounded-full bg-yellow-900/30 flex items-center justify-center"> | |
| <i data-feather="minus" class="text-yellow-500 w-4 h-4"></i> | |
| </span> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-white">BTC/USD</h3> | |
| <span class="text-xs text-gray-400">32 min ago</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mt-1">Hold position - market consolidating</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-900/30 text-yellow-400">Trend: Neutral</span> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-900/30 text-blue-400">AI Model: v4.2</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold text-white">Performance Metrics</h2> | |
| <div class="flex space-x-2"> | |
| <select class="bg-gray-700 text-white text-sm rounded-lg px-2 py-1 border border-gray-600 focus:outline-none"> | |
| <option>This Week</option> | |
| <option>This Month</option> | |
| <option>This Year</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-300">Win Rate</span> | |
| <span class="text-sm font-medium text-white">78.6%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 78.6%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-300">Profit Factor</span> | |
| <span class="text-sm font-medium text-white">2.4</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-300">Sharpe Ratio</span> | |
| <span class="text-sm font-medium text-white">1.8</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-300">Max Drawdown</span> | |
| <span class="text-sm font-medium text-white">-8.2%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 16.4%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-300">Risk/Reward</span> | |
| <span class="text-sm font-medium text-white">1:2.7</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </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(); | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |