Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FashionHub - Jual Beli Baju Online</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for animations */ | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .cart-item-enter { | |
| opacity: 0; | |
| transform: translateX(100px); | |
| } | |
| .cart-item-enter-active { | |
| opacity: 1; | |
| transform: translateX(0); | |
| transition: all 300ms ease-in; | |
| } | |
| .cart-item-exit { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .cart-item-exit-active { | |
| opacity: 0; | |
| transform: translateX(100px); | |
| transition: all 300ms ease-in; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header/Navbar --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-tshirt text-2xl text-indigo-600"></i> | |
| <h1 class="text-xl font-bold text-gray-800">FashionHub</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Beranda</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Produk</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Kategori</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Tentang Kami</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="search-btn" class="text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button id="cart-btn" class="relative text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <button id="mobile-menu-btn" class="md:hidden text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t py-2 px-4"> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Beranda</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Produk</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Kategori</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Tentang Kami</a> | |
| </div> | |
| <!-- Search Bar --> | |
| <div id="search-bar" class="hidden bg-white border-t py-3 px-4"> | |
| <div class="container mx-auto flex"> | |
| <input type="text" placeholder="Cari baju, kaos, kemeja..." class="flex-grow px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Temukan Gaya Terbaikmu</h1> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Koleksi baju terbaru dengan kualitas premium dan harga terjangkau</p> | |
| <button class="bg-white text-indigo-600 font-bold px-8 py-3 rounded-full hover:bg-gray-100 transition duration-300"> | |
| Belanja Sekarang | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Kategori Populer</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-gray-100 rounded-lg p-4 text-center hover:bg-indigo-50 cursor-pointer transition duration-300"> | |
| <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-tshirt text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Kaos</h3> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 text-center hover:bg-indigo-50 cursor-pointer transition duration-300"> | |
| <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-shirt text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Kemeja</h3> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 text-center hover:bg-indigo-50 cursor-pointer transition duration-300"> | |
| <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-vest text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Jaket</h3> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 text-center hover:bg-indigo-50 cursor-pointer transition duration-300"> | |
| <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-hat-cowboy text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Aksesoris</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800">Produk Terbaru</h2> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Lihat Semua</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="products-container"> | |
| <!-- Products will be loaded here by JavaScript --> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 transition duration-300"> | |
| Muat Lebih Banyak | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-truck text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Gratis Ongkir</h3> | |
| <p class="text-gray-600">Gratis ongkir untuk pembelian di atas Rp 200.000</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-exchange-alt text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Pengembalian Mudah</h3> | |
| <p class="text-gray-600">Garansi 30 hari pengembalian tanpa alasan</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-headset text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Dukungan 24/7</h3> | |
| <p class="text-gray-600">Tim customer service siap membantu Anda</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-2xl font-bold mb-4">Dapatkan Penawaran Eksklusif</h2> | |
| <p class="mb-6 max-w-2xl mx-auto">Berlangganan newsletter kami dan dapatkan diskon 10% untuk pembelian pertama</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Alamat email Anda" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button class="bg-indigo-800 px-6 py-3 rounded-r-lg hover:bg-indigo-900 transition duration-300"> | |
| Berlangganan | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-tshirt text-2xl text-indigo-400"></i> | |
| <h3 class="text-xl font-bold">FashionHub</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Toko baju online dengan koleksi terbaik dan harga terjangkau.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Tautan Cepat</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Beranda</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Produk</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Kategori</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tentang Kami</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Kontak</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Bantuan</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pusat Bantuan</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cara Pembelian</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pengembalian</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Status Pesanan</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pembayaran</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Kontak</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start space-x-2"> | |
| <i class="fas fa-map-marker-alt mt-1"></i> | |
| <span>Jl. Fashion No. 123, Jakarta, Indonesia</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-phone"></i> | |
| <span>+62 123 4567 890</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-envelope"></i> | |
| <span>[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 FashionHub. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Shopping Cart Sidebar --> | |
| <div id="cart-sidebar" class="fixed top-0 right-0 w-full md:w-96 h-full bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="text-lg font-bold">Keranjang Belanja (<span id="cart-sidebar-count">0</span>)</h3> | |
| <button id="close-cart" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="p-4"> | |
| <!-- Cart items will be loaded here --> | |
| <div id="empty-cart-message" class="text-center py-8"> | |
| <i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-500">Keranjang belanja Anda kosong</p> | |
| <a href="#" class="mt-4 inline-block bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">Mulai Belanja</a> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t sticky bottom-0 bg-white"> | |
| <div class="flex justify-between mb-4"> | |
| <span class="font-medium">Total:</span> | |
| <span id="cart-total" class="font-bold">Rp 0</span> | |
| </div> | |
| <button id="checkout-btn" class="w-full bg-indigo-600 text-white py-3 rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| Lanjut ke Pembayaran | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Overlay --> | |
| <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> | |
| <!-- Product Quick View Modal --> | |
| <div id="quick-view-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden"> | |
| <div class="absolute inset-0 bg-black bg-opacity-50" id="close-quick-view"></div> | |
| <div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto relative z-10"> | |
| <button id="close-quick-view-btn" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden"> | |
| <img id="quick-view-image" src="" alt="Product" class="w-full h-auto object-cover"> | |
| </div> | |
| <div> | |
| <h3 id="quick-view-title" class="text-2xl font-bold text-gray-800 mb-2"></h3> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <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-gray-600">(42 ulasan)</span> | |
| </div> | |
| <div class="text-2xl font-bold text-indigo-600 mb-4" id="quick-view-price"></div> | |
| <p id="quick-view-description" class="text-gray-600 mb-6"></p> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-800 mb-2">Ukuran:</h4> | |
| <div class="flex space-x-2"> | |
| <button class="border rounded-md px-3 py-1 hover:bg-gray-100 focus:bg-indigo-100 focus:border-indigo-500 focus:text-indigo-700">S</button> | |
| <button class="border rounded-md px-3 py-1 hover:bg-gray-100 focus:bg-indigo-100 focus:border-indigo-500 focus:text-indigo-700">M</button> | |
| <button class="border rounded-md px-3 py-1 hover:bg-gray-100 focus:bg-indigo-100 focus:border-indigo-500 focus:text-indigo-700">L</button> | |
| <button class="border rounded-md px-3 py-1 hover:bg-gray-100 focus:bg-indigo-100 focus:border-indigo-500 focus:text-indigo-700">XL</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-800 mb-2">Warna:</h4> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-black border-2 border-gray-300 focus:border-indigo-500"></button> | |
| <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-gray-300 focus:border-indigo-500"></button> | |
| <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-gray-300 focus:border-indigo-500"></button> | |
| <button class="w-8 h-8 rounded-full bg-gray-200 border-2 border-gray-300 focus:border-indigo-500"></button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4 mb-6"> | |
| <div class="flex items-center border rounded-md"> | |
| <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">-</button> | |
| <span class="px-3 py-1">1</span> | |
| <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">+</button> | |
| </div> | |
| <button id="add-to-cart-btn" class="flex-grow bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Tambah ke Keranjang | |
| </button> | |
| </div> | |
| <div class="border-t pt-4"> | |
| <div class="flex items-center text-gray-600 mb-2"> | |
| <i class="fas fa-truck mr-2"></i> | |
| <span>Gratis ongkir untuk pembelian di atas Rp 200.000</span> | |
| </div> | |
| <div class="flex items-center text-gray-600"> | |
| <i class="fas fa-exchange-alt mr-2"></i> | |
| <span>Pengembalian mudah dalam 30 hari</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample product data | |
| const products = [ | |
| { | |
| id: 1, | |
| title: "Kaos Polo Slim Fit", | |
| price: 149000, | |
| image: "https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", | |
| description: "Kaos polo slim fit dengan bahan katun pilihan yang nyaman digunakan sehari-hari.", | |
| colors: ["Hitam", "Putih", "Biru Navy"], | |
| sizes: ["S", "M", "L", "XL"] | |
| }, | |
| { | |
| id: 2, | |
| title: "Kemeja Flanel Kotak", | |
| price: 249000, | |
| image: "https://images.unsplash.com/photo-1598033129183-c4f50c736f10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", | |
| description: "Kemeja flanel dengan motif kotak-kotak yang stylish dan cocok untuk berbagai kesempatan.", | |
| colors: ["Merah", "Biru", "Hijau"], | |
| sizes: ["M", "L", "XL"] | |
| }, | |
| { | |
| id: 3, | |
| title: "Jaket Denim Vintage", | |
| price: 349000, | |
| image: "https://images.unsplash.com/photo-1543076447-215ad9ba6923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", | |
| description: "Jaket denim vintage dengan potongan modern dan bahan yang kuat serta tahan lama.", | |
| colors: ["Biru Tua", "Hitam"], | |
| sizes: ["S", "M", "L", "XL"] | |
| }, | |
| { | |
| id: 4, | |
| title: "Hoodie Oversize", | |
| price: 199000, | |
| image: "https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", | |
| description: "Hoodie oversize dengan bahan fleece yang hangat dan nyaman dipakai.", | |
| colors: ["Abu-abu", "Hitam", "Krem"], | |
| sizes: ["S", "M", "L", "XL"] | |
| }, | |
| { | |
| id: 5, | |
| title: "Kaos Graphic Print", | |
| price: 129000, | |
| image: "https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", | |
| description: "Kaos dengan graphic print eksklusif dan bahan katun yang lembut.", | |
| colors: ["Putih", "Hitam", "Biru"], | |
| sizes: ["S", "M", "L"] | |
| }, | |
| { | |
| id: 6, | |
| title: "Celana Chino Slim", | |
| price: 279000, | |
| image: "https://images.unsplash.com/photo-1599443015574-be0fe9c7f99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", | |
| description: "Celana chino slim fit dengan bahan yang nyaman dan cocok untuk berbagai gaya.", | |
| colors: ["Beige", "Coklat", "Navy"], | |
| sizes: ["28", "30", "32", "34"] | |
| }, | |
| { | |
| id: 7, | |
| title: "Blazer Slim Fit", | |
| price: 499000, | |
| image: "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", | |
| description: "Blazer slim fit dengan bahan premium dan jahitan rapi untuk penampilan formal.", | |
| colors: ["Hitam", "Navy", "Abu-abu"], | |
| sizes: ["S", "M", "L", "XL"] | |
| }, | |
| { | |
| id: 8, | |
| title: "Topi Snapback", | |
| price: 99000, | |
| image: "https://images.unsplash.com/photo-1521369909029-bdd5d07e1e1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", | |
| description: "Topi snapback dengan logo bordir dan bahan yang nyaman dipakai.", | |
| colors: ["Hitam", "Putih", "Merah"], | |
| sizes: ["One Size"] | |
| } | |
| ]; | |
| // Cart functionality | |
| let cart = []; | |
| // DOM Elements | |
| const productsContainer = document.getElementById('products-container'); | |
| const cartBtn = document.getElementById('cart-btn'); | |
| const cartSidebar = document.getElementById('cart-sidebar'); | |
| const closeCartBtn = document.getElementById('close-cart'); | |
| const cartItemsContainer = document.getElementById('cart-items'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartSidebarCount = document.getElementById('cart-sidebar-count'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| const checkoutBtn = document.getElementById('checkout-btn'); | |
| const emptyCartMessage = document.getElementById('empty-cart-message'); | |
| const overlay = document.getElementById('overlay'); | |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const searchBtn = document.getElementById('search-btn'); | |
| const searchBar = document.getElementById('search-bar'); | |
| const quickViewModal = document.getElementById('quick-view-modal'); | |
| const closeQuickViewBtn = document.getElementById('close-quick-view-btn'); | |
| const closeQuickView = document.getElementById('close-quick-view'); | |
| const quickViewImage = document.getElementById('quick-view-image'); | |
| const quickViewTitle = document.getElementById('quick-view-title'); | |
| const quickViewPrice = document.getElementById('quick-view-price'); | |
| const quickViewDescription = document.getElementById('quick-view-description'); | |
| const addToCartBtn = document.getElementById('add-to-cart-btn'); | |
| // Current product for quick view | |
| let currentProduct = null; | |
| // Format price to IDR | |
| function formatPrice(price) { | |
| return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price); | |
| } | |
| // Render products | |
| function renderProducts() { | |
| productsContainer.innerHTML = ''; | |
| products.forEach(product => { | |
| const productCard = document.createElement('div'); | |
| productCard.className = 'product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg'; | |
| productCard.innerHTML = ` | |
| <div class="relative"> | |
| <img src="${product.image}" alt="${product.title}" class="w-full h-64 object-cover"> | |
| <button class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 quick-view-btn" data-id="${product.id}"> | |
| <i class="fas fa-eye text-gray-600"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-800 mb-1 truncate">${product.title}</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs mr-1"> | |
| <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-gray-500 text-xs">(42)</span> | |
| </div> | |
| <div class="font-bold text-indigo-600 mb-3">${formatPrice(product.price)}</div> | |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition duration-300 add-to-cart-btn" data-id="${product.id}"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Tambah | |
| </button> | |
| </div> | |
| `; | |
| productsContainer.appendChild(productCard); | |
| }); | |
| // Add event listeners to quick view buttons | |
| document.querySelectorAll('.quick-view-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const productId = parseInt(e.currentTarget.getAttribute('data-id')); | |
| openQuickView(productId); | |
| }); | |
| }); | |
| // Add event listeners to add to cart buttons | |
| document.querySelectorAll('.add-to-cart-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const productId = parseInt(e.currentTarget.getAttribute('data-id')); | |
| addToCart(productId); | |
| }); | |
| }); | |
| } | |
| // Add to cart | |
| function addToCart(productId, quantity = 1) { | |
| const product = products.find(p => p.id === productId); | |
| if (!product) return; | |
| // Check if product already in cart | |
| const existingItem = cart.find(item => item.id === productId); | |
| if (existingItem) { | |
| existingItem.quantity += quantity; | |
| } else { | |
| cart.push({ | |
| ...product, | |
| quantity: quantity | |
| }); | |
| } | |
| updateCart(); | |
| // Show notification | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center animate-pulse'; | |
| notification.innerHTML = ` | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>${product.title} ditambahkan ke keranjang</span> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.classList.remove('animate-pulse'); | |
| notification.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => notification.remove(), 300); | |
| }, 2000); | |
| } | |
| // Remove from cart | |
| function removeFromCart(productId) { | |
| cart = cart.filter(item => item.id !== productId); | |
| updateCart(); | |
| } | |
| // Update cart quantity | |
| function updateCartItemQuantity(productId, newQuantity) { | |
| const item = cart.find(item => item.id === productId); | |
| if (item) { | |
| if (newQuantity <= 0) { | |
| removeFromCart(productId); | |
| } else { | |
| item.quantity = newQuantity; | |
| } | |
| updateCart(); | |
| } | |
| } | |
| // Update cart UI | |
| function updateCart() { | |
| // Update cart count | |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| cartCount.textContent = totalItems; | |
| cartSidebarCount.textContent = totalItems; | |
| // Update cart items | |
| if (cart.length === 0) { | |
| emptyCartMessage.classList.remove('hidden'); | |
| cartItemsContainer.innerHTML = ''; | |
| checkoutBtn.disabled = true; | |
| } else { | |
| emptyCartMessage.classList.add('hidden'); | |
| let itemsHTML = ''; | |
| let totalPrice = 0; | |
| cart.forEach(item => { | |
| totalPrice += item.price * item.quantity; | |
| itemsHTML += ` | |
| <div class="cart-item flex py-4 border-b"> | |
| <div class="w-20 h-20 bg-gray-100 rounded-md overflow-hidden flex-shrink-0"> | |
| <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-grow"> | |
| <h4 class="font-medium text-gray-800 mb-1">${item.title}</h4> | |
| <div class="text-indigo-600 font-medium mb-2">${formatPrice(item.price)}</div> | |
| <div class="flex items-center"> | |
| <div class="flex items-center border rounded-md"> | |
| <button class="px-2 py-1 text-gray-600 hover:bg-gray-100 decrease-quantity" data-id="${item.id}">-</button> | |
| <span class="px-2 py-1 quantity">${item.quantity}</span> | |
| <button class="px-2 py-1 text-gray-600 hover:bg-gray-100 increase-quantity" data-id="${item.id}">+</button> | |
| </div> | |
| <button class="ml-4 text-red-500 hover:text-red-700 remove-item" data-id="${item.id}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| cartItemsContainer.innerHTML = itemsHTML; | |
| cartTotal.textContent = formatPrice(totalPrice); | |
| checkoutBtn.disabled = false; | |
| // Add event listeners to quantity buttons | |
| document.querySelectorAll('.decrease-quantity').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const productId = parseInt(e.currentTarget.getAttribute('data-id')); | |
| const item = cart.find(item => item.id === productId); | |
| if (item) { | |
| updateCartItemQuantity(productId, item.quantity - 1); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.increase-quantity').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const productId = parseInt(e.currentTarget.getAttribute('data-id')); | |
| const item = cart.find(item => item.id === productId); | |
| if (item) { | |
| updateCartItemQuantity(productId, item.quantity + 1); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.remove-item').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const productId = parseInt(e.currentTarget.getAttribute('data-id')); | |
| removeFromCart(productId); | |
| }); | |
| }); | |
| } | |
| } | |
| // Open quick view modal | |
| function openQuickView(productId) { | |
| const product = products.find(p => p.id === productId); | |
| if (!product) return; | |
| currentProduct = product; | |
| quickViewImage.src = product.image; | |
| quickViewImage.alt = product.title; | |
| quickViewTitle.textContent = product.title; | |
| quickViewPrice.textContent = formatPrice(product.price); | |
| quickViewDescription.textContent = product.description; | |
| quickViewModal.classList.remove('hidden'); | |
| overlay.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Close quick view modal | |
| function closeQuickViewModal() { | |
| quickViewModal.classList.add('hidden'); | |
| overlay.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Toggle cart sidebar | |
| function toggleCartSidebar() { | |
| if (cartSidebar.classList.contains('translate-x-full')) { | |
| cartSidebar.classList.remove('translate-x-full'); | |
| overlay.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } else { | |
| cartSidebar.classList.add('translate-x-full'); | |
| overlay.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| } | |
| // Toggle mobile menu | |
| function toggleMobileMenu() { | |
| mobileMenu.classList.toggle('hidden'); | |
| } | |
| // Toggle search bar | |
| function toggleSearchBar() { | |
| searchBar.classList.toggle('hidden'); | |
| } | |
| // Event listeners | |
| cartBtn.addEventListener('click', toggleCartSidebar); | |
| closeCartBtn.addEventListener('click', toggleCartSidebar); | |
| overlay.addEventListener('click', () => { | |
| toggleCartSidebar(); | |
| closeQuickViewModal(); | |
| }); | |
| mobileMenuBtn.addEventListener('click', toggleMobileMenu); | |
| searchBtn.addEventListener('click', toggleSearchBar); | |
| closeQuickViewBtn.addEventListener('click', closeQuickViewModal); | |
| closeQuickView.addEventListener('click', closeQuickViewModal); | |
| addToCartBtn.addEventListener('click', () => { | |
| if (currentProduct) { | |
| addToCart(currentProduct.id); | |
| closeQuickViewModal(); | |
| } | |
| }); | |
| checkoutBtn.addEventListener('click', () => { | |
| alert('Terima kasih! Anda akan diarahkan ke halaman pembayaran.'); | |
| cart = []; | |
| updateCart(); | |
| toggleCartSidebar(); | |
| }); | |
| // Initialize | |
| renderProducts(); | |
| updateCart(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ArlonCarion/arlon-news" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |