Hugging Face's logo

Spaces:
BOLTON-AI
/
anycoder-6fb4663d
Running

App Files Community
BOLTON-AI commited on
Commit
eeb7f2a
·
verified ·
1 Parent(s): 2f6a168

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +802 -19
index.html CHANGED
@@ -1,19 +1,802 @@
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
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>CVS Tap to Pay</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --cvs-red: #cc0000;
18
+ --cvs-dark-red: #a00000;
19
+ --success-green: #28a745;
20
+ --bg-light: #f5f5f5;
21
+ --text-dark: #333;
22
+ --text-light: #666;
23
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
24
+ }
25
+
26
+ body {
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
29
+ min-height: 100vh;
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: center;
33
+ }
34
+
35
+ header {
36
+ width: 100%;
37
+ background: var(--cvs-red);
38
+ padding: 1rem 2rem;
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ box-shadow: var(--shadow);
43
+ }
44
+
45
+ .logo {
46
+ display: flex;
47
+ align-items: center;
48
+ gap: 0.5rem;
49
+ }
50
+
51
+ .logo-text {
52
+ font-size: 2rem;
53
+ font-weight: bold;
54
+ color: white;
55
+ letter-spacing: 2px;
56
+ }
57
+
58
+ .logo-tagline {
59
+ font-size: 0.7rem;
60
+ color: rgba(255, 255, 255, 0.9);
61
+ }
62
+
63
+ .built-with {
64
+ color: white;
65
+ text-decoration: none;
66
+ font-size: 0.8rem;
67
+ opacity: 0.9;
68
+ transition: opacity 0.3s;
69
+ }
70
+
71
+ .built-with:hover {
72
+ opacity: 1;
73
+ text-decoration: underline;
74
+ }
75
+
76
+ main {
77
+ flex: 1;
78
+ width: 100%;
79
+ max-width: 500px;
80
+ padding: 2rem 1rem;
81
+ display: flex;
82
+ flex-direction: column;
83
+ gap: 1.5rem;
84
+ }
85
+
86
+ .payment-card {
87
+ background: white;
88
+ border-radius: 20px;
89
+ padding: 2rem;
90
+ box-shadow: var(--shadow);
91
+ text-align: center;
92
+ }
93
+
94
+ .amount-display {
95
+ margin-bottom: 1.5rem;
96
+ }
97
+
98
+ .amount-label {
99
+ font-size: 0.9rem;
100
+ color: var(--text-light);
101
+ margin-bottom: 0.5rem;
102
+ }
103
+
104
+ .amount {
105
+ font-size: 3rem;
106
+ font-weight: bold;
107
+ color: var(--text-dark);
108
+ }
109
+
110
+ .tap-area {
111
+ width: 180px;
112
+ height: 180px;
113
+ margin: 2rem auto;
114
+ border-radius: 50%;
115
+ background: linear-gradient(145deg, #ffffff, #e6e6e6);
116
+ box-shadow: 8px 8px 20px #d1d1d1, -8px -8px 20px #ffffff;
117
+ display: flex;
118
+ flex-direction: column;
119
+ align-items: center;
120
+ justify-content: center;
121
+ cursor: pointer;
122
+ transition: all 0.3s ease;
123
+ position: relative;
124
+ overflow: hidden;
125
+ }
126
+
127
+ .tap-area:hover {
128
+ transform: scale(1.02);
129
+ }
130
+
131
+ .tap-area:active {
132
+ transform: scale(0.98);
133
+ box-shadow: 4px 4px 10px #d1d1d1, -4px -4px 10px #ffffff;
134
+ }
135
+
136
+ .tap-area.processing {
137
+ animation: pulse 1.5s infinite;
138
+ }
139
+
140
+ .tap-area.success {
141
+ background: linear-gradient(145deg, #2ecc71, #27ae60);
142
+ box-shadow: 8px 8px 20px rgba(46, 204, 113, 0.3), -8px -8px 20px #ffffff;
143
+ }
144
+
145
+ @keyframes pulse {
146
+
147
+ 0%,
148
+ 100% {
149
+ transform: scale(1);
150
+ box-shadow: 8px 8px 20px #d1d1d1, -8px -8px 20px #ffffff;
151
+ }
152
+
153
+ 50% {
154
+ transform: scale(1.05);
155
+ box-shadow: 12px 12px 30px rgba(204, 0, 0, 0.2), -8px -8px 20px #ffffff;
156
+ }
157
+ }
158
+
159
+ .tap-icon {
160
+ font-size: 3rem;
161
+ color: var(--cvs-red);
162
+ margin-bottom: 0.5rem;
163
+ transition: all 0.3s ease;
164
+ }
165
+
166
+ .tap-area.success .tap-icon {
167
+ color: white;
168
+ }
169
+
170
+ .tap-text {
171
+ font-size: 0.9rem;
172
+ color: var(--text-light);
173
+ font-weight: 500;
174
+ }
175
+
176
+ .tap-area.success .tap-text {
177
+ color: white;
178
+ }
179
+
180
+ .ripple {
181
+ position: absolute;
182
+ border-radius: 50%;
183
+ background: rgba(204, 0, 0, 0.3);
184
+ animation: ripple-animation 1s ease-out;
185
+ pointer-events: none;
186
+ }
187
+
188
+ @keyframes ripple-animation {
189
+ from {
190
+ width: 0;
191
+ height: 0;
192
+ opacity: 1;
193
+ }
194
+
195
+ to {
196
+ width: 300px;
197
+ height: 300px;
198
+ opacity: 0;
199
+ }
200
+ }
201
+
202
+ .payment-methods {
203
+ display: flex;
204
+ justify-content: center;
205
+ gap: 1rem;
206
+ margin-top: 1rem;
207
+ }
208
+
209
+ .payment-method {
210
+ width: 50px;
211
+ height: 35px;
212
+ background: #f8f8f8;
213
+ border-radius: 8px;
214
+ display: flex;
215
+ align-items: center;
216
+ justify-content: center;
217
+ font-size: 1.2rem;
218
+ color: var(--text-light);
219
+ }
220
+
221
+ .transaction-details {
222
+ background: white;
223
+ border-radius: 20px;
224
+ padding: 1.5rem;
225
+ box-shadow: var(--shadow);
226
+ }
227
+
228
+ .detail-row {
229
+ display: flex;
230
+ justify-content: space-between;
231
+ padding: 0.75rem 0;
232
+ border-bottom: 1px solid #eee;
233
+ }
234
+
235
+ .detail-row:last-child {
236
+ border-bottom: none;
237
+ }
238
+
239
+ .detail-label {
240
+ color: var(--text-light);
241
+ font-size: 0.9rem;
242
+ }
243
+
244
+ .detail-value {
245
+ color: var(--text-dark);
246
+ font-weight: 500;
247
+ }
248
+
249
+ .rewards-card {
250
+ background: linear-gradient(135deg, var(--cvs-red), var(--cvs-dark-red));
251
+ border-radius: 20px;
252
+ padding: 1.5rem;
253
+ color: white;
254
+ box-shadow: var(--shadow);
255
+ }
256
+
257
+ .rewards-header {
258
+ display: flex;
259
+ justify-content: space-between;
260
+ align-items: center;
261
+ margin-bottom: 1rem;
262
+ }
263
+
264
+ .rewards-title {
265
+ font-size: 1.1rem;
266
+ font-weight: 600;
267
+ }
268
+
269
+ .rewards-badge {
270
+ background: rgba(255, 255, 255, 0.2);
271
+ padding: 0.3rem 0.8rem;
272
+ border-radius: 20px;
273
+ font-size: 0.8rem;
274
+ }
275
+
276
+ .rewards-points {
277
+ font-size: 2rem;
278
+ font-weight: bold;
279
+ margin-bottom: 0.5rem;
280
+ }
281
+
282
+ .rewards-subtitle {
283
+ font-size: 0.85rem;
284
+ opacity: 0.9;
285
+ }
286
+
287
+ .progress-bar {
288
+ height: 8px;
289
+ background: rgba(255, 255, 255, 0.3);
290
+ border-radius: 4px;
291
+ margin-top: 1rem;
292
+ overflow: hidden;
293
+ }
294
+
295
+ .progress-fill {
296
+ height: 100%;
297
+ width: 65%;
298
+ background: white;
299
+ border-radius: 4px;
300
+ transition: width 0.5s ease;
301
+ }
302
+
303
+ .quick-actions {
304
+ display: grid;
305
+ grid-template-columns: repeat(4, 1fr);
306
+ gap: 1rem;
307
+ }
308
+
309
+ .quick-action {
310
+ background: white;
311
+ border-radius: 15px;
312
+ padding: 1rem 0.5rem;
313
+ text-align: center;
314
+ box-shadow: var(--shadow);
315
+ cursor: pointer;
316
+ transition: transform 0.2s, box-shadow 0.2s;
317
+ }
318
+
319
+ .quick-action:hover {
320
+ transform: translateY(-3px);
321
+ box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
322
+ }
323
+
324
+ .quick-action i {
325
+ font-size: 1.5rem;
326
+ color: var(--cvs-red);
327
+ margin-bottom: 0.5rem;
328
+ }
329
+
330
+ .quick-action span {
331
+ display: block;
332
+ font-size: 0.75rem;
333
+ color: var(--text-dark);
334
+ }
335
+
336
+ .status-message {
337
+ text-align: center;
338
+ padding: 1rem;
339
+ border-radius: 10px;
340
+ margin-top: 1rem;
341
+ display: none;
342
+ }
343
+
344
+ .status-message.show {
345
+ display: block;
346
+ animation: fadeIn 0.3s ease;
347
+ }
348
+
349
+ .status-message.success {
350
+ background: rgba(40, 167, 69, 0.1);
351
+ color: var(--success-green);
352
+ }
353
+
354
+ .status-message.error {
355
+ background: rgba(220, 53, 69, 0.1);
356
+ color: #dc3545;
357
+ }
358
+
359
+ .status-message.info {
360
+ background: rgba(204, 0, 0, 0.1);
361
+ color: var(--cvs-red);
362
+ }
363
+
364
+ @keyframes fadeIn {
365
+ from {
366
+ opacity: 0;
367
+ transform: translateY(-10px);
368
+ }
369
+
370
+ to {
371
+ opacity: 1;
372
+ transform: translateY(0);
373
+ }
374
+ }
375
+
376
+ footer {
377
+ width: 100%;
378
+ background: white;
379
+ padding: 1rem;
380
+ text-align: center;
381
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
382
+ }
383
+
384
+ .footer-nav {
385
+ display: flex;
386
+ justify-content: space-around;
387
+ max-width: 500px;
388
+ margin: 0 auto;
389
+ }
390
+
391
+ .footer-nav-item {
392
+ display: flex;
393
+ flex-direction: column;
394
+ align-items: center;
395
+ gap: 0.3rem;
396
+ color: var(--text-light);
397
+ cursor: pointer;
398
+ transition: color 0.2s;
399
+ }
400
+
401
+ .footer-nav-item.active,
402
+ .footer-nav-item:hover {
403
+ color: var(--cvs-red);
404
+ }
405
+
406
+ .footer-nav-item i {
407
+ font-size: 1.3rem;
408
+ }
409
+
410
+ .footer-nav-item span {
411
+ font-size: 0.7rem;
412
+ }
413
+
414
+ @media (max-width: 400px) {
415
+ .amount {
416
+ font-size: 2.5rem;
417
+ }
418
+
419
+ .tap-area {
420
+ width: 150px;
421
+ height: 150px;
422
+ }
423
+
424
+ .tap-icon {
425
+ font-size: 2.5rem;
426
+ }
427
+
428
+ .quick-actions {
429
+ grid-template-columns: repeat(2, 1fr);
430
+ }
431
+ }
432
+
433
+ /* Modal Styles */
434
+ .modal {
435
+ display: none;
436
+ position: fixed;
437
+ top: 0;
438
+ left: 0;
439
+ width: 100%;
440
+ height: 100%;
441
+ background: rgba(0, 0, 0, 0.5);
442
+ z-index: 1000;
443
+ align-items: center;
444
+ justify-content: center;
445
+ padding: 1rem;
446
+ }
447
+
448
+ .modal.show {
449
+ display: flex;
450
+ animation: fadeIn 0.3s ease;
451
+ }
452
+
453
+ .modal-content {
454
+ background: white;
455
+ border-radius: 20px;
456
+ padding: 2rem;
457
+ max-width: 400px;
458
+ width: 100%;
459
+ text-align: center;
460
+ }
461
+
462
+ .modal-icon {
463
+ font-size: 4rem;
464
+ color: var(--success-green);
465
+ margin-bottom: 1rem;
466
+ }
467
+
468
+ .modal-title {
469
+ font-size: 1.5rem;
470
+ color: var(--text-dark);
471
+ margin-bottom: 0.5rem;
472
+ }
473
+
474
+ .modal-text {
475
+ color: var(--text-light);
476
+ margin-bottom: 1.5rem;
477
+ }
478
+
479
+ .modal-btn {
480
+ background: var(--cvs-red);
481
+ color: white;
482
+ border: none;
483
+ padding: 1rem 2rem;
484
+ border-radius: 10px;
485
+ font-size: 1rem;
486
+ cursor: pointer;
487
+ transition: background 0.2s;
488
+ }
489
+
490
+ .modal-btn:hover {
491
+ background: var(--cvs-dark-red);
492
+ }
493
+
494
+ .receipt-details {
495
+ text-align: left;
496
+ background: #f8f8f8;
497
+ border-radius: 10px;
498
+ padding: 1rem;
499
+ margin: 1rem 0;
500
+ }
501
+
502
+ .receipt-row {
503
+ display: flex;
504
+ justify-content: space-between;
505
+ padding: 0.5rem 0;
506
+ font-size: 0.9rem;
507
+ }
508
+
509
+ .receipt-row.total {
510
+ border-top: 1px dashed #ddd;
511
+ margin-top: 0.5rem;
512
+ padding-top: 0.75rem;
513
+ font-weight: bold;
514
+ }
515
+ </style>
516
+ </head>
517
+
518
+ <body>
519
+ <header>
520
+ <div class="logo">
521
+ <div>
522
+ <div class="logo-text">CVS</div>
523
+ <div class="logo-tagline">pharmacy</div>
524
+ </div>
525
+ </div>
526
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">
527
+ Built with anycoder
528
+ </a>
529
+ </header>
530
+
531
+ <main>
532
+ <div class="payment-card">
533
+ <div class="amount-display">
534
+ <div class="amount-label">Total Amount</div>
535
+ <div class="amount" id="totalAmount">$24.99</div>
536
+ </div>
537
+
538
+ <div class="tap-area" id="tapArea">
539
+ <i class="fas fa-wifi tap-icon" id="tapIcon"></i>
540
+ <span class="tap-text" id="tapText">Tap to Pay</span>
541
+ </div>
542
+
543
+ <div class="payment-methods">
544
+ <div class="payment-method"><i class="fab fa-apple-pay"></i></div>
545
+ <div class="payment-method"><i class="fab fa-google-pay"></i></div>
546
+ <div class="payment-method"><i class="fab fa-cc-visa"></i></div>
547
+ <div class="payment-method"><i class="fab fa-cc-mastercard"></i></div>
548
+ </div>
549
+
550
+ <div class="status-message" id="statusMessage"></div>
551
+ </div>
552
+
553
+ <div class="transaction-details">
554
+ <div class="detail-row">
555
+ <span class="detail-label">Store</span>
556
+ <span class="detail-value">CVS #4521</span>
557
+ </div>
558
+ <div class="detail-row">
559
+ <span class="detail-label">Date</span>
560
+ <span class="detail-value" id="currentDate"></span>
561
+ </div>
562
+ <div class="detail-row">
563
+ <span class="detail-label">Items</span>
564
+ <span class="detail-value">3 items</span>
565
+ </div>
566
+ <div class="detail-row">
567
+ <span class="detail-label">Subtotal</span>
568
+ <span class="detail-value">$22.99</span>
569
+ </div>
570
+ <div class="detail-row">
571
+ <span class="detail-label">Tax</span>
572
+ <span class="detail-value">$2.00</span>
573
+ </div>
574
+ </div>
575
+
576
+ <div class="rewards-card">
577
+ <div class="rewards-header">
578
+ <span class="rewards-title">ExtraCare Rewards</span>
579
+ <span class="rewards-badge">Gold Member</span>
580
+ </div>
581
+ <div class="rewards-points">2,450 pts</div>
582
+ <div class="rewards-subtitle">550 pts until your next $5 reward</div>
583
+ <div class="progress-bar">
584
+ <div class="progress-fill"></div>
585
+ </div>
586
+ </div>
587
+
588
+ <div class="quick-actions">
589
+ <div class="quick-action">
590
+ <i class="fas fa-receipt"></i>
591
+ <span>Receipts</span>
592
+ </div>
593
+ <div class="quick-action">
594
+ <i class="fas fa-pills"></i>
595
+ <span>Pharmacy</span>
596
+ </div>
597
+ <div class="quick-action">
598
+ <i class="fas fa-percent"></i>
599
+ <span>Coupons</span>
600
+ </div>
601
+ <div class="quick-action">
602
+ <i class="fas fa-store"></i>
603
+ <span>Stores</span>
604
+ </div>
605
+ </div>
606
+ </main>
607
+
608
+ <footer>
609
+ <nav class="footer-nav">
610
+ <div class="footer-nav-item">
611
+ <i class="fas fa-home"></i>
612
+ <span>Home</span>
613
+ </div>
614
+ <div class="footer-nav-item">
615
+ <i class="fas fa-search"></i>
616
+ <span>Shop</span>
617
+ </div>
618
+ <div class="footer-nav-item active">
619
+ <i class="fas fa-credit-card"></i>
620
+ <span>Pay</span>
621
+ </div>
622
+ <div class="footer-nav-item">
623
+ <i class="fas fa-heart"></i>
624
+ <span>Health</span>
625
+ </div>
626
+ <div class="footer-nav-item">
627
+ <i class="fas fa-user"></i>
628
+ <span>Account</span>
629
+ </div>
630
+ </nav>
631
+ </footer>
632
+
633
+ <!-- Success Modal -->
634
+ <div class="modal" id="successModal">
635
+ <div class="modal-content">
636
+ <i class="fas fa-check-circle modal-icon"></i>
637
+ <h2 class="modal-title">Payment Successful!</h2>
638
+ <p class="modal-text">Your payment has been processed successfully.</p>
639
+
640
+ <div class="receipt-details">
641
+ <div class="receipt-row">
642
+ <span>Transaction ID</span>
643
+ <span id="transactionId"></span>
644
+ </div>
645
+ <div class="receipt-row">
646
+ <span>Payment Method</span>
647
+ <span>Apple Pay ****4242</span>
648
+ </div>
649
+ <div class="receipt-row">
650
+ <span>Points Earned</span>
651
+ <span>+25 pts</span>
652
+ </div>
653
+ <div class="receipt-row total">
654
+ <span>Total Paid</span>
655
+ <span>$24.99</span>
656
+ </div>
657
+ </div>
658
+
659
+ <button class="modal-btn" id="closeModal">Done</button>
660
+ </div>
661
+ </div>
662
+
663
+ <script>
664
+ // Set current date
665
+ const currentDate = new Date();
666
+ const options = { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' };
667
+ document.getElementById('currentDate').textContent = currentDate.toLocaleDateString('en-US', options);
668
+
669
+ // Tap to Pay functionality
670
+ const tapArea = document.getElementById('tapArea');
671
+ const tapIcon = document.getElementById('tapIcon');
672
+ const tapText = document.getElementById('tapText');
673
+ const statusMessage = document.getElementById('statusMessage');
674
+ const successModal = document.getElementById('successModal');
675
+ const closeModal = document.getElementById('closeModal');
676
+ const transactionId = document.getElementById('transactionId');
677
+
678
+ let isProcessing = false;
679
+
680
+ tapArea.addEventListener('click', function(e) {
681
+ if (isProcessing) return;
682
+
683
+ // Create ripple effect
684
+ const ripple = document.createElement('div');
685
+ ripple.classList.add('ripple');
686
+ const rect = tapArea.getBoundingClientRect();
687
+ ripple.style.left = (e.clientX - rect.left - 150) + 'px';
688
+ ripple.style.top = (e.clientY - rect.top - 150) + 'px';
689
+ tapArea.appendChild(ripple);
690
+
691
+ setTimeout(() => ripple.remove(), 1000);
692
+
693
+ // Start processing
694
+ isProcessing = true;
695
+ tapArea.classList.add('processing');
696
+ tapIcon.className = 'fas fa-spinner fa-spin tap-icon';
697
+ tapText.textContent = 'Processing...';
698
+
699
+ // Show processing message
700
+ showStatus('Connecting to payment terminal...', 'info');
701
+
702
+ // Simulate payment processing
703
+ setTimeout(() => {
704
+ showStatus('Verifying payment...', 'info');
705
+ }, 1000);
706
+
707
+ setTimeout(() => {
708
+ showStatus('Authorizing transaction...', 'info');
709
+ }, 2000);
710
+
711
+ setTimeout(() => {
712
+ // Payment success
713
+ tapArea.classList.remove('processing');
714
+ tapArea.classList.add('success');
715
+ tapIcon.className = 'fas fa-check tap-icon';
716
+ tapText.textContent = 'Approved!';
717
+
718
+ // Generate transaction ID
719
+ transactionId.textContent = 'TXN' + Math.random().toString(36).substr(2, 9).toUpperCase();
720
+
721
+ // Show success modal
722
+ setTimeout(() => {
723
+ successModal.classList.add('show');
724
+ }, 500);
725
+
726
+ // Update rewards
727
+ updateRewards();
728
+
729
+ hideStatus();
730
+ }, 3000);
731
+ });
732
+
733
+ closeModal.addEventListener('click', function() {
734
+ successModal.classList.remove('show');
735
+
736
+ // Reset tap area
737
+ setTimeout(() => {
738
+ tapArea.classList.remove('success');
739
+ tapIcon.className = 'fas fa-wifi tap-icon';
740
+ tapText.textContent = 'Tap to Pay';
741
+ isProcessing = false;
742
+ }, 300);
743
+ });
744
+
745
+ function showStatus(message, type) {
746
+ statusMessage.textContent = message;
747
+ statusMessage.className = 'status-message show ' + type;
748
+ }
749
+
750
+ function hideStatus() {
751
+ statusMessage.classList.remove('show');
752
+ }
753
+
754
+ function updateRewards() {
755
+ const pointsElement = document.querySelector('.rewards-points');
756
+ const progressFill = document.querySelector('.progress-fill');
757
+ const subtitle = document.querySelector('.rewards-subtitle');
758
+
759
+ // Animate points increase
760
+ let currentPoints = 2450;
761
+ const targetPoints = 2475;
762
+ const interval = setInterval(() => {
763
+ currentPoints++;
764
+ pointsElement.textContent = currentPoints.toLocaleString() + ' pts';
765
+ if (currentPoints >= targetPoints) {
766
+ clearInterval(interval);
767
+ }
768
+ }, 50);
769
+
770
+ // Update progress bar
771
+ progressFill.style.width = '73%';
772
+ subtitle.textContent = '525 pts until your next $5 reward';
773
+ }
774
+
775
+ // Quick action click effects
776
+ document.querySelectorAll('.quick-action').forEach(action => {
777
+ action.addEventListener('click', function() {
778
+ this.style.transform = 'scale(0.95)';
779
+ setTimeout(() => {
780
+ this.style.transform = '';
781
+ }, 150);
782
+ });
783
+ });
784
+
785
+ // Footer navigation
786
+ document.querySelectorAll('.footer-nav-item').forEach(item => {
787
+ item.addEventListener('click', function() {
788
+ document.querySelectorAll('.footer-nav-item').forEach(i => i.classList.remove('active'));
789
+ this.classList.add('active');
790
+ });
791
+ });
792
+
793
+ // Close modal on outside click
794
+ successModal.addEventListener('click', function(e) {
795
+ if (e.target === successModal) {
796
+ closeModal.click();
797
+ }
798
+ });
799
+ </script>
800
+ </body>
801
+
802
+ </html>