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:
c363c4f
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TradeFlow Pro - EA 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://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366f1', | |
| }, | |
| secondary: { | |
| 500: '#8b5cf6', | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Header --> | |
| <header class="bg-gray-800 bg-opacity-50 backdrop-blur-md border-b border-gray-700 sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="index.html" class="p-2 rounded-lg hover:bg-gray-700"> | |
| <i data-feather="arrow-left" class="w-5 h-5"></i> | |
| </a> | |
| <h1 class="text-xl font-bold">Expert Advisors Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-gradient-to-r from-primary-500 to-secondary-500 px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="mr-2"></i> | |
| Add EA | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- EA Controls --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700"> | |
| <h3 class="text-lg font-bold mb-4">Global EA Controls</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="p-4 rounded-lg bg-green-500 bg-opacity-20 hover:bg-opacity-30 transition flex flex-col items-center"> | |
| <i data-feather="play" class="w-8 h-8 mb-2 text-green-400"></i> | |
| <span>Start All</span> | |
| </button> | |
| <button class="p-4 rounded-lg bg-red-500 bg-opacity-20 hover:bg-opacity-30 transition flex flex-col items-center"> | |
| <i data-feather="stop-circle" class="w-8 h-8 mb-2 text-red-400"></i> | |
| <span>Stop All</span> | |
| </button> | |
| <button class="p-4 rounded-lg bg-yellow-500 bg-opacity-20 hover:bg-opacity-30 transition flex flex-col items-center"> | |
| <i data-feather="refresh-cw" class="w-8 h-8 mb-2 text-yellow-400"></i> | |
| <span>Restart All</span> | |
| </button> | |
| <button class="p-4 rounded-lg bg-purple-500 bg-opacity-20 hover:bg-opacity-30 transition flex flex-col items-center"> | |
| <i data-feather="alert-triangle" class="w-8 h-8 mb-2 text-purple-400"></i> | |
| <span>Emergency Close</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700 md:col-span-2"> | |
| <h3 class="text-lg font-bold mb-4">EA Performance Overview</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold text-green-400">8</p> | |
| <p class="text-gray-400">Active EAs</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold text-blue-400">24</p> | |
| <p class="text-gray-400">Open Trades</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold text-yellow-400">4.2</p> | |
| <p class="text-gray-400">Avg. Profit Factor</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold text-purple-400">12.7%</p> | |
| <p class="text-gray-400">Avg. Drawdown</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- EA List --> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700 mb-8"> | |
| <div class="p-6 border-b border-gray-700"> | |
| <h2 class="text-xl font-bold">Managed Expert Advisors</h2> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-gray-400"> | |
| <th class="p-4">EA Name</th> | |
| <th class="p-4">Symbol</th> | |
| <th class="p-4">Status</th> | |
| <th class="p-4">Open Trades</th> | |
| <th class="p-4">Volume</th> | |
| <th class="p-4">P&L</th> | |
| <th class="p-4">Profit Factor</th> | |
| <th class="p-4">Drawdown</th> | |
| <th class="p-4">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-t border-gray-700 hover:bg-gray-750"> | |
| <td class="p-4 font-medium">ScalperPro</td> | |
| <td class="p-4">EUR/USD</td> | |
| <td class="p-4"> | |
| <span class="px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-400 text-sm">Active</span> | |
| </td> | |
| <td class="p-4">3</td> | |
| <td class="p-4">1.25</td> | |
| <td class="p-4 text-green-400">+$142.35</td> | |
| <td class="p-4">1.87</td> | |
| <td class="p-4 text-red-400">8.2%</td> | |
| <td class="p-4"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="stop-circle" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-t border-gray-700 hover:bg-gray-750"> | |
| <td class="p-4 font-medium">TrendFollower</td> | |
| <td class="p-4">GBP/JPY</td> | |
| <td class="p-4"> | |
| <span class="px-2 py-1 rounded-full bg-yellow-500 bg-opacity-20 text-yellow-400 text-sm">Warning</span> | |
| </td> | |
| <td class="p-4">2</td> | |
| <td class="p-4">0.75</td> | |
| <td class="p-4 text-red-400">-$32.18</td> | |
| <td class="p-4">0.92</td> | |
| <td class="p-4 text-red-400">15.4%</td> | |
| <td class="p-4"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="stop-circle" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-t border-gray-700 hover:bg-gray-750"> | |
| <td class="p-4 font-medium">BreakoutBot</td> | |
| <td class="p-4">USD/CAD</td> | |
| <td class="p-4"> | |
| <span class="px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-400 text-sm">Active</span> | |
| </td> | |
| <td class="p-4">1</td> | |
| <td class="p-4">0.50</td> | |
| <td class="p-4 text-green-400">+$78.92</td> | |
| <td class="p-4">2.15</td> | |
| <td class="p-4 text-red-400">3.7%</td> | |
| <td class="p-4"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="stop-circle" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-t border-gray-700 hover:bg-gray-750"> | |
| <td class="p-4 font-medium">RangeTrader</td> | |
| <td class="p-4">AUD/USD</td> | |
| <td class="p-4"> | |
| <span class="px-2 py-1 rounded-full bg-red-500 bg-opacity-20 text-red-400 text-sm">Stopped</span> | |
| </td> | |
| <td class="p-4">0</td> | |
| <td class="p-4">0.00</td> | |
| <td class="p-4">-$0.00</td> | |
| <td class="p-4">-</td> | |
| <td class="p-4">-</td> | |
| <td class="p-4"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="stop-circle" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- EA Parameters --> | |
| <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700"> | |
| <div class="p-6 border-b border-gray-700"> | |
| <h2 class="text-xl font-bold">EA Parameters</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">ScalperPro Parameters</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Lot Size</label> | |
| <input type="text" value="0.01" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Stop Loss (pips)</label> | |
| <input type="text" value="15" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Take Profit (pips)</label> | |
| <input type="text" value="30" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Trailing Stop (pips)</label> | |
| <input type="text" value="10" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Risk Management</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Max Spread (pips)</label> | |
| <input type="text" value="2.5" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Max Drawdown (%)</label> | |
| <input type="text" value="10" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Daily Loss Limit ($)</label> | |
| <input type="text" value="200" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="news-filter" class="mr-2"> | |
| <label for="news-filter">Avoid trading during news events</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end"> | |
| <button class="bg-gradient-to-r from-primary-500 to-secondary-500 px-6 py-3 rounded-lg font-medium"> | |
| Save Parameters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |