Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>QuantFlow-X v4.0 Trading Interface</title> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo+2:wght@600;700&family=Orbitron:wght@500;700&family=Space+Mono&family=Fira+Code:wght@400;700&display=swap"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| :root { | |
| --bg-primary: #000000; | |
| --bg-secondary: #0a0a0a; | |
| --text-primary: #ffffff; | |
| --text-secondary: #e6e6fa; | |
| --cyan: #00f0ff; | |
| --magenta: #ff00ff; | |
| --green: #00ff00; | |
| --orange: #ff4500; | |
| --blue: #4a90e2; | |
| --neon-shadow: 0 0 20px rgba(0, 240, 255, 0.3); | |
| --pulse-effect: 0 0 5px rgba(0, 255, 0, 0.1); | |
| } | |
| body { | |
| background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)) fixed; | |
| color: var(--text-primary); | |
| font-family: 'Space Mono', monospace; | |
| overflow-x: hidden; | |
| } | |
| .chart-container { | |
| background: rgba(0, 0, 0, 0.6); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| box-shadow: var(--neon-shadow); | |
| height: 500px; | |
| } | |
| .mcp-assistant { | |
| background: rgba(10, 10, 10, 0.8); | |
| border: 1px solid rgba(255, 0, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| box-shadow: 0 0 10px rgba(255, 0, 255, 0.2); | |
| } | |
| .trade-controls { | |
| background: rgba(0, 0, 0, 0.6); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| box-shadow: var(--neon-shadow); | |
| } | |
| .btn-buy { | |
| background: linear-gradient(45deg, #00c853, #00ff00); | |
| border: none; | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); | |
| } | |
| .btn-buy:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 15px rgba(0, 255, 0, 0.5); | |
| } | |
| .btn-sell { | |
| background: linear-gradient(45deg, #ff1744, #ff4500); | |
| border: none; | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 0 10px rgba(255, 0, 0, 0.3); | |
| } | |
| .btn-sell:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); | |
| } | |
| .indicator-card { | |
| background: rgba(20, 20, 20, 0.6); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 0.75rem; | |
| margin-bottom: 0.5rem; | |
| transition: all 0.2s ease; | |
| box-shadow: var(--neon-shadow); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen p-4"> | |
| <div class="max-w-7xl mx-auto grid grid-cols-12 gap-4"> | |
| <!-- Main Trading Panel --> | |
| <div class="col-span-8"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h1 class="text-3xl font-bold font-exo text-cyan-500" style="text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);"> | |
| QuantFlow-X v4.0 | |
| </h1> | |
| <div class="flex space-x-2"> | |
| <span class="px-3 py-1 rounded-full bg-blue-900/50 text-blue-300 text-sm flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span> | |
| LIVE Trading | |
| </span> | |
| <span class="px-3 py-1 rounded-full bg-purple-900/50 text-purple-300 text-sm"> | |
| BTC/USDT | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Chart Area --> | |
| <div class="chart-container"> | |
| <div class="h-full flex items-center justify-center text-gray-500"> | |
| [PRICE CHART VISUALIZATION AREA] | |
| <div class="absolute inset-0 grid grid-cols-8 grid-rows-6 pointer-events-none"> | |
| <!-- Grid pattern for chart --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Indicators Grid --> | |
| <div class="grid grid-cols-3 gap-4 mt-4"> | |
| <div class="indicator-card"> | |
| <div class="flex justify-between"> | |
| <span class="text-xs text-cyan-300">RSI_14</span> | |
| <span class="alpha-indicator high"></span> | |
| </div> | |
| <div class="text-lg font-fira font-bold text-green-400">67.32</div> | |
| <div class="text-xs text-gray-400">+2.1% (1h)</div> | |
| </div> | |
| <div class="indicator-card"> | |
| <div class="flex justify-between"> | |
| <span class="text-xs text-cyan-300">MACD</span> | |
| <span class="alpha-indicator medium"></span> | |
| </div> | |
| <div class="text-lg font-fira font-bold text-orange-400">12.45</div> | |
| <div class="text-xs text-gray-400">-0.8% (1h)</div> | |
| </div> | |
| <div class="indicator-card"> | |
| <div class="flex justify-between"> | |
| <span class="text-xs text-cyan-300">SMC_H_1.20</span> | |
| <span class="alpha-indicator high"></span> | |
| </div> | |
| <div class="text-lg font-fira font-bold text-green-400">0.92</div> | |
| <div class="text-xs text-gray-400">Strong Buy</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MCP Assistant Panel --> | |
| <div class="col-span-4"> | |
| <div class="mcp-assistant"> | |
| <h2 class="text-xl font-orbitron text-magenta-500 mb-4 flex items-center"> | |
| <span style="text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);">MCP Assistant</span> | |
| <span class="ml-auto text-sm text-gray-400">v4.2.7</span> | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="bg-gray-900/50 p-3 rounded border-l-2 border-cyan-500"> | |
| <div class="flex items-start"> | |
| <span class="mcp-server-badge mcp-research-badge">Research</span> | |
| <span class="text-xs text-gray-400 ml-auto">12:34:45</span> | |
| </div> | |
| <p class="mt-1 text-sm">BTC showing strong accumulation pattern. Alpha confidence 0.89.</p> | |
| </div> | |
| <div class="bg-gray-900/50 p-3 rounded border-l-2 border-magenta-500"> | |
| <div class="flex items-start"> | |
| <span class="mcp-server-badge mcp-trading-badge">Trading</span> | |
| <span class="text-xs text-gray-400 ml-auto">12:35:22</span> | |
| </div> | |
| <p class="mt-1 text-sm">Liquidity detected at $42,300 - potential reversal zone.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trading Controls --> | |
| <div class="trade-controls"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="btn-buy font-bold">BUY</button> | |
| <button class="btn-sell font-bold">SELL</button> | |
| </div> | |
| <div class="mt-4 space-y-3"> | |
| <div> | |
| <label class="block text-xs text-cyan-300 mb-1">Amount</label> | |
| <input type="range" class="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-cyan-300 mb-1">Leverage</label> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 text-xs rounded bg-gray-800 border border-cyan-500/20">1x</button> | |
| <button class="px-2 py-1 text-xs rounded bg-cyan-500/10 border border-cyan-500">5x</button> | |
| <button class="px-2 py-1 text-xs rounded bg-gray-800 border border-cyan-500/20">10x</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Status --> | |
| <div class="mt-4 text-xs text-gray-400 flex justify-between"> | |
| <span>System: <span class="text-green-400">Optimal</span></span> | |
| <span>Latency: <span class="text-cyan-400">14ms</span></span> | |
| <span>v4.0.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simulate MCP message updates | |
| setInterval(() => { | |
| const now = new Date(); | |
| const timeStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds(); | |
| const messages = [ | |
| { | |
| server: 'Research', | |
| content: 'Market volatility increasing. Alpha adjusted to 0.91.', | |
| time: timeStr | |
| }, | |
| { | |
| server: 'Risk', | |
| content: 'Position sizing optimized for current market conditions.', | |
| time: timeStr | |
| } | |
| ]; | |
| // In a real app, we'd update the MCP messages here | |
| }, 30000); | |
| </script> | |
| </body> | |
| </html> | |