Hugging Face's logo

Spaces:
BOLTON-AI
/
anycoder-0a6a72a3
Running

App Files Community
BOLTON-AI commited on
Commit
c6e9ea0
·
verified ·
1 Parent(s): aba3641

Upload folder using huggingface_hub

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