Hugging Face's logo

Spaces:
ProjectGenesis
/
player-profile-ui
Running

App Files Community
ProjectGenesis commited on
Commit
3e21348
·
verified ·
1 Parent(s): d046233

Redesign the "Modern Stat Summary Panel with Horizontal Bars" Section with a more appealing and modern design.

Browse files
Files changed (1) hide show
  1. index.html +74 -58
index.html CHANGED
@@ -357,138 +357,154 @@
357
  </div>
358
  </div>
359
  </section>
360
- <!-- Modern Stats Dashboard -->
361
  <section class="mb-8">
362
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
363
  <!-- Lifetime Stats Card -->
364
- <div class="glass-card p-6 hover:shadow-glow-orange transition-all">
 
365
  <div class="flex items-center mb-6">
366
- <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-4">
367
  <i class="fas fa-infinity text-xl"></i>
368
  </div>
369
- <h3 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-amber-300">Lifetime Stats</h3>
370
  </div>
371
 
372
  <div class="space-y-5">
373
  <div class="stat-item">
374
- <div class="flex justify-between items-center mb-2">
375
- <span class="text-gray-400">Spins Played</span>
376
- <span class="font-bold text-lg"><span class="count-up" data-target="12890">0</span></span>
377
  </div>
378
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
379
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 85%"></div>
380
  </div>
381
  </div>
382
 
383
  <div class="stat-item">
384
- <div class="flex justify-between items-center mb-2">
385
- <span class="text-gray-400">Total Purchases</span>
386
- <span class="font-bold text-lg">$<span class="count-up" data-target="2450">0</span></span>
387
  </div>
388
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
389
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 65%"></div>
390
  </div>
391
  </div>
392
 
393
  <div class="stat-item">
394
- <div class="flex justify-between items-center mb-2">
395
- <span class="text-gray-400">Total Redeem</span>
396
- <span class="font-bold text-lg">$<span class="count-up" data-target="3650">0</span></span>
397
  </div>
398
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
399
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 72%"></div>
400
  </div>
401
  </div>
402
  </div>
403
  </div>
404
 
405
  <!-- Monthly Stats Card -->
406
- <div class="glass-card p-6 hover:shadow-glow-orange transition-all">
 
407
  <div class="flex items-center mb-6">
408
- <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-4">
409
  <i class="fas fa-calendar-alt text-xl"></i>
410
  </div>
411
- <h3 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-amber-300">This Month</h3>
412
  </div>
413
 
414
  <div class="space-y-5">
415
  <div class="stat-item">
416
- <div class="flex justify-between items-center mb-2">
417
- <span class="text-gray-400">Spins</span>
418
- <span class="font-bold text-lg"><span class="count-up" data-target="1240">0</span></span>
419
  </div>
420
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
421
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 62%"></div>
422
  </div>
423
  </div>
424
 
425
  <div class="stat-item">
426
- <div class="flex justify-between items-center mb-2">
427
- <span class="text-gray-400">Bonuses</span>
428
- <span class="font-bold text-lg"><span class="count-up" data-target="18">0</span></span>
429
  </div>
430
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
431
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 90%"></div>
432
  </div>
433
  </div>
434
 
435
  <div class="stat-item">
436
- <div class="flex justify-between items-center mb-2">
437
- <span class="text-gray-400">Points Earned</span>
438
- <span class="font-bold text-lg"><span class="count-up" data-target="1250">0</span></span>
439
  </div>
440
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
441
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 50%"></div>
442
  </div>
443
  </div>
444
  </div>
445
  </div>
446
 
447
  <!-- VIP Stats Card -->
448
- <div class="glass-card p-6 hover:shadow-glow-gold transition-all">
 
449
  <div class="flex items-center mb-6">
450
- <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-4">
451
  <i class="fas fa-crown text-xl"></i>
452
  </div>
453
- <h3 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-amber-300">VIP Snapshot</h3>
454
  </div>
455
 
456
  <div class="space-y-5">
457
  <div class="stat-item">
458
- <div class="flex justify-between items-center mb-2">
459
- <span class="text-gray-400">Current Tier</span>
460
- <span class="font-bold text-lg text-amber-300">NioPrime</span>
461
  </div>
462
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
463
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 75%"></div>
464
  </div>
465
  </div>
466
 
467
  <div class="stat-item">
468
- <div class="flex justify-between items-center mb-2">
469
- <span class="text-gray-400">Cashback %</span>
470
- <span class="font-bold text-lg"><span class="count-up" data-target="8">0</span>%</span>
471
  </div>
472
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
473
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 80%"></div>
474
  </div>
475
  </div>
476
 
477
  <div class="stat-item">
478
- <div class="flex justify-between items-center mb-2">
479
- <span class="text-gray-400">Next Tier</span>
480
- <span class="font-bold text-lg">1,250 pts</span>
481
  </div>
482
- <div class="w-full h-1.5 bg-gray-700 rounded-full overflow-hidden">
483
- <div class="h-full bg-gradient-to-r from-orange-500 to-amber-600 rounded-full" style="width: 65%"></div>
484
  </div>
485
  </div>
486
  </div>
487
  </div>
488
  </div>
489
  </section>
490
- <!-- Active Perks Section -->
491
- <section class="mb-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
492
  <h2 class="text-2xl font-bold text-center mb-6 text-amber-300" style="text-shadow: 0 0 10px rgba(255, 209, 102, 0.7);">All Perks</h2>
493
  <div class="flex justify-center perks-container">
494
  <div class="flex flex-col items-center mx-4">
 
357
  </div>
358
  </div>
359
  </section>
360
+ <!-- Modern Stat Summary Cards -->
361
  <section class="mb-8">
362
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
363
  <!-- Lifetime Stats Card -->
364
+ <div class="glass-card p-6 rounded-2xl relative overflow-hidden">
365
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-orange-500/20 to-amber-600/20 rounded-full blur-xl"></div>
366
  <div class="flex items-center mb-6">
367
+ <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-4 shadow-glow">
368
  <i class="fas fa-infinity text-xl"></i>
369
  </div>
370
+ <h3 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-orange-400">Lifetime Stats</h3>
371
  </div>
372
 
373
  <div class="space-y-5">
374
  <div class="stat-item">
375
+ <div class="flex justify-between mb-2">
376
+ <span class="text-gray-300">Spins Played</span>
377
+ <span class="font-bold text-amber-300"><span class="count-up" data-target="12890">0</span></span>
378
  </div>
379
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
380
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 85%"></div>
381
  </div>
382
  </div>
383
 
384
  <div class="stat-item">
385
+ <div class="flex justify-between mb-2">
386
+ <span class="text-gray-300">Total Purchases</span>
387
+ <span class="font-bold text-amber-300">$<span class="count-up" data-target="2450">0</span></span>
388
  </div>
389
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
390
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 65%"></div>
391
  </div>
392
  </div>
393
 
394
  <div class="stat-item">
395
+ <div class="flex justify-between mb-2">
396
+ <span class="text-gray-300">Total Redeem</span>
397
+ <span class="font-bold text-amber-300">$<span class="count-up" data-target="3650">0</span></span>
398
  </div>
399
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
400
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 72%"></div>
401
  </div>
402
  </div>
403
  </div>
404
  </div>
405
 
406
  <!-- Monthly Stats Card -->
407
+ <div class="glass-card p-6 rounded-2xl relative overflow-hidden">
408
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-orange-500/20 to-amber-600/20 rounded-full blur-xl"></div>
409
  <div class="flex items-center mb-6">
410
+ <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-4 shadow-glow">
411
  <i class="fas fa-calendar-alt text-xl"></i>
412
  </div>
413
+ <h3 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-orange-400">Monthly Stats</h3>
414
  </div>
415
 
416
  <div class="space-y-5">
417
  <div class="stat-item">
418
+ <div class="flex justify-between mb-2">
419
+ <span class="text-gray-300">Spins</span>
420
+ <span class="font-bold text-amber-300"><span class="count-up" data-target="1240">0</span></span>
421
  </div>
422
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
423
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 62%"></div>
424
  </div>
425
  </div>
426
 
427
  <div class="stat-item">
428
+ <div class="flex justify-between mb-2">
429
+ <span class="text-gray-300">Bonuses Claimed</span>
430
+ <span class="font-bold text-amber-300"><span class="count-up" data-target="18">0</span></span>
431
  </div>
432
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
433
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 90%"></div>
434
  </div>
435
  </div>
436
 
437
  <div class="stat-item">
438
+ <div class="flex justify-between mb-2">
439
+ <span class="text-gray-300">Points Earned</span>
440
+ <span class="font-bold text-amber-300"><span class="count-up" data-target="1250">0</span></span>
441
  </div>
442
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
443
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 50%"></div>
444
  </div>
445
  </div>
446
  </div>
447
  </div>
448
 
449
  <!-- VIP Stats Card -->
450
+ <div class="glass-card p-6 rounded-2xl relative overflow-hidden">
451
+ <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-orange-500/20 to-amber-600/20 rounded-full blur-xl"></div>
452
  <div class="flex items-center mb-6">
453
+ <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-4 shadow-glow">
454
  <i class="fas fa-crown text-xl"></i>
455
  </div>
456
+ <h3 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-orange-400">VIP Status</h3>
457
  </div>
458
 
459
  <div class="space-y-5">
460
  <div class="stat-item">
461
+ <div class="flex justify-between mb-2">
462
+ <span class="text-gray-300">Current Tier</span>
463
+ <span class="font-bold text-amber-300">NioPrime</span>
464
  </div>
465
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
466
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 75%"></div>
467
  </div>
468
  </div>
469
 
470
  <div class="stat-item">
471
+ <div class="flex justify-between mb-2">
472
+ <span class="text-gray-300">Cashback %</span>
473
+ <span class="font-bold text-amber-300"><span class="count-up" data-target="8">0</span>%</span>
474
  </div>
475
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
476
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 80%"></div>
477
  </div>
478
  </div>
479
 
480
  <div class="stat-item">
481
+ <div class="flex justify-between mb-2">
482
+ <span class="text-gray-300">Next Tier</span>
483
+ <span class="font-bold text-amber-300">1,250 pts</span>
484
  </div>
485
+ <div class="progress-container h-1.5 rounded-full bg-gray-700/50">
486
+ <div class="progress-bar h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-600" style="width: 65%"></div>
487
  </div>
488
  </div>
489
  </div>
490
  </div>
491
  </div>
492
  </section>
493
+ <!-- Add this to the style section -->
494
+ <style>
495
+ .stat-item {
496
+ transition: all 0.3s ease;
497
+ }
498
+ .stat-item:hover {
499
+ transform: translateY(-2px);
500
+ }
501
+ .shadow-glow {
502
+ box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
503
+ }
504
+ </style>
505
+
506
+ <!-- Active Perks Section -->
507
+ <section class="mb-8">
508
  <h2 class="text-2xl font-bold text-center mb-6 text-amber-300" style="text-shadow: 0 0 10px rgba(255, 209, 102, 0.7);">All Perks</h2>
509
  <div class="flex justify-center perks-container">
510
  <div class="flex flex-col items-center mx-4">