Hugging Face's logo

Spaces:
killerguy25
/
anycoder-ba572fbc
Running

App Files Community
killerguy25 commited on
Commit
c959b9a
·
verified ·
1 Parent(s): 40fb870

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +863 -19
index.html CHANGED
@@ -1,19 +1,863 @@
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>FundTrack Pro | Mutual Fund Intelligence</title>
7
+ <!-- Google Fonts -->
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <!-- Font Awesome for Icons -->
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <!-- Chart.js for Performance and Sector Analysis -->
12
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
13
+ <style>
14
+ :root {
15
+ --primary: #2563eb;
16
+ --primary-dark: #1d4ed8;
17
+ --secondary: #64748b;
18
+ --success: #10b981;
19
+ --danger: #ef4444;
20
+ --warning: #f59e0b;
21
+ --background: #f8fafc;
22
+ --surface: #ffffff;
23
+ --text-main: #1e293b;
24
+ --text-muted: #64748b;
25
+ --border: #e2e8f0;
26
+ --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
27
+ --glass: rgba(255, 255, 255, 0.7);
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ margin: 0;
33
+ padding: 0;
34
+ font-family: 'Inter', sans-serif;
35
+ }
36
+
37
+ body {
38
+ background-color: var(--background);
39
+ color: var(--text-main);
40
+ display: flex;
41
+ min-height: 100vh;
42
+ overflow-x: hidden;
43
+ }
44
+
45
+ /* --- Sidebar Navigation --- */
46
+ nav {
47
+ width: 260px;
48
+ background: #0f172a;
49
+ color: white;
50
+ display: flex;
51
+ flex-direction: column;
52
+ position: fixed;
53
+ height: 100vh;
54
+ transition: all 0.3s ease;
55
+ z-index: 100;
56
+ }
57
+
58
+ .nav-header {
59
+ padding: 2rem 1.5rem;
60
+ font-size: 1.5rem;
61
+ font-weight: 700;
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 10px;
65
+ color: #fff;
66
+ }
67
+
68
+ .nav-header i {
69
+ color: var(--primary);
70
+ }
71
+
72
+ .nav-links {
73
+ flex: 1;
74
+ padding: 0 1rem;
75
+ }
76
+
77
+ .nav-item {
78
+ padding: 12px 16px;
79
+ margin-bottom: 8px;
80
+ border-radius: 8px;
81
+ cursor: pointer;
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 12px;
85
+ transition: all 0.2s;
86
+ color: #94a3b8;
87
+ text-decoration: none;
88
+ font-weight: 500;
89
+ }
90
+
91
+ .nav-item:hover, .nav-item.active {
92
+ background: rgba(255, 255, 255, 0.1);
93
+ color: white;
94
+ }
95
+
96
+ .nav-item.active {
97
+ background: var(--primary);
98
+ color: white;
99
+ }
100
+
101
+ /* --- Main Content Area --- */
102
+ main {
103
+ margin-left: 260px;
104
+ flex: 1;
105
+ padding: 2rem;
106
+ width: calc(100% - 260px);
107
+ }
108
+
109
+ header {
110
+ display: flex;
111
+ justify-content: space-between;
112
+ align-items: center;
113
+ margin-bottom: 2rem;
114
+ background: var(--glass);
115
+ backdrop-filter: blur(10px);
116
+ padding: 1rem 2rem;
117
+ border-radius: 16px;
118
+ border: 1px solid var(--border);
119
+ position: sticky;
120
+ top: 0;
121
+ z-index: 90;
122
+ }
123
+
124
+ .anycoder-link {
125
+ font-size: 0.85rem;
126
+ color: var(--primary);
127
+ text-decoration: none;
128
+ font-weight: 600;
129
+ transition: opacity 0.2s;
130
+ }
131
+
132
+ .anycoder-link:hover {
133
+ opacity: 0.8;
134
+ }
135
+
136
+ .user-profile {
137
+ display: flex;
138
+ align-items: center;
139
+ gap: 15px;
140
+ }
141
+
142
+ .notification-bell {
143
+ position: relative;
144
+ cursor: pointer;
145
+ font-size: 1.2rem;
146
+ color: var(--secondary);
147
+ }
148
+
149
+ .badge {
150
+ position: absolute;
151
+ top: -5px;
152
+ right: -5px;
153
+ background: var(--danger);
154
+ color: white;
155
+ font-size: 0.6rem;
156
+ padding: 2px 5px;
157
+ border-radius: 50%;
158
+ }
159
+
160
+ /* --- Dashboard Grid --- */
161
+ .dashboard-grid {
162
+ display: grid;
163
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
164
+ gap: 1.5rem;
165
+ margin-bottom: 2rem;
166
+ }
167
+
168
+ .card {
169
+ background: var(--surface);
170
+ padding: 1.5rem;
171
+ border-radius: 16px;
172
+ border: 1px solid var(--border);
173
+ box-shadow: var(--shadow);
174
+ transition: transform 0.2s;
175
+ }
176
+
177
+ .card:hover {
178
+ transform: translateY(-4px);
179
+ }
180
+
181
+ .card-title {
182
+ font-size: 1.1rem;
183
+ font-weight: 600;
184
+ margin-bottom: 1.5rem;
185
+ display: flex;
186
+ justify-content: space-between;
187
+ align-items: center;
188
+ }
189
+
190
+ /* --- Specific Components --- */
191
+ .metric {
192
+ font-size: 2rem;
193
+ font-weight: 700;
194
+ margin-bottom: 0.5rem;
195
+ }
196
+
197
+ .trend {
198
+ font-size: 0.9rem;
199
+ display: flex;
200
+ align-items: center;
201
+ gap: 5px;
202
+ }
203
+
204
+ .trend.up { color: var(--success); }
205
+ .trend.down { color: var(--danger); }
206
+
207
+ /* Tables */
208
+ .data-table-container {
209
+ overflow-x: auto;
210
+ margin-top: 1rem;
211
+ }
212
+
213
+ table {
214
+ width: 100%;
215
+ border-collapse: collapse;
216
+ text-align: left;
217
+ }
218
+
219
+ th {
220
+ padding: 12px;
221
+ border-bottom: 2px solid var(--border);
222
+ color: var(--text-muted);
223
+ font-weight: 600;
224
+ font-size: 0.85rem;
225
+ text-transform: uppercase;
226
+ }
227
+
228
+ td {
229
+ padding: 12px;
230
+ border-bottom: 1px solid var(--border);
231
+ font-size: 0.9rem;
232
+ }
233
+
234
+ .change-pill {
235
+ padding: 4px 8px;
236
+ border-radius: 6px;
237
+ font-size: 0.75rem;
238
+ font-weight: 600;
239
+ }
240
+
241
+ .pill-buy { background: #dcfce7; color: #166534; }
242
+ .pill-sell { background: #fee2e2; color: #991b1b; }
243
+
244
+ /* Alerts Section */
245
+ .alert-item {
246
+ display: flex;
247
+ gap: 15px;
248
+ padding: 1rem;
249
+ border-radius: 12px;
250
+ margin-bottom: 1rem;
251
+ border-left: 4px solid var(--primary);
252
+ background: #f1f5f9;
253
+ }
254
+
255
+ .alert-item.critical { border-left-color: var(--danger); background: #fef2f2; }
256
+ .alert-item.warning { border-left-color: var(--warning); background: #fffbeb; }
257
+
258
+ .alert-content h4 {
259
+ font-size: 0.95rem;
260
+ margin-bottom: 4px;
261
+ }
262
+
263
+ .alert-content p {
264
+ font-size: 0.85rem;
265
+ color: var(--text-muted);
266
+ }
267
+
268
+ /* News Feed */
269
+ .news-grid {
270
+ display: grid;
271
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
272
+ gap: 1.5rem;
273
+ }
274
+
275
+ .news-card {
276
+ background: var(--surface);
277
+ border-radius: 12px;
278
+ overflow: hidden;
279
+ border: 1px solid var(--border);
280
+ cursor: pointer;
281
+ transition: all 0.2s;
282
+ }
283
+
284
+ .news-card:hover {
285
+ box-shadow: var(--shadow);
286
+ }
287
+
288
+ .news-img {
289
+ width: 100%;
290
+ height: 160px;
291
+ background: #e2e8f0;
292
+ object-fit: cover;
293
+ }
294
+
295
+ .news-body {
296
+ padding: 1rem;
297
+ }
298
+
299
+ .news-tag {
300
+ font-size: 0.7rem;
301
+ text-transform: uppercase;
302
+ color: var(--primary);
303
+ font-weight: 700;
304
+ margin-bottom: 8px;
305
+ display: block;
306
+ }
307
+
308
+ .news-title {
309
+ font-size: 0.95rem;
310
+ font-weight: 600;
311
+ line-height: 1.4;
312
+ margin-bottom: 10px;
313
+ }
314
+
315
+ /* Performance Comparison Chart Area */
316
+ .chart-container {
317
+ height: 300px;
318
+ width: 100%;
319
+ margin-top: 1rem;
320
+ }
321
+
322
+ /* Modal/Overlay for Fund Detail */
323
+ .overlay {
324
+ position: fixed;
325
+ top: 0;
326
+ left: 0;
327
+ width: 100%;
328
+ height: 100%;
329
+ background: rgba(0,0,0,0.5);
330
+ display: none;
331
+ justify-content: center;
332
+ align-items: center;
333
+ z-index: 1000;
334
+ backdrop-filter: blur(4px);
335
+ }
336
+
337
+ .modal {
338
+ background: var(--surface);
339
+ width: 90%;
340
+ max-width: 1000px;
341
+ max-height: 90vh;
342
+ border-radius: 20px;
343
+ padding: 2rem;
344
+ overflow-y: auto;
345
+ position: relative;
346
+ }
347
+
348
+ .close-modal {
349
+ position: absolute;
350
+ top: 20px;
351
+ right: 20px;
352
+ cursor: pointer;
353
+ font-size: 1.5rem;
354
+ }
355
+
356
+ /* Responsive Design */
357
+ @media (max-width: 1024px) {
358
+ nav { width: 80px; }
359
+ .nav-header span, .nav-item span { display: none; }
360
+ main { margin-left: 80px; width: calc(100% - 80px); }
361
+ }
362
+
363
+ @media (max-width: 768px) {
364
+ nav { display: none; }
365
+ main { margin-left: 0; width: 100%; padding: 1rem; }
366
+ header { flex-direction: column; gap: 1rem; text-align: center; }
367
+ .dashboard-grid { grid-template-columns: 1fr; }
368
+ }
369
+
370
+ .hidden { display: none; }
371
+ </style>
372
+ </head>
373
+ <body>
374
+
375
+ <!-- Sidebar -->
376
+ <nav>
377
+ <div class="nav-header">
378
+ <i class="fa-solid fa-chart-line"></i>
379
+ <span>FundTrack Pro</span>
380
+ </div>
381
+ <div class="nav-links">
382
+ <a href="#" class="nav-item active" onclick="showSection('dashboard')">
383
+ <i class="fa-solid fa-house"></i> <span>Dashboard</span>
384
+ </a>
385
+ <a href="#" class="nav-item" onclick="showSection('portfolio')">
386
+ <i class="fa-solid fa-wallet"></i> <span>Portfolio Analysis</span>
387
+ </a>
388
+ <a href="#" class="nav-item" onclick="showSection('alerts')">
389
+ <i class="fa-solid fa-bell"></i> <span>Alerts Center</span>
390
+ </a>
391
+ <a href="#" class="nav-item" onclick="showSection('news')">
392
+ <i class="fa-solid fa-newspaper"></i> <span>Market News</span>
393
+ </a>
394
+ </div>
395
+ </nav>
396
+
397
+ <!-- Main Content -->
398
+ <main>
399
+ <header>
400
+ <div>
401
+ <h2 id="section-title">Portfolio Overview</h2>
402
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
403
+ </div>
404
+ <div class="user-profile">
405
+ <div class="notification-bell" onclick="showSection('alerts')">
406
+ <i class="fa-solid fa-bell"></i>
407
+ <span class="badge" id="alert-count">3</span>
408
+ </div>
409
+ <div style="text-align: right">
410
+ <div style="font-weight: 600; font-size: 0.9rem;">Alex Investor</div>
411
+ <div style="font-size: 0.75rem; color: var(--text-muted);">Premium Plan</div>
412
+ </div>
413
+ <img src="https://i.pravatar.cc/40" style="border-radius: 50%;" alt="User">
414
+ </div>
415
+ </header>
416
+
417
+ <!-- DASHBOARD SECTION -->
418
+ <section id="dashboard">
419
+ <div class="dashboard-grid">
420
+ <div class="card">
421
+ <div class="card-title">Total Investment <i class="fa-solid fa-circle-info" style="font-size: 0.8rem; color: var(--text-muted);"></i></div>
422
+ <div class="metric">$124,500</div>
423
+ <div class="trend up"><i class="fa-solid fa-arrow-up"></i> 12.4% vs last year</div>
424
+ </div>
425
+ <div class="card">
426
+ <div class="card-title">Current Value <i class="fa-solid fa-circle-info" style="font-size: 0.8rem; color: var(--text-muted);"></i></div>
427
+ <div class="metric">$142,100</div>
428
+ <div class="trend up"><i class="fa-solid fa-arrow-up"></i> +$17,600 Unrealized</div>
429
+ </div>
430
+ <div class="card">
431
+ <div class="card-title">Active Funds <i class="fa-solid fa-circle-info" style="font-size: 0.8rem; color: var(--text-muted);"></i></div>
432
+ <div class="metric">8</div>
433
+ <div class="trend" style="color: var(--secondary);">Across 4 Categories</div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="card" style="margin-bottom: 2rem;">
438
+ <div class="card-title">My Fund Performance vs Index</div>
439
+ <div class="chart-container">
440
+ <canvas id="performanceChart"></canvas>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="card">
445
+ <div class="card-title">Quick Alerts</div>
446
+ <div id="quick-alerts">
447
+ <!-- Alerts injected here -->
448
+ </div>
449
+ </div>
450
+ </section>
451
+
452
+ <!-- PORTFOLIO SECTION -->
453
+ <section id="portfolio" class="hidden">
454
+ <div class="card">
455
+ <div class="card-title">Fund Detailed Analysis</div>
456
+ <div class="data-table-container">
457
+ <table>
458
+ <thead>
459
+ <tr>
460
+ <th>Fund Name</th>
461
+ <th>Category</th>
462
+ <th>Return (1Y)</th>
463
+ <th>Benchmark</th>
464
+ <th>Status</th>
465
+ <th>Action</th>
466
+ </tr>
467
+ </thead>
468
+ <tbody id="fund-table-body">
469
+ <!-- Funds injected here -->
470
+ </tbody>
471
+ </table>
472
+ </div>
473
+ </div>
474
+ </section>
475
+
476
+ <!-- ALERTS SECTION -->
477
+ <section id="alerts" class="hidden">
478
+ <div style="max-width: 800px; margin: 0 auto;">
479
+ <h3 style="margin-bottom: 1.5rem;">System Notifications</h3>
480
+ <div id="full-alerts-list">
481
+ <!-- Alerts injected here -->
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
+ <!-- NEWS SECTION -->
487
+ <section id="news" class="hidden">
488
+ <div class="news-grid" id="news-container">
489
+ <!-- News cards injected here -->
490
+ </div>
491
+ </section>
492
+ </main>
493
+
494
+ <!-- Fund Detail Modal -->
495
+ <div class="overlay" id="fund-modal">
496
+ <div class="modal">
497
+ <span class="close-modal" onclick="closeModal()">&times;</span>
498
+ <div id="modal-content">
499
+ <!-- Dynamic Content -->
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <script>
505
+ /* --- MOCK DATA --- */
506
+ const FUNDS_DATA = [
507
+ {
508
+ id: 1,
509
+ name: "BlueChip Growth Fund",
510
+ category: "Large Cap",
511
+ objective: "Long term capital appreciation through large cap equities",
512
+ manager: "Rajesh Kumar",
513
+ performance: 18.5,
514
+ benchmark: 14.2,
515
+ index: 13.8,
516
+ changes: {
517
+ managerChanged: true,
518
+ categoryChanged: false,
519
+ objectiveChanged: false,
520
+ managerOld: "Suresh Mehra"
521
+ },
522
+ stocks: [
523
+ { name: "Reliance Ind", prev: 6.5, curr: 7.2, action: 'Buy' },
524
+ { name: "HDFC Bank", prev: 5.1, curr: 4.8, action: 'Sell' },
525
+ { name: "Infosys", prev: 3.2, curr: 4.1, action: 'Buy' },
526
+ { name: "TCS", prev: 4.0, curr: 3.5, action: 'Sell' },
527
+ ],
528
+ sectors: [
529
+ { name: "Financials", prev: 25, curr: 28 },
530
+ { name: "IT", prev: 20, curr: 18 },
531
+ { name: "Energy", prev: 15, curr: 17 },
532
+ { name: "Consumer", prev: 10, curr: 12 },
533
+ ]
534
+ },
535
+ {
536
+ id: 2,
537
+ name: "MidCap Alpha Fund",
538
+ category: "Mid Cap",
539
+ objective: "Aggressive growth in mid-sized companies",
540
+ manager: "Anita Desai",
541
+ performance: 24.1,
542
+ benchmark: 19.5,
543
+ index: 18.9,
544
+ changes: {
545
+ managerChanged: false,
546
+ categoryChanged: true,
547
+ objectiveChanged: true,
548
+ categoryOld: "Multi Cap"
549
+ },
550
+ stocks: [
551
+ { name: "Trent Ltd", prev: 2.1, curr: 3.5, action: 'Buy' },
552
+ { name: "Polycab", prev: 1.5, curr: 1.2, action: 'Sell' },
553
+ { name: "KEI Ind", prev: 0, curr: 1.8, action: 'Buy' },
554
+ ],
555
+ sectors: [
556
+ { name: "Industrials", prev: 30, curr: 35 },
557
+ { name: "Healthcare", prev: 20, curr: 15 },
558
+ { name: "Chemicals", prev: 15, curr: 20 },
559
+ { name: "Others", prev: 35, curr: 30 },
560
+ ]
561
+ },
562
+ {
563
+ id: 3,
564
+ name: "Global Tech Opportunity",
565
+ category: "Thematic - Tech",
566
+ objective: "Invest in global technology disruptors",
567
+ manager: "Mark Sloan",
568
+ performance: 12.2,
569
+ benchmark: 15.1,
570
+ index: 14.8,
571
+ changes: {
572
+ managerChanged: false,
573
+ categoryChanged: false,
574
+ objectiveChanged: false
575
+ },
576
+ stocks: [
577
+ { name: "NVIDIA", prev: 8.1, curr: 10.5, action: 'Buy' },
578
+ { name: "Apple", prev: 12.0, curr: 11.2, action: 'Sell' },
579
+ { name: "Microsoft", prev: 9.5, curr: 9.8, action: 'Buy' },
580
+ ],
581
+ sectors: [
582
+ { name: "Software", prev: 40, curr: 42 },
583
+ { name: "Hardware", prev: 30, curr: 28 },
584
+ { name: "AI Services", prev: 20, curr: 25 },
585
+ { name: "Cloud", prev: 10, curr: 5 },
586
+ ]
587
+ }
588
+ ];
589
+
590
+ const MOCK_NEWS = [
591
+ { fund: "BlueChip Growth Fund", title: "Market Shift: Large Caps showing resilience in Q3", source: "Economic Times", date: "2 hours ago", img: "https://picsum.photos/seed/news1/300/160" },
592
+ { fund: "MidCap Alpha Fund", title: "Midcap Sector Outlook: Why Industrials are booming", source: "MoneyControl", date: "5 hours ago", img: "https://picsum.photos/seed/news2/300/160" },
593
+ { fund: "Global Tech Opportunity", title: "AI Bubble or Boom? Analysts weigh in on NVIDIA", source: "Reuters", date: "1 day ago", img: "https://picsum.photos/seed/news3/300/160" },
594
+ { fund: "General", title: "RBI Monetary Policy Update: Impact on Mutual Funds", source: "Bloomberg", date: "1 day ago", img: "https://picsum.photos/seed/news4/300/160" },
595
+ { fund: "BlueChip Growth Fund", title: "Portfolio Rebalancing: BlueChip shifts towards Energy", source: "LiveMint", date: "2 days ago", img: "https://picsum.photos/seed/news5/300/160" },
596
+ { fund: "MidCap Alpha Fund", title: "Regulatory changes in Mid-cap classification", source: "Financial Express", date: "3 days ago", img: "https://picsum.photos/seed/news6/300/160" },
597
+ ];
598
+
599
+ /* --- APP LOGIC --- */
600
+
601
+ function init() {
602
+ renderDashboardCharts();
603
+ renderFundTable();
604
+ renderAlerts();
605
+ renderNews();
606
+ updateNotificationBadge();
607
+ }
608
+
609
+ function showSection(sectionId) {
610
+ document.querySelectorAll('section').forEach(s => s.classList.add('hidden'));
611
+ document.getElementById(sectionId).classList.remove('hidden');
612
+
613
+ document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
614
+ event.currentTarget.classList.add('active');
615
+
616
+ const titles = {
617
+ 'dashboard': 'Portfolio Overview',
618
+ 'portfolio': 'Detailed Portfolio Analysis',
619
+ 'alerts': 'Intelligence Alerts',
620
+ 'news': 'Market News Feed'
621
+ };
622
+ document.getElementById('section-title').innerText = titles[sectionId];
623
+ }
624
+
625
+ function updateNotificationBadge() {
626
+ const alerts = FUNDS_DATA.filter(f => f.changes.managerChanged || f.changes.categoryChanged || f.changes.objectiveChanged).length;
627
+ document.getElementById('alert-count').innerText = alerts;
628
+ }
629
+
630
+ function renderDashboardCharts() {
631
+ const ctx = document.getElementById('performanceChart').getContext('2d');
632
+ new Chart(ctx, {
633
+ type: 'line',
634
+ data: {
635
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
636
+ datasets: [
637
+ {
638
+ label: 'My Portfolio',
639
+ data: [10, 12, 11, 14, 16, 15, 18, 20, 19, 22, 25, 28],
640
+ borderColor: '#2563eb',
641
+ backgroundColor: 'rgba(37, 99, 235, 0.1)',
642
+ fill: true,
643
+ tension: 0.4
644
+ },
645
+ {
646
+ label: 'Category Average',
647
+ data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
648
+ borderColor: '#64748b',
649
+ borderDash: [5, 5],
650
+ fill: false,
651
+ tension: 0.4
652
+ },
653
+ {
654
+ label: 'Benchmark Index',
655
+ data: [10, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
656
+ borderColor: '#94a3b8',
657
+ fill: false,
658
+ tension: 0.4
659
+ }
660
+ ]
661
+ },
662
+ options: {
663
+ responsive: true,
664
+ maintainAspectRatio: false,
665
+ plugins: {
666
+ legend: { position: 'bottom' }
667
+ },
668
+ scales: {
669
+ y: { beginAtZero: false, grid: { display: false } },
670
+ x: { grid: { display: false } }
671
+ }
672
+ }
673
+ });
674
+ }
675
+
676
+ function renderFundTable() {
677
+ const tbody = document.getElementById('fund-table-body');
678
+ tbody.innerHTML = FUNDS_DATA.map(fund => `
679
+ <tr>
680
+ <td style="font-weight: 600;">${fund.name}</td>
681
+ <td>${fund.category}</td>
682
+ <td style="color: var(--success); font-weight: 600;">${fund.performance}%</td>
683
+ <td>${fund.benchmark}%</td>
684
+ <td>
685
+ <span class="change-pill ${fund.performance > fund.benchmark ? 'pill-buy' : 'pill-sell'}">
686
+ ${fund.performance > fund.benchmark ? 'Outperforming' : 'Underperforming'}
687
+ </span>
688
+ </td>
689
+ <td>
690
+ <button onclick="openFundDetails(${fund.id})" style="padding: 6px 12px; border-radius: 6px; border: 1px solid var(--primary); background: transparent; color: var(--primary); cursor: pointer; font-weight: 500;">
691
+ Analyze
692
+ </button>
693
+ </td>
694
+ </tr>
695
+ `).join('');
696
+ }
697
+
698
+ function renderAlerts() {
699
+ const quickContainer = document.getElementById('quick-alerts');
700
+ const fullContainer = document.getElementById('full-alerts-list');
701
+
702
+ let alertsHtml = '';
703
+ FUNDS_DATA.forEach(fund => {
704
+ if (fund.changes.managerChanged) {
705
+ alertsHtml += `
706
+ <div class="alert-item critical">
707
+ <i class="fa-solid fa-circle-exclamation" style="color: var(--danger)"></i>
708
+ <div class="alert-content">
709
+ <h4>Fund Manager Change</h4>
710
+ <p><strong>${fund.name}</strong>: Manager changed from ${fund.changes.managerOld} to ${fund.manager}.</p>
711
+ </div>
712
+ </div>`;
713
+ }
714
+ if (fund.changes.categoryChanged) {
715
+ alertsHtml += `
716
+ <div class="alert-item warning">
717
+ <i class="fa-solid fa-triangle-exclamation" style="color: var(--warning)"></i>
718
+ <div class="alert-content">
719
+ <h4>Category Reclassification</h4>
720
+ <p><strong>${fund.name}</strong>: Category changed from ${fund.changes.categoryOld} to ${fund.category}.</p>
721
+ </div>
722
+ </div>`;
723
+ }
724
+ if (fund.changes.objectiveChanged) {
725
+ alertsHtml += `
726
+ <div class="alert-item">
727
+ <i class="fa-solid fa-circle-info" style="color: var(--primary)"></i>
728
+ <div class="alert-content">
729
+ <h4>Investment Objective Update</h4>
730
+ <p><strong>${fund.name}</strong> has updated its investment objective in the latest factsheet.</p>
731
+ </div>
732
+ </div>`;
733
+ }
734
+ });
735
+
736
+ quickContainer.innerHTML = alertsHtml.substring(0, 600) + (alertsHtml.length > 600 ? '...' : '');
737
+ fullContainer.innerHTML = alertsHtml || '<p style="text-align: center; color: var(--text-muted);">No critical alerts at this time.</p>';
738
+ }
739
+
740
+ function renderNews() {
741
+ const container = document.getElementById('news-container');
742
+ container.innerHTML = MOCK_NEWS.map(item => `
743
+ <div class="news-card">
744
+ <img src="${item.img}" class="news-img" alt="news">
745
+ <div class="news-body">
746
+ <span class="news-tag">${item.fund}</span>
747
+ <div class="news-title">${item.title}</div>
748
+ <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted);">
749
+ <span><i class="fa-solid fa-building"></i> ${item.source}</span>
750
+ <span>${item.date}</span>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ `).join('');
755
+ }
756
+
757
+ function openFundDetails(id) {
758
+ const fund = FUNDS_DATA.find(f => f.id === id);
759
+ const modal = document.getElementById('fund-modal');
760
+ const content = document.getElementById('modal-content');
761
+
762
+ content.innerHTML = `
763
+ <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem;">
764
+ <div>
765
+ <h2 style="font-size: 1.8rem; margin-bottom: 0.5rem;">${fund.name}</h2>
766
+ <p style="color: var(--text-muted)">${fund.category} | Manager: ${fund.manager}</p>
767
+ </div>
768
+ <div style="text-align: right">
769
+ <div style="font-size: 1.5rem; font-weight: 700; color: var(--success)">${fund.performance}%</div>
770
+ <div style="font-size: 0.8rem; color: var(--text-muted)">1 Year Return</div>
771
+ </div>
772
+ </div>
773
+
774
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
775
+ <div>
776
+ <h4 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 10px;">
777
+ <i class="fa-solid fa-list-check" style="color: var(--primary)"></i>
778
+ Monthly Stock Changes
779
+ </h4>
780
+ <div class="data-table-container">
781
+ <table>
782
+ <thead>
783
+ <tr>
784
+ <th>Stock</th>
785
+ <th>Prev %</th>
786
+ <th>Curr %</th>
787
+ <th>Action</th>
788
+ </tr>
789
+ </thead>
790
+ <tbody>
791
+ ${fund.stocks.map(s => `
792
+ <tr>
793
+ <td>${s.name}</td>
794
+ <td>${s.prev}%</td>
795
+ <td>${s.curr}%</td>
796
+ <td><span class="change-pill ${s.action === 'Buy' ? 'pill-buy' : 'pill-sell'}">${s.action}</span></td>
797
+ </tr>
798
+ `).join('')}
799
+ </tbody>
800
+ </table>
801
+ </div>
802
+ </div>
803
+
804
+ <div>
805
+ <h4 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 10px;">
806
+ <i class="fa-solid fa-chart-pie" style="color: var(--primary)"></i>
807
+ Sector Weight Change
808
+ </h4>
809
+ <div class="data-table-container">
810
+ <table>
811
+ <thead>
812
+ <tr>
813
+ <th>Sector</th>
814
+ <th>Prev %</th>
815
+ <th>Curr %</th>
816
+ <th>Change</th>
817
+ </tr>
818
+ </thead>
819
+ <tbody>
820
+ ${fund.sectors.map(s => {
821
+ const diff = s.curr - s.prev;
822
+ return `
823
+ <tr>
824
+ <td>${s.name}</td>
825
+ <td>${s.prev}%</td>
826
+ <td>${s.curr}%</td>
827
+ <td style="color: ${diff >= 0 ? 'var(--success)' : 'var(--danger)'}; font-weight: 600;">
828
+ ${diff >= 0 ? '+' : ''}${diff}%
829
+ </td>
830
+ </tr>`;
831
+ }).join('')}
832
+ </tbody>
833
+ </table>
834
+ </div>
835
+ </div>
836
+ </div>
837
+
838
+ <div style="margin-top: 2rem; padding: 1.5rem; background: #f8fafc; border-radius: 12px; border: 1px solid var(--border);">
839
+ <h4 style="margin-bottom: 0.5rem;">Investment Objective</h4>
840
+ <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">${fund.objective}</p>
841
+ </div>
842
+ `;
843
+
844
+ modal.style.display = 'flex';
845
+ }
846
+
847
+ function closeModal() {
848
+ document.getElementById('fund-modal').style.display = 'none';
849
+ }
850
+
851
+ // Close modal when clicking outside
852
+ window.onclick = function(event) {
853
+ const modal = document.getElementById('fund-modal');
854
+ if (event.target == modal) {
855
+ closeModal();
856
+ }
857
+ }
858
+
859
+ // Start the app
860
+ window.onload = init;
861
+ </script>
862
+ </body>
863
+ </html>