Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantTrade AI | Next-Gen Trading Terminal</title> | |
| <!-- FontAwesome für Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| /* Farbpalette - Dark Cyberpunk/FinTech Theme */ | |
| --bg-dark: #0a0e17; | |
| --bg-panel: #111625; | |
| --bg-panel-light: #1a2133; | |
| --primary: #3b82f6; | |
| --primary-glow: rgba(59, 130, 246, 0.5); | |
| --accent-quantum: #8b5cf6; /* Lila für Quantum */ | |
| --accent-ml: #10b981; /* Grün für ML */ | |
| --accent-rag: #f59e0b; /* Orange für RAG */ | |
| --text-main: #e2e8f0; | |
| --text-muted: #94a3b8; | |
| --border: #2d3748; | |
| --success: #10b981; | |
| --danger: #ef4444; | |
| --font-main: 'Inter', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --glass: rgba(17, 22, 37, 0.7); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border) var(--bg-dark); | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| font-family: var(--font-main); | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* --- Scrollbar Styling --- */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-dark); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 3px; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| height: 60px; | |
| background: var(--bg-panel); | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 20px; | |
| z-index: 100; | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--text-main); | |
| } | |
| .logo i { | |
| color: var(--primary); | |
| } | |
| .header-links { | |
| display: flex; | |
| gap: 20px; | |
| font-size: 0.9rem; | |
| } | |
| .header-links a { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .header-links a:hover { | |
| color: var(--primary); | |
| } | |
| .anycoder-link { | |
| font-size: 0.8rem; | |
| color: var(--primary); | |
| text-decoration: none; | |
| border: 1px solid var(--primary); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| } | |
| /* --- Main Layout --- */ | |
| .app-container { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| /* Sidebar Navigation */ | |
| aside { | |
| width: 240px; | |
| background: var(--bg-panel); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 20px 0; | |
| transition: transform 0.3s ease; | |
| } | |
| .nav-item { | |
| padding: 12px 20px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--text-muted); | |
| transition: all 0.2s; | |
| border-left: 3px solid transparent; | |
| } | |
| .nav-item:hover { | |
| background: var(--bg-panel-light); | |
| color: var(--text-main); | |
| } | |
| .nav-item.active { | |
| background: rgba(59, 130, 246, 0.1); | |
| color: var(--primary); | |
| border-left-color: var(--primary); | |
| } | |
| .nav-item i { | |
| width: 20px; | |
| text-align: center; | |
| } | |
| /* Main Content Area */ | |
| main { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| grid-template-rows: auto 1fr; | |
| gap: 20px; | |
| background: radial-gradient(circle at top right, #1a2035 0%, var(--bg-dark) 40%); | |
| } | |
| /* --- Dashboard Widgets --- */ | |
| .card { | |
| background: var(--bg-panel); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .card-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| } | |
| .card-subtitle { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| /* Top Stats Row */ | |
| .stats-row { | |
| grid-column: 1 / -1; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| .stat-card { | |
| background: linear-gradient(145deg, var(--bg-panel), var(--bg-panel-light)); | |
| padding: 15px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .stat-icon { | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| } | |
| .stat-info h3 { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .stat-info p { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| font-family: var(--font-mono); | |
| } | |
| /* Chart Section */ | |
| .chart-container { | |
| grid-column: 1 / 2; | |
| grid-row: 2 / 3; | |
| min-height: 400px; | |
| position: relative; | |
| } | |
| canvas#priceChart { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Right Panel: AI & Agents */ | |
| .ai-panel { | |
| grid-column: 2 / 3; | |
| grid-row: 2 / 4; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| /* Agent Status List */ | |
| .agent-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .agent-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px; | |
| background: var(--bg-panel-light); | |
| border-radius: 8px; | |
| border: 1px solid transparent; | |
| transition: all 0.3s; | |
| } | |
| .agent-item.active { | |
| border-color: var(--primary); | |
| background: rgba(59, 130, 246, 0.05); | |
| } | |
| .agent-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .agent-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: var(--bg-dark); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.8rem; | |
| color: var(--text-main); | |
| } | |
| .agent-status { | |
| font-size: 0.7rem; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| } | |
| .status-processing { background: rgba(245, 158, 11, 0.2); color: var(--accent-rag); } | |
| .status-ready { background: rgba(16, 185, 129, 0.2); color: var(--accent-ml); } | |
| .status-quantum { background: rgba(139, 92, 246, 0.2); color: var(--accent-quantum); } | |
| /* RAG Terminal / Logs */ | |
| .terminal-window { | |
| flex: 1; | |
| background: #000; | |
| border-radius: 8px; | |
| padding: 15px; | |
| font-family: var(--font-mono); | |
| font-size: 0.8rem; | |
| overflow-y: auto; | |
| border: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .log-entry { | |
| margin-bottom: 8px; | |
| line-height: 1.4; | |
| opacity: 0; | |
| animation: fadeIn 0.3s forwards; | |
| } | |
| .log-time { | |
| color: var(--text-muted); | |
| margin-right: 8px; | |
| } | |
| .log-source { | |
| font-weight: bold; | |
| } | |
| .source-ml { color: var(--accent-ml); } | |
| .source-quantum { color: var(--accent-quantum); } | |
| .source-rag { color: var(--accent-rag); } | |
| .source-agent { color: var(--primary); } | |
| /* Quantum Visualization */ | |
| .quantum-viz { | |
| height: 150px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%); | |
| } | |
| .qubit-ring { | |
| position: absolute; | |
| border: 2px solid rgba(139, 92, 246, 0.3); | |
| border-radius: 50%; | |
| animation: pulse 2s infinite ease-in-out; | |
| } | |
| .q-core { | |
| width: 20px; | |
| height: 20px; | |
| background: var(--accent-quantum); | |
| border-radius: 50%; | |
| box-shadow: 0 0 15px var(--accent-quantum); | |
| animation: float 3s infinite ease-in-out; | |
| } | |
| /* Control Panel */ | |
| .control-panel { | |
| grid-column: 1 / 2; | |
| grid-row: 3 / 4; | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| background: var(--bg-panel); | |
| padding: 15px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border-radius: 6px; | |
| border: none; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.9rem; | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: white; | |
| box-shadow: 0 0 10px var(--primary-glow); | |
| } | |
| .btn-primary:hover { | |
| background: #2563eb; | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text-muted); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--text-main); | |
| color: var(--text-main); | |
| } | |
| .toggle-switch { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-left: auto; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| to { opacity: 1; } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(0.8); opacity: 0.5; } | |
| 50% { transform: scale(1.1); opacity: 0.2; } | |
| 100% { transform: scale(0.8); opacity: 0.5; } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1024px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto auto auto; | |
| } | |
| .chart-container { | |
| grid-column: 1 / -1; | |
| grid-row: 2; | |
| } | |
| .ai-panel { | |
| grid-column: 1 / -1; | |
| grid-row: 3; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| .terminal-window { | |
| height: 300px; | |
| flex: 2; | |
| } | |
| .control-panel { | |
| grid-column: 1 / -1; | |
| grid-row: 4; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .toggle-switch { | |
| margin-left: 0; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| aside { | |
| position: absolute; | |
| left: -240px; | |
| height: 100%; | |
| z-index: 200; | |
| } | |
| aside.open { | |
| left: 0; | |
| } | |
| .header-links { | |
| display: none; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| margin-right: 15px; | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| } | |
| .stats-row { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| @media (min-width: 769px) { | |
| .mobile-menu-btn { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"> | |
| <i class="fa-solid fa-mobile-screen-button"></i> | |
| <span>QuantTrade <span style="color: var(--primary);">AI</span></span> | |
| </div> | |
| <div class="mobile-menu-btn" onclick="toggleSidebar()"> | |
| <i class="fa-solid fa-bars"></i> | |
| </div> | |
| <div class="header-links"> | |
| <a href="#">Märkte</a> | |
| <a href="#">Portfolio</a> | |
| <a href="#">News</a> | |
| <a href="#">Einstellungen</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a> | |
| </div> | |
| </header> | |
| <div class="app-container"> | |
| <!-- Sidebar --> | |
| <aside id="sidebar"> | |
| <div class="nav-item active" onclick="switchTab('dashboard')"> | |
| <i class="fa-solid fa-chart-line"></i> | |
| <span>Dashboard</span> | |
| </div> | |
| <div class="nav-item" onclick="switchTab('agents')"> | |
| <i class="fa-solid fa-robot"></i> | |
| <span>Multi-Agent System</span> | |
| </div> | |
| <div class="nav-item" onclick="switchTab('quantum')"> | |
| <i class="fa-solid fa-atom"></i> | |
| <span>Quantum Core</span> | |
| </div> | |
| <div class="nav-item" onclick="switchTab('rag')"> | |
| <i class="fa-solid fa-brain"></i> | |
| <span>RAG Knowledge</span> | |
| </div> | |
| <div class="nav-item" onclick="switchTab('history')"> | |
| <i class="fa-solid fa-clock-rotate-left"></i> | |
| <span>Trade History</span> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Stats Row --> | |
| <div class="stats-row"> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="background: rgba(59, 130, 246, 0.2); color: var(--primary);"> | |
| <i class="fa-solid fa-wallet"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3>Guthaben</h3> | |
| <p id="balance">€124,592.40</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-ml);"> | |
| <i class="fa-solid fa-arrow-trend-up"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3>Tagesgewinn</h3> | |
| <p>+€3,240.12</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="background: rgba(139, 92, 246, 0.2); color: var(--accent-quantum);"> | |
| <i class="fa-solid fa-microchip"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3>Quantum Score</h3> | |
| <p>98.4%</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--accent-rag);"> | |
| <i class="fa-solid fa-database"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3>RAG Vektoren</h3> | |
| <p>1.2M</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chart --> | |
| <div class="card chart-container"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">BTC/EUR Live</div> | |
| <div class="card-subtitle">Real-time Multi-Agent Analysis</div> | |
| </div> | |
| <div class="toggle-switch"> | |
| <span>Auto-Trade</span> | |
| <i class="fa-solid fa-toggle-on fa-lg" style="color: var(--primary); cursor: pointer;" id="autoTradeToggle" onclick="toggleAutoTrade()"></i> | |
| </div> | |
| </div> | |
| <canvas id="priceChart"></canvas> | |
| </div> | |
| <!-- AI & Agent Panel --> | |
| <div class="ai-panel"> | |
| <!-- Quantum State --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <span class="card-title"><i class="fa-solid fa-atom" style="color: var(--accent-quantum);"></i> Quantum Optimizer</span> | |
| <span class="card-subtitle">Q-Solver V4</span> | |
| </div> | |
| <div class="quantum-viz"> | |
| <div class="qubit-ring" style="width: 60px; height: 60px;"></div> | |
| <div class="qubit-ring" style="width: 100px; height: 100px; animation-delay: 0.5s;"></div> | |
| <div class="qubit-ring" style="width: 140px; height: 140px; animation-delay: 1s;"></div> | |
| <div class="q-core"></div> | |
| </div> | |
| <div style="text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 10px;"> | |
| Zustand: Superposition<br> | |
| Erwarteter Payoff: <span style="color: var(--success);">+4.2σ</span> | |
| </div> | |
| </div> | |
| <!-- Active Agents --> | |
| <div class="card" style="flex: 1;"> | |
| <div class="card-header"> | |
| <span class="card-title">Agent Workflows</span> | |
| </div> | |
| <div class="agent-list"> | |
| <div class="agent-item active" id="agent-ml"> | |
| <div class="agent-info"> | |
| <div class="agent-avatar" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-ml);"> | |
| <i class="fa-solid fa-chart-simple"></i> | |
| </div> | |
| <div> | |
| <div style="font-weight: 600; font-size: 0.9rem;">ML Trend Analyst</div> | |
| <div style="font-size: 0.7rem; color: var(--text-muted);">LSTM / Transformer</div> | |
| </div> | |
| </div> | |
| <span class="agent-status status-ready">READY</span> | |
| </div> | |
| <div class="agent-item" id="agent-sentiment"> | |
| <div class="agent-info"> | |
| <div class="agent-avatar" style="background: rgba(245, 158, 11, 0.2); color: var(--accent-rag);"> | |
| <i class="fa-regular fa-comments"></i> | |
| </div> | |
| <div> | |
| <div style="font-weight: 600; font-size: 0.9rem;">RAG Sentiment</div> | |
| <div style="font-size: 0.7rem; color: var(--text-muted);">News Scanning</div> | |
| </div> | |
| </div> | |
| <span class="agent-status status-processing">PROCESSING</span> | |
| </div> | |
| <div class="agent-item" id="agent-risk"> | |
| <div class="agent-info"> | |
| <div class="agent-avatar" style="background: rgba(239, 68, 68, 0.2); color: var(--danger);"> | |
| <i class="fa-solid fa-shield-halved"></i> | |
| </div> | |
| <div> | |
| <div style="font-weight: 600; font-size: 0.9rem;">Risk Manager</div> | |
| <div style="font-size: 0.7rem; color: var(--text-muted);">VaR Calculation</div> | |
| </div> | |
| </div> | |
| <span class="agent-status status-ready">IDLE</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal --> | |
| <div class="terminal-window" id="terminal"> | |
| <div class="log-entry"> | |
| <span class="log-time">[10:00:01]</span> | |
| <span class="log-source source-agent">SYSTEM</span>: Initialisiere Multi-Agent Umgebung... | |
| </div> | |
| <div class="log-entry"> | |
| <span class="log-time">[10:00:02]</span> | |
| <span class="log-source source-quantum">QUANTUM</span>: Verbindung zu QPU-Simulator hergestellt. 2048 Qubits bereit. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="control-panel"> | |
| <button class="btn btn-primary" onclick="executeTrade('buy')"> | |
| <i class="fa-solid fa-arrow-up"></i> Kaufsignal | |
| </button> | |
| <button class="btn btn-secondary" style="border-color: var(--danger); color: var(--danger);" onclick="executeTrade('sell')"> | |
| <i class="fa-solid fa-arrow-down"></i> Verkaufsignal | |
| </button> | |
| <div style="margin-left: 20px; color: var(--text-muted); font-size: 0.8rem;"> | |
| <i class="fa-solid fa-circle-info"></i> Strategie: Hybrid (ML + Quantum + RAG) | |
| </div> | |
| <div class="toggle-switch"> | |
| <i class="fa-solid fa-bolt" style="color: var(--accent-rag);"></i> High Frequency | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // --- State Management --- | |
| const state = { | |
| autoTrade: true, | |
| balance: 124592.40, | |
| price: 42350.00, | |
| priceHistory: [], | |
| maxHistory: 100, | |
| isRunning: true | |
| }; | |
| // --- Init --- | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Fill initial history | |
| let tempPrice = state.price; | |
| for (let i = 0; i < state.maxHistory; i++) { | |
| state.priceHistory.push(tempPrice); | |
| tempPrice = tempPrice + (Math.random() - 0.5) * 50; | |
| } | |
| state.price = tempPrice; | |
| initChart(); | |
| startSimulation(); | |
| }); | |
| // --- Chart Logic (Canvas) --- | |
| const canvas = document.getElementById('priceChart'); | |
| const ctx = canvas.getContext('2d'); | |
| let chartWidth, chartHeight; | |
| function resizeChart() { | |
| const parent = canvas.parentElement; | |
| canvas.width = parent.clientWidth; | |
| canvas.height = parent.clientHeight; | |
| chartWidth = canvas.width; | |
| chartHeight = canvas.height; | |
| } | |
| window.addEventListener('resize', resizeChart); | |
| resizeChart(); | |
| function initChart() { | |
| drawChart(); | |
| } | |
| function drawChart() { | |
| ctx.clearRect(0, 0, chartWidth, chartHeight); | |
| // Grid | |
| ctx.strokeStyle = '#1f2937'; | |
| ctx.lineWidth = 1; | |
| ctx.beginPath(); | |
| for(let x = 0; x < chartWidth; x += 50) { ctx.moveTo(x, 0); ctx.lineTo(x, chartHeight); } | |
| for(let y = 0; y < chartHeight; y += 50) { ctx.moveTo(0, y); ctx.lineTo(chartWidth, y); } | |
| ctx.stroke(); | |
| // Calculate scales | |
| const minPrice = Math.min(...state.priceHistory) * 0.999; | |
| const maxPrice = Math.max(...state.priceHistory) * 1.001; | |
| const range = maxPrice - minPrice; | |
| const stepX = chartWidth / (state.maxHistory - 1); | |
| // Draw Area | |
| const gradient = ctx.createLinearGradient(0, 0, 0, chartHeight); | |
| gradient.addColorStop(0, 'rgba(59, 130, 246, 0.4)'); | |
| gradient.addColorStop(1, 'rgba(59, 130, 246, 0)'); | |
| ctx.beginPath(); | |
| ctx.moveTo(0, chartHeight); | |
| state.priceHistory.forEach((p, i) => { | |
| const x = i * stepX; | |
| const y = chartHeight - ((p - minPrice) / range) * chartHeight; | |
| ctx.lineTo(x, y); | |
| }); | |
| ctx.lineTo(chartWidth, chartHeight); | |
| ctx.fillStyle = gradient; | |
| ctx.fill(); | |
| // Draw Line | |
| ctx.beginPath(); | |
| ctx.strokeStyle = '#3b82f6'; | |
| ctx.lineWidth = 2; | |
| state.priceHistory.forEach((p, i) => { | |
| const x = i * stepX; | |
| const y = chartHeight - ((p - minPrice) / range) * chartHeight; | |
| if (i === 0) ctx.moveTo(x, y); | |
| else ctx.lineTo(x, y); | |
| }); | |
| ctx.stroke(); | |
| // Draw current price dot | |
| const lastY = chartHeight - ((state.priceHistory[state.priceHistory.length-1] - minPrice) / range) * chartHeight; | |
| ctx.beginPath(); | |
| ctx.fillStyle = '#fff'; | |
| ctx.arc(chartWidth - 2, lastY, 4, 0, Math.PI * 2); | |
| ctx.fill(); | |
| ctx.shadowColor = '#3b82f6'; | |
| ctx.shadowBlur = 10; | |
| } | |
| // --- Simulation Logic --- | |
| function startSimulation() { | |
| setInterval(() => { | |
| if (!state.isRunning) return; | |
| // 1. Update Price (Random Walk) | |
| const change = (Math.random() - 0.5) * 80; // Volatility | |
| state.price += change; | |
| state.priceHistory.push(state.price); | |
| if (state.priceHistory.length > state.maxHistory) state.priceHistory.shift(); | |
| // Update UI Numbers | |
| document.getElementById('balance').innerText = `€${state.balance.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`; | |
| // 2. Trigger Agents randomly | |
| if (Math.random() > 0.7) triggerAgent('ml'); | |
| if (Math.random() > 0.85) triggerAgent('rag'); | |
| if (Math.random() > 0.95) triggerAgent('quantum'); | |
| // 3. Auto Trade Logic | |
| if (state.autoTrade && Math.random() > 0.9) { | |
| const action = change > 0 ? 'buy' : 'sell'; | |
| executeTrade(action, true); | |
| } | |
| drawChart(); | |
| }, 1000); // 1 second tick | |
| } | |
| // --- Agent Simulation --- | |
| const terminal = document.getElementById('terminal'); | |
| const agentMessages = { | |
| ml: [ | |
| "Neuronales Netz: Bullish-Divergenz erkannt auf 4H-Chart.", | |
| "LSTM Vorhersage: Preisziel €42,800 in 3 Ticks.", | |
| "Mustererkennung: Double Bottom bestätigt.", | |
| "Training Update: Weights angepasst an neue Volatilität." | |
| ], | |
| rag: [ | |
| "RAG Query: 'Fed Zinsen' -> 98% Relevanz (Quelle: Bloomberg).", | |
| "Vektordatenbank: 5 neue Finanzberichte indiziert.", | |
| "Kontext-Abfrage: Historischer Crash 2021 zeigt Ähnlichkeit.", | |
| "Sentiment Analyse: Twitter/Reddit Stimmung steigend." | |
| ], | |
| quantum: [ | |
| "QAOA Algorithmus: Optimiere Portfolio-Allokation...", | |
| "Qubit-Kollaps: Lösung gefunden. Risikominimierung: 12%.", | |
| "Quantum Tunneling: Erkenne Arbitrage-Möglichkeit zwischen Exchanges.", | |
| "Amplitude Verstärkung: Fokus auf Asset #BTC." | |
| ] | |
| }; | |
| function triggerAgent(type) { | |
| const msgs = agentMessages[type]; | |
| const msg = msgs[Math.floor(Math.random() * msgs.length)]; | |
| const time = new Date().toLocaleTimeString('de-DE'); | |
| const entry = document.createElement('div'); | |
| entry.className = 'log-entry'; | |
| let sourceClass = ''; | |
| let sourceName = ''; | |
| if (type === 'ml') { sourceClass = 'source-ml'; sourceName = 'ML-ENGINE'; } | |
| if (type === 'rag') { sourceClass = 'source-rag'; sourceName = 'RAG-CORE'; } | |
| if (type === 'quantum') { sourceClass = 'source-quantum'; sourceName = 'QUANTUM'; } | |
| entry.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-source ${sourceClass}">${sourceName}</span>: ${msg}`; | |
| terminal.appendChild(entry); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| // Visual feedback on agent card | |
| const agentId = type === 'ml' ? 'agent-ml' : (type === 'rag' ? 'agent-sentiment' : null); | |
| if (agentId) { | |
| const el = document.getElementById(agentId); | |
| el.style.borderColor = 'var(--primary)'; | |
| setTimeout(() => { el.style.borderColor = 'transparent'; }, 500); | |
| } | |
| } | |
| // --- Actions --- | |
| function executeTrade(type, auto = false) { | |
| const time = new Date().toLocaleTimeString('de-DE'); | |
| const amount = (Math.random() * 0.5).toFixed(4); | |
| const entry = document.createElement('div'); | |
| entry.className = 'log-entry'; | |
| const color = type === 'buy' ? 'var(--success)' : 'var(--danger)'; | |
| const icon = type === 'buy' ? 'BUY' : 'SELL'; | |
| let logMsg = auto ? `AUTO-EXEC: ${icon} ${amount} BTC @ €${state.price.toFixed(2)}` : `MANUAL: ${icon} ${amount} BTC @ €${state.price.toFixed(2)}`; | |
| entry.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-source" style="color:${color}">ORDER</span>: ${logMsg}`; | |
| terminal.appendChild(entry); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| // Simulate Balance Impact | |
| if (type === 'buy') state.balance -= (amount * state.price); | |
| else state.balance += (amount * state.price); | |
| } | |
| function toggleAutoTrade() { | |
| state.autoTrade = !state.autoTrade; | |
| const toggleIcon = document.getElementById('autoTradeToggle'); | |
| if (state.autoTrade) { | |
| toggleIcon.classList.remove('fa-toggle-off'); | |
| toggleIcon.classList.add('fa-toggle-on'); | |
| toggleIcon.style.color = 'var(--primary)'; | |
| addLog("SYSTEM", "Auto-Trading aktiviert."); | |
| } else { | |
| toggleIcon.classList.remove('fa-toggle-on'); | |
| toggleIcon.classList.add('fa-toggle-off'); | |
| toggleIcon.style.color = 'var(--text-muted)'; | |
| addLog("SYSTEM", "Auto-Trading deaktiviert."); | |
| } | |
| } | |
| function addLog(source, msg) { | |
| const time = new Date().toLocaleTimeString('de-DE'); | |
| const entry = document.createElement('div'); | |
| entry.className = 'log-entry'; | |
| entry.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-source source-agent">${source}</span>: ${msg}`; | |
| terminal.appendChild(entry); | |
| } | |
| // --- Navigation --- | |
| function switchTab(tabName) { | |
| // Simple visual feedback only for this demo | |
| const items = document.querySelectorAll('.nav-item'); | |
| items.forEach(item => item.classList.remove('active')); | |
| // Find the clicked item (simplified logic) | |
| event.currentTarget.classList.add('active'); | |
| if (tabName !== 'dashboard') { | |
| addLog("NAV", `Wechsle zu Ansicht: ${tabName.toUpperCase()}... (Simulation)`); | |
| } | |
| } | |
| function toggleSidebar() { | |
| const sidebar = document.getElementById('sidebar'); | |
| sidebar.classList.toggle('open'); | |
| } | |
| </script> | |
| </body> | |
| </html> |