Hugging Face's logo

Spaces:
ProjectGenesis
/
tournament-ui-redesign
Running

App Files Community
ProjectGenesis commited on
Commit
f0a13e6
·
verified ·
1 Parent(s): f64316d

add this navbar on top of the Current Tournament Banner <!-- Navbar --> <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel"> <div class="flex items-center"> <div class="w-10 h-10 flex items-center justify-center bg-niogold rounded-full"> <span class="text-xl font-bold text-white">N</span> </div> <span class="ml-2 text-xl font-bold text-niogold">Nioplay</span> </div> <div class="flex-1 mx-4"> <div class="relative glass-panel"> <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-nioglass rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-niogold"> <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i> </div> </div> <div class="glass-panel px-4 py-1 flex items-center"> <i class="fas fa-coins text-niogold mr-2"></i> <span class="mr-2 text-white" style="text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;">GC: 25,000</span> <div class="h-5 w-px bg-gray-600 mx-2"></div> <i class="fas fa-trophy text-niogold mr-2"></i> <span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span> <div class="h-5 w-px bg-gray-600 mx-2"></div> <div class="group relative"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-niogold hover:animate-[iconBounce_0.5s_ease-in-out] animate-[iconGlow_2s_ease-in-out_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> </svg> <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs animate-pulse">3</div> <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"> Shopping Cart </div> </div> </div> <div class="ml-4 flex items-center"> <div class="relative group"> <!-- Profile Avatar with animated border --> <div class="w-12 h-12 rounded-full bg-gradient-to-br from-niogold via-amber-200 to-niopurple p-0.5 animate-spin-slow"> <div class="w-full h-full rounded-full bg-gradient flex items-center justify-center relative overflow-hidden"> <i class="fas fa-crown text-niogold text-xl z-10"></i> <!-- Shimmer effect --> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> </div> </div> <!-- VIP Badge with glow --> <div class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-niogold to-amber-200 flex items-center justify-center shadow-glow animate-pulse"> <span class="text-xs font-bold text-black">5</span> </div> <!-- VIP Level Indicator with animation --> <div class="absolute -top-2 left-1/2 -translate-x-1/2 bg-gradient-to-r from-niopurple to-niogold px-2 py-0.5 rounded-full text-xs font-bold whitespace-nowrap transform -translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300"> <span class="text-white">Diamond Tier</span> <div class="absolute bottom-0 left-1/2 w-2 h-2 bg-gradient-to-r from-niopurple to-niogold transform -translate-x-1/2 translate-y-1/2 rotate-45"></div> </div> </div> <!-- Notification Bell --> <div class="relative ml-3 group"> <i class="fas fa-bell text-xl text-niogold cursor-pointer hover:animate-[iconBounce_0.5s_ease-in-out]"></i> <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</div> <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"> Notifications </div> </div> </div> - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +66 -22
index.html CHANGED
@@ -213,32 +213,76 @@
213
  </style>
214
  </head>
215
  <body>
216
- <!-- Main Container -->
217
- <div class="min-h-screen w-full max-w-7xl mx-auto px-4 py-8">
218
- <!-- Header -->
219
- <header class="flex justify-between items-center py-4 mb-8">
220
- <div class="flex items-center">
221
- <div class="w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center mr-3">
222
- <i class="fas fa-dice text-2xl text-dark-bg"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  </div>
224
- <h1 class="text-3xl font-bold text-white">NEON<span class="text-neon-yellow">CASINO</span></h1>
225
  </div>
226
- <div class="flex items-center space-x-4">
227
- <div class="relative">
228
- <button class="bg-glass-bg text-white px-4 py-2 rounded-full flex items-center">
229
- <i class="fas fa-coins text-neon-yellow mr-2"></i>
230
- <span>5,250</span>
231
- </button>
232
- <span class="absolute -top-2 -right-2 bg-neon-orange text-dark-bg text-xs font-bold rounded-full h-6 w-6 flex items-center justify-center">+25</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  </div>
234
- <button class="bg-glass-bg w-10 h-10 rounded-full flex items-center justify-center">
235
- <i class="fas fa-bell text-neon-yellow"></i>
236
- </button>
237
- <button class="bg-glass-bg w-10 h-10 rounded-full flex items-center justify-center">
238
- <img src="https://i.pravatar.cc/150?img=32" class="rounded-full w-8 h-8" alt="User">
239
- </button>
240
  </div>
241
- </header>
 
 
 
 
242
 
243
  <!-- Current Tournament Banner -->
244
  <section class="glass-panel glow-border mb-8 relative overflow-hidden">
 
213
  </style>
214
  </head>
215
  <body>
216
+ <!-- Navbar -->
217
+ <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel">
218
+ <div class="flex items-center">
219
+ <div class="w-10 h-10 flex items-center justify-center bg-niogold rounded-full">
220
+ <span class="text-xl font-bold text-white">N</span>
221
+ </div>
222
+ <span class="ml-2 text-xl font-bold text-niogold">Nioplay</span>
223
+ </div>
224
+
225
+ <div class="flex-1 mx-4">
226
+ <div class="relative glass-panel">
227
+ <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-nioglass rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-niogold">
228
+ <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="glass-panel px-4 py-1 flex items-center">
233
+ <i class="fas fa-coins text-niogold mr-2"></i>
234
+ <span class="mr-2 text-white" style="text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;">GC: 25,000</span>
235
+ <div class="h-5 w-px bg-gray-600 mx-2"></div>
236
+ <i class="fas fa-trophy text-niogold mr-2"></i>
237
+ <span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span>
238
+ <div class="h-5 w-px bg-gray-600 mx-2"></div>
239
+ <div class="group relative">
240
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-niogold hover:animate-[iconBounce_0.5s_ease-in-out] animate-[iconGlow_2s_ease-in-out_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
241
+ <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
242
+ </svg>
243
+ <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs animate-pulse">3</div>
244
+ <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
245
+ Shopping Cart
246
  </div>
 
247
  </div>
248
+ </div>
249
+
250
+ <div class="ml-4 flex items-center">
251
+ <div class="relative group">
252
+ <!-- Profile Avatar with animated border -->
253
+ <div class="w-12 h-12 rounded-full bg-gradient-to-br from-niogold via-amber-200 to-niopurple p-0.5 animate-spin-slow">
254
+ <div class="w-full h-full rounded-full bg-gradient flex items-center justify-center relative overflow-hidden">
255
+ <i class="fas fa-crown text-niogold text-xl z-10"></i>
256
+ <!-- Shimmer effect -->
257
+ <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- VIP Badge with glow -->
262
+ <div class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-niogold to-amber-200 flex items-center justify-center shadow-glow animate-pulse">
263
+ <span class="text-xs font-bold text-black">5</span>
264
+ </div>
265
+
266
+ <!-- VIP Level Indicator with animation -->
267
+ <div class="absolute -top-2 left-1/2 -translate-x-1/2 bg-gradient-to-r from-niopurple to-niogold px-2 py-0.5 rounded-full text-xs font-bold whitespace-nowrap transform -translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
268
+ <span class="text-white">Diamond Tier</span>
269
+ <div class="absolute bottom-0 left-1/2 w-2 h-2 bg-gradient-to-r from-niopurple to-niogold transform -translate-x-1/2 translate-y-1/2 rotate-45"></div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Notification Bell -->
274
+ <div class="relative ml-3 group">
275
+ <i class="fas fa-bell text-xl text-niogold cursor-pointer hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
276
+ <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</div>
277
+ <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
278
+ Notifications
279
  </div>
 
 
 
 
 
 
280
  </div>
281
+ </div>
282
+ </header>
283
+
284
+ <!-- Main Container -->
285
+ <div class="min-h-screen w-full max-w-7xl mx-auto px-4 pt-24 pb-8">
286
 
287
  <!-- Current Tournament Banner -->
288
  <section class="glass-panel glow-border mb-8 relative overflow-hidden">