Hugging Face's logo

Spaces:
Iam1666666666667980
/
hedge-ai
Running

App Files Community
Iam1666666666667980 commited on
Commit
07cbea6
·
verified ·
1 Parent(s): 25dd557

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +658 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hedge Ai
3
- emoji: 👁
4
  colorFrom: red
5
- colorTo: blue
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: hedge-ai
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: purple
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,658 @@
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>AI Trading System 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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#2563eb',
15
+ secondary: '#0f172a',
16
+ accent: '#f59e0b',
17
+ success: '#10b981',
18
+ danger: '#ef4444',
19
+ warning: '#f97316',
20
+ dark: '#0f172a',
21
+ light: '#f8fafc'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ .card {
29
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
30
+ border-radius: 0.5rem;
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .card:hover {
35
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
36
+ transform: translateY(-2px);
37
+ }
38
+
39
+ .chart-container {
40
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
41
+ border-radius: 0.5rem;
42
+ padding: 1rem;
43
+ height: 300px;
44
+ }
45
+
46
+ .status-indicator {
47
+ width: 12px;
48
+ height: 12px;
49
+ border-radius: 50%;
50
+ display: inline-block;
51
+ margin-right: 5px;
52
+ }
53
+
54
+ .status-connected {
55
+ background-color: #10b981;
56
+ box-shadow: 0 0 8px #10b981;
57
+ }
58
+
59
+ .status-disconnected {
60
+ background-color: #ef4444;
61
+ }
62
+
63
+ .pulse {
64
+ animation: pulse 2s infinite;
65
+ }
66
+
67
+ @keyframes pulse {
68
+ 0% {
69
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
70
+ }
71
+ 70% {
72
+ box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
73
+ }
74
+ 100% {
75
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
76
+ }
77
+ }
78
+
79
+ .market-up {
80
+ color: #10b981;
81
+ }
82
+
83
+ .market-down {
84
+ color: #ef4444;
85
+ }
86
+
87
+ .progress-bar {
88
+ height: 8px;
89
+ border-radius: 4px;
90
+ background-color: #e2e8f0;
91
+ overflow: hidden;
92
+ }
93
+
94
+ .progress-fill {
95
+ height: 100%;
96
+ border-radius: 4px;
97
+ }
98
+
99
+ .agent-status {
100
+ display: inline-block;
101
+ width: 12px;
102
+ height: 12px;
103
+ border-radius: 50%;
104
+ margin-right: 8px;
105
+ }
106
+
107
+ .agent-active {
108
+ background-color: #10b981;
109
+ }
110
+
111
+ .agent-inactive {
112
+ background-color: #94a3b8;
113
+ }
114
+
115
+ .risk-high {
116
+ background-color: #fee2e2;
117
+ color: #dc2626;
118
+ }
119
+
120
+ .risk-medium {
121
+ background-color: #fef3c7;
122
+ color: #d97706;
123
+ }
124
+
125
+ .risk-low {
126
+ background-color: #dcfce7;
127
+ color: #16a34a;
128
+ }
129
+ </style>
130
+ </head>
131
+ <body class="bg-gray-100 text-gray-800 min-h-screen">
132
+ <div class="container mx-auto px-4 py-6">
133
+ <!-- Header -->
134
+ <header class="mb-8">
135
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
136
+ <div>
137
+ <h1 class="text-3xl font-bold text-gray-900">AI Trading System Dashboard</h1>
138
+ <p class="text-gray-600">NIFTYBEES vs GOLDBEES Portfolio Optimization</p>
139
+ </div>
140
+ <div class="mt-4 md:mt-0 flex items-center">
141
+ <div class="flex items-center mr-4">
142
+ <span class="status-indicator status-connected pulse"></span>
143
+ <span class="text-sm font-medium">Connected</span>
144
+ </div>
145
+ <div class="bg-white px-4 py-2 rounded-lg shadow flex items-center">
146
+ <i class="fas fa-clock text-primary mr-2"></i>
147
+ <span id="current-time" class="font-medium">Loading...</span>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </header>
152
+
153
+ <!-- Summary Cards -->
154
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
155
+ <!-- Portfolio Value -->
156
+ <div class="card bg-white p-6">
157
+ <div class="flex justify-between items-start">
158
+ <div>
159
+ <p class="text-gray-500 text-sm font-medium">Portfolio Value</p>
160
+ <h3 class="text-2xl font-bold mt-1">₹5,248,392</h3>
161
+ </div>
162
+ <div class="p-3 rounded-full bg-blue-100">
163
+ <i class="fas fa-chart-line text-blue-600"></i>
164
+ </div>
165
+ </div>
166
+ <div class="mt-4">
167
+ <p class="text-sm text-gray-600">Daily Change</p>
168
+ <p class="text-green-600 font-bold flex items-center">
169
+ <i class="fas fa-arrow-up mr-1"></i>
170
+ +1.24% (+₹64,823)
171
+ </p>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- NIFTYBEES Performance -->
176
+ <div class="card bg-white p-6">
177
+ <div class="flex justify-between items-start">
178
+ <div>
179
+ <p class="text-gray-500 text-sm font-medium">NIFTYBEES (ETF)</p>
180
+ <h3 class="text-2xl font-bold mt-1">₹186.42</h3>
181
+ </div>
182
+ <div class="p-3 rounded-full bg-green-100">
183
+ <i class="fas fa-chart-bar text-green-600"></i>
184
+ </div>
185
+ </div>
186
+ <div class="mt-4">
187
+ <p class="text-sm text-gray-600">Today's Performance</p>
188
+ <p class="text-green-600 font-bold flex items-center">
189
+ <i class="fas fa-arrow-up mr-1"></i>
190
+ +0.82% (+₹1.51)
191
+ </p>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- GOLDBEES Performance -->
196
+ <div class="card bg-white p-6">
197
+ <div class="flex justify-between items-start">
198
+ <div>
199
+ <p class="text-gray-500 text-sm font-medium">GOLDBEES (ETF)</p>
200
+ <h3 class="text-2xl font-bold mt-1">₹192.75</h3>
201
+ </div>
202
+ <div class="p-3 rounded-full bg-yellow-100">
203
+ <i class="fas fa-coins text-yellow-600"></i>
204
+ </div>
205
+ </div>
206
+ <div class="mt-4">
207
+ <p class="text-sm text-gray-600">Today's Performance</p>
208
+ <p class="text-red-600 font-bold flex items-center">
209
+ <i class="fas fa-arrow-down mr-1"></i>
210
+ -0.34% (-₹0.66)
211
+ </p>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Sharpe Ratio -->
216
+ <div class="card bg-white p-6">
217
+ <div class="flex justify-between items-start">
218
+ <div>
219
+ <p class="text-gray-500 text-sm font-medium">Sharpe Ratio</p>
220
+ <h3 class="text-2xl font-bold mt-1">1.68</h3>
221
+ </div>
222
+ <div class="p-3 rounded-full bg-purple-100">
223
+ <i class="fas fa-balance-scale text-purple-600"></i>
224
+ </div>
225
+ </div>
226
+ <div class="mt-4">
227
+ <p class="text-sm text-gray-600">Risk-Adjusted Return</p>
228
+ <p class="text-green-600 font-bold">
229
+ Excellent Performance
230
+ </p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Charts Section -->
236
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
237
+ <!-- Portfolio Performance Chart -->
238
+ <div class="card bg-white p-6">
239
+ <div class="flex justify-between items-center mb-4">
240
+ <h3 class="text-lg font-bold">Portfolio Performance</h3>
241
+ <div class="flex space-x-2">
242
+ <button class="text-xs px-3 py-1 bg-gray-100 rounded">1D</button>
243
+ <button class="text-xs px-3 py-1 bg-gray-100 rounded">1W</button>
244
+ <button class="text-xs px-3 py-1 bg-primary text-white rounded">1M</button>
245
+ <button class="text-xs px-3 py-1 bg-gray-100 rounded">3M</button>
246
+ <button class="text-xs px-3 py-1 bg-gray-100 rounded">1Y</button>
247
+ </div>
248
+ </div>
249
+ <div class="chart-container">
250
+ <canvas id="portfolioChart"></canvas>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Correlation Analysis -->
255
+ <div class="card bg-white p-6">
256
+ <div class="flex justify-between items-center mb-4">
257
+ <h3 class="text-lg font-bold">NIFTY vs Gold Correlation</h3>
258
+ <div class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">
259
+ Correlation: -0.24
260
+ </div>
261
+ </div>
262
+ <div class="chart-container">
263
+ <canvas id="correlationChart"></canvas>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- AI Agents & Risk Management -->
269
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
270
+ <!-- AI Agents Status -->
271
+ <div class="card bg-white p-6 lg:col-span-1">
272
+ <h3 class="text-lg font-bold mb-4">AI Agents Status</h3>
273
+ <div class="space-y-4">
274
+ <div class="flex items-center justify-between">
275
+ <div class="flex items-center">
276
+ <span class="agent-status agent-active"></span>
277
+ <span>Portfolio Optimizer</span>
278
+ </div>
279
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
280
+ </div>
281
+ <div class="flex items-center justify-between">
282
+ <div class="flex items-center">
283
+ <span class="agent-status agent-active"></span>
284
+ <span>Risk Manager</span>
285
+ </div>
286
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
287
+ </div>
288
+ <div class="flex items-center justify-between">
289
+ <div class="flex items-center">
290
+ <span class="agent-status agent-active"></span>
291
+ <span>Market Analyzer</span>
292
+ </div>
293
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
294
+ </div>
295
+ <div class="flex items-center justify-between">
296
+ <div class="flex items-center">
297
+ <span class="agent-status agent-inactive"></span>
298
+ <span>News Sentiment</span>
299
+ </div>
300
+ <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">Inactive</span>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="mt-6">
305
+ <h4 class="font-medium mb-2">System Health</h4>
306
+ <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
307
+ <div class="bg-green-600 h-2 rounded-full" style="width: 92%"></div>
308
+ </div>
309
+ <p class="text-sm text-gray-600">92% operational efficiency</p>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Risk Management -->
314
+ <div class="card bg-white p-6 lg:col-span-2">
315
+ <h3 class="text-lg font-bold mb-4">Risk Management</h3>
316
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
317
+ <div class="border border-gray-200 rounded-lg p-4">
318
+ <div class="flex justify-between mb-2">
319
+ <span class="text-sm text-gray-600">Portfolio Risk</span>
320
+ <span class="text-sm font-bold">Low</span>
321
+ </div>
322
+ <div class="progress-bar">
323
+ <div class="progress-fill bg-green-500" style="width: 25%"></div>
324
+ </div>
325
+ <p class="text-xs text-gray-500 mt-1">2.4% of capital at risk</p>
326
+ </div>
327
+
328
+ <div class="border border-gray-200 rounded-lg p-4">
329
+ <div class="flex justify-between mb-2">
330
+ <span class="text-sm text-gray-600">Drawdown</span>
331
+ <span class="text-sm font-bold text-green-600">-1.2%</span>
332
+ </div>
333
+ <div class="progress-bar">
334
+ <div class="progress-fill bg-green-500" style="width: 15%"></div>
335
+ </div>
336
+ <p class="text-xs text-gray-500 mt-1">Well below threshold</p>
337
+ </div>
338
+
339
+ <div class="border border-gray-200 rounded-lg p-4">
340
+ <div class="flex justify-between mb-2">
341
+ <span class="text-sm text-gray-600">Position Size</span>
342
+ <span class="text-sm font-bold">Medium</span>
343
+ </div>
344
+ <div class="progress-bar">
345
+ <div class="progress-fill bg-yellow-500" style="width: 60%"></div>
346
+ </div>
347
+ <p class="text-xs text-gray-500 mt-1">Within limits</p>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="mt-6">
352
+ <h4 class="font-medium mb-2">Risk Alerts</h4>
353
+ <div class="space-y-2">
354
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg">
355
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i>
356
+ <span class="text-sm">Gold correlation increased by 12% this week</span>
357
+ </div>
358
+ <div class="flex items-center p-3 bg-green-50 rounded-lg">
359
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
360
+ <span class="text-sm">All positions within risk parameters</span>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Portfolio Allocation & Recent Trades -->
368
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
369
+ <!-- Portfolio Allocation -->
370
+ <div class="card bg-white p-6">
371
+ <h3 class="text-lg font-bold mb-4">Portfolio Allocation</h3>
372
+ <div class="flex items-center justify-center mb-6">
373
+ <div class="relative w-64 h-64">
374
+ <canvas id="allocationChart"></canvas>
375
+ </div>
376
+ </div>
377
+ <div class="grid grid-cols-2 gap-4">
378
+ <div class="flex items-center">
379
+ <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
380
+ <span class="text-sm">NIFTYBEES</span>
381
+ <span class="ml-auto font-medium">60%</span>
382
+ </div>
383
+ <div class="flex items-center">
384
+ <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
385
+ <span class="text-sm">GOLDBEES</span>
386
+ <span class="ml-auto font-medium">40%</span>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Recent Trades -->
392
+ <div class="card bg-white p-6">
393
+ <h3 class="text-lg font-bold mb-4">Recent Trades</h3>
394
+ <div class="overflow-x-auto">
395
+ <table class="w-full text-sm">
396
+ <thead>
397
+ <tr class="text-left text-gray-500 border-b">
398
+ <th class="pb-2">Symbol</th>
399
+ <th class="pb-2">Type</th>
400
+ <th class="pb-2">Quantity</th>
401
+ <th class="pb-2 text-right">Price</th>
402
+ </tr>
403
+ </thead>
404
+ <tbody>
405
+ <tr class="border-b hover:bg-gray-50">
406
+ <td class="py-3">NIFTYBEES</td>
407
+ <td><span class="text-green-600">BUY</span></td>
408
+ <td>1500</td>
409
+ <td class="text-right">₹186.42</td>
410
+ </tr>
411
+ <tr class="border-b hover:bg-gray-50">
412
+ <td class="py-3">GOLDBEES</td>
413
+ <td><span class="text-red-600">SELL</span></td>
414
+ <td>800</td>
415
+ <td class="text-right">₹192.75</td>
416
+ </tr>
417
+ <tr class="border-b hover:bg-gray-50">
418
+ <td class="py-3">NIFTYBEES</td>
419
+ <td><span class="text-green-600">BUY</span></td>
420
+ <td>500</td>
421
+ <td class="text-right">₹185.20</td>
422
+ </tr>
423
+ <tr class="border-b hover:bg-gray-50">
424
+ <td class="py-3">GOLDBEES</td>
425
+ <td><span class="text-green-600">BUY</span></td>
426
+ <td>1200</td>
427
+ <td class="text-right">₹191.50</td>
428
+ </tr>
429
+ </tbody>
430
+ </table>
431
+ </div>
432
+ <div class="mt-4 text-center">
433
+ <button class="text-sm text-primary font-medium">View All Trades</button>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <!-- Trading Actions -->
439
+ <div class="card bg-white p-6 mb-8">
440
+ <h3 class="text-lg font-bold mb-4">Trading Actions</h3>
441
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
442
+ <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center transition duration-300">
443
+ <i class="fas fa-arrow-up mr-2"></i> BUY
444
+ </button>
445
+ <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center transition duration-300">
446
+ <i class="fas fa-arrow-down mr-2"></i> SELL
447
+ </button>
448
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center transition duration-300">
449
+ <i class="fas fa-pause mr-2"></i> HOLD
450
+ </button>
451
+ <button class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center transition duration-300">
452
+ <i class="fas fa-door-open mr-2"></i> EXIT
453
+ </button>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- Market Sentiment & News -->
458
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
459
+ <!-- Market Sentiment -->
460
+ <div class="card bg-white p-6">
461
+ <h3 class="text-lg font-bold mb-4">Market Sentiment</h3>
462
+ <div class="space-y-4">
463
+ <div>
464
+ <div class="flex justify-between mb-1">
465
+ <span class="text-sm">Bullish</span>
466
+ <span class="text-sm">68%</span>
467
+ </div>
468
+ <div class="w-full bg-gray-200 rounded-full h-2">
469
+ <div class="bg-green-600 h-2 rounded-full" style="width: 68%"></div>
470
+ </div>
471
+ </div>
472
+ <div>
473
+ <div class="flex justify-between mb-1">
474
+ <span class="text-sm">Neutral</span>
475
+ <span class="text-sm">22%</span>
476
+ </div>
477
+ <div class="w-full bg-gray-200 rounded-full h-2">
478
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 22%"></div>
479
+ </div>
480
+ </div>
481
+ <div>
482
+ <div class="flex justify-between mb-1">
483
+ <span class="text-sm">Bearish</span>
484
+ <span class="text-sm">10%</span>
485
+ </div>
486
+ <div class="w-full bg-gray-200 rounded-full h-2">
487
+ <div class="bg-red-600 h-2 rounded-full" style="width: 10%"></div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ <div class="mt-6 p-4 bg-blue-50 rounded-lg">
492
+ <p class="text-sm"><i class="fas fa-lightbulb text-blue-500 mr-2"></i> AI Analysis: Market sentiment is positive with strong bullish indicators in the equity sector.</p>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- News Feed -->
497
+ <div class="card bg-white p-6">
498
+ <h3 class="text-lg font-bold mb-4">Market News</h3>
499
+ <div class="space-y-4">
500
+ <div class="p-3 border-l-4 border-blue-500 bg-blue-50 rounded-r">
501
+ <p class="text-sm font-medium">Nifty touches 19,000 on strong IT stocks rally</p>
502
+ <p class="text-xs text-gray-600 mt-1">2 hours ago</p>
503
+ </div>
504
+ <div class="p-3 border-l-4 border-yellow-500 bg-yellow-50 rounded-r">
505
+ <p class="text-sm font-medium">Gold prices drop as dollar strengthens globally</p>
506
+ <p class="text-xs text-gray-600 mt-1">4 hours ago</p>
507
+ </div>
508
+ <div class="p-3 border-l-4 border-green-500 bg-green-50 rounded-r">
509
+ <p class="text-sm font-medium">ETFs see record inflows amid market volatility</p>
510
+ <p class="text-xs text-gray-600 mt-1">6 hours ago</p>
511
+ </div>
512
+ <div class="p-3 border-l-4 border-purple-500 bg-purple-50 rounded-r">
513
+ <p class="text-sm font-medium">AI-driven trading strategies outperform traditional methods</p>
514
+ <p class="text-xs text-gray-600 mt-1">1 day ago</p>
515
+ </div>
516
+ </div>
517
+ <div class="mt-4 text-center">
518
+ <button class="text-sm text-primary font-medium">View All News</button>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
525
+ <script>
526
+ // Update current time
527
+ function updateTime() {
528
+ const now = new Date();
529
+ const timeString = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
530
+ document.getElementById('current-time').textContent = timeString;
531
+ }
532
+
533
+ setInterval(updateTime, 1000);
534
+ updateTime();
535
+
536
+ // Portfolio Performance Chart
537
+ const portfolioCtx = document.getElementById('portfolioChart').getContext('2d');
538
+ const portfolioChart = new Chart(portfolioCtx, {
539
+ type: 'line',
540
+ data: {
541
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
542
+ datasets: [{
543
+ label: 'Portfolio Value',
544
+ data: [5000000, 5050000, 5120000, 5180000, 5250000, 5300000, 5350000, 5380000, 5420000, 5450000, 5480000, 5520000],
545
+ borderColor: '#2563eb',
546
+ backgroundColor: 'rgba(37, 99, 235, 0.1)',
547
+ borderWidth: 2,
548
+ fill: true,
549
+ tension: 0.4
550
+ }]
551
+ },
552
+ options: {
553
+ responsive: true,
554
+ maintainAspectRatio: false,
555
+ plugins: {
556
+ legend: {
557
+ display: false
558
+ }
559
+ },
560
+ scales: {
561
+ y: {
562
+ beginAtZero: false,
563
+ grid: {
564
+ display: false
565
+ },
566
+ ticks: {
567
+ callback: function(value) {
568
+ return '₹' + (value / 1000000).toFixed(1) + 'M';
569
+ }
570
+ }
571
+ },
572
+ x: {
573
+ grid: {
574
+ display: false
575
+ }
576
+ }
577
+ }
578
+ }
579
+ });
580
+
581
+ // Correlation Chart
582
+ const correlationCtx = document.getElementById('correlationChart').getContext('2d');
583
+ const correlationChart = new Chart(correlationCtx, {
584
+ type: 'line',
585
+ data: {
586
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
587
+ datasets: [{
588
+ label: 'NIFTY',
589
+ data: [100, 105, 110, 115, 120, 125, 130, 135, 140, 145, 150, 155],
590
+ borderColor: '#2563eb',
591
+ backgroundColor: 'rgba(37, 99, 235, 0.1)',
592
+ borderWidth: 2,
593
+ fill: false,
594
+ tension: 0.3
595
+ },
596
+ {
597
+ label: 'Gold',
598
+ data: [100, 102, 104, 106, 108, 110, 112, 114, 116, 118, 120, 122],
599
+ borderColor: '#f59e0b',
600
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
601
+ borderWidth: 2,
602
+ fill: false,
603
+ tension: 0.3
604
+ }]
605
+ },
606
+ options: {
607
+ responsive: true,
608
+ maintainAspectRatio: false,
609
+ plugins: {
610
+ legend: {
611
+ position: 'top',
612
+ }
613
+ },
614
+ scales: {
615
+ y: {
616
+ beginAtZero: false,
617
+ grid: {
618
+ display: false
619
+ }
620
+ },
621
+ x: {
622
+ grid: {
623
+ display: false
624
+ }
625
+ }
626
+ }
627
+ }
628
+ });
629
+
630
+ // Allocation Chart
631
+ const allocationCtx = document.getElementById('allocationChart').getContext('2d');
632
+ const allocationChart = new Chart(allocationCtx, {
633
+ type: 'doughnut',
634
+ data: {
635
+ labels: ['NIFTYBEES', 'GOLDBEES'],
636
+ datasets: [{
637
+ data: [60, 40],
638
+ backgroundColor: [
639
+ '#2563eb',
640
+ '#f59e0b'
641
+ ],
642
+ borderWidth: 0
643
+ }]
644
+ },
645
+ options: {
646
+ responsive: true,
647
+ maintainAspectRatio: false,
648
+ plugins: {
649
+ legend: {
650
+ display: false
651
+ }
652
+ },
653
+ cutout: '70%'
654
+ }
655
+ });
656
+ </script>
657
+ <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=Iam1666666666667980/hedge-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
658
+ </html>