Hugging Face's logo

Spaces:
Netrade56
/
quantumtradeleap4d
Running

App Files Community
Netrade56 commited on
Commit
a0619b7
·
verified ·
1 Parent(s): e31b0c4

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +842 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quantumtradeleap4d
3
- emoji: 🔥
4
- colorFrom: blue
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: quantumtradeleap4d
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,842 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cervello Trader - AI Trading Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #0f172a;
16
+ color: #f8fafc;
17
+ }
18
+
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
21
+ }
22
+
23
+ .card-gradient {
24
+ background: linear-gradient(145deg, #1e293b 0%, #0f1a2e 100%);
25
+ }
26
+
27
+ .signal-buy {
28
+ background: linear-gradient(145deg, rgba(5, 150, 105, 0.2) 0%, rgba(5, 150, 105, 0.05) 100%);
29
+ border-left: 4px solid #10b981;
30
+ }
31
+
32
+ .signal-sell {
33
+ background: linear-gradient(145deg, rgba(220, 38, 38, 0.2) 0%, rgba(220, 38, 38, 0.05) 100%);
34
+ border-left: 4px solid #ef4444;
35
+ }
36
+
37
+ .signal-hold {
38
+ background: linear-gradient(145deg, rgba(100, 116, 139, 0.2) 0%, rgba(100, 116, 139, 0.05) 100%);
39
+ border-left: 4px solid #64748b;
40
+ }
41
+
42
+ .scrollbar-hide::-webkit-scrollbar {
43
+ display: none;
44
+ }
45
+
46
+ .scrollbar-hide {
47
+ -ms-overflow-style: none;
48
+ scrollbar-width: none;
49
+ }
50
+
51
+ .animate-pulse-slow {
52
+ animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
53
+ }
54
+
55
+ @keyframes pulse {
56
+ 0%, 100% {
57
+ opacity: 1;
58
+ }
59
+ 50% {
60
+ opacity: 0.5;
61
+ }
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="min-h-screen">
66
+ <div class="flex flex-col min-h-screen">
67
+ <!-- Header -->
68
+ <header class="gradient-bg border-b border-slate-800">
69
+ <div class="container mx-auto px-4 py-4 flex items-center justify-between">
70
+ <div class="flex items-center space-x-3">
71
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
72
+ <i class="fas fa-brain text-white text-xl"></i>
73
+ </div>
74
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
75
+ Cervello Trader
76
+ </h1>
77
+ </div>
78
+
79
+ <div class="flex items-center space-x-4">
80
+ <div class="hidden md:flex items-center space-x-2 bg-slate-800/50 rounded-full px-4 py-2">
81
+ <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse-slow"></div>
82
+ <span class="text-sm font-medium">Live Trading</span>
83
+ </div>
84
+
85
+ <div class="flex items-center space-x-2 bg-slate-800/50 rounded-full px-4 py-2">
86
+ <div class="w-2 h-2 rounded-full bg-blue-400"></div>
87
+ <span class="text-sm font-medium">Equities Watchlist</span>
88
+ </div>
89
+
90
+ <button class="p-2 rounded-full hover:bg-slate-800/50 transition-colors">
91
+ <i class="fas fa-cog text-slate-400"></i>
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </header>
96
+
97
+ <!-- Main Content -->
98
+ <main class="flex-1 container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-4 gap-6">
99
+ <!-- Left Sidebar -->
100
+ <div class="lg:col-span-1 space-y-6">
101
+ <!-- System Status -->
102
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
103
+ <h2 class="text-lg font-semibold text-slate-300 mb-4 flex items-center">
104
+ <i class="fas fa-heart-pulse mr-2 text-blue-400"></i>
105
+ System Status
106
+ </h2>
107
+
108
+ <div class="space-y-4">
109
+ <div class="flex items-center justify-between">
110
+ <span class="text-slate-400">Data Ingestion</span>
111
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/50 text-green-400">
112
+ <i class="fas fa-check-circle mr-1"></i> Active
113
+ </span>
114
+ </div>
115
+
116
+ <div class="flex items-center justify-between">
117
+ <span class="text-slate-400">Market Analysis</span>
118
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/50 text-green-400">
119
+ <i class="fas fa-check-circle mr-1"></i> Active
120
+ </span>
121
+ </div>
122
+
123
+ <div class="flex items-center justify-between">
124
+ <span class="text-slate-400">Risk Management</span>
125
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/50 text-green-400">
126
+ <i class="fas fa-check-circle mr-1"></i> Active
127
+ </span>
128
+ </div>
129
+
130
+ <div class="flex items-center justify-between">
131
+ <span class="text-slate-400">Execution Engine</span>
132
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-amber-900/50 text-amber-400">
133
+ <i class="fas fa-exclamation-triangle mr-1"></i> Sandbox
134
+ </span>
135
+ </div>
136
+
137
+ <div class="flex items-center justify-between">
138
+ <span class="text-slate-400">ML Models</span>
139
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-900/50 text-blue-400">
140
+ <i class="fas fa-circle-notch mr-1 animate-spin"></i> Training
141
+ </span>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="mt-6 pt-4 border-t border-slate-800">
146
+ <div class="flex items-center justify-between mb-2">
147
+ <span class="text-slate-400">System Load</span>
148
+ <span class="text-sm font-medium">42%</span>
149
+ </div>
150
+ <div class="w-full bg-slate-800 rounded-full h-2">
151
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 42%"></div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Risk Metrics -->
157
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
158
+ <h2 class="text-lg font-semibold text-slate-300 mb-4 flex items-center">
159
+ <i class="fas fa-shield-alt mr-2 text-purple-400"></i>
160
+ Risk Metrics
161
+ </h2>
162
+
163
+ <div class="space-y-4">
164
+ <div>
165
+ <div class="flex items-center justify-between mb-1">
166
+ <span class="text-slate-400">Current Position</span>
167
+ <span class="font-medium">$2,450.00</span>
168
+ </div>
169
+ <div class="w-full bg-slate-800 rounded-full h-2">
170
+ <div class="bg-indigo-500 h-2 rounded-full" style="width: 24.5%"></div>
171
+ </div>
172
+ <div class="text-xs text-slate-500 mt-1">24.5% of max ($10,000)</div>
173
+ </div>
174
+
175
+ <div>
176
+ <div class="flex items-center justify-between mb-1">
177
+ <span class="text-slate-400">Daily P&L</span>
178
+ <span class="font-medium text-green-400">+$328.50</span>
179
+ </div>
180
+ <div class="w-full bg-slate-800 rounded-full h-2">
181
+ <div class="bg-green-500 h-2 rounded-full" style="width: 32.8%"></div>
182
+ </div>
183
+ <div class="text-xs text-slate-500 mt-1">32.8% of max loss ($1,000)</div>
184
+ </div>
185
+
186
+ <div class="grid grid-cols-2 gap-4 mt-4">
187
+ <div class="bg-slate-800/50 rounded-lg p-3">
188
+ <div class="text-xs text-slate-400 mb-1">Avg Confidence</div>
189
+ <div class="text-xl font-bold text-blue-400">0.72</div>
190
+ </div>
191
+ <div class="bg-slate-800/50 rounded-lg p-3">
192
+ <div class="text-xs text-slate-400 mb-1">Avg Risk Score</div>
193
+ <div class="text-xl font-bold text-amber-400">0.31</div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Recent Signals -->
200
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
201
+ <h2 class="text-lg font-semibold text-slate-300 mb-4 flex items-center">
202
+ <i class="fas fa-bolt mr-2 text-yellow-400"></i>
203
+ Recent Signals
204
+ </h2>
205
+
206
+ <div class="space-y-3 max-h-80 overflow-y-auto scrollbar-hide">
207
+ <div class="signal-buy p-3 rounded-lg">
208
+ <div class="flex items-center justify-between">
209
+ <div class="font-medium">BUY Signal</div>
210
+ <div class="text-xs text-slate-400">2 min ago</div>
211
+ </div>
212
+ <div class="flex items-center justify-between mt-1">
213
+ <div class="text-sm">
214
+ <span class="text-slate-400">Strength:</span>
215
+ <span class="ml-1 font-medium text-green-400">0.68</span>
216
+ </div>
217
+ <div class="text-sm">
218
+ <span class="text-slate-400">Confidence:</span>
219
+ <span class="ml-1 font-medium">0.79</span>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="signal-hold p-3 rounded-lg">
225
+ <div class="flex items-center justify-between">
226
+ <div class="font-medium">HOLD Signal</div>
227
+ <div class="text-xs text-slate-400">4 min ago</div>
228
+ </div>
229
+ <div class="flex items-center justify-between mt-1">
230
+ <div class="text-sm">
231
+ <span class="text-slate-400">Strength:</span>
232
+ <span class="ml-1 font-medium">0.12</span>
233
+ </div>
234
+ <div class="text-sm">
235
+ <span class="text-slate-400">Confidence:</span>
236
+ <span class="ml-1 font-medium">0.45</span>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="signal-sell p-3 rounded-lg">
242
+ <div class="flex items-center justify-between">
243
+ <div class="font-medium">SELL Signal</div>
244
+ <div class="text-xs text-slate-400">7 min ago</div>
245
+ </div>
246
+ <div class="flex items-center justify-between mt-1">
247
+ <div class="text-sm">
248
+ <span class="text-slate-400">Strength:</span>
249
+ <span class="ml-1 font-medium text-red-400">-0.54</span>
250
+ </div>
251
+ <div class="text-sm">
252
+ <span class="text-slate-400">Confidence:</span>
253
+ <span class="ml-1 font-medium">0.63</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="signal-buy p-3 rounded-lg">
259
+ <div class="flex items-center justify-between">
260
+ <div class="font-medium">BUY Signal</div>
261
+ <div class="text-xs text-slate-400">12 min ago</div>
262
+ </div>
263
+ <div class="flex items-center justify-between mt-1">
264
+ <div class="text-sm">
265
+ <span class="text-slate-400">Strength:</span>
266
+ <span class="ml-1 font-medium text-green-400">0.72</span>
267
+ </div>
268
+ <div class="text-sm">
269
+ <span class="text-slate-400">Confidence:</span>
270
+ <span class="ml-1 font-medium">0.81</span>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Main Dashboard -->
279
+ <div class="lg:col-span-3 space-y-6">
280
+ <!-- Watchlist Selector -->
281
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
282
+ <h2 class="text-lg font-semibold text-slate-300 mb-4">Equities Watchlist</h2>
283
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2" id="watchlist-container">
284
+ <!-- Will be populated by JS -->
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Price and Metrics -->
289
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6" id="price-metrics">
290
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
291
+ <div class="text-sm text-slate-400 mb-1">Selected Equity</div>
292
+ <div class="text-2xl font-bold" id="current-price">$0.00</div>
293
+ <div class="flex items-center mt-2">
294
+ <span class="text-green-400 text-sm font-medium">+1.24%</span>
295
+ <span class="text-slate-500 text-sm ml-2">($614.20)</span>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
300
+ <div class="text-sm text-slate-400 mb-1">Spread</div>
301
+ <div class="text-2xl font-bold">$2.45</div>
302
+ <div class="text-slate-500 text-sm mt-2">0.0049%</div>
303
+ </div>
304
+
305
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
306
+ <div class="text-sm text-slate-400 mb-1">Imbalance</div>
307
+ <div class="text-2xl font-bold">0.32</div>
308
+ <div class="flex items-center mt-2">
309
+ <span class="text-green-400 text-sm font-medium">Bullish</span>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
314
+ <div class="text-sm text-slate-400 mb-1">Volatility</div>
315
+ <div class="text-2xl font-bold">0.68%</div>
316
+ <div class="flex items-center mt-2">
317
+ <span class="text-amber-400 text-sm font-medium">Medium</span>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Charts -->
323
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
324
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
325
+ <div class="flex items-center justify-between mb-4">
326
+ <h2 class="text-lg font-semibold text-slate-300">Price & Spread</h2>
327
+ <div class="flex space-x-2">
328
+ <button class="px-2 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700">1h</button>
329
+ <button class="px-2 py-1 text-xs rounded-md bg-blue-600">4h</button>
330
+ <button class="px-2 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700">1d</button>
331
+ </div>
332
+ </div>
333
+ <div id="priceChart" class="h-64"></div>
334
+ </div>
335
+
336
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
337
+ <div class="flex items-center justify-between mb-4">
338
+ <h2 class="text-lg font-semibold text-slate-300">Signal Strength</h2>
339
+ <div class="flex space-x-2">
340
+ <button class="px-2 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700">1h</button>
341
+ <button class="px-2 py-1 text-xs rounded-md bg-blue-600">4h</button>
342
+ <button class="px-2 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700">1d</button>
343
+ </div>
344
+ </div>
345
+ <div id="signalChart" class="h-64"></div>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Order Book -->
350
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
351
+ <h2 class="text-lg font-semibold text-slate-300 mb-4">Level 2 Order Book</h2>
352
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
353
+ <div>
354
+ <div class="flex justify-between text-xs text-slate-500 mb-2 px-2">
355
+ <span>Bids (Buy)</span>
356
+ <span>Size</span>
357
+ </div>
358
+ <div class="space-y-1">
359
+ <div class="flex justify-between bg-green-900/20 hover:bg-green-900/30 px-3 py-2 rounded">
360
+ <span class="text-green-400">$50,242.87</span>
361
+ <span>12.45 BTC</span>
362
+ </div>
363
+ <div class="flex justify-between bg-green-900/10 hover:bg-green-900/20 px-3 py-2 rounded">
364
+ <span class="text-green-400">$50,240.15</span>
365
+ <span>8.76 BTC</span>
366
+ </div>
367
+ <div class="flex justify-between bg-green-900/5 hover:bg-green-900/10 px-3 py-2 rounded">
368
+ <span class="text-green-400">$50,238.92</span>
369
+ <span>5.32 BTC</span>
370
+ </div>
371
+ <div class="flex justify-between px-3 py-2 rounded">
372
+ <span class="text-green-400">$50,237.45</span>
373
+ <span>3.87 BTC</span>
374
+ </div>
375
+ <div class="flex justify-between px-3 py-2 rounded">
376
+ <span class="text-green-400">$50,235.67</span>
377
+ <span>2.45 BTC</span>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <div>
383
+ <div class="flex justify-between text-xs text-slate-500 mb-2 px-2">
384
+ <span>Asks (Sell)</span>
385
+ <span>Size</span>
386
+ </div>
387
+ <div class="space-y-1">
388
+ <div class="flex justify-between bg-red-900/20 hover:bg-red-900/30 px-3 py-2 rounded">
389
+ <span class="text-red-400">$50,247.32</span>
390
+ <span>9.87 BTC</span>
391
+ </div>
392
+ <div class="flex justify-between bg-red-900/10 hover:bg-red-900/20 px-3 py-2 rounded">
393
+ <span class="text-red-400">$50,249.15</span>
394
+ <span>7.65 BTC</span>
395
+ </div>
396
+ <div class="flex justify-between bg-red-900/5 hover:bg-red-900/10 px-3 py-2 rounded">
397
+ <span class="text-red-400">$50,251.42</span>
398
+ <span>4.32 BTC</span>
399
+ </div>
400
+ <div class="flex justify-between px-3 py-2 rounded">
401
+ <span class="text-red-400">$50,253.87</span>
402
+ <span>3.12 BTC</span>
403
+ </div>
404
+ <div class="flex justify-between px-3 py-2 rounded">
405
+ <span class="text-red-400">$50,255.23</span>
406
+ <span>1.98 BTC</span>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Recent Decisions -->
414
+ <div class="card-gradient rounded-xl p-5 border border-slate-800 shadow-lg">
415
+ <div class="flex items-center justify-between mb-4">
416
+ <h2 class="text-lg font-semibold text-slate-300">Recent Trading Decisions</h2>
417
+ <button class="text-sm text-blue-400 hover:text-blue-300">View All</button>
418
+ </div>
419
+
420
+ <div class="overflow-x-auto">
421
+ <table class="min-w-full divide-y divide-slate-800">
422
+ <thead>
423
+ <tr>
424
+ <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Time</th>
425
+ <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Action</th>
426
+ <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Quantity</th>
427
+ <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Price</th>
428
+ <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Confidence</th>
429
+ <th class="px-4 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Risk</th>
430
+ </tr>
431
+ </thead>
432
+ <tbody class="divide-y divide-slate-800">
433
+ <tr class="hover:bg-slate-800/50">
434
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-slate-400">2 min ago</td>
435
+ <td class="px-4 py-3 whitespace-nowrap">
436
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/30 text-green-400">BUY</span>
437
+ </td>
438
+ <td class="px-4 py-3 whitespace-nowrap text-sm">0.42 BTC</td>
439
+ <td class="px-4 py-3 whitespace-nowrap text-sm">$50,231.45</td>
440
+ <td class="px-4 py-3 whitespace-nowrap">
441
+ <div class="flex items-center">
442
+ <div class="w-16 bg-slate-800 rounded-full h-2 mr-2">
443
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 79%"></div>
444
+ </div>
445
+ <span class="text-sm">0.79</span>
446
+ </div>
447
+ </td>
448
+ <td class="px-4 py-3 whitespace-nowrap">
449
+ <div class="flex items-center">
450
+ <div class="w-16 bg-slate-800 rounded-full h-2 mr-2">
451
+ <div class="bg-amber-500 h-2 rounded-full" style="width: 28%"></div>
452
+ </div>
453
+ <span class="text-sm">0.28</span>
454
+ </div>
455
+ </td>
456
+ </tr>
457
+
458
+ <tr class="hover:bg-slate-800/50">
459
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-slate-400">4 min ago</td>
460
+ <td class="px-4 py-3 whitespace-nowrap">
461
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-slate-700 text-slate-400">HOLD</span>
462
+ </td>
463
+ <td class="px-4 py-3 whitespace-nowrap text-sm">-</td>
464
+ <td class="px-4 py-3 whitespace-nowrap text-sm">-</td>
465
+ <td class="px-4 py-3 whitespace-nowrap">
466
+ <div class="flex items-center">
467
+ <div class="w-16 bg-slate-800 rounded-full h-2 mr-2">
468
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div>
469
+ </div>
470
+ <span class="text-sm">0.45</span>
471
+ </div>
472
+ </td>
473
+ <td class="px-4 py-3 whitespace-nowrap">
474
+ <div class="flex items-center">
475
+ <div class="w-16 bg-slate-800 rounded-full h-2 mr-2">
476
+ <div class="bg-amber-500 h-2 rounded-full" style="width: 52%"></div>
477
+ </div>
478
+ <span class="text-sm">0.52</span>
479
+ </div>
480
+ </td>
481
+ </tr>
482
+
483
+ <tr class="hover:bg-slate-800/50">
484
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-slate-400">7 min ago</td>
485
+ <td class="px-4 py-3 whitespace-nowrap">
486
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-red-900/30 text-red-400">SELL</span>
487
+ </td>
488
+ <td class="px-4 py-3 whitespace-nowrap text-sm">0.35 BTC</td>
489
+ <td class="px-4 py-3 whitespace-nowrap text-sm">$50,267.32</td>
490
+ <td class="px-4 py-3 whitespace-nowrap">
491
+ <div class="flex items-center">
492
+ <div class="w-16 bg-slate-800 rounded-full h-2 mr-2">
493
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 63%"></div>
494
+ </div>
495
+ <span class="text-sm">0.63</span>
496
+ </div>
497
+ </td>
498
+ <td class="px-4 py-3 whitespace-nowrap">
499
+ <div class="flex items-center">
500
+ <div class="w-16 bg-slate-800 rounded-full h-2 mr-2">
501
+ <div class="bg-amber-500 h-2 rounded-full" style="width: 41%"></div>
502
+ </div>
503
+ <span class="text-sm">0.41</span>
504
+ </div>
505
+ </td>
506
+ </tr>
507
+
508
+ <tr class="hover:bg-slate-800/50">
509
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-slate-400">12 min ago</td>
510
+ <td class="px-4 py-3 whitespace-nowrap">
511
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/30 text-green-400">BUY</span>
512
+ </td>
513
+ <td class="px-4 py-3 whitespace-nowrap text-sm">0.48 BTC</td>
514
+ <td class="px-4 py-3 whitespace-nowrap text-sm">$50,198.76</td>
515
+ <td class="px-4 py-3 whitespace-nowrap">
516
+ <div class="flex items-center">
517
+ <div class="w-16 bg-slate-800 rounded-full h-2 mr-2">
518
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 81%"></div>
519
+ </div>
520
+ <span class="text-sm">0.81</span>
521
+ </div>
522
+ </td>
523
+ <td class="px-4 py-3 whitespace-nowrap">
524
+ <div class="flex items-center">
525
+ <div class="w-16 bg-slate-800 rounded-full h-2 mr-2">
526
+ <div class="bg-amber-500 h-2 rounded-full" style="width: 29%"></div>
527
+ </div>
528
+ <span class="text-sm">0.29</span>
529
+ </div>
530
+ </td>
531
+ </tr>
532
+ </tbody>
533
+ </table>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </main>
538
+
539
+ <!-- Footer -->
540
+ <footer class="gradient-bg border-t border-slate-800 py-4">
541
+ <div class="container mx-auto px-4 flex items-center justify-between">
542
+ <div class="text-sm text-slate-500">
543
+ <span>Cervello Trader v2.1.0</span>
544
+ <span class="mx-2">•</span>
545
+ <span>Last update: <span id="current-time"></span></span>
546
+ </div>
547
+ <div class="flex items-center space-x-4">
548
+ <button class="text-slate-500 hover:text-blue-400 transition-colors">
549
+ <i class="fab fa-github"></i>
550
+ </button>
551
+ <button class="text-slate-500 hover:text-blue-400 transition-colors">
552
+ <i class="fab fa-twitter"></i>
553
+ </button>
554
+ <button class="text-slate-500 hover:text-blue-400 transition-colors">
555
+ <i class="fas fa-question-circle"></i>
556
+ </button>
557
+ </div>
558
+ </div>
559
+ </footer>
560
+ </div>
561
+
562
+ <script>
563
+ // Update current time
564
+ function updateTime() {
565
+ const now = new Date();
566
+ const timeString = now.toLocaleTimeString();
567
+ document.getElementById('current-time').textContent = timeString;
568
+ }
569
+ setInterval(updateTime, 1000);
570
+ updateTime();
571
+
572
+ // Watchlist data (sample from TradingView watchlist)
573
+ const watchlistEquities = [
574
+ {symbol: 'AAPL', name: 'Apple Inc.'},
575
+ {symbol: 'MSFT', name: 'Microsoft'},
576
+ {symbol: 'AMZN', name: 'Amazon'},
577
+ {symbol: 'GOOGL', name: 'Alphabet'},
578
+ {symbol: 'META', name: 'Meta'},
579
+ {symbol: 'TSLA', name: 'Tesla'},
580
+ {symbol: 'NVDA', name: 'NVIDIA'},
581
+ {symbol: 'JPM', name: 'JPMorgan'},
582
+ {symbol: 'V', name: 'Visa'},
583
+ {symbol: 'WMT', name: 'Walmart'},
584
+ {symbol: 'PG', name: 'Procter & Gamble'},
585
+ {symbol: 'MA', name: 'Mastercard'}
586
+ ];
587
+
588
+ // Populate watchlist
589
+ const watchlistContainer = document.getElementById('watchlist-container');
590
+ watchlistEquities.forEach(stock => {
591
+ const stockEl = document.createElement('button');
592
+ stockEl.className = 'px-3 py-2 rounded-md bg-slate-800 hover:bg-slate-700 text-sm text-left truncate';
593
+ stockEl.innerHTML = `
594
+ <div class="font-medium">${stock.symbol}</div>
595
+ <div class="text-xs text-slate-400 truncate">${stock.name}</div>
596
+ `;
597
+ stockEl.addEventListener('click', () => loadStockData(stock.symbol));
598
+ watchlistContainer.appendChild(stockEl);
599
+ });
600
+
601
+ // Function to load stock data
602
+ async function loadStockData(symbol) {
603
+ try {
604
+ // In a real implementation, you would fetch from an API like:
605
+ // const response = await fetch(`/api/stock/${symbol}`);
606
+ // const data = await response.json();
607
+
608
+ // Mock data for demo
609
+ const mockData = {
610
+ price: (Math.random() * 500 + 50).toFixed(2),
611
+ change: (Math.random() * 10 - 5).toFixed(2),
612
+ changePercent: (Math.random() * 10 - 5).toFixed(2),
613
+ spread: (Math.random() * 0.5 + 0.1).toFixed(2),
614
+ imbalance: (Math.random() * 2 - 1).toFixed(2),
615
+ volatility: (Math.random() * 5).toFixed(2)
616
+ };
617
+
618
+ // Update UI
619
+ document.getElementById('current-price').textContent = `${mockData.price}`;
620
+ document.querySelector('#price-metrics div:nth-child(1) .text-2xl').textContent = `${mockData.price}`;
621
+ document.querySelector('#price-metrics div:nth-child(1) span:nth-child(1)').textContent =
622
+ `${mockData.changePercent >= 0 ? '+' : ''}${mockData.changePercent}%`;
623
+ document.querySelector('#price-metrics div:nth-child(1) span:nth-child(1)').className =
624
+ `text-${mockData.changePercent >= 0 ? 'green' : 'red'}-400 text-sm font-medium`;
625
+ document.querySelector('#price-metrics div:nth-child(2) .text-2xl').textContent = `${mockData.spread}`;
626
+ document.querySelector('#price-metrics div:nth-child(3) .text-2xl').textContent = mockData.imbalance;
627
+ document.querySelector('#price-metrics div:nth-child(4) .text-2xl').textContent = `${mockData.volatility}%`;
628
+
629
+ // Update charts with new data
630
+ updateCharts(symbol);
631
+
632
+ } catch (error) {
633
+ console.error('Error loading stock data:', error);
634
+ }
635
+ }
636
+
637
+ // Price Chart
638
+ function generatePriceData(symbol) {
639
+ return {
640
+ x: Array.from({length: 30}, (_, i) => {
641
+ const d = new Date();
642
+ d.setMinutes(d.getMinutes() - 30 + i);
643
+ return d;
644
+ }),
645
+ y: Array.from({length: 30}, (_, i) => {
646
+ const base = 100 + watchlistEquities.findIndex(s => s.symbol === symbol) * 10;
647
+ const noise = Math.sin(i / 3) * 5 + Math.random() * 2;
648
+ return base + noise;
649
+ }),
650
+ spread: Array.from({length: 30}, () => 0.1 + Math.random() * 0.4)
651
+ };
652
+ }
653
+
654
+ let priceData = generatePriceData('AAPL');
655
+ x: Array.from({length: 30}, (_, i) => {
656
+ const d = new Date();
657
+ d.setMinutes(d.getMinutes() - 30 + i);
658
+ return d;
659
+ }),
660
+ y: Array.from({length: 30}, (_, i) => {
661
+ const base = 50200;
662
+ const noise = Math.sin(i / 3) * 50 + Math.random() * 20;
663
+ return base + noise;
664
+ }),
665
+ spread: Array.from({length: 30}, () => 1 + Math.random() * 3)
666
+ };
667
+
668
+ const priceChart = document.getElementById('priceChart');
669
+ Plotly.newPlot(priceChart, [
670
+ {
671
+ x: priceData.x,
672
+ y: priceData.y,
673
+ type: 'scatter',
674
+ mode: 'lines',
675
+ name: 'Price',
676
+ line: {color: '#3b82f6', width: 2}
677
+ },
678
+ {
679
+ x: priceData.x,
680
+ y: priceData.y.map((y, i) => y + priceData.spread[i]/2),
681
+ type: 'scatter',
682
+ mode: 'lines',
683
+ name: 'Ask',
684
+ line: {color: '#ef4444', width: 1, dash: 'dot'},
685
+ opacity: 0.7
686
+ },
687
+ {
688
+ x: priceData.x,
689
+ y: priceData.y.map((y, i) => y - priceData.spread[i]/2),
690
+ type: 'scatter',
691
+ mode: 'lines',
692
+ name: 'Bid',
693
+ line: {color: '#10b981', width: 1, dash: 'dot'},
694
+ opacity: 0.7
695
+ }
696
+ ], {
697
+ margin: {t: 0, r: 0, b: 30, l: 40},
698
+ plot_bgcolor: 'rgba(0,0,0,0)',
699
+ paper_bgcolor: 'rgba(0,0,0,0)',
700
+ xaxis: {
701
+ showgrid: false,
702
+ tickfont: {color: '#64748b'},
703
+ linecolor: '#334155',
704
+ zerolinecolor: '#334155'
705
+ },
706
+ yaxis: {
707
+ showgrid: true,
708
+ gridcolor: '#1e293b',
709
+ tickfont: {color: '#64748b'},
710
+ linecolor: '#334155',
711
+ zerolinecolor: '#334155'
712
+ },
713
+ legend: {
714
+ orientation: 'h',
715
+ y: 1.1,
716
+ font: {color: '#94a3b8'}
717
+ }
718
+ });
719
+
720
+ // Signal Chart
721
+ const signalData = {
722
+ x: Array.from({length: 30}, (_, i) => {
723
+ const d = new Date();
724
+ d.setMinutes(d.getMinutes() - 30 + i);
725
+ return d;
726
+ }),
727
+ strength: Array.from({length: 30}, (_, i) => {
728
+ const base = Math.sin(i / 3) * 0.8;
729
+ const noise = Math.random() * 0.2;
730
+ return base + noise;
731
+ }),
732
+ confidence: Array.from({length: 30}, () => 0.5 + Math.random() * 0.5)
733
+ };
734
+
735
+ const signalChart = document.getElementById('signalChart');
736
+ Plotly.newPlot(signalChart, [
737
+ {
738
+ x: signalData.x,
739
+ y: signalData.strength,
740
+ type: 'bar',
741
+ name: 'Signal Strength',
742
+ marker: {
743
+ color: signalData.strength.map(s =>
744
+ s > 0.2 ? '#10b981' :
745
+ s < -0.2 ? '#ef4444' : '#64748b'
746
+ )
747
+ }
748
+ },
749
+ {
750
+ x: signalData.x,
751
+ y: signalData.confidence,
752
+ type: 'scatter',
753
+ mode: 'lines',
754
+ name: 'Confidence',
755
+ line: {color: '#3b82f6', width: 2},
756
+ yaxis: 'y2'
757
+ }
758
+ ], {
759
+ margin: {t: 0, r: 0, b: 30, l: 40},
760
+ plot_bgcolor: 'rgba(0,0,0,0)',
761
+ paper_bgcolor: 'rgba(0,0,0,0)',
762
+ xaxis: {
763
+ showgrid: false,
764
+ tickfont: {color: '#64748b'},
765
+ linecolor: '#334155',
766
+ zerolinecolor: '#334155'
767
+ },
768
+ yaxis: {
769
+ title: 'Strength',
770
+ range: [-1, 1],
771
+ showgrid: true,
772
+ gridcolor: '#1e293b',
773
+ tickfont: {color: '#64748b'},
774
+ linecolor: '#334155',
775
+ zerolinecolor: '#334155'
776
+ },
777
+ yaxis2: {
778
+ title: 'Confidence',
779
+ range: [0, 1],
780
+ overlaying: 'y',
781
+ side: 'right',
782
+ showgrid: false,
783
+ tickfont: {color: '#64748b'},
784
+ linecolor: '#334155',
785
+ zerolinecolor: '#334155'
786
+ },
787
+ legend: {
788
+ orientation: 'h',
789
+ y: 1.1,
790
+ font: {color: '#94a3b8'}
791
+ }
792
+ });
793
+
794
+ // Simulate live updates
795
+ function updateCharts(symbol = 'AAPL') {
796
+ priceData = generatePriceData(symbol);
797
+ // Update price data
798
+ const now = new Date();
799
+ const lastPrice = priceData.y[priceData.y.length - 1];
800
+ const newPrice = lastPrice + (Math.random() - 0.5) * 20;
801
+
802
+ priceData.x.push(now);
803
+ priceData.x.shift();
804
+ priceData.y.push(newPrice);
805
+ priceData.y.shift();
806
+ priceData.spread.push(1 + Math.random() * 3);
807
+ priceData.spread.shift();
808
+
809
+ Plotly.update(priceChart, {
810
+ x: [priceData.x, priceData.x, priceData.x],
811
+ y: [
812
+ priceData.y,
813
+ priceData.y.map((y, i) => y + priceData.spread[i]/2),
814
+ priceData.y.map((y, i) => y - priceData.spread[i]/2)
815
+ ]
816
+ }, {}, [0, 1, 2]);
817
+
818
+ // Update signal data
819
+ const lastSignal = signalData.strength[signalData.strength.length - 1];
820
+ const newSignal = Math.max(-1, Math.min(1, lastSignal + (Math.random() - 0.5) * 0.3));
821
+
822
+ signalData.x.push(now);
823
+ signalData.x.shift();
824
+ signalData.strength.push(newSignal);
825
+ signalData.strength.shift();
826
+ signalData.confidence.push(0.5 + Math.random() * 0.5);
827
+ signalData.confidence.shift();
828
+
829
+ Plotly.update(signalChart, {
830
+ x: [signalData.x, signalData.x],
831
+ y: [signalData.strength, signalData.confidence],
832
+ 'marker.color': [signalData.strength.map(s =>
833
+ s > 0.2 ? '#10b981' :
834
+ s < -0.2 ? '#ef4444' : '#64748b'
835
+ )]
836
+ }, {}, [0, 1]);
837
+ }
838
+
839
+ setInterval(updateCharts, 3000);
840
+ </script>
841
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Netrade56/quantumtradeleap4d" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
842
+ </html>