anycoder-2b4336bb / index.html
Sapantn's picture
Upload folder using huggingface_hub
e275d35 verified
Raw History Blame Contribute Delete
38.1 kB
<!DOCTYPE html>
<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-