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:
0406816
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Trading Terminal - TradeFlow Pro Infinity</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://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'quantum': { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| 950: '#082f49' | |
| }, | |
| 'neon': { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| 950: '#052e16' | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| glow: { | |
| 'from': { boxShadow: '0 0 10px #0ea5e9, 0 0 20px #0ea5e9, 0 0 30px #0ea5e9' }, | |
| 'to': { boxShadow: '0 0 20px #0ea5e9, 0 0 30px #0ea5e9, 0 0 40px #0ea5e9' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .quantum-gradient { | |
| background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%); | |
| } | |
| .glass-effect { | |
| backdrop-filter: blur(10px); | |
| background: rgba(8, 47, 73, 0.3); | |
| border: 1px solid rgba(14, 165, 233, 0.2); | |
| } | |
| .quantum-card { | |
| background: linear-gradient(145deg, rgba(8, 47, 73, 0.6), rgba(14, 165, 233, 0.1)); | |
| border: 1px solid rgba(14, 165, 233, 0.3); | |
| box-shadow: 0 8px 32px rgba(14, 165, 233, 0.1); | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 5px #22c55e, 0 0 10px #22c55e, 0 0 15px #22c55e; | |
| } | |
| .holographic-text { | |
| background: linear-gradient(45deg, #0ea5e9, #22c55e, #0ea5e9); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: shimmer 3s ease-in-out infinite; | |
| } | |
| @keyframes shimmer { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| .trading-button { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .trading-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(14, 165, 233, 0.3); | |
| } | |
| .trading-button:active { | |
| transform: translateY(0); | |
| } | |
| .order-book-row { | |
| transition: all 0.2s ease; | |
| } | |
| .order-book-row:hover { | |
| background: rgba(14, 165, 233, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="dark bg-gray-950 text-white min-h-screen overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-quantum-700/30"> | |
| <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 space-x-4"> | |
| <a href="index.html" class="text-gray-300 hover:text-white transition-colors"> | |
| <i data-feather="arrow-left" class="w-5 h-5"></i> | |
| </a> | |
| <h1 class="text-xl font-bold holographic-text">Quantum Trading Terminal</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2 text-sm"> | |
| <div class="w-2 h-2 bg-neon-500 rounded-full animate-pulse"></div> | |
| <span class="text-gray-300">Market Open</span> | |
| </div> | |
| <div class="text-sm"> | |
| <span class="text-gray-400">Spread: </span> | |
| <span class="text-neon-500">0.2 pips</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Trading Interface --> | |
| <main class="pt-16 pb-20 md:pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> | |
| <!-- Trading Pair Selector --> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="quantum-card rounded-lg p-3"> | |
| <h2 class="text-2xl font-bold">EUR/USD</h2> | |
| <p class="text-sm text-gray-400">1.0847 <span class="text-neon-500">▲ +0.0012</span></p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-quantum-600/30 rounded-lg text-sm hover:bg-quantum-600/50 transition-colors">1m</button> | |
| <button class="px-3 py-1 bg-quantum-600/30 rounded-lg text-sm hover:bg-quantum-600/50 transition-colors">5m</button> | |
| <button class="px-3 py-1 bg-quantum-600 rounded-lg text-sm">1H</button> | |
| <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700 transition-colors">4H</button> | |
| <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700 transition-colors">1D</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 glass-effect rounded-lg hover:bg-quantum-600/30 transition-colors"> | |
| <i data-feather="grid" class="w-5 h-5"></i> | |
| </button> | |
| <button class="p-2 glass-effect rounded-lg hover:bg-quantum-600/30 transition-colors"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Trading Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-4"> | |
| <!-- Chart Area --> | |
| <div class="lg:col-span-3 space-y-4"> | |
| <!-- Chart --> | |
| <div class="quantum-card rounded-xl p-4"> | |
| <div class="h-96 bg-gray-900/50 rounded-lg relative overflow-hidden"> | |
| <canvas id="tradingChart" class="w-full h-full"></canvas> | |
| <div class="absolute top-4 right-4 glass-effect rounded-lg p-3"> | |
| <div class="text-sm"> | |
| <p class="text-gray-400">High: <span class="text-white">1.0859</span></p> | |
| <p class="text-gray-400">Low: <span class="text-white">1.0832</span></p> | |
| <p class="text-gray-400">Volume: <span class="text-white">2.4M</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trading Tools --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Position Calculator --> | |
| <div class="quantum-card rounded-xl p-4"> | |
| <h3 class="text-lg font-semibold mb-3">Position Calculator</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="text-xs text-gray-400">Balance</label> | |
| <input type="text" value="$50,000" class="w-full bg-gray-800 rounded px-3 py-2 text-sm"> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400">Risk %</label> | |
| <input type="range" min="1" max="10" value="2" class="w-full"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>1%</span> | |
| <span class="text-neon-500">2%</span> | |
| <span>10%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400">Stop Loss (pips)</label> | |
| <input type="number" value="20" class="w-full bg-gray-800 rounded px-3 py-2 text-sm"> | |
| </div> | |
| <div class="pt-2 border-t border-gray-800"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Lot Size:</span> | |
| <span class="text-white font-semibold">1.25</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Risk Amount:</span> | |
| <span class="text-neon-500 font-semibold">$1,000</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Trade --> | |
| <div class="quantum-card rounded-xl p-4"> | |
| <h3 class="text-lg font-semibold mb-3">Quick Trade</h3> | |
| <div class="space-y-3"> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="trading-button quantum-gradient py-3 rounded-lg font-semibold"> | |
| BUY | |
| </button> | |
| <button class="trading-button bg-red-600 hover:bg-red-700 py-3 rounded-lg font-semibold"> | |
| SELL | |
| </button> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400">Volume</label> | |
| <input type="number" value="1.0" step="0.1" class="w-full bg-gray-800 rounded px-3 py-2 text-sm"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="px-3 py-2 bg-gray-800 rounded text-xs hover:bg-gray-700 transition-colors"> | |
| Market Order | |
| </button> | |
| <button class="px-3 py-2 bg-gray-800 rounded text-xs hover:bg-gray-700 transition-colors"> | |
| Limit Order | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trade Management --> | |
| <div class="quantum-card rounded-xl p-4"> | |
| <h3 class="text-lg font-semibold mb-3">Trade Management</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-400">Breakeven</span> | |
| <button class="w-12 h-6 bg-gray-800 rounded-full relative"> | |
| <div class="w-5 h-5 bg-quantum-500 rounded-full absolute top-0.5 right-0.5 transition-transform"></div> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-400">Trailing Stop</span> | |
| <button class="w-12 h-6 bg-quantum-600 rounded-full relative"> | |
| <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform"></div> | |
| </button> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400">Trailing Distance</label> | |
| <input type="number" value="15" class="w-full bg-gray-800 rounded px-3 py-2 text-sm"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="px-3 py-2 bg-gray-800 rounded text-xs hover:bg-gray-700 transition-colors"> | |
| Close All | |
| </button> | |
| <button class="px-3 py-2 bg-gray-800 rounded text-xs hover:bg-gray-700 transition-colors"> | |
| Hedge | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Book and Recent Trades --> | |
| <div class="space-y-4"> | |
| <!-- Order Book --> | |
| <div class="quantum-card rounded-xl p-4"> | |
| <h3 class="text-lg font-semibold mb-3">Order Book</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-xs text-gray-400 mb-2"> | |
| <span>Price</span> | |
| <span>Size</span> | |
| </div> | |
| <!-- Sell Orders --> | |
| <div class="space-y-1"> | |
| <div class="order-book-row flex justify-between py-1 px-2 rounded"> | |
| <span class="text-red-400">1.0849</span> | |
| <span class="text-gray-300">2.5</span> | |
| </div> | |
| <div class="order-book-row flex justify-between py-1 px-2 rounded"> | |
| <span class="text-red-400">1.0848</span> | |
| <span class="text-gray-300">1.8</span> | |
| </div> | |
| <div class="order-book-row flex justify-between py-1 px-2 rounded"> | |
| <span class="text-red-400">1.0847</span> | |
| <span class="text-gray-300">3.2</span> | |
| </div> | |
| </div> | |
| <!-- Current Price --> | |
| <div class="bg-gray-800 rounded py-2 px-3 my-2"> | |
| <div class="text-center"> | |
| <p class="text-lg font-bold">1.0847</p> | |
| <p class="text-xs text-gray-400">Current Price</p> | |
| </div> | |
| </div> | |
| <!-- Buy Orders --> | |
| <div class="space-y-1"> | |
| <div class="order-book-row flex justify-between py-1 px-2 rounded"> | |
| <span class="text-neon-500">1.0846</span> | |
| <span class="text-gray-300">1.5</span> | |
| </div> | |
| <div class="order-book-row flex justify-between py-1 px-2 rounded"> | |
| <span class="text-neon-500">1.0845</span> | |
| <span class="text-gray-300">2.8</span> | |
| </div> | |
| <div class="order-book-row flex justify-between py-1 px-2 rounded"> | |
| <span class="text-neon-500">1.0844</span> | |
| <span class="text-gray-300">1.2</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Trades --> | |
| <div class="quantum-card rounded-xl p-4"> | |
| <h3 class="text-lg font-semibold mb-3">Recent Trades</h3> | |
| <div class="space-y-2 max-h-64 overflow-y-auto"> | |
| <div class="flex justify-between text-sm py-1"> | |
| <span class="text-gray-400">1.0846</span> | |
| <span class="text-neon-500">BUY</span> | |
| <span class="text-gray-300">0.5</span> | |
| <span class="text-xs text-gray-500">12:34</span> | |
| </div> | |
| <div class="flex justify-between text-sm py-1"> | |
| <span class="text-gray-400">1.0848</span> | |
| <span class="text-red-500">SELL</span> | |
| <span class="text-gray-300">1.2</span> | |
| <span class="text-xs text-gray-500">12:33</span> | |
| </div> | |
| <div class="flex justify-between text-sm py-1"> | |
| <span class="text-gray-400">1.0845</span> | |
| <span class="text-neon-500">BUY</span> | |
| <span class="text-gray-300">2.0</span> | |
| <span class="text-xs text-gray-500">12:32</span> | |
| </div> | |
| <div class="flex justify-between text-sm py-1"> | |
| <span class="text-gray-400">1.0849</span> | |
| <span class="text-red-500">SELL</span> | |
| <span class="text-gray-300">0.8</span> | |
| <span class="text-xs text-gray-500">12:31</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation for Mobile --> | |
| <nav class="fixed bottom-0 left-0 right-0 z-50 glass-effect border-t border-quantum-700/30 md:hidden"> | |
| <div class="grid grid-cols-5 py-2"> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-gray-400"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span class="text-xs">Home</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-quantum-400"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> | |
| <span class="text-xs">Trade</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-gray-400"> | |
| <i data-feather="activity" class="w-5 h-5"></i> | |
| <span class="text-xs">Analytics</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-gray-400"> | |
| <i data-feather="pie-chart" class="w-5 h-5"></i> | |
| <span class="text-xs">Portfolio</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-gray-400"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| <span class="text-xs">AI</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Trading Chart | |
| const ctx = document.getElementById('tradingChart').getContext('2d'); | |
| const gradient = ctx.createLinearGradient(0, 0, 0, 400); | |
| gradient.addColorStop(0, 'rgba(14, 165, 233, 0.3)'); | |
| gradient.addColorStop(1, 'rgba(14, 165, 233, 0)'); | |
| const chart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30'], | |
| datasets: [{ | |
| label: 'EUR/USD', | |
| data: [1.0832, 1.0838, 1.0841, 1.0839, 1.0845, 1.0843, 1.0847, 1.0845, 1.0849, 1.0847], | |
| borderColor: '#0ea5e9', | |
| backgroundColor: gradient, | |
| borderWidth: 2, | |
| fill: true, | |
| tension: 0.4, | |
| pointRadius: 0, | |
| pointHoverRadius: 6, | |
| pointHoverBackgroundColor: '#0ea5e9', | |
| pointHoverBorderColor: '#fff', | |
| pointHoverBorderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| interaction: { | |
| intersect: false, | |
| mode: 'index' | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| backgroundColor: 'rgba(8, 47, 73, 0.9)', | |
| titleColor: '#fff', | |
| bodyColor: '#fff', | |
| borderColor: '#0ea5e9', | |
| borderWidth: 1, | |
| cornerRadius: 8, | |
| displayColors: false | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)', | |
| drawBorder: false | |
| }, | |
| ticks: { | |
| color: '#9ca3af' | |
| } | |
| }, | |
| y: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)', | |
| drawBorder: false | |
| }, | |
| ticks: { | |
| color: '#9ca3af', | |
| callback: function(value) { | |
| return value.toFixed(4); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Animate elements | |
| anime({ | |
| targets: '.quantum-card', | |
| translateY: [30, 0], | |
| opacity: [0, 1], | |
| delay: anime.stagger(100), | |
| duration: 800, | |
| easing: 'easeOutQuad' | |
| }); | |
| // Real-time updates simulation | |
| setInterval(() => { | |
| const newPrice = (Math.random() * 0.0004 + 1.0845).toFixed(4); | |
| chart.data.datasets[0].data.push(newPrice); | |
| chart.data.labels.push(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })); | |
| if (chart.data.datasets[0].data.length > 20) { | |
| chart.data.datasets[0].data.shift(); | |
| chart.data.labels.shift(); | |
| } | |
| chart.update('none'); | |
| }, 3000); | |
| </script> | |
| </body> | |
| </html> | |