Hugging Face's logo

Spaces:
Gavin-yang
/
gavin
Running

App Files Community
Gavin-yang commited on
Commit
98dd25f
·
verified ·
1 Parent(s): f57ed3f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +675 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gavin
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: gavin
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,675 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Financial Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background: linear-gradient(135deg, #0f0f13 0%, #1a1a24 100%);
15
+ min-height: 100vh;
16
+ overflow-x: auto;
17
+ }
18
+
19
+ .dashboard-container {
20
+ backdrop-filter: blur(10px);
21
+ }
22
+
23
+ .panel {
24
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
25
+ background: rgba(30, 30, 40, 0.7);
26
+ border: 1px solid rgba(255, 255, 255, 0.05);
27
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
28
+ backdrop-filter: blur(8px);
29
+ overflow: hidden;
30
+ position: relative;
31
+ height: 420px; /* Increased height */
32
+ }
33
+
34
+ .panel:hover {
35
+ background: rgba(40, 40, 50, 0.8);
36
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
37
+ }
38
+
39
+ .panel::before {
40
+ content: '';
41
+ position: absolute;
42
+ top: 0;
43
+ left: 0;
44
+ right: 0;
45
+ height: 1px;
46
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
47
+ }
48
+
49
+ .panel::after {
50
+ content: '';
51
+ position: absolute;
52
+ bottom: 0;
53
+ left: 0;
54
+ right: 0;
55
+ height: 1px;
56
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
57
+ }
58
+
59
+ .panel.active {
60
+ background: rgba(45, 45, 60, 0.85);
61
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
62
+ }
63
+
64
+ .panel.active::before {
65
+ background: linear-gradient(90deg, transparent, rgba(100, 150, 255, 0.3), transparent);
66
+ }
67
+
68
+ .vertical-text {
69
+ writing-mode: vertical-rl;
70
+ text-orientation: mixed;
71
+ }
72
+
73
+ .content {
74
+ opacity: 0;
75
+ transition: opacity 0.3s ease;
76
+ pointer-events: none;
77
+ position: absolute;
78
+ top: 0;
79
+ left: 0;
80
+ right: 0;
81
+ bottom: 0;
82
+ padding: 1.5rem;
83
+ overflow-y: auto;
84
+ }
85
+
86
+ .panel.active .content, .panel:hover .content {
87
+ opacity: 1;
88
+ pointer-events: auto;
89
+ }
90
+
91
+ .title-vertical {
92
+ position: absolute;
93
+ top: 0;
94
+ left: 0;
95
+ right: 0;
96
+ bottom: 0;
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ transition: opacity 0.3s ease;
101
+ }
102
+
103
+ .panel.active .title-vertical, .panel:hover .title-vertical {
104
+ opacity: 0;
105
+ pointer-events: none;
106
+ }
107
+
108
+ .btn-action {
109
+ background: linear-gradient(135deg, rgba(80, 120, 255, 0.8), rgba(100, 150, 255, 0.8));
110
+ transition: all 0.3s ease;
111
+ }
112
+
113
+ .btn-action:hover {
114
+ transform: translateY(-2px);
115
+ box-shadow: 0 4px 8px rgba(100, 150, 255, 0.3);
116
+ }
117
+
118
+ .blob {
119
+ position: absolute;
120
+ filter: blur(40px);
121
+ opacity: 0.15;
122
+ z-index: -1;
123
+ border-radius: 50%;
124
+ }
125
+
126
+ .blob-1 {
127
+ width: 200px;
128
+ height: 200px;
129
+ background: #4f46e5;
130
+ top: 20%;
131
+ left: 10%;
132
+ }
133
+
134
+ .blob-2 {
135
+ width: 300px;
136
+ height: 300px;
137
+ background: #10b981;
138
+ bottom: 10%;
139
+ right: 15%;
140
+ }
141
+
142
+ /* Panel width transitions */
143
+ .panel {
144
+ width: 4rem; /* 64px - collapsed state */
145
+ }
146
+
147
+ .panel.active, .panel:hover {
148
+ width: 280px; /* Increased expanded width */
149
+ }
150
+
151
+ /* Custom scrollbar - More elegant version */
152
+ .content::-webkit-scrollbar {
153
+ width: 6px;
154
+ height: 6px;
155
+ }
156
+
157
+ .content::-webkit-scrollbar-track {
158
+ background: transparent;
159
+ border-radius: 10px;
160
+ margin: 8px 0;
161
+ }
162
+
163
+ .content::-webkit-scrollbar-thumb {
164
+ background: rgba(100, 150, 255, 0.4);
165
+ border-radius: 10px;
166
+ transition: background 0.3s ease;
167
+ }
168
+
169
+ .content::-webkit-scrollbar-thumb:hover {
170
+ background: rgba(100, 150, 255, 0.6);
171
+ }
172
+
173
+ /* Ensure content spacing */
174
+ .panel-content {
175
+ display: flex;
176
+ flex-direction: column;
177
+ height: 100%;
178
+ }
179
+
180
+ .panel-body {
181
+ flex: 1;
182
+ overflow-y: auto;
183
+ padding-bottom: 1rem;
184
+ margin-right: -0.5rem; /* Compensate for scrollbar */
185
+ padding-right: 0.5rem; /* Add space for scrollbar */
186
+ }
187
+
188
+ /* Smooth scrolling */
189
+ .panel-body {
190
+ scroll-behavior: smooth;
191
+ }
192
+
193
+ /* Hide scrollbar when not needed */
194
+ .panel-body {
195
+ -ms-overflow-style: none; /* IE and Edge */
196
+ scrollbar-width: none; /* Firefox */
197
+ }
198
+
199
+ .panel-body::-webkit-scrollbar {
200
+ display: none; /* Chrome, Safari and Opera */
201
+ }
202
+
203
+ /* Better spacing for content */
204
+ .panel-body > * + * {
205
+ margin-top: 1rem;
206
+ }
207
+ </style>
208
+ </head>
209
+ <body class="text-gray-200 p-8">
210
+ <div class="blob blob-1"></div>
211
+ <div class="blob blob-2"></div>
212
+
213
+ <div class="max-w-7xl mx-auto">
214
+ <h1 class="text-3xl font-bold mb-2">Financial Dashboard</h1>
215
+ <p class="text-gray-400 mb-8">Interactive financial tools at your fingertips</p>
216
+
217
+ <div class="dashboard-container p-4 rounded-xl">
218
+ <div class="flex space-x-4 overflow-x-auto pb-4">
219
+ <!-- Live Pricing Panel (active by default) -->
220
+ <div class="panel active flex-shrink-0 rounded-xl relative">
221
+ <div class="title-vertical">
222
+ <span class="vertical-text font-medium text-sm tracking-wider">LIVE PRICING</span>
223
+ </div>
224
+ <div class="content">
225
+ <div class="panel-content">
226
+ <div class="panel-body">
227
+ <h3 class="text-xl font-semibold mb-4">Live Pricing</h3>
228
+ <p class="text-gray-300 text-sm mb-6">Real-time stock prices, indices, and market data with customizable alerts and thresholds.</p>
229
+
230
+ <div class="space-y-4">
231
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors">
232
+ <div class="flex justify-between text-xs mb-1">
233
+ <span>AAPL</span>
234
+ <span class="text-green-400">+1.24%</span>
235
+ </div>
236
+ <div class="text-lg font-medium">$189.37</div>
237
+ </div>
238
+
239
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors">
240
+ <div class="flex justify-between text-xs mb-1">
241
+ <span>MSFT</span>
242
+ <span class="text-green-400">+0.87%</span>
243
+ </div>
244
+ <div class="text-lg font-medium">$328.39</div>
245
+ </div>
246
+
247
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors">
248
+ <div class="flex justify-between text-xs mb-1">
249
+ <span>GOOGL</span>
250
+ <span class="text-red-400">-0.32%</span>
251
+ </div>
252
+ <div class="text-lg font-medium">$142.56</div>
253
+ </div>
254
+
255
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors">
256
+ <div class="flex justify-between text-xs mb-1">
257
+ <span>AMZN</span>
258
+ <span class="text-green-400">+0.65%</span>
259
+ </div>
260
+ <div class="text-lg font-medium">$125.98</div>
261
+ </div>
262
+
263
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors">
264
+ <div class="flex justify-between text-xs mb-1">
265
+ <span>TSLA</span>
266
+ <span class="text-red-400">-1.12%</span>
267
+ </div>
268
+ <div class="text-lg font-medium">$248.50</div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4">
273
+ <i class="fas fa-chart-line mr-2"></i> View Charts
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Analyst Estimates Panel -->
280
+ <div class="panel flex-shrink-0 rounded-xl relative">
281
+ <div class="title-vertical">
282
+ <span class="vertical-text font-medium text-sm tracking-wider">ANALYST ESTIMATES</span>
283
+ </div>
284
+ <div class="content">
285
+ <div class="panel-content">
286
+ <div class="panel-body">
287
+ <h3 class="text-xl font-semibold mb-4">Analyst Estimates</h3>
288
+ <p class="text-gray-300 text-sm mb-6">Consensus estimates, price targets, and recommendations from top analysts.</p>
289
+
290
+ <div class="space-y-4 mb-6">
291
+ <div class="flex items-center justify-between">
292
+ <span class="text-xs text-gray-400">Buy</span>
293
+ <div class="w-3/4 bg-gray-700 rounded-full h-2">
294
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
295
+ </div>
296
+ <span class="text-xs">65%</span>
297
+ </div>
298
+ <div class="flex items-center justify-between">
299
+ <span class="text-xs text-gray-400">Hold</span>
300
+ <div class="w-3/4 bg-gray-700 rounded-full h-2">
301
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 25%"></div>
302
+ </div>
303
+ <span class="text-xs">25%</span>
304
+ </div>
305
+ <div class="flex items-center justify-between">
306
+ <span class="text-xs text-gray-400">Sell</span>
307
+ <div class="w-3/4 bg-gray-700 rounded-full h-2">
308
+ <div class="bg-red-500 h-2 rounded-full" style="width: 10%"></div>
309
+ </div>
310
+ <span class="text-xs">10%</span>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors">
315
+ <div class="text-xs text-gray-400 mb-1">Average Price Target</div>
316
+ <div class="text-lg font-medium">$210.50</div>
317
+ <div class="text-xs text-green-400 mt-1">+11.2% upside</div>
318
+ </div>
319
+
320
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors mt-4">
321
+ <div class="text-xs text-gray-400 mb-1">High / Low Target</div>
322
+ <div class="flex justify-between">
323
+ <div>
324
+ <div class="text-sm font-medium">$245.00</div>
325
+ <div class="text-xs text-green-400">+29.4%</div>
326
+ </div>
327
+ <div>
328
+ <div class="text-sm font-medium">$175.00</div>
329
+ <div class="text-xs text-red-400">-7.6%</div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4">
335
+ <i class="fas fa-analytics mr-2"></i> View Details
336
+ </button>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Company Financials Panel -->
342
+ <div class="panel flex-shrink-0 rounded-xl relative">
343
+ <div class="title-vertical">
344
+ <span class="vertical-text font-medium text-sm tracking-wider">COMPANY FINANCIALS</span>
345
+ </div>
346
+ <div class="content">
347
+ <div class="panel-content">
348
+ <div class="panel-body">
349
+ <h3 class="text-xl font-semibold mb-4">Company Financials</h3>
350
+ <p class="text-gray-300 text-sm mb-6">Detailed financial statements, ratios, and key metrics for comprehensive analysis.</p>
351
+
352
+ <div class="grid grid-cols-2 gap-4 mb-6">
353
+ <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors">
354
+ <div class="text-gray-400 text-xs">Revenue</div>
355
+ <div class="text-lg font-medium">$394.3B</div>
356
+ </div>
357
+ <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors">
358
+ <div class="text-gray-400 text-xs">EPS</div>
359
+ <div class="text-lg font-medium">$6.11</div>
360
+ </div>
361
+ <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors">
362
+ <div class="text-gray-400 text-xs">P/E</div>
363
+ <div class="text-lg font-medium">31.0</div>
364
+ </div>
365
+ <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors">
366
+ <div class="text-gray-400 text-xs">ROE</div>
367
+ <div class="text-lg font-medium">147%</div>
368
+ </div>
369
+ <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors">
370
+ <div class="text-gray-400 text-xs">Gross Margin</div>
371
+ <div class="text-lg font-medium">42.3%</div>
372
+ </div>
373
+ <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors">
374
+ <div class="text-gray-400 text-xs">FCF</div>
375
+ <div class="text-lg font-medium">$90.2B</div>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors">
380
+ <div class="text-xs text-gray-400 mb-1">Next Earnings Date</div>
381
+ <div class="text-lg font-medium">Jul 27, 2023</div>
382
+ <div class="text-xs text-gray-400 mt-1">Estimated EPS: $1.19</div>
383
+ </div>
384
+ </div>
385
+ <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4">
386
+ <i class="fas fa-file-invoice-dollar mr-2"></i> View Reports
387
+ </button>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Peer Analysis Panel -->
393
+ <div class="panel flex-shrink-0 rounded-xl relative">
394
+ <div class="title-vertical">
395
+ <span class="vertical-text font-medium text-sm tracking-wider">PEER ANALYSIS</span>
396
+ </div>
397
+ <div class="content">
398
+ <div class="panel-content">
399
+ <div class="panel-body">
400
+ <h3 class="text-xl font-semibold mb-4">Peer Analysis</h3>
401
+ <p class="text-gray-300 text-sm mb-6">Compare performance metrics against industry peers and competitors.</p>
402
+
403
+ <div class="space-y-4 mb-6">
404
+ <div class="flex items-center">
405
+ <div class="w-16 text-xs">AAPL</div>
406
+ <div class="flex-1 bg-gray-700 rounded-full h-2">
407
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div>
408
+ </div>
409
+ <div class="w-16 text-right text-xs">+12.5%</div>
410
+ </div>
411
+ <div class="flex items-center">
412
+ <div class="w-16 text-xs">MSFT</div>
413
+ <div class="flex-1 bg-gray-700 rounded-full h-2">
414
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
415
+ </div>
416
+ <div class="w-16 text-right text-xs">+9.3%</div>
417
+ </div>
418
+ <div class="flex items-center">
419
+ <div class="w-16 text-xs">GOOGL</div>
420
+ <div class="flex-1 bg-gray-700 rounded-full h-2">
421
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 72%"></div>
422
+ </div>
423
+ <div class="w-16 text-right text-xs">+7.1%</div>
424
+ </div>
425
+ <div class="flex items-center">
426
+ <div class="w-16 text-xs">AMZN</div>
427
+ <div class="flex-1 bg-gray-700 rounded-full h-2">
428
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 68%"></div>
429
+ </div>
430
+ <div class="w-16 text-right text-xs">+5.8%</div>
431
+ </div>
432
+ <div class="flex items-center">
433
+ <div class="w-16 text-xs">META</div>
434
+ <div class="flex-1 bg-gray-700 rounded-full h-2">
435
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div>
436
+ </div>
437
+ <div class="w-16 text-right text-xs">+4.2%</div>
438
+ </div>
439
+ <div class="flex items-center">
440
+ <div class="w-16 text-xs">NVDA</div>
441
+ <div class="flex-1 bg-gray-700 rounded-full h-2">
442
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div>
443
+ </div>
444
+ <div class="w-16 text-right text-xs">+18.7%</div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4">
449
+ <i class="fas fa-users mr-2"></i> Compare
450
+ </button>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- Historical Earnings Panel -->
456
+ <div class="panel flex-shrink-0 rounded-xl relative">
457
+ <div class="title-vertical">
458
+ <span class="vertical-text font-medium text-sm tracking-wider">HISTORICAL EARNINGS</span>
459
+ </div>
460
+ <div class="content">
461
+ <div class="panel-content">
462
+ <div class="panel-body">
463
+ <h3 class="text-xl font-semibold mb-4">Historical Earnings</h3>
464
+ <p class="text-gray-300 text-sm mb-6">Track past earnings performance, surprises, and guidance trends.</p>
465
+
466
+ <div class="mb-6">
467
+ <div class="flex items-end h-24 mb-2 space-x-2">
468
+ <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 30%" title="Q3 2022: $1.29"></div>
469
+ <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 45%" title="Q4 2022: $1.88"></div>
470
+ <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 60%" title="Q1 2023: $1.52"></div>
471
+ <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 75%" title="Q2 2023: $1.26"></div>
472
+ <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 90%" title="Q3 2023: $1.46"></div>
473
+ <div class="w-5 bg-green-500 rounded-t hover:bg-green-400 transition-colors" style="height: 100%" title="Q4 2023: $1.89 (+7.3%)"></div>
474
+ </div>
475
+ <div class="flex text-xs text-gray-400 space-x-2">
476
+ <div class="w-5 text-center">Q3</div>
477
+ <div class="w-5 text-center">Q4</div>
478
+ <div class="w-5 text-center">Q1</div>
479
+ <div class="w-5 text-center">Q2</div>
480
+ <div class="w-5 text-center">Q3</div>
481
+ <div class="w-5 text-center">Q4</div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors mb-4">
486
+ <div class="text-xs text-gray-400 mb-1">Last Earnings Surprise</div>
487
+ <div class="text-lg font-medium text-green-400">+7.3%</div>
488
+ <div class="text-xs mt-1">Beat consensus by $0.12</div>
489
+ </div>
490
+
491
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors">
492
+ <div class="text-xs text-gray-400 mb-1">Next Quarter Guidance</div>
493
+ <div class="text-lg font-medium">$1.19 - $1.31</div>
494
+ <div class="text-xs text-gray-400 mt-1">Consensus: $1.24</div>
495
+ </div>
496
+ </div>
497
+ <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4">
498
+ <i class="fas fa-history mr-2"></i> View History
499
+ </button>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Insider Transactions Panel -->
505
+ <div class="panel flex-shrink-0 rounded-xl relative">
506
+ <div class="title-vertical">
507
+ <span class="vertical-text font-medium text-sm tracking-wider">INSIDER TRANSACTIONS</span>
508
+ </div>
509
+ <div class="content">
510
+ <div class="panel-content">
511
+ <div class="panel-body">
512
+ <h3 class="text-xl font-semibold mb-4">Insider Transactions</h3>
513
+ <p class="text-gray-300 text-sm mb-6">Monitor buying and selling activity by company executives and directors.</p>
514
+
515
+ <div class="space-y-4 mb-6">
516
+ <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors">
517
+ <div class="w-24 truncate">T. Cook</div>
518
+ <div class="flex-1 px-2">
519
+ <div class="bg-gray-700 rounded-full h-2">
520
+ <div class="bg-green-500 h-2 rounded-full" style="width: 20%"></div>
521
+ </div>
522
+ </div>
523
+ <div class="w-16 text-right">+5,000</div>
524
+ </div>
525
+ <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors">
526
+ <div class="w-24 truncate">L. Maestri</div>
527
+ <div class="flex-1 px-2">
528
+ <div class="bg-gray-700 rounded-full h-2">
529
+ <div class="bg-red-500 h-2 rounded-full" style="width: 40%"></div>
530
+ </div>
531
+ </div>
532
+ <div class="w-16 text-right text-red-400">-10,000</div>
533
+ </div>
534
+ <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors">
535
+ <div class="w-24 truncate">D. Williams</div>
536
+ <div class="flex-1 px-2">
537
+ <div class="bg-gray-700 rounded-full h-2">
538
+ <div class="bg-green-500 h-2 rounded-full" style="width: 10%"></div>
539
+ </div>
540
+ </div>
541
+ <div class="w-16 text-right">+2,500</div>
542
+ </div>
543
+ <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors">
544
+ <div class="w-24 truncate">K. Adams</div>
545
+ <div class="flex-1 px-2">
546
+ <div class="bg-gray-700 rounded-full h-2">
547
+ <div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div>
548
+ </div>
549
+ </div>
550
+ <div class="w-16 text-right text-red-400">-7,500</div>
551
+ </div>
552
+ <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors">
553
+ <div class="w-24 truncate">J. Riccio</div>
554
+ <div class="flex-1 px-2">
555
+ <div class="bg-gray-700 rounded-full h-2">
556
+ <div class="bg-green-500 h-2 rounded-full" style="width: 15%"></div>
557
+ </div>
558
+ </div>
559
+ <div class="w-16 text-right">+3,750</div>
560
+ </div>
561
+ <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors">
562
+ <div class="w-24 truncate">S. O'Brien</div>
563
+ <div class="flex-1 px-2">
564
+ <div class="bg-gray-700 rounded-full h-2">
565
+ <div class="bg-red-500 h-2 rounded-full" style="width: 25%"></div>
566
+ </div>
567
+ </div>
568
+ <div class="w-16 text-right text-red-400">-6,250</div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4">
573
+ <i class="fas fa-user-tie mr-2"></i> View Activity
574
+ </button>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <!-- Email Updates Panel -->
580
+ <div class="panel flex-shrink-0 rounded-xl relative">
581
+ <div class="title-vertical">
582
+ <span class="vertical-text font-medium text-sm tracking-wider">EMAIL UPDATES</span>
583
+ </div>
584
+ <div class="content">
585
+ <div class="panel-content">
586
+ <div class="panel-body">
587
+ <h3 class="text-xl font-semibold mb-4">Email Updates</h3>
588
+ <p class="text-gray-300 text-sm mb-6">Subscribe to customized email alerts for news, earnings, and price movements.</p>
589
+
590
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg mb-4 hover:bg-opacity-70 transition-colors">
591
+ <div class="flex items-center mb-3">
592
+ <input type="checkbox" id="price-alerts" class="mr-3 rounded bg-gray-700 border-gray-600 focus:ring-blue-500" checked>
593
+ <label for="price-alerts" class="text-sm">Price Alerts</label>
594
+ </div>
595
+ <div class="flex items-center mb-3">
596
+ <input type="checkbox" id="earnings-alerts" class="mr-3 rounded bg-gray-700 border-gray-600 focus:ring-blue-500" checked>
597
+ <label for="earnings-alerts" class="text-sm">Earnings Alerts</label>
598
+ </div>
599
+ <div class="flex items-center mb-3">
600
+ <input type="checkbox" id="news-alerts" class="mr-3 rounded bg-gray-700 border-gray-600 focus:ring-blue-500">
601
+ <label for="news-alerts" class="text-sm">News Alerts</label>
602
+ </div>
603
+ <div class="flex items-center">
604
+ <input type="checkbox" id="insider-alerts" class="mr-3 rounded bg-gray-700 border-gray-600 focus:ring-blue-500">
605
+ <label for="insider-alerts" class="text-sm">Insider Trading Alerts</label>
606
+ </div>
607
+ </div>
608
+
609
+ <div class="mb-4">
610
+ <label for="email-frequency" class="block text-xs text-gray-400 mb-2">Frequency</label>
611
+ <select id="email-frequency" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 text-sm rounded-lg p-2 hover:bg-opacity-70 transition-colors">
612
+ <option>Daily</option>
613
+ <option>Weekly</option>
614
+ <option>Monthly</option>
615
+ </select>
616
+ </div>
617
+
618
+ <div class="mb-4">
619
+ <label for="email-address" class="block text-xs text-gray-400 mb-2">Email Address</label>
620
+ <input type="email" id="email-address" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 text-sm rounded-lg p-2 hover:bg-opacity-70 transition-colors" placeholder="[email protected]">
621
+ </div>
622
+ </div>
623
+ <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4">
624
+ <i class="fas fa-envelope mr-2"></i> Subscribe
625
+ </button>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="mt-8 text-center text-gray-500 text-sm">
633
+ <p>Interactive financial dashboard with expandable panels. Hover over any panel to view details.</p>
634
+ </div>
635
+ </div>
636
+
637
+ <script>
638
+ // Make the first panel active by default
639
+ document.addEventListener('DOMContentLoaded', function() {
640
+ const panels = document.querySelectorAll('.panel');
641
+
642
+ // Set first panel as active initially
643
+ panels[0].classList.add('active');
644
+
645
+ panels.forEach(panel => {
646
+ panel.addEventListener('mouseenter', function() {
647
+ // Remove active class from all panels except the one being hovered
648
+ panels.forEach(p => {
649
+ if (p !== this) p.classList.remove('active');
650
+ });
651
+ // Add active class to hovered panel
652
+ this.classList.add('active');
653
+ });
654
+ });
655
+
656
+ // When mouse leaves the dashboard, keep the first panel active
657
+ const dashboardContainer = document.querySelector('.dashboard-container');
658
+ dashboardContainer.addEventListener('mouseleave', function() {
659
+ panels.forEach(p => p.classList.remove('active'));
660
+ panels[0].classList.add('active');
661
+ });
662
+
663
+ // Smooth scroll to top when panel is activated
664
+ panels.forEach(panel => {
665
+ panel.addEventListener('mouseenter', function() {
666
+ const content = this.querySelector('.content');
667
+ if (content) {
668
+ content.scrollTop = 0;
669
+ }
670
+ });
671
+ });
672
+ });
673
+ </script>
674
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Gavin-yang/gavin" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
675
+ </html>