Hugging Face's logo

Spaces:
EricSam
/
bingx-monitoring
Runtime error

App Files Community
2
EricSam commited on
Commit
460915d
·
verified ·
1 Parent(s): 615f8ea

Invert the header colour to deep blue as a main colour and white as a secondary colour - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +558 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bingx Monitoring
3
- emoji: 🏆
4
- colorFrom: gray
5
- colorTo: indigo
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: bingx-monitoring
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
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,558 @@
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>TradeMaster Pro - Trading Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#2563eb',
17
+ secondary: '#8b5cf6',
18
+ darkBg: '#111827',
19
+ darkCard: '#1f2937',
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .trading-card:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
29
+ }
30
+ .animate-pulse {
31
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
32
+ }
33
+ @keyframes pulse {
34
+ 0%, 100% { opacity: 1; }
35
+ 50% { opacity: 0.5; }
36
+ }
37
+ .coin-animation {
38
+ animation: float 3s ease-in-out infinite;
39
+ }
40
+ @keyframes float {
41
+ 0% { transform: translateY(0px); }
42
+ 50% { transform: translateY(-10px); }
43
+ 100% { transform: translateY(0px); }
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-100 dark:bg-darkBg transition-colors duration-300">
48
+ <!-- Header -->
49
+ <header class="bg-white dark:bg-darkCard shadow-sm">
50
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
51
+ <div class="flex items-center">
52
+ <div class="bg-primary w-10 h-10 rounded-xl flex items-center justify-center mr-3 coin-animation">
53
+ <i class="fas fa-chart-line text-white text-xl"></i>
54
+ </div>
55
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-white">TradeMaster <span class="text-primary">Pro</span></h1>
56
+ </div>
57
+
58
+ <div class="flex items-center space-x-6">
59
+ <button id="theme-toggle" class="text-gray-600 dark:text-gray-300">
60
+ <i class="fas fa-moon dark:hidden"></i>
61
+ <i class="fas fa-sun hidden dark:block"></i>
62
+ </button>
63
+ <div class="relative">
64
+ <i class="fas fa-bell text-gray-600 dark:text-gray-300 text-xl"></i>
65
+ <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
66
+ </div>
67
+ <div class="flex items-center">
68
+ <div class="mr-3 text-right">
69
+ <p class="font-semibold text-gray-800 dark:text-white">Trader John</p>
70
+ <p class="text-sm text-gray-500">Premium Account</p>
71
+ </div>
72
+ <div class="h-10 w-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold">
73
+ J
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- Main Content -->
81
+ <main class="container mx-auto px-4 py-8">
82
+ <!-- Dashboard Header -->
83
+ <div class="flex justify-between items-center mb-8">
84
+ <div>
85
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Trading Dashboard</h2>
86
+ <p class="text-gray-500 mt-1 dark:text-gray-400">Connected to BingX via API</p>
87
+ </div>
88
+ <div class="flex space-x-4">
89
+ <button class="px-4 py-2 bg-white dark:bg-darkCard rounded-lg border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 flex items-center">
90
+ <i class="fas fa-sync mr-2"></i> Refresh
91
+ </button>
92
+ <button class="px-4 py-2 bg-primary text-white rounded-lg flex items-center">
93
+ <i class="fas fa-plus mr-2"></i> New Trade
94
+ </button>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Stats Cards -->
99
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
100
+ <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300">
101
+ <div class="flex justify-between">
102
+ <div>
103
+ <p class="text-gray-500 dark:text-gray-400">Total Balance</p>
104
+ <h3 class="text-2xl font-bold mt-2 dark:text-white">$25,842.75</h3>
105
+ </div>
106
+ <div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
107
+ <i class="fas fa-wallet text-blue-500 text-xl"></i>
108
+ </div>
109
+ </div>
110
+ <div class="mt-4 flex items-center text-green-500">
111
+ <i class="fas fa-caret-up mr-1"></i>
112
+ <span class="font-medium">3.2%</span>
113
+ <span class="text-gray-500 ml-2 dark:text-gray-400">last 24h</span>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300">
118
+ <div class="flex justify-between">
119
+ <div>
120
+ <p class="text-gray-500 dark:text-gray-400">Open Trades</p>
121
+ <h3 class="text-2xl font-bold mt-2 dark:text-white">14</h3>
122
+ </div>
123
+ <div class="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
124
+ <i class="fas fa-exchange-alt text-purple-500 text-xl"></i>
125
+ </div>
126
+ </div>
127
+ <div class="mt-4 flex items-center text-blue-500">
128
+ <span class="font-medium">6 Long</span>
129
+ <span class="text-gray-500 mx-2 dark:text-gray-400">•</span>
130
+ <span class="font-medium">8 Short</span>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300">
135
+ <div class="flex justify-between">
136
+ <div>
137
+ <p class="text-gray-500 dark:text-gray-400">Today's Profit</p>
138
+ <h3 class="text-2xl font-bold mt-2 dark:text-white">$1,254.30</h3>
139
+ </div>
140
+ <div class="w-12 h-12 rounded-xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
141
+ <i class="fas fa-chart-bar text-green-500 text-xl"></i>
142
+ </div>
143
+ </div>
144
+ <div class="mt-4 flex items-center text-green-500">
145
+ <i class="fas fa-caret-up mr-1"></i>
146
+ <span class="font-medium">5.7%</span>
147
+ <span class="text-gray-500 ml-2 dark:text-gray-400">vs yesterday</span>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300">
152
+ <div class="flex justify-between">
153
+ <div>
154
+ <p class="text-gray-500 dark:text-gray-400">Risk Exposure</p>
155
+ <h3 class="text-2xl font-bold mt-2 dark:text-white">Medium</h3>
156
+ </div>
157
+ <div class="w-12 h-12 rounded-xl bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
158
+ <i class="fas fa-exclamation-triangle text-yellow-500 text-xl"></i>
159
+ </div>
160
+ </div>
161
+ <div class="mt-4 flex items-center text-gray-500 dark:text-gray-400">
162
+ <span class="font-medium">42%</span>
163
+ <span class="ml-2">of balance</span>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Charts and Statistics Section -->
169
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
170
+ <!-- Monthly Performance -->
171
+ <div class="lg:col-span-2 bg-white dark:bg-darkCard rounded-2xl shadow-md p-6">
172
+ <div class="flex justify-between items-center mb-6">
173
+ <h3 class="text-lg font-bold text-gray-800 dark:text-white">Monthly Performance</h3>
174
+ <div class="flex space-x-3">
175
+ <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">1M</button>
176
+ <button class="px-3 py-1 rounded-lg text-sm bg-primary text-white">3M</button>
177
+ <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">6M</button>
178
+ <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">1Y</button>
179
+ </div>
180
+ </div>
181
+ <canvas id="performanceChart"></canvas>
182
+ </div>
183
+
184
+ <!-- Advanced Stats -->
185
+ <div class="bg-white dark:bg-darkCard rounded-2xl shadow-md p-6">
186
+ <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-6">Advanced Statistics</h3>
187
+ <div class="space-y-5">
188
+ <div>
189
+ <div class="flex justify-between mb-1">
190
+ <span class="text-gray-500 dark:text-gray-400">Profit Factor</span>
191
+ <span class="font-bold text-green-500">2.75</span>
192
+ </div>
193
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
194
+ <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div>
195
+ </div>
196
+ </div>
197
+ <div>
198
+ <div class="flex justify-between mb-1">
199
+ <span class="text-gray-500 dark:text-gray-400">Sharpe Ratio</span>
200
+ <span class="font-bold text-blue-500">1.92</span>
201
+ </div>
202
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
203
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 64%"></div>
204
+ </div>
205
+ </div>
206
+ <div>
207
+ <div class="flex justify-between mb-1">
208
+ <span class="text-gray-500 dark:text-gray-400">Win Rate</span>
209
+ <span class="font-bold text-purple-500">63.4%</span>
210
+ </div>
211
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
212
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 63%"></div>
213
+ </div>
214
+ </div>
215
+ <div>
216
+ <div class="flex justify-between mb-1">
217
+ <span class="text-gray-500 dark:text-gray-400">Max Drawdown</span>
218
+ <span class="font-bold text-yellow-500">-12.3%</span>
219
+ </div>
220
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
221
+ <div class="bg-yellow-600 h-2 rounded-full" style="width: 34%"></div>
222
+ </div>
223
+ </div>
224
+ <div>
225
+ <div class="flex justify-between mb-1">
226
+ <span class="text-gray-500 dark:text-gray-400">Risk/Reward Ratio</span>
227
+ <span class="font-bold text-primary">1:2.8</span>
228
+ </div>
229
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
230
+ <div class="bg-primary h-2 rounded-full" style="width: 82%"></div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Trading Activity -->
238
+ <div class="bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 mb-8">
239
+ <div class="flex justify-between items-center mb-6">
240
+ <h3 class="text-lg font-bold text-gray-800 dark:text-white">Trading Activity</h3>
241
+ <div class="flex space-x-3">
242
+ <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">All</button>
243
+ <button class="px-3 py-1 rounded-lg text-sm bg-primary text-white">Open</button>
244
+ <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">Closed</button>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="overflow-x-auto">
249
+ <table class="w-full">
250
+ <thead>
251
+ <tr class="text-left text-gray-500 dark:text-gray-400 text-sm">
252
+ <th class="pb-4">Symbol</th>
253
+ <th class="pb-4">Type</th>
254
+ <th class="pb-4">Size</th>
255
+ <th class="pb-4">Entry Price</th>
256
+ <th class="pb-4">Current Price</th>
257
+ <th class="pb-4">Profit/Loss</th>
258
+ <th class="pb-4">Status</th>
259
+ <th class="pb-4"></th>
260
+ </tr>
261
+ </thead>
262
+ <tbody class="text-sm">
263
+ <tr class="border-b border-gray-200 dark:border-gray-700">
264
+ <td class="py-4">
265
+ <div class="flex items-center">
266
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png?v=029" class="h-6 w-6 mr-2" alt="Bitcoin">
267
+ BTC/USDT
268
+ </div>
269
+ </td>
270
+ <td class="py-4">
271
+ <span class="px-2 py-1 rounded bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">Long</span>
272
+ </td>
273
+ <td class="py-4">0.85</td>
274
+ <td class="py-4">$42,156.30</td>
275
+ <td class="py-4 font-medium">$43,287.15</td>
276
+ <td class="py-4 font-bold text-green-500">+$961.22</td>
277
+ <td class="py-4">
278
+ <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span>
279
+ </td>
280
+ <td class="py-4 text-right">
281
+ <button class="text-gray-400 hover:text-primary">
282
+ <i class="fas fa-ellipsis-v"></i>
283
+ </button>
284
+ </td>
285
+ </tr>
286
+ <tr class="border-b border-gray-200 dark:border-gray-700">
287
+ <td class="py-4">
288
+ <div class="flex items-center">
289
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png?v=029" class="h-6 w-6 mr-2" alt="Ethereum">
290
+ ETH/USDT
291
+ </div>
292
+ </td>
293
+ <td class="py-4">
294
+ <span class="px-2 py-1 rounded bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">Short</span>
295
+ </td>
296
+ <td class="py-4">2.75</td>
297
+ <td class="py-4">$2,312.40</td>
298
+ <td class="py-4 font-medium">$2,281.75</td>
299
+ <td class="py-4 font-bold text-green-500">+$842.63</td>
300
+ <td class="py-4">
301
+ <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span>
302
+ </td>
303
+ <td class="py-4 text-right">
304
+ <button class="text-gray-400 hover:text-primary">
305
+ <i class="fas fa-ellipsis-v"></i>
306
+ </button>
307
+ </td>
308
+ </tr>
309
+ <tr class="border-b border-gray-200 dark:border-gray-700">
310
+ <td class="py-4">
311
+ <div class="flex items-center">
312
+ <img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png?v=029" class="h-6 w-6 mr-2" alt="BNB">
313
+ BNB/USDT
314
+ </div>
315
+ </td>
316
+ <td class="py-4">
317
+ <span class="px-2 py-1 rounded bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">Short</span>
318
+ </td>
319
+ <td class="py-4">3.20</td>
320
+ <td class="py-4">$305.75</td>
321
+ <td class="py-4 font-medium">$312.85</td>
322
+ <td class="py-4 font-bold text-red-500">-$227.20</td>
323
+ <td class="py-4">
324
+ <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span>
325
+ </td>
326
+ <td class="py-4 text-right">
327
+ <button class="text-gray-400 hover:text-primary">
328
+ <i class="fas fa-ellipsis-v"></i>
329
+ </button>
330
+ </td>
331
+ </tr>
332
+ <tr>
333
+ <td class="py-4">
334
+ <div class="flex items-center">
335
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png?v=029" class="h-6 w-6 mr-2" alt="Solana">
336
+ SOL/USDT
337
+ </div>
338
+ </td>
339
+ <td class="py-4">
340
+ <span class="px-2 py-1 rounded bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">Long</span>
341
+ </td>
342
+ <td class="py-4">15.50</td>
343
+ <td class="py-4">$96.35</td>
344
+ <td class="py-4 font-medium">$101.20</td>
345
+ <td class="py-4 font-bold text-green-500">+$751.75</td>
346
+ <td class="py-4">
347
+ <span class="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300">Closed</span>
348
+ </td>
349
+ <td class="py-4 text-right">
350
+ <button class="text-gray-400 hover:text-primary">
351
+ <i class="fas fa-ellipsis-v"></i>
352
+ </button>
353
+ </td>
354
+ </tr>
355
+ </tbody>
356
+ </table>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- API Connection Section -->
361
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
362
+ <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl p-6">
363
+ <div class="flex items-center">
364
+ <div class="mr-4">
365
+ <div class="h-12 w-12 rounded-xl bg-white/30 flex items-center justify-center">
366
+ <i class="fas fa-plug text-white text-xl"></i>
367
+ </div>
368
+ </div>
369
+ <div>
370
+ <h3 class="text-lg font-bold text-white">BingX API Connected</h3>
371
+ <p class="text-blue-100">Last synced 5 minutes ago</p>
372
+ </div>
373
+ </div>
374
+ <button class="mt-6 w-full py-3 bg-white rounded-xl text-primary font-bold flex items-center justify-center">
375
+ <i class="fas fa-sync mr-2"></i> Sync Now
376
+ </button>
377
+ </div>
378
+
379
+ <div class="lg:col-span-2 bg-white dark:bg-darkCard rounded-2xl shadow-md p-6">
380
+ <div class="flex justify-between items-center mb-6">
381
+ <h3 class="text-lg font-bold text-gray-800 dark:text-white">Portfolio Allocation</h3>
382
+ <div>
383
+ <span class="text-gray-500 dark:text-gray-400 text-sm">Last updated: 5 min ago</span>
384
+ </div>
385
+ </div>
386
+ <div class="flex items-center">
387
+ <div class="w-40 h-40 mr-8">
388
+ <canvas id="allocationChart"></canvas>
389
+ </div>
390
+ <div class="flex-grow">
391
+ <div class="mb-3">
392
+ <div class="flex justify-between mb-1">
393
+ <span class="text-gray-500 dark:text-gray-400 flex items-center">
394
+ <span class="h-3 w-3 bg-primary rounded-full mr-2"></span>
395
+ Cryptocurrencies
396
+ </span>
397
+ <span class="font-medium dark:text-white">68%</span>
398
+ </div>
399
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
400
+ <div class="bg-primary h-2 rounded-full" style="width: 68%"></div>
401
+ </div>
402
+ </div>
403
+ <div class="mb-3">
404
+ <div class="flex justify-between mb-1">
405
+ <span class="text-gray-500 dark:text-gray-400 flex items-center">
406
+ <span class="h-3 w-3 bg-green-500 rounded-full mr-2"></span>
407
+ Stocks
408
+ </span>
409
+ <span class="font-medium dark:text-white">14%</span>
410
+ </div>
411
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
412
+ <div class="bg-green-500 h-2 rounded-full" style="width: 14%"></div>
413
+ </div>
414
+ </div>
415
+ <div class="mb-3">
416
+ <div class="flex justify-between mb-1">
417
+ <span class="text-gray-500 dark:text-gray-400 flex items-center">
418
+ <span class="h-3 w-3 bg-purple-500 rounded-full mr-2"></span>
419
+ Forex
420
+ </span>
421
+ <span class="font-medium dark:text-white">12%</span>
422
+ </div>
423
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
424
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 12%"></div>
425
+ </div>
426
+ </div>
427
+ <div>
428
+ <div class="flex justify-between mb-1">
429
+ <span class="text-gray-500 dark:text-gray-400 flex items-center">
430
+ <span class="h-3 w-3 bg-yellow-500 rounded-full mr-2"></span>
431
+ Commodities
432
+ </span>
433
+ <span class="font-medium dark:text-white">6%</span>
434
+ </div>
435
+ <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
436
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 6%"></div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </main>
444
+
445
+ <script>
446
+ // Dark Mode Toggle
447
+ const themeToggle = document.getElementById('theme-toggle');
448
+ themeToggle.addEventListener('click', () => {
449
+ document.documentElement.classList.toggle('dark');
450
+ });
451
+
452
+ // Charts
453
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
454
+ const performanceChart = new Chart(performanceCtx, {
455
+ type: 'line',
456
+ data: {
457
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
458
+ datasets: [{
459
+ label: 'Profit/Loss',
460
+ data: [1200, 1900, 1500, 2800, 2200, 3000],
461
+ borderColor: '#3b82f6',
462
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
463
+ tension: 0.4,
464
+ fill: true
465
+ }]
466
+ },
467
+ options: {
468
+ responsive: true,
469
+ plugins: {
470
+ legend: {
471
+ display: false
472
+ }
473
+ },
474
+ scales: {
475
+ y: {
476
+ grid: {
477
+ color: 'rgba(0, 0, 0, 0.05)',
478
+ borderDash: [5]
479
+ },
480
+ ticks: {
481
+ callback: function(value) {
482
+ return '$' + value;
483
+ }
484
+ }
485
+ },
486
+ x: {
487
+ grid: {
488
+ display: false
489
+ }
490
+ }
491
+ }
492
+ }
493
+ });
494
+
495
+ // Portfolio Allocation Chart
496
+ const allocationCtx = document.getElementById('allocationChart').getContext('2d');
497
+ const allocationChart = new Chart(allocationCtx, {
498
+ type: 'doughnut',
499
+ data: {
500
+ labels: ['Cryptocurrencies', 'Stocks', 'Forex', 'Commodities'],
501
+ datasets: [{
502
+ data: [68, 14, 12, 6],
503
+ backgroundColor: [
504
+ '#3b82f6',
505
+ '#10b981',
506
+ '#8b5cf6',
507
+ '#f59e0b'
508
+ ],
509
+ borderWidth: 0,
510
+ }]
511
+ },
512
+ options: {
513
+ responsive: true,
514
+ cutout: '65%',
515
+ plugins: {
516
+ legend: {
517
+ display: false
518
+ },
519
+ tooltip: {
520
+ callbacks: {
521
+ label: function(context) {
522
+ return `${context.label}: ${context.parsed}%`;
523
+ }
524
+ }
525
+ }
526
+ }
527
+ }
528
+ });
529
+
530
+ // Simulate live data updates
531
+ function simulateLiveData() {
532
+ // Update balance with small random fluctuation
533
+ const balanceElement = document.querySelector('.trading-card:first-child h3');
534
+ const balanceValue = parseFloat(balanceElement.textContent.replace('$', '').replace(',', ''));
535
+ const newBalance = balanceValue * (1 + (Math.random() * 0.02 - 0.01));
536
+ balanceElement.textContent = '$' + newBalance.toFixed(2);
537
+
538
+ // Update open position prices
539
+ const positionPrices = document.querySelectorAll('tbody tr td:nth-child(5)');
540
+ positionPrices.forEach(price => {
541
+ const currentValue = parseFloat(price.textContent.replace('$', '').replace(',', ''));
542
+ const changePercent = (Math.random() * 4 - 2) / 100;
543
+ const newValue = currentValue * (1 + changePercent);
544
+ price.textContent = '$' + newValue.toFixed(2);
545
+ price.classList.remove('text-green-500', 'text-red-500');
546
+
547
+ if (changePercent > 0) {
548
+ price.classList.add('text-green-500');
549
+ } else if (changePercent < 0) {
550
+ price.classList.add('text-red-500');
551
+ }
552
+ });
553
+ }
554
+
555
+ setInterval(simulateLiveData, 8000);
556
+ </script>
557
+ <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=EricSam/bingx-monitoring" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
558
+ </html>