Hugging Face's logo

Spaces:
ProjectGenesis
/
new-ui-1
Running

App Files Community
ProjectGenesis commited on
Commit
1d17cc4
·
verified ·
1 Parent(s): 336742e

make the game providers section and all of it's icons smaller - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +132 -47
index.html CHANGED
@@ -176,6 +176,11 @@
176
  50% { opacity: 1; }
177
  100% { opacity: 0.8; }
178
  }
 
 
 
 
 
179
 
180
  .vip-gradient-bg {
181
  background: linear-gradient(to right, #1A1A1A, #2D1420, #1A1A1A);
@@ -228,6 +233,19 @@
228
  0% { transform: rotate(0deg); }
229
  100% { transform: rotate(360deg); }
230
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
231
 
232
  @keyframes slide-down {
233
  0%, 20% { transform: translateY(0); }
@@ -337,31 +355,31 @@
337
  <div class="fixed left-0 top-14 bottom-20 w-16 flex flex-col items-center py-4 z-40">
338
  <div class="flex flex-col space-y-4 mt-4">
339
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
340
- <i class="fas fa-home text-xl"></i>
341
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Home</span>
342
  </a>
343
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
344
- <i class="fas fa-dice text-xl"></i>
345
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Slots</span>
346
  </a>
347
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
348
- <i class="fas fa-chess-queen text-xl"></i>
349
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Table Games</span>
350
  </a>
351
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
352
- <i class="fas fa-video text-xl"></i>
353
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Live Casino</span>
354
  </a>
355
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
356
- <i class="fas fa-trophy text-xl"></i>
357
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Tournaments</span>
358
  </a>
359
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
360
- <i class="fas fa-crown text-xl"></i>
361
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">VIP</span>
362
  </a>
363
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
364
- <i class="fas fa-wallet text-xl"></i>
365
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Wallet</span>
366
  </a>
367
  </div>
@@ -685,48 +703,115 @@
685
  </div>
686
  </div>
687
 
688
- <!-- Game Providers Marquee -->
689
- <div class="mb-6 overflow-hidden">
690
- <div class="marquee-container">
691
- <div class="marquee flex space-x-8 py-2">
692
- <!-- 12 game provider names -->
693
- <div class="flex-shrink-0 flex items-center">
694
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Pragmatic</span>
695
- </div>
696
- <div class="flex-shrink-0 flex items-center">
697
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Playtech</span>
698
- </div>
699
- <div class="flex-shrink-0 flex items-center">
700
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">NetEnt</span>
701
- </div>
702
- <div class="flex-shrink-0 flex items-center">
703
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Microgaming</span>
704
- </div>
705
- <div class="flex-shrink-0 flex items-center">
706
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Evolution</span>
707
- </div>
708
- <div class="flex-shrink-0 flex items-center">
709
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Yggdrasil</span>
710
- </div>
711
- <div class="flex-shrink-0 flex items-center">
712
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Red Tiger</span>
713
- </div>
714
- <div class="flex-shrink-0 flex items-center">
715
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Play'n GO</span>
716
- </div>
717
- <div class="flex-shrink-0 flex items-center">
718
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Quickspin</span>
719
- </div>
720
- <div class="flex-shrink-0 flex items-center">
721
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Big Time Gaming</span>
722
- </div>
723
- <div class="flex-shrink-0 flex items-center">
724
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">Relax Gaming</span>
725
- </div>
726
- <div class="flex-shrink-0 flex items-center">
727
- <span class="text-gray-400 text-lg font-medium opacity-80 hover:opacity-100 transition-opacity">NoLimit City</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
728
  </div>
729
  </div>
 
 
 
 
 
 
 
 
 
730
  </div>
731
  </div>
732
 
 
176
  50% { opacity: 1; }
177
  100% { opacity: 0.8; }
178
  }
179
+
180
+ @keyframes iconBounce {
181
+ 0%, 100% { transform: translateY(0) scale(1); }
182
+ 50% { transform: translateY(-5px) scale(1.1); }
183
+ }
184
 
185
  .vip-gradient-bg {
186
  background: linear-gradient(to right, #1A1A1A, #2D1420, #1A1A1A);
 
233
  0% { transform: rotate(0deg); }
234
  100% { transform: rotate(360deg); }
235
  }
236
+
237
+ @keyframes rotate-y-180 {
238
+ 0% { transform: rotateY(0deg); }
239
+ 100% { transform: rotateY(180deg); }
240
+ }
241
+
242
+ .provider-card:hover .provider-front {
243
+ animation: rotate-y-180 0.5s ease-in-out forwards;
244
+ }
245
+
246
+ .provider-card {
247
+ perspective: 1000px;
248
+ }
249
 
250
  @keyframes slide-down {
251
  0%, 20% { transform: translateY(0); }
 
355
  <div class="fixed left-0 top-14 bottom-20 w-16 flex flex-col items-center py-4 z-40">
356
  <div class="flex flex-col space-y-4 mt-4">
357
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
358
+ <i class="fas fa-home text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
359
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Home</span>
360
  </a>
361
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
362
+ <i class="fas fa-dice text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
363
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Slots</span>
364
  </a>
365
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
366
+ <i class="fas fa-chess-queen text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
367
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Table Games</span>
368
  </a>
369
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
370
+ <i class="fas fa-video text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
371
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Live Casino</span>
372
  </a>
373
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
374
+ <i class="fas fa-trophy text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
375
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Tournaments</span>
376
  </a>
377
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
378
+ <i class="fas fa-crown text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
379
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">VIP</span>
380
  </a>
381
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
382
+ <i class="fas fa-wallet text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
383
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Wallet</span>
384
  </a>
385
  </div>
 
703
  </div>
704
  </div>
705
 
706
+ <!-- Game Providers Section -->
707
+ <div class="mb-6">
708
+ <div class="flex items-center mb-4">
709
+ <div class="w-3 h-6 bg-gradient-to-r from-niogold to-amber-200 rounded mr-2"></div>
710
+ <h3 class="font-bold">Premium Game Providers</h3>
711
+ </div>
712
+
713
+ <div class="relative">
714
+ <div class="marquee-container overflow-hidden">
715
+ <div class="marquee flex space-x-4 py-2">
716
+ <!-- Provider Logos with animated cards -->
717
+ <div class="flex-shrink-0 provider-card group">
718
+ <div class="w-24 h-24 rounded-xl bg-gray-800 flex items-center justify-center p-2 transform group-hover:rotate-y-180 transition-all duration-500">
719
+ <div class="provider-front flex flex-col items-center">
720
+ <div class="w-12 h-12 bg-gradient-to-br from-niogold to-amber-100 rounded-full flex items-center justify-center mb-2">
721
+ <i class="fas fa-dice text-gray-900 text-xl"></i>
722
+ </div>
723
+ <span class="text-xs font-medium text-niogold">Pragmatic</span>
724
+ </div>
725
+ </div>
726
+ </div>
727
+
728
+ <div class="flex-shrink-0 provider-card group">
729
+ <div class="w-24 h-24 rounded-xl glass-panel flex items-center justify-center p-2 transform group-hover:rotate-y-180 transition-all duration-500">
730
+ <div class="provider-front flex flex-col items-center">
731
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-300 rounded-full flex items-center justify-center mb-2">
732
+ <i class="fas fa-chess-queen text-white text-xl"></i>
733
+ </div>
734
+ <span class="text-sm font-medium text-blue-400">Playtech</span>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <div class="flex-shrink-0 provider-card group">
740
+ <div class="w-24 h-24 rounded-xl glass-panel flex items-center justify-center p-2 transform group-hover:rotate-y-180 transition-all duration-500">
741
+ <div class="provider-front flex flex-col items-center">
742
+ <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-300 rounded-full flex items-center justify-center mb-2">
743
+ <i class="fas fa-leaf text-white text-xl"></i>
744
+ </div>
745
+ <span class="text-sm font-medium text-green-400">NetEnt</span>
746
+ </div>
747
+ </div>
748
+ </div>
749
+
750
+ <div class="flex-shrink-0 provider-card group">
751
+ <div class="w-24 h-24 rounded-xl glass-panel flex items-center justify-center p-2 transform group-hover:rotate-y-180 transition-all duration-500">
752
+ <div class="provider-front flex flex-col items-center">
753
+ <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mb-2">
754
+ <i class="fas fa-gamepad text-white text-xl"></i>
755
+ </div>
756
+ <span class="text-sm font-medium text-purple-400">Microgaming</span>
757
+ </div>
758
+ </div>
759
+ </div>
760
+
761
+ <div class="flex-shrink-0 provider-card group">
762
+ <div class="w-24 h-24 rounded-xl glass-panel flex items-center justify-center p-2 transform group-hover:rotate-y-180 transition-all duration-500">
763
+ <div class="provider-front flex flex-col items-center">
764
+ <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center mb-2">
765
+ <i class="fas fa-fire text-white text-xl"></i>
766
+ </div>
767
+ <span class="text-sm font-medium text-red-400">Evolution</span>
768
+ </div>
769
+ </div>
770
+ </div>
771
+
772
+ <div class="flex-shrink-0 provider-card group">
773
+ <div class="w-24 h-24 rounded-xl glass-panel flex items-center justify-center p-2 transform group-hover:rotate-y-180 transition-all duration-500">
774
+ <div class="provider-front flex flex-col items-center">
775
+ <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-amber-500 rounded-full flex items-center justify-center mb-2">
776
+ <i class="fas fa-tree text-gray-900 text-xl"></i>
777
+ </div>
778
+ <span class="text-sm font-medium text-yellow-400">Yggdrasil</span>
779
+ </div>
780
+ </div>
781
+ </div>
782
+
783
+ <div class="flex-shrink-0 provider-card group">
784
+ <div class="w-24 h-24 rounded-xl glass-panel flex items-center justify-center p-2 transform group-hover:rotate-y-180 transition-all duration-500">
785
+ <div class="provider-front flex flex-col items-center">
786
+ <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-full flex items-center justify-center mb-2">
787
+ <i class="fas fa-paw text-white text-xl"></i>
788
+ </div>
789
+ <span class="text-sm font-medium text-orange-400">Red Tiger</span>
790
+ </div>
791
+ </div>
792
+ </div>
793
+
794
+ <div class="flex-shrink-0 provider-card group">
795
+ <div class="w-24 h-24 rounded-xl glass-panel flex items-center justify-center p-2 transform group-hover:rotate-y-180 transition-all duration-500">
796
+ <div class="provider-front flex flex-col items-center">
797
+ <div class="w-12 h-12 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-full flex items-center justify-center mb-2">
798
+ <i class="fas fa-play text-white text-xl"></i>
799
+ </div>
800
+ <span class="text-sm font-medium text-teal-400">Play'n GO</span>
801
+ </div>
802
+ </div>
803
+ </div>
804
  </div>
805
  </div>
806
+
807
+ <div class="absolute top-0 right-0 h-full w-16 bg-gradient-to-l from-black to-transparent z-10 pointer-events-none"></div>
808
+ <div class="absolute top-0 left-0 h-full w-16 bg-gradient-to-r from-black to-transparent z-10 pointer-events-none"></div>
809
+ </div>
810
+
811
+ <div class="flex justify-center mt-4">
812
+ <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 rounded-full text-xs font-semibold text-gray-900 flex items-center">
813
+ <i class="fas fa-th-large mr-1 text-xs"></i> View All
814
+ </button>
815
  </div>
816
  </div>
817