Hugging Face's logo

Spaces:
defaultdolphin
/
anycoder-b738a38b
Running

App Files Community
defaultdolphin commited on
Commit
96fe1b5
·
verified ·
1 Parent(s): 5c35fe1

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1261 -19
index.html CHANGED
@@ -1,19 +1,1261 @@
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>Mortgage Leads & Expense Manager</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #2563eb;
11
+ --primary-dark: #1d4ed8;
12
+ --secondary: #7c3aed;
13
+ --success: #10b981;
14
+ --warning: #f59e0b;
15
+ --danger: #ef4444;
16
+ --dark: #1e293b;
17
+ --light: #f8fafc;
18
+ --gray: #64748b;
19
+ --white: #ffffff;
20
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
21
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
22
+ --gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
30
+ }
31
+
32
+ body {
33
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
34
+ min-height: 100vh;
35
+ color: var(--white);
36
+ overflow-x: hidden;
37
+ }
38
+
39
+ /* Background Pattern */
40
+ body::before {
41
+ content: '';
42
+ position: fixed;
43
+ top: 0;
44
+ left: 0;
45
+ width: 100%;
46
+ height: 100%;
47
+ background-image:
48
+ radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
49
+ radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
50
+ pointer-events: none;
51
+ z-index: -1;
52
+ }
53
+
54
+ /* Header */
55
+ header {
56
+ background: rgba(30, 41, 59, 0.8);
57
+ backdrop-filter: blur(20px);
58
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
59
+ padding: 1rem 2rem;
60
+ position: sticky;
61
+ top: 0;
62
+ z-index: 100;
63
+ }
64
+
65
+ .header-content {
66
+ max-width: 1400px;
67
+ margin: 0 auto;
68
+ display: flex;
69
+ justify-content: space-between;
70
+ align-items: center;
71
+ flex-wrap: wrap;
72
+ gap: 1rem;
73
+ }
74
+
75
+ .logo {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 0.75rem;
79
+ }
80
+
81
+ .logo-icon {
82
+ width: 42px;
83
+ height: 42px;
84
+ background: var(--gradient);
85
+ border-radius: 12px;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ font-size: 1.25rem;
90
+ box-shadow: var(--shadow);
91
+ }
92
+
93
+ .logo h1 {
94
+ font-size: 1.5rem;
95
+ font-weight: 700;
96
+ background: var(--gradient);
97
+ -webkit-background-clip: text;
98
+ -webkit-text-fill-color: transparent;
99
+ background-clip: text;
100
+ }
101
+
102
+ .header-links {
103
+ display: flex;
104
+ gap: 1.5rem;
105
+ align-items: center;
106
+ }
107
+
108
+ .header-links a {
109
+ color: var(--gray);
110
+ text-decoration: none;
111
+ font-weight: 500;
112
+ transition: color 0.3s;
113
+ }
114
+
115
+ .header-links a:hover {
116
+ color: var(--white);
117
+ }
118
+
119
+ .anycoder-link {
120
+ background: rgba(255, 255, 255, 0.1);
121
+ padding: 0.5rem 1rem;
122
+ border-radius: 8px;
123
+ font-size: 0.875rem;
124
+ color: var(--gray);
125
+ text-decoration: none;
126
+ transition: all 0.3s;
127
+ }
128
+
129
+ .anycoder-link:hover {
130
+ background: var(--primary);
131
+ color: var(--white);
132
+ }
133
+
134
+ /* Main Container */
135
+ .container {
136
+ max-width: 1400px;
137
+ margin: 0 auto;
138
+ padding: 2rem;
139
+ }
140
+
141
+ /* Stats Cards */
142
+ .stats-grid {
143
+ display: grid;
144
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
145
+ gap: 1.5rem;
146
+ margin-bottom: 2rem;
147
+ }
148
+
149
+ .stat-card {
150
+ background: rgba(30, 41, 59, 0.6);
151
+ backdrop-filter: blur(10px);
152
+ border: 1px solid rgba(255, 255, 255, 0.1);
153
+ border-radius: 16px;
154
+ padding: 1.5rem;
155
+ transition: transform 0.3s, box-shadow 0.3s;
156
+ }
157
+
158
+ .stat-card:hover {
159
+ transform: translateY(-4px);
160
+ box-shadow: var(--shadow-lg);
161
+ }
162
+
163
+ .stat-card-header {
164
+ display: flex;
165
+ justify-content: space-between;
166
+ align-items: flex-start;
167
+ margin-bottom: 1rem;
168
+ }
169
+
170
+ .stat-icon {
171
+ width: 48px;
172
+ height: 48px;
173
+ border-radius: 12px;
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ font-size: 1.25rem;
178
+ }
179
+
180
+ .stat-icon.blue { background: rgba(37, 99, 235, 0.2); color: #3b82f6; }
181
+ .stat-icon.green { background: rgba(16, 185, 129, 0.2); color: #10b981; }
182
+ .stat-icon.purple { background: rgba(124, 58, 237, 0.2); color: #8b5cf6; }
183
+ .stat-icon.orange { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
184
+
185
+ .stat-trend {
186
+ font-size: 0.875rem;
187
+ padding: 0.25rem 0.5rem;
188
+ border-radius: 6px;
189
+ }
190
+
191
+ .stat-trend.up { background: rgba(16, 185, 129, 0.2); color: #10b981; }
192
+ .stat-trend.down { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
193
+
194
+ .stat-value {
195
+ font-size: 2rem;
196
+ font-weight: 700;
197
+ margin-bottom: 0.25rem;
198
+ }
199
+
200
+ .stat-label {
201
+ color: var(--gray);
202
+ font-size: 0.875rem;
203
+ }
204
+
205
+ /* Main Grid */
206
+ .main-grid {
207
+ display: grid;
208
+ grid-template-columns: 1fr 1fr;
209
+ gap: 1.5rem;
210
+ }
211
+
212
+ @media (max-width: 1024px) {
213
+ .main-grid {
214
+ grid-template-columns: 1fr;
215
+ }
216
+ }
217
+
218
+ /* Cards */
219
+ .card {
220
+ background: rgba(30, 41, 59, 0.6);
221
+ backdrop-filter: blur(10px);
222
+ border: 1px solid rgba(255, 255, 255, 0.1);
223
+ border-radius: 16px;
224
+ overflow: hidden;
225
+ }
226
+
227
+ .card-header {
228
+ padding: 1.25rem 1.5rem;
229
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
230
+ display: flex;
231
+ justify-content: space-between;
232
+ align-items: center;
233
+ }
234
+
235
+ .card-title {
236
+ font-size: 1.125rem;
237
+ font-weight: 600;
238
+ display: flex;
239
+ align-items: center;
240
+ gap: 0.75rem;
241
+ }
242
+
243
+ .card-title i {
244
+ color: var(--primary);
245
+ }
246
+
247
+ .card-body {
248
+ padding: 1.5rem;
249
+ }
250
+
251
+ /* Tabs */
252
+ .tabs {
253
+ display: flex;
254
+ gap: 0.5rem;
255
+ padding: 0.5rem;
256
+ background: rgba(0, 0, 0, 0.2);
257
+ border-radius: 10px;
258
+ margin-bottom: 1.5rem;
259
+ }
260
+
261
+ .tab {
262
+ flex: 1;
263
+ padding: 0.75rem 1rem;
264
+ border: none;
265
+ background: transparent;
266
+ color: var(--gray);
267
+ font-size: 0.875rem;
268
+ font-weight: 500;
269
+ border-radius: 8px;
270
+ cursor: pointer;
271
+ transition: all 0.3s;
272
+ }
273
+
274
+ .tab.active {
275
+ background: var(--gradient);
276
+ color: var(--white);
277
+ }
278
+
279
+ .tab:hover:not(.active) {
280
+ color: var(--white);
281
+ }
282
+
283
+ /* Forms */
284
+ .form-grid {
285
+ display: grid;
286
+ grid-template-columns: 1fr 1fr;
287
+ gap: 1rem;
288
+ }
289
+
290
+ @media (max-width: 600px) {
291
+ .form-grid {
292
+ grid-template-columns: 1fr;
293
+ }
294
+ }
295
+
296
+ .form-group {
297
+ margin-bottom: 1rem;
298
+ }
299
+
300
+ .form-group.full-width {
301
+ grid-column: 1 / -1;
302
+ }
303
+
304
+ .form-label {
305
+ display: block;
306
+ font-size: 0.875rem;
307
+ font-weight: 500;
308
+ margin-bottom: 0.5rem;
309
+ color: var(--gray);
310
+ }
311
+
312
+ .form-input, .form-select {
313
+ width: 100%;
314
+ padding: 0.75rem 1rem;
315
+ background: rgba(0, 0, 0, 0.2);
316
+ border: 1px solid rgba(255, 255, 255, 0.1);
317
+ border-radius: 10px;
318
+ color: var(--white);
319
+ font-size: 0.9rem;
320
+ transition: border-color 0.3s, box-shadow 0.3s;
321
+ }
322
+
323
+ .form-input:focus, .form-select:focus {
324
+ outline: none;
325
+ border-color: var(--primary);
326
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
327
+ }
328
+
329
+ .form-input::placeholder {
330
+ color: var(--gray);
331
+ }
332
+
333
+ .form-select option {
334
+ background: var(--dark);
335
+ }
336
+
337
+ /* Buttons */
338
+ .btn {
339
+ padding: 0.75rem 1.5rem;
340
+ border: none;
341
+ border-radius: 10px;
342
+ font-size: 0.9rem;
343
+ font-weight: 600;
344
+ cursor: pointer;
345
+ transition: all 0.3s;
346
+ display: inline-flex;
347
+ align-items: center;
348
+ justify-content: center;
349
+ gap: 0.5rem;
350
+ }
351
+
352
+ .btn-primary {
353
+ background: var(--gradient);
354
+ color: var(--white);
355
+ box-shadow: var(--shadow);
356
+ }
357
+
358
+ .btn-primary:hover {
359
+ transform: translateY(-2px);
360
+ box-shadow: var(--shadow-lg);
361
+ }
362
+
363
+ .btn-secondary {
364
+ background: rgba(255, 255, 255, 0.1);
365
+ color: var(--white);
366
+ }
367
+
368
+ .btn-secondary:hover {
369
+ background: rgba(255, 255, 255, 0.2);
370
+ }
371
+
372
+ .btn-danger {
373
+ background: rgba(239, 68, 68, 0.2);
374
+ color: #ef4444;
375
+ }
376
+
377
+ .btn-danger:hover {
378
+ background: #ef4444;
379
+ color: var(--white);
380
+ }
381
+
382
+ .btn-group {
383
+ display: flex;
384
+ gap: 0.75rem;
385
+ margin-top: 1.5rem;
386
+ }
387
+
388
+ /* Expense Table */
389
+ .expense-table {
390
+ width: 100%;
391
+ border-collapse: collapse;
392
+ }
393
+
394
+ .expense-table th,
395
+ .expense-table td {
396
+ padding: 1rem;
397
+ text-align: left;
398
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
399
+ }
400
+
401
+ .expense-table th {
402
+ font-size: 0.75rem;
403
+ text-transform: uppercase;
404
+ letter-spacing: 0.05em;
405
+ color: var(--gray);
406
+ font-weight: 600;
407
+ }
408
+
409
+ .expense-table td {
410
+ font-size: 0.9rem;
411
+ }
412
+
413
+ .expense-table tbody tr {
414
+ transition: background 0.2s;
415
+ }
416
+
417
+ .expense-table tbody tr:hover {
418
+ background: rgba(255, 255, 255, 0.05);
419
+ }
420
+
421
+ .expense-category {
422
+ display: inline-flex;
423
+ align-items: center;
424
+ gap: 0.5rem;
425
+ padding: 0.25rem 0.75rem;
426
+ border-radius: 6px;
427
+ font-size: 0.8rem;
428
+ font-weight: 500;
429
+ }
430
+
431
+ .expense-category.mortgage { background: rgba(37, 99, 235, 0.2); color: #3b82f6; }
432
+ .expense-category.taxes { background: rgba(124, 58, 237, 0.2); color: #8b5cf6; }
433
+ .expense-category.insurance { background: rgba(16, 185, 129, 0.2); color: #10b981; }
434
+ .expense-category.maintenance { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
435
+ .expense-category.utilities { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
436
+
437
+ .status-badge {
438
+ padding: 0.25rem 0.75rem;
439
+ border-radius: 20px;
440
+ font-size: 0.75rem;
441
+ font-weight: 600;
442
+ }
443
+
444
+ .status-badge.new { background: rgba(37, 99, 235, 0.2); color: #3b82f6; }
445
+ .status-badge.contacted { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
446
+ .status-badge.qualified { background: rgba(16, 185, 129, 0.2); color: #10b981; }
447
+ .status-badge.closed { background: rgba(124, 58, 237, 0.2); color: #8b5cf6; }
448
+
449
+ /* Calculator Result */
450
+ .calculator-result {
451
+ background: rgba(0, 0, 0, 0.3);
452
+ border-radius: 12px;
453
+ padding: 1.5rem;
454
+ margin-top: 1.5rem;
455
+ }
456
+
457
+ .result-row {
458
+ display: flex;
459
+ justify-content: space-between;
460
+ align-items: center;
461
+ padding: 0.75rem 0;
462
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
463
+ }
464
+
465
+ .result-row:last-child {
466
+ border-bottom: none;
467
+ }
468
+
469
+ .result-label {
470
+ color: var(--gray);
471
+ font-size: 0.9rem;
472
+ }
473
+
474
+ .result-value {
475
+ font-weight: 600;
476
+ font-size: 1.1rem;
477
+ }
478
+
479
+ .result-value.highlight {
480
+ color: var(--success);
481
+ font-size: 1.5rem;
482
+ }
483
+
484
+ /* Lead List */
485
+ .lead-list {
486
+ max-height: 400px;
487
+ overflow-y: auto;
488
+ }
489
+
490
+ .lead-item {
491
+ display: flex;
492
+ align-items: center;
493
+ gap: 1rem;
494
+ padding: 1rem;
495
+ background: rgba(0, 0, 0, 0.2);
496
+ border-radius: 10px;
497
+ margin-bottom: 0.75rem;
498
+ transition: all 0.3s;
499
+ }
500
+
501
+ .lead-item:hover {
502
+ background: rgba(0, 0, 0, 0.3);
503
+ }
504
+
505
+ .lead-avatar {
506
+ width: 44px;
507
+ height: 44px;
508
+ border-radius: 10px;
509
+ background: var(--gradient);
510
+ display: flex;
511
+ align-items: center;
512
+ justify-content: center;
513
+ font-weight: 600;
514
+ font-size: 1rem;
515
+ flex-shrink: 0;
516
+ }
517
+
518
+ .lead-info {
519
+ flex: 1;
520
+ min-width: 0;
521
+ }
522
+
523
+ .lead-name {
524
+ font-weight: 600;
525
+ margin-bottom: 0.25rem;
526
+ white-space: nowrap;
527
+ overflow: hidden;
528
+ text-overflow: ellipsis;
529
+ }
530
+
531
+ .lead-detail {
532
+ font-size: 0.8rem;
533
+ color: var(--gray);
534
+ }
535
+
536
+ .lead-actions {
537
+ display: flex;
538
+ gap: 0.5rem;
539
+ }
540
+
541
+ .lead-actions button {
542
+ width: 32px;
543
+ height: 32px;
544
+ border: none;
545
+ border-radius: 8px;
546
+ cursor: pointer;
547
+ transition: all 0.3s;
548
+ display: flex;
549
+ align-items: center;
550
+ justify-content: center;
551
+ }
552
+
553
+ .lead-actions .view-btn {
554
+ background: rgba(37, 99, 235, 0.2);
555
+ color: #3b82f6;
556
+ }
557
+
558
+ .lead-actions .delete-btn {
559
+ background: rgba(239, 68, 68, 0.2);
560
+ color: #ef4444;
561
+ }
562
+
563
+ .lead-actions button:hover {
564
+ transform: scale(1.1);
565
+ }
566
+
567
+ /* Chart Placeholder */
568
+ .chart-container {
569
+ height: 200px;
570
+ display: flex;
571
+ align-items: flex-end;
572
+ gap: 0.5rem;
573
+ padding: 1rem 0;
574
+ }
575
+
576
+ .chart-bar {
577
+ flex: 1;
578
+ background: var(--gradient);
579
+ border-radius: 6px 6px 0 0;
580
+ transition: height 0.5s ease;
581
+ position: relative;
582
+ }
583
+
584
+ .chart-bar::after {
585
+ content: attr(data-label);
586
+ position: absolute;
587
+ bottom: -25px;
588
+ left: 50%;
589
+ transform: translateX(-50%);
590
+ font-size: 0.7rem;
591
+ color: var(--gray);
592
+ white-space: nowrap;
593
+ }
594
+
595
+ /* Empty State */
596
+ .empty-state {
597
+ text-align: center;
598
+ padding: 3rem;
599
+ color: var(--gray);
600
+ }
601
+
602
+ .empty-state i {
603
+ font-size: 3rem;
604
+ margin-bottom: 1rem;
605
+ opacity: 0.5;
606
+ }
607
+
608
+ /* Animations */
609
+ @keyframes fadeIn {
610
+ from { opacity: 0; transform: translateY(10px); }
611
+ to { opacity: 1; transform: translateY(0); }
612
+ }
613
+
614
+ @keyframes pulse {
615
+ 0%, 100% { transform: scale(1); }
616
+ 50% { transform: scale(1.05); }
617
+ }
618
+
619
+ .fade-in {
620
+ animation: fadeIn 0.4s ease forwards;
621
+ }
622
+
623
+ /* Modal */
624
+ .modal-overlay {
625
+ position: fixed;
626
+ top: 0;
627
+ left: 0;
628
+ width: 100%;
629
+ height: 100%;
630
+ background: rgba(0, 0, 0, 0.7);
631
+ backdrop-filter: blur(4px);
632
+ display: none;
633
+ align-items: center;
634
+ justify-content: center;
635
+ z-index: 1000;
636
+ padding: 1rem;
637
+ }
638
+
639
+ .modal-overlay.active {
640
+ display: flex;
641
+ }
642
+
643
+ .modal {
644
+ background: var(--dark);
645
+ border: 1px solid rgba(255, 255, 255, 0.1);
646
+ border-radius: 16px;
647
+ max-width: 500px;
648
+ width: 100%;
649
+ max-height: 90vh;
650
+ overflow-y: auto;
651
+ animation: fadeIn 0.3s ease;
652
+ }
653
+
654
+ .modal-header {
655
+ padding: 1.25rem 1.5rem;
656
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
657
+ display: flex;
658
+ justify-content: space-between;
659
+ align-items: center;
660
+ }
661
+
662
+ .modal-header h3 {
663
+ font-size: 1.125rem;
664
+ }
665
+
666
+ .modal-close {
667
+ width: 32px;
668
+ height: 32px;
669
+ border: none;
670
+ background: rgba(255, 255, 255, 0.1);
671
+ color: var(--white);
672
+ border-radius: 8px;
673
+ cursor: pointer;
674
+ transition: background 0.3s;
675
+ }
676
+
677
+ .modal-close:hover {
678
+ background: rgba(239, 68, 68, 0.5);
679
+ }
680
+
681
+ .modal-body {
682
+ padding: 1.5rem;
683
+ }
684
+
685
+ /* Scrollbar */
686
+ ::-webkit-scrollbar {
687
+ width: 8px;
688
+ }
689
+
690
+ ::-webkit-scrollbar-track {
691
+ background: rgba(0, 0, 0, 0.2);
692
+ border-radius: 4px;
693
+ }
694
+
695
+ ::-webkit-scrollbar-thumb {
696
+ background: var(--gray);
697
+ border-radius: 4px;
698
+ }
699
+
700
+ ::-webkit-scrollbar-thumb:hover {
701
+ background: var(--primary);
702
+ }
703
+
704
+ /* Responsive */
705
+ @media (max-width: 768px) {
706
+ .header-content {
707
+ flex-direction: column;
708
+ text-align: center;
709
+ }
710
+
711
+ .header-links {
712
+ width: 100%;
713
+ justify-content: center;
714
+ flex-wrap: wrap;
715
+ }
716
+
717
+ .container {
718
+ padding: 1rem;
719
+ }
720
+
721
+ .stats-grid {
722
+ grid-template-columns: 1fr 1fr;
723
+ }
724
+
725
+ .stat-card {
726
+ padding: 1rem;
727
+ }
728
+
729
+ .stat-value {
730
+ font-size: 1.5rem;
731
+ }
732
+
733
+ .btn-group {
734
+ flex-direction: column;
735
+ }
736
+
737
+ .lead-item {
738
+ flex-wrap: wrap;
739
+ }
740
+ }
741
+
742
+ @media (max-width: 480px) {
743
+ .stats-grid {
744
+ grid-template-columns: 1fr;
745
+ }
746
+
747
+ .tabs {
748
+ flex-direction: column;
749
+ }
750
+
751
+ .form-grid {
752
+ grid-template-columns: 1fr;
753
+ }
754
+ }
755
+ </style>
756
+ </head>
757
+ <body>
758
+ <header>
759
+ <div class="header-content">
760
+ <div class="logo">
761
+ <div class="logo-icon">
762
+ <i class="fas fa-home"></i>
763
+ </div>
764
+ <h1>MortgageHub</h1>
765
+ </div>
766
+ <div class="header-links">
767
+ <a href="#" onclick="showTab('leads')"><i class="fas fa-users"></i> Leads</a>
768
+ <a href="#" onclick="showTab('expenses')"><i class="fas fa-calculator"></i> Expenses</a>
769
+ <a href="#" onclick="showTab('calculator')"><i class="fas fa-chart-line"></i> Calculator</a>
770
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
771
+ <i class="fas fa-code"></i> Built with anycoder
772
+ </a>
773
+ </div>
774
+ </div>
775
+ </header>
776
+
777
+ <div class="container">
778
+ <!-- Stats Grid -->
779
+ <div class="stats-grid">
780
+ <div class="stat-card">
781
+ <div class="stat-card-header">
782
+ <div class="stat-icon blue">
783
+ <i class="fas fa-users"></i>
784
+ </div>
785
+ <span class="stat-trend up"><i class="fas fa-arrow-up"></i> 12%</span>
786
+ </div>
787
+ <div class="stat-value" id="totalLeads">0</div>
788
+ <div class="stat-label">Total Leads</div>
789
+ </div>
790
+ <div class="stat-card">
791
+ <div class="stat-card-header">
792
+ <div class="stat-icon green">
793
+ <i class="fas fa-check-circle"></i>
794
+ </div>
795
+ <span class="stat-trend up"><i class="fas fa-arrow-up"></i> 8%</span>
796
+ </div>
797
+ <div class="stat-value" id="qualifiedLeads">0</div>
798
+ <div class="stat-label">Qualified Leads</div>
799
+ </div>
800
+ <div class="stat-card">
801
+ <div class="stat-card-header">
802
+ <div class="stat-icon purple">
803
+ <i class="fas fa-dollar-sign"></i>
804
+ </div>
805
+ </div>
806
+ <div class="stat-value" id="totalExpenses">$0</div>
807
+ <div class="stat-label">Total Monthly Expenses</div>
808
+ </div>
809
+ <div class="stat-card">
810
+ <div class="stat-card-header">
811
+ <div class="stat-icon orange">
812
+ <i class="fas fa-file-invoice-dollar"></i>
813
+ </div>
814
+ </div>
815
+ <div class="stat-value" id="avgMortgage">$0</div>
816
+ <div class="stat-label">Avg. Mortgage Payment</div>
817
+ </div>
818
+ </div>
819
+
820
+ <!-- Main Grid -->
821
+ <div class="main-grid">
822
+ <!-- Lead Generation Form -->
823
+ <div class="card">
824
+ <div class="card-header">
825
+ <h2 class="card-title">
826
+ <i class="fas fa-user-plus"></i>
827
+ Generate New Lead
828
+ </h2>
829
+ </div>
830
+ <div class="card-body">
831
+ <form id="leadForm">
832
+ <div class="form-grid">
833
+ <div class="form-group">
834
+ <label class="form-label">Full Name</label>
835
+ <input type="text" class="form-input" id="leadName" placeholder="John Doe" required>
836
+ </div>
837
+ <div class="form-group">
838
+ <label class="form-label">Email Address</label>
839
+ <input type="email" class="form-input" id="leadEmail" placeholder="john@example.com" required>
840
+ </div>
841
+ <div class="form-group">
842
+ <label class="form-label">Phone Number</label>
843
+ <input type="tel" class="form-input" id="leadPhone" placeholder="(555) 123-4567" required>
844
+ </div>
845
+ <div class="form-group">
846
+ <label class="form-label">Property Type</label>
847
+ <select class="form-select" id="leadPropertyType">
848
+ <option value="single-family">Single Family Home</option>
849
+ <option value="condo">Condo</option>
850
+ <option value="townhouse">Townhouse</option>
851
+ <option value="multi-family">Multi-Family</option>
852
+ <option value="commercial">Commercial</option>
853
+ </select>
854
+ </div>
855
+ <div class="form-group">
856
+ <label class="form-label">Loan Amount Needed</label>
857
+ <input type="number" class="form-input" id="leadLoanAmount" placeholder="250000" required>
858
+ </div>
859
+ <div class="form-group">
860
+ <label class="form-label">Property Value</label>
861
+ <input type="number" class="form-input" id="leadPropertyValue" placeholder="350000" required>
862
+ </div>
863
+ <div class="form-group">
864
+ <label class="form-label">Annual Income</label>
865
+ <input type="number" class="form-input" id="leadIncome" placeholder="75000" required>
866
+ </div>
867
+ <div class="form-group">
868
+ <label class="form-label">Credit Score</label>
869
+ <select class="form-select" id="leadCreditScore">
870
+ <option value="excellent">Excellent (750+)</option>
871
+ <option value="good">Good (700-749)</option>
872
+ <option value="fair">Fair (650-699)</option>
873
+ <option value="poor">Poor (<650)</option>
874
+ </select>
875
+ </div>
876
+ </div>
877
+ <div class="btn-group">
878
+ <button type="submit" class="btn btn-primary">
879
+ <i class="fas fa-plus-circle"></i> Generate Lead
880
+ </button>
881
+ <button type="reset" class="btn btn-secondary">
882
+ <i class="fas fa-redo"></i> Reset
883
+ </button>
884
+ </div>
885
+ </form>
886
+ </div>
887
+ </div>
888
+
889
+ <!-- Expense Tracker -->
890
+ <div class="card">
891
+ <div class="card-header">
892
+ <h2 class="card-title">
893
+ <i class="fas fa-wallet"></i>
894
+ Expense Tracker
895
+ </h2>
896
+ <button class="btn btn-primary" onclick="openExpenseModal()">
897
+ <i class="fas fa-plus"></i> Add Expense
898
+ </button>
899
+ </div>
900
+ <div class="card-body">
901
+ <div class="tabs">
902
+ <button class="tab active" onclick="filterExpenses('all')">All</button>
903
+ <button class="tab" onclick="filterExpenses('mortgage')">Mortgage</button>
904
+ <button class="tab" onclick="filterExpenses('taxes')">Taxes</button>
905
+ <button class="tab" onclick="filterExpenses('insurance')">Insurance</button>
906
+ </div>
907
+ <div id="expenseList">
908
+ <table class="expense-table">
909
+ <thead>
910
+ <tr>
911
+ <th>Description</th>
912
+ <th>Category</th>
913
+ <th>Amount</th>
914
+ <th>Due Date</th>
915
+ <th>Actions</th>
916
+ </tr>
917
+ </thead>
918
+ <tbody id="expenseTableBody">
919
+ <!-- Expenses will be added here -->
920
+ </tbody>
921
+ </table>
922
+ <div class="empty-state" id="expenseEmptyState">
923
+ <i class="fas fa-receipt"></i>
924
+ <p>No expenses added yet</p>
925
+ </div>
926
+ </div>
927
+ </div>
928
+ </div>
929
+ </div>
930
+
931
+ <!-- Leads List -->
932
+ <div class="card" style="margin-top: 1.5rem;">
933
+ <div class="card-header">
934
+ <h2 class="card-title">
935
+ <i class="fas fa-list"></i>
936
+ Recent Leads
937
+ </h2>
938
+ <div>
939
+ <button class="btn btn-secondary" onclick="exportLeads()">
940
+ <i class="fas fa-download"></i> Export
941
+ </button>
942
+ </div>
943
+ </div>
944
+ <div class="card-body">
945
+ <div class="lead-list" id="leadList">
946
+ <div class="empty-state" id="leadEmptyState">
947
+ <i class="fas fa-user-friends"></i>
948
+ <p>No leads generated yet</p>
949
+ </div>
950
+ </div>
951
+ </div>
952
+ </div>
953
+
954
+ <!-- Mortgage Calculator -->
955
+ <div class="card" style="margin-top: 1.5rem;">
956
+ <div class="card-header">
957
+ <h2 class="card-title">
958
+ <i class="fas fa-calculator"></i>
959
+ Mortgage Calculator
960
+ </h2>
961
+ </div>
962
+ <div class="card-body">
963
+ <div class="form-grid">
964
+ <div class="form-group">
965
+ <label class="form-label">Home Price ($)</label>
966
+ <input type="number" class="form-input" id="calcHomePrice" value="350000" oninput="calculateMortgage()">
967
+ </div>
968
+ <div class="form-group">
969
+ <label class="form-label">Down Payment ($)</label>
970
+ <input type="number" class="form-input" id="calcDownPayment" value="70000" oninput="calculateMortgage()">
971
+ </div>
972
+ <div class="form-group">
973
+ <label class="form-label">Interest Rate (%)</label>
974
+ <input type="number" class="form-input" id="calcInterestRate" value="6.5" step="0.1" oninput="calculateMortgage()">
975
+ </div>
976
+ <div class="form-group">
977
+ <label class="form-label">Loan Term (Years)</label>
978
+ <select class="form-select" id="calcLoanTerm" onchange="calculateMortgage()">
979
+ <option value="15">15 Years</option>
980
+ <option value="20">20 Years</option>
981
+ <option value="30" selected>30 Years</option>
982
+ </select>
983
+ </div>
984
+ </div>
985
+ <div class="calculator-result" id="calcResult">
986
+ <div class="result-row">
987
+ <span class="result-label">Loan Amount</span>
988
+ <span class="result-value" id="resultLoanAmount">$280,000</span>
989
+ </div>
990
+ <div class="result-row">
991
+ <span class="result-label">Monthly Principal & Interest</span>
992
+ <span class="result-value highlight" id="resultMonthlyPayment">$1,772</span>
993
+ </div>
994
+ <div class="result-row">
995
+ <span class="result-label">Total Interest Paid</span>
996
+ <span class="result-value" id="resultTotalInterest">$357,920</span>
997
+ </div>
998
+ <div class="result-row">
999
+ <span class="result-label">Total Amount Paid</span>
1000
+ <span class="result-value" id="resultTotalAmount">$637,920</span>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+ </div>
1005
+ </div>
1006
+
1007
+ <!-- Expense Modal -->
1008
+ <div class="modal-overlay" id="expenseModal">
1009
+ <div class="modal">
1010
+ <div class="modal-header">
1011
+ <h3>Add New Expense</h3>
1012
+ <button class="modal-close" onclick="closeExpenseModal()">
1013
+ <i class="fas fa-times"></i>
1014
+ </button>
1015
+ </div>
1016
+ <div class="modal-body">
1017
+ <form id="expenseForm">
1018
+ <div class="form-group">
1019
+ <label class="form-label">Description</label>
1020
+ <input type="text" class="form-input" id="expenseDescription" placeholder="Monthly mortgage payment" required>
1021
+ </div>
1022
+ <div class="form-group">
1023
+ <label class="form-label">Category</label>
1024
+ <select class="form-select" id="expenseCategory">
1025
+ <option value="mortgage">Mortgage</option>
1026
+ <option value="taxes">Property Taxes</option>
1027
+ <option value="insurance">Home Insurance</option>
1028
+ <option value="maintenance">Maintenance</option>
1029
+ <option value="utilities">Utilities</option>
1030
+ </select>
1031
+ </div>
1032
+ <div class="form-group">
1033
+ <label class="form-label">Amount ($)</label>
1034
+ <input type="number" class="form-input" id="expenseAmount" placeholder="1500" required>
1035
+ </div>
1036
+ <div class="form-group">
1037
+ <label class="form-label">Due Date</label>
1038
+ <input type="date" class="form-input" id="expenseDueDate" required>
1039
+ </div>
1040
+ <div class="btn-group">
1041
+ <button type="submit" class="btn btn-primary" style="width: 100%;">
1042
+ <i class="fas fa-plus"></i> Add Expense
1043
+ </button>
1044
+ </div>
1045
+ </form>
1046
+ </div>
1047
+ </div>
1048
+ </div>
1049
+
1050
+ <script>
1051
+ // Data Storage
1052
+ let leads = [];
1053
+ let expenses = [];
1054
+ let expenseFilter = 'all';
1055
+
1056
+ // Initialize
1057
+ document.addEventListener('DOMContentLoaded', () => {
1058
+ loadFromStorage();
1059
+ updateStats();
1060
+ renderLeads();
1061
+ renderExpenses();
1062
+ calculateMortgage();
1063
+
1064
+ // Set default date to today
1065
+ document.getElementById('expenseDueDate').valueAsDate = new Date();
1066
+ });
1067
+
1068
+ // Storage Functions
1069
+ function saveToStorage() {
1070
+ localStorage.setItem('mortgageLeads', JSON.stringify(leads));
1071
+ localStorage.setItem('mortgageExpenses', JSON.stringify(expenses));
1072
+ }
1073
+
1074
+ function loadFromStorage() {
1075
+ const storedLeads = localStorage.getItem('mortgageLeads');
1076
+ const storedExpenses = localStorage.getItem('mortgageExpenses');
1077
+
1078
+ if (storedLeads) leads = JSON.parse(storedLeads);
1079
+ if (storedExpenses) expenses = JSON.parse(storedExpenses);
1080
+ }
1081
+
1082
+ // Lead Form Handler
1083
+ document.getElementById('leadForm').addEventListener('submit', (e) => {
1084
+ e.preventDefault();
1085
+
1086
+ const lead = {
1087
+ id: Date.now(),
1088
+ name: document.getElementById('leadName').value,
1089
+ email: document.getElementById('leadEmail').value,
1090
+ phone: document.getElementById('leadPhone').value,
1091
+ propertyType: document.getElementById('leadPropertyType').value,
1092
+ loanAmount: parseFloat(document.getElementById('leadLoanAmount').value),
1093
+ propertyValue: parseFloat(document.getElementById('leadPropertyValue').value),
1094
+ income: parseFloat(document.getElementById('leadIncome').value),
1095
+ creditScore: document.getElementById('leadCreditScore').value,
1096
+ status: 'new',
1097
+ date: new Date().toLocaleDateString()
1098
+ };
1099
+
1100
+ // Calculate LTV and DTI
1101
+ lead.ltv = (lead.loanAmount / lead.propertyValue * 100).toFixed(1);
1102
+ lead.dti = ((lead.loanAmount * 0.04) / (lead.income / 12) * 100).toFixed(1); // Estimated
1103
+
1104
+ leads.unshift(lead);
1105
+ saveToStorage();
1106
+ updateStats();
1107
+ renderLeads();
1108
+
1109
+ // Auto-add estimated mortgage as expense
1110
+ const estimatedPayment = (lead.loanAmount * 0.005).toFixed(0); // Rough estimate
1111
+ if (confirm(`Lead added! Would you like to add estimated monthly mortgage payment ($${estimatedPayment}) as an expense?`)) {
1112
+ addExpense({
1113
+ description: `Mortgage - ${lead.name}`,
1114
+ category: 'mortgage',
1115
+ amount: parseFloat(estimatedPayment),
1116
+ dueDate: new Date().toISOString().split('T')[0]
1117
+ });
1118
+ }
1119
+
1120
+ e.target.reset();
1121
+ });
1122
+
1123
+ // Expense Form Handler
1124
+ document.getElementById('expenseForm').addEventListener('submit', (e) => {
1125
+ e.preventDefault();
1126
+
1127
+ const expense = {
1128
+ id: Date.now(),
1129
+ description: document.getElementById('expenseDescription').value,
1130
+ category: document.getElementById('expenseCategory').value,
1131
+ amount: parseFloat(document.getElementById('expenseAmount').value),
1132
+ dueDate: document.getElementById('expenseDueDate').value,
1133
+ date: new Date().toLocaleDateString()
1134
+ };
1135
+
1136
+ addExpense(expense);
1137
+ closeExpenseModal();
1138
+ e.target.reset();
1139
+ });
1140
+
1141
+ function addExpense(expense) {
1142
+ expenses.unshift(expense);
1143
+ saveToStorage();
1144
+ updateStats();
1145
+ renderExpenses();
1146
+ }
1147
+
1148
+ // Render Leads
1149
+ function renderLeads() {
1150
+ const container = document.getElementById('leadList');
1151
+ const emptyState = document.getElementById('leadEmptyState');
1152
+
1153
+ if (leads.length === 0) {
1154
+ container.innerHTML = '';
1155
+ container.appendChild(emptyState);
1156
+ emptyState.style.display = 'block';
1157
+ return;
1158
+ }
1159
+
1160
+ emptyState.style.display = 'none';
1161
+ container.innerHTML = leads.map((lead, index) => `
1162
+ <div class="lead-item fade-in" style="animation-delay: ${index * 0.05}s">
1163
+ <div class="lead-avatar">${lead.name.split(' ').map(n => n[0]).join('')}</div>
1164
+ <div class="lead-info">
1165
+ <div class="lead-name">${lead.name}</div>
1166
+ <div class="lead-detail">
1167
+ <i class="fas fa-phone"></i> ${lead.phone} |
1168
+ <i class="fas fa-home"></i> ${lead.propertyType} |
1169
+ <i class="fas fa-dollar-sign"></i> $${lead.loanAmount.toLocaleString()}
1170
+ </div>
1171
+ <div class="lead-detail">
1172
+ <span class="status-badge ${lead.status}">${lead.status.toUpperCase()}</span>
1173
+ <span style="margin-left: 0.5rem; color: var(--gray);">LTV: ${lead.ltv}% | DTI: ${lead.dti}%</span>
1174
+ </div>
1175
+ </div>
1176
+ <div class="lead-actions">
1177
+ <button class="view-btn" onclick="viewLead(${lead.id})" title="View Details">
1178
+ <i class="fas fa-eye"></i>
1179
+ </button>
1180
+ <button class="delete-btn" onclick="deleteLead(${lead.id})" title="Delete">
1181
+ <i class="fas fa-trash"></i>
1182
+ </button>
1183
+ </div>
1184
+ </div>
1185
+ `).join('');
1186
+ }
1187
+
1188
+ // Render Expenses
1189
+ function renderExpenses() {
1190
+ const tbody = document.getElementById('expenseTableBody');
1191
+ const emptyState = document.getElementById('expenseEmptyState');
1192
+
1193
+ let filteredExpenses = expenseFilter === 'all'
1194
+ ? expenses
1195
+ : expenses.filter(e => e.category === expenseFilter);
1196
+
1197
+ if (filteredExpenses.length === 0) {
1198
+ tbody.innerHTML = '';
1199
+ emptyState.style.display = 'block';
1200
+ return;
1201
+ }
1202
+
1203
+ emptyState.style.display = 'none';
1204
+ tbody.innerHTML = filteredExpenses.map(expense => `
1205
+ <tr class="fade-in">
1206
+ <td>${expense.description}</td>
1207
+ <td><span class="expense-category ${expense.category}">${expense.category}</span></td>
1208
+ <td>$${expense.amount.toLocaleString()}</td>
1209
+ <td>${new Date(expense.dueDate).toLocaleDateString()}</td>
1210
+ <td>
1211
+ <button class="btn btn-danger" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="deleteExpense(${expense.id})">
1212
+ <i class="fas fa-trash"></i>
1213
+ </button>
1214
+ </td>
1215
+ </tr>
1216
+ `).join('');
1217
+ }
1218
+
1219
+ // Filter Expenses
1220
+ function filterExpenses(category) {
1221
+ expenseFilter = category;
1222
+ document.querySelectorAll('.tabs .tab').forEach(tab => {
1223
+ tab.classList.remove('active');
1224
+ if (tab.textContent.toLowerCase().includes(category) || (category === 'all' && tab.textContent === 'All')) {
1225
+ tab.classList.add('active');
1226
+ }
1227
+ });
1228
+ renderExpenses();
1229
+ }
1230
+
1231
+ // Update Stats
1232
+ function updateStats() {
1233
+ document.getElementById('totalLeads').textContent = leads.length;
1234
+ document.getElementById('qualifiedLeads').textContent = leads.filter(l => l.status === 'qualified' || l.status === 'closed').length;
1235
+
1236
+ const totalExpenses = expenses.reduce((sum, e) => sum + e.amount, 0);
1237
+ document.getElementById('totalExpenses').textContent = '$' + totalExpenses.toLocaleString();
1238
+
1239
+ const mortgageExpenses = expenses.filter(e => e.category === 'mortgage');
1240
+ const avgMortgage = mortgageExpenses.length > 0
1241
+ ? mortgageExpenses.reduce((sum, e) => sum + e.amount, 0) / mortgageExpenses.length
1242
+ : 0;
1243
+ document.getElementById('avgMortgage').textContent = '$' + Math.round(avgMortgage).toLocaleString();
1244
+ }
1245
+
1246
+ // Mortgage Calculator
1247
+ function calculateMortgage() {
1248
+ const homePrice = parseFloat(document.getElementById('calcHomePrice').value) || 0;
1249
+ const downPayment = parseFloat(document.getElementById('calcDownPayment').value) || 0;
1250
+ const interestRate = parseFloat(document.getElementById('calcInterestRate').value) || 0;
1251
+ const loanTerm = parseInt(document.getElementById('calcLoanTerm').value) || 30;
1252
+
1253
+ const loanAmount = homePrice - downPayment;
1254
+ const monthlyRate = interestRate / 100 / 12;
1255
+ const numPayments = loanTerm * 12;
1256
+
1257
+ let monthlyPayment;
1258
+ if (monthlyRate === 0) {
1259
+ monthlyPayment = loanAmount / numPayments;
1260
+ } else {
1261
+ monthlyPayment = loanAmount * (monthlyRate * Math.pow(1