Hugging Face's logo

Spaces:
rehan3fs
/
web-prt
Running

App Files Community
rehan3fs commited on
Commit
3a2445e
·
verified ·
1 Parent(s): 5dd4b33

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +590 -356
  2. prompts.txt +1 -0
index.html CHANGED
@@ -3,17 +3,32 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AlphaTrade | AI-Powered Investment Platform</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
  <style>
11
- .gradient-bg {
12
- background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  }
14
  .card-hover:hover {
15
- transform: translateY(-5px);
16
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
  }
18
  .stock-up {
19
  color: #10b981;
@@ -22,187 +37,190 @@
22
  color: #ef4444;
23
  }
24
  .risk-low {
25
- background-color: #10b98120;
26
  color: #10b981;
27
  }
28
  .risk-medium {
29
- background-color: #f59e0b20;
30
  color: #f59e0b;
31
  }
32
  .risk-high {
33
- background-color: #ef444420;
34
  color: #ef4444;
35
  }
36
- .sidebar {
37
- scrollbar-width: thin;
38
- scrollbar-color: #3b82f6 #1e40af;
 
 
 
39
  }
40
- .sidebar::-webkit-scrollbar {
41
- width: 6px;
 
42
  }
43
- .sidebar::-webkit-scrollbar-track {
44
- background: #1e40af;
45
  }
46
- .sidebar::-webkit-scrollbar-thumb {
47
  background-color: #3b82f6;
48
  border-radius: 20px;
49
  }
50
- .ticker-tape {
51
- animation: ticker 30s linear infinite;
52
  }
53
- @keyframes ticker {
54
- 0% { transform: translateX(0); }
55
- 100% { transform: translateX(-50%); }
56
  }
57
  </style>
58
  </head>
59
- <body class="bg-gray-50 font-sans">
60
  <!-- Top Navigation -->
61
- <nav class="gradient-bg text-white shadow-lg">
62
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
63
  <div class="flex items-center space-x-2">
64
- <i class="fas fa-chart-line text-2xl"></i>
65
- <span class="text-xl font-bold">AlphaTrade</span>
66
  </div>
67
  <div class="hidden md:flex space-x-6">
68
- <a href="#" class="hover:text-blue-200 font-medium">Dashboard</a>
69
- <a href="#" class="hover:text-blue-200 font-medium">Markets</a>
70
- <a href="#" class="hover:text-blue-200 font-medium">AI Advisor</a>
71
- <a href="#" class="hover:text-blue-200 font-medium">Portfolio</a>
72
- <a href="#" class="hover:text-blue-200 font-medium">News</a>
73
  </div>
74
  <div class="flex items-center space-x-4">
75
- <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md font-medium">
76
- <i class="fas fa-user mr-2"></i>Sign In
77
  </button>
78
- <button class="md:hidden" id="mobile-menu-button">
79
  <i class="fas fa-bars text-xl"></i>
80
  </button>
81
  </div>
82
  </div>
83
 
84
  <!-- Mobile Menu -->
85
- <div class="md:hidden hidden bg-blue-900" id="mobile-menu">
86
  <div class="px-2 pt-2 pb-3 space-y-1">
87
- <a href="#" class="block px-3 py-2 rounded-md text-white font-medium hover:bg-blue-800">Dashboard</a>
88
- <a href="#" class="block px-3 py-2 rounded-md text-white font-medium hover:bg-blue-800">Markets</a>
89
- <a href="#" class="block px-3 py-2 rounded-md text-white font-medium hover:bg-blue-800">AI Advisor</a>
90
- <a href="#" class="block px-3 py-2 rounded-md text-white font-medium hover:bg-blue-800">Portfolio</a>
91
- <a href="#" class="block px-3 py-2 rounded-md text-white font-medium hover:bg-blue-800">News</a>
92
  </div>
93
  </div>
94
  </nav>
95
 
96
  <!-- Market Ticker -->
97
- <div class="bg-gray-800 text-white py-2 overflow-hidden">
98
  <div class="ticker-tape whitespace-nowrap flex">
99
  <div class="flex space-x-8 mr-8">
100
- <span class="font-medium">NASDAQ: <span class="stock-up">12,345.67 <i class="fas fa-caret-up"></i> +1.23%</span></span>
101
- <span class="font-medium">S&P 500: <span class="stock-up">4,123.45 <i class="fas fa-caret-up"></i> +0.78%</span></span>
102
- <span class="font-medium">DOW: <span class="stock-down">33,456.78 <i class="fas fa-caret-down"></i> -0.45%</span></span>
103
- <span class="font-medium">BTC: <span class="stock-up">$29,123.45 <i class="fas fa-caret-up"></i> +3.21%</span></span>
104
- <span class="font-medium">ETH: <span class="stock-up">$1,923.45 <i class="fas fa-caret-up"></i> +2.67%</span></span>
105
- <span class="font-medium">Gold: <span class="stock-down">$1,923.45 <i class="fas fa-caret-down"></i> -0.23%</span></span>
106
- <span class="font-medium">Oil: <span class="stock-up">$76.45 <i class="fas fa-caret-up"></i> +1.12%</span></span>
107
  </div>
108
  <div class="flex space-x-8 mr-8">
109
- <span class="font-medium">NASDAQ: <span class="stock-up">12,345.67 <i class="fas fa-caret-up"></i> +1.23%</span></span>
110
- <span class="font-medium">S&P 500: <span class="stock-up">4,123.45 <i class="fas fa-caret-up"></i> +0.78%</span></span>
111
- <span class="font-medium">DOW: <span class="stock-down">33,456.78 <i class="fas fa-caret-down"></i> -0.45%</span></span>
112
- <span class="font-medium">BTC: <span class="stock-up">$29,123.45 <i class="fas fa-caret-up"></i> +3.21%</span></span>
113
- <span class="font-medium">ETH: <span class="stock-up">$1,923.45 <i class="fas fa-caret-up"></i> +2.67%</span></span>
114
- <span class="font-medium">Gold: <span class="stock-down">$1,923.45 <i class="fas fa-caret-down"></i> -0.23%</span></span>
115
- <span class="font-medium">Oil: <span class="stock-up">$76.45 <i class="fas fa-caret-up"></i> +1.12%</span></span>
116
  </div>
117
  </div>
118
  </div>
119
 
120
  <div class="flex flex-col md:flex-row">
121
  <!-- Sidebar -->
122
- <div class="w-full md:w-64 bg-gray-900 text-white sidebar overflow-y-auto h-screen sticky top-0">
123
- <div class="p-4">
124
- <div class="flex items-center space-x-2 mb-6">
125
- <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
126
- <i class="fas fa-user text-xl"></i>
127
  </div>
128
  <div>
129
- <p class="font-medium">John Doe</p>
130
- <p class="text-xs text-gray-400">Premium Member</p>
131
  </div>
132
  </div>
133
 
134
  <div class="mb-6">
135
- <p class="text-gray-400 uppercase text-xs font-bold mb-2">Portfolio</p>
136
  <div class="space-y-1">
137
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
138
- <i class="fas fa-chart-pie w-5"></i>
139
  <span>Overview</span>
140
  </a>
141
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
142
- <i class="fas fa-wallet w-5"></i>
143
  <span>Holdings</span>
144
  </a>
145
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
146
- <i class="fas fa-exchange-alt w-5"></i>
147
  <span>Transactions</span>
148
  </a>
149
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
150
- <i class="fas fa-bell w-5"></i>
151
  <span>Alerts</span>
152
  </a>
153
  </div>
154
  </div>
155
 
156
  <div class="mb-6">
157
- <p class="text-gray-400 uppercase text-xs font-bold mb-2">Research</p>
158
  <div class="space-y-1">
159
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
160
- <i class="fas fa-robot w-5"></i>
161
- <span>AI Advisor</span>
162
  </a>
163
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
164
- <i class="fas fa-chart-bar w-5"></i>
165
  <span>Stock Screener</span>
166
  </a>
167
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
168
- <i class="fas fa-balance-scale w-5"></i>
169
- <span>Compare Stocks</span>
170
  </a>
171
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
172
- <i class="fas fa-crystal-ball w-5"></i>
173
  <span>Forecasting</span>
174
  </a>
175
  </div>
176
  </div>
177
 
178
  <div class="mb-6">
179
- <p class="text-gray-400 uppercase text-xs font-bold mb-2">Trading</p>
180
  <div class="space-y-1">
181
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
182
- <i class="fas fa-trade-alt w-5"></i>
183
  <span>Trade Stocks</span>
184
  </a>
185
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
186
- <i class="fas fa-gamepad w-5"></i>
187
  <span>Paper Trading</span>
188
  </a>
189
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
190
- <i class="fas fa-cog w-5"></i>
191
- <span>Broker Settings</span>
192
  </a>
193
  </div>
194
  </div>
195
 
196
  <div class="mb-6">
197
- <p class="text-gray-400 uppercase text-xs font-bold mb-2">News & Education</p>
198
  <div class="space-y-1">
199
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
200
- <i class="fas fa-newspaper w-5"></i>
201
  <span>Market News</span>
202
  </a>
203
- <a href="#" class="flex items-center space-x-2 px-2 py-2 rounded hover:bg-gray-800">
204
- <i class="fas fa-graduation-cap w-5"></i>
205
- <span>Learning Center</span>
206
  </a>
207
  </div>
208
  </div>
@@ -210,368 +228,368 @@
210
  </div>
211
 
212
  <!-- Main Content -->
213
- <div class="flex-1 p-4 md:p-6">
214
  <!-- Dashboard Header -->
215
  <div class="mb-6">
216
- <h1 class="text-2xl md:text-3xl font-bold text-gray-800">Welcome back, John</h1>
217
- <p class="text-gray-600">Here's what's happening in your portfolio today</p>
218
  </div>
219
 
220
  <!-- Portfolio Summary Cards -->
221
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
222
- <div class="bg-white rounded-lg shadow p-4 card-hover transition-all duration-300">
223
  <div class="flex justify-between items-start">
224
  <div>
225
- <p class="text-gray-500 text-sm">Total Portfolio Value</p>
226
- <p class="text-2xl font-bold">$124,567.89</p>
227
  </div>
228
- <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">
229
- <i class="fas fa-caret-up mr-1"></i> 3.2% today
230
  </div>
231
  </div>
232
- <div class="mt-4">
233
- <canvas id="portfolioChart" height="60"></canvas>
234
  </div>
235
  </div>
236
 
237
- <div class="bg-white rounded-lg shadow p-4 card-hover transition-all duration-300">
238
  <div class="flex justify-between items-start">
239
  <div>
240
- <p class="text-gray-500 text-sm">Today's Gain/Loss</p>
241
- <p class="text-2xl font-bold stock-up">+$3,456.78</p>
242
  </div>
243
- <div class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">
244
- <i class="fas fa-caret-up mr-1"></i> 2.8%
245
  </div>
246
  </div>
247
- <div class="mt-4">
248
- <canvas id="dailyChart" height="60"></canvas>
249
  </div>
250
  </div>
251
 
252
- <div class="bg-white rounded-lg shadow p-4 card-hover transition-all duration-300">
253
  <div class="flex justify-between items-start">
254
  <div>
255
- <p class="text-gray-500 text-sm">YTD Performance</p>
256
- <p class="text-2xl font-bold stock-up">+$12,345.67</p>
257
  </div>
258
- <div class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">
259
- <i class="fas fa-caret-up mr-1"></i> 11.2%
260
  </div>
261
  </div>
262
- <div class="mt-4">
263
- <canvas id="ytdChart" height="60"></canvas>
264
  </div>
265
  </div>
266
 
267
- <div class="bg-white rounded-lg shadow p-4 card-hover transition-all duration-300">
268
  <div class="flex justify-between items-start">
269
  <div>
270
- <p class="text-gray-500 text-sm">Cash Available</p>
271
- <p class="text-2xl font-bold">$8,765.43</p>
272
  </div>
273
- <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">
274
- <i class="fas fa-dollar-sign mr-1"></i> Ready to trade
275
  </div>
276
  </div>
277
- <div class="mt-4 flex justify-between">
278
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
279
  <i class="fas fa-plus mr-1"></i> Add Funds
280
  </button>
281
- <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-3 py-1 rounded text-sm">
282
  <i class="fas fa-exchange-alt mr-1"></i> Transfer
283
  </button>
284
  </div>
285
  </div>
286
  </div>
287
 
288
- <!-- AI Advisor Recommendations -->
289
- <div class="bg-white rounded-lg shadow mb-6 overflow-hidden">
290
- <div class="gradient-bg px-4 py-3 flex justify-between items-center">
291
- <h2 class="text-xl font-bold text-white">
292
- <i class="fas fa-robot mr-2"></i> AI Advisor Recommendations
293
  </h2>
294
- <button class="text-white hover:text-blue-200">
295
- <i class="fas fa-ellipsis-h"></i>
296
  </button>
297
  </div>
298
- <div class="p-4">
299
- <div class="mb-4">
300
- <div class="flex items-center mb-2">
301
- <div class="w-3 h-3 rounded-full bg-blue-600 mr-2"></div>
302
- <p class="font-medium">Based on your Moderate Risk profile and Long-Term Growth goals</p>
303
  </div>
304
- <p class="text-gray-600 text-sm">Updated today at 9:42 AM with latest market data</p>
305
  </div>
306
 
307
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
308
  <!-- Recommendation 1 -->
309
- <div class="border rounded-lg p-4 hover:border-blue-500 transition-all duration-300">
310
- <div class="flex justify-between items-start mb-2">
311
  <div>
312
- <p class="font-bold text-lg">AAPL</p>
313
- <p class="text-gray-600 text-sm">Apple Inc.</p>
314
  </div>
315
- <div class="risk-medium px-2 py-1 rounded-full text-xs font-medium">Moderate Risk</div>
316
  </div>
317
- <div class="flex justify-between items-center mb-3">
318
- <p class="text-2xl font-bold">$189.37</p>
319
- <p class="stock-up text-sm"><i class="fas fa-caret-up"></i> +2.3% today</p>
320
  </div>
321
- <div class="mb-3">
322
- <canvas id="aaplChart" height="80"></canvas>
323
  </div>
324
- <div class="text-sm text-gray-600 mb-3">
325
- <p><i class="fas fa-check-circle text-green-500 mr-1"></i> Strong earnings growth</p>
326
- <p><i class="fas fa-check-circle text-green-500 mr-1"></i> High institutional ownership</p>
327
- <p><i class="fas fa-exclamation-triangle text-yellow-500 mr-1"></i> Slightly overvalued by P/E</p>
328
  </div>
329
  <div class="flex justify-between">
330
- <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
331
  <i class="fas fa-chart-line mr-1"></i> Analyze
332
  </button>
333
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
334
  <i class="fas fa-trade-alt mr-1"></i> Trade
335
  </button>
336
  </div>
337
  </div>
338
 
339
  <!-- Recommendation 2 -->
340
- <div class="border rounded-lg p-4 hover:border-blue-500 transition-all duration-300">
341
- <div class="flex justify-between items-start mb-2">
342
  <div>
343
- <p class="font-bold text-lg">MSFT</p>
344
- <p class="text-gray-600 text-sm">Microsoft Corp.</p>
345
  </div>
346
- <div class="risk-low px-2 py-1 rounded-full text-xs font-medium">Low Risk</div>
347
  </div>
348
- <div class="flex justify-between items-center mb-3">
349
- <p class="text-2xl font-bold">$345.21</p>
350
- <p class="stock-up text-sm"><i class="fas fa-caret-up"></i> +1.8% today</p>
351
  </div>
352
- <div class="mb-3">
353
- <canvas id="msftChart" height="80"></canvas>
354
  </div>
355
- <div class="text-sm text-gray-600 mb-3">
356
- <p><i class="fas fa-check-circle text-green-500 mr-1"></i> Cloud computing leader</p>
357
- <p><i class="fas fa-check-circle text-green-500 mr-1"></i> Consistent dividend growth</p>
358
- <p><i class="fas fa-check-circle text-green-500 mr-1"></i> Strong balance sheet</p>
359
  </div>
360
  <div class="flex justify-between">
361
- <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
362
  <i class="fas fa-chart-line mr-1"></i> Analyze
363
  </button>
364
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
365
  <i class="fas fa-trade-alt mr-1"></i> Trade
366
  </button>
367
  </div>
368
  </div>
369
 
370
  <!-- Recommendation 3 -->
371
- <div class="border rounded-lg p-4 hover:border-blue-500 transition-all duration-300">
372
- <div class="flex justify-between items-start mb-2">
373
  <div>
374
- <p class="font-bold text-lg">TSLA</p>
375
- <p class="text-gray-600 text-sm">Tesla Inc.</p>
376
  </div>
377
- <div class="risk-high px-2 py-1 rounded-full text-xs font-medium">High Risk</div>
378
  </div>
379
- <div class="flex justify-between items-center mb-3">
380
- <p class="text-2xl font-bold">$267.54</p>
381
- <p class="stock-down text-sm"><i class="fas fa-caret-down"></i> -1.2% today</p>
382
  </div>
383
- <div class="mb-3">
384
- <canvas id="tslaChart" height="80"></canvas>
385
  </div>
386
- <div class="text-sm text-gray-600 mb-3">
387
- <p><i class="fas fa-check-circle text-green-500 mr-1"></i> EV market leader</p>
388
- <p><i class="fas fa-exclamation-triangle text-yellow-500 mr-1"></i> High volatility</p>
389
- <p><i class="fas fa-exclamation-triangle text-yellow-500 mr-1"></i> Competitive pressures</p>
390
  </div>
391
  <div class="flex justify-between">
392
- <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
393
  <i class="fas fa-chart-line mr-1"></i> Analyze
394
  </button>
395
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
396
  <i class="fas fa-trade-alt mr-1"></i> Trade
397
  </button>
398
  </div>
399
  </div>
400
  </div>
401
 
402
- <div class="mt-4 text-center">
403
- <button class="text-blue-600 hover:text-blue-800 font-medium">
404
- <i class="fas fa-plus-circle mr-1"></i> Show more recommendations
405
  </button>
406
  </div>
407
  </div>
408
  </div>
409
 
410
  <!-- Portfolio Holdings and Market Data -->
411
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
412
  <!-- Portfolio Holdings -->
413
  <div class="lg:col-span-2">
414
- <div class="bg-white rounded-lg shadow mb-6 overflow-hidden">
415
- <div class="gradient-bg px-4 py-3 flex justify-between items-center">
416
- <h2 class="text-xl font-bold text-white">
417
- <i class="fas fa-chart-pie mr-2"></i> Your Portfolio Holdings
418
  </h2>
419
  <div class="flex space-x-2">
420
- <button class="text-white hover:text-blue-200">
421
- <i class="fas fa-filter"></i>
422
  </button>
423
- <button class="text-white hover:text-blue-200">
424
- <i class="fas fa-ellipsis-h"></i>
425
  </button>
426
  </div>
427
  </div>
428
- <div class="p-4">
429
- <div class="overflow-x-auto">
430
- <table class="min-w-full divide-y divide-gray-200">
431
- <thead class="bg-gray-50">
432
  <tr>
433
- <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
434
- <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
435
- <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shares</th>
436
- <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
437
- <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
438
- <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Today</th>
439
- <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
440
  </tr>
441
  </thead>
442
- <tbody class="bg-white divide-y divide-gray-200">
443
- <tr class="hover:bg-gray-50">
444
- <td class="px-4 py-3 whitespace-nowrap">
445
  <div class="flex items-center">
446
- <div class="flex-shrink-0 h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center">
447
- <span class="text-blue-800 font-medium">A</span>
448
  </div>
449
- <div class="ml-2">
450
- <div class="font-medium">AAPL</div>
451
  </div>
452
  </div>
453
  </td>
454
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Apple Inc.</td>
455
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">42</td>
456
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$189.37</td>
457
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$7,953.54</td>
458
- <td class="px-4 py-3 whitespace-nowrap">
459
- <span class="stock-up text-sm"><i class="fas fa-caret-up"></i> +2.3%</span>
460
  </td>
461
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
462
- <button class="text-blue-600 hover:text-blue-900 mr-2">
463
- <i class="fas fa-chart-line"></i>
464
  </button>
465
- <button class="text-blue-600 hover:text-blue-900">
466
- <i class="fas fa-trade-alt"></i>
467
  </button>
468
  </td>
469
  </tr>
470
- <tr class="hover:bg-gray-50">
471
- <td class="px-4 py-3 whitespace-nowrap">
472
  <div class="flex items-center">
473
- <div class="flex-shrink-0 h-8 w-8 bg-green-100 rounded-full flex items-center justify-center">
474
- <span class="text-green-800 font-medium">M</span>
475
  </div>
476
- <div class="ml-2">
477
- <div class="font-medium">MSFT</div>
478
  </div>
479
  </div>
480
  </td>
481
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Microsoft Corp.</td>
482
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">18</td>
483
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$345.21</td>
484
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$6,213.78</td>
485
- <td class="px-4 py-3 whitespace-nowrap">
486
- <span class="stock-up text-sm"><i class="fas fa-caret-up"></i> +1.8%</span>
487
  </td>
488
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
489
- <button class="text-blue-600 hover:text-blue-900 mr-2">
490
- <i class="fas fa-chart-line"></i>
491
  </button>
492
- <button class="text-blue-600 hover:text-blue-900">
493
- <i class="fas fa-trade-alt"></i>
494
  </button>
495
  </td>
496
  </tr>
497
- <tr class="hover:bg-gray-50">
498
- <td class="px-4 py-3 whitespace-nowrap">
499
  <div class="flex items-center">
500
- <div class="flex-shrink-0 h-8 w-8 bg-red-100 rounded-full flex items-center justify-center">
501
- <span class="text-red-800 font-medium">G</span>
502
  </div>
503
- <div class="ml-2">
504
- <div class="font-medium">GOOGL</div>
505
  </div>
506
  </div>
507
  </td>
508
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Alphabet Inc.</td>
509
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">8</td>
510
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$134.56</td>
511
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$1,076.48</td>
512
- <td class="px-4 py-3 whitespace-nowrap">
513
- <span class="stock-down text-sm"><i class="fas fa-caret-down"></i> -0.7%</span>
514
  </td>
515
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
516
- <button class="text-blue-600 hover:text-blue-900 mr-2">
517
- <i class="fas fa-chart-line"></i>
518
  </button>
519
- <button class="text-blue-600 hover:text-blue-900">
520
- <i class="fas fa-trade-alt"></i>
521
  </button>
522
  </td>
523
  </tr>
524
- <tr class="hover:bg-gray-50">
525
- <td class="px-4 py-3 whitespace-nowrap">
526
  <div class="flex items-center">
527
- <div class="flex-shrink-0 h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
528
- <span class="text-purple-800 font-medium">A</span>
529
  </div>
530
- <div class="ml-2">
531
- <div class="font-medium">AMZN</div>
532
  </div>
533
  </div>
534
  </td>
535
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Amazon.com Inc.</td>
536
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">5</td>
537
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$128.34</td>
538
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$641.70</td>
539
- <td class="px-4 py-3 whitespace-nowrap">
540
- <span class="stock-up text-sm"><i class="fas fa-caret-up"></i> +0.9%</span>
541
  </td>
542
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
543
- <button class="text-blue-600 hover:text-blue-900 mr-2">
544
- <i class="fas fa-chart-line"></i>
545
  </button>
546
- <button class="text-blue-600 hover:text-blue-900">
547
- <i class="fas fa-trade-alt"></i>
548
  </button>
549
  </td>
550
  </tr>
551
- <tr class="hover:bg-gray-50">
552
- <td class="px-4 py-3 whitespace-nowrap">
553
  <div class="flex items-center">
554
- <div class="flex-shrink-0 h-8 w-8 bg-yellow-100 rounded-full flex items-center justify-center">
555
- <span class="text-yellow-800 font-medium">T</span>
556
  </div>
557
- <div class="ml-2">
558
- <div class="font-medium">TSLA</div>
559
  </div>
560
  </div>
561
  </td>
562
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">Tesla Inc.</td>
563
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">12</td>
564
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$267.54</td>
565
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">$3,210.48</td>
566
- <td class="px-4 py-3 whitespace-nowrap">
567
- <span class="stock-down text-sm"><i class="fas fa-caret-down"></i> -1.2%</span>
568
  </td>
569
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
570
- <button class="text-blue-600 hover:text-blue-900 mr-2">
571
- <i class="fas fa-chart-line"></i>
572
  </button>
573
- <button class="text-blue-600 hover:text-blue-900">
574
- <i class="fas fa-trade-alt"></i>
575
  </button>
576
  </td>
577
  </tr>
@@ -579,15 +597,15 @@
579
  </table>
580
  </div>
581
 
582
- <div class="mt-4 flex justify-between items-center">
583
- <div class="text-sm text-gray-600">
584
- Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> holdings
585
  </div>
586
- <div class="flex space-x-2">
587
- <button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
588
  Previous
589
  </button>
590
- <button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
591
  Next
592
  </button>
593
  </div>
@@ -596,81 +614,81 @@
596
  </div>
597
 
598
  <!-- Market News -->
599
- <div class="bg-white rounded-lg shadow overflow-hidden">
600
- <div class="gradient-bg px-4 py-3 flex justify-between items-center">
601
- <h2 class="text-xl font-bold text-white">
602
- <i class="fas fa-newspaper mr-2"></i> Market News
603
  </h2>
604
- <button class="text-white hover:text-blue-200">
605
- <i class="fas fa-ellipsis-h"></i>
606
  </button>
607
  </div>
608
- <div class="p-4">
609
- <div class="space-y-4">
610
  <!-- News Item 1 -->
611
- <div class="flex items-start space-x-3 group cursor-pointer">
612
- <div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-md overflow-hidden">
613
  <img src="https://via.placeholder.com/80" alt="News thumbnail" class="w-full h-full object-cover">
614
  </div>
615
  <div class="flex-1 min-w-0">
616
- <p class="text-sm font-medium text-gray-900 group-hover:text-blue-600 truncate">
617
  Fed Signals More Rate Hikes Coming Despite Banking Turmoil
618
  </p>
619
- <p class="text-sm text-gray-500">
620
- The Federal Reserve raised interest rates by a quarter percentage point and signaled that at least one more hike is coming this year.
621
  </p>
622
- <div class="mt-1 flex items-center text-xs text-gray-500">
623
  <span>Bloomberg</span>
624
  <span class="mx-1">•</span>
625
- <span>2 hours ago</span>
626
  </div>
627
  </div>
628
  </div>
629
 
630
  <!-- News Item 2 -->
631
- <div class="flex items-start space-x-3 group cursor-pointer">
632
- <div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-md overflow-hidden">
633
  <img src="https://via.placeholder.com/80" alt="News thumbnail" class="w-full h-full object-cover">
634
  </div>
635
  <div class="flex-1 min-w-0">
636
- <p class="text-sm font-medium text-gray-900 group-hover:text-blue-600 truncate">
637
  Apple Unveils New MacBook Pro With M2 Chip
638
  </p>
639
- <p class="text-sm text-gray-500">
640
- Apple announced a new MacBook Pro featuring the M2 Pro and M2 Max chips, promising up to 20% faster performance.
641
  </p>
642
- <div class="mt-1 flex items-center text-xs text-gray-500">
643
  <span>CNBC</span>
644
  <span class="mx-1">•</span>
645
- <span>5 hours ago</span>
646
  </div>
647
  </div>
648
  </div>
649
 
650
  <!-- News Item 3 -->
651
- <div class="flex items-start space-x-3 group cursor-pointer">
652
- <div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-md overflow-hidden">
653
  <img src="https://via.placeholder.com/80" alt="News thumbnail" class="w-full h-full object-cover">
654
  </div>
655
  <div class="flex-1 min-w-0">
656
- <p class="text-sm font-medium text-gray-900 group-hover:text-blue-600 truncate">
657
  Microsoft's AI Push Drives Cloud Revenue Growth
658
  </p>
659
- <p class="text-sm text-gray-500">
660
- Microsoft reported better-than-expected earnings as its cloud computing business continued to grow, boosted by AI investments.
661
  </p>
662
- <div class="mt-1 flex items-center text-xs text-gray-500">
663
- <span>Wall Street Journal</span>
664
  <span class="mx-1">•</span>
665
- <span>8 hours ago</span>
666
  </div>
667
  </div>
668
  </div>
669
  </div>
670
 
671
- <div class="mt-4 text-center">
672
- <button class="text-blue-600 hover:text-blue-800 font-medium">
673
- <i class="fas fa-plus-circle mr-1"></i> Load more news
674
  </button>
675
  </div>
676
  </div>
@@ -678,35 +696,251 @@
678
  </div>
679
 
680
  <!-- Right Sidebar -->
681
- <div class="lg:col-span-1 space-y-6">
682
  <!-- Watchlist -->
683
- <div class="bg-white rounded-lg shadow overflow-hidden">
684
- <div class="gradient-bg px-4 py-3 flex justify-between items-center">
685
- <h2 class="text-xl font-bold text-white">
686
- <i class="fas fa-star mr-2"></i> Watchlist
687
  </h2>
688
- <button class="text-white hover:text-blue-200">
689
- <i class="fas fa-ellipsis-h"></i>
690
  </button>
691
  </div>
692
- <div class="p-4">
693
- <div class="mb-3">
694
  <div class="relative">
695
- <input type="text" placeholder="Search stocks..." class="w-full pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
696
- <div class="absolute left-3 top-2.5 text-gray-400">
697
- <i class="fas fa-search"></i>
698
  </div>
699
  </div>
700
  </div>
701
 
702
- <div class="space-y-3">
703
  <!-- Watchlist Item 1 -->
704
- <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded cursor-pointer">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
705
  <div>
706
- <p class="font-medium">NVDA</p>
707
- <p class="text-xs text-gray-500">NVIDIA Corp.</p>
708
  </div>
709
  <div class="text-right">
710
- <p class="font-medium">$275.43</p>
711
- <p class="text-xs stock-up
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
712
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Aladdin Mini | AI-Powered Investment Platform</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
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
  <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #e5e5e5;
16
+ }
17
+ .dark-bg {
18
+ background-color: #121212;
19
+ }
20
+ .darker-bg {
21
+ background-color: #0a0a0a;
22
+ }
23
+ .card-bg {
24
+ background-color: #1e1e1e;
25
+ }
26
+ .accent-bg {
27
+ background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
28
  }
29
  .card-hover:hover {
30
+ transform: translateY(-2px);
31
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
32
  }
33
  .stock-up {
34
  color: #10b981;
 
37
  color: #ef4444;
38
  }
39
  .risk-low {
40
+ background-color: rgba(16, 185, 129, 0.1);
41
  color: #10b981;
42
  }
43
  .risk-medium {
44
+ background-color: rgba(245, 158, 11, 0.1);
45
  color: #f59e0b;
46
  }
47
  .risk-high {
48
+ background-color: rgba(239, 68, 68, 0.1);
49
  color: #ef4444;
50
  }
51
+ .ticker-tape {
52
+ animation: ticker 30s linear infinite;
53
+ }
54
+ @keyframes ticker {
55
+ 0% { transform: translateX(0); }
56
+ 100% { transform: translateX(-50%); }
57
  }
58
+ .thin-scrollbar::-webkit-scrollbar {
59
+ width: 4px;
60
+ height: 4px;
61
  }
62
+ .thin-scrollbar::-webkit-scrollbar-track {
63
+ background: #1e1e1e;
64
  }
65
+ .thin-scrollbar::-webkit-scrollbar-thumb {
66
  background-color: #3b82f6;
67
  border-radius: 20px;
68
  }
69
+ .border-light {
70
+ border-color: #2e2e2e;
71
  }
72
+ .text-muted {
73
+ color: #a1a1a1;
 
74
  }
75
  </style>
76
  </head>
77
+ <body class="font-sans">
78
  <!-- Top Navigation -->
79
+ <nav class="darker-bg border-b border-light">
80
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
81
  <div class="flex items-center space-x-2">
82
+ <i class="fas fa-magic text-xl text-blue-400"></i>
83
+ <span class="text-xl font-semibold">Aladdin Mini</span>
84
  </div>
85
  <div class="hidden md:flex space-x-6">
86
+ <a href="#" class="hover:text-blue-400 font-medium">Dashboard</a>
87
+ <a href="#" class="hover:text-blue-400 font-medium">Markets</a>
88
+ <a href="#" class="hover:text-blue-400 font-medium">AI Genie</a>
89
+ <a href="#" class="hover:text-blue-400 font-medium">Portfolio</a>
90
+ <a href="#" class="hover:text-blue-400 font-medium">News</a>
91
  </div>
92
  <div class="flex items-center space-x-4">
93
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-1.5 rounded-md font-medium text-sm">
94
+ <i class="fas fa-user mr-1"></i>Sign In
95
  </button>
96
+ <button class="md:hidden text-gray-400" id="mobile-menu-button">
97
  <i class="fas fa-bars text-xl"></i>
98
  </button>
99
  </div>
100
  </div>
101
 
102
  <!-- Mobile Menu -->
103
+ <div class="md:hidden hidden darker-bg" id="mobile-menu">
104
  <div class="px-2 pt-2 pb-3 space-y-1">
105
+ <a href="#" class="block px-3 py-2 rounded-md font-medium hover:bg-gray-800">Dashboard</a>
106
+ <a href="#" class="block px-3 py-2 rounded-md font-medium hover:bg-gray-800">Markets</a>
107
+ <a href="#" class="block px-3 py-2 rounded-md font-medium hover:bg-gray-800">AI Genie</a>
108
+ <a href="#" class="block px-3 py-2 rounded-md font-medium hover:bg-gray-800">Portfolio</a>
109
+ <a href="#" class="block px-3 py-2 rounded-md font-medium hover:bg-gray-800">News</a>
110
  </div>
111
  </div>
112
  </nav>
113
 
114
  <!-- Market Ticker -->
115
+ <div class="darker-bg border-b border-light py-1.5 overflow-hidden">
116
  <div class="ticker-tape whitespace-nowrap flex">
117
  <div class="flex space-x-8 mr-8">
118
+ <span class="text-sm">NASDAQ: <span class="stock-up">12,345.67 <i class="fas fa-caret-up"></i> +1.23%</span></span>
119
+ <span class="text-sm">S&P 500: <span class="stock-up">4,123.45 <i class="fas fa-caret-up"></i> +0.78%</span></span>
120
+ <span class="text-sm">DOW: <span class="stock-down">33,456.78 <i class="fas fa-caret-down"></i> -0.45%</span></span>
121
+ <span class="text-sm">BTC: <span class="stock-up">$29,123.45 <i class="fas fa-caret-up"></i> +3.21%</span></span>
122
+ <span class="text-sm">ETH: <span class="stock-up">$1,923.45 <i class="fas fa-caret-up"></i> +2.67%</span></span>
123
+ <span class="text-sm">Gold: <span class="stock-down">$1,923.45 <i class="fas fa-caret-down"></i> -0.23%</span></span>
124
+ <span class="text-sm">Oil: <span class="stock-up">$76.45 <i class="fas fa-caret-up"></i> +1.12%</span></span>
125
  </div>
126
  <div class="flex space-x-8 mr-8">
127
+ <span class="text-sm">NASDAQ: <span class="stock-up">12,345.67 <i class="fas fa-caret-up"></i> +1.23%</span></span>
128
+ <span class="text-sm">S&P 500: <span class="stock-up">4,123.45 <i class="fas fa-caret-up"></i> +0.78%</span></span>
129
+ <span class="text-sm">DOW: <span class="stock-down">33,456.78 <i class="fas fa-caret-down"></i> -0.45%</span></span>
130
+ <span class="text-sm">BTC: <span class="stock-up">$29,123.45 <i class="fas fa-caret-up"></i> +3.21%</span></span>
131
+ <span class="text-sm">ETH: <span class="stock-up">$1,923.45 <i class="fas fa-caret-up"></i> +2.67%</span></span>
132
+ <span class="text-sm">Gold: <span class="stock-down">$1,923.45 <i class="fas fa-caret-down"></i> -0.23%</span></span>
133
+ <span class="text-sm">Oil: <span class="stock-up">$76.45 <i class="fas fa-caret-up"></i> +1.12%</span></span>
134
  </div>
135
  </div>
136
  </div>
137
 
138
  <div class="flex flex-col md:flex-row">
139
  <!-- Sidebar -->
140
+ <div class="w-full md:w-56 darker-bg text-gray-300 thin-scrollbar overflow-y-auto h-screen sticky top-0 border-r border-light">
141
+ <div class="p-3">
142
+ <div class="flex items-center space-x-2 mb-6 pt-2">
143
+ <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
144
+ <i class="fas fa-user text-sm"></i>
145
  </div>
146
  <div>
147
+ <p class="font-medium text-sm">John Doe</p>
148
+ <p class="text-xs text-muted">Premium Member</p>
149
  </div>
150
  </div>
151
 
152
  <div class="mb-6">
153
+ <p class="text-muted uppercase text-xs font-medium mb-2 tracking-wider">Portfolio</p>
154
  <div class="space-y-1">
155
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
156
+ <i class="fas fa-chart-pie w-4 text-center"></i>
157
  <span>Overview</span>
158
  </a>
159
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
160
+ <i class="fas fa-wallet w-4 text-center"></i>
161
  <span>Holdings</span>
162
  </a>
163
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
164
+ <i class="fas fa-exchange-alt w-4 text-center"></i>
165
  <span>Transactions</span>
166
  </a>
167
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
168
+ <i class="fas fa-bell w-4 text-center"></i>
169
  <span>Alerts</span>
170
  </a>
171
  </div>
172
  </div>
173
 
174
  <div class="mb-6">
175
+ <p class="text-muted uppercase text-xs font-medium mb-2 tracking-wider">Research</p>
176
  <div class="space-y-1">
177
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
178
+ <i class="fas fa-robot w-4 text-center"></i>
179
+ <span>AI Genie</span>
180
  </a>
181
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
182
+ <i class="fas fa-chart-bar w-4 text-center"></i>
183
  <span>Stock Screener</span>
184
  </a>
185
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
186
+ <i class="fas fa-balance-scale w-4 text-center"></i>
187
+ <span>Compare</span>
188
  </a>
189
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
190
+ <i class="fas fa-crystal-ball w-4 text-center"></i>
191
  <span>Forecasting</span>
192
  </a>
193
  </div>
194
  </div>
195
 
196
  <div class="mb-6">
197
+ <p class="text-muted uppercase text-xs font-medium mb-2 tracking-wider">Trading</p>
198
  <div class="space-y-1">
199
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
200
+ <i class="fas fa-trade-alt w-4 text-center"></i>
201
  <span>Trade Stocks</span>
202
  </a>
203
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
204
+ <i class="fas fa-gamepad w-4 text-center"></i>
205
  <span>Paper Trading</span>
206
  </a>
207
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
208
+ <i class="fas fa-cog w-4 text-center"></i>
209
+ <span>Settings</span>
210
  </a>
211
  </div>
212
  </div>
213
 
214
  <div class="mb-6">
215
+ <p class="text-muted uppercase text-xs font-medium mb-2 tracking-wider">News</p>
216
  <div class="space-y-1">
217
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
218
+ <i class="fas fa-newspaper w-4 text-center"></i>
219
  <span>Market News</span>
220
  </a>
221
+ <a href="#" class="flex items-center space-x-2 px-2 py-1.5 rounded text-sm hover:bg-gray-800">
222
+ <i class="fas fa-graduation-cap w-4 text-center"></i>
223
+ <span>Learning</span>
224
  </a>
225
  </div>
226
  </div>
 
228
  </div>
229
 
230
  <!-- Main Content -->
231
+ <div class="flex-1 p-4 md:p-5">
232
  <!-- Dashboard Header -->
233
  <div class="mb-6">
234
+ <h1 class="text-xl md:text-2xl font-semibold">Welcome back, John</h1>
235
+ <p class="text-muted text-sm">Here's your portfolio summary today</p>
236
  </div>
237
 
238
  <!-- Portfolio Summary Cards -->
239
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
240
+ <div class="card-bg rounded-lg border border-light p-3 card-hover transition-all duration-300">
241
  <div class="flex justify-between items-start">
242
  <div>
243
+ <p class="text-muted text-xs">Total Value</p>
244
+ <p class="text-xl font-semibold">$124,567.89</p>
245
  </div>
246
+ <div class="bg-blue-900 text-blue-400 px-2 py-0.5 rounded-full text-xs">
247
+ <i class="fas fa-caret-up mr-0.5"></i> 3.2%
248
  </div>
249
  </div>
250
+ <div class="mt-3">
251
+ <canvas id="portfolioChart" height="50"></canvas>
252
  </div>
253
  </div>
254
 
255
+ <div class="card-bg rounded-lg border border-light p-3 card-hover transition-all duration-300">
256
  <div class="flex justify-between items-start">
257
  <div>
258
+ <p class="text-muted text-xs">Today's P/L</p>
259
+ <p class="text-xl font-semibold stock-up">+$3,456.78</p>
260
  </div>
261
+ <div class="bg-green-900 text-green-400 px-2 py-0.5 rounded-full text-xs">
262
+ <i class="fas fa-caret-up mr-0.5"></i> 2.8%
263
  </div>
264
  </div>
265
+ <div class="mt-3">
266
+ <canvas id="dailyChart" height="50"></canvas>
267
  </div>
268
  </div>
269
 
270
+ <div class="card-bg rounded-lg border border-light p-3 card-hover transition-all duration-300">
271
  <div class="flex justify-between items-start">
272
  <div>
273
+ <p class="text-muted text-xs">YTD Performance</p>
274
+ <p class="text-xl font-semibold stock-up">+$12,345.67</p>
275
  </div>
276
+ <div class="bg-green-900 text-green-400 px-2 py-0.5 rounded-full text-xs">
277
+ <i class="fas fa-caret-up mr-0.5"></i> 11.2%
278
  </div>
279
  </div>
280
+ <div class="mt-3">
281
+ <canvas id="ytdChart" height="50"></canvas>
282
  </div>
283
  </div>
284
 
285
+ <div class="card-bg rounded-lg border border-light p-3 card-hover transition-all duration-300">
286
  <div class="flex justify-between items-start">
287
  <div>
288
+ <p class="text-muted text-xs">Cash Available</p>
289
+ <p class="text-xl font-semibold">$8,765.43</p>
290
  </div>
291
+ <div class="bg-blue-900 text-blue-400 px-2 py-0.5 rounded-full text-xs">
292
+ <i class="fas fa-dollar-sign mr-0.5"></i> Ready
293
  </div>
294
  </div>
295
+ <div class="mt-3 flex justify-between">
296
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded text-xs">
297
  <i class="fas fa-plus mr-1"></i> Add Funds
298
  </button>
299
+ <button class="border border-blue-600 text-blue-400 hover:bg-gray-800 px-2 py-1 rounded text-xs">
300
  <i class="fas fa-exchange-alt mr-1"></i> Transfer
301
  </button>
302
  </div>
303
  </div>
304
  </div>
305
 
306
+ <!-- AI Genie Recommendations -->
307
+ <div class="card-bg rounded-lg border border-light mb-5 overflow-hidden">
308
+ <div class="accent-bg px-4 py-2.5 flex justify-between items-center">
309
+ <h2 class="text-lg font-semibold">
310
+ <i class="fas fa-robot mr-1.5"></i> AI Genie Recommendations
311
  </h2>
312
+ <button class="text-blue-200 hover:text-white">
313
+ <i class="fas fa-ellipsis-h text-sm"></i>
314
  </button>
315
  </div>
316
+ <div class="p-3">
317
+ <div class="mb-3">
318
+ <div class="flex items-center mb-1">
319
+ <div class="w-2 h-2 rounded-full bg-blue-400 mr-1.5"></div>
320
+ <p class="text-sm">Moderate Risk • Long-Term Growth</p>
321
  </div>
322
+ <p class="text-muted text-xs">Updated today at 9:42 AM</p>
323
  </div>
324
 
325
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
326
  <!-- Recommendation 1 -->
327
+ <div class="border border-light rounded p-3 hover:border-blue-500 transition-all duration-300">
328
+ <div class="flex justify-between items-start mb-1">
329
  <div>
330
+ <p class="font-semibold">AAPL</p>
331
+ <p class="text-muted text-xs">Apple Inc.</p>
332
  </div>
333
+ <div class="risk-medium px-1.5 py-0.5 rounded-full text-xs">Moderate</div>
334
  </div>
335
+ <div class="flex justify-between items-center mb-2">
336
+ <p class="text-lg font-semibold">$189.37</p>
337
+ <p class="stock-up text-xs"><i class="fas fa-caret-up"></i> +2.3%</p>
338
  </div>
339
+ <div class="mb-2">
340
+ <canvas id="aaplChart" height="60"></canvas>
341
  </div>
342
+ <div class="text-xs text-muted mb-2">
343
+ <p><i class="fas fa-check-circle text-green-400 mr-1"></i> Strong earnings</p>
344
+ <p><i class="fas fa-check-circle text-green-400 mr-1"></i> High ownership</p>
345
+ <p><i class="fas fa-exclamation-triangle text-yellow-400 mr-1"></i> Slightly overvalued</p>
346
  </div>
347
  <div class="flex justify-between">
348
+ <button class="text-blue-400 hover:text-blue-300 text-xs">
349
  <i class="fas fa-chart-line mr-1"></i> Analyze
350
  </button>
351
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-0.5 rounded text-xs">
352
  <i class="fas fa-trade-alt mr-1"></i> Trade
353
  </button>
354
  </div>
355
  </div>
356
 
357
  <!-- Recommendation 2 -->
358
+ <div class="border border-light rounded p-3 hover:border-blue-500 transition-all duration-300">
359
+ <div class="flex justify-between items-start mb-1">
360
  <div>
361
+ <p class="font-semibold">MSFT</p>
362
+ <p class="text-muted text-xs">Microsoft Corp.</p>
363
  </div>
364
+ <div class="risk-low px-1.5 py-0.5 rounded-full text-xs">Low</div>
365
  </div>
366
+ <div class="flex justify-between items-center mb-2">
367
+ <p class="text-lg font-semibold">$345.21</p>
368
+ <p class="stock-up text-xs"><i class="fas fa-caret-up"></i> +1.8%</p>
369
  </div>
370
+ <div class="mb-2">
371
+ <canvas id="msftChart" height="60"></canvas>
372
  </div>
373
+ <div class="text-xs text-muted mb-2">
374
+ <p><i class="fas fa-check-circle text-green-400 mr-1"></i> Cloud leader</p>
375
+ <p><i class="fas fa-check-circle text-green-400 mr-1"></i> Dividend growth</p>
376
+ <p><i class="fas fa-check-circle text-green-400 mr-1"></i> Strong balance</p>
377
  </div>
378
  <div class="flex justify-between">
379
+ <button class="text-blue-400 hover:text-blue-300 text-xs">
380
  <i class="fas fa-chart-line mr-1"></i> Analyze
381
  </button>
382
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-0.5 rounded text-xs">
383
  <i class="fas fa-trade-alt mr-1"></i> Trade
384
  </button>
385
  </div>
386
  </div>
387
 
388
  <!-- Recommendation 3 -->
389
+ <div class="border border-light rounded p-3 hover:border-blue-500 transition-all duration-300">
390
+ <div class="flex justify-between items-start mb-1">
391
  <div>
392
+ <p class="font-semibold">TSLA</p>
393
+ <p class="text-muted text-xs">Tesla Inc.</p>
394
  </div>
395
+ <div class="risk-high px-1.5 py-0.5 rounded-full text-xs">High</div>
396
  </div>
397
+ <div class="flex justify-between items-center mb-2">
398
+ <p class="text-lg font-semibold">$267.54</p>
399
+ <p class="stock-down text-xs"><i class="fas fa-caret-down"></i> -1.2%</p>
400
  </div>
401
+ <div class="mb-2">
402
+ <canvas id="tslaChart" height="60"></canvas>
403
  </div>
404
+ <div class="text-xs text-muted mb-2">
405
+ <p><i class="fas fa-check-circle text-green-400 mr-1"></i> EV leader</p>
406
+ <p><i class="fas fa-exclamation-triangle text-yellow-400 mr-1"></i> High volatility</p>
407
+ <p><i class="fas fa-exclamation-triangle text-yellow-400 mr-1"></i> Competition</p>
408
  </div>
409
  <div class="flex justify-between">
410
+ <button class="text-blue-400 hover:text-blue-300 text-xs">
411
  <i class="fas fa-chart-line mr-1"></i> Analyze
412
  </button>
413
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-0.5 rounded text-xs">
414
  <i class="fas fa-trade-alt mr-1"></i> Trade
415
  </button>
416
  </div>
417
  </div>
418
  </div>
419
 
420
+ <div class="mt-3 text-center">
421
+ <button class="text-blue-400 hover:text-blue-300 text-sm">
422
+ <i class="fas fa-plus-circle mr-1"></i> Show more
423
  </button>
424
  </div>
425
  </div>
426
  </div>
427
 
428
  <!-- Portfolio Holdings and Market Data -->
429
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
430
  <!-- Portfolio Holdings -->
431
  <div class="lg:col-span-2">
432
+ <div class="card-bg rounded-lg border border-light mb-4 overflow-hidden">
433
+ <div class="accent-bg px-4 py-2.5 flex justify-between items-center">
434
+ <h2 class="text-lg font-semibold">
435
+ <i class="fas fa-chart-pie mr-1.5"></i> Portfolio Holdings
436
  </h2>
437
  <div class="flex space-x-2">
438
+ <button class="text-blue-200 hover:text-white">
439
+ <i class="fas fa-filter text-sm"></i>
440
  </button>
441
+ <button class="text-blue-200 hover:text-white">
442
+ <i class="fas fa-ellipsis-h text-sm"></i>
443
  </button>
444
  </div>
445
  </div>
446
+ <div class="p-3">
447
+ <div class="overflow-x-auto thin-scrollbar">
448
+ <table class="min-w-full divide-y divide-gray-800">
449
+ <thead>
450
  <tr>
451
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-muted uppercase tracking-wider">Symbol</th>
452
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-muted uppercase tracking-wider">Name</th>
453
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-muted uppercase tracking-wider">Shares</th>
454
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-muted uppercase tracking-wider">Price</th>
455
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-muted uppercase tracking-wider">Value</th>
456
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-muted uppercase tracking-wider">Today</th>
457
+ <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-muted uppercase tracking-wider">Actions</th>
458
  </tr>
459
  </thead>
460
+ <tbody class="divide-y divide-gray-800">
461
+ <tr class="hover:bg-gray-800">
462
+ <td class="px-3 py-2 whitespace-nowrap">
463
  <div class="flex items-center">
464
+ <div class="flex-shrink-0 h-6 w-6 bg-blue-900 rounded-full flex items-center justify-center">
465
+ <span class="text-blue-400 text-xs font-medium">A</span>
466
  </div>
467
+ <div class="ml-1.5">
468
+ <div class="text-sm font-medium">AAPL</div>
469
  </div>
470
  </div>
471
  </td>
472
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-muted">Apple Inc.</td>
473
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">42</td>
474
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$189.37</td>
475
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$7,953.54</td>
476
+ <td class="px-3 py-2 whitespace-nowrap">
477
+ <span class="stock-up text-xs"><i class="fas fa-caret-up"></i> +2.3%</span>
478
  </td>
479
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">
480
+ <button class="text-blue-400 hover:text-blue-300 mr-1">
481
+ <i class="fas fa-chart-line text-sm"></i>
482
  </button>
483
+ <button class="text-blue-400 hover:text-blue-300">
484
+ <i class="fas fa-trade-alt text-sm"></i>
485
  </button>
486
  </td>
487
  </tr>
488
+ <tr class="hover:bg-gray-800">
489
+ <td class="px-3 py-2 whitespace-nowrap">
490
  <div class="flex items-center">
491
+ <div class="flex-shrink-0 h-6 w-6 bg-green-900 rounded-full flex items-center justify-center">
492
+ <span class="text-green-400 text-xs font-medium">M</span>
493
  </div>
494
+ <div class="ml-1.5">
495
+ <div class="text-sm font-medium">MSFT</div>
496
  </div>
497
  </div>
498
  </td>
499
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-muted">Microsoft Corp.</td>
500
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">18</td>
501
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$345.21</td>
502
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$6,213.78</td>
503
+ <td class="px-3 py-2 whitespace-nowrap">
504
+ <span class="stock-up text-xs"><i class="fas fa-caret-up"></i> +1.8%</span>
505
  </td>
506
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">
507
+ <button class="text-blue-400 hover:text-blue-300 mr-1">
508
+ <i class="fas fa-chart-line text-sm"></i>
509
  </button>
510
+ <button class="text-blue-400 hover:text-blue-300">
511
+ <i class="fas fa-trade-alt text-sm"></i>
512
  </button>
513
  </td>
514
  </tr>
515
+ <tr class="hover:bg-gray-800">
516
+ <td class="px-3 py-2 whitespace-nowrap">
517
  <div class="flex items-center">
518
+ <div class="flex-shrink-0 h-6 w-6 bg-red-900 rounded-full flex items-center justify-center">
519
+ <span class="text-red-400 text-xs font-medium">G</span>
520
  </div>
521
+ <div class="ml-1.5">
522
+ <div class="text-sm font-medium">GOOGL</div>
523
  </div>
524
  </div>
525
  </td>
526
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-muted">Alphabet Inc.</td>
527
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">8</td>
528
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$134.56</td>
529
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$1,076.48</td>
530
+ <td class="px-3 py-2 whitespace-nowrap">
531
+ <span class="stock-down text-xs"><i class="fas fa-caret-down"></i> -0.7%</span>
532
  </td>
533
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">
534
+ <button class="text-blue-400 hover:text-blue-300 mr-1">
535
+ <i class="fas fa-chart-line text-sm"></i>
536
  </button>
537
+ <button class="text-blue-400 hover:text-blue-300">
538
+ <i class="fas fa-trade-alt text-sm"></i>
539
  </button>
540
  </td>
541
  </tr>
542
+ <tr class="hover:bg-gray-800">
543
+ <td class="px-3 py-2 whitespace-nowrap">
544
  <div class="flex items-center">
545
+ <div class="flex-shrink-0 h-6 w-6 bg-purple-900 rounded-full flex items-center justify-center">
546
+ <span class="text-purple-400 text-xs font-medium">A</span>
547
  </div>
548
+ <div class="ml-1.5">
549
+ <div class="text-sm font-medium">AMZN</div>
550
  </div>
551
  </div>
552
  </td>
553
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-muted">Amazon.com Inc.</td>
554
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">5</td>
555
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$128.34</td>
556
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$641.70</td>
557
+ <td class="px-3 py-2 whitespace-nowrap">
558
+ <span class="stock-up text-xs"><i class="fas fa-caret-up"></i> +0.9%</span>
559
  </td>
560
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">
561
+ <button class="text-blue-400 hover:text-blue-300 mr-1">
562
+ <i class="fas fa-chart-line text-sm"></i>
563
  </button>
564
+ <button class="text-blue-400 hover:text-blue-300">
565
+ <i class="fas fa-trade-alt text-sm"></i>
566
  </button>
567
  </td>
568
  </tr>
569
+ <tr class="hover:bg-gray-800">
570
+ <td class="px-3 py-2 whitespace-nowrap">
571
  <div class="flex items-center">
572
+ <div class="flex-shrink-0 h-6 w-6 bg-yellow-900 rounded-full flex items-center justify-center">
573
+ <span class="text-yellow-400 text-xs font-medium">T</span>
574
  </div>
575
+ <div class="ml-1.5">
576
+ <div class="text-sm font-medium">TSLA</div>
577
  </div>
578
  </div>
579
  </td>
580
+ <td class="px-3 py-2 whitespace-nowrap text-sm text-muted">Tesla Inc.</td>
581
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">12</td>
582
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$267.54</td>
583
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">$3,210.48</td>
584
+ <td class="px-3 py-2 whitespace-nowrap">
585
+ <span class="stock-down text-xs"><i class="fas fa-caret-down"></i> -1.2%</span>
586
  </td>
587
+ <td class="px-3 py-2 whitespace-nowrap text-sm font-medium">
588
+ <button class="text-blue-400 hover:text-blue-300 mr-1">
589
+ <i class="fas fa-chart-line text-sm"></i>
590
  </button>
591
+ <button class="text-blue-400 hover:text-blue-300">
592
+ <i class="fas fa-trade-alt text-sm"></i>
593
  </button>
594
  </td>
595
  </tr>
 
597
  </table>
598
  </div>
599
 
600
+ <div class="mt-3 flex justify-between items-center">
601
+ <div class="text-xs text-muted">
602
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span>
603
  </div>
604
+ <div class="flex space-x-1">
605
+ <button class="px-2 py-0.5 border border-light rounded text-xs font-medium hover:bg-gray-800">
606
  Previous
607
  </button>
608
+ <button class="px-2 py-0.5 border border-light rounded text-xs font-medium hover:bg-gray-800">
609
  Next
610
  </button>
611
  </div>
 
614
  </div>
615
 
616
  <!-- Market News -->
617
+ <div class="card-bg rounded-lg border border-light overflow-hidden">
618
+ <div class="accent-bg px-4 py-2.5 flex justify-between items-center">
619
+ <h2 class="text-lg font-semibold">
620
+ <i class="fas fa-newspaper mr-1.5"></i> Market News
621
  </h2>
622
+ <button class="text-blue-200 hover:text-white">
623
+ <i class="fas fa-ellipsis-h text-sm"></i>
624
  </button>
625
  </div>
626
+ <div class="p-3">
627
+ <div class="space-y-3">
628
  <!-- News Item 1 -->
629
+ <div class="flex items-start space-x-2 group cursor-pointer">
630
+ <div class="flex-shrink-0 w-12 h-12 bg-gray-800 rounded overflow-hidden">
631
  <img src="https://via.placeholder.com/80" alt="News thumbnail" class="w-full h-full object-cover">
632
  </div>
633
  <div class="flex-1 min-w-0">
634
+ <p class="text-sm font-medium group-hover:text-blue-400 truncate">
635
  Fed Signals More Rate Hikes Coming Despite Banking Turmoil
636
  </p>
637
+ <p class="text-xs text-muted">
638
+ The Federal Reserve raised interest rates by a quarter percentage point...
639
  </p>
640
+ <div class="mt-0.5 flex items-center text-2xs text-muted">
641
  <span>Bloomberg</span>
642
  <span class="mx-1">•</span>
643
+ <span>2h ago</span>
644
  </div>
645
  </div>
646
  </div>
647
 
648
  <!-- News Item 2 -->
649
+ <div class="flex items-start space-x-2 group cursor-pointer">
650
+ <div class="flex-shrink-0 w-12 h-12 bg-gray-800 rounded overflow-hidden">
651
  <img src="https://via.placeholder.com/80" alt="News thumbnail" class="w-full h-full object-cover">
652
  </div>
653
  <div class="flex-1 min-w-0">
654
+ <p class="text-sm font-medium group-hover:text-blue-400 truncate">
655
  Apple Unveils New MacBook Pro With M2 Chip
656
  </p>
657
+ <p class="text-xs text-muted">
658
+ Apple announced a new MacBook Pro featuring the M2 Pro and M2 Max chips...
659
  </p>
660
+ <div class="mt-0.5 flex items-center text-2xs text-muted">
661
  <span>CNBC</span>
662
  <span class="mx-1">•</span>
663
+ <span>5h ago</span>
664
  </div>
665
  </div>
666
  </div>
667
 
668
  <!-- News Item 3 -->
669
+ <div class="flex items-start space-x-2 group cursor-pointer">
670
+ <div class="flex-shrink-0 w-12 h-12 bg-gray-800 rounded overflow-hidden">
671
  <img src="https://via.placeholder.com/80" alt="News thumbnail" class="w-full h-full object-cover">
672
  </div>
673
  <div class="flex-1 min-w-0">
674
+ <p class="text-sm font-medium group-hover:text-blue-400 truncate">
675
  Microsoft's AI Push Drives Cloud Revenue Growth
676
  </p>
677
+ <p class="text-xs text-muted">
678
+ Microsoft reported better-than-expected earnings as its cloud computing...
679
  </p>
680
+ <div class="mt-0.5 flex items-center text-2xs text-muted">
681
+ <span>WSJ</span>
682
  <span class="mx-1">•</span>
683
+ <span>8h ago</span>
684
  </div>
685
  </div>
686
  </div>
687
  </div>
688
 
689
+ <div class="mt-3 text-center">
690
+ <button class="text-blue-400 hover:text-blue-300 text-sm">
691
+ <i class="fas fa-plus-circle mr-1"></i> Load more
692
  </button>
693
  </div>
694
  </div>
 
696
  </div>
697
 
698
  <!-- Right Sidebar -->
699
+ <div class="lg:col-span-1 space-y-4">
700
  <!-- Watchlist -->
701
+ <div class="card-bg rounded-lg border border-light overflow-hidden">
702
+ <div class="accent-bg px-4 py-2.5 flex justify-between items-center">
703
+ <h2 class="text-lg font-semibold">
704
+ <i class="fas fa-star mr-1.5"></i> Watchlist
705
  </h2>
706
+ <button class="text-blue-200 hover:text-white">
707
+ <i class="fas fa-ellipsis-h text-sm"></i>
708
  </button>
709
  </div>
710
+ <div class="p-3">
711
+ <div class="mb-2">
712
  <div class="relative">
713
+ <input type="text" placeholder="Search stocks..." class="w-full pl-8 pr-3 py-1.5 bg-gray-800 border border-light rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
714
+ <div class="absolute left-2.5 top-1.5 text-muted">
715
+ <i class="fas fa-search text-sm"></i>
716
  </div>
717
  </div>
718
  </div>
719
 
720
+ <div class="space-y-2">
721
  <!-- Watchlist Item 1 -->
722
+ <div class="flex justify-between items-center p-1.5 hover:bg-gray-800 rounded cursor-pointer">
723
+ <div>
724
+ <p class="font-medium text-sm">NVDA</p>
725
+ <p class="text-2xs text-muted">NVIDIA Corp.</p>
726
+ </div>
727
+ <div class="text-right">
728
+ <p class="font-medium text-sm">$275.43</p>
729
+ <p class="stock-up text-2xs"><i class="fas fa-caret-up"></i> +3.5%</p>
730
+ </div>
731
+ </div>
732
+
733
+ <!-- Watchlist Item 2 -->
734
+ <div class="flex justify-between items-center p-1.5 hover:bg-gray-800 rounded cursor-pointer">
735
+ <div>
736
+ <p class="font-medium text-sm">META</p>
737
+ <p class="text-2xs text-muted">Meta Platforms</p>
738
+ </div>
739
+ <div class="text-right">
740
+ <p class="font-medium text-sm">$298.76</p>
741
+ <p class="stock-up text-2xs"><i class="fas fa-caret-up"></i> +1.8%</p>
742
+ </div>
743
+ </div>
744
+
745
+ <!-- Watchlist Item 3 -->
746
+ <div class="flex justify-between items-center p-1.5 hover:bg-gray-800 rounded cursor-pointer">
747
+ <div>
748
+ <p class="font-medium text-sm">JPM</p>
749
+ <p class="text-2xs text-muted">JPMorgan Chase</p>
750
+ </div>
751
+ <div class="text-right">
752
+ <p class="font-medium text-sm">$145.32</p>
753
+ <p class="stock-down text-2xs"><i class="fas fa-caret-down"></i> -0.7%</p>
754
+ </div>
755
+ </div>
756
+
757
+ <!-- Watchlist Item 4 -->
758
+ <div class="flex justify-between items-center p-1.5 hover:bg-gray-800 rounded cursor-pointer">
759
+ <div>
760
+ <p class="font-medium text-sm">DIS</p>
761
+ <p class="text-2xs text-muted">Disney</p>
762
+ </div>
763
+ <div class="text-right">
764
+ <p class="font-medium text-sm">$92.45</p>
765
+ <p class="stock-up text-2xs"><i class="fas fa-caret-up"></i> +0.9%</p>
766
+ </div>
767
+ </div>
768
+
769
+ <!-- Watchlist Item 5 -->
770
+ <div class="flex justify-between items-center p-1.5 hover:bg-gray-800 rounded cursor-pointer">
771
  <div>
772
+ <p class="font-medium text-sm">COIN</p>
773
+ <p class="text-2xs text-muted">Coinbase</p>
774
  </div>
775
  <div class="text-right">
776
+ <p class="font-medium text-sm">$87.21</p>
777
+ <p class="stock-down text-2xs"><i class="fas fa-caret-down"></i> -2.3%</p>
778
+ </div>
779
+ </div>
780
+ </div>
781
+
782
+ <div class="mt-2 text-center">
783
+ <button class="text-blue-400 hover:text-blue-300 text-xs">
784
+ <i class="fas fa-plus mr-1"></i> Add to watchlist
785
+ </button>
786
+ </div>
787
+ </div>
788
+ </div>
789
+
790
+ <!-- Quick Trade -->
791
+ <div class="card-bg rounded-lg border border-light overflow-hidden">
792
+ <div class="accent-bg px-4 py-2.5 flex justify-between items-center">
793
+ <h2 class="text-lg font-semibold">
794
+ <i class="fas fa-bolt mr-1.5"></i> Quick Trade
795
+ </h2>
796
+ </div>
797
+ <div class="p-3">
798
+ <div class="mb-3">
799
+ <label class="block text-xs text-muted mb-1">Symbol</label>
800
+ <div class="relative">
801
+ <input type="text" placeholder="e.g. AAPL" class="w-full pl-3 pr-8 py-1.5 bg-gray-800 border border-light rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
802
+ <div class="absolute right-2 top-1.5 text-muted">
803
+ <i class="fas fa-search text-xs"></i>
804
+ </div>
805
+ </div>
806
+ </div>
807
+
808
+ <div class="grid grid-cols-2 gap-2 mb-3">
809
+ <div>
810
+ <label class="block text-xs text-muted mb-1">Action</label>
811
+ <select class="w-full bg-gray-800 border border-light rounded text-sm p-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500">
812
+ <option>Buy</option>
813
+ <option>Sell</option>
814
+ </select>
815
+ </div>
816
+ <div>
817
+ <label class="block text-xs text-muted mb-1">Shares</label>
818
+ <input type="number" placeholder="0" class="w-full bg-gray-800 border border-light rounded text-sm p-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500">
819
+ </div>
820
+ </div>
821
+
822
+ <div class="mb-3">
823
+ <label class="block text-xs text-muted mb-1">Order Type</label>
824
+ <select class="w-full bg-gray-800 border border-light rounded text-sm p-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500">
825
+ <option>Market</option>
826
+ <option>Limit</option>
827
+ <option>Stop</option>
828
+ </select>
829
+ </div>
830
+
831
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-1.5 rounded text-sm font-medium">
832
+ <i class="fas fa-paper-plane mr-1"></i> Place Order
833
+ </button>
834
+ </div>
835
+ </div>
836
+
837
+ <!-- Market Overview -->
838
+ <div class="card-bg rounded-lg border border-light overflow-hidden">
839
+ <div class="accent-bg px-4 py-2.5 flex justify-between items-center">
840
+ <h2 class="text-lg font-semibold">
841
+ <i class="fas fa-globe mr-1.5"></i> Market Overview
842
+ </h2>
843
+ </div>
844
+ <div class="p-3">
845
+ <div class="space-y-3">
846
+ <!-- Market Item 1 -->
847
+ <div>
848
+ <div class="flex justify-between items-center mb-1">
849
+ <span class="text-sm font-medium">S&P 500</span>
850
+ <span class="text-sm font-medium">4,123.45</span>
851
+ </div>
852
+ <div class="w-full bg-gray-800 rounded-full h-1">
853
+ <div class="bg-green-400 h-1 rounded-full" style="width: 78%"></div>
854
+ </div>
855
+ <div class="flex justify-between text-xs text-muted mt-0.5">
856
+ <span>52W Low: 3,491</span>
857
+ <span class="stock-up">+0.78%</span>
858
+ </div>
859
+ </div>
860
+
861
+ <!-- Market Item 2 -->
862
+ <div>
863
+ <div class="flex justify-between items-center mb-1">
864
+ <span class="text-sm font-medium">NASDAQ</span>
865
+ <span class="text-sm font-medium">12,345.67</span>
866
+ </div>
867
+ <div class="w-full bg-gray-800 rounded-full h-1">
868
+ <div class="bg-green-400 h-1 rounded-full" style="width: 65%"></div>
869
+ </div>
870
+ <div class="flex justify-between text-xs text-muted mt-0.5">
871
+ <span>52W Low: 10,213</span>
872
+ <span class="stock-up">+1.23%</span>
873
+ </div>
874
+ </div>
875
+
876
+ <!-- Market Item 3 -->
877
+ <div>
878
+ <div class="flex justify-between items-center mb-1">
879
+ <span class="text-sm font-medium">DOW</span>
880
+ <span class="text-sm font-medium">33,456.78</span>
881
+ </div>
882
+ <div class="w-full bg-gray-800 rounded-full h-1">
883
+ <div class="bg-red-400 h-1 rounded-full" style="width: 42%"></div>
884
+ </div>
885
+ <div class="flex justify-between text-xs text-muted mt-0.5">
886
+ <span>52W Low: 28,764</span>
887
+ <span class="stock-down">-0.45%</span>
888
+ </div>
889
+ </div>
890
+
891
+ <!-- Market Item 4 -->
892
+ <div>
893
+ <div class="flex justify-between items-center mb-1">
894
+ <span class="text-sm font-medium">Bitcoin</span>
895
+ <span class="text-sm font-medium">$29,123.45</span>
896
+ </div>
897
+ <div class="w-full bg-gray-800 rounded-full h-1">
898
+ <div class="bg-green-400 h-1 rounded-full" style="width: 58%"></div>
899
+ </div>
900
+ <div class="flex justify-between text-xs text-muted mt-0.5">
901
+ <span>52W Low: $15,480</span>
902
+ <span class="stock-up">+3.21%</span>
903
+ </div>
904
+ </div>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ </div>
909
+ </div>
910
+ </div>
911
+ </div>
912
+
913
+ <script>
914
+ // Mobile menu toggle
915
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
916
+ const menu = document.getElementById('mobile-menu');
917
+ menu.classList.toggle('hidden');
918
+ });
919
+
920
+ // Chart configurations
921
+ const chartOptions = {
922
+ responsive: true,
923
+ maintainAspectRatio: false,
924
+ plugins: {
925
+ legend: {
926
+ display: false
927
+ }
928
+ },
929
+ scales: {
930
+ x: {
931
+ display: false,
932
+ grid: {
933
+ display: false
934
+ }
935
+ },
936
+ y: {
937
+ display: false,
938
+ grid: {
939
+ display: false
940
+ }
941
+ }
942
+ },
943
+ elements: {
944
+ line: {
945
+
946
  </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ rename website to aladdin mini and make ui interface dark theme and sleek and use mimnamilist design and fonts