Hugging Face's logo

Spaces:
Service-Xi
/
Trustpay
Running

App Files Community
Service-Xi commited on
Commit
8ea809e
·
verified ·
1 Parent(s): 4ac7e37

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +1816 -19
  2. style.css +549 -27
index.html CHANGED
@@ -1,19 +1,1816 @@
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
+ <!-- Auth Section -->
842
+ <div class="container" id="auth">
843
+ <!-- Hero Welcome Section -->
844
+ <div class="hero">
845
+ <h1>🏦 TrustNet Bank</h1>
846
+ <p>Multi-Currency Banking with 50+ Currencies</p>
847
+ </div>
848
+
849
+ <!-- Features Section -->
850
+ <div class="features-grid">
851
+ <div class="feature-card">
852
+ <div class="feature-icon">💸</div>
853
+ <h4>Global Transfers</h4>
854
+ <p>Send money in 50+ currencies</p>
855
+ </div>
856
+ <div class="feature-card">
857
+ <div class="feature-icon">🧾</div>
858
+ <h4>Transaction Receipts</h4>
859
+ <p>Generate sharp transaction records</p>
860
+ </div>
861
+ <div class="feature-card">
862
+ <div class="feature-icon">📧</div>
863
+ <h4>Email Alerts</h4>
864
+ <p>Real-time notifications</p>
865
+ </div>
866
+ <div class="feature-card">
867
+ <div class="feature-icon">🌍</div>
868
+ <h4>Korean Won & More</h4>
869
+ <p>Supports KRW and 50+ currencies</p>
870
+ </div>
871
+ </div>
872
+
873
+ <!-- Visual Elements -->
874
+ <div class="visual-section">
875
+ <div class="visual-element">
876
+ <div class="visual-icon">🇺🇸</div>
877
+ <small>USD Support</small>
878
+ </div>
879
+ <div class="visual-element">
880
+ <div class="visual-icon">🇰🇷</div>
881
+ <small>KRW Support</small>
882
+ </div>
883
+ <div class="visual-element">
884
+ <div class="visual-icon">🇪🇺</div>
885
+ <small>EUR Support</small>
886
+ </div>
887
+ </div>
888
+
889
+ <!-- Financial Tools Section -->
890
+ <div class="tools-section">
891
+ <h3>Financial Tools</h3>
892
+ <div class="tools-grid">
893
+ <div class="tool-card">
894
+ <div class="tool-icon">📈</div>
895
+ <h4>Currency Converter</h4>
896
+ <p>Convert between 50+ currencies</p>
897
+ </div>
898
+ <div class="tool-card">
899
+ <div class="tool-icon">📊</div>
900
+ <h4>Budget Planner</h4>
901
+ <p>Plan your expenses</p>
902
+ </div>
903
+ <div class="tool-card">
904
+ <div class="tool-icon">💹</div>
905
+ <h4>Investment Simulator</h4>
906
+ <p>Simulate investment growth</p>
907
+ </div>
908
+ </div>
909
+ </div>
910
+
911
+ <!-- Call to Action -->
912
+ <div style="text-align: center; margin: 25px 0;">
913
+ <h3>Global Banking Experience</h3>
914
+ <p>Join thousands enjoying multi-currency banking</p>
915
+
916
+ <div style="background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%); padding: 20px; border-radius: 12px; margin: 20px 0; border: 1px solid rgba(10, 62, 128, 0.1);">
917
+ <p><strong>For any issues or feature requests:</strong></p>
918
+ <a href="https://wa.me/17062481811" style="background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: white; padding: 12px 24px; border-radius: 25px; text-decoration: none; display: inline-block; margin-top: 12px; font-weight: 600; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); transition: all 0.3s ease;">
919
+ 📱 Contact CBL on WhatsApp
920
+ </a>
921
+ </div>
922
+ </div>
923
+
924
+ <!-- Footer WhatsApp Group -->
925
+ <div class="footer-whatsapp-group">
926
+ <h3>📱 Join Our Exclusive WhatsApp Group</h3>
927
+ <p>Get access to premium tools, updates, and financial insights</p>
928
+ <a href="https://chat.whatsapp.com/ER9UwcNHhFRCaUSZgvXJx9" class="footer-whatsapp-group-btn" target="_blank">
929
+ Join Group Now
930
+ </a>
931
+ </div>
932
+
933
+ <!-- Auth Content -->
934
+ <img 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" id="profile-pic-display" class="hidden" alt="Profile Picture">
935
+ <div class="welcome-msg"><p>Register or Login to access your dashboard.</p></div>
936
+ <input type="text" id="username" placeholder="Username">
937
+ <input type="password" id="password" placeholder="Password">
938
+ <button onclick="register()">Register</button>
939
+ <button onclick="login()">Login</button>
940
+ </div>
941
+
942
+ <!-- Dashboard Section -->
943
+ <div class="container hidden" id="dashboard">
944
+ <h2>Welcome, <span id="user-name"></span> 👋</h2>
945
+ <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;">
946
+
947
+ <!-- Balance Section -->
948
+ <div class="balance-section">
949
+ <div class="balance-label">Your Balance</div>
950
+ <div class="balance-amount" id="balance-display">$0.00</div>
951
+ <div class="balance-actions">
952
+ <button class="balance-btn" onclick="showAddFunds()">💰 Add Funds</button>
953
+ <button class="balance-btn" onclick="showBalanceSettings()">⚙️ Settings</button>
954
+ </div>
955
+ </div>
956
+
957
+ <!-- Financial Insights -->
958
+ <div class="chart-container">
959
+ <div class="chart-title">Monthly Spending</div>
960
+ <div class="chart" id="spending-chart">
961
+ <!-- Chart bars will be generated by JS -->
962
+ </div>
963
+ </div>
964
+
965
+ <div class="nav">
966
+ <button onclick="showTransfer()">💸 Transfer</button>
967
+ <button onclick="showHistory()">📊 History</button>
968
+ <button onclick="showSettings()">⚙️ Settings</button>
969
+ <button onclick="logout()">🚪 Logout</button>
970
+ </div>
971
+
972
+ <!-- Transfer Section -->
973
+ <div id="transfer">
974
+ <h3>💰 Make a Transfer</h3>
975
+ <input type="text" id="sender-name" placeholder="Sender Name">
976
+ <input type="text" id="acc-number" placeholder="Recipient Account Number">
977
+ <input type="text" id="acc-name" placeholder="Recipient Account Name">
978
+ <input type="text" id="bank-name" placeholder="Bank Name">
979
+ <input type="text" id="swift-code" placeholder="SWIFT Code">
980
+ <input type="text" id="remark" placeholder="Remark / Description">
981
+ <input type="number" id="amount" placeholder="Amount">
982
+ <select id="currency">
983
+ <!-- Currencies will be populated by JavaScript -->
984
+ </select>
985
+ <select id="transaction-status">
986
+ <option value="success">✅ Successful</option>
987
+ <option value="pending">⏳ Pending</option>
988
+ <option value="failed">❌ Failed</option>
989
+ </select>
990
+
991
+ <div class="optional-field">
992
+ <label for="alert-caption">🚨 Alert Caption (Optional):</label>
993
+ <select id="alert-caption">
994
+ <option value="">None</option>
995
+ <option value="⚠️ Suspicious Transaction Detected">Suspicious Transaction</option>
996
+ <option value="🚨 High Risk Transfer">High Risk Transfer</option>
997
+ <option value="🔒 Account Security Alert">Security Alert</option>
998
+ <option value="💰 Large Transaction">Large Transaction</option>
999
+ <option value="🆕 New Beneficiary">New Beneficiary</option>
1000
+ </select>
1001
+ </div>
1002
+
1003
+ <input type="email" id="recipient-email" placeholder="📧 Recipient Email" required>
1004
+ <button onclick="submitTransfer()" id="submit-btn">🚀 Submit Transfer</button>
1005
+ <div id="email-status"></div>
1006
+
1007
+ <!-- Transaction warning -->
1008
+ <div class="transaction-warning">
1009
+ ⚠️ Sending over 5 transactions in a single day can trigger system alerts and may lead to your account being banned.
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <!-- History Section -->
1014
+ <div id="history" class="hidden">
1015
+ <h3>📊 Transaction History</h3>
1016
+ <div id="history-list"></div>
1017
+ </div>
1018
+
1019
+ <!-- Settings Section -->
1020
+ <div id="settings" class="hidden">
1021
+ <h3>⚙️ Settings</h3>
1022
+ <input type="file" id="profile-pic" onchange="uploadProfilePic()">
1023
+
1024
+ <!-- Loan Calculator -->
1025
+ <div class="calculator-container">
1026
+ <h4>📈 Loan Calculator</h4>
1027
+ <input type="number" id="loan-amount" placeholder="Loan Amount" value="1000">
1028
+ <input type="number" id="interest-rate" placeholder="Interest Rate (%)" value="5">
1029
+ <input type="number" id="loan-term" placeholder="Term (months)" value="12">
1030
+ <button onclick="calculateLoan()">Calculate</button>
1031
+ <div class="calculator-result" id="loan-result">Monthly Payment: $0.00</div>
1032
+ </div>
1033
+
1034
+ <button onclick="deleteAccount()">🗑️ Delete Account</button>
1035
+ <button onclick="borrowLoan()">💰 Borrow Loan</button>
1036
+ <div class="whatsapp-link">
1037
+ <a href="https://wa.me/17062948306" target="_blank">📱 Contact us on WhatsApp</a>
1038
+ </div>
1039
+
1040
+ <!-- Developer Contact Section -->
1041
+ <div class="developer-contact">
1042
+ <h4>🔧 Developer Support</h4>
1043
+ <p><strong>CBL</strong></p>
1044
+ <p>Need technical assistance or custom features?</p>
1045
+ <a href="https://wa.me/17062481811" target="_blank" class="whatsapp-support">
1046
+ 📱 WhatsApp Developer: +1 (706) 248-1811
1047
+ </a>
1048
+ </div>
1049
+ </div>
1050
+
1051
+ <!-- Receipt Section -->
1052
+ <div id="receipt" class="hidden">
1053
+ <h3>🧾 Transaction Receipt</h3>
1054
+ <div class="receipt-card" id="receipt-card">
1055
+ <div class="receipt-header">
1056
+ <div class="receipt-logo">🏦 TrustNet Bank</div>
1057
+ <p class="receipt-subtitle">Transaction Receipt</p>
1058
+ </div>
1059
+ <div class="receipt-amount" id="receipt-amount">$0.00</div>
1060
+ <div id="receipt-status-container"></div>
1061
+ <div id="alert-caption-display"></div>
1062
+ <div class="transaction-details">
1063
+ <div class="detail-row">
1064
+ <span class="detail-label">Transaction ID:</span>
1065
+ <span class="detail-value" id="transaction-id">TN12345678</span>
1066
+ </div>
1067
+ <div class="detail-row">
1068
+ <span class="detail-label">Sender Name:</span>
1069
+ <span class="detail-value" id="sender-name-display">John Doe</span>
1070
+ </div>
1071
+ <div class="detail-row">
1072
+ <span class="detail-label">Sender Account:</span>
1073
+ <span class="detail-value" id="sender-account-display">1234567890</span>
1074
+ </div>
1075
+ <div class="detail-row">
1076
+ <span class="detail-label">Recipient Name:</span>
1077
+ <span class="detail-value" id="recipient-name-display">Jane Smith</span>
1078
+ </div>
1079
+ <div class="detail-row">
1080
+ <span class="detail-label">Recipient Account:</span>
1081
+ <span class="detail-value" id="recipient-account-display">0987654321</span>
1082
+ </div>
1083
+ <div class="detail-row">
1084
+ <span class="detail-label">Bank Name:</span>
1085
+ <span class="detail-value" id="bank-name-display">TrustNet Bank</span>
1086
+ </div>
1087
+ <div class="detail-row">
1088
+ <span class="detail-label">SWIFT Code:</span>
1089
+ <span class="detail-value" id="swift-code-display">TRUSTNGB</span>
1090
+ </div>
1091
+ <div class="detail-row">
1092
+ <span class="detail-label">Remark:</span>
1093
+ <span class="detail-value" id="remark-display">Trust Net Bank Transfer</span>
1094
+ </div>
1095
+ <div class="detail-row">
1096
+ <span class="detail-label">Date & Time:</span>
1097
+ <span class="detail-value" id="date-time-display">May 15, 2023, 14:30</span>
1098
+ </div>
1099
+ </div>
1100
+ <div class="receipt-buttons">
1101
+ <button onclick="downloadReceipt()">⬇️ Download</button>
1102
+ <button onclick="shareReceipt()">↗️ Share</button>
1103
+ </div>
1104
+ </div>
1105
+ </div>
1106
+
1107
+ <!-- Footer WhatsApp Group -->
1108
+ <div class="footer-whatsapp-group">
1109
+ <h3>📱 Join Our Exclusive WhatsApp Group</h3>
1110
+ <p>Get access to premium tools, updates, and financial insights</p>
1111
+ <a href="https://chat.whatsapp.com/ER9UwcNHhFRCaUSZgvXJx9" class="footer-whatsapp-group-btn" target="_blank">
1112
+ Join Group Now
1113
+ </a>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ <!-- Modals -->
1118
+ <div id="addFundsModal" class="modal">
1119
+ <div class="modal-content">
1120
+ <span class="close" onclick="closeAddFunds()">&times;</span>
1121
+ <h3>💰 Add Funds to Account</h3>
1122
+ <input type="number" id="fund-amount" placeholder="Amount" min="1">
1123
+ <select id="fund-currency">
1124
+ <!-- Currencies will be populated by JavaScript -->
1125
+ </select>
1126
+ <button onclick="addFunds()">💳 Add Funds</button>
1127
+ </div>
1128
+ </div>
1129
+
1130
+ <div id="balanceSettingsModal" class="modal">
1131
+ <div class="modal-content">
1132
+ <span class="close" onclick="closeBalanceSettings()">&times;</span>
1133
+ <h3>⚙️ Balance Settings</h3>
1134
+ <label for="default-currency">Default Currency:</label>
1135
+ <select id="default-currency">
1136
+ <!-- Currencies will be populated by JavaScript -->
1137
+ </select>
1138
+ <button onclick="saveBalanceSettings()">💾 Save Settings</button>
1139
+ </div>
1140
+ </div>
1141
+
1142
+ <!-- Success Animation Placeholder -->
1143
+ <div id="success-animation-container"></div>
1144
+
1145
+ <!-- EmailJS SDK -->
1146
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
1147
+ <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
1148
+
1149
+ <script>
1150
+ // EmailJS Configuration
1151
+ const EMAILJS_CONFIG = {
1152
+ publicKey: 'bCEoUns2bsXKAYaF8',
1153
+ serviceId: 'service_4k4r8x9',
1154
+ templateId: 'template_xn5zlko'
1155
+ };
1156
+
1157
+ // Initialize EmailJS
1158
+ (function() {
1159
+ emailjs.init(EMAILJS_CONFIG.publicKey);
1160
+ })();
1161
+
1162
+ // Define 50+ popular currencies including Korean Won
1163
+ const currencies = [
1164
+ { code: "USD", symbol: "$", name: "US Dollar" },
1165
+ { code: "EUR", symbol: "€", name: "Euro" },
1166
+ { code: "GBP", symbol: "£", name: "British Pound" },
1167
+ { code: "JPY", symbol: "¥", name: "Japanese Yen" },
1168
+ { code: "KRW", symbol: "₩", name: "Korean Won" },
1169
+ { code: "AUD", symbol: "A$", name: "Australian Dollar" },
1170
+ { code: "CAD", symbol: "C$", name: "Canadian Dollar" },
1171
+ { code: "CHF", symbol: "Fr", name: "Swiss Franc" },
1172
+ { code: "CNY", symbol: "¥", name: "Chinese Yuan" },
1173
+ { code: "INR", symbol: "₹", name: "Indian Rupee" },
1174
+ { code: "MXN", symbol: "$", name: "Mexican Peso" },
1175
+ { code: "BRL", symbol: "R$", name: "Brazilian Real" },
1176
+ { code: "RUB", symbol: "₽", name: "Russian Ruble" },
1177
+ { code: "SGD", symbol: "S$", name: "Singapore Dollar" },
1178
+ { code: "HKD", symbol: "HK$", name: "Hong Kong Dollar" },
1179
+ { code: "NZD", symbol: "NZ$", name: "New Zealand Dollar" },
1180
+ { code: "SEK", symbol: "kr", name: "Swedish Krona" },
1181
+ { code: "NOK", symbol: "kr", name: "Norwegian Krone" },
1182
+ { code: "TRY", symbol: "₺", name: "Turkish Lira" },
1183
+ { code: "ZAR", symbol: "R", name: "South African Rand" },
1184
+ { code: "AED", symbol: "د.إ", name: "UAE Dirham" },
1185
+ { code: "SAR", symbol: "﷼", name: "Saudi Riyal" },
1186
+ { code: "THB", symbol: "฿", name: "Thai Baht" },
1187
+ { code: "PLN", symbol: "zł", name: "Polish Złoty" },
1188
+ { code: "IDR", symbol: "Rp", name: "Indonesian Rupiah" },
1189
+ { code: "HUF", symbol: "Ft", name: "Hungarian Forint" },
1190
+ { code: "CZK", symbol: "Kč", name: "Czech Koruna" },
1191
+ { code: "ILS", symbol: "₪", name: "Israeli Shekel" },
1192
+ { code: "CLP", symbol: "$", name: "Chilean Peso" },
1193
+ { code: "PHP", symbol: "₱", name: "Philippine Peso" },
1194
+ { code: "DKK", symbol: "kr", name: "Danish Krone" },
1195
+ { code: "MYR", symbol: "RM", name: "Malaysian Ringgit" },
1196
+ { code: "RON", symbol: "lei", name: "Romanian Leu" },
1197
+ { code: "TWD", symbol: "NT$", name: "New Taiwan Dollar" },
1198
+ { code: "EGP", symbol: "E£", name: "Egyptian Pound" },
1199
+ { code: "PKR", symbol: "₨", name: "Pakistani Rupee" },
1200
+ { code: "COP", symbol: "$", name: "Colombian Peso" },
1201
+ { code: "VND", symbol: "₫", name: "Vietnamese Dong" },
1202
+ { code: "BDT", symbol: "৳", name: "Bangladeshi Taka" },
1203
+ { code: "ARS", symbol: "$", name: "Argentine Peso" },
1204
+ { code: "UAH", symbol: "₴", name: "Ukrainian Hryvnia" },
1205
+ { code: "PEN", symbol: "S/", name: "Peruvian Sol" },
1206
+ { code: "QAR", symbol: "﷼", name: "Qatari Riyal" },
1207
+ { code: "KWD", symbol: "د.ك", name: "Kuwaiti Dinar" },
1208
+ { code: "OMR", symbol: "﷼", name: "Omani Rial" },
1209
+ { code: "BHD", symbol: ".د.ب", name: "Bahraini Dinar" },
1210
+ { code: "JOD", symbol: "د.ا", name: "Jordanian Dinar" },
1211
+ { code: "LKR", symbol: "₨", name: "Sri Lankan Rupee" },
1212
+ { code: "NGN", symbol: "₦", name: "Nigerian Naira" }
1213
+ ];
1214
+
1215
+ // Populate currency dropdowns
1216
+ function populateCurrencies() {
1217
+ const transferCurrency = document.getElementById('currency');
1218
+ const fundCurrency = document.getElementById('fund-currency');
1219
+ const defaultCurrency = document.getElementById('default-currency');
1220
+
1221
+ currencies.forEach(currency => {
1222
+ const option = document.createElement('option');
1223
+ option.value = currency.symbol;
1224
+ option.textContent = `${currency.code} (${currency.symbol}) - ${currency.name}`;
1225
+
1226
+ transferCurrency.appendChild(option.cloneNode(true));
1227
+ fundCurrency.appendChild(option.cloneNode(true));
1228
+ defaultCurrency.appendChild(option.cloneNode(true));
1229
+ });
1230
+ }
1231
+
1232
+ let user = localStorage.getItem('user');
1233
+ let currentTransaction = null;
1234
+
1235
+ // Initialize user data
1236
+ if (user) {
1237
+ document.getElementById('auth').classList.add('hidden');
1238
+ document.getElementById('dashboard').classList.remove('hidden');
1239
+ document.getElementById('user-name').innerText = user;
1240
+ 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';
1241
+ updateBalanceDisplay();
1242
+ generateSpendingChart();
1243
+ }
1244
+
1245
+ // Populate currencies on page load
1246
+ document.addEventListener('DOMContentLoaded', function() {
1247
+ populateCurrencies();
1248
+ document.getElementById('username').focus();
1249
+ });
1250
+
1251
+ // Generate unique sender account number
1252
+ function generateSenderAccount() {
1253
+ const user = localStorage.getItem('user');
1254
+ if (!user) return '1234567890';
1255
+
1256
+ let senderAccount = localStorage.getItem('senderAccount');
1257
+ if (!senderAccount) {
1258
+ // Generate unique 10-digit account number
1259
+ senderAccount = '2' + Math.floor(Math.random() * 900000000) + Math.floor(Math.random() * 99);
1260
+ localStorage.setItem('senderAccount', senderAccount);
1261
+ }
1262
+ return senderAccount;
1263
+ }
1264
+
1265
+ // Balance Management
1266
+ function updateBalanceDisplay() {
1267
+ const balance = parseFloat(localStorage.getItem('balance') || '0');
1268
+ const currency = localStorage.getItem('defaultCurrency') || '$';
1269
+ document.getElementById('balance-display').textContent = currency + balance.toFixed(2);
1270
+ }
1271
+
1272
+ function showAddFunds() {
1273
+ document.getElementById('addFundsModal').style.display = 'block';
1274
+ }
1275
+
1276
+ function closeAddFunds() {
1277
+ document.getElementById('addFundsModal').style.display = 'none';
1278
+ }
1279
+
1280
+ function addFunds() {
1281
+ const amount = parseFloat(document.getElementById('fund-amount').value);
1282
+ const currency = document.getElementById('fund-currency').value;
1283
+
1284
+ if (amount && amount > 0) {
1285
+ const currentBalance = parseFloat(localStorage.getItem('balance') || '0');
1286
+ const newBalance = currentBalance + amount;
1287
+ localStorage.setItem('balance', newBalance.toString());
1288
+ localStorage.setItem('defaultCurrency', currency);
1289
+ updateBalanceDisplay();
1290
+ closeAddFunds();
1291
+
1292
+ // Clear input
1293
+ document.getElementById('fund-amount').value = '';
1294
+
1295
+ // Show success message
1296
+ showSuccessAnimation('💰 Funds Added Successfully! 🎉🎊🎖️');
1297
+ } else {
1298
+ alert('Please enter a valid amount');
1299
+ }
1300
+ }
1301
+
1302
+ function showBalanceSettings() {
1303
+ document.getElementById('balanceSettingsModal').style.display = 'block';
1304
+ document.getElementById('default-currency').value = localStorage.getItem('defaultCurrency') || '$';
1305
+ }
1306
+
1307
+ function closeBalanceSettings() {
1308
+ document.getElementById('balanceSettingsModal').style.display = 'none';
1309
+ }
1310
+
1311
+ function saveBalanceSettings() {
1312
+ const currency = document.getElementById('default-currency').value;
1313
+ localStorage.setItem('defaultCurrency', currency);
1314
+ updateBalanceDisplay();
1315
+ closeBalanceSettings();
1316
+ alert('Settings saved successfully!');
1317
+ }
1318
+
1319
+ // Success Animation with Sound
1320
+ function showSuccessAnimation(message) {
1321
+ const animation = document.createElement('div');
1322
+ animation.className = 'success-animation';
1323
+ animation.innerHTML = message;
1324
+ document.getElementById('success-animation-container').appendChild(animation);
1325
+
1326
+ // Play success sound
1327
+ playSuccessSound();
1328
+
1329
+ setTimeout(() => {
1330
+ if (document.getElementById('success-animation-container').contains(animation)) {
1331
+ document.getElementById('success-animation-container').removeChild(animation);
1332
+ }
1333
+ }, 3000);
1334
+ }
1335
+
1336
+ function playSuccessSound() {
1337
+ try {
1338
+ // Create audio context for success sound
1339
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
1340
+ const oscillator = audioContext.createOscillator();
1341
+ const gainNode = audioContext.createGain();
1342
+
1343
+ oscillator.connect(gainNode);
1344
+ gainNode.connect(audioContext.destination);
1345
+
1346
+ oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
1347
+ oscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1);
1348
+ oscillator.frequency.setValueAtTime(1200, audioContext.currentTime + 0.2);
1349
+
1350
+ gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
1351
+ gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
1352
+
1353
+ oscillator.start(audioContext.currentTime);
1354
+ oscillator.stop(audioContext.currentTime + 0.5);
1355
+ } catch (error) {
1356
+ console.log('Audio not supported');
1357
+ }
1358
+ }
1359
+
1360
+ function register() {
1361
+ const username = document.getElementById('username').value.trim();
1362
+ const password = document.getElementById('password').value.trim();
1363
+
1364
+ if (username && password) {
1365
+ localStorage.setItem('user', username);
1366
+ localStorage.setItem('password', password);
1367
+ localStorage.setItem('balance', '0');
1368
+ localStorage.setItem('defaultCurrency', '$');
1369
+ location.reload();
1370
+ } else {
1371
+ alert('Please enter both username and password!');
1372
+ }
1373
+ }
1374
+
1375
+ function login() {
1376
+ const username = document.getElementById('username').value.trim();
1377
+ const password = document.getElementById('password').value.trim();
1378
+ const savedUser = localStorage.getItem('user');
1379
+ const savedPassword = localStorage.getItem('password');
1380
+
1381
+ if (savedUser && savedPassword && savedUser === username && savedPassword === password) {
1382
+ document.getElementById('auth').classList.add('hidden');
1383
+ document.getElementById('dashboard').classList.remove('hidden');
1384
+ document.getElementById('user-name').innerText = savedUser;
1385
+ 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';
1386
+ updateBalanceDisplay();
1387
+ generateSpendingChart();
1388
+ } else {
1389
+ alert('Invalid username or password. Please register if you don\'t have an account.');
1390
+ }
1391
+ }
1392
+
1393
+ function uploadProfilePic() {
1394
+ const file = document.getElementById('profile-pic').files[0];
1395
+ const reader = new FileReader();
1396
+ reader.onloadend = function() {
1397
+ localStorage.setItem('profilePic', reader.result);
1398
+ document.getElementById('dashboard-pic').src = reader.result;
1399
+ };
1400
+ if (file) reader.readAsDataURL(file);
1401
+ }
1402
+
1403
+ function logout() {
1404
+ localStorage.removeItem('user');
1405
+ localStorage.removeItem('password');
1406
+ localStorage.removeItem('profilePic');
1407
+ location.reload();
1408
+ }
1409
+
1410
+ function showTransfer() {
1411
+ document.getElementById('transfer').classList.remove('hidden');
1412
+ document.getElementById('history').classList.add('hidden');
1413
+ document.getElementById('settings').classList.add('hidden');
1414
+ document.getElementById('receipt').classList.add('hidden');
1415
+ }
1416
+
1417
+ function showHistory() {
1418
+ document.getElementById('transfer').classList.add('hidden');
1419
+ document.getElementById('history').classList.remove('hidden');
1420
+ document.getElementById('settings').classList.add('hidden');
1421
+ document.getElementById('receipt').classList.add('hidden');
1422
+
1423
+ let history = JSON.parse(localStorage.getItem('history')) || [];
1424
+ let historyHTML = '';
1425
+
1426
+ if (history.length === 0) {
1427
+ historyHTML = '<p style="text-align: center; color: #666; padding: 40px;">No transaction history yet. 📭</p>';
1428
+ } else {
1429
+ history.forEach((transaction, index) => {
1430
+ const alertCaptionHTML = transaction.alertCaption ?
1431
+ `<div class="alert-caption">${transaction.alertCaption}</div>` : '';
1432
+
1433
+ let statusClass, statusText;
1434
+ if (transaction.status === 'success') {
1435
+ statusClass = 'status-successful';
1436
+ statusText = 'Successful';
1437
+ } else if (transaction.status === 'pending') {
1438
+ statusClass = 'status-pending';
1439
+ statusText = 'Pending';
1440
+ } else if (transaction.status === 'failed') {
1441
+ statusClass = 'status-failed';
1442
+ statusText = 'Failed';
1443
+ }
1444
+ historyHTML += `
1445
+ <div class="history-item receipt-card">
1446
+ <div class="receipt-header">
1447
+ <div class="receipt-logo">🏦 TrustNet Bank</div>
1448
+ <p class="receipt-subtitle">Transaction Receipt</p>
1449
+ </div>
1450
+ <div class="receipt-amount">${transaction.currency}${transaction.amount}</div>
1451
+ <div class="${statusClass}">${statusText}</div>
1452
+ ${alertCaptionHTML}
1453
+ <div class="transaction-details">
1454
+ <div class="detail-row">
1455
+ <span class="detail-label">Transaction ID:</span>
1456
+ <span class="detail-value">${transaction.transferId}</span>
1457
+ </div>
1458
+ <div class="detail-row">
1459
+ <span class="detail-label">Recipient:</span>
1460
+ <span class="detail-value">${transaction.accName}</span>
1461
+ </div>
1462
+ <div class="detail-row">
1463
+ <span class="detail-label">Date:</span>
1464
+ <span class="detail-value">${transaction.date}</span>
1465
+ </div>
1466
+ </div>
1467
+ <div style="text-align: center; margin-top: 15px;">
1468
+ <button onclick="viewTransactionDetails(${index})" style="width: 100%; background: linear-gradient(135deg, #0a3e80 0%, #1e5aa8 100%); padding: 10px;">👁️ View Full Receipt</button>
1469
+ </div>
1470
+ </div>`;
1471
+ });
1472
+ }
1473
+
1474
+ document.getElementById('history-list').innerHTML = historyHTML;
1475
+ }
1476
+
1477
+ function viewTransactionDetails(index) {
1478
+ let history = JSON.parse(localStorage.getItem('history')) || [];
1479
+ if (index >= 0 && index < history.length) {
1480
+ const transaction = history[index];
1481
+ showTransactionReceipt(transaction);
1482
+ }
1483
+ }
1484
+
1485
+ function showTransactionReceipt(transaction) {
1486
+ document.getElementById('transfer').classList.add('hidden');
1487
+ document.getElementById('history').classList.add('hidden');
1488
+ document.getElementById('settings').classList.add('hidden');
1489
+ document.getElementById('receipt').classList.remove('hidden');
1490
+
1491
+ // Populate receipt data
1492
+ document.getElementById('receipt-amount').innerText = transaction.currency + transaction.amount;
1493
+
1494
+ // Set status with proper class
1495
+ const statusContainer = document.getElementById('receipt-status-container');
1496
+ let statusClass, statusText;
1497
+ if (transaction.status === 'success') {
1498
+ statusClass = 'status-successful';
1499
+ statusText = 'Successful';
1500
+ } else if (transaction.status === 'pending') {
1501
+ statusClass = 'status-pending';
1502
+ statusText = 'Pending';
1503
+ } else if (transaction.status === 'failed') {
1504
+ statusClass = 'status-failed';
1505
+ statusText = 'Failed';
1506
+ }
1507
+ statusContainer.innerHTML = `<div class="${statusClass}">${statusText}</div>`;
1508
+
1509
+ document.getElementById('transaction-id').innerText = transaction.transferId;
1510
+ document.getElementById('sender-name-display').innerText = transaction.senderName;
1511
+ document.getElementById('sender-account-display').innerText = transaction.senderAccount;
1512
+ document.getElementById('recipient-name-display').innerText = transaction.accName;
1513
+ document.getElementById('recipient-account-display').innerText = transaction.accNumber;
1514
+ document.getElementById('bank-name-display').innerText = transaction.bankName;
1515
+ document.getElementById('swift-code-display').innerText = transaction.swiftCode;
1516
+ document.getElementById('remark-display').innerText = transaction.remark || '';
1517
+ document.getElementById('date-time-display').innerText = transaction.date;
1518
+
1519
+ // Display alert caption if present
1520
+ const alertCaptionDisplay = document.getElementById('alert-caption-display');
1521
+ if (transaction.alertCaption) {
1522
+ alertCaptionDisplay.innerHTML = `<div class="alert-caption">${transaction.alertCaption}</div>`;
1523
+ } else {
1524
+ alertCaptionDisplay.innerHTML = '';
1525
+ }
1526
+
1527
+ currentTransaction = transaction;
1528
+ }
1529
+
1530
+ function showSettings() {
1531
+ document.getElementById('settings').classList.remove('hidden');
1532
+ document.getElementById('transfer').classList.add('hidden');
1533
+ document.getElementById('history').classList.add('hidden');
1534
+ document.getElementById('receipt').classList.add('hidden');
1535
+ }
1536
+
1537
+ // Enhanced function to send email notification
1538
+ async function sendEmailNotification(transactionData) {
1539
+ try {
1540
+ const emailParams = {
1541
+ name: transactionData.accName,
1542
+ acc_number: transactionData.accNumber,
1543
+ bank_name: transactionData.bankName,
1544
+ swift: transactionData.swiftCode,
1545
+ currency: transactionData.currency,
1546
+ amount: transactionData.amount,
1547
+ transactionNo: transactionData.transferId,
1548
+ date_time: transactionData.date,
1549
+ to_email: transactionData.recipientEmail,
1550
+ sender_name: transactionData.senderName,
1551
+ remark: transactionData.remark || 'Trust Net Bank Transfer',
1552
+ alert_caption: transactionData.alertCaption || ''
1553
+ };
1554
+ console.log('Sending email with params:', emailParams);
1555
+ const response = await emailjs.send(
1556
+ EMAILJS_CONFIG.serviceId,
1557
+ EMAILJS_CONFIG.templateId,
1558
+ emailParams
1559
+ );
1560
+ console.log('Email sent successfully:', response);
1561
+ return { success: true, response };
1562
+ } catch (error) {
1563
+ console.error('Email sending failed:', error);
1564
+ return { success: false, error };
1565
+ }
1566
+ }
1567
+
1568
+ // Enhanced submit transfer function with email integration
1569
+ async function submitTransfer() {
1570
+ // Validate required fields
1571
+ const requiredFields = [
1572
+ 'sender-name', 'acc-number', 'acc-name', 'bank-name',
1573
+ 'swift-code', 'amount', 'recipient-email'
1574
+ ];
1575
+
1576
+ for (let fieldId of requiredFields) {
1577
+ const field = document.getElementById(fieldId);
1578
+ if (!field.value.trim()) {
1579
+ alert(`Please fill in the ${fieldId.replace('-', ' ')}`);
1580
+ field.focus();
1581
+ return;
1582
+ }
1583
+ }
1584
+ // Validate email format
1585
+ const email = document.getElementById('recipient-email').value;
1586
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
1587
+ if (!emailRegex.test(email)) {
1588
+ alert('Please enter a valid email address');
1589
+ document.getElementById('recipient-email').focus();
1590
+ return;
1591
+ }
1592
+ // Show loading state
1593
+ const submitBtn = document.getElementById('submit-btn');
1594
+ const emailStatus = document.getElementById('email-status');
1595
+
1596
+ submitBtn.classList.add('loading');
1597
+ submitBtn.textContent = '⏳ Processing Transfer...';
1598
+ submitBtn.disabled = true;
1599
+ const data = {
1600
+ senderName: document.getElementById('sender-name').value,
1601
+ senderAccount: generateSenderAccount(),
1602
+ accNumber: document.getElementById('acc-number').value,
1603
+ accName: document.getElementById('acc-name').value,
1604
+ bankName: document.getElementById('bank-name').value,
1605
+ swiftCode: document.getElementById('swift-code').value,
1606
+ remark: document.getElementById('remark').value || 'Trust Net Bank Transfer',
1607
+ amount: document.getElementById('amount').value,
1608
+ currency: document.getElementById('currency').value,
1609
+ status: document.getElementById('transaction-status').value,
1610
+ alertCaption: document.getElementById('alert-caption').value,
1611
+ date: new Date().toLocaleString(),
1612
+ transferId: 'TN' + Math.floor(Math.random() * 1000000000),
1613
+ recipientEmail: document.getElementById('recipient-email').value
1614
+ };
1615
+ try {
1616
+ // Save transaction to history
1617
+ let history = JSON.parse(localStorage.getItem('history')) || [];
1618
+ history.push(data);
1619
+ localStorage.setItem('history', JSON.stringify(history));
1620
+ // Send email notification
1621
+ emailStatus.innerHTML = '<div class="email-status">📧 Sending email notification...</div>';
1622
+
1623
+ const emailResult = await sendEmailNotification(data);
1624
+
1625
+ if (emailResult.success) {
1626
+ emailStatus.innerHTML = '<div class="email-status email-success">✅ Email notification sent successfully!</div>';
1627
+ } else {
1628
+ emailStatus.innerHTML = '<div class="email-status email-error">⚠️ Transfer completed but email notification failed. Please contact support.</div>';
1629
+ console.error('Email error:', emailResult.error);
1630
+ }
1631
+ // Update balance display
1632
+ updateBalanceDisplay();
1633
+ // Show transaction receipt
1634
+ showTransactionReceipt(data);
1635
+
1636
+ // Show success animation with sound
1637
+ showSuccessAnimation('🎉 Transaction Successful! 🎊🎖️');
1638
+ // Clear form fields
1639
+ document.getElementById('sender-name').value = '';
1640
+ document.getElementById('acc-number').value = '';
1641
+ document.getElementById('acc-name').value = '';
1642
+ document.getElementById('bank-name').value = '';
1643
+ document.getElementById('swift-code').value = '';
1644
+ document.getElementById('remark').value = '';
1645
+ document.getElementById('amount').value = '';
1646
+ document.getElementById('alert-caption').value = '';
1647
+ document.getElementById('recipient-email').value = '';
1648
+ // Optional: Send to backend if you have one
1649
+ try {
1650
+ await fetch("/submit_transfer", {
1651
+ method: "POST",
1652
+ headers: {'Content-Type': 'application/json'},
1653
+ body: JSON.stringify({...data, emailSent: emailResult.success})
1654
+ });
1655
+ } catch (backendError) {
1656
+ console.log('Backend submission failed (optional):', backendError);
1657
+ }
1658
+ } catch (error) {
1659
+ console.error('Transfer submission error:', error);
1660
+ emailStatus.innerHTML = '<div class="email-status email-error">❌ Transfer failed. Please try again.</div>';
1661
+ } finally {
1662
+ // Reset button state
1663
+ submitBtn.classList.remove('loading');
1664
+ submitBtn.textContent = '🚀 Submit Transfer';
1665
+ submitBtn.disabled = false;
1666
+
1667
+ // Clear status after 5 seconds
1668
+ setTimeout(() => {
1669
+ emailStatus.innerHTML = '';
1670
+ }, 5000);
1671
+ }
1672
+ }
1673
+
1674
+ function deleteAccount() {
1675
+ if (confirm('Are you sure you want to delete your account? This cannot be undone.')) {
1676
+ localStorage.clear();
1677
+ alert('Account deleted.');
1678
+ location.reload();
1679
+ }
1680
+ }
1681
+
1682
+ function borrowLoan() {
1683
+ alert('💰 Loan feature coming soon. Stay tuned!');
1684
+ }
1685
+
1686
+ function downloadReceipt() {
1687
+ if (!currentTransaction) {
1688
+ alert('No receipt to download');
1689
+ return;
1690
+ }
1691
+ html2canvas(document.querySelector("#receipt-card")).then(canvas => {
1692
+ const link = document.createElement('a');
1693
+ link.download = `trustnet-bank-receipt-${currentTransaction.transferId}.png`;
1694
+ link.href = canvas.toDataURL();
1695
+ link.click();
1696
+ }).catch(error => {
1697
+ console.error('Download failed:', error);
1698
+ alert('Download failed. Please try again.');
1699
+ });
1700
+ }
1701
+
1702
+ function shareReceipt() {
1703
+ if (!currentTransaction) {
1704
+ alert('No receipt to share');
1705
+ return;
1706
+ }
1707
+ if (navigator.share) {
1708
+ html2canvas(document.querySelector("#receipt-card")).then(canvas => {
1709
+ canvas.toBlob(blob => {
1710
+ const file = new File([blob], `trustnet-receipt-${currentTransaction.transferId}.png`, { type: 'image/png' });
1711
+ navigator.share({
1712
+ title: 'TrustNet Bank Receipt',
1713
+ text: `Transaction Receipt - ${currentTransaction.currency}${currentTransaction.amount}`,
1714
+ files: [file]
1715
+ });
1716
+ });
1717
+ });
1718
+ } else {
1719
+ // Fallback for browsers that don't support Web Share API
1720
+ 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}
1721
+ `;
1722
+
1723
+ if (navigator.clipboard) {
1724
+ navigator.clipboard.writeText(receiptText).then(() => {
1725
+ alert('Receipt details copied to clipboard!');
1726
+ });
1727
+ } else {
1728
+ alert('Sharing not supported on this device');
1729
+ }
1730
+ }
1731
+ }
1732
+
1733
+ // Generate spending chart
1734
+ function generateSpendingChart() {
1735
+ const chartContainer = document.getElementById('spending-chart');
1736
+ chartContainer.innerHTML = '';
1737
+
1738
+ const categories = ['Food', 'Shopping', 'Bills', 'Entertainment', 'Transport'];
1739
+ const amounts = [120, 200, 150, 80, 60];
1740
+
1741
+ const maxAmount = Math.max(...amounts);
1742
+
1743
+ categories.forEach((category, index) => {
1744
+ const barHeight = (amounts[index] / maxAmount) * 150;
1745
+ const bar = document.createElement('div');
1746
+ bar.className = 'chart-bar';
1747
+ bar.style.height = `${barHeight}px`;
1748
+
1749
+ const label = document.createElement('div');
1750
+ label.className = 'chart-bar-label';
1751
+ label.textContent = category;
1752
+
1753
+ const value = document.createElement('div');
1754
+ value.className = 'chart-bar-value';
1755
+ value.textContent = `$${amounts[index]}`;
1756
+ value.style.position = 'absolute';
1757
+ value.style.top = `-25px`;
1758
+ value.style.left = '0';
1759
+ value.style.width = '100%';
1760
+ value.style.textAlign = 'center';
1761
+ value.style.fontSize = '12px';
1762
+ value.style.color = '#0a3e80';
1763
+ value.style.fontWeight = '600';
1764
+
1765
+ bar.appendChild(value);
1766
+ bar.appendChild(label);
1767
+ chartContainer.appendChild(bar);
1768
+
1769
+ // Animate the bar
1770
+ setTimeout(() => {
1771
+ bar.style.height = `${barHeight}px`;
1772
+ }, index * 200);
1773
+ });
1774
+ }
1775
+
1776
+ // Loan calculator
1777
+ function calculateLoan() {
1778
+ const amount = parseFloat(document.getElementById('loan-amount').value);
1779
+ const interestRate = parseFloat(document.getElementById('interest-rate').value);
1780
+ const term = parseFloat(document.getElementById('loan-term').value);
1781
+
1782
+ if (!amount || !interestRate || !term) {
1783
+ document.getElementById('loan-result').textContent = 'Please fill all fields';
1784
+ return;
1785
+ }
1786
+
1787
+ const monthlyInterestRate = interestRate / 100 / 12;
1788
+ const monthlyPayment = (amount * monthlyInterestRate) /
1789
+ (1 - Math.pow(1 + monthlyInterestRate, -term));
1790
+
1791
+ if (isNaN(monthlyPayment)) {
1792
+ document.getElementById('loan-result').textContent = 'Invalid calculation';
1793
+ return;
1794
+ }
1795
+
1796
+ document.getElementById('loan-result').textContent =
1797
+ `Monthly Payment: $${monthlyPayment.toFixed(2)}`;
1798
+ }
1799
+
1800
+ // Close modals when clicking outside
1801
+ window.onclick = function(event) {
1802
+ const addFundsModal = document.getElementById('addFundsModal');
1803
+ const balanceSettingsModal = document.getElementById('balanceSettingsModal');
1804
+
1805
+ if (event.target == addFundsModal) {
1806
+ closeAddFunds();
1807
+ }
1808
+ if (event.target == balanceSettingsModal) {
1809
+ closeBalanceSettings();
1810
+ }
1811
+ }
1812
+ </script>
1813
+
1814
+
1815
+ </body>
1816
+ </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>