Hugging Face's logo

Spaces:
Suharaaa
/
reg
Running

App Files Community
Suharaaa commited on
Commit
f0fb925
·
verified ·
1 Parent(s): 0310ed9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +628 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Reg
3
- emoji: 🏢
4
- colorFrom: indigo
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: reg
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: blue
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,628 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Expense Manager | Smart Personal Finance</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ light: 'rgba(59, 130, 246, 0.5)',
16
+ DEFAULT: 'rgba(59, 130, 246, 0.7)',
17
+ dark: 'rgba(59, 130, 246, 0.9)'
18
+ },
19
+ success: {
20
+ light: 'rgba(34, 197, 94, 0.5)',
21
+ DEFAULT: 'rgba(34, 197, 94, 0.7)',
22
+ dark: 'rgba(34, 197, 94, 0.9)'
23
+ },
24
+ warning: {
25
+ light: 'rgba(234, 179, 8, 0.5)',
26
+ DEFAULT: 'rgba(234, 179, 8, 0.7)',
27
+ dark: 'rgba(234, 179, 8, 0.9)'
28
+ },
29
+ danger: {
30
+ light: 'rgba(239, 68, 68, 0.5)',
31
+ DEFAULT: 'rgba(239, 68, 68, 0.7)',
32
+ dark: 'rgba(239, 68, 68, 0.9)'
33
+ },
34
+ dark: {
35
+ light: 'rgba(15, 23, 42, 0.5)',
36
+ DEFAULT: 'rgba(15, 23, 42, 0.7)',
37
+ dark: 'rgba(15, 23, 42, 0.9)'
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ </script>
44
+ <style>
45
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
46
+
47
+ body {
48
+ font-family: 'Inter', sans-serif;
49
+ background-color: #f8fafc;
50
+ color: #0f172a;
51
+ }
52
+
53
+ .dashboard-bg {
54
+ background: linear-gradient(135deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.9) 100%);
55
+ }
56
+
57
+ .card {
58
+ background: white;
59
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
60
+ border-radius: 12px;
61
+ transition: all 0.3s ease;
62
+ }
63
+
64
+ .card:hover {
65
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
66
+ transform: translateY(-2px);
67
+ }
68
+
69
+ .sidebar {
70
+ background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
71
+ }
72
+
73
+ .nav-item.active {
74
+ background-color: rgba(59, 130, 246, 0.2);
75
+ border-left: 3px solid rgba(59, 130, 246, 0.9);
76
+ }
77
+
78
+ .nav-item.active .nav-icon {
79
+ color: rgba(59, 130, 246, 0.9);
80
+ }
81
+
82
+ .progress-bar {
83
+ height: 8px;
84
+ border-radius: 4px;
85
+ }
86
+
87
+ .income {
88
+ background: linear-gradient(90deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.2) 100%);
89
+ border-left: 4px solid rgba(34, 197, 94, 0.9);
90
+ }
91
+
92
+ .expense {
93
+ background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.2) 100%);
94
+ border-left: 4px solid rgba(239, 68, 68, 0.9);
95
+ }
96
+
97
+ .savings {
98
+ background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.2) 100%);
99
+ border-left: 4px solid rgba(59, 130, 246, 0.9);
100
+ }
101
+
102
+ .blink {
103
+ animation: blink 1.5s infinite;
104
+ }
105
+
106
+ @keyframes blink {
107
+ 0% { opacity: 0.7; }
108
+ 50% { opacity: 1; }
109
+ 100% { opacity: 0.7; }
110
+ }
111
+
112
+ .pulse {
113
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
114
+ }
115
+
116
+ @keyframes pulse {
117
+ 0%, 100% {
118
+ transform: scale(1);
119
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
120
+ }
121
+ 50% {
122
+ transform: scale(1.05);
123
+ box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
124
+ }
125
+ }
126
+
127
+ .transaction-item:hover {
128
+ background-color: #f1f5f9;
129
+ }
130
+
131
+ .ai-suggestion {
132
+ background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
133
+ border-left: 4px solid rgba(59, 130, 246, 0.5);
134
+ }
135
+ </style>
136
+ </head>
137
+ <body class="text-slate-800">
138
+ <div class="flex h-screen overflow-hidden">
139
+ <!-- Sidebar -->
140
+ <div class="sidebar w-64 flex-shrink-0 text-white hidden md:block">
141
+ <div class="p-6">
142
+ <div class="flex items-center mb-8">
143
+ <div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3">
144
+ <i class="fas fa-wallet text-white"></i>
145
+ </div>
146
+ <div>
147
+ <h1 class="text-xl font-bold">AI Expense</h1>
148
+ <p class="text-xs text-slate-300">Personal Finance Manager</p>
149
+ </div>
150
+ </div>
151
+
152
+ <nav class="mt-8">
153
+ <div class="text-xs uppercase text-slate-400 mb-4 px-4">Dashboard</div>
154
+ <a href="#" class="nav-item active flex items-center px-4 py-3 mb-1 rounded-r-lg">
155
+ <i class="nav-icon fas fa-home mr-3 text-slate-300"></i>
156
+ <span>Overview</span>
157
+ </a>
158
+ <a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg">
159
+ <i class="nav-icon fas fa-chart-pie mr-3 text-slate-300"></i>
160
+ <span>Analytics</span>
161
+ </a>
162
+ <a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg">
163
+ <i class="nav-icon fas fa-exchange-alt mr-3 text-slate-300"></i>
164
+ <span>Transactions</span>
165
+ </a>
166
+ <a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg">
167
+ <i class="nav-icon fas fa-piggy-bank mr-3 text-slate-300"></i>
168
+ <span>Budgets</span>
169
+ </a>
170
+
171
+ <div class="text-xs uppercase text-slate-400 mb-4 mt-8 px-4">Tools</div>
172
+ <a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg">
173
+ <i class="nav-icon fas fa-robot mr-3 text-slate-300"></i>
174
+ <span>AI Assistant</span>
175
+ </a>
176
+ <a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg">
177
+ <i class="nav-icon fas fa-bell mr-3 text-slate-300"></i>
178
+ <span>Reminders</span>
179
+ </a>
180
+ <a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg">
181
+ <i class="nav-icon fas fa-file-invoice-dollar mr-3 text-slate-300"></i>
182
+ <span>Reports</span>
183
+ </a>
184
+
185
+ <div class="text-xs uppercase text-slate-400 mb-4 mt-8 px-4">Settings</div>
186
+ <a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg">
187
+ <i class="nav-icon fas fa-cog mr-3 text-slate-300"></i>
188
+ <span>Account</span>
189
+ </a>
190
+ <a href="#" class="nav-item flex items-center px-4 py-3 mb-1 rounded-r-lg">
191
+ <i class="nav-icon fas fa-shield-alt mr-3 text-slate-300"></i>
192
+ <span>Security</span>
193
+ </a>
194
+ </nav>
195
+ </div>
196
+
197
+ <div class="absolute bottom-0 w-full p-6">
198
+ <div class="card p-4 bg-slate-800">
199
+ <div class="flex items-center">
200
+ <div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mr-3">
201
+ <i class="fas fa-lightbulb text-white text-xl"></i>
202
+ </div>
203
+ <div>
204
+ <div class="text-sm font-medium">AI Tip of the Day</div>
205
+ <div class="text-xs text-slate-300 mt-1">Try categorizing your food expenses to identify spending patterns.</div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Main Content -->
213
+ <div class="flex-1 flex flex-col overflow-hidden dashboard-bg">
214
+ <!-- Top Navigation -->
215
+ <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between">
216
+ <div class="flex items-center md:hidden">
217
+ <button class="mr-4 text-slate-500">
218
+ <i class="fas fa-bars"></i>
219
+ </button>
220
+ <div class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-2">
221
+ <i class="fas fa-wallet text-white"></i>
222
+ </div>
223
+ <span class="font-bold">AI Expense</span>
224
+ </div>
225
+
226
+ <div class="relative flex-1 max-w-md mx-4">
227
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
228
+ <i class="fas fa-search text-slate-400"></i>
229
+ </div>
230
+ <input type="text" class="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-transparent" placeholder="Search transactions, budgets...">
231
+ </div>
232
+
233
+ <div class="flex items-center space-x-4">
234
+ <button class="text-slate-500 hover:text-slate-700">
235
+ <i class="fas fa-bell"></i>
236
+ </button>
237
+ <button class="text-slate-500 hover:text-slate-700">
238
+ <i class="fas fa-question-circle"></i>
239
+ </button>
240
+ <div class="flex items-center">
241
+ <div class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-2">
242
+ <i class="fas fa-user text-white"></i>
243
+ </div>
244
+ <span class="hidden md:inline text-sm font-medium">John Doe</span>
245
+ </div>
246
+ </div>
247
+ </header>
248
+
249
+ <!-- Main Content Area -->
250
+ <main class="flex-1 overflow-y-auto p-6">
251
+ <div class="mb-6 flex items-center justify-between">
252
+ <h2 class="text-2xl font-bold">Expense Dashboard</h2>
253
+ <button class="bg-primary-dark hover:bg-primary-darker text-white font-medium py-2 px-4 rounded-lg flex items-center pulse">
254
+ <i class="fas fa-plus-circle mr-2"></i>
255
+ Add Transaction
256
+ </button>
257
+ </div>
258
+
259
+ <!-- Stats Cards -->
260
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
261
+ <div class="card p-6 income">
262
+ <div class="flex items-center justify-between mb-4">
263
+ <div>
264
+ <div class="text-sm text-slate-500">Total Income</div>
265
+ <div class="text-2xl font-bold text-success-dark">$5,240.00</div>
266
+ </div>
267
+ <div class="w-12 h-12 rounded-full bg-success-light flex items-center justify-center">
268
+ <i class="fas fa-arrow-down text-success-dark"></i>
269
+ </div>
270
+ </div>
271
+ <div class="text-sm text-success-dark flex items-center">
272
+ <span>+12.5% from last month</span>
273
+ <i class="fas fa-caret-up ml-1"></i>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="card p-6 expense">
278
+ <div class="flex items-center justify-between mb-4">
279
+ <div>
280
+ <div class="text-sm text-slate-500">Total Expenses</div>
281
+ <div class="text-2xl font-bold text-danger-dark">$3,845.20</div>
282
+ </div>
283
+ <div class="w-12 h-12 rounded-full bg-danger-light flex items-center justify-center">
284
+ <i class="fas fa-arrow-up text-danger-dark"></i>
285
+ </div>
286
+ </div>
287
+ <div class="text-sm text-danger-dark flex items-center">
288
+ <span>+8.3% from last month</span>
289
+ <i class="fas fa-caret-up ml-1"></i>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="card p-6 savings">
294
+ <div class="flex items-center justify-between mb-4">
295
+ <div>
296
+ <div class="text-sm text-slate-500">Monthly Savings</div>
297
+ <div class="text-2xl font-bold text-primary-dark">$1,394.80</div>
298
+ </div>
299
+ <div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center">
300
+ <i class="fas fa-piggy-bank text-primary-dark"></i>
301
+ </div>
302
+ </div>
303
+ <div class="text-sm text-primary-dark flex items-center">
304
+ <span>26.6% savings rate</span>
305
+ <i class="fas fa-check-circle ml-1"></i>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Charts Row -->
311
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
312
+ <!-- Spending Chart -->
313
+ <div class="card p-6 lg:col-span-2">
314
+ <div class="flex items-center justify-between mb-4">
315
+ <h3 class="font-bold">Monthly Spending</h3>
316
+ <div class="flex space-x-2">
317
+ <button class="bg-primary-light text-white px-3 py-1 rounded-lg text-xs font-medium">Month</button>
318
+ <button class="bg-slate-100 text-slate-600 px-3 py-1 rounded-lg text-xs font-medium">Week</button>
319
+ <button class="bg-slate-100 text-slate-600 px-3 py-1 rounded-lg text-xs font-medium">Year</button>
320
+ </div>
321
+ </div>
322
+ <div class="h-64">
323
+ <canvas id="spendingChart"></canvas>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Budget Progress -->
328
+ <div class="card p-6">
329
+ <h3 class="font-bold mb-4">Budget Progress</h3>
330
+ <div class="space-y-4">
331
+ <div>
332
+ <div class="flex items-center justify-between mb-2">
333
+ <span class="text-sm">Food & Dining</span>
334
+ <span class="text-xs font-medium">$420 / $600</span>
335
+ </div>
336
+ <div class="progress-bar bg-slate-200 w-full">
337
+ <div class="progress-bar bg-warning-dark h-full rounded-full" style="width: 70%"></div>
338
+ </div>
339
+ </div>
340
+
341
+ <div>
342
+ <div class="flex items-center justify-between mb-2">
343
+ <span class="text-sm">Transportation</span>
344
+ <span class="text-xs font-medium">$180 / $250</span>
345
+ </div>
346
+ <div class="progress-bar bg-slate-200 w-full">
347
+ <div class="progress-bar bg-primary-dark h-full rounded-full" style="width: 72%"></div>
348
+ </div>
349
+ </div>
350
+
351
+ <div>
352
+ <div class="flex items-center justify-between mb-2">
353
+ <span class="text-sm">Entertainment</span>
354
+ <span class="text-xs font-medium">$95 / $150</span>
355
+ </div>
356
+ <div class="progress-bar bg-slate-200 w-full">
357
+ <div class="progress-bar bg-success-dark h-full rounded-full" style="width: 63%"></div>
358
+ </div>
359
+ </div>
360
+
361
+ <div>
362
+ <div class="flex items-center justify-between mb-2">
363
+ <span class="text-sm">Shopping</span>
364
+ <span class="text-xs font-medium">$320 / $400</span>
365
+ </div>
366
+ <div class="progress-bar bg-slate-200 w-full">
367
+ <div class="progress-bar bg-danger-dark h-full rounded-full" style="width: 80%"></div>
368
+ </div>
369
+ </div>
370
+
371
+ <div>
372
+ <div class="flex items-center justify-between mb-2">
373
+ <span class="text-sm">Utilities</span>
374
+ <span class="text-xs font-medium">$210 / $300</span>
375
+ </div>
376
+ <div class="progress-bar bg-slate-200 w-full">
377
+ <div class="progress-bar bg-info-dark h-full rounded-full" style="width: 70%"></div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Transactions & AI Suggestions -->
385
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
386
+ <!-- Recent Transactions -->
387
+ <div class="card p-6 lg:col-span-2">
388
+ <div class="flex items-center justify-between mb-4">
389
+ <h3 class="font-bold">Recent Transactions</h3>
390
+ <button class="text-primary-dark text-sm font-medium">View All</button>
391
+ </div>
392
+
393
+ <div class="overflow-x-auto">
394
+ <table class="w-full">
395
+ <thead>
396
+ <tr class="text-left text-sm text-slate-500 border-b border-slate-200">
397
+ <th class="pb-3">Description</th>
398
+ <th class="pb-3">Category</th>
399
+ <th class="pb-3 text-right">Amount</th>
400
+ <th class="pb-3">Date</th>
401
+ </tr>
402
+ </thead>
403
+ <tbody>
404
+ <tr class="transaction-item border-b border-slate-100">
405
+ <td class="py-3">
406
+ <div class="flex items-center">
407
+ <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3">
408
+ <i class="fas fa-shopping-bag text-red-500"></i>
409
+ </div>
410
+ <span>Grocery Store</span>
411
+ </div>
412
+ </td>
413
+ <td class="py-3 text-sm text-slate-500">Food</td>
414
+ <td class="py-3 text-right font-medium text-danger-dark">-$86.45</td>
415
+ <td class="py-3 text-sm text-slate-500">Today</td>
416
+ </tr>
417
+
418
+ <tr class="transaction-item border-b border-slate-100">
419
+ <td class="py-3">
420
+ <div class="flex items-center">
421
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
422
+ <i class="fas fa-subway text-blue-500"></i>
423
+ </div>
424
+ <span>Public Transport</span>
425
+ </div>
426
+ </td>
427
+ <td class="py-3 text-sm text-slate-500">Transport</td>
428
+ <td class="py-3 text-right font-medium text-danger-dark">-$2.75</td>
429
+ <td class="py-3 text-sm text-slate-500">Today</td>
430
+ </tr>
431
+
432
+ <tr class="transaction-item border-b border-slate-100">
433
+ <td class="py-3">
434
+ <div class="flex items-center">
435
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
436
+ <i class="fas fa-money-bill-wave text-green-500"></i>
437
+ </div>
438
+ <span>Salary Deposit</span>
439
+ </div>
440
+ </td>
441
+ <td class="py-3 text-sm text-slate-500">Income</td>
442
+ <td class="py-3 text-right font-medium text-success-dark">+$2,500.00</td>
443
+ <td class="py-3 text-sm text-slate-500">Yesterday</td>
444
+ </tr>
445
+
446
+ <tr class="transaction-item border-b border-slate-100">
447
+ <td class="py-3">
448
+ <div class="flex items-center">
449
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
450
+ <i class="fas fa-film text-purple-500"></i>
451
+ </div>
452
+ <span>Movie Tickets</span>
453
+ </div>
454
+ </td>
455
+ <td class="py-3 text-sm text-slate-500">Entertainment</td>
456
+ <td class="py-3 text-right font-medium text-danger-dark">-$32.00</td>
457
+ <td class="py-3 text-sm text-slate-500">May 15</td>
458
+ </tr>
459
+
460
+ <tr class="transaction-item">
461
+ <td class="py-3">
462
+ <div class="flex items-center">
463
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
464
+ <i class="fas fa-utensils text-yellow-500"></i>
465
+ </div>
466
+ <span>Dinner Out</span>
467
+ </div>
468
+ </td>
469
+ <td class="py-3 text-sm text-slate-500">Dining</td>
470
+ <td class="py-3 text-right font-medium text-danger-dark">-$45.30</td>
471
+ <td class="py-3 text-sm text-slate-500">May 14</td>
472
+ </tr>
473
+ </tbody>
474
+ </table>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- AI Suggestions -->
479
+ <div class="space-y-6">
480
+ <div class="card p-6 ai-suggestion">
481
+ <div class="flex items-start mb-3">
482
+ <div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3 flex-shrink-0">
483
+ <i class="fas fa-robot text-white"></i>
484
+ </div>
485
+ <div>
486
+ <h4 class="font-bold mb-1">AI Spending Insight</h4>
487
+ <p class="text-sm text-slate-600">Your dining expenses are 23% higher than last month. Consider reducing restaurant visits to stay within budget.</p>
488
+ </div>
489
+ </div>
490
+ <div class="flex justify-end">
491
+ <button class="text-xs text-primary-dark font-medium">View Details →</button>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="card p-6 ai-suggestion">
496
+ <div class="flex items-start mb-3">
497
+ <div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3 flex-shrink-0">
498
+ <i class="fas fa-lightbulb text-white"></i>
499
+ </div>
500
+ <div>
501
+ <h4 class="font-bold mb-1">Savings Opportunity</h4>
502
+ <p class="text-sm text-slate-600">Based on your spending patterns, you could save $120/month by switching to a cheaper phone plan.</p>
503
+ </div>
504
+ </div>
505
+ <div class="flex justify-end">
506
+ <button class="text-xs text-primary-dark font-medium">Learn More →</button>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="card p-6 bg-slate-800 text-white">
511
+ <div class="flex items-start mb-3">
512
+ <div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3 flex-shrink-0">
513
+ <i class="fas fa-chart-line text-white"></i>
514
+ </div>
515
+ <div>
516
+ <h4 class="font-bold mb-1">Financial Health</h4>
517
+ <p class="text-sm text-slate-300">Your financial health score is 78/100, better than 65% of users in your age group.</p>
518
+ </div>
519
+ </div>
520
+ <div class="mt-4">
521
+ <div class="flex items-center justify-between mb-2">
522
+ <span class="text-xs text-slate-300">Spending Control</span>
523
+ <span class="text-xs font-medium">72/100</span>
524
+ </div>
525
+ <div class="progress-bar bg-slate-700 w-full">
526
+ <div class="progress-bar bg-primary-dark h-full rounded-full" style="width: 72%"></div>
527
+ </div>
528
+
529
+ <div class="flex items-center justify-between mb-2 mt-3">
530
+ <span class="text-xs text-slate-300">Savings Rate</span>
531
+ <span class="text-xs font-medium">85/100</span>
532
+ </div>
533
+ <div class="progress-bar bg-slate-700 w-full">
534
+ <div class="progress-bar bg-success-dark h-full rounded-full" style="width: 85%"></div>
535
+ </div>
536
+
537
+ <div class="flex items-center justify-between mb-2 mt-3">
538
+ <span class="text-xs text-slate-300">Investment</span>
539
+ <span class="text-xs font-medium">45/100</span>
540
+ </div>
541
+ <div class="progress-bar bg-slate-700 w-full">
542
+ <div class="progress-bar bg-warning-dark h-full rounded-full" style="width: 45%"></div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </main>
549
+ </div>
550
+ </div>
551
+
552
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
553
+ <script>
554
+ // Spending Chart
555
+ const spendingCtx = document.getElementById('spendingChart').getContext('2d');
556
+ new Chart(spendingCtx, {
557
+ type: 'bar',
558
+ data: {
559
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
560
+ datasets: [
561
+ {
562
+ label: 'Income',
563
+ data: [4500, 4800, 5000, 5100, 5240, 0],
564
+ backgroundColor: 'rgba(34, 197, 94, 0.7)',
565
+ borderRadius: 4
566
+ },
567
+ {
568
+ label: 'Expenses',
569
+ data: [3200, 3500, 3700, 3550, 3845, 0],
570
+ backgroundColor: 'rgba(239, 68, 68, 0.7)',
571
+ borderRadius: 4
572
+ }
573
+ ]
574
+ },
575
+ options: {
576
+ responsive: true,
577
+ maintainAspectRatio: false,
578
+ plugins: {
579
+ legend: {
580
+ position: 'top',
581
+ },
582
+ tooltip: {
583
+ callbacks: {
584
+ label: function(context) {
585
+ return context.dataset.label + ': $' + context.raw.toFixed(2);
586
+ }
587
+ }
588
+ }
589
+ },
590
+ scales: {
591
+ x: {
592
+ grid: {
593
+ display: false
594
+ }
595
+ },
596
+ y: {
597
+ grid: {
598
+ color: 'rgba(0, 0, 0, 0.05)'
599
+ },
600
+ ticks: {
601
+ callback: function(value) {
602
+ return '$' + value;
603
+ }
604
+ }
605
+ }
606
+ }
607
+ }
608
+ });
609
+
610
+ // Simulate AI processing
611
+ setInterval(() => {
612
+ document.querySelectorAll('.ai-suggestion').forEach((el, index) => {
613
+ setTimeout(() => {
614
+ el.classList.add('animate-pulse');
615
+ setTimeout(() => {
616
+ el.classList.remove('animate-pulse');
617
+ }, 1000);
618
+ }, index * 300);
619
+ });
620
+ }, 10000);
621
+
622
+ // Mobile menu toggle
623
+ document.querySelector('.fa-bars').addEventListener('click', function() {
624
+ document.querySelector('.sidebar').classList.toggle('hidden');
625
+ });
626
+ </script>
627
+ <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=Suharaaa/reg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
628
+ </html>