Hugging Face's logo

Spaces:
Noss
/
expensesync-dashboard
Running

App Files Community
Noss commited on
Commit
07688b1
·
verified ·
1 Parent(s): 7bb82cc

Make ui elements work, add a user settings dashboard

Browse files
Files changed (3) hide show
  1. README.md +8 -4
  2. index.html +428 -18
  3. settings.html +357 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Expensesync Dashboard
3
- emoji: 🔥
4
- colorFrom: gray
5
  colorTo: yellow
 
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: ExpenseSync Dashboard 💰
3
+ colorFrom: yellow
 
4
  colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,429 @@
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>ExpenseSync - Track Shared Expenses</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#3B82F6',
17
+ secondary: '#10B981',
18
+ accent: '#8B5CF6',
19
+ dark: '#1F2937',
20
+ light: '#F9FAFB'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ }
32
+
33
+ .gradient-bg {
34
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
35
+ }
36
+
37
+ .glass-effect {
38
+ background: rgba(255, 255, 255, 0.1);
39
+ backdrop-filter: blur(10px);
40
+ border: 1px solid rgba(255, 255, 255, 0.2);
41
+ }
42
+
43
+ .expense-card {
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .expense-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
50
+ }
51
+
52
+ .chart-container {
53
+ position: relative;
54
+ height: 300px;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-50">
59
+ <!-- Navigation -->
60
+ <nav class="bg-white shadow-sm border-b border-gray-200">
61
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
62
+ <div class="flex justify-between h-16">
63
+ <div class="flex items-center">
64
+ <div class="flex-shrink-0 flex items-center">
65
+ <i data-feather="dollar-sign" class="h-8 w-8 text-primary"></i>
66
+ <span class="ml-2 text-xl font-bold text-gray-900">ExpenseSync</span>
67
+ </div>
68
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
69
+ <a href="index.html" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
70
+ Dashboard
71
+ </a>
72
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
73
+ Expenses
74
+ </a>
75
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
76
+ Reports
77
+ </a>
78
+ <a href="settings.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
79
+ Settings
80
+ </a>
81
+ </div>
82
+ </div>
83
+ <div class="flex items-center">
84
+ <button class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-600 transition duration-200">
85
+ <i data-feather="plus" class="w-4 h-4 inline mr-1"></i>
86
+ Add Expense
87
+ </button>
88
+ <div class="ml-3 relative">
89
+ <div>
90
+ <button class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
91
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="Profile">
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </nav>
99
+
100
+ <!-- Main Content -->
101
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
102
+ <!-- Header -->
103
+ <div class="px-4 py-6 sm:px-0">
104
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
105
+ <div>
106
+ <h1 class="text-3xl font-bold text-gray-900">Expense Dashboard</h1>
107
+ <p class="mt-2 text-gray-600">Track and manage your shared expenses with your partner</p>
108
+ </div>
109
+ <div class="mt-4 md:mt-0">
110
+ <div class="flex space-x-3">
111
+ <div class="bg-white rounded-lg shadow-sm p-4 border border-gray-200">
112
+ <div class="flex items-center">
113
+ <div class="flex-shrink-0">
114
+ <i data-feather="user" class="h-6 w-6 text-blue-500"></i>
115
+ </div>
116
+ <div class="ml-4">
117
+ <p class="text-sm font-medium text-gray-500">You owe</p>
118
+ <p class="text-lg font-semibold text-gray-900">$42.50</p>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <div class="bg-white rounded-lg shadow-sm p-4 border border-gray-200">
123
+ <div class="flex items-center">
124
+ <div class="flex-shrink-0">
125
+ <i data-feather="users" class="h-6 w-6 text-green-500"></i>
126
+ </div>
127
+ <div class="ml-4">
128
+ <p class="text-sm font-medium text-gray-500">Partner owes</p>
129
+ <p class="text-lg font-semibold text-gray-900">$28.75</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Stats and Recent Expenses -->
139
+ <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-3">
140
+ <!-- Recent Expenses -->
141
+ <div class="lg:col-span-2">
142
+ <div class="bg-white shadow-sm rounded-lg overflow-hidden">
143
+ <div class="px-6 py-4 border-b border-gray-200">
144
+ <h3 class="text-lg font-medium text-gray-900">Recent Expenses</h3>
145
+ </div>
146
+ <div class="divide-y divide-gray-200">
147
+ <!-- Expense Item -->
148
+ <div class="px-6 py-4 expense-card">
149
+ <div class="flex items-center justify-between">
150
+ <div class="flex items-center">
151
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
152
+ <i data-feather="shopping-bag" class="h-5 w-5 text-blue-600"></i>
153
+ </div>
154
+ <div class="ml-4">
155
+ <p class="text-sm font-medium text-gray-900">Grocery Shopping</p>
156
+ <p class="text-sm text-gray-500">Paid by You • For Both</p>
157
+ </div>
158
+ </div>
159
+ <div class="text-right">
160
+ <p class="text-sm font-medium text-gray-900">$85.40</p>
161
+ <p class="text-sm text-gray-500">Today</p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Expense Item -->
167
+ <div class="px-6 py-4 expense-card">
168
+ <div class="flex items-center justify-between">
169
+ <div class="flex items-center">
170
+ <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center">
171
+ <i data-feather="home" class="h-5 w-5 text-green-600"></i>
172
+ </div>
173
+ <div class="ml-4">
174
+ <p class="text-sm font-medium text-gray-900">Electricity Bill</p>
175
+ <p class="text-sm text-gray-500">Paid by Partner • For Both</p>
176
+ </div>
177
+ </div>
178
+ <div class="text-right">
179
+ <p class="text-sm font-medium text-gray-900">$120.00</p>
180
+ <p class="text-sm text-gray-500">Yesterday</p>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Expense Item -->
186
+ <div class="px-6 py-4 expense-card">
187
+ <div class="flex items-center justify-between">
188
+ <div class="flex items-center">
189
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center">
190
+ <i data-feather="coffee" class="h-5 w-5 text-purple-600"></i>
191
+ </div>
192
+ <div class="ml-4">
193
+ <p class="text-sm font-medium text-gray-900">Coffee</p>
194
+ <p class="text-sm text-gray-500">Paid by You • For Yourself</p>
195
+ </div>
196
+ </div>
197
+ <div class="text-right">
198
+ <p class="text-sm font-medium text-gray-900">$4.50</p>
199
+ <p class="text-sm text-gray-500">2 days ago</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
205
+ <button class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
206
+ View All Expenses
207
+ </button>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Quick Add Expense & Categories -->
213
+ <div class="space-y-6">
214
+ <!-- Quick Add Form -->
215
+ <div class="bg-white shadow-sm rounded-lg p-6">
216
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Quick Add Expense</h3>
217
+ <form class="space-y-4">
218
+ <div>
219
+ <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label>
220
+ <input type="number" id="amount" name="amount" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
221
+ </div>
222
+ <div>
223
+ <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
224
+ <input type="text" id="description" name="description" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
225
+ </div>
226
+ <div class="grid grid-cols-2 gap-4">
227
+ <div>
228
+ <label for="paidBy" class="block text-sm font-medium text-gray-700">Paid By</label>
229
+ <select id="paidBy" name="paidBy" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
230
+ <option>You</option>
231
+ <option>Partner</option>
232
+ </select>
233
+ </div>
234
+ <div>
235
+ <label for="forWhom" class="block text-sm font-medium text-gray-700">For Whom</label>
236
+ <select id="forWhom" name="forWhom" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
237
+ <option>Both</option>
238
+ <option>Yourself</option>
239
+ <option>Partner</option>
240
+ </select>
241
+ </div>
242
+ </div>
243
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
244
+ Add Expense
245
+ </button>
246
+ </form>
247
+ </div>
248
+
249
+ <!-- Category Breakdown -->
250
+ <div class="bg-white shadow-sm rounded-lg p-6">
251
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Spending by Category</h3>
252
+ <div class="space-y-3">
253
+ <div class="flex items-center justify-between">
254
+ <div class="flex items-center">
255
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
256
+ <span class="text-sm text-gray-700">Food & Dining</span>
257
+ </div>
258
+ <span class="text-sm font-medium text-gray-900">$245.60</span>
259
+ </div>
260
+ <div class="flex items-center justify-between">
261
+ <div class="flex items-center">
262
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
263
+ <span class="text-sm text-gray-700">Utilities</span>
264
+ </div>
265
+ <span class="text-sm font-medium text-gray-900">$189.30</span>
266
+ </div>
267
+ <div class="flex items-center justify-between">
268
+ <div class="flex items-center">
269
+ <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
270
+ <span class="text-sm text-gray-700">Entertainment</span>
271
+ </div>
272
+ <span class="text-sm font-medium text-gray-900">$75.00</span>
273
+ </div>
274
+ <div class="flex items-center justify-between">
275
+ <div class="flex items-center">
276
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
277
+ <span class="text-sm text-gray-700">Transportation</span>
278
+ </div>
279
+ <span class="text-sm font-medium text-gray-900">$42.50</span>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Add Expense Modal -->
288
+ <div id="expenseModal" class="fixed inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
289
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
290
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
291
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
292
+ <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
293
+ <div>
294
+ <div class="mt-3 text-center sm:mt-5">
295
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
296
+ Add New Expense
297
+ </h3>
298
+ <div class="mt-6 space-y-4">
299
+ <div class="grid grid-cols-2 gap-4">
300
+ <div>
301
+ <label for="modal-date" class="block text-sm font-medium text-gray-700">Date</label>
302
+ <input type="date" id="modal-date" name="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
303
+ </div>
304
+ <div>
305
+ <label for="modal-amount" class="block text-sm font-medium text-gray-700">Amount</label>
306
+ <input type="number" id="modal-amount" name="amount" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
307
+ </div>
308
+ </div>
309
+ <div>
310
+ <label for="modal-account" class="block text-sm font-medium text-gray-700">Account</label>
311
+ <select id="modal-account" name="account" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
312
+ <option>Cash</option>
313
+ <option>Credit Card</option>
314
+ <option>Debit Card</option>
315
+ <option>Bank Transfer</option>
316
+ </select>
317
+ </div>
318
+ <div>
319
+ <label for="modal-description" class="block text-sm font-medium text-gray-700">Description</label>
320
+ <input type="text" id="modal-description" name="description" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
321
+ </div>
322
+ <div>
323
+ <label for="modal-payment" class="block text-sm font-medium text-gray-700">Payment Mode</label>
324
+ <select id="modal-payment" name="payment" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
325
+ <option>Online</option>
326
+ <option>Cash</option>
327
+ <option>Card</option>
328
+ <option>UPI</option>
329
+ </select>
330
+ </div>
331
+ <div>
332
+ <label for="modal-location" class="block text-sm font-medium text-gray-700">Location</label>
333
+ <input type="text" id="modal-location" name="location" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
334
+ </div>
335
+ <div>
336
+ <label for="modal-category" class="block text-sm font-medium text-gray-700">Category</label>
337
+ <select id="modal-category" name="category" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
338
+ <option>Food & Dining</option>
339
+ <option>Utilities</option>
340
+ <option>Entertainment</option>
341
+ <option>Transportation</option>
342
+ <option>Shopping</option>
343
+ <option>Healthcare</option>
344
+ <option>Other</option>
345
+ </select>
346
+ </div>
347
+ <div class="grid grid-cols-2 gap-4">
348
+ <div>
349
+ <label for="modal-paidBy" class="block text-sm font-medium text-gray-700">Paid By</label>
350
+ <select id="modal-paidBy" name="paidBy" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
351
+ <option>You</option>
352
+ <option>Partner</option>
353
+ </select>
354
+ </div>
355
+ <div>
356
+ <label for="modal-forWhom" class="block text-sm font-medium text-gray-700">For Whom</label>
357
+ <select id="modal-forWhom" name="forWhom" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
358
+ <option>Both</option>
359
+ <option>Yourself</option>
360
+ <option>Partner</option>
361
+ </select>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
367
+ <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:text-sm">
368
+ Add Expense
369
+ </button>
370
+ <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:text-sm">
371
+ Cancel
372
+ </button>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <script>
380
+ // Initialize Feather Icons
381
+ feather.replace();
382
+ // Modal functionality
383
+ const modal = document.getElementById('expenseModal');
384
+ const addExpenseBtn = document.querySelector('button.bg-primary');
385
+ const cancelBtn = modal.querySelector('button[type="button"]:nth-child(2)');
386
+ const modalCloseBtn = modal.querySelector('.bg-gray-500');
387
+
388
+ addExpenseBtn.addEventListener('click', () => {
389
+ modal.classList.remove('hidden');
390
+ });
391
+
392
+ // Close modal when clicking cancel or outside
393
+ cancelBtn.addEventListener('click', () => {
394
+ modal.classList.add('hidden');
395
+ });
396
+
397
+ modalCloseBtn.addEventListener('click', () => {
398
+ modal.classList.add('hidden');
399
+ });
400
+
401
+ modal.addEventListener('click', (e) => {
402
+ if (e.target === modal) {
403
+ modal.classList.add('hidden');
404
+ }
405
+ });
406
+ // Set today's date as default
407
+ document.getElementById('modal-date').valueAsDate = new Date();
408
+ // Simple animations for cards
409
+ document.addEventListener('DOMContentLoaded', function() {
410
+ const cards = document.querySelectorAll('.expense-card');
411
+ cards.forEach((card, index) => {
412
+ card.style.opacity = '0';
413
+ card.style.transform = 'translateY(20px)';
414
+
415
+ setTimeout(() => {
416
+ card.style.transition = 'all 0.5s ease';
417
+ card.style.opacity = '1';
418
+ card.style.transform = 'translateY(0)';
419
+ }, index * 100);
420
+ });
421
+
422
+ // Set form values
423
+ document.getElementById('modal-date').valueAsDate = new Date();
424
+ document.getElementById('modal-amount').value = '';
425
+ document.getElementById('modal-description').value = '';
426
+ });
427
+ </script>
428
+ </body>
429
  </html>
settings.html ADDED
@@ -0,0 +1,357 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Settings - ExpenseSync</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#3B82F6',
17
+ secondary: '#10B981',
18
+ accent: '#8B5CF6',
19
+ dark: '#1F2937',
20
+ light: '#F9FAFB'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ }
32
+
33
+ .settings-nav-item.active {
34
+ background-color: #EFF6FF;
35
+ color: #3B82F6;
36
+ border-left: 3px solid #3B82F6;
37
+ }
38
+
39
+ .settings-nav-item:hover:not(.active) {
40
+ background-color: #F9FAFB;
41
+ }
42
+
43
+ .form-input:focus, .form-select:focus {
44
+ border-color: #3B82F6;
45
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
46
+ }
47
+
48
+ .toggle-switch {
49
+ position: relative;
50
+ display: inline-block;
51
+ width: 50px;
52
+ height: 24px;
53
+ }
54
+
55
+ .toggle-switch input {
56
+ opacity: 0;
57
+ width: 0;
58
+ height: 0;
59
+ }
60
+
61
+ .slider {
62
+ position: absolute;
63
+ cursor: pointer;
64
+ top: 0;
65
+ left: 0;
66
+ right: 0;
67
+ bottom: 0;
68
+ background-color: #ccc;
69
+ transition: .4s;
70
+ border-radius: 24px;
71
+ }
72
+
73
+ .slider:before {
74
+ position: absolute;
75
+ content: "";
76
+ height: 16px;
77
+ width: 16px;
78
+ left: 4px;
79
+ bottom: 4px;
80
+ background-color: white;
81
+ transition: .4s;
82
+ border-radius: 50%;
83
+ }
84
+
85
+ input:checked + .slider {
86
+ background-color: #3B82F6;
87
+ }
88
+
89
+ input:checked + .slider:before {
90
+ transform: translateX(26px);
91
+ }
92
+ </style>
93
+ </head>
94
+ <body class="bg-gray-50">
95
+ <!-- Navigation -->
96
+ <nav class="bg-white shadow-sm border-b border-gray-200">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="flex justify-between h-16">
99
+ <div class="flex items-center">
100
+ <div class="flex-shrink-0 flex items-center">
101
+ <i data-feather="dollar-sign" class="h-8 w-8 text-primary"></i>
102
+ <span class="ml-2 text-xl font-bold text-gray-900">ExpenseSync</span>
103
+ </div>
104
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
105
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
106
+ Dashboard
107
+ </a>
108
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
109
+ Expenses
110
+ </a>
111
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
112
+ Reports
113
+ </a>
114
+ <a href="settings.html" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
115
+ Settings
116
+ </a>
117
+ </div>
118
+ </div>
119
+ <div class="flex items-center">
120
+ <div class="ml-3 relative">
121
+ <div>
122
+ <button class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
123
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="Profile">
124
+ </button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </nav>
131
+
132
+ <!-- Main Content -->
133
+ <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
134
+ <div class="px-4 py-6 sm:px-0">
135
+ <h1 class="text-3xl font-bold text-gray-900">Settings</h1>
136
+ <p class="mt-2 text-gray-600">Manage your account settings and preferences</p>
137
+ </div>
138
+
139
+ <div class="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-6">
140
+ <!-- Settings Navigation -->
141
+ <div class="lg:col-span-1">
142
+ <div class="bg-white shadow-sm rounded-lg overflow-hidden">
143
+ <nav class="space-y-1">
144
+ <a href="#" class="settings-nav-item active group flex items-center px-4 py-3 text-sm font-medium">
145
+ <i data-feather="user" class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"></i>
146
+ <span>Profile</span>
147
+ </a>
148
+ <a href="#" class="settings-nav-item group flex items-center px-4 py-3 text-sm font-medium">
149
+ <i data-feather="users" class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"></i>
150
+ <span>Partner Settings</span>
151
+ </a>
152
+ <a href="#" class="settings-nav-item group flex items-center px-4 py-3 text-sm font-medium">
153
+ <i data-feather="credit-card" class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"></i>
154
+ <span>Accounts</span>
155
+ </a>
156
+ <a href="#" class="settings-nav-item group flex items-center px-4 py-3 text-sm font-medium">
157
+ <i data-feather="tag" class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"></i>
158
+ <span>Categories</span>
159
+ </a>
160
+ <a href="#" class="settings-nav-item group flex items-center px-4 py-3 text-sm font-medium">
161
+ <i data-feather="bell" class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"></i>
162
+ <span>Notifications</span>
163
+ </a>
164
+ <a href="#" class="settings-nav-item group flex items-center px-4 py-3 text-sm font-medium">
165
+ <i data-feather="lock" class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"></i>
166
+ <span>Privacy</span>
167
+ </a>
168
+ </nav>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Settings Content -->
173
+ <div class="lg:col-span-3">
174
+ <div class="bg-white shadow-sm rounded-lg overflow-hidden">
175
+ <div class="px-6 py-5 border-b border-gray-200">
176
+ <h2 class="text-xl font-semibold text-gray-900">Profile Settings</h2>
177
+ <p class="mt-1 text-sm text-gray-500">Update your profile information and preferences</p>
178
+ </div>
179
+
180
+ <div class="px-6 py-6">
181
+ <form class="space-y-8 divide-y divide-gray-200">
182
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
183
+ <div class="sm:col-span-6">
184
+ <label class="block text-sm font-medium text-gray-700">Profile Photo</label>
185
+ <div class="mt-1 flex items-center">
186
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Profile">
187
+ <div class="ml-4 flex">
188
+ <div class="relative flex cursor-pointer bg-white rounded-md font-medium text-primary hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary">
189
+ <span>Change</span>
190
+ <input type="file" class="sr-only">
191
+ </div>
192
+ <button type="button" class="ml-3 bg-transparent rounded-md font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
193
+ Remove
194
+ </button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="sm:col-span-3">
200
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
201
+ <div class="mt-1">
202
+ <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="form-input block w-full shadow-sm sm:text-sm rounded-md">
203
+ </div>
204
+ </div>
205
+
206
+ <div class="sm:col-span-3">
207
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label>
208
+ <div class="mt-1">
209
+ <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="form-input block w-full shadow-sm sm:text-sm rounded-md">
210
+ </div>
211
+ </div>
212
+
213
+ <div class="sm:col-span-4">
214
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
215
+ <div class="mt-1">
216
+ <input id="email" name="email" type="email" autocomplete="email" class="form-input block w-full shadow-sm sm:text-sm rounded-md">
217
+ </div>
218
+ </div>
219
+
220
+ <div class="sm:col-span-4">
221
+ <label for="currency" class="block text-sm font-medium text-gray-700">Default Currency</label>
222
+ <div class="mt-1">
223
+ <select id="currency" name="currency" class="form-select block w-full shadow-sm sm:text-sm rounded-md">
224
+ <option>USD - US Dollar</option>
225
+ <option>EUR - Euro</option>
226
+ <option>GBP - British Pound</option>
227
+ <option>INR - Indian Rupee</option>
228
+ <option>JPY - Japanese Yen</option>
229
+ </select>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="sm:col-span-6">
234
+ <label for="partner-email" class="block text-sm font-medium text-gray-700">Partner's Email</label>
235
+ <div class="mt-1">
236
+ <input type="email" name="partner-email" id="partner-email" class="form-input block w-full shadow-sm sm:text-sm rounded-md">
237
+ </div>
238
+ <p class="mt-2 text-sm text-gray-500">Enter your partner's email to sync expenses</p>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="pt-8">
243
+ <div>
244
+ <h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
245
+ <p class="mt-1 text-sm text-gray-500">Configure how you receive notifications</p>
246
+ </div>
247
+ <div class="mt-6 space-y-6">
248
+ <div class="flex items-center justify-between">
249
+ <div>
250
+ <p class="text-sm font-medium text-gray-900">Email notifications</p>
251
+ <p class="text-sm text-gray-500">Receive email updates about your expenses</p>
252
+ </div>
253
+ <label class="toggle-switch">
254
+ <input type="checkbox" checked>
255
+ <span class="slider"></span>
256
+ </label>
257
+ </div>
258
+ <div class="flex items-center justify-between">
259
+ <div>
260
+ <p class="text-sm font-medium text-gray-900">Weekly summary</p>
261
+ <p class="text-sm text-gray-500">Get a weekly summary of your expenses</p>
262
+ </div>
263
+ <label class="toggle-switch">
264
+ <input type="checkbox" checked>
265
+ <span class="slider"></span>
266
+ </label>
267
+ </div>
268
+ <div class="flex items-center justify-between">
269
+ <div>
270
+ <p class="text-sm font-medium text-gray-900">Partner activity</p>
271
+ <p class="text-sm text-gray-500">Notify me when my partner adds an expense</p>
272
+ </div>
273
+ <label class="toggle-switch">
274
+ <input type="checkbox">
275
+ <span class="slider"></span>
276
+ </label>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="pt-8">
282
+ <div>
283
+ <h3 class="text-lg font-medium leading-6 text-gray-900">Privacy</h3>
284
+ <p class="mt-1 text-sm text-gray-500">Control who can see your data</p>
285
+ </div>
286
+ <div class="mt-6 space-y-6">
287
+ <div class="flex items-center justify-between">
288
+ <div>
289
+ <p class="text-sm font-medium text-gray-900">Make expenses public</p>
290
+ <p class="text-sm text-gray-500">Allow others to view your expense data</p>
291
+ </div>
292
+ <label class="toggle-switch">
293
+ <input type="checkbox">
294
+ <span class="slider"></span>
295
+ </label>
296
+ </div>
297
+ <div class="flex items-center justify-between">
298
+ <div>
299
+ <p class="text-sm font-medium text-gray-900">Share with partner</p>
300
+ <p class="text-sm text-gray-500">Share all expenses with your partner</p>
301
+ </div>
302
+ <label class="toggle-switch">
303
+ <input type="checkbox" checked>
304
+ <span class="slider"></span>
305
+ </label>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="pt-5">
311
+ <div class="flex justify-end">
312
+ <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
313
+ Cancel
314
+ </button>
315
+ <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
316
+ Save
317
+ </button>
318
+ </div>
319
+ </div>
320
+ </form>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <script>
328
+ // Initialize Feather Icons
329
+ feather.replace();
330
+
331
+ // Settings navigation
332
+ document.addEventListener('DOMContentLoaded', function() {
333
+ const navItems = document.querySelectorAll('.settings-nav-item');
334
+
335
+ navItems.forEach(item => {
336
+ item.addEventListener('click', function(e) {
337
+ e.preventDefault();
338
+
339
+ // Remove active class from all items
340
+ navItems.forEach(navItem => {
341
+ navItem.classList.remove('active');
342
+ });
343
+
344
+ // Add active class to clicked item
345
+ this.classList.add('active');
346
+ });
347
+ });
348
+
349
+ // Set form values
350
+ document.getElementById('first-name').value = 'Alex';
351
+ document.getElementById('last-name').value = 'Johnson';
352
+ document.getElementById('email').value = 'alex.johnson@example.com';
353
+ document.getElementById('partner-email').value = 'sarah.johnson@example.com';
354
+ });
355
+ </script>
356
+ </body>
357
+ </html>