Hugging Face's logo

Spaces:
flen-crypto
/
anycoder-824288fb
Running

App Files Community
flen-crypto commited on
Commit
d76a179
·
verified ·
1 Parent(s): 7ccba1d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1292 -1157
index.html CHANGED
@@ -1,1179 +1,1314 @@
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, maximum-scale=1.0, user-scalable=no">
6
- <title>FLEN Wallet - Unified Loyalty Ecosystem</title>
7
-
8
- <!-- Font Awesome for Icons -->
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
-
11
- <style>
12
- :root {
13
- --primary-color: #4A148C;
14
- --primary-light: #7B1FA2;
15
- --primary-dark: #311B92;
16
- --gold-color: #FFD700;
17
- --gold-light: #FFECB3;
18
- --bg-primary: #121212;
19
- --bg-secondary: #1E1E1E;
20
- --bg-card: #2A2A2A;
21
- --text-primary: #FFFFFF;
22
- --text-secondary: #B0B0B0;
23
- --text-dim: #666666;
24
- --success: #4CAF50;
25
- --error: #F44336;
26
- --warning: #FF9800;
27
- --border-color: #333333;
28
- --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
29
- --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
30
- }
31
-
32
- * {
33
- margin: 0;
34
- padding: 0;
35
- box-sizing: border-box;
36
- }
37
-
38
- body {
39
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
40
- background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
41
- color: var(--text-primary);
42
- min-height: 100vh;
43
- overflow-x: hidden;
44
- }
45
-
46
- .app-container {
47
- max-width: 428px;
48
- margin: 0 auto;
49
- min-height: 100vh;
50
- position: relative;
51
- background: var(--bg-primary);
52
- box-shadow: var(--shadow-lg);
53
- }
54
-
55
- /* Header */
56
- .app-header {
57
- background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
58
- padding: 20px;
59
- display: flex;
60
- justify-content: space-between;
61
- align-items: center;
62
- position: sticky;
63
- top: 0;
64
- z-index: 100;
65
- box-shadow: var(--shadow);
66
- }
67
-
68
- .header-title {
69
- font-size: 1.5rem;
70
- font-weight: bold;
71
- display: flex;
72
- align-items: center;
73
- gap: 10px;
74
- }
75
-
76
- .header-title .logo {
77
- width: 32px;
78
- height: 32px;
79
- background: var(--gold-color);
80
- border-radius: 50%;
81
- display: flex;
82
- align-items: center;
83
- justify-content: center;
84
- font-weight: bold;
85
- color: var(--primary-color);
86
- }
87
-
88
- .header-actions {
89
- display: flex;
90
- gap: 15px;
91
- }
92
-
93
- .header-actions button {
94
- background: rgba(255, 255, 255, 0.2);
95
- border: none;
96
- color: white;
97
- width: 36px;
98
- height: 36px;
99
- border-radius: 50%;
100
- display: flex;
101
- align-items: center;
102
- justify-content: center;
103
- cursor: pointer;
104
- transition: all 0.3s ease;
105
- }
106
-
107
- .header-actions button:hover {
108
- background: rgba(255, 255, 255, 0.3);
109
- transform: scale(1.1);
110
- }
111
-
112
- /* Main Content Area */
113
- .main-content {
114
- padding-bottom: 80px;
115
- min-height: calc(100vh - 140px);
116
- }
117
-
118
- .screen {
119
- display: none;
120
- animation: fadeIn 0.3s ease;
121
- }
122
-
123
- .screen.active {
124
- display: block;
125
- }
126
-
127
- @keyframes fadeIn {
128
- from { opacity: 0; transform: translateY(20px); }
129
- to { opacity: 1; transform: translateY(0); }
130
- }
131
-
132
- /* Home Dashboard */
133
- .balance-card {
134
- background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
135
- margin: 20px;
136
- padding: 30px;
137
- border-radius: 20px;
138
- box-shadow: var(--shadow-lg);
139
- position: relative;
140
- overflow: hidden;
141
- }
142
-
143
- .balance-card::before {
144
- content: '';
145
- position: absolute;
146
- top: -50%;
147
- right: -50%;
148
- width: 200%;
149
- height: 200%;
150
- background: radial-gradient(circle, var(--gold-color) 0%, transparent 70%);
151
- opacity: 0.1;
152
- animation: rotate 20s linear infinite;
153
- }
154
-
155
- @keyframes rotate {
156
- from { transform: rotate(0deg); }
157
- to { transform: rotate(360deg); }
158
- }
159
-
160
- .balance-label {
161
- color: var(--text-secondary);
162
- font-size: 0.9rem;
163
- margin-bottom: 10px;
164
- }
165
-
166
- .balance-amount {
167
- font-size: 2.5rem;
168
- font-weight: bold;
169
- color: var(--text-primary);
170
- margin-bottom: 10px;
171
- }
172
-
173
- .balance-fiat {
174
- color: var(--gold-color);
175
- font-size: 1.1rem;
176
- }
177
-
178
- .quick-actions {
179
- display: grid;
180
- grid-template-columns: repeat(4, 1fr);
181
- gap: 15px;
182
- margin: 20px;
183
- }
184
-
185
- .quick-action-btn {
186
- background: var(--bg-card);
187
- border: 1px solid var(--border-color);
188
- border-radius: 15px;
189
- padding: 20px 10px;
190
- display: flex;
191
- flex-direction: column;
192
- align-items: center;
193
- gap: 8px;
194
- cursor: pointer;
195
- transition: all 0.3s ease;
196
- }
197
-
198
- .quick-action-btn:hover {
199
- background: var(--primary-color);
200
- transform: translateY(-3px);
201
- box-shadow: var(--shadow);
202
- }
203
-
204
- .quick-action-btn i {
205
- font-size: 1.5rem;
206
- color: var(--gold-color);
207
- }
208
-
209
- .quick-action-btn span {
210
- font-size: 0.75rem;
211
- color: var(--text-secondary);
212
- }
213
-
214
- /* Earnings Breakdown */
215
- .earnings-section {
216
- margin: 20px;
217
- }
218
-
219
- .section-title {
220
- font-size: 1.2rem;
221
- margin-bottom: 15px;
222
- color: var(--text-primary);
223
- }
224
-
225
- .earnings-cards {
226
- display: grid;
227
- grid-template-columns: repeat(2, 1fr);
228
- gap: 15px;
229
- }
230
-
231
- .earning-card {
232
- background: var(--bg-card);
233
- border: 1px solid var(--border-color);
234
- border-radius: 15px;
235
- padding: 15px;
236
- position: relative;
237
- overflow: hidden;
238
- cursor: pointer;
239
- transition: all 0.3s ease;
240
- }
241
-
242
- .earning-card:hover {
243
- transform: scale(1.02);
244
- box-shadow: var(--shadow);
245
- }
246
-
247
- .earning-card::after {
248
- content: '';
249
- position: absolute;
250
- top: 0;
251
- left: 0;
252
- width: 4px;
253
- height: 100%;
254
- background: var(--gold-color);
255
- }
256
-
257
- .earning-icon {
258
- font-size: 1.5rem;
259
- margin-bottom: 8px;
260
- }
261
-
262
- .earning-label {
263
- color: var(--text-secondary);
264
- font-size: 0.85rem;
265
- margin-bottom: 5px;
266
- }
267
-
268
- .earning-amount {
269
- font-size: 1.2rem;
270
- font-weight: bold;
271
- color: var(--text-primary);
272
- }
273
-
274
- .earning-change {
275
- font-size: 0.75rem;
276
- color: var(--success);
277
- margin-top: 5px;
278
- }
279
-
280
- /* Recent Transactions */
281
- .transactions-section {
282
- margin: 20px;
283
- }
284
-
285
- .transaction-list {
286
- background: var(--bg-card);
287
- border-radius: 15px;
288
- overflow: hidden;
289
- }
290
-
291
- .transaction-item {
292
- padding: 15px;
293
- border-bottom: 1px solid var(--border-color);
294
- display: flex;
295
- justify-content: space-between;
296
- align-items: center;
297
- transition: background 0.3s ease;
298
- }
299
-
300
- .transaction-item:hover {
301
- background: var(--bg-secondary);
302
- }
303
-
304
- .transaction-item:last-child {
305
- border-bottom: none;
306
- }
307
-
308
- .transaction-left {
309
- display: flex;
310
- align-items: center;
311
- gap: 15px;
312
- }
313
-
314
- .transaction-icon {
315
- width: 40px;
316
- height: 40px;
317
- border-radius: 50%;
318
- display: flex;
319
- align-items: center;
320
- justify-content: center;
321
- font-size: 1.2rem;
322
- }
323
-
324
- .transaction-icon.income {
325
- background: rgba(76, 175, 80, 0.2);
326
- color: var(--success);
327
- }
328
-
329
- .transaction-icon.outcome {
330
- background: rgba(244, 67, 54, 0.2);
331
- color: var(--error);
332
- }
333
-
334
- .transaction-details {
335
- display: flex;
336
- flex-direction: column;
337
- }
338
-
339
- .transaction-title {
340
- font-size: 0.95rem;
341
- color: var(--text-primary);
342
- }
343
-
344
- .transaction-time {
345
- font-size: 0.75rem;
346
- color: var(--text-dim);
347
- }
348
-
349
- .transaction-amount {
350
- font-weight: bold;
351
- }
352
-
353
- .transaction-amount.positive {
354
- color: var(--success);
355
- }
356
-
357
- .transaction-amount.negative {
358
- color: var(--error);
359
- }
360
-
361
- /* Earn Tab */
362
- .partner-categories {
363
- display: flex;
364
- gap: 10px;
365
- padding: 0 20px;
366
- margin-bottom: 20px;
367
- overflow-x: auto;
368
- scrollbar-width: none;
369
- }
370
-
371
- .partner-categories::-webkit-scrollbar {
372
- display: none;
373
- }
374
-
375
- .category-tab {
376
- background: var(--bg-card);
377
- border: 1px solid var(--border-color);
378
- border-radius: 25px;
379
- padding: 10px 20px;
380
- white-space: nowrap;
381
- cursor: pointer;
382
- transition: all 0.3s ease;
383
- display: flex;
384
- align-items: center;
385
- gap: 8px;
386
- }
387
-
388
- .category-tab.active {
389
- background: var(--primary-color);
390
- border-color: var(--primary-color);
391
- }
392
-
393
- .partner-list {
394
- padding: 0 20px;
395
- }
396
-
397
- .partner-card {
398
- background: var(--bg-card);
399
- border: 1px solid var(--border-color);
400
- border-radius: 15px;
401
- padding: 20px;
402
- margin-bottom: 15px;
403
- display: flex;
404
- justify-content: space-between;
405
- align-items: center;
406
- transition: all 0.3s ease;
407
- cursor: pointer;
408
- }
409
-
410
- .partner-card:hover {
411
- transform: translateX(5px);
412
- box-shadow: var(--shadow);
413
- }
414
-
415
- .partner-info {
416
- display: flex;
417
- align-items: center;
418
- gap: 15px;
419
- }
420
-
421
- .partner-logo {
422
- width: 50px;
423
- height: 50px;
424
- border-radius: 10px;
425
- display: flex;
426
- align-items: center;
427
- justify-content: center;
428
- font-size: 1.5rem;
429
- background: var(--bg-secondary);
430
- }
431
-
432
- .partner-details h3 {
433
- font-size: 1rem;
434
- margin-bottom: 5px;
435
- }
436
-
437
- .partner-details p {
438
- font-size: 0.85rem;
439
- color: var(--text-secondary);
440
- }
441
-
442
- .convert-btn {
443
- background: var(--primary-color);
444
- color: white;
445
- border: none;
446
- border-radius: 25px;
447
- padding: 10px 20px;
448
- cursor: pointer;
449
- transition: all 0.3s ease;
450
- font-weight: 600;
451
- }
452
-
453
- .convert-btn:hover {
454
- background: var(--primary-light);
455
- transform: scale(1.05);
456
- }
457
-
458
- /* Wallet Tab */
459
- .wallet-header {
460
- background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
461
- padding: 30px 20px;
462
- text-align: center;
463
- position: relative;
464
- }
465
-
466
- .wallet-balance {
467
- font-size: 2rem;
468
- font-weight: bold;
469
- margin-bottom: 10px;
470
- }
471
-
472
- .wallet-actions {
473
- display: flex;
474
- gap: 10px;
475
- margin-top: 20px;
476
- }
477
-
478
- .wallet-action-btn {
479
- flex: 1;
480
- background: rgba(255, 255, 255, 0.2);
481
- border: 1px solid rgba(255, 255, 255, 0.3);
482
- color: white;
483
- padding: 12px;
484
- border-radius: 10px;
485
- cursor: pointer;
486
- transition: all 0.3s ease;
487
- display: flex;
488
- flex-direction: column;
489
- align-items: center;
490
- gap: 5px;
491
- }
492
-
493
- .wallet-action-btn:hover {
494
- background: rgba(255, 255, 255, 0.3);
495
- }
496
-
497
- .wallet-action-btn i {
498
- font-size: 1.2rem;
499
- }
500
-
501
- .wallet-action-btn span {
502
- font-size: 0.75rem;
503
- }
504
-
505
- /* Card Tab */
506
- .card-display {
507
- background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
508
- margin: 20px;
509
- padding: 30px;
510
- border-radius: 20px;
511
- position: relative;
512
- min-height: 200px;
513
- box-shadow: var(--shadow-lg);
514
- cursor: pointer;
515
- transition: transform 0.6s;
516
- transform-style: preserve-3d;
517
- }
518
-
519
- .card-display.flipped {
520
- transform: rotateY(180deg);
521
- }
522
-
523
- .card-front, .card-back {
524
- position: absolute;
525
- width: 100%;
526
- height: 100%;
527
- backface-visibility: hidden;
528
- display: flex;
529
- flex-direction: column;
530
- justify-content: space-between;
531
- }
532
-
533
- .card-back {
534
- transform: rotateY(180deg);
535
- display: flex;
536
- align-items: center;
537
- justify-content: center;
538
- }
539
-
540
- .card-chip {
541
- width: 50px;
542
- height: 40px;
543
- background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
544
- border-radius: 8px;
545
- margin-bottom: 20px;
546
- }
547
-
548
- .card-number {
549
- font-size: 1.3rem;
550
- letter-spacing: 3px;
551
- margin-bottom: 20px;
552
- }
553
-
554
- .card-details {
555
- display: flex;
556
- justify-content: space-between;
557
- }
558
-
559
- .card-holder {
560
- text-transform: uppercase;
561
- font-size: 0.9rem;
562
- opacity: 0.8;
563
- }
564
-
565
- .card-expiry {
566
- font-size: 0.9rem;
567
- }
568
-
569
- .card-cvv {
570
- font-size: 1.5rem;
571
- font-weight: bold;
572
- color: white;
573
- }
574
-
575
- .card-controls {
576
- margin: 20px;
577
- display: grid;
578
- grid-template-columns: repeat(2, 1fr);
579
- gap: 15px;
580
- }
581
-
582
- .control-btn {
583
- background: var(--bg-card);
584
- border: 1px solid var(--border-color);
585
- padding: 15px;
586
- border-radius: 10px;
587
- cursor: pointer;
588
- transition: all 0.3s ease;
589
- display: flex;
590
- align-items: center;
591
- gap: 10px;
592
- }
593
-
594
- .control-btn:hover {
595
- background: var(--primary-color);
596
- }
597
-
598
- /* Profile Tab */
599
- .profile-section {
600
- padding: 20px;
601
- }
602
-
603
- .profile-header {
604
- display: flex;
605
- align-items: center;
606
- gap: 20px;
607
- margin-bottom: 30px;
608
- }
609
-
610
- .profile-avatar {
611
- width: 80px;
612
- height: 80px;
613
- border-radius: 50%;
614
- background: linear-gradient(135deg, var(--primary-color), var(--gold-color));
615
- display: flex;
616
- align-items: center;
617
- justify-content: center;
618
- font-size: 2rem;
619
- font-weight: bold;
620
- }
621
-
622
- .profile-info h2 {
623
- margin-bottom: 5px;
624
- }
625
-
626
- .profile-info p {
627
- color: var(--text-secondary);
628
- font-size: 0.9rem;
629
- }
630
-
631
- .profile-menu {
632
- background: var(--bg-card);
633
- border-radius: 15px;
634
- overflow: hidden;
635
- }
636
-
637
- .menu-item {
638
- padding: 15px 20px;
639
- border-bottom: 1px solid var(--border-color);
640
- display: flex;
641
- justify-content: space-between;
642
- align-items: center;
643
- cursor: pointer;
644
- transition: background 0.3s ease;
645
- }
646
-
647
- .menu-item:hover {
648
- background: var(--bg-secondary);
649
- }
650
-
651
- .menu-item:last-child {
652
- border-bottom: none;
653
- }
654
-
655
- .menu-left {
656
- display: flex;
657
- align-items: center;
658
- gap: 15px;
659
- }
660
-
661
- .menu-left i {
662
- width: 24px;
663
- color: var(--gold-color);
664
- }
665
-
666
- /* Bottom Navigation */
667
- .bottom-nav {
668
- position: fixed;
669
- bottom: 0;
670
- left: 50%;
671
- transform: translateX(-50%);
672
- width: 100%;
673
- max-width: 428px;
674
- background: var(--bg-secondary);
675
- border-top: 1px solid var(--border-color);
676
- display: flex;
677
- justify-content: space-around;
678
- padding: 10px 0;
679
- z-index: 100;
680
- }
681
-
682
- .nav-item {
683
- flex: 1;
684
- display: flex;
685
- flex-direction: column;
686
- align-items: center;
687
- gap: 5px;
688
- padding: 5px;
689
- cursor: pointer;
690
- transition: all 0.3s ease;
691
- color: var(--text-dim);
692
- }
693
-
694
- .nav-item.active {
695
- color: var(--gold-color);
696
- }
697
-
698
- .nav-item i {
699
- font-size: 1.2rem;
700
- }
701
-
702
- .nav-item span {
703
- font-size: 0.75rem;
704
- }
705
-
706
- .nav-item:hover {
707
- transform: translateY(-2px);
708
- }
709
-
710
- /* Modal */
711
- .modal {
712
- display: none;
713
- position: fixed;
714
- top: 0;
715
- left: 0;
716
- width: 100%;
717
- height: 100%;
718
- background: rgba(0, 0, 0, 0.8);
719
- z-index: 1000;
720
- animation: fadeIn 0.3s ease;
721
- }
722
-
723
- .modal.active {
724
- display: flex;
725
- align-items: center;
726
- justify-content: center;
727
- }
728
-
729
- .modal-content {
730
- background: var(--bg-card);
731
- border-radius: 20px;
732
- padding: 30px;
733
- max-width: 400px;
734
- width: 90%;
735
- max-height: 80vh;
736
- overflow-y: auto;
737
- animation: slideUp 0.3s ease;
738
- }
739
-
740
- @keyframes slideUp {
741
- from { transform: translateY(50px); opacity: 0; }
742
- to { transform: translateY(0); opacity: 1; }
743
- }
744
-
745
- .modal-header {
746
- display: flex;
747
- justify-content: space-between;
748
- align-items: center;
749
- margin-bottom: 20px;
750
- }
751
-
752
- .modal-close {
753
- background: none;
754
- border: none;
755
- color: var(--text-secondary);
756
- font-size: 1.5rem;
757
- cursor: pointer;
758
- }
759
-
760
- .form-group {
761
- margin-bottom: 20px;
762
- }
763
-
764
- .form-group label {
765
- display: block;
766
- margin-bottom: 8px;
767
- color: var(--text-secondary);
768
- font-size: 0.9rem;
769
- }
770
-
771
- .form-group input,
772
- .form-group select {
773
- width: 100%;
774
- padding: 12px;
775
- background: var(--bg-secondary);
776
- border: 1px solid var(--border-color);
777
- border-radius: 10px;
778
- color: var(--text-primary);
779
- font-size: 1rem;
780
- }
781
-
782
- .form-group input:focus,
783
- .form-group select:focus {
784
- outline: none;
785
- border-color: var(--primary-color);
786
- }
787
-
788
- .submit-btn {
789
- width: 100%;
790
- padding: 15px;
791
- background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
792
- color: white;
793
- border: none;
794
- border-radius: 10px;
795
- font-size: 1rem;
796
- font-weight: 600;
797
- cursor: pointer;
798
- transition: all 0.3s ease;
799
- }
800
-
801
- .submit-btn:hover {
802
- transform: translateY(-2px);
803
- box-shadow: var(--shadow);
804
- }
805
-
806
- /* Toast Notification */
807
- .toast {
808
- position: fixed;
809
- top: 80px;
810
- left: 50%;
811
- transform: translateX(-50%) translateY(-100px);
812
- background: var(--bg-card);
813
- border: 1px solid var(--border-color);
814
- padding: 15px 20px;
815
- border-radius: 10px;
816
- box-shadow: var(--shadow-lg);
817
- z-index: 2000;
818
- opacity: 0;
819
- transition: all 0.3s ease;
820
- }
821
-
822
- .toast.show {
823
- transform: translateX(-50%) translateY(0);
824
- opacity: 1;
825
- }
826
-
827
- .toast.success {
828
- border-color: var(--success);
829
- background: rgba(76, 175, 80, 0.1);
830
- }
831
-
832
- .toast.error {
833
- border-color: var(--error);
834
- background: rgba(244, 67, 54, 0.1);
835
- }
836
-
837
- /* Responsive Design */
838
- @media (min-width: 429px) {
839
- .app-container {
840
- margin: 20px auto;
841
- border-radius: 20px;
842
- overflow: hidden;
843
- }
844
-
845
- .bottom-nav {
846
- border-radius: 0 0 20px 20px;
847
- }
848
- }
849
-
850
- /* Loading Spinner */
851
- .spinner {
852
- width: 40px;
853
- height: 40px;
854
- border: 4px solid var(--border-color);
855
- border-top-color: var(--gold-color);
856
- border-radius: 50%;
857
- animation: spin 1s linear infinite;
858
- margin: 20px auto;
859
- }
860
-
861
- @keyframes spin {
862
- to { transform: rotate(360deg); }
863
- }
864
-
865
- /* Built with anycoder link */
866
- .built-with {
867
- text-align: center;
868
- padding: 10px;
869
- color: var(--text-dim);
870
- font-size: 0.75rem;
871
- }
872
-
873
- .built-with a {
874
- color: var(--gold-color);
875
- text-decoration: none;
876
- }
877
-
878
- .built-with a:hover {
879
- text-decoration: underline;
880
- }
881
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
882
  </head>
883
  <body>
884
- <div class="app-container">
885
- <!-- Header -->
886
- <div class="app-header">
887
- <div class="header-title">
888
- <div class="logo">F</div>
889
- <span>FLEN Wallet</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
890
  </div>
891
- <div class="header-actions">
892
- <button onclick="showNotifications()">
893
- <i class="fas fa-bell"></i>
894
- </button>
895
- <button onclick="showQRScanner()">
896
- <i class="fas fa-qrcode"></i>
897
- </button>
898
  </div>
 
 
 
 
 
 
899
  </div>
900
 
901
- <!-- Main Content -->
902
- <div class="main-content">
903
- <!-- Home Screen -->
904
- <div class="screen active" id="home-screen">
905
- <!-- Balance Card -->
906
- <div class="balance-card">
907
- <div class="balance-label">Total Balance</div>
908
- <div class="balance-amount">12,458.50 FLEN</div>
909
- <div class="balance-fiat">$2,491.70 USD</div>
910
- </div>
911
-
912
- <!-- Quick Actions -->
913
- <div class="quick-actions">
914
- <div class="quick-action-btn" onclick="convertToFiat()">
915
- <i class="fas fa-exchange-alt"></i>
916
- <span>Convert</span>
917
- </div>
918
- <div class="quick-action-btn" onclick="sendFLEN()">
919
- <i class="fas fa-paper-plane"></i>
920
- <span>Send</span>
921
- </div>
922
- <div class="quick-action-btn" onclick="receiveFLEN()">
923
- <i class="fas fa-download"></i>
924
- <span>Receive</span>
925
- </div>
926
- <div class="quick-action-btn" onclick="showCard()">
927
- <i class="fas fa-credit-card"></i>
928
- <span>Card</span>
929
- </div>
930
- </div>
931
 
932
- <!-- Earnings Breakdown -->
933
- <div class="earnings-section">
934
- <h2 class="section-title">Earnings Breakdown</h2>
935
- <div class="earnings-cards">
936
- <div class="earning-card">
937
- <div class="earning-icon">🏨</div>
938
- <div class="earning-label">Hospitality</div>
939
- <div class="earning-amount">4,250 FLEN</div>
940
- <div class="earning-change">+12.5%</div>
941
- </div>
942
- <div class="earning-card">
943
- <div class="earning-icon">🛡️</div>
944
- <div class="earning-label">Insurance</div>
945
- <div class="earning-amount">3,180 FLEN</div>
946
- <div class="earning-change">+8.2%</div>
947
- </div>
948
- <div class="earning-card">
949
- <div class="earning-icon">🛍️</div>
950
- <div class="earning-label">Retail</div>
951
- <div class="earning-amount">2,850 FLEN</div>
952
- <div class="earning-change">+15.3%</div>
953
- </div>
954
- <div class="earning-card">
955
- <div class="earning-icon">🔗</div>
956
- <div class="earning-label">Affiliates</div>
957
- <div class="earning-amount">2,178 FLEN</div>
958
- <div class="earning-change">+22.1%</div>
959
- </div>
960
- </div>
961
  </div>
962
-
963
- <!-- Recent Transactions -->
964
- <div class="transactions-section">
965
- <h2 class="section-title">Recent Transactions</h2>
966
- <div class="transaction-list">
967
- <div class="transaction-item">
968
- <div class="transaction-left">
969
- <div class="transaction-icon income">
970
- <i class="fas fa-arrow-down"></i>
971
- </div>
972
- <div class="transaction-details">
973
- <div class="transaction-title">Hotel Booking Reward</div>
974
- <div class="transaction-time">2 hours ago</div>
975
- </div>
976
- </div>
977
- <div class="transaction-amount positive">+350 FLEN</div>
978
- </div>
979
- <div class="transaction-item">
980
- <div class="transaction-left">
981
- <div class="transaction-icon income">
982
- <i class="fas fa-arrow-down"></i>
983
- </div>
984
- <div class="transaction-details">
985
- <div class="transaction-title">Insurance Claim Payout</div>
986
- <div class="transaction-time">5 hours ago</div>
987
- </div>
988
- </div>
989
- <div class="transaction-amount positive">+1,200 FLEN</div>
990
- </div>
991
- <div class="transaction-item">
992
- <div class="transaction-left">
993
- <div class="transaction-icon outcome">
994
- <i class="fas fa-arrow-up"></i>
995
- </div>
996
- <div class="transaction-details">
997
- <div class="transaction-title">Converted to USD</div>
998
- <div class="transaction-time">1 day ago</div>
999
- </div>
1000
- </div>
1001
- <div class="transaction-amount negative">-500 FLEN</div>
1002
- </div>
1003
- </div>
1004
  </div>
 
 
1005
  </div>
1006
-
1007
- <!-- Earn Screen -->
1008
- <div class="screen" id="earn-screen">
1009
- <div class="partner-categories">
1010
- <div class="category-tab active" onclick="filterPartners('all')">
1011
- <span>All</span>
1012
- </div>
1013
- <div class="category-tab" onclick="filterPartners('hospitality')">
1014
- <span>🏨 Hospitality</span>
1015
- </div>
1016
- <div class="category-tab" onclick="filterPartners('insurance')">
1017
- <span>🛡️ Insurance</span>
1018
- </div>
1019
- <div class="category-tab" onclick="filterPartners('retail')">
1020
- <span>🛍️ Retail</span>
1021
- </div>
1022
- <div class="category-tab" onclick="filterPartners('affiliates')">
1023
- <span>🔗 Affiliates</span>
1024
- </div>
1025
  </div>
1026
-
1027
- <div class="partner-list" id="partner-list">
1028
- <div class="partner-card" data-category="hospitality">
1029
- <div class="partner-info">
1030
- <div class="partner-logo">🏨</div>
1031
- <div class="partner-details">
1032
- <h3>Marriott Hotels</h3>
1033
- <p>2,450 points available</p>
1034
- </div>
1035
- </div>
1036
- <button class="convert-btn" onclick="convertPartner('Marriott')">Convert</button>
1037
- </div>
1038
- <div class="partner-card" data-category="retail">
1039
- <div class="partner-info">
1040
- <div class="partner-logo">🛍️</div>
1041
- <div class="partner-details">
1042
- <h3>Amazon Rewards</h3>
1043
- <p>$120 voucher available</p>
1044
- </div>
1045
- </div>
1046
- <button class="convert-btn" onclick="convertPartner('Amazon')">Convert</button>
1047
- </div>
1048
- <div class="partner-card" data-category="insurance">
1049
- <div class="partner-info">
1050
- <div class="partner-logo">🛡️</div>
1051
- <div class="partner-details">
1052
- <h3>Allstate Insurance</h3>
1053
- <p>Claim payout: $500</p>
1054
- </div>
1055
- </div>
1056
- <button class="convert-btn" onclick="convertPartner('Allstate')">Convert</button>
1057
- </div>
1058
- <div class="partner-card" data-category="affiliates">
1059
- <div class="partner-info">
1060
- <div class="partner-logo">🔗</div>
1061
- <div class="partner-details">
1062
- <h3>FLENCORP Network</h3>
1063
- <p>850 FLEN earned</p>
1064
- </div>
1065
- </div>
1066
- <button class="convert-btn" onclick="convertPartner('FLENCORP')">Claim</button>
1067
- </div>
1068
- <div class="partner-card" data-category="hospitality">
1069
- <div class="partner-info">
1070
- <div class="partner-logo">✈️</div>
1071
- <div class="partner-details">
1072
- <h3>Delta Airlines</h3>
1073
- <p>5,200 miles available</p>
1074
- </div>
1075
- </div>
1076
- <button class="convert-btn" onclick="convertPartner('Delta')">Convert</button>
1077
- </div>
1078
- <div class="partner-card" data-category="retail">
1079
- <div class="partner-info">
1080
- <div class="partner-logo">🍔</div>
1081
- <div class="partner-details">
1082
- <h3>McDonald's</h3>
1083
- <p>450 points available</p>
1084
- </div>
1085
- </div>
1086
- <button class="convert-btn" onclick="convertPartner('McDonalds')">Convert</button>
1087
- </div>
1088
  </div>
1089
-
1090
- <div style="padding: 20px; text-align: center;">
1091
- <button class="submit-btn" onclick="connectNewPartner()">
1092
- <i class="fas fa-plus"></i> Connect New Partner
1093
- </button>
 
 
1094
  </div>
 
 
 
 
 
 
1095
  </div>
 
 
1096
 
1097
- <!-- Wallet Screen -->
1098
- <div class="screen" id="wallet-screen">
1099
- <div class="wallet-header">
1100
- <div class="wallet-balance">12,458.50 FLEN</div>
1101
- <div class="balance-fiat">$2,491.70 USD</div>
1102
- <div class="wallet-actions">
1103
- <div class="wallet-action-btn" onclick="sendFLEN()">
1104
- <i class="fas fa-paper-plane"></i>
1105
- <span>Send</span>
1106
- </div>
1107
- <div class="wallet-action-btn" onclick="receiveFLEN()">
1108
- <i class="fas fa-download"></i>
1109
- <span>Receive</span>
1110
- </div>
1111
- <div class="wallet-action-btn" onclick="convertToFiat()">
1112
- <i class="fas fa-exchange-alt"></i>
1113
- <span>Convert</span>
1114
- </div>
1115
- <div class="wallet-action-btn" onclick="swapCrypto()">
1116
- <i class="fas fa-sync"></i>
1117
- <span>Swap</span>
1118
- </div>
1119
- </div>
1120
- </div>
1121
 
1122
- <div style="padding: 20px;">
1123
- <h2 class="section-title">Transaction History</h2>
1124
- <div class="transaction-list">
1125
- <div class="transaction-item">
1126
- <div class="transaction-left">
1127
- <div class="transaction-icon income">
1128
- <i class="fas fa-arrow-down"></i>
1129
- </div>
1130
- <div class="transaction-details">
1131
- <div class="transaction-title">Received from 0x3f5...2a1</div>
1132
- <div class="transaction-time">Dec 21, 2025 14:32</div>
1133
- </div>
1134
- </div>
1135
- <div class="transaction-amount positive">+1,000 FLEN</div>
1136
- </div>
1137
- <div class="transaction-item">
1138
- <div class="transaction-left">
1139
- <div class="transaction-icon income">
1140
- <i class="fas fa-arrow-down"></i>
1141
- </div>
1142
- <div class="transaction-details">
1143
- <div class="transaction-title">Marriott Points Conversion</div>
1144
- <div class="transaction-time">Dec 21, 2025 10:15</div>
1145
- </div>
1146
- </div>
1147
- <div class="transaction-amount positive">+2,450 FLEN</div>
1148
- </div>
1149
- <div class="transaction-item">
1150
- <div class="transaction-left">
1151
- <div class="transaction-icon outcome">
1152
- <i class="fas fa-arrow-up"></i>
1153
- </div>
1154
- <div class="transaction-details">
1155
- <div class="transaction-title">Sent to 0x8b2...9f4</div>
1156
- <div class="transaction-time">Dec 20, 2025 18:45</div>
1157
- </div>
1158
- </div>
1159
- <div class="transaction-amount negative">-500 FLEN</div>
1160
- </div>
1161
- <div class="transaction-item">
1162
- <div class="transaction-left">
1163
- <div class="transaction-icon outcome">
1164
- <i class="fas fa-exchange-alt"></i>
1165
- </div>
1166
- <div class="transaction-details">
1167
- <div class="transaction-title">Fiat Withdrawal</div>
1168
- <div class="transaction-time">Dec 20, 2025 09:30</div>
1169
- </div>
1170
- </div>
1171
- <div class="transaction-amount negative">-2,000 FLEN</div>
1172
- </div>
1173
- </div>
1174
  </div>
 
 
 
 
 
1175
  </div>
 
 
 
 
1176
 
1177
- <!-- Card Screen -->
1178
- <div class="screen" id="card-screen">
1179
- <div class="card-display" id="virtual-card
 
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>FLEN Wallet - Unified Loyalty Ecosystem</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-color: #4A148C;
11
+ --primary-light: #7B1FA2;
12
+ --primary-dark: #311B92;
13
+ --gold-color: #FFD700;
14
+ --gold-light: #FFECB3;
15
+ --bg-primary: #121212;
16
+ --bg-secondary: #1E1E1E;
17
+ --bg-card: #2A2A2A;
18
+ --text-primary: #FFFFFF;
19
+ --text-secondary: #B0B0B0;
20
+ --text-dim: #666666;
21
+ --success: #4CAF50;
22
+ --error: #F44336;
23
+ --warning: #FF9800;
24
+ --border-color: #333333;
25
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
26
+ --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
27
+ }
28
+
29
+ * {
30
+ margin: 0;
31
+ padding: 0;
32
+ box-sizing: border-box;
33
+ }
34
+
35
+ body {
36
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
37
+ background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
38
+ color: var(--text-primary);
39
+ min-height: 100vh;
40
+ overflow-x: hidden;
41
+ }
42
+
43
+ .app-container {
44
+ max-width: 428px;
45
+ margin: 0 auto;
46
+ min-height: 100vh;
47
+ position: relative;
48
+ background: var(--bg-primary);
49
+ box-shadow: var(--shadow-lg);
50
+ }
51
+
52
+ /* Header */
53
+ .app-header {
54
+ background: var(--primary-color);
55
+ padding: 15px 20px;
56
+ display: flex;
57
+ justify-content: space-between;
58
+ align-items: center;
59
+ position: sticky;
60
+ top: 0;
61
+ z-index: 100;
62
+ box-shadow: var(--shadow);
63
+ }
64
+
65
+ .header-title {
66
+ font-size: 1.3rem;
67
+ font-weight: bold;
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 10px;
71
+ }
72
+
73
+ .header-title .logo {
74
+ width: 32px;
75
+ height: 32px;
76
+ background: var(--gold-color);
77
+ border-radius: 50%;
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ font-weight: bold;
82
+ color: var(--primary-color);
83
+ }
84
+
85
+ .header-actions {
86
+ display: flex;
87
+ gap: 15px;
88
+ }
89
+
90
+ .header-actions button {
91
+ background: rgba(255, 255, 255, 0.2);
92
+ border: none;
93
+ color: white;
94
+ width: 36px;
95
+ height: 36px;
96
+ border-radius: 50%;
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ cursor: pointer;
101
+ transition: all 0.3s ease;
102
+ }
103
+
104
+ .header-actions button:hover {
105
+ background: rgba(255, 255, 255, 0.3);
106
+ transform: scale(1.1);
107
+ }
108
+
109
+ /* Main Content Area */
110
+ .main-content {
111
+ padding-bottom: 80px;
112
+ min-height: calc(100vh - 140px);
113
+ }
114
+
115
+ .screen {
116
+ display: none;
117
+ animation: fadeIn 0.3s ease;
118
+ }
119
+
120
+ .screen.active {
121
+ display: block;
122
+ }
123
+
124
+ @keyframes fadeIn {
125
+ from {
126
+ opacity: 0;
127
+ transform: translateY(20px);
128
+ }
129
+ to {
130
+ opacity: 1;
131
+ transform: translateY(0);
132
+ }
133
+ }
134
+
135
+ /* Home Dashboard */
136
+ .balance-section {
137
+ background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
138
+ padding: 30px 20px;
139
+ text-align: center;
140
+ }
141
+
142
+ .balance-label {
143
+ color: var(--text-secondary);
144
+ font-size: 0.9rem;
145
+ margin-bottom: 8px;
146
+ }
147
+
148
+ .balance-amount {
149
+ font-size: 2.5rem;
150
+ font-weight: bold;
151
+ color: var(--text-primary);
152
+ margin-bottom: 5px;
153
+ }
154
+
155
+ .balance-fiat {
156
+ color: var(--gold-color);
157
+ font-size: 1.1rem;
158
+ }
159
+
160
+ /* Quick Stats Cards - Horizontal Scrollable */
161
+ .stats-container {
162
+ padding: 20px;
163
+ overflow-x: auto;
164
+ scrollbar-width: none;
165
+ }
166
+
167
+ .stats-container::-webkit-scrollbar {
168
+ display: none;
169
+ }
170
+
171
+ .quick-stats {
172
+ display: flex;
173
+ gap: 15px;
174
+ min-width: max-content;
175
+ }
176
+
177
+ .stat-card {
178
+ background: var(--bg-card);
179
+ border: 1px solid var(--border-color);
180
+ border-radius: 15px;
181
+ padding: 20px;
182
+ min-width: 140px;
183
+ text-align: center;
184
+ transition: all 0.3s ease;
185
+ }
186
+
187
+ .stat-card:hover {
188
+ transform: translateY(-3px);
189
+ box-shadow: var(--shadow);
190
+ }
191
+
192
+ .stat-icon {
193
+ font-size: 2rem;
194
+ margin-bottom: 10px;
195
+ }
196
+
197
+ .stat-label {
198
+ color: var(--text-secondary);
199
+ font-size: 0.85rem;
200
+ margin-bottom: 5px;
201
+ }
202
+
203
+ .stat-value {
204
+ font-size: 1.2rem;
205
+ font-weight: bold;
206
+ color: var(--gold-color);
207
+ }
208
+
209
+ .affiliates-card {
210
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
211
+ border: none;
212
+ }
213
+
214
+ .affiliates-card .stat-label,
215
+ .affiliates-card .stat-value {
216
+ color: white;
217
+ }
218
+
219
+ /* Quick Actions Grid */
220
+ .quick-actions {
221
+ display: grid;
222
+ grid-template-columns: repeat(2, 1fr);
223
+ gap: 15px;
224
+ margin: 0 20px 20px;
225
+ }
226
+
227
+ .quick-action-btn {
228
+ background: var(--bg-card);
229
+ border: 1px solid var(--border-color);
230
+ border-radius: 15px;
231
+ padding: 20px;
232
+ display: flex;
233
+ flex-direction: column;
234
+ align-items: center;
235
+ gap: 10px;
236
+ cursor: pointer;
237
+ transition: all 0.3s ease;
238
+ }
239
+
240
+ .quick-action-btn:hover {
241
+ background: var(--primary-color);
242
+ transform: translateY(-3px);
243
+ box-shadow: var(--shadow);
244
+ }
245
+
246
+ .quick-action-btn i {
247
+ font-size: 1.8rem;
248
+ color: var(--gold-color);
249
+ }
250
+
251
+ .quick-action-btn span {
252
+ font-size: 0.85rem;
253
+ color: var(--text-secondary);
254
+ }
255
+
256
+ /* Recent Activity */
257
+ .activity-section {
258
+ margin: 0 20px 20px;
259
+ }
260
+
261
+ .section-title {
262
+ font-size: 1.1rem;
263
+ margin-bottom: 15px;
264
+ color: var(--text-primary);
265
+ }
266
+
267
+ .activity-list {
268
+ background: var(--bg-card);
269
+ border-radius: 15px;
270
+ overflow: hidden;
271
+ }
272
+
273
+ .activity-item {
274
+ padding: 15px;
275
+ border-bottom: 1px solid var(--border-color);
276
+ display: flex;
277
+ justify-content: space-between;
278
+ align-items: center;
279
+ transition: background 0.3s ease;
280
+ }
281
+
282
+ .activity-item:hover {
283
+ background: var(--bg-secondary);
284
+ }
285
+
286
+ .activity-item:last-child {
287
+ border-bottom: none;
288
+ }
289
+
290
+ .activity-left {
291
+ display: flex;
292
+ align-items: center;
293
+ gap: 15px;
294
+ }
295
+
296
+ .activity-icon {
297
+ width: 40px;
298
+ height: 40px;
299
+ border-radius: 50%;
300
+ display: flex;
301
+ align-items: center;
302
+ justify-content: center;
303
+ font-size: 1.2rem;
304
+ }
305
+
306
+ .activity-icon.positive {
307
+ background: rgba(76, 175, 80, 0.2);
308
+ color: var(--success);
309
+ }
310
+
311
+ .activity-icon.negative {
312
+ background: rgba(244, 67, 54, 0.2);
313
+ color: var(--error);
314
+ }
315
+
316
+ .activity-details {
317
+ display: flex;
318
+ flex-direction: column;
319
+ }
320
+
321
+ .activity-title {
322
+ font-size: 0.95rem;
323
+ color: var(--text-primary);
324
+ }
325
+
326
+ .activity-time {
327
+ font-size: 0.75rem;
328
+ color: var(--text-dim);
329
+ }
330
+
331
+ .activity-amount {
332
+ font-weight: bold;
333
+ font-size: 0.95rem;
334
+ }
335
+
336
+ .activity-amount.positive {
337
+ color: var(--success);
338
+ }
339
+
340
+ .activity-amount.negative {
341
+ color: var(--error);
342
+ }
343
+
344
+ /* Banner */
345
+ .promo-banner {
346
+ background: linear-gradient(135deg, var(--gold-color), #FFA500);
347
+ margin: 0 20px;
348
+ padding: 15px;
349
+ border-radius: 15px;
350
+ text-align: center;
351
+ color: var(--primary-dark);
352
+ font-weight: 600;
353
+ box-shadow: var(--shadow);
354
+ }
355
+
356
+ /* Earn Tab */
357
+ .partner-categories {
358
+ display: flex;
359
+ gap: 8px;
360
+ padding: 20px;
361
+ margin-bottom: 10px;
362
+ overflow-x: auto;
363
+ scrollbar-width: none;
364
+ }
365
+
366
+ .partner-categories::-webkit-scrollbar {
367
+ display: none;
368
+ }
369
+
370
+ .category-tab {
371
+ background: var(--bg-card);
372
+ border: 1px solid var(--border-color);
373
+ border-radius: 25px;
374
+ padding: 8px 16px;
375
+ white-space: nowrap;
376
+ cursor: pointer;
377
+ transition: all 0.3s ease;
378
+ display: flex;
379
+ align-items: center;
380
+ gap: 6px;
381
+ font-size: 0.85rem;
382
+ }
383
+
384
+ .category-tab.active {
385
+ background: var(--primary-color);
386
+ border-color: var(--primary-color);
387
+ }
388
+
389
+ /* Partner Cards */
390
+ .partner-list {
391
+ padding: 0 20px;
392
+ }
393
+
394
+ .partner-card {
395
+ background: var(--bg-card);
396
+ border: 1px solid var(--border-color);
397
+ border-radius: 15px;
398
+ padding: 20px;
399
+ margin-bottom: 15px;
400
+ transition: all 0.3s ease;
401
+ cursor: pointer;
402
+ }
403
+
404
+ .partner-card:hover {
405
+ transform: translateX(5px);
406
+ box-shadow: var(--shadow);
407
+ }
408
+
409
+ .partner-header {
410
+ display: flex;
411
+ justify-content: space-between;
412
+ align-items: flex-start;
413
+ margin-bottom: 15px;
414
+ }
415
+
416
+ .partner-info {
417
+ display: flex;
418
+ align-items: center;
419
+ gap: 12px;
420
+ }
421
+
422
+ .partner-logo {
423
+ width: 45px;
424
+ height: 45px;
425
+ border-radius: 10px;
426
+ display: flex;
427
+ align-items: center;
428
+ justify-content: center;
429
+ font-size: 1.5rem;
430
+ background: var(--bg-secondary);
431
+ }
432
+
433
+ .partner-details h3 {
434
+ font-size: 1rem;
435
+ margin-bottom: 3px;
436
+ }
437
+
438
+ .partner-details p {
439
+ font-size: 0.85rem;
440
+ color: var(--text-secondary);
441
+ }
442
+
443
+ .partner-status {
444
+ background: var(--success);
445
+ color: white;
446
+ padding: 4px 10px;
447
+ border-radius: 12px;
448
+ font-size: 0.75rem;
449
+ font-weight: 600;
450
+ }
451
+
452
+ .partner-status.pending {
453
+ background: var(--warning);
454
+ }
455
+
456
+ .progress-bar {
457
+ background: var(--bg-secondary);
458
+ height: 8px;
459
+ border-radius: 4px;
460
+ margin-bottom: 15px;
461
+ overflow: hidden;
462
+ }
463
+
464
+ .progress-fill {
465
+ height: 100%;
466
+ background: linear-gradient(90deg, var(--gold-color), var(--primary-color));
467
+ border-radius: 4px;
468
+ transition: width 0.3s ease;
469
+ }
470
+
471
+ .convert-btn {
472
+ width: 100%;
473
+ background: var(--primary-color);
474
+ color: white;
475
+ border: none;
476
+ border-radius: 10px;
477
+ padding: 12px;
478
+ cursor: pointer;
479
+ transition: all 0.3s ease;
480
+ font-weight: 600;
481
+ }
482
+
483
+ .convert-btn:hover {
484
+ background: var(--primary-light);
485
+ transform: scale(1.02);
486
+ }
487
+
488
+ /* Insurance Claims */
489
+ .claim-card {
490
+ background: var(--bg-card);
491
+ border: 1px solid var(--border-color);
492
+ border-radius: 15px;
493
+ padding: 20px;
494
+ margin-bottom: 15px;
495
+ }
496
+
497
+ .claim-header {
498
+ display: flex;
499
+ align-items: center;
500
+ gap: 10px;
501
+ margin-bottom: 15px;
502
+ }
503
+
504
+ .claim-icon {
505
+ width: 40px;
506
+ height: 40px;
507
+ background: var(--warning);
508
+ border-radius: 50%;
509
+ display: flex;
510
+ align-items: center;
511
+ justify-content: center;
512
+ font-size: 1.2rem;
513
+ }
514
+
515
+ .claim-details {
516
+ flex: 1;
517
+ }
518
+
519
+ .claim-number {
520
+ font-weight: 600;
521
+ margin-bottom: 3px;
522
+ }
523
+
524
+ .claim-type {
525
+ font-size: 0.85rem;
526
+ color: var(--text-secondary);
527
+ }
528
+
529
+ .claim-amount {
530
+ font-size: 1.2rem;
531
+ font-weight: bold;
532
+ color: var(--gold-color);
533
+ margin-bottom: 15px;
534
+ }
535
+
536
+ .payout-options {
537
+ margin-bottom: 15px;
538
+ }
539
+
540
+ .payout-option {
541
+ display: flex;
542
+ align-items: center;
543
+ gap: 10px;
544
+ margin-bottom: 10px;
545
+ cursor: pointer;
546
+ }
547
+
548
+ .payout-option input[type="radio"] {
549
+ width: 18px;
550
+ height: 18px;
551
+ accent-color: var(--primary-color);
552
+ }
553
+
554
+ /* Wallet Tab */
555
+ .wallet-header {
556
+ background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
557
+ padding: 30px 20px;
558
+ text-align: center;
559
+ }
560
+
561
+ .wallet-balance {
562
+ font-size: 2rem;
563
+ font-weight: bold;
564
+ margin-bottom: 5px;
565
+ }
566
+
567
+ .wallet-fiat {
568
+ color: var(--gold-color);
569
+ font-size: 1rem;
570
+ }
571
+
572
+ /* Pie Chart */
573
+ .pie-chart-container {
574
+ margin: 20px;
575
+ background: var(--bg-card);
576
+ border-radius: 15px;
577
+ padding: 20px;
578
+ }
579
+
580
+ .chart-title {
581
+ font-size: 1rem;
582
+ margin-bottom: 15px;
583
+ }
584
+
585
+ .chart-legend {
586
+ display: flex;
587
+ flex-direction: column;
588
+ gap: 10px;
589
+ }
590
+
591
+ .legend-item {
592
+ display: flex;
593
+ align-items: center;
594
+ justify-content: space-between;
595
+ }
596
+
597
+ .legend-left {
598
+ display: flex;
599
+ align-items: center;
600
+ gap: 10px;
601
+ }
602
+
603
+ .legend-color {
604
+ width: 12px;
605
+ height: 12px;
606
+ border-radius: 2px;
607
+ }
608
+
609
+ .legend-bar {
610
+ flex: 1;
611
+ height: 8px;
612
+ background: var(--bg-secondary);
613
+ border-radius: 4px;
614
+ overflow: hidden;
615
+ margin-left: 10px;
616
+ }
617
+
618
+ .legend-fill {
619
+ height: 100%;
620
+ border-radius: 4px;
621
+ }
622
+
623
+ /* Transaction Filter */
624
+ .transaction-filter {
625
+ margin: 0 20px 15px;
626
+ display: flex;
627
+ justify-content: space-between;
628
+ align-items: center;
629
+ }
630
+
631
+ .filter-btn {
632
+ background: var(--bg-card);
633
+ border: 1px solid var(--border-color);
634
+ border-radius: 8px;
635
+ padding: 8px 12px;
636
+ color: var(--text-secondary);
637
+ font-size: 0.85rem;
638
+ cursor: pointer;
639
+ display: flex;
640
+ align-items: center;
641
+ gap: 5px;
642
+ }
643
+
644
+ /* Card Tab */
645
+ .card-section {
646
+ margin: 20px;
647
+ }
648
+
649
+ .virtual-card {
650
+ background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
651
+ border-radius: 20px;
652
+ padding: 30px;
653
+ position: relative;
654
+ min-height: 200px;
655
+ box-shadow: var(--shadow-lg);
656
+ margin-bottom: 20px;
657
+ }
658
+
659
+ .card-brand {
660
+ color: white;
661
+ font-size: 0.9rem;
662
+ opacity: 0.9;
663
+ margin-bottom: 20px;
664
+ }
665
+
666
+ .card-number {
667
+ color: white;
668
+ font-size: 1.4rem;
669
+ letter-spacing: 3px;
670
+ margin-bottom: 30px;
671
+ font-family: 'Courier New', monospace;
672
+ }
673
+
674
+ .card-info {
675
+ display: flex;
676
+ justify-content: space-between;
677
+ color: white;
678
+ }
679
+
680
+ .card-info div {
681
+ display: flex;
682
+ flex-direction: column;
683
+ }
684
+
685
+ .card-info-label {
686
+ font-size: 0.75rem;
687
+ opacity: 0.7;
688
+ margin-bottom: 3px;
689
+ }
690
+
691
+ .card-info-value {
692
+ font-size: 0.9rem;
693
+ }
694
+
695
+ .card-status {
696
+ display: flex;
697
+ justify-content: space-between;
698
+ align-items: center;
699
+ background: var(--bg-card);
700
+ border: 1px solid var(--border-color);
701
+ border-radius: 10px;
702
+ padding: 15px;
703
+ margin-bottom: 20px;
704
+ }
705
+
706
+ .status-badge {
707
+ background: var(--success);
708
+ color: white;
709
+ padding: 4px 10px;
710
+ border-radius: 12px;
711
+ font-size: 0.75rem;
712
+ font-weight: 600;
713
+ }
714
+
715
+ .tier-info {
716
+ color: var(--gold-color);
717
+ font-size: 0.85rem;
718
+ }
719
+
720
+ /* Card Controls */
721
+ .card-controls {
722
+ margin-bottom: 20px;
723
+ }
724
+
725
+ .control-item {
726
+ background: var(--bg-card);
727
+ border: 1px solid var(--border-color);
728
+ border-radius: 10px;
729
+ padding: 15px;
730
+ margin-bottom: 10px;
731
+ display: flex;
732
+ justify-content: space-between;
733
+ align-items: center;
734
+ }
735
+
736
+ .control-label {
737
+ display: flex;
738
+ align-items: center;
739
+ gap: 10px;
740
+ }
741
+
742
+ .control-label i {
743
+ color: var(--gold-color);
744
+ }
745
+
746
+ /* Toggle Switch */
747
+ .toggle-switch {
748
+ position: relative;
749
+ width: 50px;
750
+ height: 26px;
751
+ }
752
+
753
+ .toggle-switch input {
754
+ opacity: 0;
755
+ width: 0;
756
+ height: 0;
757
+ }
758
+
759
+ .toggle-slider {
760
+ position: absolute;
761
+ cursor: pointer;
762
+ top: 0;
763
+ left: 0;
764
+ right: 0;
765
+ bottom: 0;
766
+ background-color: var(--bg-secondary);
767
+ transition: .4s;
768
+ border-radius: 34px;
769
+ }
770
+
771
+ .toggle-slider:before {
772
+ position: absolute;
773
+ content: "";
774
+ height: 18px;
775
+ width: 18px;
776
+ left: 4px;
777
+ bottom: 4px;
778
+ background-color: white;
779
+ transition: .4s;
780
+ border-radius: 50%;
781
+ }
782
+
783
+ input:checked + .toggle-slider {
784
+ background-color: var(--primary-color);
785
+ }
786
+
787
+ input:checked + .toggle-slider:before {
788
+ transform: translateX(24px);
789
+ }
790
+
791
+ /* Order Physical Card Button */
792
+ .order-card-btn {
793
+ width: 100%;
794
+ background: linear-gradient(135deg, var(--gold-color), #FFA500);
795
+ color: var(--primary-dark);
796
+ border: none;
797
+ border-radius: 10px;
798
+ padding: 15px;
799
+ font-weight: bold;
800
+ cursor: pointer;
801
+ transition: all 0.3s ease;
802
+ }
803
+
804
+ .order-card-btn:hover {
805
+ transform: scale(1.02);
806
+ box-shadow: var(--shadow);
807
+ }
808
+
809
+ /* Profile Tab */
810
+ .profile-section {
811
+ padding: 20px;
812
+ }
813
+
814
+ .profile-header {
815
+ display: flex;
816
+ align-items: center;
817
+ gap: 20px;
818
+ margin-bottom: 30px;
819
+ background: var(--bg-card);
820
+ border-radius: 15px;
821
+ padding: 20px;
822
+ }
823
+
824
+ .profile-avatar {
825
+ width: 70px;
826
+ height: 70px;
827
+ border-radius: 50%;
828
+ background: linear-gradient(135deg, var(--primary-color), var(--gold-color));
829
+ display: flex;
830
+ align-items: center;
831
+ justify-content: center;
832
+ font-size: 1.8rem;
833
+ font-weight: bold;
834
+ }
835
+
836
+ .profile-info h2 {
837
+ margin-bottom: 5px;
838
+ }
839
+
840
+ .profile-info p {
841
+ color: var(--text-secondary);
842
+ font-size: 0.9rem;
843
+ margin-bottom: 5px;
844
+ }
845
+
846
+ .kyc-status {
847
+ display: flex;
848
+ align-items: center;
849
+ gap: 5px;
850
+ color: var(--success);
851
+ font-size: 0.85rem;
852
+ }
853
+
854
+ .linked-partners {
855
+ margin-bottom: 20px;
856
+ }
857
+
858
+ .partner-item {
859
+ background: var(--bg-card);
860
+ border: 1px solid var(--border-color);
861
+ border-radius: 10px;
862
+ padding: 12px 15px;
863
+ margin-bottom: 10px;
864
+ display: flex;
865
+ justify-content: space-between;
866
+ align-items: center;
867
+ }
868
+
869
+ .partner-item-icon {
870
+ margin-right: 10px;
871
+ }
872
+
873
+ .partner-item-status {
874
+ color: var(--success);
875
+ font-size: 0.85rem;
876
+ }
877
+
878
+ .add-partner-btn {
879
+ width: 100%;
880
+ background: var(--bg-card);
881
+ border: 2px dashed var(--border-color);
882
+ border-radius: 10px;
883
+ padding: 12px;
884
+ color: var(--text-secondary);
885
+ cursor: pointer;
886
+ transition: all 0.3s ease;
887
+ }
888
+
889
+ .add-partner-btn:hover {
890
+ border-color: var(--primary-color);
891
+ color: var(--primary-color);
892
+ }
893
+
894
+ .settings-section {
895
+ background: var(--bg-card);
896
+ border-radius: 15px;
897
+ overflow: hidden;
898
+ margin-bottom: 20px;
899
+ }
900
+
901
+ .settings-group {
902
+ padding: 15px;
903
+ border-bottom: 1px solid var(--border-color);
904
+ }
905
+
906
+ .settings-group:last-child {
907
+ border-bottom: none;
908
+ }
909
+
910
+ .settings-title {
911
+ font-size: 0.9rem;
912
+ color: var(--gold-color);
913
+ margin-bottom: 10px;
914
+ font-weight: 600;
915
+ }
916
+
917
+ .setting-item {
918
+ display: flex;
919
+ justify-content: space-between;
920
+ align-items: center;
921
+ padding: 8px 0;
922
+ }
923
+
924
+ .setting-label {
925
+ display: flex;
926
+ align-items: center;
927
+ gap: 10px;
928
+ }
929
+
930
+ .setting-label i {
931
+ width: 20px;
932
+ color: var(--text-secondary);
933
+ }
934
+
935
+ .setting-value {
936
+ color: var(--text-secondary);
937
+ font-size: 0.85rem;
938
+ }
939
+
940
+ /* Bottom Navigation */
941
+ .bottom-nav {
942
+ position: fixed;
943
+ bottom: 0;
944
+ left: 50%;
945
+ transform: translateX(-50%);
946
+ width: 100%;
947
+ max-width: 428px;
948
+ background: var(--bg-secondary);
949
+ border-top: 1px solid var(--border-color);
950
+ display: flex;
951
+ justify-content: space-around;
952
+ padding: 8px 0;
953
+ z-index: 100;
954
+ }
955
+
956
+ .nav-item {
957
+ flex: 1;
958
+ display: flex;
959
+ flex-direction: column;
960
+ align-items: center;
961
+ gap: 4px;
962
+ padding: 5px;
963
+ cursor: pointer;
964
+ transition: all 0.3s ease;
965
+ color: var(--text-dim);
966
+ }
967
+
968
+ .nav-item.active {
969
+ color: var(--gold-color);
970
+ }
971
+
972
+ .nav-item i {
973
+ font-size: 1.2rem;
974
+ }
975
+
976
+ .nav-item span {
977
+ font-size: 0.7rem;
978
+ }
979
+
980
+ .nav-item:hover {
981
+ transform: translateY(-2px);
982
+ }
983
+
984
+ /* Modal */
985
+ .modal {
986
+ display: none;
987
+ position: fixed;
988
+ top: 0;
989
+ left: 0;
990
+ width: 100%;
991
+ height: 100%;
992
+ background: rgba(0, 0, 0, 0.8);
993
+ z-index: 1000;
994
+ animation: fadeIn 0.3s ease;
995
+ }
996
+
997
+ .modal.active {
998
+ display: flex;
999
+ align-items: center;
1000
+ justify-content: center;
1001
+ }
1002
+
1003
+ .modal-content {
1004
+ background: var(--bg-card);
1005
+ border-radius: 20px;
1006
+ padding: 30px;
1007
+ max-width: 400px;
1008
+ width: 90%;
1009
+ max-height: 80vh;
1010
+ overflow-y: auto;
1011
+ animation: slideUp 0.3s ease;
1012
+ }
1013
+
1014
+ @keyframes slideUp {
1015
+ from {
1016
+ transform: translateY(50px);
1017
+ opacity: 0;
1018
+ }
1019
+ to {
1020
+ transform: translateY(0);
1021
+ opacity: 1;
1022
+ }
1023
+ }
1024
+
1025
+ .modal-header {
1026
+ display: flex;
1027
+ justify-content: space-between;
1028
+ align-items: center;
1029
+ margin-bottom: 20px;
1030
+ }
1031
+
1032
+ .modal-close {
1033
+ background: none;
1034
+ border: none;
1035
+ color: var(--text-secondary);
1036
+ font-size: 1.5rem;
1037
+ cursor: pointer;
1038
+ }
1039
+
1040
+ .form-group {
1041
+ margin-bottom: 20px;
1042
+ }
1043
+
1044
+ .form-group label {
1045
+ display: block;
1046
+ margin-bottom: 8px;
1047
+ color: var(--text-secondary);
1048
+ font-size: 0.9rem;
1049
+ }
1050
+
1051
+ .form-group input,
1052
+ .form-group select {
1053
+ width: 100%;
1054
+ padding: 12px;
1055
+ background: var(--bg-secondary);
1056
+ border: 1px solid var(--border-color);
1057
+ border-radius: 10px;
1058
+ color: var(--text-primary);
1059
+ font-size: 1rem;
1060
+ }
1061
+
1062
+ .form-group input:focus,
1063
+ .form-group select:focus {
1064
+ outline: none;
1065
+ border-color: var(--primary-color);
1066
+ }
1067
+
1068
+ .submit-btn {
1069
+ width: 100%;
1070
+ padding: 15px;
1071
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
1072
+ color: white;
1073
+ border: none;
1074
+ border-radius: 10px;
1075
+ font-size: 1rem;
1076
+ font-weight: 600;
1077
+ cursor: pointer;
1078
+ transition: all 0.3s ease;
1079
+ }
1080
+
1081
+ .submit-btn:hover {
1082
+ transform: translateY(-2px);
1083
+ box-shadow: var(--shadow);
1084
+ }
1085
+
1086
+ /* Toast Notification */
1087
+ .toast {
1088
+ position: fixed;
1089
+ top: 80px;
1090
+ left: 50%;
1091
+ transform: translateX(-50%) translateY(-100px);
1092
+ background: var(--bg-card);
1093
+ border: 1px solid var(--border-color);
1094
+ padding: 15px 20px;
1095
+ border-radius: 10px;
1096
+ box-shadow: var(--shadow-lg);
1097
+ z-index: 2000;
1098
+ opacity: 0;
1099
+ transition: all 0.3s ease;
1100
+ }
1101
+
1102
+ .toast.show {
1103
+ transform: translateX(-50%) translateY(0);
1104
+ opacity: 1;
1105
+ }
1106
+
1107
+ .toast.success {
1108
+ border-color: var(--success);
1109
+ background: rgba(76, 175, 80, 0.1);
1110
+ }
1111
+
1112
+ .toast.error {
1113
+ border-color: var(--error);
1114
+ background: rgba(244, 67, 54, 0.1);
1115
+ }
1116
+
1117
+ /* Built with anycoder link */
1118
+ .built-with {
1119
+ text-align: center;
1120
+ padding: 10px;
1121
+ color: var(--text-dim);
1122
+ font-size: 0.75rem;
1123
+ background: var(--bg-secondary);
1124
+ }
1125
+
1126
+ .built-with a {
1127
+ color: var(--gold-color);
1128
+ text-decoration: none;
1129
+ }
1130
+
1131
+ .built-with a:hover {
1132
+ text-decoration: underline;
1133
+ }
1134
+
1135
+ /* Responsive Design */
1136
+ @media (min-width: 429px) {
1137
+ .app-container {
1138
+ margin: 20px auto;
1139
+ border-radius: 20px;
1140
+ overflow: hidden;
1141
+ }
1142
+ .bottom-nav {
1143
+ border-radius: 0 0 20px 20px;
1144
+ }
1145
+ }
1146
+ </style>
1147
  </head>
1148
  <body>
1149
+ <div class="app-container">
1150
+ <!-- Header -->
1151
+ <div class="app-header">
1152
+ <div class="header-title">
1153
+ <div class="logo">F</div>
1154
+ <span>FLEN Wallet</span>
1155
+ </div>
1156
+ <div class="header-actions">
1157
+ <button onclick="showNotifications()">
1158
+ <i class="fas fa-bell"></i>
1159
+ </button>
1160
+ <button onclick="showQRScanner()">
1161
+ <i class="fas fa-qrcode"></i>
1162
+ </button>
1163
+ </div>
1164
+ </div>
1165
+
1166
+ <!-- Main Content -->
1167
+ <div class="main-content">
1168
+ <!-- Home Screen -->
1169
+ <div class="screen active" id="home-screen">
1170
+ <!-- Balance Section -->
1171
+ <div class="balance-section">
1172
+ <div class="balance-label">Your FLEN Balance</div>
1173
+ <div class="balance-amount">12,450.00 FLEN</div>
1174
+ <div class="balance-fiat">≈ $1,245.00 USD</div>
1175
+ </div>
1176
+
1177
+ <!-- Quick Stats - Horizontal Scrollable -->
1178
+ <div class="stats-container">
1179
+ <div class="quick-stats">
1180
+ <div class="stat-card">
1181
+ <div class="stat-icon">🏨</div>
1182
+ <div class="stat-label">Hospitality</div>
1183
+ <div class="stat-value">+2,300</div>
1184
+ </div>
1185
+ <div class="stat-card">
1186
+ <div class="stat-icon">🛡️</div>
1187
+ <div class="stat-label">Insurance</div>
1188
+ <div class="stat-value">+5,000</div>
1189
  </div>
1190
+ <div class="stat-card">
1191
+ <div class="stat-icon">🛍️</div>
1192
+ <div class="stat-label">Retail</div>
1193
+ <div class="stat-value">+1,200</div>
 
 
 
1194
  </div>
1195
+ <div class="stat-card affiliates-card">
1196
+ <div class="stat-icon">🔗</div>
1197
+ <div class="stat-label">Affiliates</div>
1198
+ <div class="stat-value">+3,950</div>
1199
+ </div>
1200
+ </div>
1201
  </div>
1202
 
1203
+ <!-- Quick Actions Grid -->
1204
+ <div class="quick-actions">
1205
+ <div class="quick-action-btn" onclick="convertToFiat()">
1206
+ <i class="fas fa-exchange-alt"></i>
1207
+ <span>Convert to Fiat</span>
1208
+ </div>
1209
+ <div class="quick-action-btn" onclick="swapCrypto()">
1210
+ <i class="fas fa-sync"></i>
1211
+ <span>Exchange Crypto</span>
1212
+ </div>
1213
+ <div class="quick-action-btn" onclick="showCard()">
1214
+ <i class="fas fa-credit-card"></i>
1215
+ <span>Top-up Card</span>
1216
+ </div>
1217
+ <div class="quick-action-btn" onclick="showQRScanner()">
1218
+ <i class="fas fa-qrcode"></i>
1219
+ <span>Scan QR (Redeem)</span>
1220
+ </div>
1221
+ </div>
 
 
 
 
 
 
 
 
 
 
 
1222
 
1223
+ <!-- Recent Activity -->
1224
+ <div class="activity-section">
1225
+ <h2 class="section-title">Recent Activity</h2>
1226
+ <div class="activity-list">
1227
+ <div class="activity-item">
1228
+ <div class="activity-left">
1229
+ <div class="activity-icon positive">
1230
+ <i class="fas fa-plus"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1231
  </div>
1232
+ <div class="activity-details">
1233
+ <div class="activity-title">Retail voucher</div>
1234
+ <div class="activity-time">Today</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1235
  </div>
1236
+ </div>
1237
+ <div class="activity-amount positive">+500 FLEN</div>
1238
  </div>
1239
+ <div class="activity-item">
1240
+ <div class="activity-left">
1241
+ <div class="activity-icon positive">
1242
+ <i class="fas fa-plus"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1243
  </div>
1244
+ <div class="activity-details">
1245
+ <div class="activity-title">Insurance claim</div>
1246
+ <div class="activity-time">Yesterday</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1247
  </div>
1248
+ </div>
1249
+ <div class="activity-amount positive">+5,000 FLEN</div>
1250
+ </div>
1251
+ <div class="activity-item">
1252
+ <div class="activity-left">
1253
+ <div class="activity-icon negative">
1254
+ <i class="fas fa-minus"></i>
1255
  </div>
1256
+ <div class="activity-details">
1257
+ <div class="activity-title">Starbucks (Card)</div>
1258
+ <div class="activity-time">Dec 20</div>
1259
+ </div>
1260
+ </div>
1261
+ <div class="activity-amount negative">-200 FLEN</div>
1262
  </div>
1263
+ </div>
1264
+ </div>
1265
 
1266
+ <!-- Promo Banner -->
1267
+ <div class="promo-banner">
1268
+ Earn 15% extra FLEN at Lux Hotels!
1269
+ </div>
1270
+ </div>
1271
+
1272
+ <!-- Earn Screen -->
1273
+ <div class="screen" id="earn-screen">
1274
+ <div class="partner-categories">
1275
+ <div class="category-tab active" onclick="filterPartners('all')">
1276
+ <span>🏨 Hospitality</span>
1277
+ </div>
1278
+ <div class="category-tab" onclick="filterPartners('insurance')">
1279
+ <span>🛡️ Insurance</span>
1280
+ </div>
1281
+ <div class="category-tab" onclick="filterPartners('retail')">
1282
+ <span>🛍️ Retail</span>
1283
+ </div>
1284
+ <div class="category-tab" onclick="filterPartners('affiliates')">
1285
+ <span>🔗 Affiliates</span>
1286
+ </div>
1287
+ </div>
 
 
1288
 
1289
+ <div class="partner-list" id="partner-list">
1290
+ <button class="add-partner-btn" onclick="connectNewPartner()">
1291
+ <i class="fas fa-plus"></i> Connect New Partner
1292
+ </button>
1293
+
1294
+ <!-- Hospitality Partner -->
1295
+ <div class="partner-card" data-category="hospitality">
1296
+ <div class="partner-header">
1297
+ <div class="partner-info">
1298
+ <div class="partner-logo">🏨</div>
1299
+ <div class="partner-details">
1300
+ <h3>Grand Hotel Chain</h3>
1301
+ <p>Available: 8,500 points (~850 FLEN)</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1302
  </div>
1303
+ </div>
1304
+ <span class="partner-status">Connected</span>
1305
+ </div>
1306
+ <div class="progress-bar">
1307
+ <div class="progress-fill" style="width: 80%"></div>
1308
  </div>
1309
+ <button class="convert-btn" onclick="convertPartner('Grand Hotel')">
1310
+ CONVERT TO FLEN
1311
+ </button>
1312
+ </div>
1313
 
1314
+ <div class="partner-card"