Hugging Face's logo

Spaces:
Resickz
/
anycoder-b3e32f66
Running

App Files Community
Resickz commited on
Commit
6224b75
·
verified ·
1 Parent(s): 6928b86

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +951 -19
index.html CHANGED
@@ -1,19 +1,951 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QuantTrade AI | Next-Gen Trading Terminal</title>
7
+ <!-- FontAwesome für Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Google Fonts -->
10
+ <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">
11
+
12
+ <style>
13
+ :root {
14
+ /* Farbpalette - Dark Cyberpunk/FinTech Theme */
15
+ --bg-dark: #0a0e17;
16
+ --bg-panel: #111625;
17
+ --bg-panel-light: #1a2133;
18
+ --primary: #3b82f6;
19
+ --primary-glow: rgba(59, 130, 246, 0.5);
20
+ --accent-quantum: #8b5cf6; /* Lila für Quantum */
21
+ --accent-ml: #10b981; /* Grün für ML */
22
+ --accent-rag: #f59e0b; /* Orange für RAG */
23
+ --text-main: #e2e8f0;
24
+ --text-muted: #94a3b8;
25
+ --border: #2d3748;
26
+ --success: #10b981;
27
+ --danger: #ef4444;
28
+ --font-main: 'Inter', sans-serif;
29
+ --font-mono: 'JetBrains Mono', monospace;
30
+ --glass: rgba(17, 22, 37, 0.7);
31
+ }
32
+
33
+ * {
34
+ box-sizing: border-box;
35
+ margin: 0;
36
+ padding: 0;
37
+ scrollbar-width: thin;
38
+ scrollbar-color: var(--border) var(--bg-dark);
39
+ }
40
+
41
+ body {
42
+ background-color: var(--bg-dark);
43
+ color: var(--text-main);
44
+ font-family: var(--font-main);
45
+ height: 100vh;
46
+ overflow: hidden;
47
+ display: flex;
48
+ flex-direction: column;
49
+ }
50
+
51
+ /* --- Scrollbar Styling --- */
52
+ ::-webkit-scrollbar {
53
+ width: 6px;
54
+ height: 6px;
55
+ }
56
+ ::-webkit-scrollbar-track {
57
+ background: var(--bg-dark);
58
+ }
59
+ ::-webkit-scrollbar-thumb {
60
+ background: var(--border);
61
+ border-radius: 3px;
62
+ }
63
+
64
+ /* --- Header --- */
65
+ header {
66
+ height: 60px;
67
+ background: var(--bg-panel);
68
+ border-bottom: 1px solid var(--border);
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: space-between;
72
+ padding: 0 20px;
73
+ z-index: 100;
74
+ }
75
+
76
+ .logo {
77
+ font-weight: 700;
78
+ font-size: 1.2rem;
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 10px;
82
+ color: var(--text-main);
83
+ }
84
+
85
+ .logo i {
86
+ color: var(--primary);
87
+ }
88
+
89
+ .header-links {
90
+ display: flex;
91
+ gap: 20px;
92
+ font-size: 0.9rem;
93
+ }
94
+
95
+ .header-links a {
96
+ color: var(--text-muted);
97
+ text-decoration: none;
98
+ transition: color 0.3s;
99
+ }
100
+
101
+ .header-links a:hover {
102
+ color: var(--primary);
103
+ }
104
+
105
+ .anycoder-link {
106
+ font-size: 0.8rem;
107
+ color: var(--primary);
108
+ text-decoration: none;
109
+ border: 1px solid var(--primary);
110
+ padding: 4px 8px;
111
+ border-radius: 4px;
112
+ }
113
+
114
+ /* --- Main Layout --- */
115
+ .app-container {
116
+ display: flex;
117
+ flex: 1;
118
+ overflow: hidden;
119
+ }
120
+
121
+ /* Sidebar Navigation */
122
+ aside {
123
+ width: 240px;
124
+ background: var(--bg-panel);
125
+ border-right: 1px solid var(--border);
126
+ display: flex;
127
+ flex-direction: column;
128
+ padding: 20px 0;
129
+ transition: transform 0.3s ease;
130
+ }
131
+
132
+ .nav-item {
133
+ padding: 12px 20px;
134
+ cursor: pointer;
135
+ display: flex;
136
+ align-items: center;
137
+ gap: 12px;
138
+ color: var(--text-muted);
139
+ transition: all 0.2s;
140
+ border-left: 3px solid transparent;
141
+ }
142
+
143
+ .nav-item:hover {
144
+ background: var(--bg-panel-light);
145
+ color: var(--text-main);
146
+ }
147
+
148
+ .nav-item.active {
149
+ background: rgba(59, 130, 246, 0.1);
150
+ color: var(--primary);
151
+ border-left-color: var(--primary);
152
+ }
153
+
154
+ .nav-item i {
155
+ width: 20px;
156
+ text-align: center;
157
+ }
158
+
159
+ /* Main Content Area */
160
+ main {
161
+ flex: 1;
162
+ padding: 20px;
163
+ overflow-y: auto;
164
+ display: grid;
165
+ grid-template-columns: 2fr 1fr;
166
+ grid-template-rows: auto 1fr;
167
+ gap: 20px;
168
+ background: radial-gradient(circle at top right, #1a2035 0%, var(--bg-dark) 40%);
169
+ }
170
+
171
+ /* --- Dashboard Widgets --- */
172
+ .card {
173
+ background: var(--bg-panel);
174
+ border: 1px solid var(--border);
175
+ border-radius: 12px;
176
+ padding: 20px;
177
+ display: flex;
178
+ flex-direction: column;
179
+ position: relative;
180
+ overflow: hidden;
181
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
182
+ }
183
+
184
+ .card-header {
185
+ display: flex;
186
+ justify-content: space-between;
187
+ align-items: center;
188
+ margin-bottom: 15px;
189
+ }
190
+
191
+ .card-title {
192
+ font-size: 1rem;
193
+ font-weight: 600;
194
+ color: var(--text-main);
195
+ }
196
+
197
+ .card-subtitle {
198
+ font-size: 0.8rem;
199
+ color: var(--text-muted);
200
+ }
201
+
202
+ /* Top Stats Row */
203
+ .stats-row {
204
+ grid-column: 1 / -1;
205
+ display: grid;
206
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
207
+ gap: 20px;
208
+ }
209
+
210
+ .stat-card {
211
+ background: linear-gradient(145deg, var(--bg-panel), var(--bg-panel-light));
212
+ padding: 15px;
213
+ border-radius: 10px;
214
+ border: 1px solid var(--border);
215
+ display: flex;
216
+ align-items: center;
217
+ gap: 15px;
218
+ }
219
+
220
+ .stat-icon {
221
+ width: 45px;
222
+ height: 45px;
223
+ border-radius: 8px;
224
+ display: flex;
225
+ align-items: center;
226
+ justify-content: center;
227
+ font-size: 1.2rem;
228
+ }
229
+
230
+ .stat-info h3 {
231
+ font-size: 0.9rem;
232
+ color: var(--text-muted);
233
+ font-weight: 500;
234
+ }
235
+
236
+ .stat-info p {
237
+ font-size: 1.4rem;
238
+ font-weight: 700;
239
+ color: var(--text-main);
240
+ font-family: var(--font-mono);
241
+ }
242
+
243
+ /* Chart Section */
244
+ .chart-container {
245
+ grid-column: 1 / 2;
246
+ grid-row: 2 / 3;
247
+ min-height: 400px;
248
+ position: relative;
249
+ }
250
+
251
+ canvas#priceChart {
252
+ width: 100%;
253
+ height: 100%;
254
+ }
255
+
256
+ /* Right Panel: AI & Agents */
257
+ .ai-panel {
258
+ grid-column: 2 / 3;
259
+ grid-row: 2 / 4;
260
+ display: flex;
261
+ flex-direction: column;
262
+ gap: 20px;
263
+ }
264
+
265
+ /* Agent Status List */
266
+ .agent-list {
267
+ display: flex;
268
+ flex-direction: column;
269
+ gap: 10px;
270
+ }
271
+
272
+ .agent-item {
273
+ display: flex;
274
+ align-items: center;
275
+ justify-content: space-between;
276
+ padding: 10px;
277
+ background: var(--bg-panel-light);
278
+ border-radius: 8px;
279
+ border: 1px solid transparent;
280
+ transition: all 0.3s;
281
+ }
282
+
283
+ .agent-item.active {
284
+ border-color: var(--primary);
285
+ background: rgba(59, 130, 246, 0.05);
286
+ }
287
+
288
+ .agent-info {
289
+ display: flex;
290
+ align-items: center;
291
+ gap: 10px;
292
+ }
293
+
294
+ .agent-avatar {
295
+ width: 32px;
296
+ height: 32px;
297
+ border-radius: 50%;
298
+ background: var(--bg-dark);
299
+ display: flex;
300
+ align-items: center;
301
+ justify-content: center;
302
+ font-size: 0.8rem;
303
+ color: var(--text-main);
304
+ }
305
+
306
+ .agent-status {
307
+ font-size: 0.7rem;
308
+ padding: 2px 6px;
309
+ border-radius: 4px;
310
+ font-weight: 600;
311
+ }
312
+
313
+ .status-processing { background: rgba(245, 158, 11, 0.2); color: var(--accent-rag); }
314
+ .status-ready { background: rgba(16, 185, 129, 0.2); color: var(--accent-ml); }
315
+ .status-quantum { background: rgba(139, 92, 246, 0.2); color: var(--accent-quantum); }
316
+
317
+ /* RAG Terminal / Logs */
318
+ .terminal-window {
319
+ flex: 1;
320
+ background: #000;
321
+ border-radius: 8px;
322
+ padding: 15px;
323
+ font-family: var(--font-mono);
324
+ font-size: 0.8rem;
325
+ overflow-y: auto;
326
+ border: 1px solid var(--border);
327
+ display: flex;
328
+ flex-direction: column;
329
+ }
330
+
331
+ .log-entry {
332
+ margin-bottom: 8px;
333
+ line-height: 1.4;
334
+ opacity: 0;
335
+ animation: fadeIn 0.3s forwards;
336
+ }
337
+
338
+ .log-time {
339
+ color: var(--text-muted);
340
+ margin-right: 8px;
341
+ }
342
+
343
+ .log-source {
344
+ font-weight: bold;
345
+ }
346
+ .source-ml { color: var(--accent-ml); }
347
+ .source-quantum { color: var(--accent-quantum); }
348
+ .source-rag { color: var(--accent-rag); }
349
+ .source-agent { color: var(--primary); }
350
+
351
+ /* Quantum Visualization */
352
+ .quantum-viz {
353
+ height: 150px;
354
+ display: flex;
355
+ align-items: center;
356
+ justify-content: center;
357
+ position: relative;
358
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
359
+ }
360
+
361
+ .qubit-ring {
362
+ position: absolute;
363
+ border: 2px solid rgba(139, 92, 246, 0.3);
364
+ border-radius: 50%;
365
+ animation: pulse 2s infinite ease-in-out;
366
+ }
367
+
368
+ .q-core {
369
+ width: 20px;
370
+ height: 20px;
371
+ background: var(--accent-quantum);
372
+ border-radius: 50%;
373
+ box-shadow: 0 0 15px var(--accent-quantum);
374
+ animation: float 3s infinite ease-in-out;
375
+ }
376
+
377
+ /* Control Panel */
378
+ .control-panel {
379
+ grid-column: 1 / 2;
380
+ grid-row: 3 / 4;
381
+ display: flex;
382
+ gap: 10px;
383
+ align-items: center;
384
+ background: var(--bg-panel);
385
+ padding: 15px;
386
+ border-radius: 12px;
387
+ border: 1px solid var(--border);
388
+ }
389
+
390
+ .btn {
391
+ padding: 10px 20px;
392
+ border-radius: 6px;
393
+ border: none;
394
+ font-weight: 600;
395
+ cursor: pointer;
396
+ transition: all 0.2s;
397
+ display: flex;
398
+ align-items: center;
399
+ gap: 8px;
400
+ font-size: 0.9rem;
401
+ }
402
+
403
+ .btn-primary {
404
+ background: var(--primary);
405
+ color: white;
406
+ box-shadow: 0 0 10px var(--primary-glow);
407
+ }
408
+
409
+ .btn-primary:hover {
410
+ background: #2563eb;
411
+ transform: translateY(-1px);
412
+ }
413
+
414
+ .btn-secondary {
415
+ background: transparent;
416
+ border: 1px solid var(--border);
417
+ color: var(--text-muted);
418
+ }
419
+
420
+ .btn-secondary:hover {
421
+ border-color: var(--text-main);
422
+ color: var(--text-main);
423
+ }
424
+
425
+ .toggle-switch {
426
+ display: flex;
427
+ align-items: center;
428
+ gap: 10px;
429
+ margin-left: auto;
430
+ color: var(--text-muted);
431
+ font-size: 0.9rem;
432
+ }
433
+
434
+ /* Animations */
435
+ @keyframes fadeIn {
436
+ to { opacity: 1; }
437
+ }
438
+
439
+ @keyframes pulse {
440
+ 0% { transform: scale(0.8); opacity: 0.5; }
441
+ 50% { transform: scale(1.1); opacity: 0.2; }
442
+ 100% { transform: scale(0.8); opacity: 0.5; }
443
+ }
444
+
445
+ @keyframes float {
446
+ 0%, 100% { transform: translateY(0); }
447
+ 50% { transform: translateY(-10px); }
448
+ }
449
+
450
+ /* Responsive Design */
451
+ @media (max-width: 1024px) {
452
+ main {
453
+ grid-template-columns: 1fr;
454
+ grid-template-rows: auto auto auto;
455
+ }
456
+ .chart-container {
457
+ grid-column: 1 / -1;
458
+ grid-row: 2;
459
+ }
460
+ .ai-panel {
461
+ grid-column: 1 / -1;
462
+ grid-row: 3;
463
+ flex-direction: row;
464
+ flex-wrap: wrap;
465
+ }
466
+ .terminal-window {
467
+ height: 300px;
468
+ flex: 2;
469
+ }
470
+ .control-panel {
471
+ grid-column: 1 / -1;
472
+ grid-row: 4;
473
+ flex-wrap: wrap;
474
+ justify-content: center;
475
+ }
476
+ .toggle-switch {
477
+ margin-left: 0;
478
+ }
479
+ }
480
+
481
+ @media (max-width: 768px) {
482
+ aside {
483
+ position: absolute;
484
+ left: -240px;
485
+ height: 100%;
486
+ z-index: 200;
487
+ }
488
+ aside.open {
489
+ left: 0;
490
+ }
491
+ .header-links {
492
+ display: none;
493
+ }
494
+ .mobile-menu-btn {
495
+ display: block;
496
+ margin-right: 15px;
497
+ font-size: 1.2rem;
498
+ cursor: pointer;
499
+ }
500
+ .stats-row {
501
+ grid-template-columns: 1fr 1fr;
502
+ }
503
+ }
504
+
505
+ @media (min-width: 769px) {
506
+ .mobile-menu-btn {
507
+ display: none;
508
+ }
509
+ }
510
+ </style>
511
+ </head>
512
+ <body>
513
+
514
+ <header>
515
+ <div class="logo">
516
+ <i class="fa-solid fa-mobile-screen-button"></i>
517
+ <span>QuantTrade <span style="color: var(--primary);">AI</span></span>
518
+ </div>
519
+ <div class="mobile-menu-btn" onclick="toggleSidebar()">
520
+ <i class="fa-solid fa-bars"></i>
521
+ </div>
522
+ <div class="header-links">
523
+ <a href="#">Märkte</a>
524
+ <a href="#">Portfolio</a>
525
+ <a href="#">News</a>
526
+ <a href="#">Einstellungen</a>
527
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
528
+ </div>
529
+ </header>
530
+
531
+ <div class="app-container">
532
+ <!-- Sidebar -->
533
+ <aside id="sidebar">
534
+ <div class="nav-item active" onclick="switchTab('dashboard')">
535
+ <i class="fa-solid fa-chart-line"></i>
536
+ <span>Dashboard</span>
537
+ </div>
538
+ <div class="nav-item" onclick="switchTab('agents')">
539
+ <i class="fa-solid fa-robot"></i>
540
+ <span>Multi-Agent System</span>
541
+ </div>
542
+ <div class="nav-item" onclick="switchTab('quantum')">
543
+ <i class="fa-solid fa-atom"></i>
544
+ <span>Quantum Core</span>
545
+ </div>
546
+ <div class="nav-item" onclick="switchTab('rag')">
547
+ <i class="fa-solid fa-brain"></i>
548
+ <span>RAG Knowledge</span>
549
+ </div>
550
+ <div class="nav-item" onclick="switchTab('history')">
551
+ <i class="fa-solid fa-clock-rotate-left"></i>
552
+ <span>Trade History</span>
553
+ </div>
554
+ </aside>
555
+
556
+ <!-- Main Content -->
557
+ <main>
558
+ <!-- Stats Row -->
559
+ <div class="stats-row">
560
+ <div class="stat-card">
561
+ <div class="stat-icon" style="background: rgba(59, 130, 246, 0.2); color: var(--primary);">
562
+ <i class="fa-solid fa-wallet"></i>
563
+ </div>
564
+ <div class="stat-info">
565
+ <h3>Guthaben</h3>
566
+ <p id="balance">€124,592.40</p>
567
+ </div>
568
+ </div>
569
+ <div class="stat-card">
570
+ <div class="stat-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-ml);">
571
+ <i class="fa-solid fa-arrow-trend-up"></i>
572
+ </div>
573
+ <div class="stat-info">
574
+ <h3>Tagesgewinn</h3>
575
+ <p>+€3,240.12</p>
576
+ </div>
577
+ </div>
578
+ <div class="stat-card">
579
+ <div class="stat-icon" style="background: rgba(139, 92, 246, 0.2); color: var(--accent-quantum);">
580
+ <i class="fa-solid fa-microchip"></i>
581
+ </div>
582
+ <div class="stat-info">
583
+ <h3>Quantum Score</h3>
584
+ <p>98.4%</p>
585
+ </div>
586
+ </div>
587
+ <div class="stat-card">
588
+ <div class="stat-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--accent-rag);">
589
+ <i class="fa-solid fa-database"></i>
590
+ </div>
591
+ <div class="stat-info">
592
+ <h3>RAG Vektoren</h3>
593
+ <p>1.2M</p>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <!-- Main Chart -->
599
+ <div class="card chart-container">
600
+ <div class="card-header">
601
+ <div>
602
+ <div class="card-title">BTC/EUR Live</div>
603
+ <div class="card-subtitle">Real-time Multi-Agent Analysis</div>
604
+ </div>
605
+ <div class="toggle-switch">
606
+ <span>Auto-Trade</span>
607
+ <i class="fa-solid fa-toggle-on fa-lg" style="color: var(--primary); cursor: pointer;" id="autoTradeToggle" onclick="toggleAutoTrade()"></i>
608
+ </div>
609
+ </div>
610
+ <canvas id="priceChart"></canvas>
611
+ </div>
612
+
613
+ <!-- AI & Agent Panel -->
614
+ <div class="ai-panel">
615
+ <!-- Quantum State -->
616
+ <div class="card">
617
+ <div class="card-header">
618
+ <span class="card-title"><i class="fa-solid fa-atom" style="color: var(--accent-quantum);"></i> Quantum Optimizer</span>
619
+ <span class="card-subtitle">Q-Solver V4</span>
620
+ </div>
621
+ <div class="quantum-viz">
622
+ <div class="qubit-ring" style="width: 60px; height: 60px;"></div>
623
+ <div class="qubit-ring" style="width: 100px; height: 100px; animation-delay: 0.5s;"></div>
624
+ <div class="qubit-ring" style="width: 140px; height: 140px; animation-delay: 1s;"></div>
625
+ <div class="q-core"></div>
626
+ </div>
627
+ <div style="text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 10px;">
628
+ Zustand: Superposition<br>
629
+ Erwarteter Payoff: <span style="color: var(--success);">+4.2σ</span>
630
+ </div>
631
+ </div>
632
+
633
+ <!-- Active Agents -->
634
+ <div class="card" style="flex: 1;">
635
+ <div class="card-header">
636
+ <span class="card-title">Agent Workflows</span>
637
+ </div>
638
+ <div class="agent-list">
639
+ <div class="agent-item active" id="agent-ml">
640
+ <div class="agent-info">
641
+ <div class="agent-avatar" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-ml);">
642
+ <i class="fa-solid fa-chart-simple"></i>
643
+ </div>
644
+ <div>
645
+ <div style="font-weight: 600; font-size: 0.9rem;">ML Trend Analyst</div>
646
+ <div style="font-size: 0.7rem; color: var(--text-muted);">LSTM / Transformer</div>
647
+ </div>
648
+ </div>
649
+ <span class="agent-status status-ready">READY</span>
650
+ </div>
651
+ <div class="agent-item" id="agent-sentiment">
652
+ <div class="agent-info">
653
+ <div class="agent-avatar" style="background: rgba(245, 158, 11, 0.2); color: var(--accent-rag);">
654
+ <i class="fa-regular fa-comments"></i>
655
+ </div>
656
+ <div>
657
+ <div style="font-weight: 600; font-size: 0.9rem;">RAG Sentiment</div>
658
+ <div style="font-size: 0.7rem; color: var(--text-muted);">News Scanning</div>
659
+ </div>
660
+ </div>
661
+ <span class="agent-status status-processing">PROCESSING</span>
662
+ </div>
663
+ <div class="agent-item" id="agent-risk">
664
+ <div class="agent-info">
665
+ <div class="agent-avatar" style="background: rgba(239, 68, 68, 0.2); color: var(--danger);">
666
+ <i class="fa-solid fa-shield-halved"></i>
667
+ </div>
668
+ <div>
669
+ <div style="font-weight: 600; font-size: 0.9rem;">Risk Manager</div>
670
+ <div style="font-size: 0.7rem; color: var(--text-muted);">VaR Calculation</div>
671
+ </div>
672
+ </div>
673
+ <span class="agent-status status-ready">IDLE</span>
674
+ </div>
675
+ </div>
676
+ </div>
677
+
678
+ <!-- Terminal -->
679
+ <div class="terminal-window" id="terminal">
680
+ <div class="log-entry">
681
+ <span class="log-time">[10:00:01]</span>
682
+ <span class="log-source source-agent">SYSTEM</span>: Initialisiere Multi-Agent Umgebung...
683
+ </div>
684
+ <div class="log-entry">
685
+ <span class="log-time">[10:00:02]</span>
686
+ <span class="log-source source-quantum">QUANTUM</span>: Verbindung zu QPU-Simulator hergestellt. 2048 Qubits bereit.
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+ <!-- Controls -->
692
+ <div class="control-panel">
693
+ <button class="btn btn-primary" onclick="executeTrade('buy')">
694
+ <i class="fa-solid fa-arrow-up"></i> Kaufsignal
695
+ </button>
696
+ <button class="btn btn-secondary" style="border-color: var(--danger); color: var(--danger);" onclick="executeTrade('sell')">
697
+ <i class="fa-solid fa-arrow-down"></i> Verkaufsignal
698
+ </button>
699
+ <div style="margin-left: 20px; color: var(--text-muted); font-size: 0.8rem;">
700
+ <i class="fa-solid fa-circle-info"></i> Strategie: Hybrid (ML + Quantum + RAG)
701
+ </div>
702
+ <div class="toggle-switch">
703
+ <i class="fa-solid fa-bolt" style="color: var(--accent-rag);"></i> High Frequency
704
+ </div>
705
+ </div>
706
+ </main>
707
+ </div>
708
+
709
+ <script>
710
+ // --- State Management ---
711
+ const state = {
712
+ autoTrade: true,
713
+ balance: 124592.40,
714
+ price: 42350.00,
715
+ priceHistory: [],
716
+ maxHistory: 100,
717
+ isRunning: true
718
+ };
719
+
720
+ // --- Init ---
721
+ document.addEventListener('DOMContentLoaded', () => {
722
+ // Fill initial history
723
+ let tempPrice = state.price;
724
+ for (let i = 0; i < state.maxHistory; i++) {
725
+ state.priceHistory.push(tempPrice);
726
+ tempPrice = tempPrice + (Math.random() - 0.5) * 50;
727
+ }
728
+ state.price = tempPrice;
729
+
730
+ initChart();
731
+ startSimulation();
732
+ });
733
+
734
+ // --- Chart Logic (Canvas) ---
735
+ const canvas = document.getElementById('priceChart');
736
+ const ctx = canvas.getContext('2d');
737
+ let chartWidth, chartHeight;
738
+
739
+ function resizeChart() {
740
+ const parent = canvas.parentElement;
741
+ canvas.width = parent.clientWidth;
742
+ canvas.height = parent.clientHeight;
743
+ chartWidth = canvas.width;
744
+ chartHeight = canvas.height;
745
+ }
746
+ window.addEventListener('resize', resizeChart);
747
+ resizeChart();
748
+
749
+ function initChart() {
750
+ drawChart();
751
+ }
752
+
753
+ function drawChart() {
754
+ ctx.clearRect(0, 0, chartWidth, chartHeight);
755
+
756
+ // Grid
757
+ ctx.strokeStyle = '#1f2937';
758
+ ctx.lineWidth = 1;
759
+ ctx.beginPath();
760
+ for(let x = 0; x < chartWidth; x += 50) { ctx.moveTo(x, 0); ctx.lineTo(x, chartHeight); }
761
+ for(let y = 0; y < chartHeight; y += 50) { ctx.moveTo(0, y); ctx.lineTo(chartWidth, y); }
762
+ ctx.stroke();
763
+
764
+ // Calculate scales
765
+ const minPrice = Math.min(...state.priceHistory) * 0.999;
766
+ const maxPrice = Math.max(...state.priceHistory) * 1.001;
767
+ const range = maxPrice - minPrice;
768
+ const stepX = chartWidth / (state.maxHistory - 1);
769
+
770
+ // Draw Area
771
+ const gradient = ctx.createLinearGradient(0, 0, 0, chartHeight);
772
+ gradient.addColorStop(0, 'rgba(59, 130, 246, 0.4)');
773
+ gradient.addColorStop(1, 'rgba(59, 130, 246, 0)');
774
+
775
+ ctx.beginPath();
776
+ ctx.moveTo(0, chartHeight);
777
+ state.priceHistory.forEach((p, i) => {
778
+ const x = i * stepX;
779
+ const y = chartHeight - ((p - minPrice) / range) * chartHeight;
780
+ ctx.lineTo(x, y);
781
+ });
782
+ ctx.lineTo(chartWidth, chartHeight);
783
+ ctx.fillStyle = gradient;
784
+ ctx.fill();
785
+
786
+ // Draw Line
787
+ ctx.beginPath();
788
+ ctx.strokeStyle = '#3b82f6';
789
+ ctx.lineWidth = 2;
790
+ state.priceHistory.forEach((p, i) => {
791
+ const x = i * stepX;
792
+ const y = chartHeight - ((p - minPrice) / range) * chartHeight;
793
+ if (i === 0) ctx.moveTo(x, y);
794
+ else ctx.lineTo(x, y);
795
+ });
796
+ ctx.stroke();
797
+
798
+ // Draw current price dot
799
+ const lastY = chartHeight - ((state.priceHistory[state.priceHistory.length-1] - minPrice) / range) * chartHeight;
800
+ ctx.beginPath();
801
+ ctx.fillStyle = '#fff';
802
+ ctx.arc(chartWidth - 2, lastY, 4, 0, Math.PI * 2);
803
+ ctx.fill();
804
+ ctx.shadowColor = '#3b82f6';
805
+ ctx.shadowBlur = 10;
806
+ }
807
+
808
+ // --- Simulation Logic ---
809
+ function startSimulation() {
810
+ setInterval(() => {
811
+ if (!state.isRunning) return;
812
+
813
+ // 1. Update Price (Random Walk)
814
+ const change = (Math.random() - 0.5) * 80; // Volatility
815
+ state.price += change;
816
+ state.priceHistory.push(state.price);
817
+ if (state.priceHistory.length > state.maxHistory) state.priceHistory.shift();
818
+
819
+ // Update UI Numbers
820
+ document.getElementById('balance').innerText = `€${state.balance.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
821
+
822
+ // 2. Trigger Agents randomly
823
+ if (Math.random() > 0.7) triggerAgent('ml');
824
+ if (Math.random() > 0.85) triggerAgent('rag');
825
+ if (Math.random() > 0.95) triggerAgent('quantum');
826
+
827
+ // 3. Auto Trade Logic
828
+ if (state.autoTrade && Math.random() > 0.9) {
829
+ const action = change > 0 ? 'buy' : 'sell';
830
+ executeTrade(action, true);
831
+ }
832
+
833
+ drawChart();
834
+ }, 1000); // 1 second tick
835
+ }
836
+
837
+ // --- Agent Simulation ---
838
+ const terminal = document.getElementById('terminal');
839
+ const agentMessages = {
840
+ ml: [
841
+ "Neuronales Netz: Bullish-Divergenz erkannt auf 4H-Chart.",
842
+ "LSTM Vorhersage: Preisziel €42,800 in 3 Ticks.",
843
+ "Mustererkennung: Double Bottom bestätigt.",
844
+ "Training Update: Weights angepasst an neue Volatilität."
845
+ ],
846
+ rag: [
847
+ "RAG Query: 'Fed Zinsen' -> 98% Relevanz (Quelle: Bloomberg).",
848
+ "Vektordatenbank: 5 neue Finanzberichte indiziert.",
849
+ "Kontext-Abfrage: Historischer Crash 2021 zeigt Ähnlichkeit.",
850
+ "Sentiment Analyse: Twitter/Reddit Stimmung steigend."
851
+ ],
852
+ quantum: [
853
+ "QAOA Algorithmus: Optimiere Portfolio-Allokation...",
854
+ "Qubit-Kollaps: Lösung gefunden. Risikominimierung: 12%.",
855
+ "Quantum Tunneling: Erkenne Arbitrage-Möglichkeit zwischen Exchanges.",
856
+ "Amplitude Verstärkung: Fokus auf Asset #BTC."
857
+ ]
858
+ };
859
+
860
+ function triggerAgent(type) {
861
+ const msgs = agentMessages[type];
862
+ const msg = msgs[Math.floor(Math.random() * msgs.length)];
863
+ const time = new Date().toLocaleTimeString('de-DE');
864
+
865
+ const entry = document.createElement('div');
866
+ entry.className = 'log-entry';
867
+
868
+ let sourceClass = '';
869
+ let sourceName = '';
870
+ if (type === 'ml') { sourceClass = 'source-ml'; sourceName = 'ML-ENGINE'; }
871
+ if (type === 'rag') { sourceClass = 'source-rag'; sourceName = 'RAG-CORE'; }
872
+ if (type === 'quantum') { sourceClass = 'source-quantum'; sourceName = 'QUANTUM'; }
873
+
874
+ entry.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-source ${sourceClass}">${sourceName}</span>: ${msg}`;
875
+ terminal.appendChild(entry);
876
+ terminal.scrollTop = terminal.scrollHeight;
877
+
878
+ // Visual feedback on agent card
879
+ const agentId = type === 'ml' ? 'agent-ml' : (type === 'rag' ? 'agent-sentiment' : null);
880
+ if (agentId) {
881
+ const el = document.getElementById(agentId);
882
+ el.style.borderColor = 'var(--primary)';
883
+ setTimeout(() => { el.style.borderColor = 'transparent'; }, 500);
884
+ }
885
+ }
886
+
887
+ // --- Actions ---
888
+ function executeTrade(type, auto = false) {
889
+ const time = new Date().toLocaleTimeString('de-DE');
890
+ const amount = (Math.random() * 0.5).toFixed(4);
891
+ const entry = document.createElement('div');
892
+ entry.className = 'log-entry';
893
+
894
+ const color = type === 'buy' ? 'var(--success)' : 'var(--danger)';
895
+ const icon = type === 'buy' ? 'BUY' : 'SELL';
896
+
897
+ let logMsg = auto ? `AUTO-EXEC: ${icon} ${amount} BTC @ €${state.price.toFixed(2)}` : `MANUAL: ${icon} ${amount} BTC @ €${state.price.toFixed(2)}`;
898
+
899
+ entry.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-source" style="color:${color}">ORDER</span>: ${logMsg}`;
900
+ terminal.appendChild(entry);
901
+ terminal.scrollTop = terminal.scrollHeight;
902
+
903
+ // Simulate Balance Impact
904
+ if (type === 'buy') state.balance -= (amount * state.price);
905
+ else state.balance += (amount * state.price);
906
+ }
907
+
908
+ function toggleAutoTrade() {
909
+ state.autoTrade = !state.autoTrade;
910
+ const toggleIcon = document.getElementById('autoTradeToggle');
911
+ if (state.autoTrade) {
912
+ toggleIcon.classList.remove('fa-toggle-off');
913
+ toggleIcon.classList.add('fa-toggle-on');
914
+ toggleIcon.style.color = 'var(--primary)';
915
+ addLog("SYSTEM", "Auto-Trading aktiviert.");
916
+ } else {
917
+ toggleIcon.classList.remove('fa-toggle-on');
918
+ toggleIcon.classList.add('fa-toggle-off');
919
+ toggleIcon.style.color = 'var(--text-muted)';
920
+ addLog("SYSTEM", "Auto-Trading deaktiviert.");
921
+ }
922
+ }
923
+
924
+ function addLog(source, msg) {
925
+ const time = new Date().toLocaleTimeString('de-DE');
926
+ const entry = document.createElement('div');
927
+ entry.className = 'log-entry';
928
+ entry.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-source source-agent">${source}</span>: ${msg}`;
929
+ terminal.appendChild(entry);
930
+ }
931
+
932
+ // --- Navigation ---
933
+ function switchTab(tabName) {
934
+ // Simple visual feedback only for this demo
935
+ const items = document.querySelectorAll('.nav-item');
936
+ items.forEach(item => item.classList.remove('active'));
937
+ // Find the clicked item (simplified logic)
938
+ event.currentTarget.classList.add('active');
939
+
940
+ if (tabName !== 'dashboard') {
941
+ addLog("NAV", `Wechsle zu Ansicht: ${tabName.toUpperCase()}... (Simulation)`);
942
+ }
943
+ }
944
+
945
+ function toggleSidebar() {
946
+ const sidebar = document.getElementById('sidebar');
947
+ sidebar.classList.toggle('open');
948
+ }
949
+ </script>
950
+ </body>
951
+ </html>