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:
0cec5eb
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumTrading Nexus - Dashboard</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> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .dark { | |
| background: #0a0a0a; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(17, 25, 40, 0.75); | |
| backdrop-filter: blur(16px) saturate(180%); | |
| border: 1px solid rgba(255, 255, 255, 0.125); | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), | |
| 0 0 40px rgba(102, 126, 234, 0.3), | |
| 0 0 60px rgba(102, 126, 234, 0.1); | |
| } | |
| .cyber-grid { | |
| background-image: | |
| linear-gradient(rgba(102, 126, 234, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(102, 126, 234, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.05); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .loading-bar { | |
| background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%); | |
| background-size: 200% 100%; | |
| animation: loading 2s linear infinite; | |
| } | |
| @keyframes loading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.1); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-950 text-gray-100 min-h-screen cyber-grid"> | |
| <!-- Navigation Header --> | |
| <nav class="glass-effect fixed top-0 w-full z-50 px-6 py-4"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center"> | |
| <i data-feather="trending-up" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gradient">QuantumTrading Nexus</h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="index.html" class="text-gray-300 hover:text-white transition-colors">Dashboard</a> | |
| <a href="signals.html" class="text-gray-300 hover:text-white transition-colors">Se帽ales</a> | |
| <a href="strategies.html" class="text-gray-300 hover:text-white transition-colors">Estrategias</a> | |
| <a href="analytics.html" class="text-gray-300 hover:text-white transition-colors">An谩lisis</a> | |
| <a href="settings.html" class="text-gray-300 hover:text-white transition-colors">Configuraci贸n</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="relative p-2 glass-effect rounded-lg hover-scale"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full pulse-animation"></span> | |
| </button> | |
| <button class="p-2 glass-effect rounded-lg hover-scale"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| </button> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500"></div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-20 px-6 pb-10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Status Bar --> | |
| <div class="glass-effect rounded-xl p-4 mb-6 fade-in"> | |
| <div class="flex flex-wrap items-center justify-between gap-4"> | |
| <div class="flex items-center space-x-6"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div> | |
| <span class="text-sm text-gray-400">Sistema Activo</span> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| Latencia: <span class="text-green-400 font-mono">12ms</span> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| CPU: <span class="text-yellow-400 font-mono">42%</span> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| 脷ltima actualizaci贸n: <span id="lastUpdate" class="text-white"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="glass-effect rounded-xl p-6 hover-scale slide-in"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="p-3 bg-green-500/20 rounded-lg"> | |
| <i data-feather="trending-up" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| <span class="text-xs text-green-400 bg-green-500/20 px-2 py-1 rounded-full">+12.5%</span> | |
| </div> | |
| <h3 class="text-gray-400 text-sm mb-1">P&L Total</h3> | |
| <p class="text-2xl font-bold">$124,563.89</p> | |
| </div> | |
| <div class="glass-effect rounded-xl p-6 hover-scale slide-in" style="animation-delay: 0.1s"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="p-3 bg-blue-500/20 rounded-lg"> | |
| <i data-feather="activity" class="w-6 h-6 text-blue-400"></i> | |
| </div> | |
| <span class="text-xs text-blue-400 bg-blue-500/20 px-2 py-1 rounded-full">Activo</span> | |
| </div> | |
| <h3 class="text-gray-400 text-sm mb-1">Se帽ales Activas</h3> | |
| <p class="text-2xl font-bold">47</p> | |
| </div> | |
| <div class="glass-effect rounded-xl p-6 hover-scale slide-in" style="animation-delay: 0.2s"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="p-3 bg-purple-500/20 rounded-lg"> | |
| <i data-feather="zap" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <span class="text-xs text-purple-400 bg-purple-500/20 px-2 py-1 rounded-full">98.2%</span> | |
| </div> | |
| <h3 class="text-gray-400 text-sm mb-1">Tasa de 脡xito</h3> | |
| <p class="text-2xl font-bold">98.2%</p> | |
| </div> | |
| <div class="glass-effect rounded-xl p-6 hover-scale slide-in" style="animation-delay: 0.3s"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="p-3 bg-orange-500/20 rounded-lg"> | |
| <i data-feather="shield" class="w-6 h-6 text-orange-400"></i> | |
| </div> | |
| <span class="text-xs text-orange-400 bg-orange-500/20 px-2 py-1 rounded-full">Seguro</span> | |
| </div> | |
| <h3 class="text-gray-400 text-sm mb-1">Risk Score</h3> | |
| <p class="text-2xl font-bold">3.2</p> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Main Chart --> | |
| <div class="lg:col-span-2 glass-effect rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-semibold">Rendimiento del Portafolio</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs glass-effect rounded-lg hover-scale">1D</button> | |
| <button class="px-3 py-1 text-xs bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg">1W</button> | |
| <button class="px-3 py-1 text-xs glass-effect rounded-lg hover-scale">1M</button> | |
| <button class="px-3 py-1 text-xs glass-effect rounded-lg hover-scale">1Y</button> | |
| </div> | |
| </div> | |
| <div id="mainChart" class="h-80"></div> | |
| </div> | |
| <!-- Signal Distribution --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <h2 class="text-xl font-semibold mb-6">Distribuci贸n de Se帽ales</h2> | |
| <div id="pieChart" class="h-80"></div> | |
| </div> | |
| </div> | |
| <!-- Recent Signals Table --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-semibold">Se帽ales Recientes</h2> | |
| <button class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg hover-scale flex items-center space-x-2"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| <span>Actualizar</span> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-800"> | |
| <th class="text-left py-3 px-4 text-gray-400 font-medium">S铆mbolo</th> | |
| <th class="text-left py-3 px-4 text-gray-400 font-medium">Tipo</th> | |
| <th class="text-left py-3 px-4 text-gray-400 font-medium">Precio</th> | |
| <th class="text-left py-3 px-4 text-gray-400 font-medium">Confianza</th> | |
| <th class="text-left py-3 px-4 text-gray-400 font-medium">Estado</th> | |
| <th class="text-left py-3 px-4 text-gray-400 font-medium">Tiempo</th> | |
| </tr> | |
| </thead> | |
| <tbody id="signalsTable"> | |
| <!-- Dynamic content --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Update last update time | |
| function updateTime() { | |
| const now = new Date(); | |
| document.getElementById('lastUpdate').textContent = now.toLocaleTimeString(); | |
| } | |
| updateTime(); | |
| setInterval(updateTime, 1000); | |
| // Initialize Main Chart | |
| const mainChartOptions = { | |
| series: [{ | |
| name: 'Portfolio Value', | |
| data: [45000, 52000, 48000, 61000, 58000, 67000, 72000, 69000, 78000, 82000, 91000, 124563] | |
| }], | |
| chart: { | |
| type: 'area', | |
| height: 320, | |
| background: 'transparent', | |
| toolbar: { show: false }, | |
| animations: { | |
| enabled: true, | |
| easing: 'easeinout', | |
| speed: 800 | |
| } | |
| }, | |
| colors: ['#667eea'], | |
| stroke: { | |
| curve: 'smooth', | |
| width: 3 | |
| }, | |
| fill: { | |
| type: 'gradient', | |
| gradient: { | |
| shadeIntensity: 1, | |
| opacityFrom: 0.7, | |
| opacityTo: 0.1, | |
| stops: [0, 100] | |
| } | |
| }, | |
| grid: { | |
| borderColor: 'rgba(255, 255, 255, 0.1)', | |
| strokeDashArray: 5 | |
| }, | |
| xaxis: { | |
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| labels: { style: { colors: '#9ca3af' } } | |
| }, | |
| yaxis: { | |
| labels: { | |
| style: { colors: '#9ca3af' }, | |
| formatter: function (val) { | |
| return '$' + (val / 1000) + 'k'; | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| theme: 'dark', | |
| y: { | |
| formatter: function (val) { | |
| return '$' + val.toLocaleString(); | |
| } | |
| } | |
| } | |
| }; | |
| const mainChart = new ApexCharts(document.querySelector("#mainChart"), mainChartOptions); | |
| mainChart.render(); | |
| // Initialize Pie Chart | |
| const pieChartOptions = { | |
| series: [44, 33, 23], | |
| chart: { | |
| type: 'donut', | |
| height: 320, | |
| background: 'transparent' | |
| }, | |
| colors: ['#10b981', '#f59e0b', '#ef4444'], | |
| labels: ['BUY', 'SELL', 'HOLD'], | |
| stroke: { show: false }, | |
| dataLabels: { | |
| style: { colors: ['#fff'] } | |
| }, | |
| legend: { | |
| position: 'bottom', | |
| labels: { colors: '#9ca3af' } | |
| }, | |
| tooltip: { | |
| theme: 'dark' | |
| } | |
| }; | |
| const pieChart = new ApexCharts(document.querySelector("#pieChart"), pieChartOptions); | |
| pieChart.render(); | |
| // Generate mock signals data | |
| const signalsData = [ | |
| { symbol: 'EURUSD', type: 'BUY', price: 1.0845, confidence: 92, status: 'ACTIVE', time: '2 min ago' }, | |
| { symbol: 'GBPUSD', type: 'SELL', price: 1.2723, confidence: 88, status: 'EXECUTED', time: '5 min ago' }, | |
| { symbol: 'USDJPY', type: 'BUY', price: 148.56, confidence: 95, status: 'ACTIVE', time: '8 min ago' }, | |
| { symbol: 'AUDUSD', type: 'HOLD', price: 0.6543, confidence: 76, status: 'MONITORING', time: '12 min ago' }, | |
| { symbol: 'USDCAD', type: 'SELL', price: 1.3678, confidence: 90, status: 'ACTIVE', time: '15 min ago' } | |
| ]; | |
| // Populate signals table | |
| const signalsTable = document.getElementById('signalsTable'); | |
| signalsData.forEach(signal => { | |
| const row = document.createElement('tr'); | |
| row.className = 'border-b border-gray-800 hover:bg-gray-900/50 transition-colors'; | |
| const typeColor = signal.type === 'BUY' ? 'text-green-400' : signal.type === 'SELL' ? 'text-red-400' : 'text-yellow-400'; | |
| const statusColor = signal.status === 'ACTIVE' ? 'bg-green-500/20 text-green-400' : | |
| signal.status === 'EXECUTED' ? 'bg-blue-500/20 text-blue-400' : | |
| 'bg-yellow-500/20 text-yellow-400'; | |
| row.innerHTML = ` | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <span class="text-xs font-bold">${signal.symbol.substring(0, 3)}</span> | |
| </div> | |
| <span class="font-medium">${signal.symbol}</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <span class="${typeColor} font-medium">${signal.type}</span> | |
| </td> | |
| <td class="py-3 px-4 font-mono">${signal.price}</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="h-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500" 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 text-xs rounded-full ${statusColor}">${signal.status}</span> | |
| </td> | |
| <td class="py-3 px-4 text-gray-400 text-sm">${signal.time}</td> | |
| `; | |
| signalsTable.appendChild(row); | |
| }); | |
| // Add smooth animations | |
| anime({ | |
| targets: '.slide-in', | |
| translateX: [50, 0], | |
| opacity: [0, 1], | |
| delay: anime.stagger(100), | |
| duration: 800, | |
| easing: 'easeOutQuad' | |
| }); | |
| // Simulate real-time updates | |
| setInterval(() => { | |
| // Update random metric | |
| const metrics = document.querySelectorAll('.text-2xl.font-bold'); | |
| const randomMetric = metrics[Math.floor(Math.random() * metrics.length)]; | |
| anime({ | |
| targets: randomMetric, | |
| scale: [1, 1.1, 1], | |
| duration: 500, | |
| easing: 'easeInOutQuad' | |
| }); | |
| }, 5000); | |
| </script> | |
| </body> | |
| </html> | |