Spaces:
Running
Running
Ctrl+K
- 1.52 kB initial commit
- 212 Bytes add this on top of the Header 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> </header> - Initial Deployment
- 37.8 kB add glass card animation for the header banner - Follow Up Deployment
- 388 Bytes initial commit