Hugging Face's logo

Spaces:
Service-Xi
/
Himdontcomeherex
Running

App Files Community
Service-Xi commited on
Commit
4296fb1
·
verified ·
1 Parent(s): 9fbde08

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +1716 -19
  2. style.css +549 -27
index.html CHANGED
@@ -1,19 +1,1716 @@
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">
6
+ <title>TrustNet Bank - Multi-Currency Banking</title>
7
+ <style>
8
+ /* Base Styles */
9
+ body {
10
+ margin: 0;
11
+ background: linear-gradient(135deg, #f5f7f8 0%, #e8ecf0 100%);
12
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
+ color: #333;
14
+ min-height: 100vh;
15
+ position: relative;
16
+ padding-bottom: 30px;
17
+ }
18
+
19
+ .container {
20
+ max-width: 500px;
21
+ margin: 20px auto;
22
+ padding: 25px;
23
+ background: white;
24
+ border-radius: 15px;
25
+ box-shadow: 0 8px 32px rgba(0,0,0,0.12);
26
+ backdrop-filter: blur(10px);
27
+ border: 1px solid rgba(255,255,255,0.2);
28
+ }
29
+
30
+ /* Hero Section */
31
+ .hero {
32
+ text-align: center;
33
+ padding: 30px 20px;
34
+ background: linear-gradient(135deg, #0a3e80 0%, #1e5aa8 50%, #2d6bb8 100%);
35
+ color: white;
36
+ border-radius: 15px;
37
+ margin-bottom: 25px;
38
+ position: relative;
39
+ overflow: hidden;
40
+ box-shadow: 0 8px 25px rgba(10, 62, 128, 0.3);
41
+ }
42
+
43
+ .hero:before {
44
+ content: "";
45
+ position: absolute;
46
+ top: 0;
47
+ left: 0;
48
+ right: 0;
49
+ bottom: 0;
50
+ background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
51
+ }
52
+
53
+ .hero h1 {
54
+ margin: 0;
55
+ font-size: 32px;
56
+ font-weight: 700;
57
+ position: relative;
58
+ text-shadow: 0 2px 4px rgba(0,0,0,0.3);
59
+ }
60
+
61
+ .hero p {
62
+ margin: 15px 0 0;
63
+ font-size: 18px;
64
+ position: relative;
65
+ opacity: 0.95;
66
+ }
67
+
68
+ /* Features Grid */
69
+ .features-grid {
70
+ display: grid;
71
+ grid-template-columns: repeat(2, 1fr);
72
+ gap: 18px;
73
+ margin: 25px 0;
74
+ }
75
+
76
+ .feature-card {
77
+ background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
78
+ border-radius: 12px;
79
+ padding: 20px;
80
+ text-align: center;
81
+ box-shadow: 0 4px 15px rgba(0,0,0,0.08);
82
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
83
+ border: 1px solid rgba(10, 62, 128, 0.1);
84
+ }
85
+
86
+ .feature-card:hover {
87
+ transform: translateY(-8px) scale(1.02);
88
+ box-shadow: 0 12px 30px rgba(10, 62, 128, 0.15);
89
+ }
90
+
91
+ .feature-icon {
92
+ font-size: 28px;
93
+ margin-bottom: 12px;
94
+ color: #0a3e80;
95
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
96
+ }
97
+
98
+ .feature-card h4 {
99
+ margin: 0 0 8px 0;
100
+ color: #0a3e80;
101
+ font-weight: 600;
102
+ }
103
+
104
+ .feature-card p {
105
+ margin: 0;
106
+ font-size: 14px;
107
+ color: #666;
108
+ line-height: 1.4;
109
+ }
110
+
111
+ /* Balance Section */
112
+ .balance-section {
113
+ background: linear-gradient(135deg, #0a3e80 0%, #1e5aa8 100%);
114
+ color: white;
115
+ padding: 25px;
116
+ border-radius: 15px;
117
+ margin: 20px 0;
118
+ text-align: center;
119
+ box-shadow: 0 8px 25px rgba(10, 62, 128, 0.3);
120
+ }
121
+
122
+ .balance-amount {
123
+ font-size: 36px;
124
+ font-weight: 700;
125
+ margin: 10px 0;
126
+ text-shadow: 0 2px 4px rgba(0,0,0,0.3);
127
+ }
128
+
129
+ .balance-label {
130
+ font-size: 16px;
131
+ opacity: 0.9;
132
+ margin-bottom: 15px;
133
+ }
134
+
135
+ .balance-actions {
136
+ display: flex;
137
+ gap: 10px;
138
+ margin-top: 15px;
139
+ }
140
+
141
+ .balance-btn {
142
+ flex: 1;
143
+ background: rgba(255,255,255,0.2);
144
+ border: 2px solid rgba(255,255,255,0.3);
145
+ color: white;
146
+ padding: 10px;
147
+ border-radius: 8px;
148
+ cursor: pointer;
149
+ font-weight: 600;
150
+ transition: all 0.3s ease;
151
+ }
152
+
153
+ .balance-btn:hover {
154
+ background: rgba(255,255,255,0.3);
155
+ transform: translateY(-2px);
156
+ }
157
+
158
+ /* Visual Elements */
159
+ .visual-section {
160
+ display: flex;
161
+ justify-content: space-around;
162
+ margin: 25px 0;
163
+ padding: 20px;
164
+ background: linear-gradient(135deg, #f8fafc 0%, #e8ecf0 100%);
165
+ border-radius: 12px;
166
+ }
167
+
168
+ .visual-element {
169
+ text-align: center;
170
+ }
171
+
172
+ .visual-icon {
173
+ font-size: 32px;
174
+ color: #0a3e80;
175
+ margin-bottom: 8px;
176
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
177
+ }
178
+
179
+ .visual-element small {
180
+ font-weight: 500;
181
+ color: #666;
182
+ }
183
+
184
+ /* Enhanced Receipt Styling */
185
+ .receipt-card {
186
+ background: #ffffff;
187
+ border-radius: 16px;
188
+ padding: 25px 20px;
189
+ box-shadow: 0 8px 32px rgba(0,0,0,0.12);
190
+ margin: 20px auto;
191
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
192
+ max-width: 380px;
193
+ border: 1px solid #f0f0f0;
194
+ position: relative;
195
+ overflow: hidden;
196
+ }
197
+
198
+ .receipt-card:before {
199
+ content: "";
200
+ position: absolute;
201
+ top: 0;
202
+ left: 0;
203
+ right: 0;
204
+ height: 4px;
205
+ background: linear-gradient(90deg, #0a3e80 0%, #1e5aa8 50%, #2d6bb8 100%);
206
+ }
207
+
208
+ .receipt-header {
209
+ text-align: center;
210
+ margin-bottom: 15px;
211
+ padding-bottom: 12px;
212
+ border-bottom: 1px solid #f5f5f5;
213
+ }
214
+
215
+ .receipt-logo {
216
+ font-size: 18px;
217
+ font-weight: 500;
218
+ color: #0a3e80;
219
+ margin-bottom: 3px;
220
+ }
221
+
222
+ .receipt-subtitle {
223
+ font-size: 12px;
224
+ color: #666;
225
+ margin: 0;
226
+ }
227
+
228
+ .receipt-amount {
229
+ font-size: 42px;
230
+ font-weight: 600;
231
+ margin: 15px 0;
232
+ color: #000000;
233
+ text-align: center;
234
+ letter-spacing: -1px;
235
+ }
236
+
237
+ .status-successful {
238
+ background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
239
+ color: white;
240
+ padding: 10px 16px;
241
+ border-radius: 8px;
242
+ text-align: center;
243
+ font-weight: 400;
244
+ font-size: 14px;
245
+ margin: 0 0 15px 0;
246
+ text-transform: capitalize;
247
+ box-shadow: 0 3px 10px rgba(40, 167, 69, 0.25);
248
+ }
249
+
250
+ .status-pending {
251
+ background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%);
252
+ color: #000;
253
+ padding: 10px 16px;
254
+ border-radius: 8px;
255
+ text-align: center;
256
+ font-weight: 400;
257
+ font-size: 14px;
258
+ margin: 0 0 15px 0;
259
+ text-transform: capitalize;
260
+ box-shadow: 0 3px 10px rgba(255, 193, 7, 0.25);
261
+ }
262
+
263
+ .status-failed {
264
+ background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
265
+ color: white;
266
+ padding: 10px 16px;
267
+ border-radius: 8px;
268
+ text-align: center;
269
+ font-weight: 400;
270
+ font-size: 14px;
271
+ margin: 0 0 15px 0;
272
+ text-transform: capitalize;
273
+ box-shadow: 0 3px 10px rgba(220, 53, 69, 0.25);
274
+ }
275
+
276
+ .transaction-details {
277
+ margin: 0;
278
+ background: #f8fafc;
279
+ padding: 15px;
280
+ border-radius: 8px;
281
+ border: 1px solid #e2e8f0;
282
+ }
283
+
284
+ .detail-row {
285
+ margin-bottom: 10px;
286
+ font-size: 14px;
287
+ line-height: 1.4;
288
+ color: #333;
289
+ display: flex;
290
+ justify-content: space-between;
291
+ align-items: center;
292
+ }
293
+
294
+ .detail-label {
295
+ font-weight: 400;
296
+ color: #0a3e80;
297
+ flex: 1;
298
+ }
299
+
300
+ .detail-value {
301
+ color: #333;
302
+ font-weight: 300;
303
+ text-align: right;
304
+ flex: 1;
305
+ word-break: break-word;
306
+ }
307
+
308
+ .alert-caption {
309
+ color: #dc3545;
310
+ font-weight: bold;
311
+ font-size: 14px;
312
+ text-align: center;
313
+ margin: 0 0 20px 0;
314
+ padding: 12px 16px;
315
+ background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
316
+ border: 2px solid #dc3545;
317
+ border-radius: 8px;
318
+ text-transform: uppercase;
319
+ letter-spacing: 0.5px;
320
+ }
321
+
322
+ .receipt-buttons {
323
+ display: flex;
324
+ justify-content: space-between;
325
+ margin-top: 20px;
326
+ gap: 12px;
327
+ }
328
+
329
+ .receipt-buttons button {
330
+ width: 48%;
331
+ background: linear-gradient(135deg, #1e5aa8 0%, #0a3e80 100%);
332
+ color: white;
333
+ border: none;
334
+ padding: 12px 16px;
335
+ border-radius: 8px;
336
+ font-weight: 500;
337
+ font-size: 14px;
338
+ cursor: pointer;
339
+ transition: all 0.3s ease;
340
+ box-shadow: 0 3px 10px rgba(30, 90, 168, 0.25);
341
+ }
342
+
343
+ .receipt-buttons button:hover {
344
+ transform: translateY(-2px);
345
+ box-shadow: 0 8px 25px rgba(30, 90, 168, 0.4);
346
+ }
347
+
348
+ /* Success Animation */
349
+ .success-animation {
350
+ position: fixed;
351
+ top: 50%;
352
+ left: 50%;
353
+ transform: translate(-50%, -50%);
354
+ background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
355
+ color: white;
356
+ padding: 30px;
357
+ border-radius: 20px;
358
+ text-align: center;
359
+ font-size: 24px;
360
+ font-weight: bold;
361
+ z-index: 1000;
362
+ box-shadow: 0 15px 35px rgba(40, 167, 69, 0.4);
363
+ animation: successPulse 2s ease-in-out;
364
+ }
365
+
366
+ @keyframes successPulse {
367
+ 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
368
+ 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
369
+ 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
370
+ }
371
+
372
+ /* Original Styles Enhanced */
373
+ h2, h3 {
374
+ text-align: center;
375
+ color: #0a3e80;
376
+ font-weight: 600;
377
+ }
378
+
379
+ input, select, button {
380
+ width: 100%;
381
+ padding: 12px 16px;
382
+ margin-top: 12px;
383
+ border: 2px solid #e2e8f0;
384
+ border-radius: 8px;
385
+ font-size: 15px;
386
+ transition: all 0.3s ease;
387
+ box-sizing: border-box;
388
+ }
389
+
390
+ input:focus, select:focus {
391
+ outline: none;
392
+ border-color: #0a3e80;
393
+ box-shadow: 0 0 0 3px rgba(10, 62, 128, 0.1);
394
+ }
395
+
396
+ button {
397
+ background: linear-gradient(135deg, #0a3e80 0%, #1e5aa8 100%);
398
+ color: white;
399
+ font-weight: 600;
400
+ cursor: pointer;
401
+ border: none;
402
+ box-shadow: 0 4px 15px rgba(10, 62, 128, 0.3);
403
+ transition: all 0.3s ease;
404
+ }
405
+
406
+ button:hover {
407
+ transform: translateY(-2px);
408
+ box-shadow: 0 8px 25px rgba(10, 62, 128, 0.4);
409
+ }
410
+
411
+ .nav {
412
+ display: flex;
413
+ justify-content: space-between;
414
+ margin: 15px 0;
415
+ gap: 10px;
416
+ }
417
+
418
+ .nav button {
419
+ flex: 1;
420
+ margin: 0;
421
+ padding: 12px 8px;
422
+ font-size: 14px;
423
+ }
424
+
425
+ .hidden { display: none; }
426
+
427
+ /* Profile Section Enhancement */
428
+ #profile-pic-display, #dashboard-pic {
429
+ border-radius: 50%;
430
+ width: 100px;
431
+ height: 100px;
432
+ margin-bottom: 20px;
433
+ border: 4px solid #0a3e80;
434
+ box-shadow: 0 4px 15px rgba(10, 62, 128, 0.3);
435
+ }
436
+
437
+ .welcome-msg {
438
+ text-align: center;
439
+ font-size: 18px;
440
+ margin-top: 20px;
441
+ color: #0a3e80;
442
+ font-weight: 500;
443
+ }
444
+
445
+ .whatsapp-link { text-align: center; margin-top: 20px; }
446
+ .whatsapp-link a {
447
+ color: #25D366;
448
+ font-weight: bold;
449
+ text-decoration: none;
450
+ padding: 10px 20px;
451
+ background: rgba(37, 211, 102, 0.1);
452
+ border-radius: 25px;
453
+ transition: all 0.3s ease;
454
+ }
455
+
456
+ .whatsapp-link a:hover {
457
+ background: rgba(37, 211, 102, 0.2);
458
+ transform: translateY(-2px);
459
+ }
460
+
461
+ .history-item { margin-bottom: 20px; }
462
+ .loading { opacity: 0.6; pointer-events: none; }
463
+
464
+ .email-status {
465
+ margin-top: 12px;
466
+ padding: 12px 16px;
467
+ border-radius: 8px;
468
+ text-align: center;
469
+ font-weight: 600;
470
+ }
471
+
472
+ .email-success {
473
+ background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
474
+ color: #155724;
475
+ border: 1px solid #c3e6cb;
476
+ }
477
+
478
+ .email-error {
479
+ background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
480
+ color: #721c24;
481
+ border: 1px solid #f5c6cb;
482
+ }
483
+
484
+ .optional-field { margin-top: 18px; }
485
+ .optional-field label {
486
+ display: block;
487
+ margin-bottom: 8px;
488
+ font-weight: 600;
489
+ color: #0a3e80;
490
+ }
491
+
492
+ /* Developer Contact Section */
493
+ .developer-contact {
494
+ background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
495
+ color: white;
496
+ padding: 20px;
497
+ border-radius: 12px;
498
+ margin-top: 25px;
499
+ text-align: center;
500
+ box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
501
+ }
502
+
503
+ .developer-contact h4 {
504
+ margin: 0 0 12px 0;
505
+ font-size: 18px;
506
+ }
507
+
508
+ .developer-contact p {
509
+ margin: 8px 0;
510
+ font-size: 15px;
511
+ }
512
+
513
+ .whatsapp-support {
514
+ background: rgba(255,255,255,0.2);
515
+ color: white;
516
+ padding: 12px 24px;
517
+ border: 2px solid rgba(255,255,255,0.3);
518
+ border-radius: 25px;
519
+ font-weight: bold;
520
+ cursor: pointer;
521
+ margin-top: 15px;
522
+ text-decoration: none;
523
+ display: inline-block;
524
+ transition: all 0.3s ease;
525
+ }
526
+
527
+ .whatsapp-support:hover {
528
+ background: rgba(255,255,255,0.3);
529
+ color: white;
530
+ transform: translateY(-2px);
531
+ }
532
+
533
+ /* Modal Styles */
534
+ .modal {
535
+ display: none;
536
+ position: fixed;
537
+ z-index: 1000;
538
+ left: 0;
539
+ top: 0;
540
+ width: 100%;
541
+ height: 100%;
542
+ background-color: rgba(0,0,0,0.5);
543
+ backdrop-filter: blur(5px);
544
+ }
545
+
546
+ .modal-content {
547
+ background-color: white;
548
+ margin: 10% auto;
549
+ padding: 30px;
550
+ border-radius: 15px;
551
+ width: 90%;
552
+ max-width: 400px;
553
+ box-shadow: 0 15px 35px rgba(0,0,0,0.2);
554
+ }
555
+
556
+ .close {
557
+ color: #aaa;
558
+ float: right;
559
+ font-size: 28px;
560
+ font-weight: bold;
561
+ cursor: pointer;
562
+ }
563
+
564
+ .close:hover {
565
+ color: #000;
566
+ }
567
+
568
+ /* Transaction Warning */
569
+ .transaction-warning {
570
+ margin-top: 15px;
571
+ padding: 12px;
572
+ background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
573
+ border: 1px solid #ffc107;
574
+ border-radius: 8px;
575
+ color: #856404;
576
+ text-align: center;
577
+ font-size: 14px;
578
+ font-weight: 500;
579
+ }
580
+
581
+ /* WhatsApp Group Section */
582
+ .whatsapp-group {
583
+ background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
584
+ color: white;
585
+ padding: 25px 20px;
586
+ border-radius: 15px;
587
+ text-align: center;
588
+ margin: 25px 0 0;
589
+ box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
590
+ position: relative;
591
+ overflow: hidden;
592
+ }
593
+
594
+ .whatsapp-group:before {
595
+ content: "";
596
+ position: absolute;
597
+ top: 0;
598
+ left: 0;
599
+ right: 0;
600
+ bottom: 0;
601
+ background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 40%);
602
+ }
603
+
604
+ .whatsapp-group h3 {
605
+ margin-top: 0;
606
+ font-size: 22px;
607
+ position: relative;
608
+ display: flex;
609
+ align-items: center;
610
+ justify-content: center;
611
+ gap: 10px;
612
+ }
613
+
614
+ .whatsapp-group p {
615
+ font-size: 16px;
616
+ margin-bottom: 20px;
617
+ position: relative;
618
+ }
619
+
620
+ .whatsapp-group-btn {
621
+ background: white;
622
+ color: #25D366;
623
+ padding: 14px 30px;
624
+ border-radius: 50px;
625
+ font-weight: 700;
626
+ text-decoration: none;
627
+ display: inline-block;
628
+ box-shadow: 0 4px 15px rgba(0,0,0,0.2);
629
+ transition: all 0.3s ease;
630
+ position: relative;
631
+ border: none;
632
+ font-size: 16px;
633
+ cursor: pointer;
634
+ }
635
+
636
+ .whatsapp-group-btn:hover {
637
+ transform: translateY(-3px);
638
+ box-shadow: 0 8px 25px rgba(0,0,0,0.3);
639
+ }
640
+
641
+ /* Financial Tools Section */
642
+ .tools-section {
643
+ margin: 30px 0;
644
+ background: linear-gradient(135deg, #f8fafc 0%, #e8ecf0 100%);
645
+ border-radius: 15px;
646
+ padding: 20px;
647
+ box-shadow: 0 4px 15px rgba(0,0,0,0.08);
648
+ }
649
+
650
+ .tools-grid {
651
+ display: grid;
652
+ grid-template-columns: repeat(3, 1fr);
653
+ gap: 15px;
654
+ margin-top: 20px;
655
+ }
656
+
657
+ .tool-card {
658
+ background: white;
659
+ border-radius: 12px;
660
+ padding: 15px;
661
+ text-align: center;
662
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
663
+ transition: all 0.3s ease;
664
+ border: 1px solid rgba(10, 62, 128, 0.1);
665
+ }
666
+
667
+ .tool-card:hover {
668
+ transform: translateY(-5px);
669
+ box-shadow: 0 8px 20px rgba(10, 62, 128, 0.15);
670
+ }
671
+
672
+ .tool-icon {
673
+ font-size: 24px;
674
+ margin-bottom: 10px;
675
+ color: #0a3e80;
676
+ }
677
+
678
+ .tool-card h4 {
679
+ margin: 0 0 5px 0;
680
+ color: #0a3e80;
681
+ font-weight: 600;
682
+ }
683
+
684
+ .tool-card p {
685
+ margin: 0;
686
+ font-size: 13px;
687
+ color: #666;
688
+ }
689
+
690
+ /* Charts Container */
691
+ .chart-container {
692
+ margin: 20px 0;
693
+ background: white;
694
+ border-radius: 12px;
695
+ padding: 20px;
696
+ box-shadow: 0 4px 15px rgba(0,0,0,0.08);
697
+ }
698
+
699
+ .chart {
700
+ height: 200px;
701
+ position: relative;
702
+ margin-top: 20px;
703
+ display: flex;
704
+ align-items: flex-end;
705
+ justify-content: space-around;
706
+ }
707
+
708
+ .chart-bar {
709
+ width: 30px;
710
+ background: linear-gradient(to top, #0a3e80, #2d6bb8);
711
+ border-radius: 5px 5px 0 0;
712
+ position: relative;
713
+ transition: all 0.5s ease;
714
+ }
715
+
716
+ .chart-bar-label {
717
+ position: absolute;
718
+ bottom: -25px;
719
+ left: 0;
720
+ width: 100%;
721
+ text-align: center;
722
+ font-size: 12px;
723
+ color: #666;
724
+ }
725
+
726
+ .chart-title {
727
+ text-align: center;
728
+ font-weight: 600;
729
+ color: #0a3e80;
730
+ margin-bottom: 10px;
731
+ }
732
+
733
+ /* Loan Calculator */
734
+ .calculator-container {
735
+ background: white;
736
+ border-radius: 12px;
737
+ padding: 20px;
738
+ box-shadow: 0 4px 15px rgba(0,0,0,0.08);
739
+ margin: 20px 0;
740
+ }
741
+
742
+ .calculator-result {
743
+ margin-top: 20px;
744
+ padding: 15px;
745
+ background: #f8fafc;
746
+ border-radius: 8px;
747
+ text-align: center;
748
+ font-weight: 600;
749
+ color: #0a3e80;
750
+ }
751
+
752
+ /* Responsive */
753
+ @media(max-width:600px){
754
+ .container { margin:10px; padding: 20px; }
755
+ .receipt-card { margin: 10px; padding: 25px 20px; max-width: 350px; }
756
+ .receipt-amount { font-size: 42px; }
757
+ .features-grid, .tools-grid { grid-template-columns: 1fr; }
758
+ .hero h1 { font-size: 28px; }
759
+ .hero p { font-size: 16px; }
760
+ .balance-actions { flex-direction: column; }
761
+ }
762
+
763
+ /* Footer WhatsApp Group */
764
+ .footer-whatsapp-group {
765
+ background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
766
+ color: white;
767
+ padding: 25px 20px;
768
+ border-radius: 15px;
769
+ text-align: center;
770
+ margin: 30px 0 0;
771
+ box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
772
+ position: relative;
773
+ overflow: hidden;
774
+ }
775
+
776
+ .footer-whatsapp-group:before {
777
+ content: "";
778
+ position: absolute;
779
+ top: 0;
780
+ left: 0;
781
+ right: 0;
782
+ bottom: 0;
783
+ background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 40%);
784
+ }
785
+
786
+ .footer-whatsapp-group h3 {
787
+ margin-top: 0;
788
+ font-size: 22px;
789
+ position: relative;
790
+ display: flex;
791
+ align-items: center;
792
+ justify-content: center;
793
+ gap: 10px;
794
+ }
795
+
796
+ .footer-whatsapp-group p {
797
+ font-size: 16px;
798
+ margin-bottom: 20px;
799
+ position: relative;
800
+ }
801
+
802
+ .footer-whatsapp-group-btn {
803
+ background: white;
804
+ color: #25D366;
805
+ padding: 14px 30px;
806
+ border-radius: 50px;
807
+ font-weight: 700;
808
+ text-decoration: none;
809
+ display: inline-block;
810
+ box-shadow: 0 4px 15px rgba(0,0,0,0.2);
811
+ transition: all 0.3s ease;
812
+ position: relative;
813
+ border: none;
814
+ font-size: 16px;
815
+ cursor: pointer;
816
+ }
817
+
818
+ .footer-whatsapp-group-btn:hover {
819
+ transform: translateY(-3px);
820
+ box-shadow: 0 8px 25px rgba(0,0,0,0.3);
821
+ }
822
+
823
+ /* Currency badge */
824
+ .currency-badge {
825
+ position: fixed;
826
+ top: 20px;
827
+ right: 20px;
828
+ background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
829
+ color: white;
830
+ padding: 8px 15px;
831
+ border-radius: 20px;
832
+ font-weight: 600;
833
+ box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
834
+ z-index: 1000;
835
+ }
836
+ </style>
837
+ </head>
838
+ <body>
839
+ <div class="currency-badge">50+ Currencies Supported</div>
840
+
841
+
842
+ <!-- Dashboard Section -->
843
+ <div class="container hidden" id="dashboard">
844
+ <h2>Welcome, <span id="user-name"></span> 👋</h2>
845
+ <img id="dashboard-pic" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23e2e8f0'/%3E%3Ctext x='50' y='55' text-anchor='middle' font-size='20' fill='%23666'%3E👤%3C/text%3E%3C/svg%3E" alt="Profile Picture" style="border-radius: 50%; width: 100px; height: 100px; margin-bottom: 10px;">
846
+
847
+ <!-- Balance Section -->
848
+ <div class="balance-section">
849
+ <div class="balance-label">Your Balance</div>
850
+ <div class="balance-amount" id="balance-display">$0.00</div>
851
+ <div class="balance-actions">
852
+ <button class="balance-btn" onclick="showAddFunds()">💰 Add Funds</button>
853
+ <button class="balance-btn" onclick="showBalanceSettings()">⚙️ Settings</button>
854
+ </div>
855
+ </div>
856
+
857
+ <!-- Financial Insights -->
858
+ <div class="chart-container">
859
+ <div class="chart-title">Monthly Spending</div>
860
+ <div class="chart" id="spending-chart">
861
+ <!-- Chart bars will be generated by JS -->
862
+ </div>
863
+ </div>
864
+
865
+ <div class="nav">
866
+ <button onclick="showTransfer()">💸 Transfer</button>
867
+ <button onclick="showHistory()">📊 History</button>
868
+ <button onclick="showSettings()">⚙️ Settings</button>
869
+ <button onclick="logout()">🚪 Logout</button>
870
+ </div>
871
+
872
+ <!-- Transfer Section -->
873
+ <div id="transfer">
874
+ <h3>💰 Make a Transfer</h3>
875
+ <input type="text" id="sender-name" placeholder="Sender Name">
876
+ <input type="text" id="acc-number" placeholder="Recipient Account Number">
877
+ <input type="text" id="acc-name" placeholder="Recipient Account Name">
878
+ <input type="text" id="bank-name" placeholder="Bank Name">
879
+ <input type="text" id="swift-code" placeholder="SWIFT Code">
880
+ <input type="text" id="remark" placeholder="Remark / Description">
881
+ <input type="number" id="amount" placeholder="Amount">
882
+ <select id="currency">
883
+ <!-- Currencies will be populated by JavaScript -->
884
+ </select>
885
+ <select id="transaction-status">
886
+ <option value="success">✅ Successful</option>
887
+ <option value="pending">⏳ Pending</option>
888
+ <option value="failed">❌ Failed</option>
889
+ </select>
890
+
891
+ <div class="optional-field">
892
+ <label for="alert-caption">🚨 Alert Caption (Optional):</label>
893
+ <select id="alert-caption">
894
+ <option value="">None</option>
895
+ <option value="⚠️ Suspicious Transaction Detected">Suspicious Transaction</option>
896
+ <option value="🚨 High Risk Transfer">High Risk Transfer</option>
897
+ <option value="🔒 Account Security Alert">Security Alert</option>
898
+ <option value="💰 Large Transaction">Large Transaction</option>
899
+ <option value="🆕 New Beneficiary">New Beneficiary</option>
900
+ </select>
901
+ </div>
902
+
903
+ <input type="email" id="recipient-email" placeholder="📧 Recipient Email" required>
904
+ <button onclick="submitTransfer()" id="submit-btn">🚀 Submit Transfer</button>
905
+ <div id="email-status"></div>
906
+
907
+ <!-- Transaction warning -->
908
+ <div class="transaction-warning">
909
+ ⚠️ Sending over 5 transactions in a single day can trigger system alerts and may lead to your account being banned.
910
+ </div>
911
+ </div>
912
+
913
+ <!-- History Section -->
914
+ <div id="history" class="hidden">
915
+ <h3>📊 Transaction History</h3>
916
+ <div id="history-list"></div>
917
+ </div>
918
+
919
+ <!-- Settings Section -->
920
+ <div id="settings" class="hidden">
921
+ <h3>⚙️ Settings</h3>
922
+ <input type="file" id="profile-pic" onchange="uploadProfilePic()">
923
+
924
+ <!-- Loan Calculator -->
925
+ <div class="calculator-container">
926
+ <h4>📈 Loan Calculator</h4>
927
+ <input type="number" id="loan-amount" placeholder="Loan Amount" value="1000">
928
+ <input type="number" id="interest-rate" placeholder="Interest Rate (%)" value="5">
929
+ <input type="number" id="loan-term" placeholder="Term (months)" value="12">
930
+ <button onclick="calculateLoan()">Calculate</button>
931
+ <div class="calculator-result" id="loan-result">Monthly Payment: $0.00</div>
932
+ </div>
933
+
934
+ <button onclick="deleteAccount()">🗑️ Delete Account</button>
935
+ <button onclick="borrowLoan()">💰 Borrow Loan</button>
936
+ <div class="whatsapp-link">
937
+ <a href="https://wa.me/17062948306" target="_blank">📱 Contact us on WhatsApp</a>
938
+ </div>
939
+
940
+ <!-- Developer Contact Section -->
941
+ <div class="developer-contact">
942
+ <h4>🔧 Developer Support</h4>
943
+ <p><strong>CBL</strong></p>
944
+ <p>Need technical assistance or custom features?</p>
945
+ <a href="https://wa.me/17062481811" target="_blank" class="whatsapp-support">
946
+ 📱 WhatsApp Developer: +1 (706) 248-1811
947
+ </a>
948
+ </div>
949
+ </div>
950
+
951
+ <!-- Receipt Section -->
952
+ <div id="receipt" class="hidden">
953
+ <h3>🧾 Transaction Receipt</h3>
954
+ <div class="receipt-card" id="receipt-card">
955
+ <div class="receipt-header">
956
+ <div class="receipt-logo">🏦 TrustNet Bank</div>
957
+ <p class="receipt-subtitle">Transaction Receipt</p>
958
+ </div>
959
+ <div class="receipt-amount" id="receipt-amount">$0.00</div>
960
+ <div id="receipt-status-container"></div>
961
+ <div id="alert-caption-display"></div>
962
+ <div class="transaction-details">
963
+ <div class="detail-row">
964
+ <span class="detail-label">Transaction ID:</span>
965
+ <span class="detail-value" id="transaction-id">TN12345678</span>
966
+ </div>
967
+ <div class="detail-row">
968
+ <span class="detail-label">Sender Name:</span>
969
+ <span class="detail-value" id="sender-name-display">John Doe</span>
970
+ </div>
971
+ <div class="detail-row">
972
+ <span class="detail-label">Sender Account:</span>
973
+ <span class="detail-value" id="sender-account-display">1234567890</span>
974
+ </div>
975
+ <div class="detail-row">
976
+ <span class="detail-label">Recipient Name:</span>
977
+ <span class="detail-value" id="recipient-name-display">Jane Smith</span>
978
+ </div>
979
+ <div class="detail-row">
980
+ <span class="detail-label">Recipient Account:</span>
981
+ <span class="detail-value" id="recipient-account-display">0987654321</span>
982
+ </div>
983
+ <div class="detail-row">
984
+ <span class="detail-label">Bank Name:</span>
985
+ <span class="detail-value" id="bank-name-display">TrustNet Bank</span>
986
+ </div>
987
+ <div class="detail-row">
988
+ <span class="detail-label">SWIFT Code:</span>
989
+ <span class="detail-value" id="swift-code-display">TRUSTNGB</span>
990
+ </div>
991
+ <div class="detail-row">
992
+ <span class="detail-label">Remark:</span>
993
+ <span class="detail-value" id="remark-display">Trust Net Bank Transfer</span>
994
+ </div>
995
+ <div class="detail-row">
996
+ <span class="detail-label">Date & Time:</span>
997
+ <span class="detail-value" id="date-time-display">May 15, 2023, 14:30</span>
998
+ </div>
999
+ </div>
1000
+ <div class="receipt-buttons">
1001
+ <button onclick="downloadReceipt()">⬇️ Download</button>
1002
+ <button onclick="shareReceipt()">↗️ Share</button>
1003
+ </div>
1004
+ </div>
1005
+ </div>
1006
+
1007
+ <!-- Footer WhatsApp Group -->
1008
+ <div class="footer-whatsapp-group">
1009
+ <h3>📱 Join Our Exclusive WhatsApp Group</h3>
1010
+ <p>Get access to premium tools, updates, and financial insights</p>
1011
+ <a href="https://chat.whatsapp.com/ER9UwcNHhFRCaUSZgvXJx9" class="footer-whatsapp-group-btn" target="_blank">
1012
+ Join Group Now
1013
+ </a>
1014
+ </div>
1015
+ </div>
1016
+
1017
+ <!-- Modals -->
1018
+ <div id="addFundsModal" class="modal">
1019
+ <div class="modal-content">
1020
+ <span class="close" onclick="closeAddFunds()">&times;</span>
1021
+ <h3>💰 Add Funds to Account</h3>
1022
+ <input type="number" id="fund-amount" placeholder="Amount" min="1">
1023
+ <select id="fund-currency">
1024
+ <!-- Currencies will be populated by JavaScript -->
1025
+ </select>
1026
+ <button onclick="addFunds()">💳 Add Funds</button>
1027
+ </div>
1028
+ </div>
1029
+
1030
+ <div id="balanceSettingsModal" class="modal">
1031
+ <div class="modal-content">
1032
+ <span class="close" onclick="closeBalanceSettings()">&times;</span>
1033
+ <h3>⚙️ Balance Settings</h3>
1034
+ <label for="default-currency">Default Currency:</label>
1035
+ <select id="default-currency">
1036
+ <!-- Currencies will be populated by JavaScript -->
1037
+ </select>
1038
+ <button onclick="saveBalanceSettings()">💾 Save Settings</button>
1039
+ </div>
1040
+ </div>
1041
+
1042
+ <!-- Success Animation Placeholder -->
1043
+ <div id="success-animation-container"></div>
1044
+
1045
+ <!-- EmailJS SDK -->
1046
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
1047
+ <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
1048
+
1049
+ <script>
1050
+ // EmailJS Configuration
1051
+ const EMAILJS_CONFIG = {
1052
+ publicKey: 'u9dqlpAygwqx-TTTK',
1053
+ serviceId: 'service_3uh2yqr',
1054
+ templateId: 'template_9i5r8vq'
1055
+ };
1056
+
1057
+ // Initialize EmailJS
1058
+ (function() {
1059
+ emailjs.init(EMAILJS_CONFIG.publicKey);
1060
+ })();
1061
+
1062
+ // Define 50+ popular currencies including Korean Won
1063
+ const currencies = [
1064
+ { code: "USD", symbol: "$", name: "US Dollar" },
1065
+ { code: "EUR", symbol: "€", name: "Euro" },
1066
+ { code: "GBP", symbol: "£", name: "British Pound" },
1067
+ { code: "JPY", symbol: "¥", name: "Japanese Yen" },
1068
+ { code: "KRW", symbol: "₩", name: "Korean Won" },
1069
+ { code: "AUD", symbol: "A$", name: "Australian Dollar" },
1070
+ { code: "CAD", symbol: "C$", name: "Canadian Dollar" },
1071
+ { code: "CHF", symbol: "Fr", name: "Swiss Franc" },
1072
+ { code: "CNY", symbol: "¥", name: "Chinese Yuan" },
1073
+ { code: "INR", symbol: "₹", name: "Indian Rupee" },
1074
+ { code: "MXN", symbol: "$", name: "Mexican Peso" },
1075
+ { code: "BRL", symbol: "R$", name: "Brazilian Real" },
1076
+ { code: "RUB", symbol: "₽", name: "Russian Ruble" },
1077
+ { code: "SGD", symbol: "S$", name: "Singapore Dollar" },
1078
+ { code: "HKD", symbol: "HK$", name: "Hong Kong Dollar" },
1079
+ { code: "NZD", symbol: "NZ$", name: "New Zealand Dollar" },
1080
+ { code: "SEK", symbol: "kr", name: "Swedish Krona" },
1081
+ { code: "NOK", symbol: "kr", name: "Norwegian Krone" },
1082
+ { code: "TRY", symbol: "₺", name: "Turkish Lira" },
1083
+ { code: "ZAR", symbol: "R", name: "South African Rand" },
1084
+ { code: "AED", symbol: "د.إ", name: "UAE Dirham" },
1085
+ { code: "SAR", symbol: "﷼", name: "Saudi Riyal" },
1086
+ { code: "THB", symbol: "฿", name: "Thai Baht" },
1087
+ { code: "PLN", symbol: "zł", name: "Polish Złoty" },
1088
+ { code: "IDR", symbol: "Rp", name: "Indonesian Rupiah" },
1089
+ { code: "HUF", symbol: "Ft", name: "Hungarian Forint" },
1090
+ { code: "CZK", symbol: "Kč", name: "Czech Koruna" },
1091
+ { code: "ILS", symbol: "₪", name: "Israeli Shekel" },
1092
+ { code: "CLP", symbol: "$", name: "Chilean Peso" },
1093
+ { code: "PHP", symbol: "₱", name: "Philippine Peso" },
1094
+ { code: "DKK", symbol: "kr", name: "Danish Krone" },
1095
+ { code: "MYR", symbol: "RM", name: "Malaysian Ringgit" },
1096
+ { code: "RON", symbol: "lei", name: "Romanian Leu" },
1097
+ { code: "TWD", symbol: "NT$", name: "New Taiwan Dollar" },
1098
+ { code: "EGP", symbol: "E£", name: "Egyptian Pound" },
1099
+ { code: "PKR", symbol: "₨", name: "Pakistani Rupee" },
1100
+ { code: "COP", symbol: "$", name: "Colombian Peso" },
1101
+ { code: "VND", symbol: "₫", name: "Vietnamese Dong" },
1102
+ { code: "BDT", symbol: "৳", name: "Bangladeshi Taka" },
1103
+ { code: "ARS", symbol: "$", name: "Argentine Peso" },
1104
+ { code: "UAH", symbol: "₴", name: "Ukrainian Hryvnia" },
1105
+ { code: "PEN", symbol: "S/", name: "Peruvian Sol" },
1106
+ { code: "QAR", symbol: "﷼", name: "Qatari Riyal" },
1107
+ { code: "KWD", symbol: "د.ك", name: "Kuwaiti Dinar" },
1108
+ { code: "OMR", symbol: "﷼", name: "Omani Rial" },
1109
+ { code: "BHD", symbol: ".د.ب", name: "Bahraini Dinar" },
1110
+ { code: "JOD", symbol: "د.ا", name: "Jordanian Dinar" },
1111
+ { code: "LKR", symbol: "₨", name: "Sri Lankan Rupee" },
1112
+ { code: "NGN", symbol: "₦", name: "Nigerian Naira" }
1113
+ ];
1114
+
1115
+ // Populate currency dropdowns
1116
+ function populateCurrencies() {
1117
+ const transferCurrency = document.getElementById('currency');
1118
+ const fundCurrency = document.getElementById('fund-currency');
1119
+ const defaultCurrency = document.getElementById('default-currency');
1120
+
1121
+ currencies.forEach(currency => {
1122
+ const option = document.createElement('option');
1123
+ option.value = currency.symbol;
1124
+ option.textContent = `${currency.code} (${currency.symbol}) - ${currency.name}`;
1125
+
1126
+ transferCurrency.appendChild(option.cloneNode(true));
1127
+ fundCurrency.appendChild(option.cloneNode(true));
1128
+ defaultCurrency.appendChild(option.cloneNode(true));
1129
+ });
1130
+ }
1131
+
1132
+ let user = localStorage.getItem('user');
1133
+ let currentTransaction = null;
1134
+
1135
+ // Initialize user data
1136
+ if (user) {
1137
+ document.getElementById('auth').classList.add('hidden');
1138
+ document.getElementById('dashboard').classList.remove('hidden');
1139
+ document.getElementById('user-name').innerText = user;
1140
+ document.getElementById('dashboard-pic').src = localStorage.getItem('profilePic') || 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\' viewBox=\'0 0 100 100\'%3E%3Ccircle cx=\'50\' cy=\'50\' r=\'40\' fill=\'%23e2e8f0\'/%3E%3Ctext x=\'50\' y=\'55\' text-anchor=\'middle\' font-size=\'20\' fill=\'%23666\'%3E👤%3C/text%3E%3C/svg%3E';
1141
+ updateBalanceDisplay();
1142
+ generateSpendingChart();
1143
+ }
1144
+
1145
+ // Populate currencies on page load
1146
+ document.addEventListener('DOMContentLoaded', function() {
1147
+ populateCurrencies();
1148
+ document.getElementById('username').focus();
1149
+ });
1150
+
1151
+ // Generate unique sender account number
1152
+ function generateSenderAccount() {
1153
+ const user = localStorage.getItem('user');
1154
+ if (!user) return '1234567890';
1155
+
1156
+ let senderAccount = localStorage.getItem('senderAccount');
1157
+ if (!senderAccount) {
1158
+ // Generate unique 10-digit account number
1159
+ senderAccount = '2' + Math.floor(Math.random() * 900000000) + Math.floor(Math.random() * 99);
1160
+ localStorage.setItem('senderAccount', senderAccount);
1161
+ }
1162
+ return senderAccount;
1163
+ }
1164
+
1165
+ // Balance Management
1166
+ function updateBalanceDisplay() {
1167
+ const balance = parseFloat(localStorage.getItem('balance') || '0');
1168
+ const currency = localStorage.getItem('defaultCurrency') || '$';
1169
+ document.getElementById('balance-display').textContent = currency + balance.toFixed(2);
1170
+ }
1171
+
1172
+ function showAddFunds() {
1173
+ document.getElementById('addFundsModal').style.display = 'block';
1174
+ }
1175
+
1176
+ function closeAddFunds() {
1177
+ document.getElementById('addFundsModal').style.display = 'none';
1178
+ }
1179
+
1180
+ function addFunds() {
1181
+ const amount = parseFloat(document.getElementById('fund-amount').value);
1182
+ const currency = document.getElementById('fund-currency').value;
1183
+
1184
+ if (amount && amount > 0) {
1185
+ const currentBalance = parseFloat(localStorage.getItem('balance') || '0');
1186
+ const newBalance = currentBalance + amount;
1187
+ localStorage.setItem('balance', newBalance.toString());
1188
+ localStorage.setItem('defaultCurrency', currency);
1189
+ updateBalanceDisplay();
1190
+ closeAddFunds();
1191
+
1192
+ // Clear input
1193
+ document.getElementById('fund-amount').value = '';
1194
+
1195
+ // Show success message
1196
+ showSuccessAnimation('💰 Funds Added Successfully! 🎉🎊🎖️');
1197
+ } else {
1198
+ alert('Please enter a valid amount');
1199
+ }
1200
+ }
1201
+
1202
+ function showBalanceSettings() {
1203
+ document.getElementById('balanceSettingsModal').style.display = 'block';
1204
+ document.getElementById('default-currency').value = localStorage.getItem('defaultCurrency') || '$';
1205
+ }
1206
+
1207
+ function closeBalanceSettings() {
1208
+ document.getElementById('balanceSettingsModal').style.display = 'none';
1209
+ }
1210
+
1211
+ function saveBalanceSettings() {
1212
+ const currency = document.getElementById('default-currency').value;
1213
+ localStorage.setItem('defaultCurrency', currency);
1214
+ updateBalanceDisplay();
1215
+ closeBalanceSettings();
1216
+ alert('Settings saved successfully!');
1217
+ }
1218
+
1219
+ // Success Animation with Sound
1220
+ function showSuccessAnimation(message) {
1221
+ const animation = document.createElement('div');
1222
+ animation.className = 'success-animation';
1223
+ animation.innerHTML = message;
1224
+ document.getElementById('success-animation-container').appendChild(animation);
1225
+
1226
+ // Play success sound
1227
+ playSuccessSound();
1228
+
1229
+ setTimeout(() => {
1230
+ if (document.getElementById('success-animation-container').contains(animation)) {
1231
+ document.getElementById('success-animation-container').removeChild(animation);
1232
+ }
1233
+ }, 3000);
1234
+ }
1235
+
1236
+ function playSuccessSound() {
1237
+ try {
1238
+ // Create audio context for success sound
1239
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
1240
+ const oscillator = audioContext.createOscillator();
1241
+ const gainNode = audioContext.createGain();
1242
+
1243
+ oscillator.connect(gainNode);
1244
+ gainNode.connect(audioContext.destination);
1245
+
1246
+ oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
1247
+ oscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1);
1248
+ oscillator.frequency.setValueAtTime(1200, audioContext.currentTime + 0.2);
1249
+
1250
+ gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
1251
+ gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
1252
+
1253
+ oscillator.start(audioContext.currentTime);
1254
+ oscillator.stop(audioContext.currentTime + 0.5);
1255
+ } catch (error) {
1256
+ console.log('Audio not supported');
1257
+ }
1258
+ }
1259
+
1260
+ function register() {
1261
+ const username = document.getElementById('username').value.trim();
1262
+ const password = document.getElementById('password').value.trim();
1263
+
1264
+ if (username && password) {
1265
+ localStorage.setItem('user', username);
1266
+ localStorage.setItem('password', password);
1267
+ localStorage.setItem('balance', '0');
1268
+ localStorage.setItem('defaultCurrency', '$');
1269
+ location.reload();
1270
+ } else {
1271
+ alert('Please enter both username and password!');
1272
+ }
1273
+ }
1274
+
1275
+ function login() {
1276
+ const username = document.getElementById('username').value.trim();
1277
+ const password = document.getElementById('password').value.trim();
1278
+ const savedUser = localStorage.getItem('user');
1279
+ const savedPassword = localStorage.getItem('password');
1280
+
1281
+ if (savedUser && savedPassword && savedUser === username && savedPassword === password) {
1282
+ document.getElementById('auth').classList.add('hidden');
1283
+ document.getElementById('dashboard').classList.remove('hidden');
1284
+ document.getElementById('user-name').innerText = savedUser;
1285
+ document.getElementById('dashboard-pic').src = localStorage.getItem('profilePic') || 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\' viewBox=\'0 0 100 100\'%3E%3Ccircle cx=\'50\' cy=\'50\' r=\'40\' fill=\'%23e2e8f0\'/%3E%3Ctext x=\'50\' y=\'55\' text-anchor=\'middle\' font-size=\'20\' fill=\'%23666\'%3E👤%3C/text%3E%3C/svg%3E';
1286
+ updateBalanceDisplay();
1287
+ generateSpendingChart();
1288
+ } else {
1289
+ alert('Invalid username or password. Please register if you don\'t have an account.');
1290
+ }
1291
+ }
1292
+
1293
+ function uploadProfilePic() {
1294
+ const file = document.getElementById('profile-pic').files[0];
1295
+ const reader = new FileReader();
1296
+ reader.onloadend = function() {
1297
+ localStorage.setItem('profilePic', reader.result);
1298
+ document.getElementById('dashboard-pic').src = reader.result;
1299
+ };
1300
+ if (file) reader.readAsDataURL(file);
1301
+ }
1302
+
1303
+ function logout() {
1304
+ localStorage.removeItem('user');
1305
+ localStorage.removeItem('password');
1306
+ localStorage.removeItem('profilePic');
1307
+ location.reload();
1308
+ }
1309
+
1310
+ function showTransfer() {
1311
+ document.getElementById('transfer').classList.remove('hidden');
1312
+ document.getElementById('history').classList.add('hidden');
1313
+ document.getElementById('settings').classList.add('hidden');
1314
+ document.getElementById('receipt').classList.add('hidden');
1315
+ }
1316
+
1317
+ function showHistory() {
1318
+ document.getElementById('transfer').classList.add('hidden');
1319
+ document.getElementById('history').classList.remove('hidden');
1320
+ document.getElementById('settings').classList.add('hidden');
1321
+ document.getElementById('receipt').classList.add('hidden');
1322
+
1323
+ let history = JSON.parse(localStorage.getItem('history')) || [];
1324
+ let historyHTML = '';
1325
+
1326
+ if (history.length === 0) {
1327
+ historyHTML = '<p style="text-align: center; color: #666; padding: 40px;">No transaction history yet. 📭</p>';
1328
+ } else {
1329
+ history.forEach((transaction, index) => {
1330
+ const alertCaptionHTML = transaction.alertCaption ?
1331
+ `<div class="alert-caption">${transaction.alertCaption}</div>` : '';
1332
+
1333
+ let statusClass, statusText;
1334
+ if (transaction.status === 'success') {
1335
+ statusClass = 'status-successful';
1336
+ statusText = 'Successful';
1337
+ } else if (transaction.status === 'pending') {
1338
+ statusClass = 'status-pending';
1339
+ statusText = 'Pending';
1340
+ } else if (transaction.status === 'failed') {
1341
+ statusClass = 'status-failed';
1342
+ statusText = 'Failed';
1343
+ }
1344
+ historyHTML += `
1345
+ <div class="history-item receipt-card">
1346
+ <div class="receipt-header">
1347
+ <div class="receipt-logo">🏦 TrustNet Bank</div>
1348
+ <p class="receipt-subtitle">Transaction Receipt</p>
1349
+ </div>
1350
+ <div class="receipt-amount">${transaction.currency}${transaction.amount}</div>
1351
+ <div class="${statusClass}">${statusText}</div>
1352
+ ${alertCaptionHTML}
1353
+ <div class="transaction-details">
1354
+ <div class="detail-row">
1355
+ <span class="detail-label">Transaction ID:</span>
1356
+ <span class="detail-value">${transaction.transferId}</span>
1357
+ </div>
1358
+ <div class="detail-row">
1359
+ <span class="detail-label">Recipient:</span>
1360
+ <span class="detail-value">${transaction.accName}</span>
1361
+ </div>
1362
+ <div class="detail-row">
1363
+ <span class="detail-label">Date:</span>
1364
+ <span class="detail-value">${transaction.date}</span>
1365
+ </div>
1366
+ </div>
1367
+ <div style="text-align: center; margin-top: 15px;">
1368
+ <button onclick="viewTransactionDetails(${index})" style="width: 100%; background: linear-gradient(135deg, #0a3e80 0%, #1e5aa8 100%); padding: 10px;">👁️ View Full Receipt</button>
1369
+ </div>
1370
+ </div>`;
1371
+ });
1372
+ }
1373
+
1374
+ document.getElementById('history-list').innerHTML = historyHTML;
1375
+ }
1376
+
1377
+ function viewTransactionDetails(index) {
1378
+ let history = JSON.parse(localStorage.getItem('history')) || [];
1379
+ if (index >= 0 && index < history.length) {
1380
+ const transaction = history[index];
1381
+ showTransactionReceipt(transaction);
1382
+ }
1383
+ }
1384
+
1385
+ function showTransactionReceipt(transaction) {
1386
+ document.getElementById('transfer').classList.add('hidden');
1387
+ document.getElementById('history').classList.add('hidden');
1388
+ document.getElementById('settings').classList.add('hidden');
1389
+ document.getElementById('receipt').classList.remove('hidden');
1390
+
1391
+ // Populate receipt data
1392
+ document.getElementById('receipt-amount').innerText = transaction.currency + transaction.amount;
1393
+
1394
+ // Set status with proper class
1395
+ const statusContainer = document.getElementById('receipt-status-container');
1396
+ let statusClass, statusText;
1397
+ if (transaction.status === 'success') {
1398
+ statusClass = 'status-successful';
1399
+ statusText = 'Successful';
1400
+ } else if (transaction.status === 'pending') {
1401
+ statusClass = 'status-pending';
1402
+ statusText = 'Pending';
1403
+ } else if (transaction.status === 'failed') {
1404
+ statusClass = 'status-failed';
1405
+ statusText = 'Failed';
1406
+ }
1407
+ statusContainer.innerHTML = `<div class="${statusClass}">${statusText}</div>`;
1408
+
1409
+ document.getElementById('transaction-id').innerText = transaction.transferId;
1410
+ document.getElementById('sender-name-display').innerText = transaction.senderName;
1411
+ document.getElementById('sender-account-display').innerText = transaction.senderAccount;
1412
+ document.getElementById('recipient-name-display').innerText = transaction.accName;
1413
+ document.getElementById('recipient-account-display').innerText = transaction.accNumber;
1414
+ document.getElementById('bank-name-display').innerText = transaction.bankName;
1415
+ document.getElementById('swift-code-display').innerText = transaction.swiftCode;
1416
+ document.getElementById('remark-display').innerText = transaction.remark || '';
1417
+ document.getElementById('date-time-display').innerText = transaction.date;
1418
+
1419
+ // Display alert caption if present
1420
+ const alertCaptionDisplay = document.getElementById('alert-caption-display');
1421
+ if (transaction.alertCaption) {
1422
+ alertCaptionDisplay.innerHTML = `<div class="alert-caption">${transaction.alertCaption}</div>`;
1423
+ } else {
1424
+ alertCaptionDisplay.innerHTML = '';
1425
+ }
1426
+
1427
+ currentTransaction = transaction;
1428
+ }
1429
+
1430
+ function showSettings() {
1431
+ document.getElementById('settings').classList.remove('hidden');
1432
+ document.getElementById('transfer').classList.add('hidden');
1433
+ document.getElementById('history').classList.add('hidden');
1434
+ document.getElementById('receipt').classList.add('hidden');
1435
+ }
1436
+
1437
+ // Enhanced function to send email notification
1438
+ async function sendEmailNotification(transactionData) {
1439
+ try {
1440
+ const emailParams = {
1441
+ name: transactionData.accName,
1442
+ acc_number: transactionData.accNumber,
1443
+ bank_name: transactionData.bankName,
1444
+ swift: transactionData.swiftCode,
1445
+ currency: transactionData.currency,
1446
+ amount: transactionData.amount,
1447
+ transactionNo: transactionData.transferId,
1448
+ date_time: transactionData.date,
1449
+ to_email: transactionData.recipientEmail,
1450
+ sender_name: transactionData.senderName,
1451
+ remark: transactionData.remark || 'Trust Net Bank Transfer',
1452
+ alert_caption: transactionData.alertCaption || ''
1453
+ };
1454
+ console.log('Sending email with params:', emailParams);
1455
+ const response = await emailjs.send(
1456
+ EMAILJS_CONFIG.serviceId,
1457
+ EMAILJS_CONFIG.templateId,
1458
+ emailParams
1459
+ );
1460
+ console.log('Email sent successfully:', response);
1461
+ return { success: true, response };
1462
+ } catch (error) {
1463
+ console.error('Email sending failed:', error);
1464
+ return { success: false, error };
1465
+ }
1466
+ }
1467
+
1468
+ // Enhanced submit transfer function with email integration
1469
+ async function submitTransfer() {
1470
+ // Validate required fields
1471
+ const requiredFields = [
1472
+ 'sender-name', 'acc-number', 'acc-name', 'bank-name',
1473
+ 'swift-code', 'amount', 'recipient-email'
1474
+ ];
1475
+
1476
+ for (let fieldId of requiredFields) {
1477
+ const field = document.getElementById(fieldId);
1478
+ if (!field.value.trim()) {
1479
+ alert(`Please fill in the ${fieldId.replace('-', ' ')}`);
1480
+ field.focus();
1481
+ return;
1482
+ }
1483
+ }
1484
+ // Validate email format
1485
+ const email = document.getElementById('recipient-email').value;
1486
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
1487
+ if (!emailRegex.test(email)) {
1488
+ alert('Please enter a valid email address');
1489
+ document.getElementById('recipient-email').focus();
1490
+ return;
1491
+ }
1492
+ // Show loading state
1493
+ const submitBtn = document.getElementById('submit-btn');
1494
+ const emailStatus = document.getElementById('email-status');
1495
+
1496
+ submitBtn.classList.add('loading');
1497
+ submitBtn.textContent = '⏳ Processing Transfer...';
1498
+ submitBtn.disabled = true;
1499
+ const data = {
1500
+ senderName: document.getElementById('sender-name').value,
1501
+ senderAccount: generateSenderAccount(),
1502
+ accNumber: document.getElementById('acc-number').value,
1503
+ accName: document.getElementById('acc-name').value,
1504
+ bankName: document.getElementById('bank-name').value,
1505
+ swiftCode: document.getElementById('swift-code').value,
1506
+ remark: document.getElementById('remark').value || 'Trust Net Bank Transfer',
1507
+ amount: document.getElementById('amount').value,
1508
+ currency: document.getElementById('currency').value,
1509
+ status: document.getElementById('transaction-status').value,
1510
+ alertCaption: document.getElementById('alert-caption').value,
1511
+ date: new Date().toLocaleString(),
1512
+ transferId: 'TN' + Math.floor(Math.random() * 1000000000),
1513
+ recipientEmail: document.getElementById('recipient-email').value
1514
+ };
1515
+ try {
1516
+ // Save transaction to history
1517
+ let history = JSON.parse(localStorage.getItem('history')) || [];
1518
+ history.push(data);
1519
+ localStorage.setItem('history', JSON.stringify(history));
1520
+ // Send email notification
1521
+ emailStatus.innerHTML = '<div class="email-status">📧 Sending email notification...</div>';
1522
+
1523
+ const emailResult = await sendEmailNotification(data);
1524
+
1525
+ if (emailResult.success) {
1526
+ emailStatus.innerHTML = '<div class="email-status email-success">✅ Email notification sent successfully!</div>';
1527
+ } else {
1528
+ emailStatus.innerHTML = '<div class="email-status email-error">⚠️ Transfer completed but email notification failed. Please contact support.</div>';
1529
+ console.error('Email error:', emailResult.error);
1530
+ }
1531
+ // Update balance display
1532
+ updateBalanceDisplay();
1533
+ // Show transaction receipt
1534
+ showTransactionReceipt(data);
1535
+
1536
+ // Show success animation with sound
1537
+ showSuccessAnimation('🎉 Transaction Successful! 🎊🎖️');
1538
+ // Clear form fields
1539
+ document.getElementById('sender-name').value = '';
1540
+ document.getElementById('acc-number').value = '';
1541
+ document.getElementById('acc-name').value = '';
1542
+ document.getElementById('bank-name').value = '';
1543
+ document.getElementById('swift-code').value = '';
1544
+ document.getElementById('remark').value = '';
1545
+ document.getElementById('amount').value = '';
1546
+ document.getElementById('alert-caption').value = '';
1547
+ document.getElementById('recipient-email').value = '';
1548
+ // Optional: Send to backend if you have one
1549
+ try {
1550
+ await fetch("/submit_transfer", {
1551
+ method: "POST",
1552
+ headers: {'Content-Type': 'application/json'},
1553
+ body: JSON.stringify({...data, emailSent: emailResult.success})
1554
+ });
1555
+ } catch (backendError) {
1556
+ console.log('Backend submission failed (optional):', backendError);
1557
+ }
1558
+ } catch (error) {
1559
+ console.error('Transfer submission error:', error);
1560
+ emailStatus.innerHTML = '<div class="email-status email-error">❌ Transfer failed. Please try again.</div>';
1561
+ } finally {
1562
+ // Reset button state
1563
+ submitBtn.classList.remove('loading');
1564
+ submitBtn.textContent = '🚀 Submit Transfer';
1565
+ submitBtn.disabled = false;
1566
+
1567
+ // Clear status after 5 seconds
1568
+ setTimeout(() => {
1569
+ emailStatus.innerHTML = '';
1570
+ }, 5000);
1571
+ }
1572
+ }
1573
+
1574
+ function deleteAccount() {
1575
+ if (confirm('Are you sure you want to delete your account? This cannot be undone.')) {
1576
+ localStorage.clear();
1577
+ alert('Account deleted.');
1578
+ location.reload();
1579
+ }
1580
+ }
1581
+
1582
+ function borrowLoan() {
1583
+ alert('💰 Loan feature coming soon. Stay tuned!');
1584
+ }
1585
+
1586
+ function downloadReceipt() {
1587
+ if (!currentTransaction) {
1588
+ alert('No receipt to download');
1589
+ return;
1590
+ }
1591
+ html2canvas(document.querySelector("#receipt-card")).then(canvas => {
1592
+ const link = document.createElement('a');
1593
+ link.download = `trustnet-bank-receipt-${currentTransaction.transferId}.png`;
1594
+ link.href = canvas.toDataURL();
1595
+ link.click();
1596
+ }).catch(error => {
1597
+ console.error('Download failed:', error);
1598
+ alert('Download failed. Please try again.');
1599
+ });
1600
+ }
1601
+
1602
+ function shareReceipt() {
1603
+ if (!currentTransaction) {
1604
+ alert('No receipt to share');
1605
+ return;
1606
+ }
1607
+ if (navigator.share) {
1608
+ html2canvas(document.querySelector("#receipt-card")).then(canvas => {
1609
+ canvas.toBlob(blob => {
1610
+ const file = new File([blob], `trustnet-receipt-${currentTransaction.transferId}.png`, { type: 'image/png' });
1611
+ navigator.share({
1612
+ title: 'TrustNet Bank Receipt',
1613
+ text: `Transaction Receipt - ${currentTransaction.currency}${currentTransaction.amount}`,
1614
+ files: [file]
1615
+ });
1616
+ });
1617
+ });
1618
+ } else {
1619
+ // Fallback for browsers that don't support Web Share API
1620
+ const receiptText = `🏦 TrustNet Bank Receipt💰 Amount: ${currentTransaction.currency}${currentTransaction.amount}👤 From: ${currentTransaction.senderName}👤 To: ${currentTransaction.accName}🏛️ Bank: ${currentTransaction.bankName}📅 Date: ${currentTransaction.date}🆔 Transaction ID: ${currentTransaction.transferId}
1621
+ `;
1622
+
1623
+ if (navigator.clipboard) {
1624
+ navigator.clipboard.writeText(receiptText).then(() => {
1625
+ alert('Receipt details copied to clipboard!');
1626
+ });
1627
+ } else {
1628
+ alert('Sharing not supported on this device');
1629
+ }
1630
+ }
1631
+ }
1632
+
1633
+ // Generate spending chart
1634
+ function generateSpendingChart() {
1635
+ const chartContainer = document.getElementById('spending-chart');
1636
+ chartContainer.innerHTML = '';
1637
+
1638
+ const categories = ['Food', 'Shopping', 'Bills', 'Entertainment', 'Transport'];
1639
+ const amounts = [120, 200, 150, 80, 60];
1640
+
1641
+ const maxAmount = Math.max(...amounts);
1642
+
1643
+ categories.forEach((category, index) => {
1644
+ const barHeight = (amounts[index] / maxAmount) * 150;
1645
+ const bar = document.createElement('div');
1646
+ bar.className = 'chart-bar';
1647
+ bar.style.height = `${barHeight}px`;
1648
+
1649
+ const label = document.createElement('div');
1650
+ label.className = 'chart-bar-label';
1651
+ label.textContent = category;
1652
+
1653
+ const value = document.createElement('div');
1654
+ value.className = 'chart-bar-value';
1655
+ value.textContent = `$${amounts[index]}`;
1656
+ value.style.position = 'absolute';
1657
+ value.style.top = `-25px`;
1658
+ value.style.left = '0';
1659
+ value.style.width = '100%';
1660
+ value.style.textAlign = 'center';
1661
+ value.style.fontSize = '12px';
1662
+ value.style.color = '#0a3e80';
1663
+ value.style.fontWeight = '600';
1664
+
1665
+ bar.appendChild(value);
1666
+ bar.appendChild(label);
1667
+ chartContainer.appendChild(bar);
1668
+
1669
+ // Animate the bar
1670
+ setTimeout(() => {
1671
+ bar.style.height = `${barHeight}px`;
1672
+ }, index * 200);
1673
+ });
1674
+ }
1675
+
1676
+ // Loan calculator
1677
+ function calculateLoan() {
1678
+ const amount = parseFloat(document.getElementById('loan-amount').value);
1679
+ const interestRate = parseFloat(document.getElementById('interest-rate').value);
1680
+ const term = parseFloat(document.getElementById('loan-term').value);
1681
+
1682
+ if (!amount || !interestRate || !term) {
1683
+ document.getElementById('loan-result').textContent = 'Please fill all fields';
1684
+ return;
1685
+ }
1686
+
1687
+ const monthlyInterestRate = interestRate / 100 / 12;
1688
+ const monthlyPayment = (amount * monthlyInterestRate) /
1689
+ (1 - Math.pow(1 + monthlyInterestRate, -term));
1690
+
1691
+ if (isNaN(monthlyPayment)) {
1692
+ document.getElementById('loan-result').textContent = 'Invalid calculation';
1693
+ return;
1694
+ }
1695
+
1696
+ document.getElementById('loan-result').textContent =
1697
+ `Monthly Payment: $${monthlyPayment.toFixed(2)}`;
1698
+ }
1699
+
1700
+ // Close modals when clicking outside
1701
+ window.onclick = function(event) {
1702
+ const addFundsModal = document.getElementById('addFundsModal');
1703
+ const balanceSettingsModal = document.getElementById('balanceSettingsModal');
1704
+
1705
+ if (event.target == addFundsModal) {
1706
+ closeAddFunds();
1707
+ }
1708
+ if (event.target == balanceSettingsModal) {
1709
+ closeBalanceSettings();
1710
+ }
1711
+ }
1712
+ </script>
1713
+
1714
+
1715
+ </body>
1716
+ </html>
style.css CHANGED
@@ -1,28 +1,550 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Sharp CSS Redesign</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: #4361ee;
11
+ --primary-dark: #3a56d4;
12
+ --secondary: #ff6b6b;
13
+ --dark: #2b2d42;
14
+ --light: #f8f9fa;
15
+ --gray: #8d99ae;
16
+ --success: #06d6a0;
17
+ --warning: #ffd166;
18
+ --border-radius: 12px;
19
+ --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
20
+ --transition: all 0.3s ease;
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ }
28
+
29
+ body {
30
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
31
+ min-height: 100vh;
32
+ padding: 2rem;
33
+ font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
34
+ color: var(--dark);
35
+ line-height: 1.6;
36
+ }
37
+
38
+ .container {
39
+ max-width: 1200px;
40
+ margin: 0 auto;
41
+ }
42
+
43
+ header {
44
+ display: flex;
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ margin-bottom: 2rem;
48
+ padding-bottom: 1.5rem;
49
+ border-bottom: 1px solid rgba(139, 149, 170, 0.15);
50
+ }
51
+
52
+ .logo {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 12px;
56
+ font-size: 1.8rem;
57
+ font-weight: 700;
58
+ color: var(--primary);
59
+ }
60
+
61
+ .logo i {
62
+ background: linear-gradient(135deg, var(--primary), #4895ef);
63
+ -webkit-background-clip: text;
64
+ -webkit-text-fill-color: transparent;
65
+ }
66
+
67
+ nav ul {
68
+ display: flex;
69
+ gap: 1.5rem;
70
+ list-style: none;
71
+ }
72
+
73
+ nav a {
74
+ text-decoration: none;
75
+ color: var(--dark);
76
+ font-weight: 600;
77
+ font-size: 1rem;
78
+ padding: 0.5rem 0.75rem;
79
+ border-radius: 8px;
80
+ transition: var(--transition);
81
+ }
82
+
83
+ nav a:hover, nav a.active {
84
+ background: rgba(67, 97, 238, 0.1);
85
+ color: var(--primary);
86
+ }
87
+
88
+ .cards-container {
89
+ display: grid;
90
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
91
+ gap: 2rem;
92
+ margin-bottom: 2rem;
93
+ }
94
+
95
+ .card {
96
+ background: white;
97
+ border-radius: var(--border-radius);
98
+ overflow: hidden;
99
+ box-shadow: var(--shadow);
100
+ transition: var(--transition);
101
+ border: 1px solid rgba(139, 149, 170, 0.1);
102
+ }
103
+
104
+ .card:hover {
105
+ transform: translateY(-5px);
106
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
107
+ }
108
+
109
+ .card-header {
110
+ padding: 1.25rem 1.5rem 0.5rem;
111
+ position: relative;
112
+ }
113
+
114
+ .card-icon {
115
+ position: absolute;
116
+ top: -20px;
117
+ right: 20px;
118
+ width: 48px;
119
+ height: 48px;
120
+ border-radius: 12px;
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ color: white;
125
+ font-size: 1.25rem;
126
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
127
+ }
128
+
129
+ .card-icon.blue {
130
+ background: linear-gradient(135deg, var(--primary), #4895ef);
131
+ }
132
+
133
+ .card-icon.green {
134
+ background: linear-gradient(135deg, var(--success), #1abc9c);
135
+ }
136
+
137
+ .card-icon.red {
138
+ background: linear-gradient(135deg, var(--secondary), #ff9e9e);
139
+ }
140
+
141
+ .card h1 {
142
+ font-size: 1.4rem;
143
+ font-weight: 700;
144
+ margin: 0 0 0.75rem;
145
+ color: var(--dark);
146
+ letter-spacing: -0.25px;
147
+ }
148
+
149
+ .card-content {
150
+ padding: 0 1.5rem 1.5rem;
151
+ }
152
+
153
+ .card p {
154
+ color: var(--gray);
155
+ font-size: 1rem;
156
+ margin-bottom: 1.25rem;
157
+ line-height: 1.7;
158
+ }
159
+
160
+ .card p.highlight {
161
+ background: rgba(67, 97, 238, 0.05);
162
+ padding: 1rem;
163
+ border-radius: 8px;
164
+ border-left: 3px solid var(--primary);
165
+ }
166
+
167
+ .stats {
168
+ display: flex;
169
+ justify-content: space-between;
170
+ margin-top: 1.5rem;
171
+ padding-top: 1.5rem;
172
+ border-top: 1px solid rgba(139, 149, 170, 0.1);
173
+ }
174
+
175
+ .stat-item {
176
+ text-align: center;
177
+ }
178
+
179
+ .stat-value {
180
+ font-size: 1.5rem;
181
+ font-weight: 700;
182
+ color: var(--primary);
183
+ }
184
+
185
+ .stat-label {
186
+ font-size: 0.85rem;
187
+ color: var(--gray);
188
+ margin-top: 0.25rem;
189
+ }
190
+
191
+ .progress-bar {
192
+ height: 8px;
193
+ background: rgba(139, 149, 170, 0.15);
194
+ border-radius: 4px;
195
+ overflow: hidden;
196
+ margin: 1.5rem 0;
197
+ }
198
+
199
+ .progress {
200
+ height: 100%;
201
+ background: linear-gradient(90deg, var(--primary), #4895ef);
202
+ border-radius: 4px;
203
+ width: 75%;
204
+ }
205
+
206
+ .btn-group {
207
+ display: flex;
208
+ gap: 0.75rem;
209
+ margin-top: 1rem;
210
+ }
211
+
212
+ .btn {
213
+ padding: 0.75rem 1.25rem;
214
+ border-radius: 8px;
215
+ font-weight: 600;
216
+ font-size: 0.95rem;
217
+ cursor: pointer;
218
+ transition: var(--transition);
219
+ border: none;
220
+ display: inline-flex;
221
+ align-items: center;
222
+ gap: 0.5rem;
223
+ }
224
+
225
+ .btn-primary {
226
+ background: var(--primary);
227
+ color: white;
228
+ box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
229
+ }
230
+
231
+ .btn-primary:hover {
232
+ background: var(--primary-dark);
233
+ transform: translateY(-2px);
234
+ box-shadow: 0 6px 16px rgba(67, 97, 238, 0.35);
235
+ }
236
+
237
+ .btn-outline {
238
+ background: transparent;
239
+ color: var(--primary);
240
+ border: 1px solid var(--primary);
241
+ }
242
+
243
+ .btn-outline:hover {
244
+ background: rgba(67, 97, 238, 0.05);
245
+ }
246
+
247
+ .feature-section {
248
+ background: white;
249
+ border-radius: var(--border-radius);
250
+ padding: 2rem;
251
+ margin-top: 2rem;
252
+ box-shadow: var(--shadow);
253
+ }
254
+
255
+ .section-header {
256
+ display: flex;
257
+ justify-content: space-between;
258
+ align-items: center;
259
+ margin-bottom: 1.5rem;
260
+ }
261
+
262
+ .section-header h2 {
263
+ font-size: 1.5rem;
264
+ color: var(--dark);
265
+ }
266
+
267
+ .features {
268
+ display: grid;
269
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
270
+ gap: 1.5rem;
271
+ }
272
+
273
+ .feature {
274
+ display: flex;
275
+ gap: 1rem;
276
+ }
277
+
278
+ .feature-icon {
279
+ width: 50px;
280
+ height: 50px;
281
+ border-radius: 12px;
282
+ background: rgba(67, 97, 238, 0.1);
283
+ display: flex;
284
+ align-items: center;
285
+ justify-content: center;
286
+ color: var(--primary);
287
+ font-size: 1.25rem;
288
+ flex-shrink: 0;
289
+ }
290
+
291
+ .feature-content h3 {
292
+ font-size: 1.1rem;
293
+ margin-bottom: 0.5rem;
294
+ }
295
+
296
+ .feature-content p {
297
+ color: var(--gray);
298
+ font-size: 0.95rem;
299
+ }
300
+
301
+ footer {
302
+ text-align: center;
303
+ margin-top: 3rem;
304
+ padding-top: 2rem;
305
+ color: var(--gray);
306
+ font-size: 0.9rem;
307
+ border-top: 1px solid rgba(139, 149, 170, 0.15);
308
+ }
309
+
310
+ .theme-toggle {
311
+ background: white;
312
+ border: 1px solid rgba(139, 149, 170, 0.15);
313
+ border-radius: 8px;
314
+ padding: 0.5rem 1rem;
315
+ font-weight: 600;
316
+ cursor: pointer;
317
+ display: flex;
318
+ align-items: center;
319
+ gap: 0.5rem;
320
+ transition: var(--transition);
321
+ }
322
+
323
+ .theme-toggle:hover {
324
+ background: rgba(67, 97, 238, 0.05);
325
+ color: var(--primary);
326
+ }
327
+
328
+ @media (max-width: 768px) {
329
+ body {
330
+ padding: 1.5rem 1rem;
331
+ }
332
+
333
+ header {
334
+ flex-direction: column;
335
+ gap: 1rem;
336
+ text-align: center;
337
+ }
338
+
339
+ nav ul {
340
+ justify-content: center;
341
+ }
342
+ }
343
+ </style>
344
+ </head>
345
+ <body>
346
+ <div class="container">
347
+ <header>
348
+ <div class="logo">
349
+ <i class="fas fa-diamond"></i>
350
+ <span>DesignSystem</span>
351
+ </div>
352
+
353
+ <nav>
354
+ <ul>
355
+ <li><a href="#" class="active">Dashboard</a></li>
356
+ <li><a href="#">Components</a></li>
357
+ <li><a href="#">Templates</a></li>
358
+ <li><a href="#">Documentation</a></li>
359
+ </ul>
360
+ </nav>
361
+
362
+ <button class="theme-toggle">
363
+ <i class="fas fa-moon"></i>
364
+ Dark Mode
365
+ </button>
366
+ </header>
367
+
368
+ <div class="cards-container">
369
+ <div class="card">
370
+ <div class="card-header">
371
+ <h1>Modern Card Design</h1>
372
+ <div class="card-icon blue">
373
+ <i class="fas fa-chart-line"></i>
374
+ </div>
375
+ </div>
376
+ <div class="card-content">
377
+ <p>This card demonstrates a sharp, modern design with subtle gradients and thoughtful spacing. The floating icon adds visual interest while maintaining clarity.</p>
378
+ <p class="highlight">Notice the refined typography with improved line-height and carefully chosen font weights for better readability.</p>
379
+
380
+ <div class="progress-bar">
381
+ <div class="progress"></div>
382
+ </div>
383
+
384
+ <div class="stats">
385
+ <div class="stat-item">
386
+ <div class="stat-value">86%</div>
387
+ <div class="stat-label">Completion</div>
388
+ </div>
389
+ <div class="stat-item">
390
+ <div class="stat-value">24</div>
391
+ <div class="stat-label">Tasks</div>
392
+ </div>
393
+ <div class="stat-item">
394
+ <div class="stat-value">3.8</div>
395
+ <div class="stat-label">Rating</div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="card">
402
+ <div class="card-header">
403
+ <h1>Enhanced Features</h1>
404
+ <div class="card-icon green">
405
+ <i class="fas fa-rocket"></i>
406
+ </div>
407
+ </div>
408
+ <div class="card-content">
409
+ <p>This card showcases additional UI elements like buttons, stats, and progress indicators. The clean design maintains focus on content while providing visual hierarchy.</p>
410
+
411
+ <div class="btn-group">
412
+ <button class="btn btn-primary">
413
+ <i class="fas fa-check"></i>
414
+ Primary Action
415
+ </button>
416
+ <button class="btn btn-outline">
417
+ <i class="fas fa-arrow-right"></i>
418
+ Learn More
419
+ </button>
420
+ </div>
421
+
422
+ <p>The button group demonstrates interactive elements with hover effects and subtle shadows for depth.</p>
423
+
424
+ <div class="stats">
425
+ <div class="stat-item">
426
+ <div class="stat-value">42+</div>
427
+ <div class="stat-label">Components</div>
428
+ </div>
429
+ <div class="stat-item">
430
+ <div class="stat-value">8</div>
431
+ <div class="stat-label">Themes</div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="feature-section">
439
+ <div class="section-header">
440
+ <h2>Design System Features</h2>
441
+ </div>
442
+
443
+ <div class="features">
444
+ <div class="feature">
445
+ <div class="feature-icon">
446
+ <i class="fas fa-palette"></i>
447
+ </div>
448
+ <div class="feature-content">
449
+ <h3>Modern Color Scheme</h3>
450
+ <p>Carefully selected color palette with accessible contrast ratios and pleasing gradients.</p>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="feature">
455
+ <div class="feature-icon">
456
+ <i class="fas fa-mobile-alt"></i>
457
+ </div>
458
+ <div class="feature-content">
459
+ <h3>Fully Responsive</h3>
460
+ <p>Adapts beautifully to all screen sizes with a mobile-first approach.</p>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="feature">
465
+ <div class="feature-icon">
466
+ <i class="fas fa-bolt"></i>
467
+ </div>
468
+ <div class="feature-content">
469
+ <h3>Performance Optimized</h3>
470
+ <p>Minimal and efficient CSS with no external dependencies.</p>
471
+ </div>
472
+ </div>
473
+
474
+ <div class="feature">
475
+ <div class="feature-icon">
476
+ <i class="fas fa-sliders-h"></i>
477
+ </div>
478
+ <div class="feature-content">
479
+ <h3>Customizable</h3>
480
+ <p>Easy to customize with CSS variables for colors, spacing, and more.</p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <footer>
487
+ <p>© 2023 Sharp Design System. All rights reserved.</p>
488
+ </footer>
489
+ </div>
490
 
491
+ <script>
492
+ // Simple theme toggle functionality
493
+ const themeToggle = document.querySelector('.theme-toggle');
494
+
495
+ themeToggle.addEventListener('click', () => {
496
+ document.body.classList.toggle('dark-theme');
497
+
498
+ if (document.body.classList.contains('dark-theme')) {
499
+ themeToggle.innerHTML = '<i class="fas fa-sun"></i> Light Mode';
500
+ themeToggle.style.color = '#ffd166';
501
+ } else {
502
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
503
+ themeToggle.style.color = '';
504
+ }
505
+ });
506
+
507
+ // Add dark theme styles
508
+ const style = document.createElement('style');
509
+ style.textContent = `
510
+ body.dark-theme {
511
+ --primary: #4895ef;
512
+ --primary-dark: #3a86e0;
513
+ --secondary: #ff6b6b;
514
+ --dark: #f8f9fa;
515
+ --light: #1e1f2d;
516
+ --gray: #a9b1c2;
517
+ background: linear-gradient(135deg, #1a1b2f 0%, #161627 100%);
518
+ color: #e9ecef;
519
+ }
520
+
521
+ body.dark-theme .card,
522
+ body.dark-theme .feature-section {
523
+ background: #25273d;
524
+ border-color: rgba(139, 149, 170, 0.15);
525
+ }
526
+
527
+ body.dark-theme .card p.highlight {
528
+ background: rgba(67, 97, 238, 0.15);
529
+ }
530
+
531
+ body.dark-theme .feature-icon {
532
+ background: rgba(72, 149, 239, 0.15);
533
+ }
534
+
535
+ body.dark-theme .btn-outline {
536
+ border-color: var(--primary);
537
+ }
538
+
539
+ body.dark-theme .btn-outline:hover {
540
+ background: rgba(72, 149, 239, 0.1);
541
+ }
542
+
543
+ body.dark-theme .progress-bar {
544
+ background: rgba(139, 149, 170, 0.2);
545
+ }
546
+ `;
547
+ document.head.appendChild(style);
548
+ </script>
549
+ </body>
550
+ </html>