Spaces:
Running
Running
Desarrolle e implemente completamente una interfaz de usuario y experiencia UX/UI de vanguardia 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:
08ce598
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Signals - QuantumTrade Matrix</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://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .glass-morphism { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .trading-card { | |
| background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .trading-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3); | |
| } | |
| .quantum-button { | |
| background: linear-gradient(45deg, #3b82f6, #8b5cf6); | |
| transition: all 0.3s ease; | |
| } | |
| .quantum-button:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4); | |
| } | |
| .signal-buy { | |
| background: #10b981; | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); | |
| } | |
| .signal-sell { | |
| background: #ef4444; | |
| box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); | |
| } | |
| .signal-hold { | |
| background: #f59e0b; | |
| box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); | |
| } | |
| .price-ticker { | |
| font-family: 'Courier New', monospace; | |
| font-weight: bold; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .sidebar-item { | |
| transition: all 0.3s ease; | |
| border-left: 3px solid transparent; | |
| } | |
| .sidebar-item:hover { | |
| background: rgba(59, 130, 246, 0.1); | |
| border-left-color: #3b82f6; | |
| } | |
| .sidebar-item.active { | |
| background: rgba(59, 130, 246, 0.2); | |
| border-left-color: #3b82f6; | |
| } | |
| .signal-card { | |
| background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .signal-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 40px rgba(59, 130, 246, 0.2); | |
| } | |
| .filter-chip { | |
| background: rgba(59, 130, 246, 0.1); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .filter-chip:hover, .filter-chip.active { | |
| background: rgba(59, 130, 246, 0.3); | |
| border-color: #3b82f6; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .signal-item { | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full z-50 glass-morphism"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"> | |
| <i data-feather="trending-up" class="w-6 h-6"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> | |
| QuantumTrade Matrix | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full pulse"></div> | |
| <span class="text-sm">System Online</span> | |
| </div> | |
| <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Layout --> | |
| <div class="flex pt-20"> | |
| <!-- Sidebar --> | |
| <aside class="fixed left-0 top-20 w-64 h-full bg-gray-900 bg-opacity-80 border-r border-gray-800 p-6 overflow-y-auto"> | |
| <nav class="space-y-2"> | |
| <a href="dashboard.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="signals.html" class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg"> | |
| <i data-feather="radio" class="w-5 h-5"></i> | |
| <span>Signals</span> | |
| </a> | |
| <a href="strategies.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg"> | |
| <i data-feather="target" class="w-5 h-5"></i> | |
| <span>Strategies</span> | |
| </a> | |
| <a href="portfolio.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg"> | |
| <i data-feather="briefcase" class="w-5 h-5"></i> | |
| <span>Portfolio</span> | |
| </a> | |
| <a href="settings.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| <span>Settings</span> | |
| </a> | |
| </nav> | |
| <div class="mt-8 p-4 glass-morphism rounded-lg"> | |
| <h4 class="font-semibold mb-2">Signal Stats</h4> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Total Signals</span> | |
| <span class="text-blue-400">1,247</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Success Rate</span> | |
| <span class="text-green-400">78.5%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Avg. P&L</span> | |
| <span class="text-green-400">+45 pips</span> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="ml-64 flex-1 p-6"> | |
| <!-- Filters --> | |
| <div class="mb-8"> | |
| <h2 class="text-3xl font-bold mb-6">Trading Signals</h2> | |
| <div class="flex flex-wrap gap-3 mb-6"> | |
| <button class="filter-chip active px-4 py-2 rounded-lg text-sm">All Signals</button> | |
| <button class="filter-chip px-4 py-2 rounded-lg text-sm">Buy Only</button> | |
| <button class="filter-chip px-4 py-2 rounded-lg text-sm">Sell Only</button> | |
| <button class="filter-chip px-4 py-2 rounded-lg text-sm">High Confidence</button> | |
| <button class="filter-chip px-4 py-2 rounded-lg text-sm">Recent</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2"> | |
| <option>All Symbols</option> | |
| <option>EUR/USD</option> | |
| <option>GBP/USD</option> | |
| <option>USD/JPY</option> | |
| <option>AUD/USD</option> | |
| </select> | |
| <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2"> | |
| <option>All Timeframes</option> | |
| <option>1 Minute</option> | |
| <option>5 Minutes</option> | |
| <option>15 Minutes</option> | |
| <option>1 Hour</option> | |
| <option>4 Hours</option> | |
| <option>1 Day</option> | |
| </select> | |
| <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2"> | |
| <option>All Strategies</option> | |
| <option>Scalping</option> | |
| <option>Day Trading</option> | |
| <option>Swing Trading</option> | |
| <option>Position Trading</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Signal Cards Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Signal Card 1 --> | |
| <div class="signal-card rounded-xl p-6 signal-item"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <span class="signal-indicator signal-buy"></span> | |
| <div> | |
| <h3 class="font-bold text-lg">EUR/USD</h3> | |
| <p class="text-sm text-gray-400">5 Minute</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="price-ticker text-xl">1.0856</div> | |
| <div class="text-green-400 text-sm">+0.0011</div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Signal Type</span> | |
| <span class="text-green-400 font-semibold">BUY</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Confidence</span> | |
| <div class="flex items-center"> | |
| <div class="w-20 bg-gray-700 rounded-full h-2 mr-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <span class="text-sm">85%</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Entry Price</span> | |
| <span>1.0845</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Take Profit</span> | |
| <span class="text-green-400">1.0865</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Stop Loss</span> | |
| <span class="text-red-400">1.0835</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="quantum-button flex-1 py-2 rounded-lg text-sm"> | |
| Execute | |
| </button> | |
| <button class="flex-1 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Signal Card 2 --> | |
| <div class="signal-card rounded-xl p-6 signal-item" style="animation-delay: 0.1s;"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <span class="signal-indicator signal-sell"></span> | |
| <div> | |
| <h3 class="font-bold text-lg">GBP/USD</h3> | |
| <p class="text-sm text-gray-400">15 Minute</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="price-ticker text-xl">1.2743</div> | |
| <div class="text-red-400 text-sm">-0.0012</div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Signal Type</span> | |
| <span class="text-red-400 font-semibold">SELL</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Confidence</span> | |
| <div class="flex items-center"> | |
| <div class="w-20 bg-gray-700 rounded-full h-2 mr-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <span class="text-sm">78%</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Entry Price</span> | |
| <span>1.2755</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Take Profit</span> | |
| <span class="text-green-400">1.2735</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Stop Loss</span> | |
| <span class="text-red-400">1.2765</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="quantum-button flex-1 py-2 rounded-lg text-sm"> | |
| Execute | |
| </button> | |
| <button class="flex-1 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Signal Card 3 --> | |
| <div class="signal-card rounded-xl p-6 signal-item" style="animation-delay: 0.2s;"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <span class="signal-indicator signal-hold"></span> | |
| <div> | |
| <h3 class="font-bold text-lg">USD/JPY</h3> | |
| <p class="text-sm text-gray-400">1 Hour</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="price-ticker text-xl">149.82</div> | |
| <div class="text-green-400 text-sm">+0.02</div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Signal Type</span> | |
| <span class="text-yellow-400 font-semibold">HOLD</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Confidence</span> | |
| <div class="flex items-center"> | |
| <div class="w-20 bg-gray-700 rounded-full h-2 mr-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="text-sm">65%</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Entry Price</span> | |
| <span>149.80</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Take Profit</span> | |
| <span class="text-green-400">150.20</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Stop Loss</span> | |
| <span class="text-red-400">149.40</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="quantum-button flex-1 py-2 rounded-lg text-sm"> | |
| Execute | |
| </button> | |
| <button class="flex-1 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detailed Signals Table --> | |
| <div class="trading-card rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-bold">All Signals</h3> | |
| <div class="flex space-x-2"> | |
| <button class="quantum-button px-4 py-2 rounded-lg text-sm"> | |
| Export CSV | |
| </button> | |
| <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700"> | |
| Auto-Trade | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="text-left py-3 px-4">Time</th> | |
| <th class="text-left py-3 px-4">Symbol</th> | |
| <th class="text-left py-3 px-4">Type</th> | |
| <th class="text-left py-3 px-4">Entry</th> | |
| <th class="text-left py-3 px-4">Current</th> | |
| <th class="text-left py-3 px-4">P&L</th> | |
| <th class="text-left py-3 px-4">Confidence</th> | |
| <th class="text-left py-3 px-4">Status</th> | |
| <th class="text-left py-3 px-4">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="signalsTableBody"> | |
| <!-- Signals will be populated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded border border-gray-600 hover:bg-gray-700">Previous</button> | |
| <button class="px-3 py-1 rounded bg-blue-600">1</button> | |
| <button class="px-3 py-1 rounded border border-gray-600 hover:bg-gray-700">2</button> | |
| <button class="px-3 py-1 rounded border border-gray-600 hover:bg-gray-700">3</button> | |
| <button class="px-3 py-1 rounded border border-gray-600 hover:bg-gray-700">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Generate random signals | |
| const symbols = ['EUR/USD', 'GBP/USD', 'USD/JPY', 'AUD/USD', 'USD/CHF', 'NZD/USD']; | |
| const timeframes = ['1m', '5m', '15m', '1h', '4h', '1d']; | |
| const signalTypes = ['BUY', 'SELL', 'HOLD']; | |
| function generateSignals() { | |
| const signals = []; | |
| const now = new Date(); | |
| for (let i = 0; i < 20; i++) { | |
| const time = new Date(now - i * 5 * 60 * 1000); | |
| const symbol = symbols[Math.floor(Math.random() * symbols.length)]; | |
| const type = signalTypes[Math.floor(Math.random() * signalTypes.length)]; | |
| const entry = (1 + Math.random() * 2).toFixed(4); | |
| const current = (parseFloat(entry) + (Math.random() - 0.5) * 0.01).toFixed(4); | |
| const confidence = Math.floor(Math.random() * 30) + 70; | |
| const pips = Math.floor((parseFloat(current) - parseFloat(entry)) * 10000); | |
| signals.push({ | |
| time: time.toLocaleTimeString(), | |
| symbol, | |
| type, | |
| entry, | |
| current, | |
| pips, | |
| confidence, | |
| status: Math.random() > 0.5 ? 'Active' : 'Executed' | |
| }); | |
| } | |
| return signals; | |
| } | |
| function renderSignals() { | |
| const tbody = document.getElementById('signalsTableBody'); | |
| const signals = generateSignals(); | |
| tbody.innerHTML = signals.map(signal => ` | |
| <tr class="border-b border-gray-800 hover:bg-gray-800 signal-item"> | |
| <td class="py-3 px-4 text-gray-400">${signal.time}</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center"> | |
| <span class="signal-indicator signal-${signal.type.toLowerCase()}"></span> | |
| ${signal.symbol} | |
| </div> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <span class="${signal.type === 'BUY' ? 'text-green-400' : signal.type === 'SELL' ? 'text-red-400' : 'text-yellow-400'}"> | |
| ${signal.type} | |
| </span> | |
| </td> | |
| <td class="py-3 px-4">${signal.entry}</td> | |
| <td class="py-3 px-4 price-ticker">${signal.current}</td> | |
| <td class="py-3 px-4 ${signal.pips >= 0 ? 'text-green-400' : 'text-red-400'}"> | |
| ${signal.pips >= 0 ? '+' : ''}${signal.pips} pips | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-700 rounded-full h-2 mr-2"> | |
| <div class="bg-${signal.confidence > 80 ? 'green' : signal.confidence > 60 ? 'yellow' : 'red'}-500 h-2 rounded-full" style="width: ${signal.confidence}%"></div> | |
| </div> | |
| <span class="text-sm">${signal.confidence}%</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <span class="px-2 py-1 rounded text-xs ${signal.status === 'Active' ? 'bg-green-500 bg-opacity-20 text-green-400' : 'bg-blue-500 bg-opacity-20 text-blue-400'}"> | |
| ${signal.status} | |
| </span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <button class="text-blue-400 hover:text-blue-300"> | |
| <i data-feather="more-horizontal" class="w-5 h-5"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| `).join(''); | |
| } | |
| // Initial render | |
| renderSignals(); | |
| // Update signals every 5 seconds | |
| setInterval(renderSignals, 5000); | |
| // Add filter functionality | |
| document.querySelectorAll('.filter-chip').forEach(chip => { | |
| chip.addEventListener('click', function() { | |
| document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active')); | |
| this.classList.add('active'); | |
| renderSignals(); | |
| }); | |
| }); | |
| // Animate signal cards | |
| anime({ | |
| targets: '.signal-card', | |
| opacity: [0, 1], | |
| translateY: [30, 0], | |
| delay: anime.stagger(100), | |
| duration: 800, | |
| easing: 'easeOutQuad' | |
| }); | |
| // Initialize Feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |