Hugging Face's logo

Spaces:
ProjectGenesis
/
vip-tier-ui
Running

App Files Community
ProjectGenesis commited on
Commit
382c5e9
·
verified ·
1 Parent(s): 7f1406e

Redo the VIP PROGRESS TRACKER Section - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +92 -88
index.html CHANGED
@@ -50,7 +50,7 @@
50
  </script>
51
  <style>
52
  body {
53
- background: linear-gradient(135deg, #0c0f1a, #1d2030, #0c0f1a);
54
  min-height: 100vh;
55
  font-family: 'Poppins', sans-serif;
56
  overflow-x: hidden;
@@ -541,91 +541,57 @@ But here is the full implementation with all animations in a single HTML file un
541
  </div>
542
  </section>
543
 
544
- <!-- CURRENT VS NEXT TIER -->
545
- <section class="mb-16">
546
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
547
  <!-- Current Tier -->
548
- <div class="glass-card hover-glow slide-in-left">
549
- <div class="p-6">
550
- <div class="flex items-center mb-6">
551
- <div class="bg-gradient-to-tr from-gray-700 to-amber-700/30 w-14 h-14 rounded-full flex items-center justify-center mr-4">
552
- <i class="fas fa-crown text-yellow-500 text-2xl"></i>
553
- </div>
554
- <div>
555
- <p class="text-gray-400">Current Tier</p>
556
- <h2 class="text-2xl font-bold bg-gradient-to-r from-yellow-500 to-orange-500 text-transparent bg-clip-text">NioPrime</h2>
557
- </div>
558
  </div>
559
-
560
- <ul class="space-y-3">
561
- <li class="flex items-center">
562
- <div class="w-6 h-6 rounded-full bg-orange-900/50 flex items-center justify-center mr-3">
563
- <i class="fas fa-check text-green-400 text-xs"></i>
564
- </div>
565
- <span>15% faster coin recharge</span>
566
- </li>
567
- <li class="flex items-center">
568
- <div class="w-6 h-6 rounded-full bg-orange-900/50 flex items-center justify-center mr-3">
569
- <i class="fas fa-check text-green-400 text-xs"></i>
570
- </div>
571
- <span>Exclusive bonus spins</span>
572
- </li>
573
- <li class="flex items-center">
574
- <div class="w-6 h-6 rounded-full bg-orange-900/50 flex items-center justify-center mr-3">
575
- <i class="fas fa-check text-green-400 text-xs"></i>
576
- </div>
577
- <span>4% weekly cashback</span>
578
- </li>
579
- <li class="flex items-center">
580
- <div class="w-6 h-6 rounded-full bg-orange-900/50 flex items-center justify-center mr-3">
581
- <i class="fas fa-gift text-amber-400 text-xs"></i>
582
- </div>
583
- <span>$50 monthly bonus</span>
584
- </li>
585
- </ul>
586
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
587
  </div>
588
 
589
  <!-- Next Tier -->
590
- <div class="glass-card hover-glow slide-in-left" style="animation-delay: 0.2s">
591
- <div class="p-6">
592
- <div class="flex items-center mb-6">
593
- <div class="bg-gradient-to-tr from-yellow-900/50 to-amber-900 w-14 h-14 rounded-full flex items-center justify-center mr-4 pulse-border" style="border: 1px solid rgba(255,180,0,0.6)">
594
- <i class="fas fa-star text-amber-400 text-2xl"></i>
595
- </div>
596
- <div>
597
- <p class="text-gray-400">Next Tier</p>
598
- <h2 class="text-2xl font-bold bg-gradient-to-r from-amber-400 to-orange-500 text-transparent bg-clip-text">NioNexus</h2>
599
- </div>
600
  </div>
601
-
602
- <ul class="space-y-3">
603
- <li class="flex items-center">
604
- <div class="w-6 h-6 rounded-full bg-orange-900/50 flex items-center justify-center mr-3">
605
- <i class="fas fa-lock-open text-amber-400 text-xs"></i>
606
- </div>
607
- <span>5% bonus on all winnings</span>
608
- </li>
609
- <li class="flex items-center">
610
- <div class="w-6 h-6 rounded-full bg-orange-900/50 flex items-center justify-center mr-3">
611
- <i class="fas fa-lock-open text-amber-400 text-xs"></i>
612
- </div>
613
- <span>Double weekend spins</span>
614
- </li>
615
- <li class="flex items-center">
616
- <div class="w-6 h-6 rounded-full bg-orange-900/50 flex items-center justify-center mr-3">
617
- <i class="fas fa-lock-open text-amber-400 text-xs"></i>
618
- </div>
619
- <span>5% weekly cashback</span>
620
- </li>
621
- <li class="flex items-center">
622
- <div class="w-6 h-6 rounded-full bg-orange-900/50 flex items-center justify-center mr-3">
623
- <i class="fas fa-gem text-amber-400 text-xs"></i>
624
- </div>
625
- <span>$100 monthly bonus</span>
626
- </li>
627
- </ul>
628
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
629
  </div>
630
  </div>
631
  </section>
@@ -643,25 +609,41 @@ But here is the full implementation with all animations in a single HTML file un
643
  </div>
644
 
645
  <div class="flex justify-between items-end px-4">
646
- <div class="text-center">
647
  <div class="bg-gradient-to-b bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1">
648
  <span class="font-bold text-amber-500">1</span>
649
  </div>
650
  <span class="text-xs">NioCore</span>
 
 
 
 
 
651
  </div>
652
- <div class="text-center">
653
  <div class="bg-gradient-to-b bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1">
654
  <span class="font-bold text-amber-500">2</span>
655
  </div>
656
  <span class="text-xs">NioPass</span>
 
 
 
 
 
657
  </div>
658
- <div class="text-center">
659
  <div class="bg-gradient-to-b bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1">
660
  <span class="font-bold text-amber-500">3</span>
661
  </div>
662
  <span class="text-xs">NioElite</span>
 
 
 
 
 
 
663
  </div>
664
- <div class="text-center relative">
665
  <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
666
  <div class="circle-pulse bg-orange-600/20 rounded-full"></div>
667
  </div>
@@ -669,8 +651,15 @@ But here is the full implementation with all animations in a single HTML file un
669
  <span class="font-bold text-white">4</span>
670
  </div>
671
  <span class="text-xs font-bold text-amber-400">NioPrime</span>
 
 
 
 
 
 
 
672
  </div>
673
- <div class="text-center">
674
  <div class="bg-gradient-to-b bg-gray-800/30 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1 border border-gray-700 relative">
675
  <span class="font-bold text-gray-600">5</span>
676
  <div class="absolute text-xs text-red-400">
@@ -678,8 +667,15 @@ But here is the full implementation with all animations in a single HTML file un
678
  </div>
679
  </div>
680
  <span class="text-xs text-gray-600">NioNexus</span>
 
 
 
 
 
 
 
681
  </div>
682
- <div class="text-center">
683
  <div class="bg-gradient-to-b bg-gray-800/30 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1 border border-gray-700 relative">
684
  <span class="font-bold text-gray-600">6</span>
685
  <div class="absolute text-xs text-red-400">
@@ -687,6 +683,14 @@ But here is the full implementation with all animations in a single HTML file un
687
  </div>
688
  </div>
689
  <span class="text-xs text-gray-600">NioLegend</span>
 
 
 
 
 
 
 
 
690
  </div>
691
  </div>
692
  </div>
@@ -830,7 +834,7 @@ But here is the full implementation with all animations in a single HTML file un
830
 
831
  <!-- FULL TIER LADDER -->
832
  <section>
833
- <div class="glass-card p-6 relative overflow-hidden">
834
  <div class="flex justify-between items-center mb-6">
835
  <h2 class="text-xl font-bold">VIP Tier Ladder</h2>
836
  <button id="toggleLadder" class="text-sm bg-gray-800/50 hover:bg-gray-700/50 py-1 px-3 rounded-full transition">
@@ -840,7 +844,7 @@ But here is the full implementation with all animations in a single HTML file un
840
 
841
  <div id="tierContainer">
842
  <div class="flex overflow-x-auto pb-4 space-x-6 px-2">
843
- <div class="tier-card glass-card p-4 flex flex-col items-center relative">
844
  <div class="w-16 h-16 bg-gradient-to-b from-green-600 to-emerald-900 rounded-full flex items-center justify-center mb-3">
845
  <i class="fas fa-leaf text-white"></i>
846
  </div>
@@ -868,7 +872,7 @@ But here is the full implementation with all animations in a single HTML file un
868
  <div class="text-xs text-purple-400 mt-1">Tier 3</div>
869
  </div>
870
 
871
- <div class="tier-card glass-card p-4 flex flex-col items-center relative border-2 border-orange-600/50">
872
  <div class="w-16 h-16 bg-gradient-to-b from-amber-600 to-orange-800 rounded-full flex items-center justify-center mb-3">
873
  <i class="fas fa-crown text-white"></i>
874
  </div>
@@ -876,7 +880,7 @@ But here is the full implementation with all animations in a single HTML file un
876
  <div class="text-xs text-orange-400 mt-1">Your Tier</div>
877
  </div>
878
 
879
- <div class="tier-card glass-card p-4 flex flex-col items-center relative locked">
880
  <div class="relative">
881
  <div class="w-16 h-16 bg-gradient-to-b from-gray-600 to-gray-900 rounded-full flex items-center justify-center mb-3">
882
  <i class="fas fa-shield-alt text-gray-400"></i>
 
50
  </script>
51
  <style>
52
  body {
53
+ background: #000000;
54
  min-height: 100vh;
55
  font-family: 'Poppins', sans-serif;
56
  overflow-x: hidden;
 
541
  </div>
542
  </section>
543
 
544
+ <!-- CURRENT VS NEXT TIER - Compact Version -->
545
+ <section class="mb-10">
546
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
547
  <!-- Current Tier -->
548
+ <div class="glass-card hover-glow p-4">
549
+ <div class="flex items-center mb-3">
550
+ <i class="fas fa-crown text-yellow-500 text-xl mr-3"></i>
551
+ <div>
552
+ <p class="text-sm text-gray-400">Current Tier</p>
553
+ <h2 class="text-xl font-bold text-amber-400">NioPrime</h2>
 
 
 
 
554
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
555
  </div>
556
+ <ul class="text-sm space-y-2">
557
+ <li class="flex items-center">
558
+ <i class="fas fa-check text-green-400 text-xs mr-2"></i>
559
+ <span>15% faster coin recharge</span>
560
+ </li>
561
+ <li class="flex items-center">
562
+ <i class="fas fa-check text-green-400 text-xs mr-2"></i>
563
+ <span>4% weekly cashback</span>
564
+ </li>
565
+ <li class="flex items-center">
566
+ <i class="fas fa-gift text-amber-400 text-xs mr-2"></i>
567
+ <span>$50 monthly bonus</span>
568
+ </li>
569
+ </ul>
570
  </div>
571
 
572
  <!-- Next Tier -->
573
+ <div class="glass-card hover-glow p-4">
574
+ <div class="flex items-center mb-3">
575
+ <i class="fas fa-star text-amber-400 text-xl mr-3 animate-pulse"></i>
576
+ <div>
577
+ <p class="text-sm text-gray-400">Next Tier</p>
578
+ <h2 class="text-xl font-bold text-orange-400">NioNexus</h2>
 
 
 
 
579
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
580
  </div>
581
+ <ul class="text-sm space-y-2">
582
+ <li class="flex items-center">
583
+ <i class="fas fa-lock-open text-amber-400 text-xs mr-2"></i>
584
+ <span>5% bonus on winnings</span>
585
+ </li>
586
+ <li class="flex items-center">
587
+ <i class="fas fa-lock-open text-amber-400 text-xs mr-2"></i>
588
+ <span>Double weekend spins</span>
589
+ </li>
590
+ <li class="flex items-center">
591
+ <i class="fas fa-gem text-amber-400 text-xs mr-2"></i>
592
+ <span>$100 monthly bonus</span>
593
+ </li>
594
+ </ul>
595
  </div>
596
  </div>
597
  </section>
 
609
  </div>
610
 
611
  <div class="flex justify-between items-end px-4">
612
+ <div class="text-center relative group">
613
  <div class="bg-gradient-to-b bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1">
614
  <span class="font-bold text-amber-500">1</span>
615
  </div>
616
  <span class="text-xs">NioCore</span>
617
+ <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800/90 backdrop-blur-sm text-xs p-2 rounded-lg whitespace-nowrap">
618
+ <div class="text-amber-400 font-bold">Tier 1</div>
619
+ <div>5% faster coin recharge</div>
620
+ <div>1% weekly cashback</div>
621
+ </div>
622
  </div>
623
+ <div class="text-center relative group">
624
  <div class="bg-gradient-to-b bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1">
625
  <span class="font-bold text-amber-500">2</span>
626
  </div>
627
  <span class="text-xs">NioPass</span>
628
+ <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800/90 backdrop-blur-sm text-xs p-2 rounded-lg whitespace-nowrap">
629
+ <div class="text-amber-400 font-bold">Tier 2</div>
630
+ <div>8% faster coin recharge</div>
631
+ <div>2% weekly cashback</div>
632
+ </div>
633
  </div>
634
+ <div class="text-center relative group">
635
  <div class="bg-gradient-to-b bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1">
636
  <span class="font-bold text-amber-500">3</span>
637
  </div>
638
  <span class="text-xs">NioElite</span>
639
+ <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800/90 backdrop-blur-sm text-xs p-2 rounded-lg whitespace-nowrap">
640
+ <div class="text-amber-400 font-bold">Tier 3</div>
641
+ <div>10% faster coin recharge</div>
642
+ <div>3% weekly cashback</div>
643
+ <div>$25 monthly bonus</div>
644
+ </div>
645
  </div>
646
+ <div class="text-center relative group">
647
  <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
648
  <div class="circle-pulse bg-orange-600/20 rounded-full"></div>
649
  </div>
 
651
  <span class="font-bold text-white">4</span>
652
  </div>
653
  <span class="text-xs font-bold text-amber-400">NioPrime</span>
654
+ <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800/90 backdrop-blur-sm text-xs p-2 rounded-lg whitespace-nowrap">
655
+ <div class="text-amber-400 font-bold">Your Tier</div>
656
+ <div>15% faster coin recharge</div>
657
+ <div>4% weekly cashback</div>
658
+ <div>$50 monthly bonus</div>
659
+ <div>Exclusive bonus spins</div>
660
+ </div>
661
  </div>
662
+ <div class="text-center relative group">
663
  <div class="bg-gradient-to-b bg-gray-800/30 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1 border border-gray-700 relative">
664
  <span class="font-bold text-gray-600">5</span>
665
  <div class="absolute text-xs text-red-400">
 
667
  </div>
668
  </div>
669
  <span class="text-xs text-gray-600">NioNexus</span>
670
+ <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800/90 backdrop-blur-sm text-xs p-2 rounded-lg whitespace-nowrap">
671
+ <div class="text-amber-400 font-bold">Tier 5 (Locked)</div>
672
+ <div>5% bonus on all winnings</div>
673
+ <div>Double weekend spins</div>
674
+ <div>5% weekly cashback</div>
675
+ <div>$100 monthly bonus</div>
676
+ </div>
677
  </div>
678
+ <div class="text-center relative group">
679
  <div class="bg-gradient-to-b bg-gray-800/30 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1 border border-gray-700 relative">
680
  <span class="font-bold text-gray-600">6</span>
681
  <div class="absolute text-xs text-red-400">
 
683
  </div>
684
  </div>
685
  <span class="text-xs text-gray-600">NioLegend</span>
686
+ <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800/90 backdrop-blur-sm text-xs p-2 rounded-lg whitespace-nowrap">
687
+ <div class="text-amber-400 font-bold">Tier 6 (Locked)</div>
688
+ <div>10% bonus on all winnings</div>
689
+ <div>Triple weekend spins</div>
690
+ <div>7% weekly cashback</div>
691
+ <div>$250 monthly bonus</div>
692
+ <div>Personal VIP host</div>
693
+ </div>
694
  </div>
695
  </div>
696
  </div>
 
834
 
835
  <!-- FULL TIER LADDER -->
836
  <section>
837
+ <div class="p-6 relative overflow-hidden">
838
  <div class="flex justify-between items-center mb-6">
839
  <h2 class="text-xl font-bold">VIP Tier Ladder</h2>
840
  <button id="toggleLadder" class="text-sm bg-gray-800/50 hover:bg-gray-700/50 py-1 px-3 rounded-full transition">
 
844
 
845
  <div id="tierContainer">
846
  <div class="flex overflow-x-auto pb-4 space-x-6 px-2">
847
+ <div class="tier-card p-4 flex flex-col items-center relative">
848
  <div class="w-16 h-16 bg-gradient-to-b from-green-600 to-emerald-900 rounded-full flex items-center justify-center mb-3">
849
  <i class="fas fa-leaf text-white"></i>
850
  </div>
 
872
  <div class="text-xs text-purple-400 mt-1">Tier 3</div>
873
  </div>
874
 
875
+ <div class="tier-card p-4 flex flex-col items-center relative border-2 border-orange-600/50">
876
  <div class="w-16 h-16 bg-gradient-to-b from-amber-600 to-orange-800 rounded-full flex items-center justify-center mb-3">
877
  <i class="fas fa-crown text-white"></i>
878
  </div>
 
880
  <div class="text-xs text-orange-400 mt-1">Your Tier</div>
881
  </div>
882
 
883
+ <div class="tier-card p-4 flex flex-col items-center relative locked">
884
  <div class="relative">
885
  <div class="w-16 h-16 bg-gradient-to-b from-gray-600 to-gray-900 rounded-full flex items-center justify-center mb-3">
886
  <i class="fas fa-shield-alt text-gray-400"></i>