Spaces:
Running
Running
Download index.html from Sapantn/anycoder-2b4336bb: direct link, hf CLI and curl.
- Browser
- Download file 38.1 kB
-
https://huggingface.co/spaces/Sapantn/anycoder-2b4336bb/resolve/main/index.html
- Command line
-
hf download hf://spaces/Sapantn/anycoder-2b4336bb/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Sapantn/anycoder-2b4336bb/resolve/main/index.html
38.1 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GoalNepal - Nepal's #1 Football Store</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); | |
| :root { | |
| --nepal-red: #DC143C; | |
| --nepal-blue: #003893; | |
| --nepal-gold: #f5c542; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| overflow-x: hidden; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--nepal-blue); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--nepal-red); | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .float-anim { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| @keyframes shine { | |
| 0% { background-position: -100% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| .shine-text { | |
| background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%); | |
| background-size: 200% 100%; | |
| background-repeat: no-repeat; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| animation: shine 3s infinite linear; | |
| color: white; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| /* Loader */ | |
| .loader { | |
| border: 3px solid #f3f3f3; | |
| border-radius: 50%; | |
| border-top: 3px solid var(--nepal-red); | |
| width: 20px; | |
| height: 20px; | |
| -webkit-animation: spin 1s linear infinite; /* Safari */ | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Cart Slide */ | |
| .cart-slide { | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .cart-open { | |
| transform: translateX(0); | |
| } | |
| .cart-closed { | |
| transform: translateX(100%); | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| visibility: hidden; | |
| min-width: 250px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 8px; | |
| padding: 16px; | |
| position: fixed; | |
| z-index: 50; | |
| left: 50%; | |
| bottom: 30px; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s, bottom 0.3s; | |
| } | |
| .toast.show { | |
| visibility: visible; | |
| opacity: 1; | |
| bottom: 50px; | |
| } | |
| /* Nepali Flag Motif */ | |
| .nepal-sun { | |
| width: 40px; | |
| height: 40px; | |
| background: white; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 0 10px rgba(255,215,0, 0.5); | |
| opacity: 0.8; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-800 antialiased"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-40 top-0 transition-all duration-300 bg-white/90 backdrop-blur-md border-b border-slate-200" id="navbar"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-20"> | |
| <!-- Logo --> | |
| <div class="flex-shrink-0 flex items-center cursor-pointer group" onclick="window.scrollTo({top:0, behavior:'smooth'})"> | |
| <div class="relative w-10 h-10 mr-3"> | |
| <svg viewBox="0 0 100 100" class="w-full h-full drop-shadow-lg group-hover:scale-110 transition-transform"> | |
| <path d="M50 10 L90 30 L50 90 L10 30 Z" fill="#003893" stroke="white" stroke-width="2"/> | |
| <circle cx="35" cy="45" r="8" fill="white"/> | |
| <path d="M50 50 L60 70 L40 70 Z" fill="#DC143C" opacity="0.8"/> | |
| </svg> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="font-bold text-2xl tracking-tighter text-[#003893]">Goal<span class="text-[#DC143C]">Nepal</span></span> | |
| <span class="text-[10px] uppercase tracking-widest text-slate-500 font-semibold">The Football Store</span> | |
| </div> | |
| </div> | |
| <!-- Desktop Menu --> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#new-arrivals" class="text-sm font-medium text-slate-600 hover:text-[#DC143C] transition-colors">New Arrivals</a> | |
| <a href="#products" class="text-sm font-medium text-slate-600 hover:text-[#DC143C] transition-colors">Jerseys</a> | |
| <a href="#products" class="text-sm font-medium text-slate-600 hover:text-[#DC143C] transition-colors">Boots</a> | |
| <a href="#about" class="text-sm font-medium text-slate-600 hover:text-[#DC143C] transition-colors">About</a> | |
| </div> | |
| <!-- Icons --> | |
| <div class="flex items-center space-x-6"> | |
| <div class="relative hidden md:block"> | |
| <input type="text" id="searchInput" placeholder="Search kits..." class="bg-slate-100 rounded-full py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-[#DC143C] w-48 transition-all focus:w-64"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-slate-400"></i> | |
| </div> | |
| <button class="relative group" onclick="toggleCart()"> | |
| <i class="fas fa-shopping-bag text-xl text-slate-700 group-hover:text-[#DC143C] transition-colors"></i> | |
| <span id="cartCount" class="absolute -top-2 -right-2 bg-[#DC143C] text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center transform scale-0 transition-transform duration-200">0</span> | |
| </button> | |
| <button class="md:hidden text-slate-700 text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative pt-20 pb-16 md:pt-32 md:pb-24 overflow-hidden"> | |
| <!-- Background Image with Overlay --> | |
| <div class="absolute inset-0 z-0"> | |
| <img src="https://images.unsplash.com/photo-1518091043644-c1d4457512c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" alt="Stadium" class="w-full h-full object-cover opacity-20"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-[#003893] via-[#003893]/90 to-transparent"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-6 text-white"> | |
| <div class="inline-block px-4 py-1 rounded-full bg-[#DC143C] text-xs font-bold tracking-wide uppercase mb-2"> | |
| Official Partner of ANFA | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-extrabold leading-tight"> | |
| Wear Your <br> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-yellow-500">National Pride</span> | |
| </h1> | |
| <p class="text-lg text-blue-100 max-w-lg leading-relaxed"> | |
| Premium football jerseys and boots for the champions of Nepal. From the streets of Kathmandu to the grounds of Dasarath Rangasala. | |
| </p> | |
| <div class="flex flex-wrap gap-4 pt-4"> | |
| <button onclick="document.getElementById('products').scrollIntoView({behavior: 'smooth'})" class="px-8 py-4 bg-[#DC143C] hover:bg-red-700 text-white font-bold rounded-full shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 flex items-center gap-2"> | |
| Shop Now <i class="fas fa-arrow-right"></i> | |
| </button> | |
| <button class="px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/30 text-white font-bold rounded-full transition-all"> | |
| View Lookbook | |
| </button> | |
| </div> | |
| <!-- Currency Widget --> | |
| <div class="mt-8 flex items-center gap-4 text-sm text-blue-200 bg-white/5 p-3 rounded-lg inline-flex backdrop-blur-sm border border-white/10"> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <span>Current Rate:</span> | |
| </div> | |
| <div class="font-mono font-bold text-white"> | |
| 1 USD = <span id="usdRate">133.50</span> NPR | |
| </div> | |
| <div class="h-4 w-px bg-blue-300/30"></div> | |
| <div class="text-xs text-blue-300">Updated live</div> | |
| </div> | |
| </div> | |
| <!-- Hero Image --> | |
| <div class="relative hidden md:block"> | |
| <div class="relative z-10 float-anim"> | |
| <img src="https://images.unsplash.com/photo-1579952363873-27f3bade9f55?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Football Boots" class="rounded-2xl shadow-2xl border-4 border-white/20 transform rotate-3 hover:rotate-0 transition-transform duration-500"> | |
| <!-- Floating Price Tag --> | |
| <div class="absolute -bottom-6 -left-6 bg-white text-slate-900 p-4 rounded-xl shadow-xl flex items-center gap-3 animate-bounce" style="animation-duration: 3s;"> | |
| <div class="bg-green-100 p-2 rounded-full text-green-600"> | |
| <i class="fas fa-fire"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-slate-500 font-semibold uppercase">Trending Now</p> | |
| <p class="font-bold">Nike Mercurial</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Decorative circles --> | |
| <div class="absolute top-10 right-10 w-20 h-20 bg-[#DC143C] rounded-full opacity-20 blur-xl"></div> | |
| <div class="absolute bottom-10 left-10 w-32 h-32 bg-yellow-400 rounded-full opacity-20 blur-xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats / Features --> | |
| <div class="bg-white border-y border-slate-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="space-y-1"> | |
| <i class="fas fa-truck text-2xl text-[#DC143C] mb-2"></i> | |
| <h3 class="font-bold text-slate-800">Free Delivery</h3> | |
| <p class="text-xs text-slate-500">Within Kathmandu Valley</p> | |
| </div> | |
| <div class="space-y-1"> | |
| <i class="fas fa-shield-alt text-2xl text-[#DC143C] mb-2"></i> | |
| <h3 class="font-bold text-slate-800">Authentic 100%</h3> | |
| <p class="text-xs text-slate-500">Verified Products</p> | |
| </div> | |
| <div class="space-y-1"> | |
| <i class="fas fa-exchange-alt text-2xl text-[#DC143C] mb-2"></i> | |
| <h3 class="font-bold text-slate-800">Easy Returns</h3> | |
| <p class="text-xs text-slate-500">7 Days Return Policy</p> | |
| </div> | |
| <div class="space-y-1"> | |
| <i class="fas fa-headset text-2xl text-[#DC143C] mb-2"></i> | |
| <h3 class="font-bold text-slate-800">24/7 Support</h3> | |
| <p class="text-xs text-slate-500">Call or WhatsApp</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Shop Section --> | |
| <section id="products" class="py-16 bg-slate-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <!-- Section Header --> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Latest Collection</h2> | |
| <div class="w-24 h-1 bg-[#DC143C] mx-auto rounded-full mb-6"></div> | |
| <!-- Filters --> | |
| <div class="flex flex-wrap justify-center gap-4" id="categoryFilters"> | |
| <button class="filter-btn active px-6 py-2 rounded-full bg-[#DC143C] text-white font-medium shadow-md transition-all" data-category="all">All Items</button> | |
| <button class="filter-btn px-6 py-2 rounded-full bg-white text-slate-600 hover:bg-slate-100 font-medium border border-slate-200 transition-all" data-category="jersey">Jerseys</button> | |
| <button class="filter-btn px-6 py-2 rounded-full bg-white text-slate-600 hover:bg-slate-100 font-medium border border-slate-200 transition-all" data-category="shoes">Boots & Shoes</button> | |
| <button class="filter-btn px-6 py-2 rounded-full bg-white text-slate-600 hover:bg-slate-100 font-medium border border-slate-200 transition-all" data-category="accessories">Accessories</button> | |
| </div> | |
| </div> | |
| <!-- Product Grid --> | |
| <div id="productGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> | |
| <!-- Products will be injected here via JS --> | |
| </div> | |
| <!-- Load More --> | |
| <div class="mt-12 text-center"> | |
| <button class="px-8 py-3 border-2 border-slate-800 text-slate-800 font-bold rounded-full hover:bg-slate-800 hover:text-white transition-colors uppercase tracking-wide text-sm"> | |
| View All Products | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="bg-[#003893] py-16 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none"> | |
| <svg width="100%" height="100%"> | |
| <pattern id="pattern-circles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"> | |
| <circle cx="20" cy="20" r="2" fill="#fff"></circle> | |
| </pattern> | |
| <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect> | |
| </svg> | |
| </div> | |
| <div class="max-w-4xl mx-auto px-4 text-center relative z-10"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Join the Fan Club</h2> | |
| <p class="text-blue-100 mb-8">Get exclusive access to Nepal National Team jerseys before anyone else. Be the first to know about sales.</p> | |
| <form class="flex flex-col sm:flex-row gap-4 justify-center max-w-lg mx-auto" onsubmit="event.preventDefault(); alert('Thank you for subscribing!');"> | |
| <input type="email" placeholder="Enter your email address" class="px-6 py-3 rounded-full focus:outline-none focus:ring-2 focus:ring-[#DC143C] w-full text-slate-800" required> | |
| <button type="submit" class="px-8 py-3 bg-[#DC143C] hover:bg-red-700 text-white font-bold rounded-full shadow-lg transition-colors whitespace-nowrap"> | |
| Subscribe | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 text-slate-300 pt-16 pb-8 border-t-4 border-[#DC143C]"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12"> | |
| <!-- Brand --> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <span class="font-bold text-2xl tracking-tighter text-white">Goal<span class="text-[#DC143C]">Nepal</span></span> | |
| </div> | |
| <p class="text-sm text-slate-400 leading-relaxed mb-6"> | |
| The premier destination for football enthusiasts in Nepal. We bring the world's best gear to the rooftop of the world. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-[#DC143C] hover:text-white transition-all"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-[#DC143C] hover:text-white transition-all"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-[#DC143C] hover:text-white transition-all"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| <!-- Links --> | |
| <div> | |
| <h4 class="text-white font-bold mb-6 uppercase tracking-wider text-sm">Shop</h4> | |
| <ul class="space-y-3 text-sm"> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">New Arrivals</a></li> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">National Team Kit</a></li> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">Football Boots</a></li> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">Training Gear</a></li> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">Sale</a></li> | |
| </ul> | |
| </div> | |
| <!-- Support --> | |
| <div> | |
| <h4 class="text-white font-bold mb-6 uppercase tracking-wider text-sm">Support</h4> | |
| <ul class="space-y-3 text-sm"> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">Help Center</a></li> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">Shipping Info</a></li> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">Returns & Exchange</a></li> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">Size Guide</a></li> | |
| <li><a href="#" class="hover:text-[#DC143C] transition-colors">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h4 class="text-white font-bold mb-6 uppercase tracking-wider text-sm">Contact</h4> | |
| <ul class="space-y-4 text-sm"> | |
| <li class="flex items-start gap-3"> | |
| <i class="fas fa-map-marker-alt mt-1 text-[#DC143C]"></i> | |
| <span>Putalisadak, Kathmandu<br>Nepal 44600</span> | |
| </li> | |
| <li class="flex items-center gap-3"> | |
| <i class="fas fa-phone text-[#DC143C]"></i> | |
| <span>+977 1 444 5555</span> | |
| </li> | |
| <li class="flex items-center gap-3"> | |
| <i class="fas fa-envelope text-[#DC143C]"></i> | |
| <span>support@goalnepal.com</span> | |
| </li> | |
| </ul> | |
| <!-- Payment Methods --> | |
| <div class="mt-6"> | |
| <p class="text-xs text-slate-500 mb-2">We Accept:</p> | |
| <div class="flex gap-2 text-2xl text-slate-400"> | |
| <i class="fab fa-cc-visa hover:text-white transition-colors"></i> | |
| <i class="fab fa-cc-mastercard hover:text-white transition-colors"></i> | |
| <i class="fas fa-money-bill-wave hover:text-green-500 transition-colors" title="Cash on Delivery"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 pt-8 text-center text-xs text-slate-500"> | |
| <p> GoalNepal Football Store. All rights reserved. Built with <span class="text-[#DC143C]">passion</span> in Nepal.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Cart Drawer --> | |
| <div id="cartOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden transition-opacity opacity-0" onclick="toggleCart()"></div> | |
| <div id="cartDrawer" class="fixed top-0 right-0 h-full w-full sm:w-[400px] bg-white z-50 shadow-2xl cart-slide cart-closed flex flex-col"> | |
| <!-- Cart Header --> | |
| <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50"> | |
| <h2 class="text-xl font-bold text-slate-800">Your Cart</h2> | |
| <button onclick="toggleCart()" class="text-slate-400 hover:text-[#DC143C] transition-colors text-xl"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Cart Items Area --> | |
| <div id="cartItems" class="flex-1 overflow-y-auto p-6 space-y-6"> | |
| <!-- Cart items injected here --> | |
| <div class="text-center py-12 text-slate-400"> | |
| <i class="fas fa-shopping-basket text-4xl mb-4 opacity-50"></i> | |
| <p>Your cart is empty.</p> | |
| <button onclick="toggleCart()" class="mt-4 text-[#DC143C] font-bold hover:underline">Start Shopping</button> | |
| </div> | |
| </div> | |
| <!-- Cart Footer --> | |
| <div class="p-6 border-t border-slate-100 bg-slate-50"> | |
| <div class="space-y-3 mb-6"> | |
| <div class="flex justify-between text-sm text-slate-500"> | |
| <span>Subtotal</span> | |
| <span id="cartSubtotal">Rs. 0</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-slate-500"> | |
| <span>Shipping (KTM)</span> | |
| <span>Rs. 100</span> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold text-slate-800 border-t border-slate-200 pt-3"> | |
| <span>Total</span> | |
| <span id="cartTotal">Rs. 0</span> | |
| </div> | |
| </div> | |
| <button onclick="checkout()" class="w-full py-4 bg-[#DC143C] hover:bg-red-700 text-white font-bold rounded-lg shadow-lg transition-all transform active:scale-95 flex justify-center items-center gap-2"> | |
| <span>Checkout</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick View Modal --> | |
| <div id="productModal" class="fixed inset-0 z-50 hidden flex items-center justify-center px-4"> | |
| <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeModal()"></div> | |
| <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto relative z-10 flex flex-col md:flex-row"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 z-20 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center hover:bg-[#DC143C] hover:text-white transition-colors"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="w-full md:w-1/2 bg-slate-100 p-8 flex items-center justify-center relative"> | |
| <img id="modalImg" src="" alt="" class="max-h-[400px] object-contain drop-shadow-xl"> | |
| <div class="absolute top-4 left-4 bg-[#DC143C] text-white text-xs font-bold px-3 py-1 rounded-full">New Season</div> | |
| </div> | |
| <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col"> | |
| <div class="mb-auto"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span id="modalBrand" class="text-xs font-bold uppercase tracking-wider text-[#003893] bg-blue-50 px-2 py-1 rounded">Nike</span> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-xs text-slate-400">(124 reviews)</span> | |
| </div> | |
| <h2 id="modalTitle" class="text-3xl font-bold text-slate-900 mb-2">Product Title</h2> | |
| <div class="flex items-end gap-3 mb-6"> | |
| <span id="modalPrice" class="text-2xl font-bold text-[#DC143C]">Rs. 0</span> | |
| <span id="modalOldPrice" class="text-sm text-slate-400 line-through mb-1">Rs. 0</span> | |
| </div> | |
| <p id="modalDesc" class="text-slate-600 text-sm leading-relaxed mb-6"> | |
| Description goes here. | |
| </p> | |
| <!-- Size Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-bold text-slate-700 mb-2">Select Size</label> | |
| <div class="flex gap-2 flex-wrap" id="sizeSelector"> | |
| <!-- Sizes injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 mt-4"> | |
| <button id="modalAddToCartBtn" class="flex-1 bg-[#DC143C] hover:bg-red-700 text-white font-bold py-3 rounded-lg shadow-lg transition-all active:scale-95"> | |
| Add to Cart | |
| </button> | |
| <button class="w-12 h-12 border border-slate-200 rounded-lg flex items-center justify-center text-slate-400 hover:text-[#DC143C] hover:border-[#DC143C] transition-all"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Checkout Success Modal --> | |
| <div id="checkoutModal" class="fixed inset-0 z-50 hidden flex items-center justify-center px-4"> | |
| <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div> | |
| <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 relative z-10 text-center transform scale-95 opacity-0 transition-all duration-300" id="checkoutContent"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 text-green-500 text-3xl"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-slate-900 mb-2">Order Confirmed!</h2> | |
| <p class="text-slate-500 mb-6">Thank you for supporting football in Nepal. Your order will be delivered within 3-5 business days.</p> | |
| <div class="bg-slate-50 rounded-lg p-4 mb-6 text-left text-sm"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-slate-500">Order ID:</span> | |
| <span class="font-mono font-bold text-slate-800">#GN-88392</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-slate-500">Total Paid:</span> | |
| <span class="font-bold text-[#DC143C]" id="checkoutTotal">Rs. 0</span> | |
| </div> | |
| </div> | |
| <button onclick="closeCheckout()" class="w-full py-3 bg-slate-900 text-white font-bold rounded-lg hover:bg-slate-800 transition-colors"> | |
| Continue Shopping | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="toast shadow-xl border-l-4 border-[#DC143C]"> | |
| <div class="flex items-center gap-3"> | |
| <i class="fas fa-check-circle text-green-500 text-xl"></i> | |
| <div class="text-left"> | |
| <h4 class="font-bold text-sm">Added to Cart</h4> | |
| <p class="text-xs text-slate-300" id="toastMessage">Product added successfully.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fixed bottom-4 right-4 z-40"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="bg-slate-800 text-white text-xs px-3 py-2 rounded-lg shadow-lg opacity-70 hover:opacity-100 transition-opacity flex items-center gap-2"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| </div> | |
| <script> | |
| // --- Data --- | |
| const products = [ | |
| { | |
| id: 1, | |
| name: "Nepal Home Jersey 2024", | |
| category: "jersey", | |
| price: 3500, | |
| oldPrice: 4500, | |
| image: "https://images.unsplash.com/photo-1584464491033-06628f3a6b7b?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Nike", | |
| desc: "Official Nepal National Team Home Kit. Breathable fabric with authentic team crest.", | |
| sizes: ["S", "M", "L", "XL"], | |
| badge: "Hot" | |
| }, | |
| { | |
| id: 2, | |
| name: "Adidas Predator Elite", | |
| category: "shoes", | |
| price: 18500, | |
| oldPrice: 22000, | |
| image: "https://images.unsplash.com/photo-1511556532299-8f662fc26c06?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Adidas", | |
| desc: "Elite control boots for the serious player. Kangaroo leather upper for perfect touch.", | |
| sizes: ["7", "8", "9", "10"], | |
| badge: "Sale" | |
| }, | |
| { | |
| id: 3, | |
| name: "Manchester United 24/25", | |
| category: "jersey", | |
| price: 4200, | |
| oldPrice: 5200, | |
| image: "https://images.unsplash.com/photo-1579199265916-436a5717275f?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Adidas", | |
| desc: "Red Devils home kit. DRI-FIT technology keeps you dry and comfortable.", | |
| sizes: ["M", "L", "XL", "XXL"], | |
| badge: "New" | |
| }, | |
| { | |
| id: 4, | |
| name: "Nike Phantom GT2", | |
| category: "shoes", | |
| price: 16000, | |
| oldPrice: 19000, | |
| image: "https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Nike", | |
| desc: "Designed for precision passing and powerful striking. Gripknit upper.", | |
| sizes: ["8", "9", "10", "11"], | |
| badge: "Best Seller" | |
| }, | |
| { | |
| id: 5, | |
| name: "Real Madrid Home 24/25", | |
| category: "jersey", | |
| price: 4500, | |
| oldPrice: 5500, | |
| image: "https://images.unsplash.com/photo-1529900748604-07564a03e7a6?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Adidas", | |
| desc: "Los Blancos classic white kit. Features ventilation channels for airflow.", | |
| sizes: ["S", "M", "L"], | |
| badge: null | |
| }, | |
| { | |
| id: 6, | |
| name: "Puma Future Z 1.4", | |
| category: "shoes", | |
| price: 14500, | |
| oldPrice: 16500, | |
| image: "https://images.unsplash.com/photo-1605348532760-6753d5c43329?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Puma", | |
| desc: "Ultra-lightweight boots for agile players. FUZIONFIT+ compression band.", | |
| sizes: ["7", "8", "9", "10"], | |
| badge: null | |
| }, | |
| { | |
| id: 7, | |
| name: "Futsal Indoor Court Shoes", | |
| category: "shoes", | |
| price: 5500, | |
| oldPrice: 6500, | |
| image: "https://images.unsplash.com/photo-1516478177764-9fe5bd7e9717?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Joma", | |
| desc: "Perfect for Nepali futsal courts. Non-marking gum rubber outsole.", | |
| sizes: ["6", "7", "8", "9", "10"], | |
| badge: "Local Fav" | |
| }, | |
| { | |
| id: 8, | |
| name: "Nepal Training Jacket", | |
| category: "jersey", | |
| price: 2500, | |
| oldPrice: 3000, | |
| image: "https://images.unsplash.com/photo-1556906781-9a412961c28c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Nike", | |
| desc: "Stay warm during training sessions. Water-resistant fabric.", | |
| sizes: ["M", "L", "XL"], | |
| badge: null | |
| }, | |
| { | |
| id: 9, | |
| name: "Nike Shin Guards", | |
| category: "accessories", | |
| price: 1200, | |
| oldPrice: 1500, | |
| image: "https://images.unsplash.com/photo-1562183241-b937e95585b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Nike", | |
| desc: "Hard shell protection with foam backing for comfort.", | |
| sizes: ["S", "M", "L"], | |
| badge: null | |
| }, | |
| { | |
| id: 10, | |
| name: "Adidas Team Bag Medium", | |
| category: "accessories", | |
| price: 3500, | |
| oldPrice: 4000, | |
| image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Adidas", | |
| desc: "Fits all your gear for match day. Separate shoe compartment.", | |
| sizes: ["One Size"], | |
| badge: null | |
| }, | |
| { | |
| id: 11, | |
| name: "Nepal Away Jersey 2024", | |
| category: "jersey", | |
| price: 3500, | |
| oldPrice: 4500, | |
| image: "https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Nike", | |
| desc: "The away kit for the Gorkhalis. Sleek blue design.", | |
| sizes: ["S", "M", "L", "XL"], | |
| badge: "New" | |
| }, | |
| { | |
| id: 12, | |
| name: "Professional Football", | |
| category: "accessories", | |
| price: 2800, | |
| oldPrice: 3200, | |
| image: "https://images.unsplash.com/photo-1518091043644-c1d4457512c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", | |
| brand: "Nike", | |
| desc: "FIFA Quality Pro certified match ball.", | |
| sizes: ["Size 5"], | |
| badge: null | |
| } | |
| ]; | |
| // --- State --- | |
| let cart = []; | |
| let currentCategory = 'all'; | |
| // --- Format Currency --- | |
| const formatMoney = (amount) => { | |
| return 'Rs. ' + amount.toLocaleString('en-IN'); | |
| }; | |
| // --- Render Products --- | |
| const renderProducts = (category = 'all', searchTerm = '') => { | |
| const grid = document.getElementById('productGrid'); | |
| grid.innerHTML = ''; | |
| const filtered = products.filter(p => { | |
| const matchesCategory = category === 'all' || p.category === category; | |
| const matchesSearch = p.name.toLowerCase().includes(searchTerm.toLowerCase()) || | |
| p.brand.toLowerCase().includes(searchTerm.toLowerCase()); | |
| return matchesCategory && matchesSearch; | |
| }); | |
| if (filtered.length === 0) { | |
| grid.innerHTML = ` | |
| <div class="col-span-full text-center py-12"> | |
| <i class="fas fa-search text-4xl text-slate-300 mb-4"></i> | |
| <p class="text-slate-500">No products found matching your criteria.</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| filtered.forEach(p => { | |
| const discount = Math.round(((p.oldPrice - p.price) / p.oldPrice) * 100); | |
| const card = document.createElement('div'); | |
| card.className = 'bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden card-hover transition-all duration-300 group relative flex flex-col'; | |
| card.innerHTML = ` | |
| <div class="relative h-64 overflow-hidden bg-slate- |