Hugging Face's logo

Spaces:
flen-crypto
/
anycoder-824288fb
Running

App Files Community
flen-crypto commited on
Commit
167ff3f
·
verified ·
1 Parent(s): 9e7a308

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1179 -19
index.html CHANGED
@@ -1,19 +1,1179 @@
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
+
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