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>Estrategias - QuantumTrading Nexus</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> | |
| @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); | |
| } | |
| .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; } | |
| } | |
| .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; | |
| } | |
| ::-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-white">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"> | |
| <!-- Page Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-3xl font-bold mb-2">Centro de Estrategias</h1> | |
| <p class="text-gray-400">Gesti贸n y optimizaci贸n de estrategias de trading</p> | |
| </div> | |
| <div class="flex space-x-3 mt-4 md:mt-0"> | |
| <button class="px-4 py-2 glass-effect rounded-lg hover-scale flex items-center space-x-2"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| <span>Importar</span> | |
| </button> | |
| <button class="px-4 py-2 gradient-bg rounded-lg hover-scale flex items-center space-x-2"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| <span>Nueva Estrategia</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Strategy Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="glass-effect rounded-xl p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Estrategias Activas</p> | |
| <p class="text-2xl font-bold">12</p> | |
| </div> | |
| <div class="p-3 bg-green-500/20 rounded-lg"> | |
| <i data-feather="play-circle" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-xl p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Rendimiento Total</p> | |
| <p class="text-2xl font-bold text-green-400">+47.3%</p> | |
| </div> | |
| <div class="p-3 bg-blue-500/20 rounded-lg"> | |
| <i data-feather="trending-up" class="w-6 h-6 text-blue-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-xl p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Sharpe Ratio</p> | |
| <p class="text-2xl font-bold">2.84</p> | |
| </div> | |
| <div class="p-3 bg-purple-500/20 rounded-lg"> | |
| <i data-feather="bar-chart-2" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-xl p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Max Drawdown</p> | |
| <p class="text-2xl font-bold text-red-400">-8.2%</p> | |
| </div> | |
| <div class="p-3 bg-orange-500/20 rounded-lg"> | |
| <i data-feather="alert-triangle" class="w-6 h-6 text-orange-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strategy Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Strategy Card 1 --> | |
| <div class="glass-effect rounded-xl p-6 hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">ML Momentum Pro</h3> | |
| <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tipo</span> | |
| <span class="text-sm">Machine Learning</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Rendimiento</span> | |
| <span class="text-green-400 font-semibold">+62.4%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Se帽ales/D铆a</span> | |
| <span class="text-sm">24</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tasa 脡xito</span> | |
| <span class="text-sm">91.2%</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-xs text-gray-400">Confianza Promedio</span> | |
| <span class="text-xs">87.3%</span> | |
| </div> | |
| <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: 87.3%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 px-3 py-2 glass-effect rounded-lg text-sm hover-scale">Configurar</button> | |
| <button class="flex-1 px-3 py-2 gradient-bg rounded-lg text-sm hover-scale">Optimizar</button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 2 --> | |
| <div class="glass-effect rounded-xl p-6 hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Scalper Alpha</h3> | |
| <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tipo</span> | |
| <span class="text-sm">Scalping</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Rendimiento</span> | |
| <span class="text-green-400 font-semibold">+38.7%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Se帽ales/D铆a</span> | |
| <span class="text-sm">156</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tasa 脡xito</span> | |
| <span class="text-sm">88.5%</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-xs text-gray-400">Confianza Promedio</span> | |
| <span class="text-xs">82.1%</span> | |
| </div> | |
| <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: 82.1%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 px-3 py-2 glass-effect rounded-lg text-sm hover-scale">Configurar</button> | |
| <button class="flex-1 px-3 py-2 gradient-bg rounded-lg text-sm hover-scale">Optimizar</button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 3 --> | |
| <div class="glass-effect rounded-xl p-6 hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Swing Master</h3> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full"></div> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tipo</span> | |
| <span class="text-sm">Swing Trading</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Rendimiento</span> | |
| <span class="text-green-400 font-semibold">+41.2%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Se帽ales/D铆a</span> | |
| <span class="text-sm">8</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tasa 脡xito</span> | |
| <span class="text-sm">93.7%</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-xs text-gray-400">Confianza Promedio</span> | |
| <span class="text-xs">89.4%</span> | |
| </div> | |
| <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: 89.4%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 px-3 py-2 glass-effect rounded-lg text-sm hover-scale">Configurar</button> | |
| <button class="flex-1 px-3 py-2 gradient-bg rounded-lg text-sm hover-scale">Optimizar</button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 4 --> | |
| <div class="glass-effect rounded-xl p-6 hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Arbitrage Bot</h3> | |
| <div class="w-3 h-3 bg-gray-500 rounded-full"></div> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tipo</span> | |
| <span class="text-sm">Arbitrage</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Rendimiento</span> | |
| <span class="text-green-400 font-semibold">+18.9%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Se帽ales/D铆a</span> | |
| <span class="text-sm">42</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tasa 脡xito</span> | |
| <span class="text-sm">98.2%</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-xs text-gray-400">Confianza Promedio</span> | |
| <span class="text-xs">94.7%</span> | |
| </div> | |
| <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: 94.7%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 px-3 py-2 glass-effect rounded-lg text-sm hover-scale">Configurar</button> | |
| <button class="flex-1 px-3 py-2 gradient-bg rounded-lg text-sm hover-scale">Activar</button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 5 --> | |
| <div class="glass-effect rounded-xl p-6 hover-scale"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">News Trader Pro</h3> | |
| <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tipo</span> | |
| <span class="text-sm">Event-Based</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Rendimiento</span> | |
| <span class="text-green-400 font-semibold">+55.3%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Se帽ales/D铆a</span> | |
| <span class="text-sm">12</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Tasa 脡xito</span> | |
| <span class="text-sm">85.6%</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-xs text-gray-400">Confianza Promedio</span> | |
| <span class="text-xs">78.9%</span> | |
| </div> | |
| <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: 78.9%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 px-3 py-2 glass-effect rounded-lg text-sm hover-scale">Configurar</button> | |
| <button class="flex-1 px-3 py-2 gradient-bg rounded-lg text-sm hover-scale">Optimizar</button> | |
| </div> | |
| </div> | |
| <!-- Add New Strategy Card --> | |
| <div class="glass-effect rounded-xl p-6 hover-scale border-2 border-dashed border-gray-700 flex flex-col items-center justify-center"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mb-4"> | |
| <i data-feather="plus" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Crear Estrategia</h3> | |
| <p class="text-gray-400 text-sm text-center mb-4">Dise帽a una nueva estrategia de trading personalizada</p> | |
| <button class="px-4 py-2 gradient-bg rounded-lg hover-scale">Comenzar</button> | |
| </div> | |
| </div> | |
| <!-- Strategy Performance Comparison --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <h2 class="text-xl font-semibold mb-6">Comparaci贸n de Rendimiento</h2> | |
| <div class="h-80" id="comparisonChart"></div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Strategy Performance Comparison Chart | |
| const comparisonOptions = { | |
| series: [{ | |
| name: 'ML Momentum Pro', | |
| data: [45, 52, 48, 58, 56, 62, 65, 68, 72, 78, 82, 87] | |
| }, { | |
| name: 'Scalper Alpha', | |
| data: [32, 35, 33, 36, 34, 37, 35, 38, 36, 39, 37, 38] | |
| }, { | |
| name: 'Swing Master', | |
| data: [28, 30, 32, 31, 33, 35, 34, 36, 38, 39, 40, 41] | |
| }, { | |
| name: 'News Trader Pro', | |
| data: [38, 42, 40, 45, 43, 48, 46, 50, 52, 54, 55, 55] | |
| }], | |
| chart: { | |
| type: 'line', | |
| height: 320, | |
| background: 'transparent', | |
| toolbar: { show: false } | |
| }, | |
| colors: ['#667eea', '#10b981', '#f59e0b', '#ef4444'], | |
| stroke: { | |
| curve: 'smooth', | |
| width: 3 | |
| }, | |
| fill: { | |
| type: 'gradient', | |
| gradient: { | |
| opacityFrom: 0.3, | |
| opacityTo: 0.05 | |
| } | |
| }, | |
| grid: { | |
| borderColor: 'rgba(255, 255, 255, 0.05)', | |
| strokeDashArray: 5 | |
| }, | |
| xaxis: { | |
| categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'], | |
| labels: { style: { colors: '#9ca3af' } } | |
| }, | |
| yaxis: { | |
| labels: { | |
| style: { colors: '#9ca3af' }, | |
| formatter: function (val) { | |
| return val + '%'; | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| theme: 'dark', | |
| y: { | |
| formatter: function (val) { | |
| return val + '%'; | |
| } | |
| } | |
| }, | |
| legend: { | |
| labels: { colors: '#9ca3af' } | |
| } | |
| }; | |
| const comparisonChart = new ApexCharts(document.querySelector("#comparisonChart"), comparisonOptions); | |
| comparisonChart.render(); | |
| // Add hover animations | |
| document.querySelectorAll('.hover-scale').forEach(element => { | |
| element.addEventListener('mouseenter', () => { | |
| anime({ | |
| targets: element, | |
| scale: 1.05, | |
| duration: 300, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| element.addEventListener('mouseleave', () => { | |
| anime({ | |
| targets: element, | |
| scale: 1, | |
| duration: 300, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |