Spaces:
Running
Running
Desarrolle e implemente completamente una interfaz de usuario y experiencia UX/UI de vanguardia y futurista de m谩ximo rendimiento, 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:
910cf83
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumTrade Pro - Futuristic Trading Platform</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap'); | |
| body { | |
| font-family: 'Exo 2', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .glass-effect { | |
| background: rgba(30, 41, 59, 0.6); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 15px rgba(56, 189, 248, 0.5); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); } | |
| } | |
| .market-up { | |
| color: #4ade80; | |
| } | |
| .market-down { | |
| color: #f87171; | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen grid-pattern"> | |
| <!-- Background Animation --> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Main Content --> | |
| <div class="relative z-10 min-h-screen"> | |
| <!-- Header --> | |
| <header class="glass-effect border-b border-slate-700"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-500 flex items-center justify-center"> | |
| <i data-feather="activity" class="text-white"></i> | |
| </div> | |
| <h1 class="orbitron text-2xl font-bold text-cyan-400">QuantumTrade<span class="text-white">Pro</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="text-cyan-400 border-b-2 border-cyan-400 pb-1">Dashboard</a> | |
| <a href="signals.html" class="text-slate-300 hover:text-cyan-300 transition">Signals</a> | |
| <a href="strategies.html" class="text-slate-300 hover:text-cyan-300 transition">Strategies</a> | |
| <a href="analytics.html" class="text-slate-300 hover:text-cyan-300 transition">Analytics</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-slate-700 transition"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-slate-700 transition"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500"></div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Welcome Section --> | |
| <section class="mb-12"> | |
| <div class="glass-effect rounded-xl p-6 neon-border"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <div> | |
| <h2 class="orbitron text-3xl font-bold mb-2">Welcome back, Trader</h2> | |
| <p class="text-slate-300 max-w-2xl">Your AI-powered trading system is analyzing markets in real-time. Today's opportunities await.</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-right"> | |
| <p class="text-sm text-slate-400">Portfolio Value</p> | |
| <p class="orbitron text-2xl">$124,582.36</p> | |
| </div> | |
| <div class="px-3 py-1 rounded-full bg-emerald-900/30 text-emerald-400 flex items-center"> | |
| <i data-feather="trending-up" class="mr-1"></i> | |
| <span>+2.4%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Grid --> | |
| <section class="mb-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Card 1 --> | |
| <div class="glass-effect rounded-xl p-6 hover:neon-border transition-all duration-300"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Active Signals</p> | |
| <p class="orbitron text-3xl mt-2">24</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-cyan-900/30"> | |
| <i data-feather="zap" class="text-cyan-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <span class="text-emerald-400 text-sm">+12%</span> | |
| <span class="text-slate-500 text-sm ml-2">from last week</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="glass-effect rounded-xl p-6 hover:neon-border transition-all duration-300"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Win Rate</p> | |
| <p class="orbitron text-3xl mt-2">78%</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-emerald-900/30"> | |
| <i data-feather="target" class="text-emerald-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <span class="text-emerald-400 text-sm">+5%</span> | |
| <span class="text-slate-500 text-sm ml-2">from last month</span> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="glass-effect rounded-xl p-6 hover:neon-border transition-all duration-300"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Avg. Return</p> | |
| <p class="orbitron text-3xl mt-2">3.2%</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-amber-900/30"> | |
| <i data-feather="trending-up" class="text-amber-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <span class="text-emerald-400 text-sm">+0.8%</span> | |
| <span class="text-slate-500 text-sm ml-2">this quarter</span> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="glass-effect rounded-xl p-6 hover:neon-border transition-all duration-300"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Risk Score</p> | |
| <p class="orbitron text-3xl mt-2">Low</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-purple-900/30"> | |
| <i data-feather="shield" class="text-purple-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <span class="text-emerald-400 text-sm">Optimal</span> | |
| <span class="text-slate-500 text-sm ml-2">risk profile</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Market Overview & Recent Signals --> | |
| <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> | |
| <!-- Market Overview --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="orbitron text-xl font-semibold">Market Overview</h3> | |
| <button class="text-cyan-400 text-sm flex items-center"> | |
| View All <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Market Item 1 --> | |
| <div class="flex justify-between items-center pb-4 border-b border-slate-700"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold">EUR</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">EUR/USD</p> | |
| <p class="text-slate-400 text-sm">Euro vs US Dollar</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">1.0842</p> | |
| <p class="market-up text-sm flex items-center justify-end"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| +0.32% | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Market Item 2 --> | |
| <div class="flex justify-between items-center pb-4 border-b border-slate-700"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold">BTC</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">BTC/USD</p> | |
| <p class="text-slate-400 text-sm">Bitcoin</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">63,482.15</p> | |
| <p class="market-up text-sm flex items-center justify-end"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| +2.15% | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Market Item 3 --> | |
| <div class="flex justify-between items-center pb-4 border-b border-slate-700"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold">AAPL</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Apple Inc</p> | |
| <p class="text-slate-400 text-sm">NASDAQ</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">192.45</p> | |
| <p class="market-down text-sm flex items-center justify-end"> | |
| <i data-feather="trending-down" class="w-4 h-4 mr-1"></i> | |
| -0.72% | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Market Item 4 --> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold">GOO</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Google</p> | |
| <p class="text-slate-400 text-sm">NASDAQ</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">174.28</p> | |
| <p class="market-up text-sm flex items-center justify-end"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| +1.05% | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Signals --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="orbitron text-xl font-semibold">Recent Signals</h3> | |
| <button class="text-cyan-400 text-sm flex items-center"> | |
| View All <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Signal 1 --> | |
| <div class="flex justify-between items-center pb-4 border-b border-slate-700"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-emerald-500 mr-3"></div> | |
| <div> | |
| <p class="font-medium">BUY Signal</p> | |
| <p class="text-slate-400 text-sm">EUR/USD - 1.0842</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-emerald-400 font-medium">+1.24%</p> | |
| <p class="text-slate-400 text-sm">2 min ago</p> | |
| </div> | |
| </div> | |
| <!-- Signal 2 --> | |
| <div class="flex justify-between items-center pb-4 border-b border-slate-700"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-rose-500 mr-3"></div> | |
| <div> | |
| <p class="font-medium">SELL Signal</p> | |
| <p class="text-slate-400 text-sm">BTC/USD - 63,482</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-rose-400 font-medium">-0.85%</p> | |
| <p class="text-slate-400 text-sm">15 min ago</p> | |
| </div> | |
| </div> | |
| <!-- Signal 3 --> | |
| <div class="flex justify-between items-center pb-4 border-b border-slate-700"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-emerald-500 mr-3"></div> | |
| <div> | |
| <p class="font-medium">BUY Signal</p> | |
| <p class="text-slate-400 text-sm">AAPL - 192.45</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-emerald-400 font-medium">+2.10%</p> | |
| <p class="text-slate-400 text-sm">1 hour ago</p> | |
| </div> | |
| </div> | |
| <!-- Signal 4 --> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-slate-500 mr-3"></div> | |
| <div> | |
| <p class="font-medium">HOLD Signal</p> | |
| <p class="text-slate-400 text-sm">GOOGL - 174.28</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-slate-400 font-medium">0.00%</p> | |
| <p class="text-slate-400 text-sm">3 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Performance Chart --> | |
| <section class="glass-effect rounded-xl p-6 mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="orbitron text-xl font-semibold">Portfolio Performance</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm rounded-lg bg-slate-700">1D</button> | |
| <button class="px-3 py-1 text-sm rounded-lg">1W</button> | |
| <button class="px-3 py-1 text-sm rounded-lg">1M</button> | |
| <button class="px-3 py-1 text-sm rounded-lg">1Y</button> | |
| </div> | |
| </div> | |
| <div class="h-64 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="inline-block p-4 rounded-full bg-cyan-900/20 mb-4"> | |
| <i data-feather="bar-chart-2" class="text-cyan-400 w-12 h-12"></i> | |
| </div> | |
| <p class="text-slate-400">Interactive performance chart would appear here</p> | |
| <p class="text-slate-500 text-sm mt-2">Showing 24-hour performance with 5-minute intervals</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="glass-effect border-t border-slate-700 py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <div class="w-8 h-8 rounded-full bg-cyan-500 flex items-center justify-center"> | |
| <i data-feather="activity" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="orbitron font-bold text-cyan-400">QuantumTrade<span class="text-white">Pro</span></span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Documentation</a> | |
| <a href="#" class="text-slate-400 hover:text-cyan-300 transition">API</a> | |
| <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Support</a> | |
| <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Privacy</a> | |
| </div> | |
| <div class="mt-4 md:mt-0 text-slate-500 text-sm"> | |
| 漏 2025 QuantumTrade Pro. All rights reserved. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x38bdf8, | |
| color2: 0x0ea5e9, | |
| backgroundColor: 0x0f172a, | |
| size: 1.00, | |
| lineColor: 0x0ea5e9 | |
| }); | |
| // Initialize Feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |