Hugging Face's logo

Spaces:
ProjectGenesis
/
new-ui-1
Running

App Files Community
ProjectGenesis commited on
Commit
e5df486
·
verified ·
1 Parent(s): aee9d28

use a different design for the "Play" buttons - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +35 -11
index.html CHANGED
@@ -504,7 +504,7 @@
504
  <p class="text-sm mb-3">200% bonus + 50 free spins on first deposit!</p>
505
  <button class="px-4 py-1.5 glass-panel rounded-full text-xs font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center">
506
  <span class="relative z-10">CLAIM NOW</span>
507
- <div class="absolute inset-0 rounded-full bg-gradient-to-r from-red-500/80 to-pink-600/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
508
  </button>
509
  </div>
510
  </div>
@@ -807,7 +807,7 @@
807
 
808
  <div class="flex justify-between mt-3">
809
  <span class="text-sm">Your position: #24</span>
810
- <button class="px-3 py-1 bg-gradient-to-r from-niopurple to-purple-600 rounded-full text-xs font-semibold">PLAY NOW</button>
811
  </div>
812
  </div>
813
  </div>
@@ -983,7 +983,7 @@
983
  </div>
984
  <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
985
  <span class="relative z-10">PLAY</span>
986
- <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-amber-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
987
  </button>
988
  </div>
989
  </div>
@@ -1005,7 +1005,10 @@
1005
  <div class="text-xs">
1006
  <i class="fas fa-star text-amber-300"></i> 4.9
1007
  </div>
1008
- <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
 
 
 
1009
  </div>
1010
  </div>
1011
  </div>
@@ -1023,7 +1026,10 @@
1023
  <div class="text-xs">
1024
  <i class="fas fa-star text-amber-300"></i> 4.7
1025
  </div>
1026
- <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
 
 
 
1027
  </div>
1028
  </div>
1029
  </div>
@@ -1047,7 +1053,10 @@
1047
  <div class="text-xs">
1048
  <i class="fas fa-star text-amber-300"></i> 4.9
1049
  </div>
1050
- <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
 
 
 
1051
  </div>
1052
  </div>
1053
  </div>
@@ -1065,7 +1074,10 @@
1065
  <div class="text-xs">
1066
  <i class="fas fa-star text-amber-300"></i> 4.8
1067
  </div>
1068
- <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
 
 
 
1069
  </div>
1070
  </div>
1071
  </div>
@@ -1083,7 +1095,10 @@
1083
  <div class="text-xs">
1084
  <i class="fas fa-star text-amber-300"></i> 4.7
1085
  </div>
1086
- <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
 
 
 
1087
  </div>
1088
  </div>
1089
  </div>
@@ -1110,7 +1125,10 @@
1110
  <div class="text-xs">
1111
  <i class="fas fa-star text-amber-300"></i> 4.6
1112
  </div>
1113
- <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
 
 
 
1114
  </div>
1115
  </div>
1116
  </div>
@@ -1131,7 +1149,10 @@
1131
  <div class="text-xs">
1132
  <i class="fas fa-star text-amber-300"></i> 4.5
1133
  </div>
1134
- <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
 
 
 
1135
  </div>
1136
  </div>
1137
  </div>
@@ -1152,7 +1173,10 @@
1152
  <div class="text-xs">
1153
  <i class="fas fa-star text-amber-300"></i> 4.8
1154
  </div>
1155
- <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
 
 
 
1156
  </div>
1157
  </div>
1158
  </div>
 
504
  <p class="text-sm mb-3">200% bonus + 50 free spins on first deposit!</p>
505
  <button class="px-4 py-1.5 glass-panel rounded-full text-xs font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center">
506
  <span class="relative z-10">CLAIM NOW</span>
507
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-gold-500/80 to-black-600/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
508
  </button>
509
  </div>
510
  </div>
 
807
 
808
  <div class="flex justify-between mt-3">
809
  <span class="text-sm">Your position: #24</span>
810
+ <button class="px-3 py-1 bg-gradient-to-r from-niogold to-black-600 rounded-full text-xs font-semibold">PLAY NOW</button>
811
  </div>
812
  </div>
813
  </div>
 
983
  </div>
984
  <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
985
  <span class="relative z-10">PLAY</span>
986
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
987
  </button>
988
  </div>
989
  </div>
 
1005
  <div class="text-xs">
1006
  <i class="fas fa-star text-amber-300"></i> 4.9
1007
  </div>
1008
+ <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
1009
+ <span class="relative z-10">PLAY</span>
1010
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
1011
+ </button>
1012
  </div>
1013
  </div>
1014
  </div>
 
1026
  <div class="text-xs">
1027
  <i class="fas fa-star text-amber-300"></i> 4.7
1028
  </div>
1029
+ <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
1030
+ <span class="relative z-10">PLAY</span>
1031
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
1032
+ </button>
1033
  </div>
1034
  </div>
1035
  </div>
 
1053
  <div class="text-xs">
1054
  <i class="fas fa-star text-amber-300"></i> 4.9
1055
  </div>
1056
+ <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
1057
+ <span class="relative z-10">PLAY</span>
1058
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
1059
+ </button>
1060
  </div>
1061
  </div>
1062
  </div>
 
1074
  <div class="text-xs">
1075
  <i class="fas fa-star text-amber-300"></i> 4.8
1076
  </div>
1077
+ <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
1078
+ <span class="relative z-10">PLAY</span>
1079
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
1080
+ </button>
1081
  </div>
1082
  </div>
1083
  </div>
 
1095
  <div class="text-xs">
1096
  <i class="fas fa-star text-amber-300"></i> 4.7
1097
  </div>
1098
+ <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
1099
+ <span class="relative z-10">PLAY</span>
1100
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
1101
+ </button>
1102
  </div>
1103
  </div>
1104
  </div>
 
1125
  <div class="text-xs">
1126
  <i class="fas fa-star text-amber-300"></i> 4.6
1127
  </div>
1128
+ <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
1129
+ <span class="relative z-10">PLAY</span>
1130
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
1131
+ </button>
1132
  </div>
1133
  </div>
1134
  </div>
 
1149
  <div class="text-xs">
1150
  <i class="fas fa-star text-amber-300"></i> 4.5
1151
  </div>
1152
+ <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
1153
+ <span class="relative z-10">PLAY</span>
1154
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
1155
+ </button>
1156
  </div>
1157
  </div>
1158
  </div>
 
1173
  <div class="text-xs">
1174
  <i class="fas fa-star text-amber-300"></i> 4.8
1175
  </div>
1176
+ <button class="px-3 py-1 glass-panel text-xs rounded-full font-semibold glow-text hover:shadow-glow transition-all duration-300 flex items-center justify-center">
1177
+ <span class="relative z-10">PLAY</span>
1178
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-niogold/80 to-black-100/80 opacity-70 hover:opacity-100 transition-opacity duration-300"></div>
1179
+ </button>
1180
  </div>
1181
  </div>
1182
  </div>