Spaces:

ProjectGenesis
/

store-page-redesign

Running

App Files Files Community

ProjectGenesis commited on Aug 4, 2025

Commit

1e21670

verified ·

1 Parent(s): 466a2f4

remove glass card animation on the Navbar - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +9 -150

index.html CHANGED Viewed

@@ -222,164 +222,23 @@
     </style>
 </head>
 <body class="gradient-bg min-h-screen flex flex-col">
-    <!-- Navbar -->
-    <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-card glow-effect">
-        <div class="flex items-center">
-            <div class="w-10 h-10 flex items-center justify-center bg-prime-yellow rounded-full">
-                <span class="text-xl font-bold text-white">N</span>
-            </div>
-            <span class="ml-2 text-xl font-bold text-prime-yellow">Nioplay</span>
-        </div>
-        <div class="flex-1 mx-4">
-            <div class="relative glass-card">
-                <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-transparent rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-prime-yellow placeholder-gray-400">
-                <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
-            </div>
-        </div>
-        <div class="glass-card px-4 py-1 flex items-center">
-            <i class="fas fa-coins text-prime-yellow mr-2"></i>
-            <span class="mr-2 text-white" style="text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;">SC: 25,000</span>
-            <div class="h-5 w-px bg-gray-600 mx-2"></div>
-            <i class="fas fa-trophy text-prime-yellow mr-2"></i>
-            <span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">BC: 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-prime-yellow 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-prime-yellow via-amber-200 to-purple-600 p-0.5 animate-spin-slow">
-                    <div class="w-full h-full flex items-center justify-center relative overflow-hidden">
-                        <i class="fas fa-crown text-prime-yellow 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-prime-yellow to-amber-200 flex items-center justify-center shadow-xl 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-purple-600 to-prime-yellow 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-purple-600 to-prime-yellow 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-prime-yellow 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>
-    <!-- Navbar -->
-    <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-card glow-effect">
-        <div class="flex items-center">
-            <div class="w-10 h-10 flex items-center justify-center bg-prime-yellow rounded-full">
-                <span class="text-xl font-bold text-white">N</span>
-            </div>
-            <span class="ml-2 text-xl font-bold text-prime-yellow">Nioplay</span>
-        </div>
-        <div class="flex-1 mx-4">
-            <div class="relative glass-card">
-                <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-transparent rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-prime-yellow placeholder-gray-400">
-                <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
-            </div>
-        </div>
-        <div class="glass-card px-4 py-1 flex items-center">
-            <i class="fas fa-coins text-prime-yellow 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-prime-yellow 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-prime-yellow 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-prime-yellow via-amber-200 to-purple-600 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-prime-yellow 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-prime-yellow 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-purple-600 to-prime-yellow 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-purple-600 to-prime-yellow 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-prime-yellow 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>
-    <!-- Navbar -->
-    ... code ...
-    <!-- Navbar -->
-    ... [the entire navbar code with our modifications] ...
     <!-- Header Banner -->
-    <header class="glass-card glow-effect relative mt-16 mx-4 md:mx-10 p-6 md:p-8">
         <div class="flex flex-col md:flex-row justify-between items-center">
             <div>
-                <h1 class="text-2xl md:text-3xl font-bold mb-2"><i class="fas fa-shopping-cart mr-3 text-prime-yellow"></i>🛒 NioPlay Coin Store</h1>
-                <p class="text-gray-300 mb-4">Get coins instantly. Boost your play. Unlock more wins.</p>
                 <div class="flex items-center">
-                    <div class="flex items-center px-3 py-1 glass-card text-prime-yellow">
-                        <i class="fas fa-coins mr-2"></i>
-                        <span>SC: <span class="font-bold">12,300</span></span>
-                        <div class="h-5 w-px bg-gray-600 mx-3"></div>
-                        <i class="fas fa-trophy mr-2"></i>
-                        <span>BC: <span class="font-bold">450</span></span>
                     </div>
                 </div>
             </div>
             <button class="btn-primary mt-4 md:mt-0 flex items-center">
-                <i class="fas fa-headset mr-2"></i> Need help? Contact Support
             </button>
         </div>
     </header>
@@ -389,11 +248,11 @@
         <div class="flex space-x-1 mb-6">
             <button class="tab-btn flex-1 py-4 rounded-t-lg glass-card tab-active font-medium flex items-center justify-center">
                 <i class="fas fa-coins text-prime-yellow mr-2"></i>
-                Sweeps Coins (SC)
             </button>
             <button class="tab-btn flex-1 py-4 rounded-t-lg glass-card font-medium flex items-center justify-center">
                 <i class="fas fa-star text-gray-400 mr-2"></i>
-                Bonus Coins (BSC)
             </button>
         </div>

     </style>
 </head>
 <body class="gradient-bg min-h-screen flex flex-col">
     <!-- Header Banner -->
+    <header class="glass-card glow-effect relative mt-5 mx-4 md:mx-10 p-6 md:p-8">
         <div class="flex flex-col md:flex-row justify-between items-center">
             <div>
+                <h1 class="text-2xl md:text-3xl font-bold mb-2"><i class="fas fa-star mr-3 text-prime-yellow"></i>First purchase Bonus</h1>
+                <p class="text-gray-300 mb-4">First purchase bonus first purchase bonus first purchase bonus first purchase bonus</p>
                 <div class="flex items-center">
+                    <div class="icon-container">
+                        <i class="fas fa-coins text-prime-yellow"></i>
                     </div>
+                    <span class="text-xl font-bold">100K Gold Coins + 10 Sweeps Coins for <span class="text-prime-yellow">$9.99</span></span>
                 </div>
             </div>
             <button class="btn-primary mt-4 md:mt-0 flex items-center">
+                <i class="fas fa-fire mr-2"></i> CLAIM
             </button>
         </div>
     </header>
         <div class="flex space-x-1 mb-6">
             <button class="tab-btn flex-1 py-4 rounded-t-lg glass-card tab-active font-medium flex items-center justify-center">
                 <i class="fas fa-coins text-prime-yellow mr-2"></i>
+                Standard Packages
             </button>
             <button class="tab-btn flex-1 py-4 rounded-t-lg glass-card font-medium flex items-center justify-center">
                 <i class="fas fa-star text-gray-400 mr-2"></i>
+                VIP Packages
             </button>
         </div>