Hugging Face's logo

Spaces:
ProjectGenesis
/
player-profile-ui
Running

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

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

Browse files
Files changed (1) hide show
  1. index.html +61 -116
index.html CHANGED
@@ -357,154 +357,99 @@
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">
 
357
  </div>
358
  </div>
359
  </section>
360
+ <!-- Minimalist Stat Panel -->
361
+ <section class="glass-card p-6 mb-8">
362
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
363
+ <!-- Lifetime Stats -->
364
+ <div class="space-y-5">
365
+ <h3 class="text-lg font-medium text-gray-300 border-b pb-2 border-gray-700 flex items-center">
366
+ <i class="fas fa-infinity text-orange-400 mr-2"></i>
367
+ Lifetime Stats
368
+ </h3>
369
+ <div class="space-y-3">
370
+ <div>
371
+ <div class="flex justify-between text-sm mb-1">
372
+ <span class="text-gray-400">Spins Played</span>
373
+ <span class="font-medium"><span class="count-up" data-target="12890">0</span></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
374
  </div>
375
+ <div class="w-full bg-gray-800 rounded-full h-1">
376
+ <div class="bg-orange-400 h-1 rounded-full" style="width: 85%"></div>
377
  </div>
378
  </div>
379
 
380
+ <div>
381
+ <div class="flex justify-between text-sm mb-1">
382
+ <span class="text-gray-400">Total Purchases</span>
383
+ <span class="font-medium">$<span class="count-up" data-target="2450">0</span></span>
384
  </div>
385
+ <div class="w-full bg-gray-800 rounded-full h-1">
386
+ <div class="bg-orange-400 h-1 rounded-full" style="width: 65%"></div>
387
  </div>
388
  </div>
389
  </div>
390
  </div>
391
 
392
+ <!-- This Month -->
393
+ <div class="space-y-5">
394
+ <h3 class="text-lg font-medium text-gray-300 border-b pb-2 border-gray-700 flex items-center">
395
+ <i class="fas fa-calendar-alt text-orange-400 mr-2"></i>
396
+ This Month
397
+ </h3>
398
+ <div class="space-y-3">
399
+ <div>
400
+ <div class="flex justify-between text-sm mb-1">
401
+ <span class="text-gray-400">Spins</span>
402
+ <span class="font-medium"><span class="count-up" data-target="1240">0</span></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
403
  </div>
404
+ <div class="w-full bg-gray-800 rounded-full h-1">
405
+ <div class="bg-orange-400 h-1 rounded-full" style="width: 62%"></div>
406
  </div>
407
  </div>
408
 
409
+ <div>
410
+ <div class="flex justify-between text-sm mb-1">
411
+ <span class="text-gray-400">Points Earned</span>
412
+ <span class="font-medium"><span class="count-up" data-target="1250">0</span></span>
413
  </div>
414
+ <div class="w-full bg-gray-800 rounded-full h-1">
415
+ <div class="bg-orange-400 h-1 rounded-full" style="width: 50%"></div>
416
  </div>
417
  </div>
418
  </div>
419
  </div>
420
 
421
+ <!-- VIP Snapshot -->
422
+ <div class="space-y-5">
423
+ <h3 class="text-lg font-medium text-gray-300 border-b pb-2 border-gray-700 flex items-center">
424
+ <i class="fas fa-crown text-orange-400 mr-2"></i>
425
+ VIP Status
426
+ </h3>
427
+ <div class="space-y-3">
428
+ <div>
429
+ <div class="flex justify-between text-sm mb-1">
430
+ <span class="text-gray-400">Current Tier</span>
431
+ <span class="font-medium">NioPrime</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
432
  </div>
433
+ <div class="w-full bg-gray-800 rounded-full h-1">
434
+ <div class="bg-orange-400 h-1 rounded-full" style="width: 75%"></div>
435
  </div>
436
  </div>
437
 
438
+ <div>
439
+ <div class="flex justify-between text-sm mb-1">
440
+ <span class="text-gray-400">Cashback</span>
441
+ <span class="font-medium"><span class="count-up" data-target="8">0</span>%</span>
442
  </div>
443
+ <div class="w-full bg-gray-800 rounded-full h-1">
444
+ <div class="bg-orange-400 h-1 rounded-full" style="width: 80%"></div>
445
  </div>
446
  </div>
447
  </div>
448
  </div>
449
  </div>
450
  </section>
451
+ <!-- Active Perks Section -->
452
+ <section class="mb-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
453
  <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>
454
  <div class="flex justify-center perks-container">
455
  <div class="flex flex-col items-center mx-4">