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>Trading Signals | QuantumTrade Pro</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> | |
| <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); | |
| } | |
| .market-up { | |
| color: #4ade80; | |
| } | |
| .market-down { | |
| color: #f87171; | |
| } | |
| .signal-buy { | |
| background: rgba(34, 197, 94, 0.1); | |
| border-left: 3px solid #22c55e; | |
| } | |
| .signal-sell { | |
| background: rgba(239, 68, 68, 0.1); | |
| border-left: 3px solid #ef4444; | |
| } | |
| .signal-hold { | |
| background: rgba(148, 163, 184, 0.1); | |
| border-left: 3px solid #94a3b8; | |
| } | |
| .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"> | |
| <!-- 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-slate-300 hover:text-cyan-300 transition">Dashboard</a> | |
| <a href="signals.html" class="text-cyan-400 border-b-2 border-cyan-400 pb-1">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 --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Page Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> | |
| <div> | |
| <h1 class="orbitron text-3xl font-bold mb-2">Trading Signals</h1> | |
| <p class="text-slate-400">Real-time signals generated by our AI algorithms</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex space-x-3"> | |
| <button class="px-4 py-2 rounded-lg glass-effect hover:neon-border transition flex items-center"> | |
| <i data-feather="filter" class="w-4 h-4 mr-2"></i> | |
| Filter | |
| </button> | |
| <button class="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition flex items-center"> | |
| <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i> | |
| Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Filters --> | |
| <div class="glass-effect rounded-xl p-6 mb-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-slate-400 text-sm mb-2">Symbol</label> | |
| <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option>All Symbols</option> | |
| <option>EUR/USD</option> | |
| <option>BTC/USD</option> | |
| <option>AAPL</option> | |
| <option>GOOGL</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm mb-2">Signal Type</label> | |
| <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option>All Types</option> | |
| <option>Buy</option> | |
| <option>Sell</option> | |
| <option>Hold</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm mb-2">Time Range</label> | |
| <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option>Last Hour</option> | |
| <option>Last 24 Hours</option> | |
| <option>Last Week</option> | |
| <option>Last Month</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-slate-400 text-sm mb-2">Status</label> | |
| <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option>All Statuses</option> | |
| <option>Active</option> | |
| <option>Executed</option> | |
| <option>Rejected</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Signals Table --> | |
| <div class="glass-effect rounded-xl overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead class="border-b border-slate-700"> | |
| <tr> | |
| <th class="py-4 px-6 text-left text-slate-400 font-normal">Symbol</th> | |
| <th class="py-4 px-6 text-left text-slate-400 font-normal">Type</th> | |
| <th class="py-4 px-6 text-left text-slate-400 font-normal">Price</th> | |
| <th class="py-4 px-6 text-left text-slate-400 font-normal">Strength</th> | |
| <th class="py-4 px-6 text-left text-slate-400 font-normal">Timestamp</th> | |
| <th class="py-4 px-6 text-left text-slate-400 font-normal">Status</th> | |
| <th class="py-4 px-6 text-left text-slate-400 font-normal">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Signal Row 1 --> | |
| <tr class="signal-buy border-b border-slate-700 hover:bg-slate-800/50 transition"> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold text-xs">EUR</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">EUR/USD</p> | |
| <p class="text-slate-400 text-sm">Forex</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">BUY</span> | |
| </td> | |
| <td class="py-4 px-6">1.0842</td> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-24 bg-slate-700 rounded-full h-2 mr-2"> | |
| <div class="bg-emerald-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <span>85%</span> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6">2025-04-05 14:32:18</td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">ACTIVE</span> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <button class="text-cyan-400 hover:text-cyan-300 mr-3"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-amber-400 hover:text-amber-300"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <!-- Signal Row 2 --> | |
| <tr class="signal-sell border-b border-slate-700 hover:bg-slate-800/50 transition"> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold text-xs">BTC</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">BTC/USD</p> | |
| <p class="text-slate-400 text-sm">Crypto</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-rose-900/30 text-rose-400 text-xs">SELL</span> | |
| </td> | |
| <td class="py-4 px-6">63,482.15</td> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-24 bg-slate-700 rounded-full h-2 mr-2"> | |
| <div class="bg-rose-500 h-2 rounded-full" style="width: 72%"></div> | |
| </div> | |
| <span>72%</span> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6">2025-04-05 14:15:42</td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-slate-700 text-slate-300 text-xs">EXECUTED</span> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <button class="text-cyan-400 hover:text-cyan-300 mr-3"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-slate-500 cursor-not-allowed"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <!-- Signal Row 3 --> | |
| <tr class="signal-buy border-b border-slate-700 hover:bg-slate-800/50 transition"> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold text-xs">AAPL</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Apple Inc</p> | |
| <p class="text-slate-400 text-sm">Stock</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">BUY</span> | |
| </td> | |
| <td class="py-4 px-6">192.45</td> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-24 bg-slate-700 rounded-full h-2 mr-2"> | |
| <div class="bg-emerald-500 h-2 rounded-full" style="width: 91%"></div> | |
| </div> | |
| <span>91%</span> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6">2025-04-05 13:48:33</td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">ACTIVE</span> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <button class="text-cyan-400 hover:text-cyan-300 mr-3"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-amber-400 hover:text-amber-300"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <!-- Signal Row 4 --> | |
| <tr class="signal-hold border-b border-slate-700 hover:bg-slate-800/50 transition"> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold text-xs">GOO</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Google</p> | |
| <p class="text-slate-400 text-sm">Stock</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-slate-700 text-slate-300 text-xs">HOLD</span> | |
| </td> | |
| <td class="py-4 px-6">174.28</td> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-24 bg-slate-700 rounded-full h-2 mr-2"> | |
| <div class="bg-slate-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <span>45%</span> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6">2025-04-05 12:21:07</td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-slate-700 text-slate-300 text-xs">REJECTED</span> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <button class="text-cyan-400 hover:text-cyan-300 mr-3"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-slate-500 cursor-not-allowed"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <!-- Signal Row 5 --> | |
| <tr class="signal-buy hover:bg-slate-800/50 transition"> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3"> | |
| <span class="font-bold text-xs">ETH</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">ETH/USD</p> | |
| <p class="text-slate-400 text-sm">Crypto</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">BUY</span> | |
| </td> | |
| <td class="py-4 px-6">3,421.67</td> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-24 bg-slate-700 rounded-full h-2 mr-2"> | |
| <div class="bg-emerald-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <span>78%</span> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6">2025-04-05 11:56:44</td> | |
| <td class="py-4 px-6"> | |
| <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">ACTIVE</span> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <button class="text-cyan-400 hover:text-cyan-300 mr-3"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-amber-400 hover:text-amber-300"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="border-t border-slate-700 px-6 py-4 flex justify-between items-center"> | |
| <p class="text-slate-400">Showing 1 to 5 of 24 signals</p> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-lg glass-effect flex items-center justify-center"> | |
| <i data-feather="chevron-left" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-lg bg-cyan-600 flex items-center justify-center">1</button> | |
| <button class="w-8 h-8 rounded-lg glass-effect flex items-center justify-center">2</button> | |
| <button class="w-8 h-8 rounded-lg glass-effect flex items-center justify-center">3</button> | |
| <button class="w-8 h-8 rounded-lg glass-effect flex items-center justify-center"> | |
| <i data-feather="chevron-right" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="glass-effect border-t border-slate-700 py-6 mt-12"> | |
| <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> | |
| <script> | |
| // Initialize Feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |