Spaces:
Running
Running
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:
af9f3d2 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Strategies | QuantumTrade Nexus</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#3B82F6', | |
| }, | |
| secondary: { | |
| 500: '#10B981', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2); | |
| border-color: rgba(59, 130, 246, 0.3); | |
| } | |
| .strategy-perf-chart { | |
| height: 80px; | |
| background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.8) 100%); | |
| border-radius: 0.5rem; | |
| position: relative; | |
| } | |
| .tag { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen relative"> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold text-primary-500 glow">QT<span class="text-secondary-500">N</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="markets.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Markets</a> | |
| <a href="#" class="text-primary-500 px-3 py-2 rounded-md text-sm font-medium">Strategies</a> | |
| <a href="analytics.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Analytics</a> | |
| <a href="signals.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Signals</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none"> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/42" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <!-- Strategy Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white">Trading Strategies</h1> | |
| <p class="text-gray-400 mt-1">AI-powered trading strategies with real-time performance metrics</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> New Strategy | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Strategy Tabs --> | |
| <div class="border-b border-gray-700 mb-6"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <a href="#" class="border-primary-500 text-primary-500 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">All Strategies</a> | |
| <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Active</a> | |
| <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Backtesting</a> | |
| <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Archived</a> | |
| </nav> | |
| </div> | |
| <!-- Strategy Filters --> | |
| <div class="bg-gray-800/50 rounded-xl p-4 border border-gray-700 mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Strategy Type</label> | |
| <select class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none"> | |
| <option>All Types</option> | |
| <option>Trend Following</option> | |
| <option>Mean Reversion</option> | |
| <option>Breakout</option> | |
| <option>ML-Based</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Timeframe</label> | |
| <select class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none"> | |
| <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>Daily</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Market</label> | |
| <select class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none"> | |
| <option>All Markets</option> | |
| <option>Forex</option> | |
| <option>Stocks</option> | |
| <option>Crypto</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Sort By</label> | |
| <select class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none"> | |
| <option>Recently Active</option> | |
| <option>Highest Win Rate</option> | |
| <option>Most Profitable</option> | |
| <option>Newest First</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strategy Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Strategy Card 1 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">QuantumTrend AI v4.2</h3> | |
| <div class="flex items-center mt-1 space-x-2"> | |
| <span class="tag bg-green-900/30 text-green-400"> | |
| <i data-feather="activity" class="w-3 h-3 mr-1"></i> Active | |
| </span> | |
| <span class="tag bg-blue-900/30 text-blue-400"> | |
| <i data-feather="cpu" class="w-3 h-3 mr-1"></i> ML-Based | |
| </span> | |
| <span class="tag bg-purple-900/30 text-purple-400"> | |
| <i data-feather="clock" class="w-3 h-3 mr-1"></i> 1H | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Advanced trend-following strategy using ensemble ML models to identify high-probability entries with dynamic risk management.</p> | |
| <div class="strategy-perf-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Performance chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Win Rate</p> | |
| <p class="text-lg font-bold text-white">78.6%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Profit Factor</p> | |
| <p class="text-lg font-bold text-white">2.4</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Trades</p> | |
| <p class="text-lg font-bold text-white">42</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-700"> | |
| <div> | |
| <p class="text-sm text-gray-400">Last Signal</p> | |
| <p class="text-sm font-medium text-white">EUR/USD - Buy @ 1.0934</p> | |
| </div> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 2 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">MeanReversion Pro</h3> | |
| <div class="flex items-center mt-1 space-x-2"> | |
| <span class="tag bg-green-900/30 text-green-400"> | |
| <i data-feather="activity" class="w-3 h-3 mr-1"></i> Active | |
| </span> | |
| <span class="tag bg-yellow-900/30 text-yellow-400"> | |
| <i data-feather="repeat" class="w-3 h-3 mr-1"></i> Reversion | |
| </span> | |
| <span class="tag bg-purple-900/30 text-purple-400"> | |
| <i data-feather="clock" class="w-3 h-3 mr-1"></i> 15M | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Statistical mean reversion strategy that identifies overextended price movements using Bollinger Bands and RSI thresholds.</p> | |
| <div class="strategy-perf-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Performance chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Win Rate</p> | |
| <p class="text-lg font-bold text-white">65.2%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Profit Factor</p> | |
| <p class="text-lg font-bold text-white">1.8</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Trades</p> | |
| <p class="text-lg font-bold text-white">23</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-700"> | |
| <div> | |
| <p class="text-sm text-gray-400">Last Signal</p> | |
| <p class="text-sm font-medium text-white">BTC/USD - Hold</p> | |
| </div> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 3 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Breakout Sentinel</h3> | |
| <div class="flex items-center mt-1 space-x-2"> | |
| <span class="tag bg-blue-900/30 text-blue-400"> | |
| <i data-feather="pause" class="w-3 h-3 mr-1"></i> Paused | |
| </span> | |
| <span class="tag bg-red-900/30 text-red-400"> | |
| <i data-feather="zap" class="w-3 h-3 mr-1"></i> Breakout | |
| </span> | |
| <span class="tag bg-purple-900/30 text-purple-400"> | |
| <i data-feather="clock" class="w-3 h-3 mr-1"></i> 4H | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Identifies and trades key support/resistance breakouts with volume confirmation and Fibonacci extensions for targets.</p> | |
| <div class="strategy-perf-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Performance chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Win Rate</p> | |
| <p class="text-lg font-bold text-white">71.4%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Profit Factor</p> | |
| <p class="text-lg font-bold text-white">2.1</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Trades</p> | |
| <p class="text-lg font-bold text-white">14</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-700"> | |
| <div> | |
| <p class="text-sm text-gray-400">Last Signal</p> | |
| <p class="text-sm font-medium text-white">AAPL - Sell @ 185.32</p> | |
| </div> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 4 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Volatility Edge</h3> | |
| <div class="flex items-center mt-1 space-x-2"> | |
| <span class="tag bg-green-900/30 text-green-400"> | |
| <i data-feather="activity" class="w-3 h-3 mr-1"></i> Active | |
| </span> | |
| <span class="tag bg-blue-900/30 text-blue-400"> | |
| <i data-feather="cpu" class="w-3 h-3 mr-1"></i> ML-Based | |
| </span> | |
| <span class="tag bg-purple-900/30 text-purple-400"> | |
| <i data-feather="clock" class="w-3 h-3 mr-1"></i> 1D | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Machine learning model that predicts volatility expansion opportunities and trades them with dynamic position sizing.</p> | |
| <div class="strategy-perf-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Performance chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Win Rate</p> | |
| <p class="text-lg font-bold text-white">82.4%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Profit Factor</p> | |
| <p class="text-lg font-bold text-white">2.9</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Trades</p> | |
| <p class="text-lg font-bold text-white">17</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-700"> | |
| <div> | |
| <p class="text-sm text-gray-400">Last Signal</p> | |
| <p class="text-sm font-medium text-white">TSLA - Sell @ 210.45</p> | |
| </div> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 5 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">News Sentiment AI</h3> | |
| <div class="flex items-center mt-1 space-x-2"> | |
| <span class="tag bg-yellow-900/30 text-yellow-400"> | |
| <i data-feather="tool" class="w-3 h-3 mr-1"></i> Testing | |
| </span> | |
| <span class="tag bg-blue-900/30 text-blue-400"> | |
| <i data-feather="cpu" class="w-3 h-3 mr-1"></i> ML-Based | |
| </span> | |
| <span class="tag bg-purple-900/30 text-purple-400"> | |
| <i data-feather="clock" class="w-3 h-3 mr-1"></i> 1D | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Natural language processing model that analyzes news sentiment and social media to predict short-term price movements.</p> | |
| <div class="strategy-perf-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Performance chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Win Rate</p> | |
| <p class="text-lg font-bold text-white">68.9%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Profit Factor</p> | |
| <p class="text-lg font-bold text-white">1.7</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Trades</p> | |
| <p class="text-lg font-bold text-white">9</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-700"> | |
| <div> | |
| <p class="text-sm text-gray-400">Last Signal</p> | |
| <p class="text-sm font-medium text-white">GBP/USD - Buy @ 1.2745</p> | |
| </div> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 6 --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Pair Trader</h3> | |
| <div class="flex items-center mt-1 space-x-2"> | |
| <span class="tag bg-gray-900/30 text-gray-400"> | |
| <i data-feather="archive" class="w-3 h-3 mr-1"></i> Archived | |
| </span> | |
| <span class="tag bg-yellow-900/30 text-yellow-400"> | |
| <i data-feather="repeat" class="w-3 h-3 mr-1"></i> Reversion | |
| </span> | |
| <span class="tag bg-purple-900/30 text-purple-400"> | |
| <i data-feather="clock" class="w-3 h-3 mr-1"></i> 1H | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Statistical arbitrage strategy that identifies correlated pairs and trades deviations from their historical relationship.</p> | |
| <div class="strategy-perf-chart mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <p class="text-gray-500 text-sm">Performance chart loading...</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Win Rate</p> | |
| <p class="text-lg font-bold text-white">62.3%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Profit Factor</p> | |
| <p class="text-lg font-bold text-white">1.5</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Trades</p> | |
| <p class="text-lg font-bold text-white">53</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-700"> | |
| <div> | |
| <p class="text-sm text-gray-400">Last Signal</p> | |
| <p class="text-sm font-medium text-white">ETH/USD - Hold</p> | |
| </div> | |
| <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex items-center justify-between mt-8"> | |
| <div class="text-sm text-gray-400"> | |
| Showing <span class="font-medium text-white">1</span> to <span class="font-medium text-white">6</span> of <span class="font-medium text-white">12</span> strategies | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">Previous</button> | |
| <button class="px-3 py-1 rounded-md bg-primary-500 text-white text-sm font-medium">1</button> | |
| <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">2</button> | |
| <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">Next</button> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0x111827, | |
| points: 10.00, | |
| maxDistance: 20.00, | |
| spacing: 18.00 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |