Spaces:

ArlonCarion
/

arlon-news

Running

App Files Files Community

ArlonCarion commited on Jul 13

Commit

1bf04f9

verified ·

1 Parent(s): 5f79014

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +749 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Arlon News
-emoji: 🔥
-colorFrom: pink
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: arlon-news
+emoji: 🐳
+colorFrom: yellow
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,749 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>&copy; 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>