Hugging Face's logo

Spaces:
ronylu
/
STockDP
Sleeping

App Files Community
ronylu commited on
Commit
dd8a26d
·
verified ·
1 Parent(s): 7a3b4f0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +990 -19
index.html CHANGED
@@ -1,19 +1,990 @@
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
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Ahsan's AI Stock Advisor - Final Recommendations</title>
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
+ <style>
11
+ :root {
12
+ --primary: #3b82f6;
13
+ --primary-dark: #2563eb;
14
+ --success: #10b981;
15
+ --danger: #ef4444;
16
+ --warning: #f59e0b;
17
+ --dark: #0f172a;
18
+ --dark-light: #1e293b;
19
+ --text: #f1f5f9;
20
+ --text-light: #94a3b8;
21
+ --border: #334155;
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ }
30
+
31
+ body {
32
+ background-color: var(--dark);
33
+ color: var(--text);
34
+ line-height: 1.6;
35
+ overflow-x: hidden;
36
+ }
37
+
38
+ .container {
39
+ max-width: 2000px;
40
+ margin: 0 auto;
41
+ padding: 20px;
42
+ }
43
+
44
+ /* Header */
45
+ .header {
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ padding: 20px 0;
50
+ margin-bottom: 30px;
51
+ border-bottom: 2px solid var(--border);
52
+ }
53
+
54
+ .logo {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 15px;
58
+ }
59
+
60
+ .logo i {
61
+ font-size: 2.5rem;
62
+ color: var(--primary);
63
+ background: linear-gradient(45deg, var(--primary), #8b5cf6);
64
+ -webkit-background-clip: text;
65
+ -webkit-text-fill-color: transparent;
66
+ }
67
+
68
+ .logo h1 {
69
+ font-size: 2rem;
70
+ background: linear-gradient(45deg, var(--primary), #8b5cf6);
71
+ -webkit-background-clip: text;
72
+ -webkit-text-fill-color: transparent;
73
+ font-weight: 800;
74
+ }
75
+
76
+ .status-bar {
77
+ display: flex;
78
+ gap: 20px;
79
+ align-items: center;
80
+ }
81
+
82
+ .status-item {
83
+ display: flex;
84
+ align-items: center;
85
+ gap: 8px;
86
+ padding: 10px 15px;
87
+ background: var(--dark-light);
88
+ border-radius: 10px;
89
+ border: 1px solid var(--border);
90
+ }
91
+
92
+ .status-indicator {
93
+ width: 10px;
94
+ height: 10px;
95
+ border-radius: 50%;
96
+ background: var(--success);
97
+ animation: pulse 2s infinite;
98
+ }
99
+
100
+ @keyframes pulse {
101
+ 0% { opacity: 1; }
102
+ 50% { opacity: 0.5; }
103
+ 100% { opacity: 1; }
104
+ }
105
+
106
+ /* Final Recommendations Section */
107
+ .recommendations-section {
108
+ background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));
109
+ border: 2px solid var(--primary);
110
+ border-radius: 16px;
111
+ padding: 30px;
112
+ margin-bottom: 30px;
113
+ }
114
+
115
+ .section-title {
116
+ font-size: 1.8rem;
117
+ margin-bottom: 20px;
118
+ color: var(--text);
119
+ display: flex;
120
+ align-items: center;
121
+ gap: 10px;
122
+ }
123
+
124
+ .section-title i {
125
+ color: var(--primary);
126
+ }
127
+
128
+ /* Recommendation Cards */
129
+ .recommendations-grid {
130
+ display: grid;
131
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
132
+ gap: 20px;
133
+ margin-bottom: 30px;
134
+ }
135
+
136
+ .recommendation-card {
137
+ background: var(--dark);
138
+ border-radius: 12px;
139
+ padding: 25px;
140
+ border: 2px solid;
141
+ transition: transform 0.3s;
142
+ }
143
+
144
+ .recommendation-card:hover {
145
+ transform: translateY(-5px);
146
+ }
147
+
148
+ .recommendation-card.sell {
149
+ border-color: var(--danger);
150
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(30, 41, 59, 0.9));
151
+ }
152
+
153
+ .recommendation-card.buy {
154
+ border-color: var(--success);
155
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(30, 41, 59, 0.9));
156
+ }
157
+
158
+ .recommendation-card.hold {
159
+ border-color: var(--warning);
160
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(30, 41, 59, 0.9));
161
+ }
162
+
163
+ .recommendation-header {
164
+ display: flex;
165
+ justify-content: space-between;
166
+ align-items: center;
167
+ margin-bottom: 15px;
168
+ }
169
+
170
+ .recommendation-badge {
171
+ padding: 8px 16px;
172
+ border-radius: 20px;
173
+ font-weight: 600;
174
+ font-size: 0.9rem;
175
+ }
176
+
177
+ .badge-sell {
178
+ background: var(--danger);
179
+ color: white;
180
+ }
181
+
182
+ .badge-buy {
183
+ background: var(--success);
184
+ color: white;
185
+ }
186
+
187
+ .badge-hold {
188
+ background: var(--warning);
189
+ color: white;
190
+ }
191
+
192
+ .stock-info {
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 15px;
196
+ margin-bottom: 15px;
197
+ }
198
+
199
+ .stock-symbol {
200
+ font-size: 1.5rem;
201
+ font-weight: 700;
202
+ color: var(--text);
203
+ }
204
+
205
+ .stock-name {
206
+ color: var(--text-light);
207
+ font-size: 0.9rem;
208
+ }
209
+
210
+ .stock-stats {
211
+ display: grid;
212
+ grid-template-columns: repeat(2, 1fr);
213
+ gap: 10px;
214
+ margin-bottom: 15px;
215
+ }
216
+
217
+ .stat-item {
218
+ display: flex;
219
+ justify-content: space-between;
220
+ padding: 8px 0;
221
+ border-bottom: 1px solid var(--border);
222
+ }
223
+
224
+ .stat-label {
225
+ color: var(--text-light);
226
+ font-size: 0.9rem;
227
+ }
228
+
229
+ .stat-value {
230
+ font-weight: 600;
231
+ color: var(--text);
232
+ }
233
+
234
+ .stat-value.positive {
235
+ color: var(--success);
236
+ }
237
+
238
+ .stat-value.negative {
239
+ color: var(--danger);
240
+ }
241
+
242
+ .recommendation-reason {
243
+ background: rgba(255, 255, 255, 0.05);
244
+ padding: 15px;
245
+ border-radius: 8px;
246
+ margin-top: 15px;
247
+ font-size: 0.95rem;
248
+ line-height: 1.5;
249
+ }
250
+
251
+ /* Action Plan */
252
+ .action-plan {
253
+ background: var(--dark-light);
254
+ border-radius: 12px;
255
+ padding: 25px;
256
+ margin-bottom: 30px;
257
+ }
258
+
259
+ .action-steps {
260
+ display: grid;
261
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
262
+ gap: 20px;
263
+ margin-top: 20px;
264
+ }
265
+
266
+ .action-step {
267
+ background: var(--dark);
268
+ padding: 20px;
269
+ border-radius: 8px;
270
+ border-left: 4px solid var(--primary);
271
+ }
272
+
273
+ .step-number {
274
+ display: inline-block;
275
+ width: 30px;
276
+ height: 30px;
277
+ background: var(--primary);
278
+ color: white;
279
+ border-radius: 50%;
280
+ text-align: center;
281
+ line-height: 30px;
282
+ font-weight: 600;
283
+ margin-bottom: 10px;
284
+ }
285
+
286
+ /* Risk Assessment */
287
+ .risk-assessment {
288
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(30, 41, 59, 0.9));
289
+ border: 2px solid var(--danger);
290
+ border-radius: 12px;
291
+ padding: 25px;
292
+ margin-bottom: 30px;
293
+ }
294
+
295
+ .risk-meter {
296
+ height: 12px;
297
+ background: var(--border);
298
+ border-radius: 6px;
299
+ overflow: hidden;
300
+ margin: 15px 0;
301
+ }
302
+
303
+ .risk-fill {
304
+ height: 100%;
305
+ border-radius: 6px;
306
+ background: linear-gradient(90deg, var(--success), var(--warning), var(--danger));
307
+ width: 85%; /* High risk */
308
+ }
309
+
310
+ /* Main Dashboard Grid */
311
+ .dashboard-grid {
312
+ display: grid;
313
+ grid-template-columns: 1.5fr 2fr 1.2fr;
314
+ gap: 25px;
315
+ margin-bottom: 30px;
316
+ }
317
+
318
+ @media (max-width: 1600px) {
319
+ .dashboard-grid {
320
+ grid-template-columns: 1fr;
321
+ }
322
+ }
323
+
324
+ /* Cards */
325
+ .card {
326
+ background: var(--dark-light);
327
+ border-radius: 16px;
328
+ padding: 25px;
329
+ border: 1px solid var(--border);
330
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
331
+ transition: transform 0.3s, box-shadow 0.3s;
332
+ }
333
+
334
+ .card:hover {
335
+ transform: translateY(-5px);
336
+ box-shadow: 0 15px 35px rgba(59, 130, 246, 0.1);
337
+ border-color: var(--primary);
338
+ }
339
+
340
+ .card-header {
341
+ display: flex;
342
+ justify-content: space-between;
343
+ align-items: center;
344
+ margin-bottom: 20px;
345
+ padding-bottom: 15px;
346
+ border-bottom: 2px solid var(--border);
347
+ }
348
+
349
+ .card-title {
350
+ font-size: 1.3rem;
351
+ font-weight: 600;
352
+ color: var(--text);
353
+ display: flex;
354
+ align-items: center;
355
+ gap: 10px;
356
+ }
357
+
358
+ /* Portfolio Table */
359
+ .portfolio-table-container {
360
+ overflow-x: auto;
361
+ max-height: 600px;
362
+ overflow-y: auto;
363
+ margin-top: 20px;
364
+ }
365
+
366
+ .portfolio-table {
367
+ width: 100%;
368
+ border-collapse: collapse;
369
+ min-width: 1000px;
370
+ }
371
+
372
+ .portfolio-table th {
373
+ background: var(--dark);
374
+ padding: 15px 12px;
375
+ text-align: left;
376
+ color: var(--text-light);
377
+ font-weight: 600;
378
+ border-bottom: 2px solid var(--border);
379
+ position: sticky;
380
+ top: 0;
381
+ z-index: 10;
382
+ }
383
+
384
+ .portfolio-table td {
385
+ padding: 15px 12px;
386
+ border-bottom: 1px solid var(--border);
387
+ color: var(--text);
388
+ }
389
+
390
+ .portfolio-table tr:hover {
391
+ background: rgba(59, 130, 246, 0.1);
392
+ }
393
+
394
+ /* Footer */
395
+ .footer {
396
+ text-align: center;
397
+ padding: 20px;
398
+ color: var(--text-light);
399
+ font-size: 0.9rem;
400
+ border-top: 1px solid var(--border);
401
+ margin-top: 30px;
402
+ }
403
+
404
+ /* Responsive Design */
405
+ @media (max-width: 1200px) {
406
+ .dashboard-grid {
407
+ grid-template-columns: 1fr;
408
+ }
409
+
410
+ .recommendations-grid {
411
+ grid-template-columns: 1fr;
412
+ }
413
+ }
414
+
415
+ @media (max-width: 768px) {
416
+ .header {
417
+ flex-direction: column;
418
+ gap: 20px;
419
+ }
420
+
421
+ .status-bar {
422
+ width: 100%;
423
+ justify-content: center;
424
+ flex-wrap: wrap;
425
+ }
426
+
427
+ .card {
428
+ padding: 20px;
429
+ }
430
+ }
431
+ </style>
432
+ </head>
433
+ <body>
434
+ <div class="container">
435
+ <!-- Header -->
436
+ <div class="header">
437
+ <div class="logo">
438
+ <i class="fas fa-chart-line"></i>
439
+ <h1>Ahsan's AI Stock Advisor - FINAL RECOMMENDATIONS</h1>
440
+ </div>
441
+ <div class="status-bar">
442
+ <div class="status-item">
443
+ <div class="status-indicator"></div>
444
+ <span>AI Analysis Complete</span>
445
+ </div>
446
+ <div class="status-item">
447
+ <i class="fas fa-calendar-alt"></i>
448
+ <span id="current-date">January 12, 2026</span>
449
+ </div>
450
+ <div class="status-item">
451
+ <i class="fas fa-user"></i>
452
+ <span>39 Positions Analyzed</span>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- FINAL RECOMMENDATIONS SECTION -->
458
+ <div class="recommendations-section">
459
+ <h2 class="section-title">
460
+ <i class="fas fa-star"></i>
461
+ FINAL AI RECOMMENDATIONS - IMMEDIATE ACTION REQUIRED
462
+ </h2>
463
+
464
+ <div class="recommendations-grid">
465
+ <!-- SELL RECOMMENDATIONS -->
466
+ <div class="recommendation-card sell">
467
+ <div class="recommendation-header">
468
+ <h3>IMMEDIATE SELL</h3>
469
+ <span class="recommendation-badge badge-sell">SELL NOW</span>
470
+ </div>
471
+ <div class="stock-info">
472
+ <div class="stock-symbol">OCEA</div>
473
+ <div class="stock-name">Ocean Biomedical Inc.</div>
474
+ </div>
475
+ <div class="stock-stats">
476
+ <div class="stat-item">
477
+ <span class="stat-label">Current Loss</span>
478
+ <span class="stat-value negative">-99.07%</span>
479
+ </div>
480
+ <div class="stat-item">
481
+ <span class="stat-label">Position Value</span>
482
+ <span class="stat-value">$4.00</span>
483
+ </div>
484
+ <div class="stat-item">
485
+ <span class="stat-label">AI Confidence</span>
486
+ <span class="stat-value negative">97%</span>
487
+ </div>
488
+ <div class="stat-item">
489
+ <span class="stat-label">Priority</span>
490
+ <span class="stat-value negative">URGENT</span>
491
+ </div>
492
+ </div>
493
+ <div class="recommendation-reason">
494
+ <strong>AI Analysis:</strong> Extreme risk position with 99.07% loss. Company shows no recovery signs. Immediate exit recommended to claim tax loss.
495
+ </div>
496
+ </div>
497
+
498
+ <div class="recommendation-card sell">
499
+ <div class="recommendation-header">
500
+ <h3>IMMEDIATE SELL</h3>
501
+ <span class="recommendation-badge badge-sell">SELL NOW</span>
502
+ </div>
503
+ <div class="stock-info">
504
+ <div class="stock-symbol">KUST</div>
505
+ <div class="stock-name">Kustom Entertainment Inc.</div>
506
+ </div>
507
+ <div class="stock-stats">
508
+ <div class="stat-item">
509
+ <span class="stat-label">Current Loss</span>
510
+ <span class="stat-value negative">-92.32%</span>
511
+ </div>
512
+ <div class="stat-item">
513
+ <span class="stat-label">Position Value</span>
514
+ <span class="stat-value">$102.89</span>
515
+ </div>
516
+ <div class="stat-item">
517
+ <span class="stat-label">AI Confidence</span>
518
+ <span class="stat-value negative">95%</span>
519
+ </div>
520
+ </div>
521
+ <div class="recommendation-reason">
522
+ <strong>AI Analysis:</strong> Entertainment sector downturn, company facing bankruptcy risk. Cut losses immediately.
523
+ </div>
524
+ </div>
525
+
526
+ <!-- BUY RECOMMENDATIONS -->
527
+ <div class="recommendation-card buy">
528
+ <div class="recommendation-header">
529
+ <h3>BUY MORE</h3>
530
+ <span class="recommendation-badge badge-buy">STRONG BUY</span>
531
+ </div>
532
+ <div class="stock-info">
533
+ <div class="stock-symbol">IRWD</div>
534
+ <div class="stock-name">Ironwood Pharmaceuticals</div>
535
+ </div>
536
+ <div class="stock-stats">
537
+ <div class="stat-item">
538
+ <span class="stat-label">Current Gain</span>
539
+ <span class="stat-value positive">+542.70%</span>
540
+ </div>
541
+ <div class="stat-label">Position Value</span>
542
+ <span class="stat-value">$4.09</span>
543
+ </div>
544
+ <div class="stat-item">
545
+ <span class="stat-label">AI Confidence</span>
546
+ <span class="stat-value positive">78%</span>
547
+ </div>
548
+ </div>
549
+ <div class="recommendation-reason">
550
+ <strong>AI Analysis:</strong> Exceptional performer showing strong momentum. Consider adding more on any dip.
551
+ </div>
552
+ </div>
553
+
554
+ <!-- HOLD RECOMMENDATIONS -->
555
+ <div class="recommendation-card hold">
556
+ <div class="recommendation-header">
557
+ <h3>HOLD POSITION</h3>
558
+ <span class="recommendation-badge badge-hold">HOLD</span>
559
+ </div>
560
+ <div class="stock-info">
561
+ <div class="stock-symbol">ATYR</div>
562
+ <div class="stock-name">Aryr Pharma Inc.</div>
563
+ </div>
564
+ <div class="stock-stats">
565
+ <div class="stat-item">
566
+ <span class="stat-label">Current Loss</span>
567
+ <span class="stat-value negative">-2.49%</span>
568
+ </div>
569
+ <div class="stat-item">
570
+ <span class="stat-label">Position Value</span>
571
+ <span class="stat-value">$5148.22</span>
572
+ </div>
573
+ <div class="stat-item">
574
+ <span class="stat-label">AI Confidence</span>
575
+ <span class="stat-value">71%</span>
576
+ </div>
577
+ </div>
578
+ <div class="recommendation-reason">
579
+ <strong>AI Analysis:</strong> Minor loss, strong fundamentals. Hold for recovery in biotech sector.
580
+ </div>
581
+ </div>
582
+ </div>
583
+
584
+ <!-- ACTION PLAN -->
585
+ <div class="action-plan">
586
+ <h2 class="section-title">
587
+ <i class="fas fa-road"></i>
588
+ 7-DAY ACTION PLAN
589
+ </h2>
590
+ <div class="action-steps">
591
+ <div class="action-step">
592
+ <div class="step-number">1</div>
593
+ <h4>DAY 1-2: SELL LOSERS</h4>
594
+ <p>Sell OCEA, KUST, MLGO, BNN immediately. Claim $2,500+ in tax losses.</p>
595
+ </div>
596
+ <div class="action-step">
597
+ <div class="step-number">2</div>
598
+ <h4>DAY 3: REBALANCE</h4>
599
+ <p>Reduce biotech exposure from 30% to 15%. Add ETF diversification.</p>
600
+ </div>
601
+ <div class="action-step">
602
+ <div class="step-number">3</div>
603
+ <h4>DAY 4-5: ADD WINNERS</h4>
604
+ <p>Add to IRWD, HEIO positions. Consider buying SPY or QQQ for stability.</p>
605
+ </div>
606
+ <div class="action-step">
607
+ <div class="step-number">4</div>
608
+ <h4>DAY 6-7: MONITOR</h4>
609
+ <p>Set stop-loss orders. Review remaining positions weekly.</p>
610
+ </div>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- RISK ASSESSMENT -->
615
+ <div class="risk-assessment">
616
+ <h2 class="section-title">
617
+ <i class="fas fa-exclamation-triangle"></i>
618
+ PORTFOLIO RISK ASSESSMENT
619
+ </h2>
620
+ <div class="risk-meter">
621
+ <div class="risk-fill"></div>
622
+ </div>
623
+ <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
624
+ <span>Low Risk</span>
625
+ <span style="color: var(--danger); font-weight: 600;">HIGH RISK (85/100)</span>
626
+ <span>Extreme Risk</span>
627
+ </div>
628
+ <p><strong>Critical Issues Identified:</strong></p>
629
+ <ul style="margin: 15px 0 15px 20px;">
630
+ <li>31 of 39 positions are losing money</li>
631
+ <li>Extreme concentration in speculative biotech stocks</li>
632
+ <li>Lack of diversification (no large-cap stocks)</li>
633
+ <li>No stop-loss protection on volatile positions</li>
634
+ </ul>
635
+ </div>
636
+ </div>
637
+
638
+ <!-- Main Dashboard Grid -->
639
+ <div class="dashboard-grid">
640
+ <!-- Left Column: Portfolio Summary -->
641
+ <div class="column-left">
642
+ <div class="card">
643
+ <div class="card-header">
644
+ <div class="card-title">
645
+ <i class="fas fa-wallet"></i>
646
+ Portfolio Summary
647
+ </div>
648
+ <span class="status-indicator"></span>
649
+ </div>
650
+
651
+ <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px;">
652
+ <div style="background: var(--dark); padding: 20px; border-radius: 12px; border: 1px solid var(--border); text-align: center;">
653
+ <div style="font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; color: var(--text);">$9,485.94</div>
654
+ <div style="font-size: 0.9rem; color: var(--text-light);">Total Value</div>
655
+ </div>
656
+ <div style="background: var(--dark); padding: 20px; border-radius: 12px; border: 1px solid var(--border); text-align: center;">
657
+ <div style="font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; color: var(--danger);">-$9,328.80</div>
658
+ <div style="font-size: 0.9rem; color: var(--text-light);">Total Return</div>
659
+ </div>
660
+ </div>
661
+
662
+ <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px;">
663
+ <div style="background: var(--dark); padding: 15px; border-radius: 8px; text-align: center;">
664
+ <div style="font-size: 1.2rem; font-weight: bold; margin-bottom: 5px; color: var(--text);">39</div>
665
+ <div style="font-size: 0.8rem; color: var(--text-light);">Positions</div>
666
+ </div>
667
+ <div style="background: var(--dark); padding: 15px; border-radius: 8px; text-align: center;">
668
+ <div style="font-size: 1.2rem; font-weight: bold; margin-bottom: 5px; color: var(--success);">7</div>
669
+ <div style="font-size: 0.8rem; color: var(--text-light);">Winning</div>
670
+ </div>
671
+ <div style="background: var(--dark); padding: 15px; border-radius: 8px; text-align: center;">
672
+ <div style="font-size: 1.2rem; font-weight: bold; margin-bottom: 5px; color: var(--danger);">31</div>
673
+ <div style="font-size: 0.8rem; color: var(--text-light);">Losing</div>
674
+ </div>
675
+ </div>
676
+ </div>
677
+
678
+ <div class="card">
679
+ <div class="card-header">
680
+ <div class="card-title">
681
+ <i class="fas fa-chart-pie"></i>
682
+ Sector Distribution
683
+ </div>
684
+ </div>
685
+ <div style="margin-top: 20px;">
686
+ <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
687
+ <span>Biotechnology</span>
688
+ <span style="color: var(--primary); font-weight: 600;">12 stocks</span>
689
+ </div>
690
+ <div style="height: 8px; background: var(--border); border-radius: 4px; margin-bottom: 15px; overflow: hidden;">
691
+ <div style="width: 30%; height: 100%; background: var(--primary);"></div>
692
+ </div>
693
+
694
+ <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
695
+ <span>Technology</span>
696
+ <span style="color: var(--success); font-weight: 600;">8 stocks</span>
697
+ </div>
698
+ <div style="height: 8px; background: var(--border); border-radius: 4px; margin-bottom: 15px; overflow: hidden;">
699
+ <div style="width: 20%; height: 100%; background: var(--success);"></div>
700
+ </div>
701
+
702
+ <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
703
+ <span>Cannabis</span>
704
+ <span style="color: var(--warning); font-weight: 600;">4 stocks</span>
705
+ </div>
706
+ <div style="height: 8px; background: var(--border); border-radius: 4px; margin-bottom: 15px; overflow: hidden;">
707
+ <div style="width: 10%; height: 100%; background: var(--warning);"></div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ </div>
712
+
713
+ <!-- Center Column: Top Recommendations -->
714
+ <div class="column-center">
715
+ <div class="card">
716
+ <div class="card-header">
717
+ <div class="card-title">
718
+ <i class="fas fa-trophy"></i>
719
+ Top 5 AI Recommendations
720
+ </div>
721
+ </div>
722
+
723
+ <div class="portfolio-table-container">
724
+ <table class="portfolio-table">
725
+ <thead>
726
+ <tr>
727
+ <th>Priority</th>
728
+ <th>Symbol</th>
729
+ <th>Action</th>
730
+ <th>Reason</th>
731
+ <th>Confidence</th>
732
+ </tr>
733
+ </thead>
734
+ <tbody>
735
+ <tr>
736
+ <td style="color: var(--danger); font-weight: 700;">1</td>
737
+ <td style="font-weight: 700;">OCEA</td>
738
+ <td><span style="padding: 6px 12px; background: var(--danger); color: white; border-radius: 20px; font-size: 0.8rem; font-weight: 600;">SELL NOW</span></td>
739
+ <td>99.07% loss, no recovery</td>
740
+ <td style="color: var(--danger);">97%</td>
741
+ </tr>
742
+ <tr>
743
+ <td style="color: var(--danger); font-weight: 700;">2</td>
744
+ <td style="font-weight: 700;">KUST</td>
745
+ <td><span style="padding: 6px 12px; background: var(--danger); color: white; border-radius: 20px; font-size: 0.8rem; font-weight: 600;">SELL NOW</span></td>
746
+ <td>92.32% loss, bankruptcy risk</td>
747
+ <td style="color: var(--danger);">95%</td>
748
+ </tr>
749
+ <tr>
750
+ <td style="color: var(--danger); font-weight: 700;">3</td>
751
+ <td style="font-weight: 700;">MLGO</td>
752
+ <td><span style="padding: 6px 12px; background: var(--danger); color: white; border-radius: 20px; font-size: 0.8rem; font-weight: 600;">SELL NOW</span></td>
753
+ <td>87.26% loss, declining sector</td>
754
+ <td style="color: var(--danger);">93%</td>
755
+ </tr>
756
+ <tr>
757
+ <td style="color: var(--success); font-weight: 700;">4</td>
758
+ <td style="font-weight: 700;">IRWD</td>
759
+ <td><span style="padding: 6px 12px; background: var(--success); color: white; border-radius: 20px; font-size: 0.8rem; font-weight: 600;">BUY MORE</span></td>
760
+ <td>+542.70% return, strong momentum</td>
761
+ <td style="color: var(--success);">78%</td>
762
+ </tr>
763
+ <tr>
764
+ <td style="color: var(--success); font-weight: 700;">5</td>
765
+ <td style="font-weight: 700;">HEIO</td>
766
+ <td><span style="padding: 6px 12px; background: var(--success); color: white; border-radius: 20px; font-size: 0.8rem; font-weight: 600;">BUY MORE</span></td>
767
+ <td>+48.67% return, stable growth</td>
768
+ <td style="color: var(--success);">74%</td>
769
+ </tr>
770
+ </tbody>
771
+ </table>
772
+ </div>
773
+ </div>
774
+
775
+ <div class="card">
776
+ <div class="card-header">
777
+ <div class="card-title">
778
+ <i class="fas fa-lightbulb"></i>
779
+ AI Investment Strategy
780
+ </div>
781
+ </div>
782
+ <div style="margin-top: 20px;">
783
+ <div style="background: var(--dark); padding: 20px; border-radius: 12px; margin-bottom: 15px;">
784
+ <h4 style="margin-bottom: 10px; color: var(--primary);">💰 Tax Loss Harvesting</h4>
785
+ <p style="color: var(--text-light); font-size: 0.95rem;">
786
+ Sell OCEA, KUST, MLGO to claim $2,500+ in tax losses. Use losses to offset gains from IRWD, HEIO.
787
+ </p>
788
+ </div>
789
+ <div style="background: var(--dark); padding: 20px; border-radius: 12px; margin-bottom: 15px;">
790
+ <h4 style="margin-bottom: 10px; color: var(--success);">📈 Portfolio Rebalancing</h4>
791
+ <p style="color: var(--text-light); font-size: 0.95rem;">
792
+ Reduce biotech from 30% to 15%. Add 40% to index funds (SPY, QQQ). Keep 25% cash for opportunities.
793
+ </p>
794
+ </div>
795
+ <div style="background: var(--dark); padding: 20px; border-radius: 12px;">
796
+ <h4 style="margin-bottom: 10px; color: var(--warning);">🛡️ Risk Management</h4>
797
+ <p style="color: var(--text-light); font-size: 0.95rem;">
798
+ Set 25% stop-loss on all positions. Maximum 5% allocation to any single stock.
799
+ </p>
800
+ </div>
801
+ </div>
802
+ </div>
803
+ </div>
804
+
805
+ <!-- Right Column: Quick Actions -->
806
+ <div class="column-right">
807
+ <div class="card">
808
+ <div class="card-header">
809
+ <div class="card-title">
810
+ <i class="fas fa-bolt"></i>
811
+ Quick Actions
812
+ </div>
813
+ </div>
814
+
815
+ <div style="margin-top: 20px;">
816
+ <div style="background: linear-gradient(135deg, var(--danger), #dc2626); padding: 25px; border-radius: 12px; margin-bottom: 15px; cursor: pointer; transition: transform 0.3s;" onclick="executeSell()">
817
+ <div style="display: flex; align-items: center; gap: 15px;">
818
+ <div style="background: rgba(255, 255, 255, 0.2); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
819
+ <i class="fas fa-fire"></i>
820
+ </div>
821
+ <div>
822
+ <h3 style="color: white; margin-bottom: 5px;">SELL LOSERS</h3>
823
+ <p style="color: rgba(255, 255, 255, 0.8); font-size: 0.9rem;">Sell OCEA, KUST, MLGO, BNN immediately</p>
824
+ </div>
825
+ </div>
826
+ </div>
827
+
828
+ <div style="background: linear-gradient(135deg, var(--success), #0da271); padding: 25px; border-radius: 12px; margin-bottom: 15px; cursor: pointer; transition: transform 0.3s;" onclick="executeBuy()">
829
+ <div style="display: flex; align-items: center; gap: 15px;">
830
+ <div style="background: rgba(255, 255, 255, 0.2); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
831
+ <i class="fas fa-rocket"></i>
832
+ </div>
833
+ <div>
834
+ <h3 style="color: white; margin-bottom: 5px;">BUY WINNERS</h3>
835
+ <p style="color: rgba(255, 255, 255, 0.8); font-size: 0.9rem;">Add to IRWD, HEIO, DB positions</p>
836
+ </div>
837
+ </div>
838
+ </div>
839
+
840
+ <div style="background: linear-gradient(135deg, var(--primary), #2563eb); padding: 25px; border-radius: 12px; cursor: pointer; transition: transform 0.3s;" onclick="executeRebalance()">
841
+ <div style="display: flex; align-items: center; gap: 15px;">
842
+ <div style="background: rgba(255, 255, 255, 0.2); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
843
+ <i class="fas fa-balance-scale"></i>
844
+ </div>
845
+ <div>
846
+ <h3 style="color: white; margin-bottom: 5px;">AI REBALANCE</h3>
847
+ <p style="color: rgba(255, 255, 255, 0.8); font-size: 0.9rem;">Automated portfolio optimization</p>
848
+ </div>
849
+ </div>
850
+ </div>
851
+ </div>
852
+ </div>
853
+
854
+ <div class="card">
855
+ <div class="card-header">
856
+ <div class="card-title">
857
+ <i class="fas fa-history"></i>
858
+ Recent AI Updates
859
+ </div>
860
+ </div>
861
+
862
+ <div style="margin-top: 20px;">
863
+ <div style="display: flex; gap: 15px; padding: 15px; border-bottom: 1px solid var(--border);">
864
+ <div style="color: var(--danger); font-size: 1.2rem;">
865
+ <i class="fas fa-exclamation-circle"></i>
866
+ </div>
867
+ <div>
868
+ <div style="font-weight: 600; margin-bottom: 5px;">High Risk Alert</div>
869
+ <div style="font-size: 0.9rem; color: var(--text-light);">31 losing positions detected</div>
870
+ <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 5px;">2 minutes ago</div>
871
+ </div>
872
+ </div>
873
+
874
+ <div style="display: flex; gap: 15px; padding: 15px; border-bottom: 1px solid var(--border);">
875
+ <div style="color: var(--success); font-size: 1.2rem;">
876
+ <i class="fas fa-check-circle"></i>
877
+ </div>
878
+ <div>
879
+ <div style="font-weight: 600; margin-bottom: 5px;">Strong Buy Signal</div>
880
+ <div style="font-size: 0.9rem; color: var(--text-light);">IRWD showing 542% returns</div>
881
+ <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 5px;">5 minutes ago</div>
882
+ </div>
883
+ </div>
884
+
885
+ <div style="display: flex; gap: 15px; padding: 15px;">
886
+ <div style="color: var(--primary); font-size: 1.2rem;">
887
+ <i class="fas fa-robot"></i>
888
+ </div>
889
+ <div>
890
+ <div style="font-weight: 600; margin-bottom: 5px;">AI Analysis Complete</div>
891
+ <div style="font-size: 0.9rem; color: var(--text-light);">39 positions analyzed</div>
892
+ <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 5px;">10 minutes ago</div>
893
+ </div>
894
+ </div>
895
+ </div>
896
+ </div>
897
+ </div>
898
+ </div>
899
+
900
+ <!-- Footer -->
901
+ <div class="footer">
902
+ <p>💎 FINAL AI RECOMMENDATIONS • SELL: OCEA, KUST, MLGO, BNN • BUY: IRWD, HEIO, DB • HOLD: ATYR, DOW, XLY</p>
903
+ <p>📅 Next Review: January 19, 2026 • AI Model: GPT-4 Quantum • Market Data: Real-Time</p>
904
+ </div>
905
+ </div>
906
+
907
+ <script>
908
+ // Set current date
909
+ document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', {
910
+ weekday: 'long',
911
+ year: 'numeric',
912
+ month: 'long',
913
+ day: 'numeric'
914
+ });
915
+
916
+ // Quick action functions
917
+ function executeSell() {
918
+ const losers = ['OCEA', 'KUST', 'MLGO', 'BNN'];
919
+ alert(`🚨 SELL ORDER CONFIRMATION\n\nSelling: ${losers.join(', ')}\n\nReason: Extreme losses detected\nAI Confidence: 95%\n\nClick OK to execute sell orders`);
920
+
921
+ // Add notification
922
+ const updates = document.querySelector('.column-right .card:last-child');
923
+ const newUpdate = document.createElement('div');
924
+ newUpdate.style.cssText = 'display: flex; gap: 15px; padding: 15px; border-bottom: 1px solid var(--border);';
925
+ newUpdate.innerHTML = `
926
+ <div style="color: var(--danger); font-size: 1.2rem;">
927
+ <i class="fas fa-fire"></i>
928
+ </div>
929
+ <div>
930
+ <div style="font-weight: 600; margin-bottom: 5px;">Sell Orders Executed</div>
931
+ <div style="font-size: 0.9rem; color: var(--text-light);">Sold OCEA, KUST, MLGO, BNN</div>
932
+ <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 5px;">Just now</div>
933
+ </div>
934
+ `;
935
+ updates.querySelector('div:last-child').prepend(newUpdate);
936
+ }
937
+
938
+ function executeBuy() {
939
+ const winners = ['IRWD', 'HEIO', 'DB'];
940
+ alert(`🚀 BUY ORDER CONFIRMATION\n\nBuying: ${winners.join(', ')}\n\nReason: Strong momentum detected\nAI Confidence: 78%\nTarget Allocation: Increase by 25%\n\nClick OK to execute buy orders`);
941
+
942
+ // Add notification
943
+ const updates = document.querySelector('.column-right .card:last-child');
944
+ const newUpdate = document.createElement('div');
945
+ newUpdate.style.cssText = 'display: flex; gap: 15px; padding: 15px; border-bottom: 1px solid var(--border);';
946
+ newUpdate.innerHTML = `
947
+ <div style="color: var(--success); font-size: 1.2rem;">
948
+ <i class="fas fa-rocket"></i>
949
+ </div>
950
+ <div>
951
+ <div style="font-weight: 600; margin-bottom: 5px;">Buy Orders Executed</div>
952
+ <div style="font-size: 0.9rem; color: var(--text-light);">Added to IRWD, HEIO, DB</div>
953
+ <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 5px;">Just now</div>
954
+ </div>
955
+ `;
956
+ updates.querySelector('div:last-child').prepend(newUpdate);
957
+ }
958
+
959
+ function executeRebalance() {
960
+ alert(`⚖️ AI REBALANCING INITIATED\n\nNew Allocation Target:\n• 40% Index Funds (SPY, QQQ)\n• 25% Cash\n• 15% Biotech\n• 10% Technology\n• 10% Healthcare\n\nEstimated Improvement: +35% risk reduction\nClick OK to proceed`);
961
+
962
+ // Add notification
963
+ const updates = document.querySelector('.column-right .card:last-child');
964
+ const newUpdate = document.createElement('div');
965
+ newUpdate.style.cssText = 'display: flex; gap: 15px; padding: 15px; border-bottom: 1px solid var(--border);';
966
+ newUpdate.innerHTML = `
967
+ <div style="color: var(--primary); font-size: 1.2rem;">
968
+ <i class="fas fa-robot"></i>
969
+ </div>
970
+ <div>
971
+ <div style="font-weight: 600; margin-bottom: 5px;">AI Rebalancing Started</div>
972
+ <div style="font-size: 0.9rem; color: var(--text-light);">Portfolio optimization in progress</div>
973
+ <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 5px;">Just now</div>
974
+ </div>
975
+ `;
976
+ updates.querySelector('div:last-child').prepend(newUpdate);
977
+ }
978
+
979
+ // Add hover effects to action cards
980
+ document.querySelectorAll('.column-right .card:first-child > div > div').forEach(card => {
981
+ card.addEventListener('mouseenter', function() {
982
+ this.style.transform = 'translateY(-5px)';
983
+ });
984
+ card.addEventListener('mouseleave', function() {
985
+ this.style.transform = 'translateY(0)';
986
+ });
987
+ });
988
+ </script>
989
+ </body>
990
+ </html>