Hugging Face's logo

Spaces:
flen-crypto
/
anycoder-2439c11a
Running

App Files Community
flen-crypto commited on
Commit
c8d93eb
·
verified ·
1 Parent(s): b13b056

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1135 -19
index.html CHANGED
@@ -1,19 +1,1135 @@
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>FLEN Wallet - Unified Loyalty Ecosystem</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ :root {
15
+ --primary-purple: #4A148C;
16
+ --primary-purple-light: #6A1B9A;
17
+ --primary-purple-dark: #311B92;
18
+ --accent-gold: #FFD700;
19
+ --accent-gold-dark: #FFC107;
20
+ --surface-dark: #1A1A2E;
21
+ --surface-light: #16213E;
22
+ --text-primary: #FFFFFF;
23
+ --text-secondary: #B0B0B0;
24
+ --success: #4CAF50;
25
+ --warning: #FF9800;
26
+ --error: #F44336;
27
+ --card-bg: rgba(255, 255, 255, 0.05);
28
+ --border-color: rgba(255, 255, 255, 0.1);
29
+ }
30
+
31
+ body {
32
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
33
+ background: linear-gradient(135deg, var(--surface-dark) 0%, var(--surface-light) 100%);
34
+ color: var(--text-primary);
35
+ min-height: 100vh;
36
+ display: flex;
37
+ flex-direction: column;
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ .app-container {
42
+ max-width: 430px;
43
+ margin: 0 auto;
44
+ width: 100%;
45
+ min-height: 100vh;
46
+ display: flex;
47
+ flex-direction: column;
48
+ position: relative;
49
+ background: var(--surface-dark);
50
+ }
51
+
52
+ /* Header Styles */
53
+ .header {
54
+ padding: 20px;
55
+ background: linear-gradient(180deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
56
+ display: flex;
57
+ justify-content: space-between;
58
+ align-items: center;
59
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
60
+ position: sticky;
61
+ top: 0;
62
+ z-index: 100;
63
+ }
64
+
65
+ .header-title {
66
+ font-size: 20px;
67
+ font-weight: 700;
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 15px;
71
+ }
72
+
73
+ .header-icons {
74
+ display: flex;
75
+ gap: 15px;
76
+ align-items: center;
77
+ }
78
+
79
+ .icon-btn {
80
+ background: none;
81
+ border: none;
82
+ color: var(--text-primary);
83
+ font-size: 20px;
84
+ cursor: pointer;
85
+ transition: transform 0.2s;
86
+ }
87
+
88
+ .icon-btn:hover {
89
+ transform: scale(1.1);
90
+ }
91
+
92
+ /* Main Content */
93
+ .main-content {
94
+ flex: 1;
95
+ padding-bottom: 80px;
96
+ overflow-y: auto;
97
+ }
98
+
99
+ .screen {
100
+ display: none;
101
+ animation: fadeIn 0.3s ease-in-out;
102
+ }
103
+
104
+ .screen.active {
105
+ display: block;
106
+ }
107
+
108
+ @keyframes fadeIn {
109
+ from { opacity: 0; transform: translateY(10px); }
110
+ to { opacity: 1; transform: translateY(0); }
111
+ }
112
+
113
+ /* Dashboard Styles */
114
+ .balance-card {
115
+ background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple));
116
+ margin: 20px;
117
+ padding: 30px;
118
+ border-radius: 20px;
119
+ text-align: center;
120
+ box-shadow: 0 8px 32px rgba(74, 20, 140, 0.3);
121
+ }
122
+
123
+ .balance-label {
124
+ font-size: 14px;
125
+ color: var(--text-secondary);
126
+ margin-bottom: 10px;
127
+ }
128
+
129
+ .balance-amount {
130
+ font-size: 36px;
131
+ font-weight: 700;
132
+ color: var(--text-primary);
133
+ margin-bottom: 10px;
134
+ }
135
+
136
+ .balance-usd {
137
+ font-size: 18px;
138
+ color: var(--accent-gold);
139
+ }
140
+
141
+ /* Stats Cards */
142
+ .stats-container {
143
+ padding: 0 20px;
144
+ display: flex;
145
+ gap: 10px;
146
+ overflow-x: auto;
147
+ margin-bottom: 20px;
148
+ -webkit-overflow-scrolling: touch;
149
+ }
150
+
151
+ .stat-card {
152
+ min-width: 120px;
153
+ background: var(--card-bg);
154
+ border: 1px solid var(--border-color);
155
+ border-radius: 15px;
156
+ padding: 15px;
157
+ text-align: center;
158
+ backdrop-filter: blur(10px);
159
+ }
160
+
161
+ .stat-icon {
162
+ font-size: 24px;
163
+ margin-bottom: 8px;
164
+ }
165
+
166
+ .stat-value {
167
+ font-size: 16px;
168
+ font-weight: 600;
169
+ color: var(--accent-gold);
170
+ }
171
+
172
+ .stat-label {
173
+ font-size: 12px;
174
+ color: var(--text-secondary);
175
+ margin-top: 4px;
176
+ }
177
+
178
+ /* Quick Actions */
179
+ .quick-actions {
180
+ padding: 0 20px;
181
+ display: grid;
182
+ grid-template-columns: 1fr 1fr;
183
+ gap: 15px;
184
+ margin-bottom: 20px;
185
+ }
186
+
187
+ .action-btn {
188
+ background: var(--card-bg);
189
+ border: 1px solid var(--border-color);
190
+ border-radius: 15px;
191
+ padding: 20px;
192
+ display: flex;
193
+ flex-direction: column;
194
+ align-items: center;
195
+ gap: 10px;
196
+ cursor: pointer;
197
+ transition: all 0.3s;
198
+ backdrop-filter: blur(10px);
199
+ }
200
+
201
+ .action-btn:hover {
202
+ background: rgba(255, 215, 0, 0.1);
203
+ border-color: var(--accent-gold);
204
+ transform: translateY(-2px);
205
+ }
206
+
207
+ .action-icon {
208
+ font-size: 28px;
209
+ }
210
+
211
+ .action-label {
212
+ font-size: 14px;
213
+ color: var(--text-primary);
214
+ }
215
+
216
+ /* Transaction List */
217
+ .section-title {
218
+ padding: 20px;
219
+ font-size: 18px;
220
+ font-weight: 600;
221
+ }
222
+
223
+ .transaction-list {
224
+ padding: 0 20px;
225
+ }
226
+
227
+ .transaction-item {
228
+ background: var(--card-bg);
229
+ border: 1px solid var(--border-color);
230
+ border-radius: 15px;
231
+ padding: 15px;
232
+ margin-bottom: 10px;
233
+ display: flex;
234
+ justify-content: space-between;
235
+ align-items: center;
236
+ backdrop-filter: blur(10px);
237
+ }
238
+
239
+ .transaction-left {
240
+ display: flex;
241
+ align-items: center;
242
+ gap: 15px;
243
+ }
244
+
245
+ .transaction-icon {
246
+ width: 40px;
247
+ height: 40px;
248
+ border-radius: 50%;
249
+ background: var(--primary-purple);
250
+ display: flex;
251
+ align-items: center;
252
+ justify-content: center;
253
+ font-size: 20px;
254
+ }
255
+
256
+ .transaction-details {
257
+ display: flex;
258
+ flex-direction: column;
259
+ }
260
+
261
+ .transaction-title {
262
+ font-size: 14px;
263
+ font-weight: 500;
264
+ }
265
+
266
+ .transaction-date {
267
+ font-size: 12px;
268
+ color: var(--text-secondary);
269
+ }
270
+
271
+ .transaction-amount {
272
+ font-size: 16px;
273
+ font-weight: 600;
274
+ }
275
+
276
+ .transaction-amount.positive {
277
+ color: var(--success);
278
+ }
279
+
280
+ .transaction-amount.negative {
281
+ color: var(--error);
282
+ }
283
+
284
+ /* Tab Navigation */
285
+ .bottom-nav {
286
+ position: fixed;
287
+ bottom: 0;
288
+ left: 50%;
289
+ transform: translateX(-50%);
290
+ width: 100%;
291
+ max-width: 430px;
292
+ background: var(--surface-light);
293
+ border-top: 1px solid var(--border-color);
294
+ display: flex;
295
+ justify-content: space-around;
296
+ padding: 10px 0;
297
+ backdrop-filter: blur(20px);
298
+ z-index: 100;
299
+ }
300
+
301
+ .nav-item {
302
+ flex: 1;
303
+ display: flex;
304
+ flex-direction: column;
305
+ align-items: center;
306
+ gap: 5px;
307
+ padding: 10px;
308
+ cursor: pointer;
309
+ transition: all 0.3s;
310
+ color: var(--text-secondary);
311
+ }
312
+
313
+ .nav-item.active {
314
+ color: var(--accent-gold);
315
+ }
316
+
317
+ .nav-icon {
318
+ font-size: 24px;
319
+ }
320
+
321
+ .nav-label {
322
+ font-size: 11px;
323
+ }
324
+
325
+ /* Earn Tab Styles */
326
+ .category-tabs {
327
+ display: flex;
328
+ gap: 10px;
329
+ padding: 20px;
330
+ overflow-x: auto;
331
+ -webkit-overflow-scrolling: touch;
332
+ }
333
+
334
+ .category-tab {
335
+ padding: 10px 20px;
336
+ background: var(--card-bg);
337
+ border: 1px solid var(--border-color);
338
+ border-radius: 25px;
339
+ white-space: nowrap;
340
+ cursor: pointer;
341
+ transition: all 0.3s;
342
+ font-size: 14px;
343
+ }
344
+
345
+ .category-tab.active {
346
+ background: var(--primary-purple);
347
+ border-color: var(--primary-purple);
348
+ color: var(--text-primary);
349
+ }
350
+
351
+ .partner-card {
352
+ background: var(--card-bg);
353
+ border: 1px solid var(--border-color);
354
+ border-radius: 20px;
355
+ padding: 20px;
356
+ margin: 0 20px 15px;
357
+ backdrop-filter: blur(10px);
358
+ }
359
+
360
+ .partner-header {
361
+ display: flex;
362
+ justify-content: space-between;
363
+ align-items: center;
364
+ margin-bottom: 15px;
365
+ }
366
+
367
+ .partner-info {
368
+ display: flex;
369
+ align-items: center;
370
+ gap: 15px;
371
+ }
372
+
373
+ .partner-icon {
374
+ width: 50px;
375
+ height: 50px;
376
+ border-radius: 12px;
377
+ background: var(--primary-purple);
378
+ display: flex;
379
+ align-items: center;
380
+ justify-content: center;
381
+ font-size: 24px;
382
+ }
383
+
384
+ .partner-name {
385
+ font-size: 16px;
386
+ font-weight: 600;
387
+ }
388
+
389
+ .partner-status {
390
+ padding: 5px 12px;
391
+ background: rgba(76, 175, 80, 0.2);
392
+ color: var(--success);
393
+ border-radius: 15px;
394
+ font-size: 12px;
395
+ }
396
+
397
+ .reward-info {
398
+ margin: 15px 0;
399
+ }
400
+
401
+ .reward-amount {
402
+ font-size: 18px;
403
+ color: var(--accent-gold);
404
+ margin-bottom: 10px;
405
+ }
406
+
407
+ .progress-bar {
408
+ height: 8px;
409
+ background: rgba(255, 255, 255, 0.1);
410
+ border-radius: 10px;
411
+ overflow: hidden;
412
+ margin-bottom: 5px;
413
+ }
414
+
415
+ .progress-fill {
416
+ height: 100%;
417
+ background: linear-gradient(90deg, var(--primary-purple), var(--accent-gold));
418
+ border-radius: 10px;
419
+ transition: width 0.3s;
420
+ }
421
+
422
+ .progress-text {
423
+ font-size: 12px;
424
+ color: var(--text-secondary);
425
+ }
426
+
427
+ .convert-btn {
428
+ width: 100%;
429
+ padding: 15px;
430
+ background: linear-gradient(135deg, var(--primary-purple), var(--primary-purple-light));
431
+ border: none;
432
+ border-radius: 12px;
433
+ color: var(--text-primary);
434
+ font-size: 16px;
435
+ font-weight: 600;
436
+ cursor: pointer;
437
+ transition: all 0.3s;
438
+ }
439
+
440
+ .convert-btn:hover {
441
+ background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple));
442
+ transform: translateY(-2px);
443
+ box-shadow: 0 5px 20px rgba(74, 20, 140, 0.4);
444
+ }
445
+
446
+ /* Wallet Tab Styles */
447
+ .wallet-balance {
448
+ background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple));
449
+ margin: 20px;
450
+ padding: 30px;
451
+ border-radius: 20px;
452
+ text-align: center;
453
+ }
454
+
455
+ .balance-breakdown {
456
+ margin: 20px;
457
+ background: var(--card-bg);
458
+ border: 1px solid var(--border-color);
459
+ border-radius: 20px;
460
+ padding: 20px;
461
+ backdrop-filter: blur(10px);
462
+ }
463
+
464
+ .breakdown-item {
465
+ display: flex;
466
+ justify-content: space-between;
467
+ align-items: center;
468
+ margin-bottom: 15px;
469
+ padding-bottom: 15px;
470
+ border-bottom: 1px solid var(--border-color);
471
+ }
472
+
473
+ .breakdown-item:last-child {
474
+ border-bottom: none;
475
+ margin-bottom: 0;
476
+ padding-bottom: 0;
477
+ }
478
+
479
+ .breakdown-left {
480
+ display: flex;
481
+ align-items: center;
482
+ gap: 10px;
483
+ }
484
+
485
+ .breakdown-bar {
486
+ width: 100px;
487
+ height: 6px;
488
+ background: rgba(255, 255, 255, 0.1);
489
+ border-radius: 3px;
490
+ overflow: hidden;
491
+ }
492
+
493
+ .breakdown-fill {
494
+ height: 100%;
495
+ background: var(--accent-gold);
496
+ border-radius: 3px;
497
+ }
498
+
499
+ .wallet-actions {
500
+ display: grid;
501
+ grid-template-columns: 1fr 1fr;
502
+ gap: 15px;
503
+ margin: 20px;
504
+ }
505
+
506
+ /* Card Tab Styles */
507
+ .virtual-card {
508
+ background: linear-gradient(135deg, #1e3c72, #2a5298);
509
+ margin: 20px;
510
+ padding: 30px;
511
+ border-radius: 20px;
512
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
513
+ position: relative;
514
+ overflow: hidden;
515
+ }
516
+
517
+ .virtual-card::before {
518
+ content: '';
519
+ position: absolute;
520
+ top: -50%;
521
+ right: -50%;
522
+ width: 200%;
523
+ height: 200%;
524
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
525
+ animation: shimmer 3s infinite;
526
+ }
527
+
528
+ @keyframes shimmer {
529
+ 0% { transform: rotate(0deg); }
530
+ 100% { transform: rotate(360deg); }
531
+ }
532
+
533
+ .card-brand {
534
+ font-size: 14px;
535
+ font-weight: 600;
536
+ margin-bottom: 20px;
537
+ }
538
+
539
+ .card-number {
540
+ font-size: 24px;
541
+ letter-spacing: 3px;
542
+ margin-bottom: 20px;
543
+ font-family: 'Courier New', monospace;
544
+ }
545
+
546
+ .card-details {
547
+ display: flex;
548
+ justify-content: space-between;
549
+ align-items: flex-end;
550
+ }
551
+
552
+ .card-expiry {
553
+ font-size: 14px;
554
+ }
555
+
556
+ .card-cvv {
557
+ font-size: 14px;
558
+ letter-spacing: 2px;
559
+ }
560
+
561
+ .card-controls {
562
+ margin: 20px;
563
+ background: var(--card-bg);
564
+ border: 1px solid var(--border-color);
565
+ border-radius: 20px;
566
+ padding: 20px;
567
+ backdrop-filter: blur(10px);
568
+ }
569
+
570
+ .control-item {
571
+ display: flex;
572
+ justify-content: space-between;
573
+ align-items: center;
574
+ margin-bottom: 20px;
575
+ }
576
+
577
+ .control-item:last-child {
578
+ margin-bottom: 0;
579
+ }
580
+
581
+ .toggle-switch {
582
+ position: relative;
583
+ width: 50px;
584
+ height: 26px;
585
+ background: rgba(255, 255, 255, 0.2);
586
+ border-radius: 13px;
587
+ cursor: pointer;
588
+ transition: background 0.3s;
589
+ }
590
+
591
+ .toggle-switch.active {
592
+ background: var(--accent-gold);
593
+ }
594
+
595
+ .toggle-slider {
596
+ position: absolute;
597
+ top: 3px;
598
+ left: 3px;
599
+ width: 20px;
600
+ height: 20px;
601
+ background: white;
602
+ border-radius: 50%;
603
+ transition: transform 0.3s;
604
+ }
605
+
606
+ .toggle-switch.active .toggle-slider {
607
+ transform: translateX(24px);
608
+ }
609
+
610
+ /* Profile Tab Styles */
611
+ .profile-header {
612
+ background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple));
613
+ padding: 30px 20px;
614
+ text-align: center;
615
+ }
616
+
617
+ .profile-avatar {
618
+ width: 80px;
619
+ height: 80px;
620
+ border-radius: 50%;
621
+ background: var(--accent-gold);
622
+ display: flex;
623
+ align-items: center;
624
+ justify-content: center;
625
+ margin: 0 auto 15px;
626
+ font-size: 36px;
627
+ color: var(--primary-purple-dark);
628
+ }
629
+
630
+ .profile-name {
631
+ font-size: 20px;
632
+ font-weight: 600;
633
+ margin-bottom: 5px;
634
+ }
635
+
636
+ .profile-email {
637
+ font-size: 14px;
638
+ color: var(--text-secondary);
639
+ }
640
+
641
+ .kyc-badge {
642
+ display: inline-flex;
643
+ align-items: center;
644
+ gap: 5px;
645
+ padding: 5px 12px;
646
+ background: rgba(76, 175, 80, 0.2);
647
+ color: var(--success);
648
+ border-radius: 15px;
649
+ font-size: 12px;
650
+ margin-top: 10px;
651
+ }
652
+
653
+ .profile-section {
654
+ margin: 20px;
655
+ background: var(--card-bg);
656
+ border: 1px solid var(--border-color);
657
+ border-radius: 20px;
658
+ padding: 20px;
659
+ backdrop-filter: blur(10px);
660
+ }
661
+
662
+ .section-header {
663
+ font-size: 16px;
664
+ font-weight: 600;
665
+ margin-bottom: 15px;
666
+ display: flex;
667
+ justify-content: space-between;
668
+ align-items: center;
669
+ }
670
+
671
+ .add-btn {
672
+ color: var(--accent-gold);
673
+ font-size: 14px;
674
+ cursor: pointer;
675
+ }
676
+
677
+ .profile-item {
678
+ display: flex;
679
+ justify-content: space-between;
680
+ align-items: center;
681
+ padding: 12px 0;
682
+ border-bottom: 1px solid var(--border-color);
683
+ }
684
+
685
+ .profile-item:last-child {
686
+ border-bottom: none;
687
+ }
688
+
689
+ .profile-item-left {
690
+ display: flex;
691
+ align-items: center;
692
+ gap: 12px;
693
+ }
694
+
695
+ .profile-item-icon {
696
+ width: 36px;
697
+ height: 36px;
698
+ border-radius: 8px;
699
+ background: var(--primary-purple);
700
+ display: flex;
701
+ align-items: center;
702
+ justify-content: center;
703
+ font-size: 18px;
704
+ }
705
+
706
+ .profile-item-right {
707
+ color: var(--text-secondary);
708
+ font-size: 14px;
709
+ }
710
+
711
+ /* Modal Styles */
712
+ .modal {
713
+ display: none;
714
+ position: fixed;
715
+ top: 0;
716
+ left: 0;
717
+ right: 0;
718
+ bottom: 0;
719
+ background: rgba(0, 0, 0, 0.8);
720
+ z-index: 1000;
721
+ align-items: center;
722
+ justify-content: center;
723
+ }
724
+
725
+ .modal.active {
726
+ display: flex;
727
+ }
728
+
729
+ .modal-content {
730
+ background: var(--surface-light);
731
+ border-radius: 20px;
732
+ padding: 30px;
733
+ max-width: 400px;
734
+ width: 90%;
735
+ max-height: 80vh;
736
+ overflow-y: auto;
737
+ }
738
+
739
+ .modal-title {
740
+ font-size: 20px;
741
+ font-weight: 600;
742
+ margin-bottom: 20px;
743
+ }
744
+
745
+ .form-group {
746
+ margin-bottom: 20px;
747
+ }
748
+
749
+ .form-label {
750
+ display: block;
751
+ margin-bottom: 8px;
752
+ font-size: 14px;
753
+ color: var(--text-secondary);
754
+ }
755
+
756
+ .form-input {
757
+ width: 100%;
758
+ padding: 12px;
759
+ background: var(--card-bg);
760
+ border: 1px solid var(--border-color);
761
+ border-radius: 10px;
762
+ color: var(--text-primary);
763
+ font-size: 16px;
764
+ }
765
+
766
+ .form-input:focus {
767
+ outline: none;
768
+ border-color: var(--accent-gold);
769
+ }
770
+
771
+ .modal-buttons {
772
+ display: flex;
773
+ gap: 10px;
774
+ margin-top: 20px;
775
+ }
776
+
777
+ .btn {
778
+ flex: 1;
779
+ padding: 15px;
780
+ border: none;
781
+ border-radius: 10px;
782
+ font-size: 16px;
783
+ font-weight: 600;
784
+ cursor: pointer;
785
+ transition: all 0.3s;
786
+ }
787
+
788
+ .btn-primary {
789
+ background: linear-gradient(135deg, var(--primary-purple), var(--primary-purple-light));
790
+ color: white;
791
+ }
792
+
793
+ .btn-secondary {
794
+ background: var(--card-bg);
795
+ color: var(--text-primary);
796
+ border: 1px solid var(--border-color);
797
+ }
798
+
799
+ .btn:hover {
800
+ transform: translateY(-2px);
801
+ }
802
+
803
+ /* Responsive Design */
804
+ @media (max-width: 480px) {
805
+ .app-container {
806
+ max-width: 100%;
807
+ }
808
+ }
809
+
810
+ /* Loading Animation */
811
+ .loading {
812
+ display: inline-block;
813
+ width: 20px;
814
+ height: 20px;
815
+ border: 3px solid var(--border-color);
816
+ border-radius: 50%;
817
+ border-top-color: var(--accent-gold);
818
+ animation: spin 1s linear infinite;
819
+ }
820
+
821
+ @keyframes spin {
822
+ to { transform: rotate(360deg); }
823
+ }
824
+
825
+ /* Toast Notification */
826
+ .toast {
827
+ position: fixed;
828
+ bottom: 100px;
829
+ left: 50%;
830
+ transform: translateX(-50%) translateY(100px);
831
+ background: var(--surface-light);
832
+ color: var(--text-primary);
833
+ padding: 15px 25px;
834
+ border-radius: 25px;
835
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
836
+ z-index: 2000;
837
+ opacity: 0;
838
+ transition: all 0.3s;
839
+ }
840
+
841
+ .toast.show {
842
+ transform: translateX(-50%) translateY(0);
843
+ opacity: 1;
844
+ }
845
+
846
+ .toast.success {
847
+ background: var(--success);
848
+ }
849
+
850
+ .toast.error {
851
+ background: var(--error);
852
+ }
853
+ </style>
854
+ </head>
855
+ <body>
856
+ <div class="app-container">
857
+ <!-- Header -->
858
+ <header class="header">
859
+ <div class="header-title">
860
+ <span>FLEN Wallet</span>
861
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #FFD700; text-decoration: none; font-size: 12px; font-weight: normal;">
862
+ Built with anycoder
863
+ </a>
864
+ </div>
865
+ <div class="header-icons">
866
+ <button class="icon-btn" onclick="showNotifications()">🔔</button>
867
+ <button class="icon-btn" onclick="showProfile()">👤</button>
868
+ </div>
869
+ </header>
870
+
871
+ <!-- Main Content -->
872
+ <main class="main-content">
873
+ <!-- Home Screen -->
874
+ <div class="screen active" id="home-screen">
875
+ <div class="balance-card">
876
+ <div class="balance-label">Your FLEN Balance</div>
877
+ <div class="balance-amount">12,450.00</div>
878
+ <div class="balance-usd">≈ $1,245.00 USD</div>
879
+ </div>
880
+
881
+ <div class="stats-container">
882
+ <div class="stat-card">
883
+ <div class="stat-icon">🏨</div>
884
+ <div class="stat-value">+2,300</div>
885
+ <div class="stat-label">Hospitality</div>
886
+ </div>
887
+ <div class="stat-card">
888
+ <div class="stat-icon">🛡️</div>
889
+ <div class="stat-value">+5,000</div>
890
+ <div class="stat-label">Insurance</div>
891
+ </div>
892
+ <div class="stat-card">
893
+ <div class="stat-icon">🛍️</div>
894
+ <div class="stat-value">+1,200</div>
895
+ <div class="stat-label">Retail</div>
896
+ </div>
897
+ <div class="stat-card">
898
+ <div class="stat-icon">🔗</div>
899
+ <div class="stat-value">+3,950</div>
900
+ <div class="stat-label">Affiliates</div>
901
+ </div>
902
+ </div>
903
+
904
+ <div class="quick-actions">
905
+ <button class="action-btn" onclick="showConvertModal()">
906
+ <span class="action-icon">💱</span>
907
+ <span class="action-label">Convert to Fiat</span>
908
+ </button>
909
+ <button class="action-btn" onclick="showExchangeModal()">
910
+ <span class="action-icon">🔄</span>
911
+ <span class="action-label">Exchange Crypto</span>
912
+ </button>
913
+ <button class="action-btn" onclick="showCardScreen()">
914
+ <span class="action-icon">💳</span>
915
+ <span class="action-label">Top-up Card</span>
916
+ </button>
917
+ <button class="action-btn" onclick="showScanQR()">
918
+ <span class="action-icon">📱</span>
919
+ <span class="action-label">Scan QR</span>
920
+ </button>
921
+ </div>
922
+
923
+ <div class="section-title">Recent Activity</div>
924
+ <div class="transaction-list">
925
+ <div class="transaction-item">
926
+ <div class="transaction-left">
927
+ <div class="transaction-icon">🛍️</div>
928
+ <div class="transaction-details">
929
+ <div class="transaction-title">Retail voucher</div>
930
+ <div class="transaction-date">Today</div>
931
+ </div>
932
+ </div>
933
+ <div class="transaction-amount positive">+500 FLEN</div>
934
+ </div>
935
+ <div class="transaction-item">
936
+ <div class="transaction-left">
937
+ <div class="transaction-icon">🛡️</div>
938
+ <div class="transaction-details">
939
+ <div class="transaction-title">Insurance claim</div>
940
+ <div class="transaction-date">Yesterday</div>
941
+ </div>
942
+ </div>
943
+ <div class="transaction-amount positive">+5,000 FLEN</div>
944
+ </div>
945
+ <div class="transaction-item">
946
+ <div class="transaction-left">
947
+ <div class="transaction-icon">☕</div>
948
+ <div class="transaction-details">
949
+ <div class="transaction-title">Starbucks (Card)</div>
950
+ <div class="transaction-date">Dec 20</div>
951
+ </div>
952
+ </div>
953
+ <div class="transaction-amount negative">-200 FLEN</div>
954
+ </div>
955
+ </div>
956
+ </div>
957
+
958
+ <!-- Earn Screen -->
959
+ <div class="screen" id="earn-screen">
960
+ <div class="category-tabs">
961
+ <div class="category-tab active" onclick="switchCategory(this, 'hospitality')">🏨 Hospitality</div>
962
+ <div class="category-tab" onclick="switchCategory(this, 'insurance')">🛡️ Insurance</div>
963
+ <div class="category-tab" onclick="switchCategory(this, 'retail')">🛍️ Retail</div>
964
+ <div class="category-tab" onclick="switchCategory(this, 'affiliates')">🔗 Affiliates</div>
965
+ </div>
966
+
967
+ <div id="hospitality-content" class="category-content">
968
+ <button class="convert-btn" style="margin: 20px; background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));">
969
+ + Connect New Partner
970
+ </button>
971
+
972
+ <div class="partner-card">
973
+ <div class="partner-header">
974
+ <div class="partner-info">
975
+ <div class="partner-icon">🏨</div>
976
+ <div>
977
+ <div class="partner-name">Grand Hotel Chain</div>
978
+ </div>
979
+ </div>
980
+ <span class="partner-status">Connected</span>
981
+ </div>
982
+ <div class="reward-info">
983
+ <div class="reward-amount">Available: 8,500 points (~850 FLEN)</div>
984
+ <div class="progress-bar">
985
+ <div class="progress-fill" style="width: 80%;"></div>
986
+ </div>
987
+ <div class="progress-text">80% to next reward</div>
988
+ </div>
989
+ <button class="convert-btn" onclick="convertToFLen('Grand Hotel Chain', 850)">Convert to FLEN</button>
990
+ </div>
991
+
992
+ <div class="partner-card">
993
+ <div class="partner-header">
994
+ <div class="partner-info">
995
+ <div class="partner-icon">🏖️</div>
996
+ <div>
997
+ <div class="partner-name">Beach Resort</div>
998
+ </div>
999
+ </div>
1000
+ <span class="partner-status">Connected</span>
1001
+ </div>
1002
+ <div class="reward-info">
1003
+ <div class="reward-amount">Pending: 2 vouchers</div>
1004
+ <div class="progress-bar">
1005
+ <div class="progress-fill" style="width: 60%;"></div>
1006
+ </div>
1007
+ <div class="progress-text">Processing...</div>
1008
+ </div>
1009
+ <button class="convert-btn" onclick="convertToFLen('Beach Resort', 500)">Convert to FLEN</button>
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <div id="insurance-content" class="category-content" style="display: none;">
1014
+ <div class="section-title">Pending Claims</div>
1015
+ <div class="partner-card">
1016
+ <div class="partner-header">
1017
+ <div class="partner-info">
1018
+ <div class="partner-icon">🛡️</div>
1019
+ <div>
1020
+ <div class="partner-name">Claim #12345 - Auto Insurance</div>
1021
+ </div>
1022
+ </div>
1023
+ </div>
1024
+ <div class="reward-info">
1025
+ <div class="reward-amount">Amount: $500.00</div>
1026
+ <p style="margin-top: 10px; font-size: 14px;">Payout:</p>
1027
+ <label style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
1028
+ <input type="radio" name="payout" checked> Fiat Transfer
1029
+ </label>
1030
+ <label style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
1031
+ <input type="radio" name="payout"> Receive in FLEN (~5,000 FLEN)
1032
+ </label>
1033
+ </div>
1034
+ <button class="convert-btn" onclick="confirmClaim()">Confirm Payout</button>
1035
+ </div>
1036
+
1037
+ <div class="partner-card">
1038
+ <div class="partner-header">
1039
+ <div class="partner-info">
1040
+ <div class="partner-icon">🏥</div>
1041
+ <div>
1042
+ <div class="partner-name">Claim #67890 - Health</div>
1043
+ </div>
1044
+ </div>
1045
+ <span class="partner-status" style="background: rgba(255, 152, 0, 0.2); color: var(--warning);">Pending</span>
1046
+ </div>
1047
+ <div class="reward-info">
1048
+ <div class="reward-amount">We'll notify when approved</div>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+
1053
+ <div id="retail-content" class="category-content" style="display: none;">
1054
+ <button class="convert-btn" style="margin: 20px; background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));">
1055
+ + Connect New Partner
1056
+ </button>
1057
+
1058
+ <div class="partner-card">
1059
+ <div class="partner-header">
1060
+ <div class="partner-info">
1061
+ <div class="partner-icon">🛍️</div>
1062
+ <div>
1063
+ <div class="partner-name">Fashion Retailer</div>
1064
+ </div>
1065
+ </div>
1066
+ <span class="partner-status">Connected</span>
1067
+ </div>
1068
+ <div class="reward-info">
1069
+ <div class="reward-amount">Available: 3,200 points (~320 FLEN)</div>
1070
+ <div class="progress-bar">
1071
+ <div class="progress-fill" style="width: 65%;"></div>
1072
+ </div>
1073
+ <div class="progress-text">65% to next reward</div>
1074
+ </div>
1075
+ <button class="convert-btn" onclick="convertToFLen('Fashion Retailer', 320)">Convert to FLEN</button>
1076
+ </div>
1077
+ </div>
1078
+
1079
+ <div id="affiliates-content" class="category-content" style="display: none;">
1080
+ <button class="convert-btn" style="margin: 20px; background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));">
1081
+ + Connect New Partner
1082
+ </button>
1083
+
1084
+ <div class="partner-card">
1085
+ <div class="partner-header">
1086
+ <div class="partner-info">
1087
+ <div class="partner-icon">🔗</div>
1088
+ <div>
1089
+ <div class="partner-name">FLENCORP Direct</div>
1090
+ </div>
1091
+ </div>
1092
+ <span class="partner-status">Connected</span>
1093
+ </div>
1094
+ <div class="reward-info">
1095
+ <div class="reward-amount">Available: 2,500 FLEN</div>
1096
+ </div>
1097
+ <button class="convert-btn" onclick="convertToFLen('FLENCORP Direct', 2500)">Claim FLEN</button>
1098
+ </div>
1099
+ </div>
1100
+ </div>
1101
+
1102
+ <!-- Wallet Screen -->
1103
+ <div class="screen" id="wallet-screen">
1104
+ <div class="wallet-balance">
1105
+ <div class="balance-amount">12,450.00 FLEN</div>
1106
+ <div class="balance-usd">≈ $1,245.00 USD</div>
1107
+ </div>
1108
+
1109
+ <div class="balance-breakdown">
1110
+ <div class="section-title">Balance Breakdown</div>
1111
+ <div class="breakdown-item">
1112
+ <div class="breakdown-left">
1113
+ <span>🏨 Hospitality</span>
1114
+ </div>
1115
+ <div style="display: flex; align-items: center; gap: 10px;">
1116
+ <div class="breakdown-bar">
1117
+ <div class="breakdown-fill" style="width: 30%;"></div>
1118
+ </div>
1119
+ <span>30%</span>
1120
+ </div>
1121
+ </div>
1122
+ <div class="breakdown-item">
1123
+ <div class="breakdown-left">
1124
+ <span>🛡️ Insurance</span>
1125
+ </div>
1126
+ <div style="display: flex; align-items: center; gap: 10px;">
1127
+ <div class="breakdown-bar">
1128
+ <div class="breakdown-fill" style="width: 40%;"></div>
1129
+ </div>
1130
+ <span>40%</span>
1131
+ </div>
1132
+ </div>
1133
+ <div class="breakdown-item">
1134
+ <div class="breakdown-left">
1135
+ <span>🛍️ Retail</