Hugging Face's logo

Spaces:
brian256
/
mesp
Running

App Files Community
brian256 commited on
Commit
acc38b3
·
verified ·
1 Parent(s): b8948e7

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +483 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mesp
3
- emoji: 🏆
4
- colorFrom: blue
5
- colorTo: red
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: mesp
3
+ emoji: 🐳
4
+ colorFrom: pink
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,483 @@
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>MESP - Modern Efficient Savings Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for elements that need more specific styling */
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
13
+ }
14
+ .dashboard-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .savings-progress {
19
+ height: 8px;
20
+ border-radius: 4px;
21
+ }
22
+ .nav-item.active {
23
+ border-left: 4px solid #3b82f6;
24
+ background-color: rgba(59, 130, 246, 0.1);
25
+ }
26
+ .transaction-history {
27
+ max-height: 400px;
28
+ overflow-y: auto;
29
+ }
30
+ /* Custom scrollbar */
31
+ .transaction-history::-webkit-scrollbar {
32
+ width: 6px;
33
+ }
34
+ .transaction-history::-webkit-scrollbar-track {
35
+ background: #f1f1f1;
36
+ }
37
+ .transaction-history::-webkit-scrollbar-thumb {
38
+ background: #cbd5e1;
39
+ border-radius: 3px;
40
+ }
41
+ .transaction-history::-webkit-scrollbar-thumb:hover {
42
+ background: #94a3b8;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-50">
47
+ <div class="flex h-screen overflow-hidden">
48
+ <!-- Sidebar -->
49
+ <div class="hidden md:flex md:flex-shrink-0">
50
+ <div class="flex flex-col w-64 gradient-bg text-white">
51
+ <div class="flex items-center justify-center h-16 px-4 border-b border-blue-800">
52
+ <div class="flex items-center">
53
+ <i class="fas fa-piggy-bank text-2xl mr-2 text-blue-200"></i>
54
+ <span class="text-xl font-bold">MESP</span>
55
+ </div>
56
+ </div>
57
+ <div class="flex flex-col flex-grow px-4 py-4">
58
+ <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item active">
59
+ <i class="fas fa-home mr-3"></i>
60
+ <span>Dashboard</span>
61
+ </div>
62
+ <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
63
+ <i class="fas fa-wallet mr-3"></i>
64
+ <span>Savings</span>
65
+ </div>
66
+ <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
67
+ <i class="fas fa-hand-holding-usd mr-3"></i>
68
+ <span>Loans</span>
69
+ </div>
70
+ <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
71
+ <i class="fas fa-exchange-alt mr-3"></i>
72
+ <span>Transactions</span>
73
+ </div>
74
+ <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
75
+ <i class="fas fa-chart-line mr-3"></i>
76
+ <span>Reports</span>
77
+ </div>
78
+ <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
79
+ <i class="fas fa-users mr-3"></i>
80
+ <span>Members</span>
81
+ </div>
82
+ <div class="flex items-center px-4 py-3 mt-2 rounded-lg nav-item">
83
+ <i class="fas fa-cog mr-3"></i>
84
+ <span>Settings</span>
85
+ </div>
86
+ </div>
87
+ <div class="px-4 py-4 border-t border-blue-800">
88
+ <div class="flex items-center">
89
+ <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
90
+ <div class="ml-3">
91
+ <p class="text-sm font-medium">Jane Cooper</p>
92
+ <p class="text-xs text-blue-200">Admin</p>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Main Content -->
100
+ <div class="flex flex-col flex-1 overflow-hidden">
101
+ <!-- Top Navigation -->
102
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
103
+ <div class="flex items-center md:hidden">
104
+ <button class="text-gray-500 focus:outline-none">
105
+ <i class="fas fa-bars"></i>
106
+ </button>
107
+ </div>
108
+ <div class="flex items-center">
109
+ <div class="relative">
110
+ <input type="text" class="w-full md:w-64 px-4 py-2 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Search...">
111
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
112
+ </div>
113
+ </div>
114
+ <div class="flex items-center">
115
+ <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none">
116
+ <i class="fas fa-bell"></i>
117
+ </button>
118
+ <button class="p-2 ml-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none">
119
+ <i class="fas fa-envelope"></i>
120
+ </button>
121
+ <div class="ml-4 relative">
122
+ <button class="flex items-center focus:outline-none">
123
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
124
+ <span class="ml-2 hidden md:inline">Jane Cooper</span>
125
+ <i class="fas fa-chevron-down ml-1 text-gray-500 hidden md:inline"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Main Content Area -->
132
+ <div class="flex-1 overflow-auto p-4 bg-gray-50">
133
+ <div class="mb-6">
134
+ <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
135
+ <p class="text-gray-600">Welcome back, Jane! Here's your financial overview.</p>
136
+ </div>
137
+
138
+ <!-- Stats Cards -->
139
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
140
+ <div class="bg-white rounded-lg shadow-sm p-6 dashboard-card transition duration-300">
141
+ <div class="flex items-center justify-between">
142
+ <div>
143
+ <p class="text-sm font-medium text-gray-500">Total Savings</p>
144
+ <h3 class="text-2xl font-bold mt-1">Ksh 245,890</h3>
145
+ </div>
146
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
147
+ <i class="fas fa-piggy-bank text-xl"></i>
148
+ </div>
149
+ </div>
150
+ <div class="mt-4">
151
+ <div class="flex items-center justify-between text-sm">
152
+ <span class="text-green-600">+12.5%</span>
153
+ <span class="text-gray-500">vs last month</span>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="bg-white rounded-lg shadow-sm p-6 dashboard-card transition duration-300">
159
+ <div class="flex items-center justify-between">
160
+ <div>
161
+ <p class="text-sm font-medium text-gray-500">Active Loans</p>
162
+ <h3 class="text-2xl font-bold mt-1">Ksh 120,500</h3>
163
+ </div>
164
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
165
+ <i class="fas fa-hand-holding-usd text-xl"></i>
166
+ </div>
167
+ </div>
168
+ <div class="mt-4">
169
+ <div class="flex items-center justify-between text-sm">
170
+ <span class="text-red-600">-3.2%</span>
171
+ <span class="text-gray-500">vs last month</span>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="bg-white rounded-lg shadow-sm p-6 dashboard-card transition duration-300">
177
+ <div class="flex items-center justify-between">
178
+ <div>
179
+ <p class="text-sm font-medium text-gray-500">Dividends</p>
180
+ <h3 class="text-2xl font-bold mt-1">Ksh 15,200</h3>
181
+ </div>
182
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
183
+ <i class="fas fa-chart-pie text-xl"></i>
184
+ </div>
185
+ </div>
186
+ <div class="mt-4">
187
+ <div class="flex items-center justify-between text-sm">
188
+ <span class="text-green-600">+8.7%</span>
189
+ <span class="text-gray-500">vs last year</span>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="bg-white rounded-lg shadow-sm p-6 dashboard-card transition duration-300">
195
+ <div class="flex items-center justify-between">
196
+ <div>
197
+ <p class="text-sm font-medium text-gray-500">New Members</p>
198
+ <h3 class="text-2xl font-bold mt-1">24</h3>
199
+ </div>
200
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
201
+ <i class="fas fa-users text-xl"></i>
202
+ </div>
203
+ </div>
204
+ <div class="mt-4">
205
+ <div class="flex items-center justify-between text-sm">
206
+ <span class="text-green-600">+20%</span>
207
+ <span class="text-gray-500">vs last month</span>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Savings Goals and Recent Transactions -->
214
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
215
+ <!-- Savings Goals -->
216
+ <div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6">
217
+ <div class="flex items-center justify-between mb-4">
218
+ <h2 class="text-lg font-semibold text-gray-800">Savings Goals</h2>
219
+ <button class="text-sm text-blue-600 hover:text-blue-800">View All</button>
220
+ </div>
221
+
222
+ <div class="space-y-4">
223
+ <div>
224
+ <div class="flex items-center justify-between mb-1">
225
+ <span class="font-medium">Emergency Fund</span>
226
+ <span class="text-sm text-gray-600">Ksh 45,000 / Ksh 100,000</span>
227
+ </div>
228
+ <div class="w-full bg-gray-200 rounded-full savings-progress">
229
+ <div class="bg-blue-600 savings-progress" style="width: 45%"></div>
230
+ </div>
231
+ </div>
232
+
233
+ <div>
234
+ <div class="flex items-center justify-between mb-1">
235
+ <span class="font-medium">Education Fund</span>
236
+ <span class="text-sm text-gray-600">Ksh 12,500 / Ksh 50,000</span>
237
+ </div>
238
+ <div class="w-full bg-gray-200 rounded-full savings-progress">
239
+ <div class="bg-green-500 savings-progress" style="width: 25%"></div>
240
+ </div>
241
+ </div>
242
+
243
+ <div>
244
+ <div class="flex items-center justify-between mb-1">
245
+ <span class="font-medium">Retirement</span>
246
+ <span class="text-sm text-gray-600">Ksh 188,390 / Ksh 500,000</span>
247
+ </div>
248
+ <div class="w-full bg-gray-200 rounded-full savings-progress">
249
+ <div class="bg-purple-500 savings-progress" style="width: 38%"></div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <button class="mt-6 w-full py-2 px-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 transition duration-200">
255
+ <i class="fas fa-plus mr-2"></i> Add New Goal
256
+ </button>
257
+ </div>
258
+
259
+ <!-- Quick Actions -->
260
+ <div class="bg-white rounded-lg shadow-sm p-6">
261
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h2>
262
+ <div class="grid grid-cols-2 gap-4">
263
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-blue-500 hover:bg-blue-50 transition duration-200">
264
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2">
265
+ <i class="fas fa-plus text-lg"></i>
266
+ </div>
267
+ <span class="text-sm font-medium">Deposit</span>
268
+ </button>
269
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-green-500 hover:bg-green-50 transition duration-200">
270
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mb-2">
271
+ <i class="fas fa-minus text-lg"></i>
272
+ </div>
273
+ <span class="text-sm font-medium">Withdraw</span>
274
+ </button>
275
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-purple-500 hover:bg-purple-50 transition duration-200">
276
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2">
277
+ <i class="fas fa-hand-holding-usd text-lg"></i>
278
+ </div>
279
+ <span class="text-sm font-medium">Apply Loan</span>
280
+ </button>
281
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-yellow-500 hover:bg-yellow-50 transition duration-200">
282
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2">
283
+ <i class="fas fa-exchange-alt text-lg"></i>
284
+ </div>
285
+ <span class="text-sm font-medium">Transfer</span>
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Recent Transactions and Loan Status -->
292
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
293
+ <!-- Recent Transactions -->
294
+ <div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6">
295
+ <div class="flex items-center justify-between mb-4">
296
+ <h2 class="text-lg font-semibold text-gray-800">Recent Transactions</h2>
297
+ <button class="text-sm text-blue-600 hover:text-blue-800">View All</button>
298
+ </div>
299
+
300
+ <div class="transaction-history">
301
+ <div class="space-y-4">
302
+ <!-- Transaction Item -->
303
+ <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
304
+ <div class="flex items-center">
305
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
306
+ <i class="fas fa-arrow-down"></i>
307
+ </div>
308
+ <div>
309
+ <p class="font-medium">Deposit</p>
310
+ <p class="text-sm text-gray-500">12 May 2023, 10:30 AM</p>
311
+ </div>
312
+ </div>
313
+ <div class="text-right">
314
+ <p class="font-medium text-green-600">+ Ksh 15,000</p>
315
+ <p class="text-sm text-gray-500">Completed</p>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Transaction Item -->
320
+ <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
321
+ <div class="flex items-center">
322
+ <div class="p-3 rounded-full bg-red-100 text-red-600 mr-3">
323
+ <i class="fas fa-arrow-up"></i>
324
+ </div>
325
+ <div>
326
+ <p class="font-medium">Withdrawal</p>
327
+ <p class="text-sm text-gray-500">10 May 2023, 2:15 PM</p>
328
+ </div>
329
+ </div>
330
+ <div class="text-right">
331
+ <p class="font-medium text-red-600">- Ksh 5,000</p>
332
+ <p class="text-sm text-gray-500">Completed</p>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Transaction Item -->
337
+ <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
338
+ <div class="flex items-center">
339
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-3">
340
+ <i class="fas fa-hand-holding-usd"></i>
341
+ </div>
342
+ <div>
343
+ <p class="font-medium">Loan Payment</p>
344
+ <p class="text-sm text-gray-500">8 May 2023, 9:00 AM</p>
345
+ </div>
346
+ </div>
347
+ <div class="text-right">
348
+ <p class="font-medium text-green-600">+ Ksh 3,500</p>
349
+ <p class="text-sm text-gray-500">Completed</p>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Transaction Item -->
354
+ <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
355
+ <div class="flex items-center">
356
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3">
357
+ <i class="fas fa-exchange-alt"></i>
358
+ </div>
359
+ <div>
360
+ <p class="font-medium">Transfer</p>
361
+ <p class="text-sm text-gray-500">5 May 2023, 4:45 PM</p>
362
+ </div>
363
+ </div>
364
+ <div class="text-right">
365
+ <p class="font-medium text-red-600">- Ksh 2,000</p>
366
+ <p class="text-sm text-gray-500">Completed</p>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Transaction Item -->
371
+ <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition duration-150">
372
+ <div class="flex items-center">
373
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
374
+ <i class="fas fa-arrow-down"></i>
375
+ </div>
376
+ <div>
377
+ <p class="font-medium">Deposit</p>
378
+ <p class="text-sm text-gray-500">1 May 2023, 11:20 AM</p>
379
+ </div>
380
+ </div>
381
+ <div class="text-right">
382
+ <p class="font-medium text-green-600">+ Ksh 10,000</p>
383
+ <p class="text-sm text-gray-500">Completed</p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Loan Status -->
391
+ <div class="bg-white rounded-lg shadow-sm p-6">
392
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Loan Status</h2>
393
+
394
+ <div class="space-y-4">
395
+ <div class="p-4 border border-gray-200 rounded-lg">
396
+ <div class="flex items-center justify-between mb-2">
397
+ <span class="font-medium">Personal Loan</span>
398
+ <span class="text-sm px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Active</span>
399
+ </div>
400
+ <div class="text-sm text-gray-600 mb-2">
401
+ <div class="flex justify-between mb-1">
402
+ <span>Amount:</span>
403
+ <span>Ksh 50,000</span>
404
+ </div>
405
+ <div class="flex justify-between mb-1">
406
+ <span>Interest Rate:</span>
407
+ <span>12% p.a.</span>
408
+ </div>
409
+ <div class="flex justify-between mb-1">
410
+ <span>Due Date:</span>
411
+ <span>15 Aug 2023</span>
412
+ </div>
413
+ <div class="flex justify-between">
414
+ <span>Balance:</span>
415
+ <span class="font-medium">Ksh 32,500</span>
416
+ </div>
417
+ </div>
418
+ <div class="mt-3">
419
+ <div class="w-full bg-gray-200 rounded-full h-2">
420
+ <div class="bg-green-500 h-2 rounded-full" style="width: 35%"></div>
421
+ </div>
422
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
423
+ <span>35% paid</span>
424
+ <span>65% remaining</span>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="p-4 border border-gray-200 rounded-lg">
430
+ <div class="flex items-center justify-between mb-2">
431
+ <span class="font-medium">Business Loan</span>
432
+ <span class="text-sm px-2 py-1 bg-green-100 text-green-800 rounded-full">Approved</span>
433
+ </div>
434
+ <div class="text-sm text-gray-600">
435
+ <div class="flex justify-between mb-1">
436
+ <span>Amount:</span>
437
+ <span>Ksh 100,000</span>
438
+ </div>
439
+ <div class="flex justify-between mb-1">
440
+ <span>Interest Rate:</span>
441
+ <span>10% p.a.</span>
442
+ </div>
443
+ <div class="flex justify-between">
444
+ <span>Disbursement:</span>
445
+ <span class="text-blue-600">Pending</span>
446
+ </div>
447
+ </div>
448
+ <button class="mt-3 w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200 text-sm">
449
+ View Details
450
+ </button>
451
+ </div>
452
+
453
+ <button class="w-full py-2 px-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-500 hover:text-blue-500 transition duration-200">
454
+ <i class="fas fa-plus mr-2"></i> Apply for New Loan
455
+ </button>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <script>
464
+ // Simple JavaScript for interactive elements
465
+ document.addEventListener('DOMContentLoaded', function() {
466
+ // Mobile menu toggle would go here
467
+ // For demo purposes, we'll just add a click handler to nav items
468
+ const navItems = document.querySelectorAll('.nav-item');
469
+ navItems.forEach(item => {
470
+ item.addEventListener('click', function() {
471
+ // Remove active class from all items
472
+ navItems.forEach(i => i.classList.remove('active'));
473
+ // Add active class to clicked item
474
+ this.classList.add('active');
475
+ });
476
+ });
477
+
478
+ // You would add more JavaScript here for actual functionality
479
+ // Like form submissions, API calls, etc.
480
+ });
481
+ </script>
482
+ <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=brian256/mesp" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
483
+ </html>