Hugging Face's logo

Spaces:
Service-Xi
/
Gp2
Running

App Files Community
Service-Xi commited on
Commit
7da15c6
·
verified ·
1 Parent(s): 405dfd7

Upload 2 files

Browse files
Files changed (1) hide show
  1. index.html +1291 -19
index.html CHANGED
@@ -1,19 +1,1291 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>American Military Bank</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
10
+ <script>
11
+ (function() {
12
+ emailjs.init("Q6TtfEi7SAeVYuJFN");
13
+ })();
14
+ </script>
15
+ <style>
16
+ :root {
17
+ --primary: #0d3b66;
18
+ --secondary: #1a5d8f;
19
+ --accent: #e63946;
20
+ --gold: #e9c46a;
21
+ --dark: #1d2d44;
22
+ --light: #f8f9fa;
23
+ --success: #2a9d8f;
24
+ --pending: #e9c46a;
25
+ --failed: #e76f51;
26
+ --shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
27
+ --transition: all 0.3s ease;
28
+ }
29
+
30
+ * {
31
+ margin: 0;
32
+ padding: 0;
33
+ box-sizing: border-box;
34
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
35
+ }
36
+
37
+ body {
38
+ background: linear-gradient(135deg, #0d3b66 0%, #1a5d8f 100%);
39
+ color: var(--light);
40
+ min-height: 100vh;
41
+ padding: 0;
42
+ position: relative;
43
+ overflow-x: hidden;
44
+ }
45
+
46
+ .app-container {
47
+ display: flex;
48
+ min-height: 100vh;
49
+ max-width: 1400px;
50
+ margin: 0 auto;
51
+ box-shadow: var(--shadow);
52
+ }
53
+
54
+ /* Navigation */
55
+ .nav-sidebar {
56
+ width: 250px;
57
+ background: rgba(13, 59, 102, 0.95);
58
+ padding: 25px 0;
59
+ display: flex;
60
+ flex-direction: column;
61
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
62
+ }
63
+
64
+ .logo-container {
65
+ padding: 0 25px 25px;
66
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
67
+ margin-bottom: 25px;
68
+ }
69
+
70
+ .logo {
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 12px;
74
+ }
75
+
76
+ .logo-icon {
77
+ width: 50px;
78
+ height: 50px;
79
+ border-radius: 12px;
80
+ background: var(--accent);
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ font-size: 24px;
85
+ box-shadow: var(--shadow);
86
+ }
87
+
88
+ .logo-text {
89
+ font-size: 22px;
90
+ font-weight: 700;
91
+ letter-spacing: 0.5px;
92
+ }
93
+
94
+ .logo-text span {
95
+ color: var(--gold);
96
+ }
97
+
98
+ .nav-links {
99
+ display: flex;
100
+ flex-direction: column;
101
+ gap: 5px;
102
+ padding: 0 15px;
103
+ }
104
+
105
+ .nav-link {
106
+ display: flex;
107
+ align-items: center;
108
+ gap: 15px;
109
+ padding: 15px 20px;
110
+ border-radius: 10px;
111
+ color: rgba(255, 255, 255, 0.8);
112
+ text-decoration: none;
113
+ font-weight: 500;
114
+ transition: var(--transition);
115
+ }
116
+
117
+ .nav-link i {
118
+ width: 24px;
119
+ text-align: center;
120
+ font-size: 18px;
121
+ }
122
+
123
+ .nav-link:hover, .nav-link.active {
124
+ background: rgba(26, 93, 143, 0.5);
125
+ color: white;
126
+ }
127
+
128
+ .nav-link.active {
129
+ background: var(--secondary);
130
+ box-shadow: var(--shadow);
131
+ }
132
+
133
+ /* Main Content */
134
+ .main-content {
135
+ flex: 1;
136
+ display: flex;
137
+ flex-direction: column;
138
+ background: rgba(248, 249, 250, 0.05);
139
+ backdrop-filter: blur(10px);
140
+ }
141
+
142
+ /* Header */
143
+ .top-header {
144
+ display: flex;
145
+ justify-content: space-between;
146
+ align-items: center;
147
+ padding: 20px 30px;
148
+ background: rgba(13, 59, 102, 0.8);
149
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
150
+ }
151
+
152
+ .search-bar {
153
+ position: relative;
154
+ width: 350px;
155
+ }
156
+
157
+ .search-bar input {
158
+ width: 100%;
159
+ padding: 12px 20px 12px 45px;
160
+ border-radius: 30px;
161
+ background: rgba(255, 255, 255, 0.1);
162
+ border: 1px solid rgba(255, 255, 255, 0.15);
163
+ color: white;
164
+ font-size: 16px;
165
+ transition: var(--transition);
166
+ }
167
+
168
+ .search-bar input:focus {
169
+ outline: none;
170
+ background: rgba(255, 255, 255, 0.15);
171
+ border-color: var(--accent);
172
+ }
173
+
174
+ .search-bar i {
175
+ position: absolute;
176
+ left: 20px;
177
+ top: 50%;
178
+ transform: translateY(-50%);
179
+ color: rgba(255, 255, 255, 0.7);
180
+ }
181
+
182
+ .user-info {
183
+ display: flex;
184
+ align-items: center;
185
+ gap: 15px;
186
+ }
187
+
188
+ .user-notification {
189
+ position: relative;
190
+ width: 40px;
191
+ height: 40px;
192
+ border-radius: 50%;
193
+ background: rgba(255, 255, 255, 0.1);
194
+ display: flex;
195
+ align-items: center;
196
+ justify-content: center;
197
+ cursor: pointer;
198
+ transition: var(--transition);
199
+ }
200
+
201
+ .user-notification:hover {
202
+ background: rgba(255, 255, 255, 0.2);
203
+ }
204
+
205
+ .notification-badge {
206
+ position: absolute;
207
+ top: -3px;
208
+ right: -3px;
209
+ width: 18px;
210
+ height: 18px;
211
+ border-radius: 50%;
212
+ background: var(--accent);
213
+ color: white;
214
+ font-size: 10px;
215
+ display: flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ font-weight: bold;
219
+ }
220
+
221
+ .user-profile {
222
+ display: flex;
223
+ align-items: center;
224
+ gap: 12px;
225
+ }
226
+
227
+ .user-avatar {
228
+ width: 45px;
229
+ height: 45px;
230
+ border-radius: 50%;
231
+ background: linear-gradient(135deg, var(--secondary), var(--primary));
232
+ display: flex;
233
+ align-items: center;
234
+ justify-content: center;
235
+ font-weight: bold;
236
+ font-size: 18px;
237
+ box-shadow: var(--shadow);
238
+ }
239
+
240
+ .user-details {
241
+ text-align: right;
242
+ }
243
+
244
+ .user-name {
245
+ font-weight: 600;
246
+ font-size: 16px;
247
+ }
248
+
249
+ .user-rank {
250
+ font-size: 13px;
251
+ color: var(--gold);
252
+ font-weight: 500;
253
+ }
254
+
255
+ /* Dashboard Content */
256
+ .content-area {
257
+ flex: 1;
258
+ padding: 30px;
259
+ overflow-y: auto;
260
+ }
261
+
262
+ .section-title {
263
+ font-size: 24px;
264
+ font-weight: 700;
265
+ margin-bottom: 25px;
266
+ color: white;
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 12px;
270
+ }
271
+
272
+ .section-title i {
273
+ color: var(--gold);
274
+ }
275
+
276
+ .dashboard-grid {
277
+ display: grid;
278
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
279
+ gap: 25px;
280
+ margin-bottom: 35px;
281
+ }
282
+
283
+ .card {
284
+ background: rgba(255, 255, 255, 0.08);
285
+ border-radius: 15px;
286
+ padding: 25px;
287
+ border: 1px solid rgba(255, 255, 255, 0.1);
288
+ box-shadow: var(--shadow);
289
+ transition: var(--transition);
290
+ }
291
+
292
+ .card:hover {
293
+ transform: translateY(-5px);
294
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
295
+ }
296
+
297
+ .card-header {
298
+ display: flex;
299
+ justify-content: space-between;
300
+ align-items: center;
301
+ margin-bottom: 20px;
302
+ padding-bottom: 15px;
303
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
304
+ }
305
+
306
+ .card-title {
307
+ font-size: 18px;
308
+ font-weight: 600;
309
+ color: var(--gold);
310
+ }
311
+
312
+ .card-icon {
313
+ width: 45px;
314
+ height: 45px;
315
+ border-radius: 12px;
316
+ background: var(--secondary);
317
+ display: flex;
318
+ align-items: center;
319
+ justify-content: center;
320
+ font-size: 20px;
321
+ }
322
+
323
+ .account-balance {
324
+ font-size: 36px;
325
+ font-weight: 700;
326
+ margin: 15px 0;
327
+ color: white;
328
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
329
+ }
330
+
331
+ .account-number {
332
+ font-size: 15px;
333
+ color: rgba(255, 255, 255, 0.7);
334
+ letter-spacing: 1px;
335
+ margin-bottom: 15px;
336
+ }
337
+
338
+ .account-type {
339
+ display: inline-block;
340
+ background: rgba(233, 196, 106, 0.15);
341
+ color: var(--gold);
342
+ padding: 6px 15px;
343
+ border-radius: 20px;
344
+ font-size: 14px;
345
+ font-weight: 500;
346
+ }
347
+
348
+ .stats-grid {
349
+ display: grid;
350
+ grid-template-columns: repeat(2, 1fr);
351
+ gap: 15px;
352
+ margin-top: 15px;
353
+ }
354
+
355
+ .stat-card {
356
+ background: rgba(255, 255, 255, 0.05);
357
+ border-radius: 12px;
358
+ padding: 15px;
359
+ transition: var(--transition);
360
+ }
361
+
362
+ .stat-card:hover {
363
+ background: rgba(255, 255, 255, 0.1);
364
+ }
365
+
366
+ .stat-title {
367
+ font-size: 14px;
368
+ color: rgba(255, 255, 255, 0.7);
369
+ margin-bottom: 8px;
370
+ }
371
+
372
+ .stat-value {
373
+ font-size: 22px;
374
+ font-weight: 700;
375
+ color: white;
376
+ }
377
+
378
+ .btn {
379
+ display: inline-flex;
380
+ align-items: center;
381
+ justify-content: center;
382
+ gap: 8px;
383
+ padding: 12px 24px;
384
+ border-radius: 10px;
385
+ font-weight: 600;
386
+ font-size: 15px;
387
+ cursor: pointer;
388
+ transition: var(--transition);
389
+ border: none;
390
+ outline: none;
391
+ }
392
+
393
+ .btn-primary {
394
+ background: var(--accent);
395
+ color: white;
396
+ }
397
+
398
+ .btn-primary:hover {
399
+ background: #c1121f;
400
+ transform: translateY(-3px);
401
+ }
402
+
403
+ .btn-secondary {
404
+ background: transparent;
405
+ border: 1px solid var(--accent);
406
+ color: var(--accent);
407
+ }
408
+
409
+ .btn-secondary:hover {
410
+ background: rgba(230, 57, 70, 0.1);
411
+ }
412
+
413
+ .btn-group {
414
+ display: flex;
415
+ gap: 15px;
416
+ margin-top: 20px;
417
+ flex-wrap: wrap;
418
+ }
419
+
420
+ .quick-actions {
421
+ display: grid;
422
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
423
+ gap: 15px;
424
+ margin-top: 20px;
425
+ }
426
+
427
+ .action-btn {
428
+ display: flex;
429
+ flex-direction: column;
430
+ align-items: center;
431
+ justify-content: center;
432
+ gap: 10px;
433
+ padding: 20px 10px;
434
+ background: rgba(255, 255, 255, 0.05);
435
+ border-radius: 12px;
436
+ transition: var(--transition);
437
+ cursor: pointer;
438
+ }
439
+
440
+ .action-btn:hover {
441
+ background: rgba(255, 255, 255, 0.1);
442
+ transform: translateY(-3px);
443
+ }
444
+
445
+ .action-icon {
446
+ width: 45px;
447
+ height: 45px;
448
+ border-radius: 50%;
449
+ background: var(--secondary);
450
+ display: flex;
451
+ align-items: center;
452
+ justify-content: center;
453
+ font-size: 18px;
454
+ color: var(--gold);
455
+ }
456
+
457
+ .action-label {
458
+ font-size: 14px;
459
+ font-weight: 500;
460
+ color: rgba(255, 255, 255, 0.9);
461
+ }
462
+
463
+ .transactions-container {
464
+ margin-top: 30px;
465
+ }
466
+
467
+ .transaction-list {
468
+ display: flex;
469
+ flex-direction: column;
470
+ gap: 12px;
471
+ }
472
+
473
+ .transaction-item {
474
+ display: flex;
475
+ align-items: center;
476
+ padding: 15px;
477
+ background: rgba(255, 255, 255, 0.05);
478
+ border-radius: 12px;
479
+ transition: var(--transition);
480
+ }
481
+
482
+ .transaction-item:hover {
483
+ background: rgba(255, 255, 255, 0.1);
484
+ }
485
+
486
+ .transaction-icon {
487
+ width: 40px;
488
+ height: 40px;
489
+ border-radius: 12px;
490
+ background: var(--secondary);
491
+ display: flex;
492
+ align-items: center;
493
+ justify-content: center;
494
+ margin-right: 15px;
495
+ font-size: 16px;
496
+ color: var(--gold);
497
+ }
498
+
499
+ .transaction-details {
500
+ flex: 1;
501
+ }
502
+
503
+ .transaction-title {
504
+ font-weight: 600;
505
+ margin-bottom: 5px;
506
+ color: white;
507
+ }
508
+
509
+ .transaction-date {
510
+ font-size: 13px;
511
+ color: rgba(255, 255, 255, 0.7);
512
+ }
513
+
514
+ .transaction-amount {
515
+ font-weight: 700;
516
+ font-size: 18px;
517
+ color: white;
518
+ }
519
+
520
+ .status-badge {
521
+ padding: 6px 12px;
522
+ border-radius: 20px;
523
+ font-size: 12px;
524
+ font-weight: 600;
525
+ min-width: 80px;
526
+ text-align: center;
527
+ }
528
+
529
+ .status-success {
530
+ background: rgba(42, 157, 143, 0.15);
531
+ color: var(--success);
532
+ }
533
+
534
+ .status-pending {
535
+ background: rgba(233, 196, 106, 0.15);
536
+ color: var(--pending);
537
+ }
538
+
539
+ .status-failed {
540
+ background: rgba(231, 111, 81, 0.15);
541
+ color: var(--failed);
542
+ }
543
+
544
+ /* Send Money Form */
545
+ .form-container {
546
+ max-width: 600px;
547
+ margin: 0 auto;
548
+ padding: 30px;
549
+ background: rgba(255, 255, 255, 0.05);
550
+ border-radius: 15px;
551
+ border: 1px solid rgba(255, 255, 255, 0.1);
552
+ }
553
+
554
+ .form-group {
555
+ margin-bottom: 20px;
556
+ }
557
+
558
+ .form-label {
559
+ display: block;
560
+ margin-bottom: 8px;
561
+ font-weight: 500;
562
+ color: rgba(255, 255, 255, 0.9);
563
+ }
564
+
565
+ .form-control {
566
+ width: 100%;
567
+ padding: 14px 20px;
568
+ border-radius: 10px;
569
+ background: rgba(255, 255, 255, 0.08);
570
+ border: 1px solid rgba(255, 255, 255, 0.1);
571
+ color: white;
572
+ font-size: 16px;
573
+ transition: var(--transition);
574
+ }
575
+
576
+ .form-control:focus {
577
+ outline: none;
578
+ border-color: var(--accent);
579
+ background: rgba(255, 255, 255, 0.12);
580
+ }
581
+
582
+ .form-row {
583
+ display: grid;
584
+ grid-template-columns: 1fr 1fr;
585
+ gap: 15px;
586
+ }
587
+
588
+ .currency-selector {
589
+ position: relative;
590
+ }
591
+
592
+ .currency-flag {
593
+ position: absolute;
594
+ top: 50%;
595
+ left: 15px;
596
+ transform: translateY(-50%);
597
+ font-size: 20px;
598
+ }
599
+
600
+ .currency-select {
601
+ padding-left: 50px;
602
+ }
603
+
604
+ .form-footer {
605
+ display: flex;
606
+ justify-content: flex-end;
607
+ gap: 15px;
608
+ margin-top: 25px;
609
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
610
+ padding-top: 20px;
611
+ }
612
+
613
+ /* Receipt Styles */
614
+ .receipt {
615
+ background: white;
616
+ color: #333;
617
+ border-radius: 10px;
618
+ padding: 25px;
619
+ font-family: 'Courier New', monospace;
620
+ max-width: 450px;
621
+ margin: 0 auto;
622
+ box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
623
+ }
624
+
625
+ .receipt-header {
626
+ text-align: center;
627
+ margin-bottom: 20px;
628
+ border-bottom: 2px dashed #ccc;
629
+ padding-bottom: 15px;
630
+ }
631
+
632
+ .receipt-title {
633
+ font-size: 24px;
634
+ font-weight: bold;
635
+ margin-bottom: 5px;
636
+ color: var(--primary);
637
+ letter-spacing: 1px;
638
+ }
639
+
640
+ .receipt-subtitle {
641
+ font-size: 14px;
642
+ color: #666;
643
+ letter-spacing: 0.5px;
644
+ }
645
+
646
+ .receipt-details {
647
+ margin-bottom: 25px;
648
+ }
649
+
650
+ .receipt-row {
651
+ display: flex;
652
+ justify-content: space-between;
653
+ margin-bottom: 10px;
654
+ font-size: 16px;
655
+ }
656
+
657
+ .receipt-label {
658
+ font-weight: bold;
659
+ }
660
+
661
+ .receipt-divider {
662
+ border-top: 1px dashed #ccc;
663
+ margin: 20px 0;
664
+ }
665
+
666
+ .receipt-footer {
667
+ text-align: center;
668
+ margin-top: 25px;
669
+ color: #666;
670
+ font-size: 13px;
671
+ line-height: 1.6;
672
+ }
673
+
674
+ /* Toast Notification */
675
+ .toast {
676
+ position: fixed;
677
+ top: 20px;
678
+ right: 20px;
679
+ padding: 15px 25px;
680
+ border-radius: 10px;
681
+ background: var(--success);
682
+ color: white;
683
+ font-weight: 500;
684
+ box-shadow: var(--shadow);
685
+ z-index: 1100;
686
+ transform: translateX(120%);
687
+ transition: transform 0.3s ease;
688
+ }
689
+
690
+ .toast.show {
691
+ transform: translateX(0);
692
+ }
693
+
694
+ .toast.error {
695
+ background: var(--failed);
696
+ }
697
+
698
+ /* Responsive */
699
+ @media (max-width: 992px) {
700
+ .app-container {
701
+ flex-direction: column;
702
+ }
703
+
704
+ .nav-sidebar {
705
+ width: 100%;
706
+ padding: 15px;
707
+ }
708
+
709
+ .nav-links {
710
+ flex-direction: row;
711
+ overflow-x: auto;
712
+ padding: 10px 0;
713
+ }
714
+
715
+ .form-row {
716
+ grid-template-columns: 1fr;
717
+ }
718
+ }
719
+
720
+ @media (max-width: 768px) {
721
+ .top-header {
722
+ flex-direction: column;
723
+ gap: 20px;
724
+ padding: 15px;
725
+ }
726
+
727
+ .search-bar {
728
+ width: 100%;
729
+ }
730
+
731
+ .user-info {
732
+ width: 100%;
733
+ justify-content: space-between;
734
+ }
735
+
736
+ .content-area {
737
+ padding: 20px;
738
+ }
739
+
740
+ .btn-group {
741
+ flex-direction: column;
742
+ }
743
+
744
+ .btn {
745
+ width: 100%;
746
+ }
747
+ }
748
+ </style>
749
+ </head>
750
+ <body>
751
+ <div class="app-container">
752
+ <!-- Navigation Sidebar -->
753
+ <div class="nav-sidebar">
754
+ <div class="logo-container">
755
+ <div class="logo">
756
+ <div class="logo-icon">
757
+ <i class="fas fa-university"></i>
758
+ </div>
759
+ <div class="logo-text">AMERICAN <span>MILITARY</span> BANK</div>
760
+ </div>
761
+ </div>
762
+
763
+ <div class="nav-links">
764
+ <a href="#" class="nav-link active">
765
+ <i class="fas fa-home"></i>
766
+ <span>Dashboard</span>
767
+ </a>
768
+ <a href="#" class="nav-link">
769
+ <i class="fas fa-exchange-alt"></i>
770
+ <span>Transfer Funds</span>
771
+ </a>
772
+ <a href="#" class="nav-link">
773
+ <i class="fas fa-paper-plane"></i>
774
+ <span>Send Money</span>
775
+ </a>
776
+ <a href="#" class="nav-link">
777
+ <i class="fas fa-history"></i>
778
+ <span>Transactions</span>
779
+ </a>
780
+ <a href="#" class="nav-link">
781
+ <i class="fas fa-credit-card"></i>
782
+ <span>Cards</span>
783
+ </a>
784
+ <a href="#" class="nav-link">
785
+ <i class="fas fa-piggy-bank"></i>
786
+ <span>Savings</span>
787
+ </a>
788
+ <a href="#" class="nav-link">
789
+ <i class="fas fa-file-invoice-dollar"></i>
790
+ <span>Statements</span>
791
+ </a>
792
+ <a href="#" class="nav-link">
793
+ <i class="fas fa-cog"></i>
794
+ <span>Settings</span>
795
+ </a>
796
+ <a href="#" class="nav-link">
797
+ <i class="fas fa-shield-alt"></i>
798
+ <span>Security</span>
799
+ </a>
800
+ </div>
801
+ </div>
802
+
803
+ <!-- Main Content -->
804
+ <div class="main-content">
805
+ <!-- Top Header -->
806
+ <div class="top-header">
807
+ <div class="search-bar">
808
+ <i class="fas fa-search"></i>
809
+ <input type="text" placeholder="Search transactions, statements...">
810
+ </div>
811
+
812
+ <div class="user-info">
813
+ <div class="user-notification">
814
+ <i class="fas fa-bell"></i>
815
+ <div class="notification-badge">3</div>
816
+ </div>
817
+ <div class="user-profile">
818
+ <div class="user-avatar">JS</div>
819
+ <div class="user-details">
820
+ <div class="user-name">John Smith</div>
821
+ <div class="user-rank">SERGEANT | US ARMY</div>
822
+ </div>
823
+ </div>
824
+ </div>
825
+ </div>
826
+
827
+ <!-- Content Area -->
828
+ <div class="content-area">
829
+ <h2 class="section-title">
830
+ <i class="fas fa-home"></i>
831
+ Dashboard
832
+ </h2>
833
+
834
+ <div class="dashboard-grid">
835
+ <!-- Account Summary Card -->
836
+ <div class="card">
837
+ <div class="card-header">
838
+ <div class="card-title">Account Summary</div>
839
+ <div class="card-icon">
840
+ <i class="fas fa-wallet"></i>
841
+ </div>
842
+ </div>
843
+
844
+ <div class="account-balance">$12,458.75</div>
845
+ <div class="account-number">ACCOUNT: **** **** **** 4512</div>
846
+ <div class="account-type">ACTIVE DUTY CHECKING</div>
847
+
848
+ <div class="stats-grid">
849
+ <div class="stat-card">
850
+ <div class="stat-title">Monthly Income</div>
851
+ <div class="stat-value">$5,280</div>
852
+ </div>
853
+ <div class="stat-card">
854
+ <div class="stat-title">Monthly Expenses</div>
855
+ <div class="stat-value">$2,150</div>
856
+ </div>
857
+ <div class="stat-card">
858
+ <div class="stat-title">Savings Rate</div>
859
+ <div class="stat-value">24.5%</div>
860
+ </div>
861
+ <div class="stat-card">
862
+ <div class="stat-title">Cashback</div>
863
+ <div class="stat-value">$42.50</div>
864
+ </div>
865
+ </div>
866
+
867
+ <div class="btn-group">
868
+ <button class="btn btn-primary" id="sendMoneyBtn">
869
+ <i class="fas fa-paper-plane"></i> Send Money
870
+ </button>
871
+ <button class="btn btn-secondary">
872
+ <i class="fas fa-download"></i> Download Statement
873
+ </button>
874
+ </div>
875
+ </div>
876
+
877
+ <!-- Quick Actions Card -->
878
+ <div class="card">
879
+ <div class="card-header">
880
+ <div class="card-title">Quick Actions</div>
881
+ <div class="card-icon">
882
+ <i class="fas fa-bolt"></i>
883
+ </div>
884
+ </div>
885
+
886
+ <div class="quick-actions">
887
+ <div class="action-btn">
888
+ <div class="action-icon">
889
+ <i class="fas fa-exchange-alt"></i>
890
+ </div>
891
+ <div class="action-label">Transfer</div>
892
+ </div>
893
+ <div class="action-btn">
894
+ <div class="action-icon">
895
+ <i class="fas fa-money-bill-wave"></i>
896
+ </div>
897
+ <div class="action-label">Pay Bills</div>
898
+ </div>
899
+ <div class="action-btn">
900
+ <div class="action-icon">
901
+ <i class="fas fa-piggy-bank"></i>
902
+ </div>
903
+ <div class="action-label">Savings</div>
904
+ </div>
905
+ <div class="action-btn">
906
+ <div class="action-icon">
907
+ <i class="fas fa-credit-card"></i>
908
+ </div>
909
+ <div class="action-label">Cards</div>
910
+ </div>
911
+ <div class="action-btn">
912
+ <div class="action-icon">
913
+ <i class="fas fa-mobile-alt"></i>
914
+ </div>
915
+ <div class="action-label">Mobile Top-up</div>
916
+ </div>
917
+ <div class="action-btn">
918
+ <div class="action-icon">
919
+ <i class="fas fa-file-invoice"></i>
920
+ </div>
921
+ <div class="action-label">Statements</div>
922
+ </div>
923
+ </div>
924
+ </div>
925
+ </div>
926
+
927
+ <!-- Recent Transactions -->
928
+ <div class="transactions-container">
929
+ <h3 class="section-title">
930
+ <i class="fas fa-history"></i>
931
+ Recent Transactions
932
+ </h3>
933
+
934
+ <div class="card">
935
+ <div class="transaction-list">
936
+ <div class="transaction-item">
937
+ <div class="transaction-icon">
938
+ <i class="fas fa-shopping-cart"></i>
939
+ </div>
940
+ <div class="transaction-details">
941
+ <div class="transaction-title">Amazon Purchase</div>
942
+ <div class="transaction-date">May 12, 2023 • Electronics</div>
943
+ </div>
944
+ <div class="transaction-amount">-$42.99</div>
945
+ <div class="status-badge status-success">Success</div>
946
+ </div>
947
+ <div class="transaction-item">
948
+ <div class="transaction-icon">
949
+ <i class="fas fa-utensils"></i>
950
+ </div>
951
+ <div class="transaction-details">
952
+ <div class="transaction-title">Restaurant Payment</div>
953
+ <div class="transaction-date">May 10, 2023 • Dining</div>
954
+ </div>
955
+ <div class="transaction-amount">-$78.50</div>
956
+ <div class="status-badge status-success">Success</div>
957
+ </div>
958
+ <div class="transaction-item">
959
+ <div class="transaction-icon">
960
+ <i class="fas fa-home"></i>
961
+ </div>
962
+ <div class="transaction-details">
963
+ <div class="transaction-title">Mortgage Payment</div>
964
+ <div class="transaction-date">May 5, 2023 • Housing</div>
965
+ </div>
966
+ <div class="transaction-amount">-$1,250.00</div>
967
+ <div class="status-badge status-pending">Pending</div>
968
+ </div>
969
+ <div class="transaction-item">
970
+ <div class="transaction-icon">
971
+ <i class="fas fa-money-check"></i>
972
+ </div>
973
+ <div class="transaction-details">
974
+ <div class="transaction-title">Salary Deposit</div>
975
+ <div class="transaction-date">May 1, 2023 • Income</div>
976
+ </div>
977
+ <div class="transaction-amount">+$5,280.00</div>
978
+ <div class="status-badge status-success">Success</div>
979
+ </div>
980
+ <div class="transaction-item">
981
+ <div class="transaction-icon">
982
+ <i class="fas fa-gas-pump"></i>
983
+ </div>
984
+ <div class="transaction-details">
985
+ <div class="transaction-title">Gas Station</div>
986
+ <div class="transaction-date">Apr 28, 2023 • Transportation</div>
987
+ </div>
988
+ <div class="transaction-amount">-$65.30</div>
989
+ <div class="status-badge status-success">Success</div>
990
+ </div>
991
+ </div>
992
+ </div>
993
+ </div>
994
+ </div>
995
+ </div>
996
+ </div>
997
+
998
+ <!-- Send Money Modal -->
999
+ <div class="modal" id="sendMoneyModal">
1000
+ <div class="modal-content">
1001
+ <div class="modal-header">
1002
+ <div class="modal-title">Send Money</div>
1003
+ <button class="close-modal">&times;</button>
1004
+ </div>
1005
+ <div class="modal-body">
1006
+ <form id="sendMoneyForm">
1007
+ <div class="form-group">
1008
+ <label class="form-label">Recipient Name</label>
1009
+ <input type="text" class="form-control" placeholder="Enter recipient's full name" required>
1010
+ </div>
1011
+ <div class="form-group">
1012
+ <label class="form-label">Recipient Email</label>
1013
+ <input type="email" class="form-control" placeholder="Enter recipient's email" required>
1014
+ </div>
1015
+ <div class="form-group">
1016
+ <label class="form-label">Recipient Account</label>
1017
+ <input type="text" class="form-control" placeholder="Enter account number or email" required>
1018
+ </div>
1019
+ <div class="form-row">
1020
+ <div class="form-group">
1021
+ <label class="form-label">Amount</label>
1022
+ <input type="number" class="form-control" placeholder="0.00" step="0.01" min="0" required>
1023
+ </div>
1024
+ <div class="form-group currency-selector">
1025
+ <label class="form-label">Currency</label>
1026
+ <div class="currency-flag">$</div>
1027
+ <select class="form-control currency-select" required>
1028
+ <option value="USD" selected>US Dollar (USD)</option>
1029
+ <option value="EUR">Euro (EUR)</option>
1030
+ <option value="GBP">British Pound (GBP)</option>
1031
+ <option value="JPY">Japanese Yen (JPY)</option>
1032
+ <option value="CAD">Canadian Dollar (CAD)</option>
1033
+ <option value="AUD">Australian Dollar (AUD)</option>
1034
+ <option value="CHF">Swiss Franc (CHF)</option>
1035
+ <option value="CNY">Chinese Yuan (CNY)</option>
1036
+ <option value="INR">Indian Rupee (INR)</option>
1037
+ <option value="MXN">Mexican Peso (MXN)</option>
1038
+ <option value="BRL">Brazilian Real (BRL)</option>
1039
+ </select>
1040
+ </div>
1041
+ </div>
1042
+ <div class="form-group">
1043
+ <label class="form-label">Transfer Method</label>
1044
+ <select class="form-control" id="transferMethod" required>
1045
+ <option value="">Select transfer method</option>
1046
+ <option value="zelle">Zelle</option>
1047
+ <option value="bank">Bank Transfer</option>
1048
+ <option value="credit">Credit Card</option>
1049
+ <option value="paypal">PayPal</option>
1050
+ <option value="cashapp">Cash App</option>
1051
+ <option value="bitcoin">Bitcoin</option>
1052
+ <option value="wells">Wells Fargo</option>
1053
+ <option value="boa">Bank of America</option>
1054
+ <option value="citi">Citi Bank</option>
1055
+ <option value="coinbase">Coinbase</option>
1056
+ <option value="gcash">GCash</option>
1057
+ <option value="moneygram">MoneyGram</option>
1058
+ </select>
1059
+ </div>
1060
+ <div class="form-group">
1061
+ <label class="form-label">Notes (Optional)</label>
1062
+ <textarea class="form-control" placeholder="Add a note to recipient" rows="2"></textarea>
1063
+ </div>
1064
+ </form>
1065
+ </div>
1066
+ <div class="modal-footer">
1067
+ <button class="btn btn-secondary close-modal">Cancel</button>
1068
+ <button class="btn btn-primary" id="confirmSend">Send Money</button>
1069
+ </div>
1070
+ </div>
1071
+ </div>
1072
+
1073
+ <!-- Receipt Modal -->
1074
+ <div class="modal" id="receiptModal">
1075
+ <div class="modal-content">
1076
+ <div class="modal-header">
1077
+ <div class="modal-title">Transaction Receipt</div>
1078
+ <button class="close-modal">&times;</button>
1079
+ </div>
1080
+ <div class="modal-body">
1081
+ <div class="receipt">
1082
+ <div class="receipt-header">
1083
+ <div class="receipt-title">AMERICAN MILITARY BANK</div>
1084
+ <div class="receipt-subtitle">Serving Those Who Serve</div>
1085
+ </div>
1086
+
1087
+ <div class="receipt-details">
1088
+ <div class="receipt-row">
1089
+ <span class="receipt-label">Transaction ID:</span>
1090
+ <span>TX-9845-2387</span>
1091
+ </div>
1092
+ <div class="receipt-row">
1093
+ <span class="receipt-label">Date & Time:</span>
1094
+ <span id="receiptDate">May 15, 2023 14:30 EST</span>
1095
+ </div>
1096
+ <div class="receipt-divider"></div>
1097
+ <div class="receipt-row">
1098
+ <span class="receipt-label">From:</span>
1099
+ <span>John Smith</span>
1100
+ </div>
1101
+ <div class="receipt-row">
1102
+ <span class="receipt-label">To:</span>
1103
+ <span id="receiptRecipient">Robert Johnson</span>
1104
+ </div>
1105
+ <div class="receipt-row">
1106
+ <span class="receipt-label">Account:</span>
1107
+ <span>**** **** **** 4512</span>
1108
+ </div>
1109
+ <div class="receipt-divider"></div>
1110
+ <div class="receipt-row">
1111
+ <span class="receipt-label">Amount:</span>
1112
+ <span id="receiptAmount">$250.00 USD</span>
1113
+ </div>
1114
+ <div class="receipt-row">
1115
+ <span class="receipt-label">Transfer Method:</span>
1116
+ <span id="receiptMethod">Zelle</span>
1117
+ </div>
1118
+ <div class="receipt-row">
1119
+ <span class="receipt-label">Fee:</span>
1120
+ <span>$0.00</span>
1121
+ </div>
1122
+ <div class="receipt-divider"></div>
1123
+ <div class="receipt-row">
1124
+ <span class="receipt-label">Status:</span>
1125
+ <span class="status-badge status-success">Successful</span>
1126
+ </div>
1127
+ </div>
1128
+
1129
+ <div class="receipt-footer">
1130
+ <p>Thank you for banking with American Military Bank</p>
1131
+ <p>This is an official receipt for your records</p>
1132
+ <p>For any questions, contact support: 1-800-AMB-HELP</p>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ <div class="modal-footer">
1137
+ <button class="btn btn-secondary close-modal">Close</button>
1138
+ <button class="btn btn-primary" id="printReceipt">
1139
+ <i class="fas fa-print"></i> Print Receipt
1140
+ </button>
1141
+ </div>
1142
+ </div>
1143
+ </div>
1144
+
1145
+ <!-- Toast Notification -->
1146
+ <div class="toast" id="toast">Transaction completed successfully!</div>
1147
+
1148
+ <script>
1149
+ // DOM Elements
1150
+ const sendMoneyBtn = document.getElementById('sendMoneyBtn');
1151
+ const sendMoneyModal = document.getElementById('sendMoneyModal');
1152
+ const receiptModal = document.getElementById('receiptModal');
1153
+ const closeModalBtns = document.querySelectorAll('.close-modal');
1154
+ const confirmSendBtn = document.getElementById('confirmSend');
1155
+ const printReceiptBtn = document.getElementById('printReceipt');
1156
+ const sendMoneyForm = document.getElementById('sendMoneyForm');
1157
+ const toast = document.getElementById('toast');
1158
+
1159
+ // Open Send Money Modal
1160
+ sendMoneyBtn.addEventListener('click', () => {
1161
+ sendMoneyModal.style.display = 'block';
1162
+ document.body.style.overflow = 'hidden';
1163
+ });
1164
+
1165
+ // Close Modals
1166
+ closeModalBtns.forEach(btn => {
1167
+ btn.addEventListener('click', () => {
1168
+ sendMoneyModal.style.display = 'none';
1169
+ receiptModal.style.display = 'none';
1170
+ document.body.style.overflow = 'auto';
1171
+ });
1172
+ });
1173
+
1174
+ // Confirm Send Money
1175
+ confirmSendBtn.addEventListener('click', () => {
1176
+ if (sendMoneyForm.checkValidity()) {
1177
+ // Get form values
1178
+ const recipientName = document.querySelector('#sendMoneyForm input:nth-child(2)').value;
1179
+ const amount = document.querySelector('#sendMoneyForm input[type="number"]').value;
1180
+ const currency = document.querySelector('.currency-select').value;
1181
+ const method = document.getElementById('transferMethod').value;
1182
+
1183
+ // Update receipt with transaction details
1184
+ document.getElementById('receiptRecipient').textContent = recipientName;
1185
+ document.getElementById('receiptAmount').textContent = `${currency === 'USD' ? '$' : ''}${amount} ${currency}`;
1186
+ document.getElementById('receiptMethod').textContent = document.getElementById('transferMethod').options[document.getElementById('transferMethod').selectedIndex].text;
1187
+
1188
+ // Set current date/time
1189
+ const now = new Date();
1190
+ document.getElementById('receiptDate').textContent = now.toLocaleString('en-US', {
1191
+ month: 'long',
1192
+ day: 'numeric',
1193
+ year: 'numeric',
1194
+ hour: '2-digit',
1195
+ minute: '2-digit',
1196
+ timeZoneName: 'short'
1197
+ });
1198
+
1199
+ // Close send money modal and show receipt
1200
+ sendMoneyModal.style.display = 'none';
1201
+ receiptModal.style.display = 'block';
1202
+
1203
+ // Simulate sending email
1204
+ sendEmailNotification(recipientName, amount, currency, method);
1205
+
1206
+ // Show success toast
1207
+ showToast('Transaction completed successfully! Funds transferred.');
1208
+ } else {
1209
+ sendMoneyForm.reportValidity();
1210
+ }
1211
+ });
1212
+
1213
+ // Print Receipt
1214
+ printReceiptBtn.addEventListener('click', () => {
1215
+ const receiptContent = document.querySelector('.receipt').innerHTML;
1216
+ const originalContent = document.body.innerHTML;
1217
+
1218
+ document.body.innerHTML = `
1219
+ <style>
1220
+ body {
1221
+ font-family: 'Courier New', monospace;
1222
+ padding: 20px;
1223
+ background: white;
1224
+ color: #333;
1225
+ }
1226
+ .receipt {
1227
+ max-width: 400px;
1228
+ margin: 0 auto;
1229
+ }
1230
+ </style>
1231
+ <div class="receipt">${receiptContent}</div>
1232
+ `;
1233
+
1234
+ window.print();
1235
+ document.body.innerHTML = originalContent;
1236
+ location.reload();
1237
+ });
1238
+
1239
+ // Show Toast Notification
1240
+ function showToast(message, isError = false) {
1241
+ toast.textContent = message;
1242
+ toast.classList.remove('error');
1243
+
1244
+ if (isError) {
1245
+ toast.classList.add('error');
1246
+ }
1247
+
1248
+ toast.classList.add('show');
1249
+
1250
+ setTimeout(() => {
1251
+ toast.classList.remove('show');
1252
+ }, 3000);
1253
+ }
1254
+
1255
+ // Send Email Notification
1256
+ function sendEmailNotification(recipientName, amount, currency, method) {
1257
+ const templateParams = {
1258
+ to_email: document.querySelector('#sendMoneyForm input[type="email"]').value,
1259
+ from_name: 'American Military Bank',
1260
+ transaction_id: 'TX-' + Math.floor(Math.random() * 10000),
1261
+ amount: amount,
1262
+ currency: currency,
1263
+ method: method,
1264
+ recipient: recipientName,
1265
+ status: 'Successful',
1266
+ date: new Date().toLocaleString()
1267
+ };
1268
+
1269
+ emailjs.send('service_p3u12y3', 'template_hgpytes', templateParams)
1270
+ .then(() => {
1271
+ console.log('Email notification sent!');
1272
+ }, (error) => {
1273
+ console.error('Failed to send email:', error);
1274
+ showToast('Transaction succeeded but email notification failed', true);
1275
+ });
1276
+ }
1277
+
1278
+ // Close modals when clicking outside
1279
+ window.addEventListener('click', (e) => {
1280
+ if (e.target === sendMoneyModal) {
1281
+ sendMoneyModal.style.display = 'none';
1282
+ document.body.style.overflow = 'auto';
1283
+ }
1284
+ if (e.target === receiptModal) {
1285
+ receiptModal.style.display = 'none';
1286
+ document.body.style.overflow = 'auto';
1287
+ }
1288
+ });
1289
+ </script>
1290
+ </body>
1291
+ </html>