Spaces:
Running
Running
Ejecuta la implementación de la siguiente aplicación tanto de escritorio, como app móvil hiper responsive, que ambas aplicaciones se integren de manera nativa en una sola aplicación, que se adapta perfectamente según el tipo de dispositivo en el que la usa el usuario, quiero que implementes las funciones descritas a continuación implementando una pagina distinta para cada función concreta de la aplicación descrita a continuación, añade el máximo de funcionalidad real en cada herramienta y cada elemento de la aplicación, añade el máximo realismo posible para que se parezca el máximo posible a como se debería ver la aplicación final para cumplir con todos los requisitos de desarrollo detallados a continuación:
2d08b43
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TradeFlow Pro Nexus - Trading</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#10b981' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { font-family: 'Inter', sans-serif; } | |
| .glass-effect { backdrop-filter: blur(16px) saturate(180%); background: rgba(17, 25, 40, 0.75); } | |
| .gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); } | |
| .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; } | |
| @media (min-width: 1024px) { | |
| .mobile-bottom-nav { display: none; } | |
| } | |
| .chart-container { height: 500px; } | |
| .order-type-active { background: linear-gradient(135deg, #6366f1, #8b5cf6); } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white"> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden lg:flex glass-effect border-b border-gray-700 p-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="trending-up" class="text-primary"></i> | |
| <span class="text-xl font-bold">TradeFlow Pro</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="index.html" class="flex items-center space-x-1 hover:text-gray-300"> | |
| <i data-feather="bar-chart-2"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="ea-control.html" class="flex items-center space-x-1 hover:text-gray-300"> | |
| <i data-feather="cpu"></i> | |
| <span>EA Control</span> | |
| </a> | |
| <a href="trading.html" class="flex items-center space-x-1 text-primary border-b-2 border-primary pb-1"> | |
| <i data-feather="activity"></i> | |
| <span>Trading</span> | |
| </a> | |
| <a href="protection.html" class="flex items-center space-x-1 hover:text-gray-300"> | |
| <i data-feather="shield"></i> | |
| <span>Protection</span> | |
| </a> | |
| <a href="analytics.html" class="flex items-center space-x-1 hover:text-gray-300"> | |
| <i data-feather="pie-chart"></i> | |
| <span>Analytics</span> | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i data-feather="bell" class="cursor-pointer"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">1</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="w-4 h-4"></i> | |
| </div> | |
| <span>Trader</span> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Bottom Navigation --> | |
| <nav class="mobile-bottom-nav glass-effect border-t border-gray-700 lg:hidden"> | |
| <div class="flex justify-around items-center py-3"> | |
| <a href="index.html" class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Dashboard</span> | |
| </a> | |
| <a href="ea-control.html" class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">EAs</span> | |
| </a> | |
| <a href="trading.html" class="flex flex-col items-center text-primary"> | |
| <i data-feather="activity" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Trade</span> | |
| </a> | |
| <a href="protection.html" class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="shield" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Shield</span> | |
| </a> | |
| <a href="analytics.html" class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="pie-chart" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Stats</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6 lg:py-8 pb-20 lg:pb-8"> | |
| <!-- Trading Header --> | |
| <div class="glass-effect rounded-xl p-6 mb-6"> | |
| <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between"> | |
| <div class="flex items-center space-x-4 mb-4 lg:mb-0"> | |
| <div class="text-2xl font-bold">EUR/USD</div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="text-green-500 font-mono text-xl">1.08745</div> | |
| <div class="text-sm text-green-500">+0.0023 (+0.21%)</div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">1H</button> | |
| <button class="bg-primary px-4 py-2 rounded-lg">4H</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">1D</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">1W</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Chart Section --> | |
| <div class="lg:col-span-2"> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <div class="chart-container bg-gray-900 rounded-lg relative"> | |
| <!-- Chart Tools --> | |
| <div class="absolute top-4 left-4 z-10 flex space-x-2"> | |
| <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg"> | |
| <i data-feather="trending-up" class="w-4 h-4"></i> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg"> | |
| <i data-feather="minus" class="w-4 h-4"></i> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <!-- Price Levels --> | |
| <div class="absolute right-4 top-4 z-10 text-right"> | |
| <div class="text-sm text-gray-400">Bid: <span class="text-green-500">1.08742</span></div> | |
| <div class="text-sm text-gray-400">Ask: <span class="text-red-500">1.08748</span></div> | |
| <div class="text-sm text-gray-400">Spread: <span class="text-yellow-500">0.6 pips</span></div> | |
| </div> | |
| <!-- Chart Placeholder --> | |
| <div class="w-full h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="trending-up" class="w-16 h-16 text-primary mx-auto mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">Live Trading Chart</h3> | |
| <p class="text-gray-400">Real-time MT5 price data streaming</p> | |
| <p class="text-sm text-gray-500 mt-2">Interactive drawing tools available</p> | |
| </div> | |
| </div> | |
| <!-- Drawing Tools --> | |
| <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"> | |
| <button class="bg-primary/20 hover:bg-primary/30 px-3 py-2 rounded-lg flex items-center space-x-2"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| <span class="text-sm">Draw</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg flex items-center space-x-2"> | |
| <i data-feather="sliders" class="w-4 h-4"></i> | |
| <span class="text-sm">Indicators</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg flex items-center space-x-2"> | |
| <i data-feather="save" class="w-4 h-4"></i> | |
| <span class="text-sm">Template</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Management --> | |
| <div class="glass-effect rounded-xl p-6 mt-6"> | |
| <h3 class="font-semibold mb-4">Open Positions & Orders</h3> | |
| <div class="space-y-3 max-h-64 overflow-y-auto"> | |
| <div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> | |
| <div> | |
| <div class="font-medium">EUR/USD Buy</div> | |
| <div class="text-sm text-gray-400">0.1 Lot • 1.08620</div> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-green-500 font-mono">+$12.50</div> | |
| <div class="text-sm text-gray-400">TP: 1.08800</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full"></div> | |
| <div> | |
| <div class="font-medium">GBP/USD Sell</div> | |
| <div class="text-sm text-gray-400">0.05 Lot • 1.26780</div> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-red-500 font-mono">-$8.30</div> | |
| <div class="text-sm text-gray-400">SL: 1.27000</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trading Panel --> | |
| <div class="glass-effect rounded-xl p-6"> | |
| <h3 class="font-semibold mb-4">Trade Execution</h3> | |
| <!-- Order Type Selection --> | |
| <div class="grid grid-cols-2 gap-2 mb-6"> | |
| <button class="order-type-active py-3 rounded-lg text-center"> | |
| <div class="font-medium">Market</div> | |
| <div class="text-xs text-gray-300">Instant Execution</div> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg text-center"> | |
| <div class="font-medium">Pending</div> | |
| <div class="text-xs text-gray-300">Limit/Stop Orders</div> | |
| </button> | |
| </div> | |
| <!-- Trade Size Calculator --> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-3">Position Calculator</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="text-sm text-gray-400">Account Balance</label> | |
| <div class="font-mono">$25,847.32</div> | |
| </div> | |
| <div> | |
| <label class="text-sm text-gray-400">Risk %</label> | |
| <input type="range" min="0.5" max="5" step="0.5" value="2" class="w-full"> | |
| <div class="flex justify-between text-sm"> | |
| <span>0.5%</span> | |
| <span class="text-primary">2%</span> | |
| <span>5%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-sm text-gray-400">Stop Loss (pips)</label> | |
| <input type="number" value="30" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2"> | |
| </div> | |
| <div class="bg-primary/20 rounded-lg p-3"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Lot Size:</span> | |
| <span class="font-mono">0.15</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Risk Amount:</span> | |
| <span class="font-mono">$45.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Buy/Sell Buttons --> | |
| <div class="grid grid-cols-2 gap-3 mb-6"> | |
| <button class="bg-green-500 hover:bg-green-600 py-4 rounded-lg font-semibold text-lg"> | |
| BUY | |
| </button> | |
| <button class="bg-red-500 hover:bg-red-600 py-4 rounded-lg font-semibold text-lg"> | |
| SELL | |
| </button> | |
| </div> | |
| <!-- Order Settings --> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="text-sm text-gray-400">Stop Loss</label> | |
| <div class="flex space-x-2"> | |
| <input type="number" value="1.08420" class="flex-1 bg-gray-800 border border-gray-600 rounded-lg px-3 py-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 rounded-lg">Set</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-sm text-gray-400">Take Profit</label> | |
| <div class="flex space-x-2"> | |
| <input type="number" value="1.09000" class="flex-1 bg-gray-800 border border-gray-600 rounded-lg px-3 py-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 rounded-lg">Set</button> | |
| </div> | |
| </div> | |
| <div class="text-center text-sm text-gray-400"> | |
| Risk/Reward: 1:2.5 | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="mt-6 pt-6 border-t border-gray-600"> | |
| <h4 class="font-medium mb-3">Quick Actions</h4> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm"> | |
| Close All | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm"> | |
| Hedge | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm"> | |
| Partial Close | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm"> | |
| Breakeven | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| feather.replace(); | |
| // Simulate price updates | |
| setInterval(() => { | |
| const priceElement = document.querySelector('.text-green-500.font-mono.text-xl'); | |
| if (priceElement) { | |
| const currentPrice = parseFloat(priceElement.textContent); | |
| const change = (Math.random() - 0.5) * 0.001; | |
| const newPrice = currentPrice + change; | |
| priceElement.textContent = newPrice.toFixed(5); | |
| const changeElement = document.querySelector('.text-sm.text-green-500'); | |
| if (changeElement) { | |
| const changePips = (change * 10000).toFixed(1); | |
| const changePercent = (change / currentPrice * 100).toFixed(2); | |
| changeElement.textContent = `${change >= 0 ? '+' : ''}${changePips} pips (${change >= 0 ? '+' : ''}${changePercent}%)`; | |
| changeElement.className = `text-sm ${change >= 0 ? 'text-green-500' : 'text-red-500'}`; | |
| } | |
| } | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> | |