Hugging Face's logo

Spaces:
KushalSai2006
/
fin
Running

App Files Community
KushalSai2006 commited on
Commit
3a1eaf8
·
verified ·
1 Parent(s): 89cea55

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +981 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fin
3
- emoji: 🔥
4
- colorFrom: blue
5
  colorTo: pink
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: fin
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: pink
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,981 @@
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>FinTrack - Personal Finance SaaS</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#00B289',
15
+ secondary: '#4F46E5',
16
+ dark: '#1E293B',
17
+ light: '#F8FAFC',
18
+ danger: '#EF4444',
19
+ warning: '#F59E0B',
20
+ success: '#10B981'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ .gradient-bg {
28
+ background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
29
+ }
30
+ .sidebar-transition {
31
+ transition: all 0.3s ease;
32
+ }
33
+ .chart-container {
34
+ position: relative;
35
+ height: 300px;
36
+ width: 100%;
37
+ }
38
+ .progress-bar {
39
+ transition: width 0.5s ease;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-light font-sans">
44
+ <!-- App Container -->
45
+ <div id="app" class="min-h-screen">
46
+ <!-- Layout Component -->
47
+ <div id="layout" class="flex">
48
+ <!-- Sidebar (hidden on mobile) -->
49
+ <div id="sidebar" class="hidden md:flex flex-col w-64 bg-dark text-white sidebar-transition fixed h-full">
50
+ <div class="flex items-center justify-center h-16 px-4 border-b border-gray-700">
51
+ <h1 class="text-xl font-bold text-primary">FinTrack</h1>
52
+ </div>
53
+ <nav class="flex-grow px-4 py-6">
54
+ <ul class="space-y-2">
55
+ <li>
56
+ <a href="#dashboard" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
57
+ <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
58
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
59
+ </svg>
60
+ Dashboard
61
+ </a>
62
+ </li>
63
+ <li>
64
+ <a href="#transactions" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
65
+ <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
66
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
67
+ </svg>
68
+ Transactions
69
+ </a>
70
+ </li>
71
+ <li>
72
+ <a href="#budgets" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
73
+ <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
74
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
75
+ </svg>
76
+ Budgets
77
+ </a>
78
+ </li>
79
+ <li>
80
+ <a href="#reports" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
81
+ <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
82
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
83
+ </svg>
84
+ Reports
85
+ </a>
86
+ </li>
87
+ <li>
88
+ <a href="#alerts" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
89
+ <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
90
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
91
+ </svg>
92
+ Alerts
93
+ </a>
94
+ </li>
95
+ <li>
96
+ <a href="#settings" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
97
+ <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
98
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
99
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
100
+ </svg>
101
+ Settings
102
+ </a>
103
+ </li>
104
+ <li>
105
+ <a href="#help" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
106
+ <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
107
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
108
+ </svg>
109
+ Help
110
+ </a>
111
+ </li>
112
+ </ul>
113
+ </nav>
114
+ <div class="px-4 py-6 border-t border-gray-700">
115
+ <div class="flex items-center">
116
+ <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
117
+ <div class="ml-3">
118
+ <p class="text-sm font-medium text-white">Sarah Johnson</p>
119
+ <p class="text-xs text-gray-400">Premium Member</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Mobile Sidebar Overlay (hidden by default) -->
126
+ <div id="sidebar-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div>
127
+
128
+ <!-- Main Content Area -->
129
+ <div class="flex-1 md:ml-64">
130
+ <!-- Header -->
131
+ <header class="bg-white shadow-sm">
132
+ <div class="flex items-center justify-between px-6 py-4">
133
+ <div class="flex items-center">
134
+ <button id="mobile-menu-button" class="md:hidden text-gray-500 focus:outline-none">
135
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
136
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
137
+ </svg>
138
+ </button>
139
+ <h2 class="text-xl font-semibold text-dark ml-4" id="page-title">Dashboard</h2>
140
+ </div>
141
+ <div class="flex items-center space-x-4">
142
+ <button class="text-gray-500 hover:text-dark focus:outline-none">
143
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
144
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
145
+ </svg>
146
+ </button>
147
+ <div class="relative">
148
+ <button class="flex items-center focus:outline-none">
149
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
150
+ <span class="ml-2 text-sm font-medium text-dark hidden md:inline">Sarah</span>
151
+ </button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </header>
156
+
157
+ <!-- Main Content -->
158
+ <main class="p-6">
159
+ <!-- Dynamic content will be loaded here -->
160
+ <div id="page-content">
161
+ <!-- Default content (Dashboard) -->
162
+ <div id="dashboard-content">
163
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
164
+ <!-- Summary Cards -->
165
+ <div class="bg-white rounded-lg shadow p-6">
166
+ <div class="flex items-center">
167
+ <div class="p-3 rounded-full bg-green-100 text-primary">
168
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
169
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
170
+ </svg>
171
+ </div>
172
+ <div class="ml-4">
173
+ <p class="text-sm font-medium text-gray-500">Total Balance</p>
174
+ <p class="text-2xl font-semibold text-dark">$12,345.67</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <div class="bg-white rounded-lg shadow p-6">
179
+ <div class="flex items-center">
180
+ <div class="p-3 rounded-full bg-blue-100 text-secondary">
181
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
182
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
183
+ </svg>
184
+ </div>
185
+ <div class="ml-4">
186
+ <p class="text-sm font-medium text-gray-500">Income</p>
187
+ <p class="text-2xl font-semibold text-dark">$4,567.89</p>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ <div class="bg-white rounded-lg shadow p-6">
192
+ <div class="flex items-center">
193
+ <div class="p-3 rounded-full bg-red-100 text-danger">
194
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
195
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"></path>
196
+ </svg>
197
+ </div>
198
+ <div class="ml-4">
199
+ <p class="text-sm font-medium text-gray-500">Expenses</p>
200
+ <p class="text-2xl font-semibold text-dark">$2,345.67</p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Charts Section -->
207
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
208
+ <div class="bg-white rounded-lg shadow p-6">
209
+ <h3 class="text-lg font-semibold text-dark mb-4">Monthly Income vs Expenses</h3>
210
+ <div class="chart-container">
211
+ <canvas id="lineChart"></canvas>
212
+ </div>
213
+ </div>
214
+ <div class="bg-white rounded-lg shadow p-6">
215
+ <h3 class="text-lg font-semibold text-dark mb-4">Spending by Category</h3>
216
+ <div class="chart-container">
217
+ <canvas id="doughnutChart"></canvas>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Recent Transactions -->
223
+ <div class="bg-white rounded-lg shadow overflow-hidden">
224
+ <div class="px-6 py-4 border-b border-gray-200">
225
+ <div class="flex items-center justify-between">
226
+ <h3 class="text-lg font-semibold text-dark">Recent Transactions</h3>
227
+ <a href="#transactions" class="text-sm font-medium text-primary hover:text-primary-dark">View All</a>
228
+ </div>
229
+ </div>
230
+ <div class="divide-y divide-gray-200">
231
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer">
232
+ <div class="flex items-center justify-between">
233
+ <div class="flex items-center">
234
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
235
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
236
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
237
+ </svg>
238
+ </div>
239
+ <div class="ml-4">
240
+ <p class="text-sm font-medium text-dark">Grocery Shopping</p>
241
+ <p class="text-xs text-gray-500">Supermarket</p>
242
+ </div>
243
+ </div>
244
+ <div class="text-right">
245
+ <p class="text-sm font-medium text-danger">-$85.23</p>
246
+ <p class="text-xs text-gray-500">Today, 10:45 AM</p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer">
251
+ <div class="flex items-center justify-between">
252
+ <div class="flex items-center">
253
+ <div class="p-2 rounded-full bg-green-100 text-green-600">
254
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
255
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
256
+ </svg>
257
+ </div>
258
+ <div class="ml-4">
259
+ <p class="text-sm font-medium text-dark">Salary Deposit</p>
260
+ <p class="text-xs text-gray-500">Company Inc.</p>
261
+ </div>
262
+ </div>
263
+ <div class="text-right">
264
+ <p class="text-sm font-medium text-success">+$3,500.00</p>
265
+ <p class="text-xs text-gray-500">Yesterday, 9:00 AM</p>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer">
270
+ <div class="flex items-center justify-between">
271
+ <div class="flex items-center">
272
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
273
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
274
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
275
+ </svg>
276
+ </div>
277
+ <div class="ml-4">
278
+ <p class="text-sm font-medium text-dark">Netflix Subscription</p>
279
+ <p class="text-xs text-gray-500">Entertainment</p>
280
+ </div>
281
+ </div>
282
+ <div class="text-right">
283
+ <p class="text-sm font-medium text-danger">-$14.99</p>
284
+ <p class="text-xs text-gray-500">May 15, 2023</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer">
289
+ <div class="flex items-center justify-between">
290
+ <div class="flex items-center">
291
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
292
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
293
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
294
+ </svg>
295
+ </div>
296
+ <div class="ml-4">
297
+ <p class="text-sm font-medium text-dark">Dinner with Friends</p>
298
+ <p class="text-xs text-gray-500">Restaurant</p>
299
+ </div>
300
+ </div>
301
+ <div class="text-right">
302
+ <p class="text-sm font-medium text-danger">-$62.75</p>
303
+ <p class="text-xs text-gray-500">May 14, 2023</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </main>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Landing Page (hidden by default) -->
317
+ <div id="landing-page" class="hidden min-h-screen gradient-bg flex flex-col justify-center items-center text-white px-6">
318
+ <div class="max-w-3xl text-center">
319
+ <h1 class="text-5xl font-bold mb-6">Welcome to FinTrack</h1>
320
+ <p class="text-xl mb-10">Take control of your finances with our powerful yet simple personal finance management tool. Track expenses, set budgets, and achieve your financial goals.</p>
321
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
322
+ <a href="#signup" class="bg-white text-primary hover:bg-gray-100 font-bold py-3 px-8 rounded-lg transition duration-300">Get Started</a>
323
+ <a href="#login" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 font-bold py-3 px-8 rounded-lg transition duration-300">Login</a>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Login Page (hidden by default) -->
329
+ <div id="login-page" class="hidden min-h-screen bg-light flex items-center justify-center p-6">
330
+ <div class="w-full max-w-md bg-white rounded-lg shadow-md p-8">
331
+ <h2 class="text-2xl font-bold text-dark mb-6 text-center">Login to FinTrack</h2>
332
+ <form>
333
+ <div class="mb-4">
334
+ <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
335
+ <input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="your@email.com">
336
+ </div>
337
+ <div class="mb-6">
338
+ <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
339
+ <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="••••••••">
340
+ </div>
341
+ <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded-lg transition duration-300">Login</button>
342
+ <div class="mt-4 text-center">
343
+ <p class="text-sm text-gray-600">Don't have an account? <a href="#signup" class="text-primary hover:underline">Sign up</a></p>
344
+ </div>
345
+ </form>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Signup Page (hidden by default) -->
350
+ <div id="signup-page" class="hidden min-h-screen bg-light flex items-center justify-center p-6">
351
+ <div class="w-full max-w-md bg-white rounded-lg shadow-md p-8">
352
+ <h2 class="text-2xl font-bold text-dark mb-6 text-center">Create Your Account</h2>
353
+ <form>
354
+ <div class="mb-4">
355
+ <label for="signup-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
356
+ <input type="text" id="signup-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="John Doe">
357
+ </div>
358
+ <div class="mb-4">
359
+ <label for="signup-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
360
+ <input type="email" id="signup-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="your@email.com">
361
+ </div>
362
+ <div class="mb-4">
363
+ <label for="signup-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
364
+ <input type="password" id="signup-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="••••••••">
365
+ </div>
366
+ <div class="mb-6">
367
+ <label for="signup-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
368
+ <input type="password" id="signup-confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="••••••••">
369
+ </div>
370
+ <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded-lg transition duration-300">Sign Up</button>
371
+ <div class="mt-4 text-center">
372
+ <p class="text-sm text-gray-600">Already have an account? <a href="#login" class="text-primary hover:underline">Login</a></p>
373
+ </div>
374
+ </form>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Transactions Page (hidden by default) -->
379
+ <div id="transactions-page" class="hidden min-h-screen bg-light">
380
+ <div class="p-6">
381
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
382
+ <div class="px-6 py-4 border-b border-gray-200">
383
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
384
+ <h2 class="text-xl font-semibold text-dark">Transactions</h2>
385
+ <div class="mt-4 md:mt-0 flex flex-col sm:flex-row gap-3">
386
+ <div class="relative">
387
+ <input type="text" placeholder="Search transactions..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
388
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
389
+ <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
390
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
391
+ </svg>
392
+ </div>
393
+ </div>
394
+ <button class="bg-primary hover:bg-primary-dark text-white font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center">
395
+ <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
396
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
397
+ </svg>
398
+ Add Transaction
399
+ </button>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ <div class="px-6 py-4 border-b border-gray-200">
404
+ <div class="flex flex-wrap gap-4">
405
+ <div class="flex-1 min-w-[200px]">
406
+ <label for="date-range" class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
407
+ <select id="date-range" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
408
+ <option>All Time</option>
409
+ <option>Today</option>
410
+ <option>This Week</option>
411
+ <option>This Month</option>
412
+ <option>Custom Range</option>
413
+ </select>
414
+ </div>
415
+ <div class="flex-1 min-w-[200px]">
416
+ <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
417
+ <select id="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
418
+ <option>All Categories</option>
419
+ <option>Food & Dining</option>
420
+ <option>Transportation</option>
421
+ <option>Entertainment</option>
422
+ <option>Shopping</option>
423
+ <option>Utilities</option>
424
+ <option>Income</option>
425
+ </select>
426
+ </div>
427
+ <div class="flex-1 min-w-[200px]">
428
+ <label for="type" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
429
+ <select id="type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
430
+ <option>All Types</option>
431
+ <option>Income</option>
432
+ <option>Expense</option>
433
+ </select>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ <div class="divide-y divide-gray-200">
438
+ <!-- Transaction rows would be dynamically loaded here -->
439
+ <div class="px-6 py-4 hover:bg-gray-50">
440
+ <div class="flex items-center justify-between">
441
+ <div class="flex items-center">
442
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
443
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
444
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
445
+ </svg>
446
+ </div>
447
+ <div class="ml-4">
448
+ <p class="text-sm font-medium text-dark">Grocery Shopping</p>
449
+ <p class="text-xs text-gray-500">Supermarket</p>
450
+ </div>
451
+ </div>
452
+ <div class="flex items-center">
453
+ <div class="text-right mr-4">
454
+ <p class="text-sm font-medium text-danger">-$85.23</p>
455
+ <p class="text-xs text-gray-500">Today, 10:45 AM</p>
456
+ </div>
457
+ <div class="flex space-x-2">
458
+ <button class="text-gray-400 hover:text-primary">
459
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
460
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
461
+ </svg>
462
+ </button>
463
+ <button class="text-gray-400 hover:text-danger">
464
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
465
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
466
+ </svg>
467
+ </button>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ <!-- More transaction rows would go here -->
473
+ </div>
474
+ <div class="px-6 py-4 border-t border-gray-200">
475
+ <div class="flex items-center justify-between">
476
+ <div class="text-sm text-gray-500">Showing 1 to 10 of 25 transactions</div>
477
+ <div class="flex space-x-2">
478
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Previous</button>
479
+ <button class="px-3 py-1 bg-primary text-white rounded-lg">1</button>
480
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">2</button>
481
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Next</button>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Transaction Form Page (hidden by default) -->
490
+ <div id="transaction-form-page" class="hidden min-h-screen bg-light">
491
+ <div class="p-6">
492
+ <div class="bg-white rounded-lg shadow overflow-hidden max-w-2xl mx-auto">
493
+ <div class="px-6 py-4 border-b border-gray-200">
494
+ <h2 class="text-xl font-semibold text-dark">Add New Transaction</h2>
495
+ </div>
496
+ <div class="p-6">
497
+ <form>
498
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
499
+ <div>
500
+ <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
501
+ <div class="relative">
502
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
503
+ <span class="text-gray-500">$</span>
504
+ </div>
505
+ <input type="number" id="amount" class="block w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="0.00">
506
+ </div>
507
+ </div>
508
+ <div>
509
+ <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
510
+ <input type="date" id="date" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
511
+ </div>
512
+ <div>
513
+ <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
514
+ <select id="category" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
515
+ <option value="">Select a category</option>
516
+ <option value="food">Food & Dining</option>
517
+ <option value="transport">Transportation</option>
518
+ <option value="entertainment">Entertainment</option>
519
+ <option value="shopping">Shopping</option>
520
+ <option value="utilities">Utilities</option>
521
+ <option value="income">Income</option>
522
+ </select>
523
+ </div>
524
+ <div>
525
+ <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
526
+ <div class="flex space-x-4">
527
+ <label class="inline-flex items-center">
528
+ <input type="radio" name="type" value="expense" checked class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
529
+ <span class="ml-2 text-gray-700">Expense</span>
530
+ </label>
531
+ <label class="inline-flex items-center">
532
+ <input type="radio" name="type" value="income" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
533
+ <span class="ml-2 text-gray-700">Income</span>
534
+ </label>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ <div class="mb-6">
539
+ <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
540
+ <input type="text" id="description" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Optional note about this transaction">
541
+ </div>
542
+ <div class="flex justify-end space-x-3">
543
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
544
+ <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark">Save Transaction</button>
545
+ </div>
546
+ </form>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Reports Page (hidden by default) -->
553
+ <div id="reports-page" class="hidden min-h-screen bg-light">
554
+ <div class="p-6">
555
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
556
+ <div class="px-6 py-4 border-b border-gray-200">
557
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
558
+ <h2 class="text-xl font-semibold text-dark">Reports</h2>
559
+ <div class="mt-4 md:mt-0 flex space-x-3">
560
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center">
561
+ <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
562
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
563
+ </svg>
564
+ Export CSV
565
+ </button>
566
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center">
567
+ <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
568
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
569
+ </svg>
570
+ Export PDF
571
+ </button>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ <div class="p-6">
576
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
577
+ <div class="bg-white rounded-lg p-6">
578
+ <h3 class="text-lg font-semibold text-dark mb-4">Spending by Category</h3>
579
+ <div class="chart-container">
580
+ <canvas id="pieChart"></canvas>
581
+ </div>
582
+ </div>
583
+ <div class="bg-white rounded-lg p-6">
584
+ <h3 class="text-lg font-semibold text-dark mb-4">Monthly Trend</h3>
585
+ <div class="chart-container">
586
+ <canvas id="barChart"></canvas>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+
595
+ <!-- Budget Page (hidden by default) -->
596
+ <div id="budget-page" class="hidden min-h-screen bg-light">
597
+ <div class="p-6">
598
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
599
+ <div class="px-6 py-4 border-b border-gray-200">
600
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
601
+ <h2 class="text-xl font-semibold text-dark">Budget Settings</h2>
602
+ <button class="mt-4 md:mt-0 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark flex items-center">
603
+ <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
604
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
605
+ </svg>
606
+ Add Budget
607
+ </button>
608
+ </div>
609
+ </div>
610
+ <div class="p-6">
611
+ <div class="space-y-6">
612
+ <div class="border border-gray-200 rounded-lg p-4">
613
+ <div class="flex items-center justify-between mb-3">
614
+ <div class="flex items-center">
615
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
616
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
617
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
618
+ </svg>
619
+ </div>
620
+ <div class="ml-3">
621
+ <h3 class="text-sm font-medium text-dark">Groceries</h3>
622
+ <p class="text-xs text-gray-500">Food & Dining</p>
623
+ </div>
624
+ </div>
625
+ <div class="text-right">
626
+ <p class="text-sm font-medium text-dark">$350 / $500</p>
627
+ <p class="text-xs text-gray-500">70% used</p>
628
+ </div>
629
+ </div>
630
+ <div class="w-full bg-gray-200 rounded-full h-2">
631
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 70%"></div>
632
+ </div>
633
+ <div class="flex items-center justify-between mt-3">
634
+ <div class="flex items-center space-x-2">
635
+ <label class="inline-flex items-center">
636
+ <input type="checkbox" checked class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
637
+ <span class="ml-2 text-sm text-gray-700">Alert when 80%</span>
638
+ </label>
639
+ </div>
640
+ <div class="flex space-x-2">
641
+ <button class="text-gray-400 hover:text-primary">
642
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
643
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
644
+ </svg>
645
+ </button>
646
+ <button class="text-gray-400 hover:text-danger">
647
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
648
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
649
+ </svg>
650
+ </button>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ <!-- More budget cards would go here -->
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+
661
+ <!-- Profile Page (hidden by default) -->
662
+ <div id="profile-page" class="hidden min-h-screen bg-light">
663
+ <div class="p-6">
664
+ <div class="bg-white rounded-lg shadow overflow-hidden max-w-3xl mx-auto">
665
+ <div class="px-6 py-4 border-b border-gray-200">
666
+ <h2 class="text-xl font-semibold text-dark">Profile Settings</h2>
667
+ </div>
668
+ <div class="p-6">
669
+ <form>
670
+ <div class="mb-8">
671
+ <h3 class="text-lg font-medium text-dark mb-4">Personal Information</h3>
672
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
673
+ <div>
674
+ <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
675
+ <input type="text" id="first-name" value="Sarah" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
676
+ </div>
677
+ <div>
678
+ <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
679
+ <input type="text" id="last-name" value="Johnson" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
680
+ </div>
681
+ <div>
682
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
683
+ <input type="email" id="email" value="sarah@example.com" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
684
+ </div>
685
+ <div>
686
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
687
+ <input type="tel" id="phone" value="+1 (555) 123-4567" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
688
+ </div>
689
+ </div>
690
+ </div>
691
+ <div class="mb-8">
692
+ <h3 class="text-lg font-medium text-dark mb-4">Change Password</h3>
693
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
694
+ <div>
695
+ <label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
696
+ <input type="password" id="current-password" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
697
+ </div>
698
+ <div>
699
+ <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
700
+ <input type="password" id="new-password" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
701
+ </div>
702
+ <div>
703
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
704
+ <input type="password" id="confirm-password" class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
705
+ </div>
706
+ </div>
707
+ </div>
708
+ <div class="mb-8">
709
+ <h3 class="text-lg font-medium text-dark mb-4">Preferences</h3>
710
+ <div class="flex items-center justify-between">
711
+ <div>
712
+ <h4 class="text-base font-medium text-dark">Dark Mode</h4>
713
+ <p class="text-sm text-gray-500">Switch between light and dark theme</p>
714
+ </div>
715
+ <label class="relative inline-flex items-center cursor-pointer">
716
+ <input type="checkbox" value="" class="sr-only peer">
717
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-light rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
718
+ </label>
719
+ </div>
720
+ </div>
721
+ <div class="mb-8">
722
+ <h3 class="text-lg font-medium text-dark mb-4">Subscription</h3>
723
+ <div class="bg-gray-50 rounded-lg p-4">
724
+ <div class="flex items-center justify-between mb-2">
725
+ <div>
726
+ <h4 class="text-base font-medium text-dark">Premium Plan</h4>
727
+ <p class="text-sm text-gray-500">Next billing date: June 15, 2023</p>
728
+ </div>
729
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Active</span>
730
+ </div>
731
+ <p class="text-sm text-gray-500 mb-4">Unlock all features including advanced reports, unlimited budgets, and priority support.</p>
732
+ <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark">Upgrade Plan</button>
733
+ </div>
734
+ </div>
735
+ <div class="flex justify-end space-x-3">
736
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
737
+ <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark">Save Changes</button>
738
+ </div>
739
+ </form>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ </div>
744
+
745
+ <!-- 404 Page (hidden by default) -->
746
+ <div id="not-found-page" class="hidden min-h-screen bg-light flex items-center justify-center p-6">
747
+ <div class="text-center max-w-md">
748
+ <h1 class="text-6xl font-bold text-dark mb-4">404</h1>
749
+ <p class="text-xl text-gray-600 mb-8">Oops! The page you're looking for doesn't exist.</p>
750
+ <a href="#dashboard" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark inline-block">Back to Dashboard</a>
751
+ </div>
752
+ </div>
753
+
754
+ <script>
755
+ // Initialize charts
756
+ document.addEventListener('DOMContentLoaded', function() {
757
+ // Line Chart
758
+ const lineCtx = document.getElementById('lineChart').getContext('2d');
759
+ const lineChart = new Chart(lineCtx, {
760
+ type: 'line',
761
+ data: {
762
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
763
+ datasets: [
764
+ {
765
+ label: 'Income',
766
+ data: [3000, 3200, 3500, 3800, 4000, 4200],
767
+ borderColor: '#4F46E5',
768
+ backgroundColor: 'rgba(79, 70, 229, 0.05)',
769
+ tension: 0.3,
770
+ fill: true
771
+ },
772
+ {
773
+ label: 'Expenses',
774
+ data: [2200, 2400, 2600, 2800, 3000, 3200],
775
+ borderColor: '#EF4444',
776
+ backgroundColor: 'rgba(239, 68, 68, 0.05)',
777
+ tension: 0.3,
778
+ fill: true
779
+ }
780
+ ]
781
+ },
782
+ options: {
783
+ responsive: true,
784
+ plugins: {
785
+ legend: {
786
+ position: 'top',
787
+ }
788
+ },
789
+ scales: {
790
+ y: {
791
+ beginAtZero: true
792
+ }
793
+ }
794
+ }
795
+ });
796
+
797
+ // Doughnut Chart
798
+ const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');
799
+ const doughnutChart = new Chart(doughnutCtx, {
800
+ type: 'doughnut',
801
+ data: {
802
+ labels: ['Food', 'Transport', 'Entertainment', 'Shopping', 'Utilities'],
803
+ datasets: [{
804
+ data: [35, 20, 15, 20, 10],
805
+ backgroundColor: [
806
+ '#00B289',
807
+ '#4F46E5',
808
+ '#F59E0B',
809
+ '#EF4444',
810
+ '#10B981'
811
+ ],
812
+ borderWidth: 0
813
+ }]
814
+ },
815
+ options: {
816
+ responsive: true,
817
+ plugins: {
818
+ legend: {
819
+ position: 'right',
820
+ }
821
+ }
822
+ }
823
+ });
824
+
825
+ // Pie Chart (for Reports)
826
+ const pieCtx = document.getElementById('pieChart').getContext('2d');
827
+ const pieChart = new Chart(pieCtx, {
828
+ type: 'pie',
829
+ data: {
830
+ labels: ['Food', 'Transport', 'Entertainment', 'Shopping', 'Utilities'],
831
+ datasets: [{
832
+ data: [35, 20, 15, 20, 10],
833
+ backgroundColor: [
834
+ '#00B289',
835
+ '#4F46E5',
836
+ '#F59E0B',
837
+ '#EF4444',
838
+ '#10B981'
839
+ ],
840
+ borderWidth: 0
841
+ }]
842
+ },
843
+ options: {
844
+ responsive: true,
845
+ plugins: {
846
+ legend: {
847
+ position: 'right',
848
+ }
849
+ }
850
+ }
851
+ });
852
+
853
+ // Bar Chart (for Reports)
854
+ const barCtx = document.getElementById('barChart').getContext('2d');
855
+ const barChart = new Chart(barCtx, {
856
+ type: 'bar',
857
+ data: {
858
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
859
+ datasets: [
860
+ {
861
+ label: 'Income',
862
+ data: [3000, 3200, 3500, 3800, 4000, 4200],
863
+ backgroundColor: '#4F46E5',
864
+ },
865
+ {
866
+ label: 'Expenses',
867
+ data: [2200, 2400, 2600, 2800, 3000, 3200],
868
+ backgroundColor: '#EF4444',
869
+ }
870
+ ]
871
+ },
872
+ options: {
873
+ responsive: true,
874
+ plugins: {
875
+ legend: {
876
+ position: 'top',
877
+ }
878
+ },
879
+ scales: {
880
+ y: {
881
+ beginAtZero: true
882
+ }
883
+ }
884
+ }
885
+ });
886
+
887
+ // Simple routing functionality
888
+ const routes = {
889
+ '#dashboard': () => {
890
+ document.getElementById('app').style.display = 'block';
891
+ document.getElementById('landing-page').style.display = 'none';
892
+ document.getElementById('login-page').style.display = 'none';
893
+ document.getElementById('signup-page').style.display = 'none';
894
+ document.getElementById('transactions-page').style.display = 'none';
895
+ document.getElementById('transaction-form-page').style.display = 'none';
896
+ document.getElementById('reports-page').style.display = 'none';
897
+ document.getElementById('budget-page').style.display = 'none';
898
+ document.getElementById('profile-page').style.display = 'none';
899
+ document.getElementById('not-found-page').style.display = 'none';
900
+ document.getElementById('page-title').textContent = 'Dashboard';
901
+ },
902
+ '#transactions': () => {
903
+ document.getElementById('app').style.display = 'none';
904
+ document.getElementById('transactions-page').style.display = 'block';
905
+ document.getElementById('page-title').textContent = 'Transactions';
906
+ },
907
+ '#transaction': () => {
908
+ document.getElementById('app').style.display = 'none';
909
+ document.getElementById('transaction-form-page').style.display = 'block';
910
+ document.getElementById('page-title').textContent = 'Add Transaction';
911
+ },
912
+ '#reports': () => {
913
+ document.getElementById('app').style.display = 'none';
914
+ document.getElementById('reports-page').style.display = 'block';
915
+ document.getElementById('page-title').textContent = 'Reports';
916
+ },
917
+ '#budgets': () => {
918
+ document.getElementById('app').style.display = 'none';
919
+ document.getElementById('budget-page').style.display = 'block';
920
+ document.getElementById('page-title').textContent = 'Budgets';
921
+ },
922
+ '#profile': () => {
923
+ document.getElementById('app').style.display = 'none';
924
+ document.getElementById('profile-page').style.display = 'block';
925
+ document.getElementById('page-title').textContent = 'Profile';
926
+ },
927
+ '#login': () => {
928
+ document.getElementById('app').style.display = 'none';
929
+ document.getElementById('landing-page').style.display = 'none';
930
+ document.getElementById('login-page').style.display = 'flex';
931
+ },
932
+ '#signup': () => {
933
+ document.getElementById('app').style.display = 'none';
934
+ document.getElementById('landing-page').style.display = 'none';
935
+ document.getElementById('signup-page').style.display = 'flex';
936
+ },
937
+ '#404': () => {
938
+ document.getElementById('app').style.display = 'none';
939
+ document.getElementById('not-found-page').style.display = 'flex';
940
+ },
941
+ 'default': () => {
942
+ document.getElementById('app').style.display = 'none';
943
+ document.getElementById('landing-page').style.display = 'flex';
944
+ }
945
+ };
946
+
947
+ function handleRoute() {
948
+ const route = window.location.hash || 'default';
949
+ const routeHandler = routes[route] || routes['default'];
950
+ routeHandler();
951
+ }
952
+
953
+ window.addEventListener('hashchange', handleRoute);
954
+ handleRoute();
955
+
956
+ // Mobile menu toggle
957
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
958
+ const sidebar = document.getElementById('sidebar');
959
+ const sidebarOverlay = document.getElementById('sidebar-overlay');
960
+
961
+ mobileMenuButton.addEventListener('click', () => {
962
+ sidebar.classList.toggle('hidden');
963
+ sidebarOverlay.classList.toggle('hidden');
964
+ });
965
+
966
+ sidebarOverlay.addEventListener('click', () => {
967
+ sidebar.classList.add('hidden');
968
+ sidebarOverlay.classList.add('hidden');
969
+ });
970
+
971
+ // Simulate form submissions
972
+ document.querySelectorAll('form').forEach(form => {
973
+ form.addEventListener('submit', (e) => {
974
+ e.preventDefault();
975
+ alert('Form submitted! (This is a demo)');
976
+ });
977
+ });
978
+ });
979
+ </script>
980
+ <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=KushalSai2006/fin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
981
+ </html>
prompts.txt ADDED
File without changes