| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Labubu Wonderland | Official Store</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Nunito:wght@400;700;900&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --labubu-pink: #ff9ebb; |
| --labubu-blue: #8bd3e6; |
| --labubu-yellow: #ffdf6b; |
| --labubu-purple: #c6a6ff; |
| --labubu-green: #a8e6cf; |
| } |
| |
| body { |
| font-family: 'Nunito', sans-serif; |
| background: linear-gradient(135deg, #f9f0ff 0%, #e6f7ff 100%); |
| background-attachment: fixed; |
| overflow-x: hidden; |
| } |
| |
| .labubu-font { |
| font-family: 'Comic Neue', cursive; |
| } |
| |
| .labubu-shadow { |
| box-shadow: 0 8px 20px rgba(0,0,0,0.1); |
| } |
| |
| .labubu-card { |
| transition: all 0.3s ease; |
| border-radius: 20px; |
| overflow: hidden; |
| background: white; |
| } |
| |
| .labubu-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0,0,0,0.15); |
| } |
| |
| .labubu-btn { |
| transition: all 0.3s ease; |
| border-radius: 50px; |
| font-weight: bold; |
| letter-spacing: 0.5px; |
| } |
| |
| .labubu-btn:hover { |
| transform: scale(1.05); |
| } |
| |
| .labubu-header { |
| background: rgba(255, 255, 255, 0.9); |
| backdrop-filter: blur(10px); |
| } |
| |
| .labubu-badge { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| .labubu-character { |
| animation: bounce 5s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-20px); } |
| } |
| |
| .labubu-wave { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| overflow: hidden; |
| line-height: 0; |
| } |
| |
| .labubu-wave svg { |
| position: relative; |
| display: block; |
| width: calc(100% + 1.3px); |
| height: 100px; |
| } |
| |
| .labubu-wave .shape-fill { |
| fill: #FFFFFF; |
| } |
| |
| .cart-pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.1); } |
| 100% { transform: scale(1); } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="labubu-header sticky top-0 z-50 labubu-shadow"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-[var(--labubu-pink)] flex items-center justify-center mr-3"> |
| <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center"> |
| <div class="w-4 h-4 rounded-full bg-[var(--labubu-blue)]"></div> |
| </div> |
| </div> |
| <h1 class="labubu-font text-3xl font-bold text-[var(--labubu-purple)]">Labubu Wonderland</h1> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" class="text-lg font-bold text-gray-700 hover:text-[var(--labubu-pink)] transition">Home</a> |
| <a href="#" class="text-lg font-bold text-gray-700 hover:text-[var(--labubu-pink)] transition">Shop</a> |
| <a href="#" class="text-lg font-bold text-gray-700 hover:text-[var(--labubu-pink)] transition">Collection</a> |
| <a href="#" class="text-lg font-bold text-gray-700 hover:text-[var(--labubu-pink)] transition">About</a> |
| <a href="#" class="text-lg font-bold text-gray-700 hover:text-[var(--labubu-pink)] transition">Contact</a> |
| </nav> |
| |
| <div class="flex items-center"> |
| <div class="relative mr-6"> |
| <button id="cart-btn" class="text-gray-700 hover:text-[var(--labubu-pink)] transition"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> |
| </svg> |
| </button> |
| <span id="cart-count" class="cart-pulse absolute -top-2 -right-3 bg-[var(--labubu-pink)] text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold">3</span> |
| </div> |
| <button class="md:hidden text-gray-700"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="relative py-16 md:py-24 overflow-hidden"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <div class="labubu-badge bg-[var(--labubu-yellow)] text-[var(--labubu-purple)] py-2 px-6 rounded-full inline-block font-bold mb-6"> |
| ✨ New Collection! ✨ |
| </div> |
| <h1 class="labubu-font text-5xl md:text-7xl font-bold text-[var(--labubu-purple)] mb-6 leading-tight"> |
| Meet Labubu & Friends |
| </h1> |
| <p class="text-xl text-gray-600 mb-8 max-w-lg"> |
| Discover the magical world of Labubu, TYCOCO, and the rest of the gang! Each character is full of personality and ready to bring joy to your home. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <button class="labubu-btn bg-[var(--labubu-pink)] hover:bg-[#ff7aa3] text-white py-4 px-8 text-lg font-bold"> |
| Shop Now |
| </button> |
| <button class="labubu-btn bg-white text-[var(--labubu-purple)] border-2 border-[var(--labubu-purple)] py-4 px-8 text-lg font-bold"> |
| Meet the Characters |
| </button> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 relative"> |
| <div class="relative flex justify-center"> |
| <div class="labubu-character absolute top-0 left-20 w-32 h-32 rounded-full bg-[var(--labubu-blue)] opacity-40"></div> |
| <div class="labubu-character absolute -bottom-10 right-20 w-40 h-40 rounded-full bg-[var(--labubu-green)] opacity-30"></div> |
| |
| <div class="relative z-10"> |
| <div class="bg-[var(--labubu-yellow)] rounded-full w-64 h-64 mx-auto flex items-center justify-center mb-8 labubu-shadow"> |
| <div class="bg-[var(--labubu-pink)] rounded-full w-48 h-48 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-32 h-32 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-blue)] rounded-full w-16 h-16 relative"> |
| <div class="absolute w-6 h-6 bg-white rounded-full -top-2 left-4"></div> |
| <div class="absolute w-6 h-6 bg-white rounded-full -top-2 right-4"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="labubu-wave"> |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
| <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path> |
| <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path> |
| <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path> |
| </svg> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="labubu-font text-4xl md:text-5xl font-bold text-[var(--labubu-purple)] mb-4">Labubu Collection</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Each character is carefully crafted with love and attention to detail</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="labubu-card"> |
| <div class="relative"> |
| <div class="bg-[var(--labubu-blue)] w-full h-64 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-pink)] rounded-full w-40 h-40 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-28 h-28 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-yellow)] rounded-full w-16 h-16"></div> |
| </div> |
| </div> |
| </div> |
| <div class="absolute top-4 right-4 bg-[var(--labubu-yellow)] text-[var(--labubu-purple)] py-1 px-3 rounded-full text-sm font-bold"> |
| NEW |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Labubu Classic</h3> |
| <p class="text-gray-600 mb-4">The original mischievous character</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-xl font-bold text-[var(--labubu-purple)]">$24.99</span> |
| <button class="labubu-btn bg-[var(--labubu-green)] hover:bg-[#8dd8b9] text-white py-2 px-6 font-bold"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="labubu-card"> |
| <div class="relative"> |
| <div class="bg-[var(--labubu-green)] w-full h-64 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-purple)] rounded-full w-40 h-40 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-28 h-28 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-blue)] rounded-full w-16 h-16"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">TYCOCO Friend</h3> |
| <p class="text-gray-600 mb-4">Labubu's best friend with a big heart</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-xl font-bold text-[var(--labubu-purple)]">$22.99</span> |
| <button class="labubu-btn bg-[var(--labubu-green)] hover:bg-[#8dd8b9] text-white py-2 px-6 font-bold"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="labubu-card"> |
| <div class="relative"> |
| <div class="bg-[var(--labubu-pink)] w-full h-64 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-yellow)] rounded-full w-40 h-40 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-28 h-28 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-green)] rounded-full w-16 h-16"></div> |
| </div> |
| </div> |
| </div> |
| <div class="absolute top-4 right-4 bg-[var(--labubu-blue)] text-white py-1 px-3 rounded-full text-sm font-bold"> |
| SALE |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Zimomo Buddy</h3> |
| <p class="text-gray-600 mb-4">The quiet one with a big personality</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-xl font-bold text-[var(--labubu-purple)]"> |
| <span class="line-through text-gray-400 mr-2">$26.99</span> $19.99 |
| </span> |
| <button class="labubu-btn bg-[var(--labubu-green)] hover:bg-[#8dd8b9] text-white py-2 px-6 font-bold"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="labubu-card"> |
| <div class="relative"> |
| <div class="bg-[var(--labubu-purple)] w-full h-64 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-blue)] rounded-full w-40 h-40 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-28 h-28 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-pink)] rounded-full w-16 h-16"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Labubu Mini Series</h3> |
| <p class="text-gray-600 mb-4">Set of 3 mini Labubu characters</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-xl font-bold text-[var(--labubu-purple)]">$49.99</span> |
| <button class="labubu-btn bg-[var(--labubu-green)] hover:bg-[#8dd8b9] text-white py-2 px-6 font-bold"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button class="labubu-btn bg-[var(--labubu-purple)] hover:bg-[#b08cff] text-white py-4 px-12 text-lg font-bold"> |
| View All Characters |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 relative"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
| <div class="relative"> |
| <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-[var(--labubu-yellow)] opacity-20"></div> |
| <div class="absolute -bottom-10 -right-10 w-40 h-40 rounded-full bg-[var(--labubu-pink)] opacity-20"></div> |
| |
| <div class="relative bg-white rounded-3xl p-8 labubu-shadow"> |
| <h2 class="labubu-font text-4xl font-bold text-[var(--labubu-purple)] mb-6">The Labubu Story</h2> |
| <p class="text-lg text-gray-700 mb-6"> |
| Labubu is a character created by artist Kasing Lung, known for its mischievous yet lovable personality. |
| Each character in the Labubu family has a unique story and charm. |
| </p> |
| <p class="text-lg text-gray-700 mb-8"> |
| Our products are made with high-quality materials and attention to detail, ensuring that each piece |
| captures the essence of the original artwork. |
| </p> |
| <button class="labubu-btn bg-[var(--labubu-blue)] hover:bg-[#6bc1d9] text-white py-3 px-8 font-bold"> |
| Meet the Artist |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 grid grid-cols-2 gap-6"> |
| <div class="bg-[var(--labubu-green)] rounded-2xl h-64 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-yellow)] rounded-full w-32 h-32 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-20 h-20"></div> |
| </div> |
| </div> |
| <div class="bg-[var(--labubu-pink)] rounded-2xl h-80 flex items-center justify-center mt-8"> |
| <div class="bg-[var(--labubu-purple)] rounded-full w-40 h-40 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-24 h-24"></div> |
| </div> |
| </div> |
| <div class="bg-[var(--labubu-blue)] rounded-2xl h-80 flex items-center justify-center"> |
| <div class="bg-[var(--labubu-green)] rounded-full w-40 h-40 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-24 h-24"></div> |
| </div> |
| </div> |
| <div class="bg-[var(--labubu-yellow)] rounded-2xl h-64 flex items-center justify-center mt-8"> |
| <div class="bg-[var(--labubu-blue)] rounded-full w-32 h-32 flex items-center justify-center"> |
| <div class="bg-white rounded-full w-20 h-20"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-[var(--labubu-purple)] text-white py-12 relative"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> |
| <div> |
| <h3 class="labubu-font text-2xl font-bold mb-4">Labubu Wonderland</h3> |
| <p class="mb-4 opacity-80">Bringing joy and mischief to your home with every character.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-white text-[var(--labubu-purple)] rounded-full w-10 h-10 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"> |
| <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/> |
| </svg> |
| </a> |
| <a href="#" class="bg-white text-[var(--labubu-purple)] rounded-full w-10 h-10 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"> |
| <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> |
| </svg> |
| </a> |
| <a href="#" class="bg-white text-[var(--labubu-purple)] rounded-full w-10 h-10 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"> |
| <path d="M8/0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 14.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13z"/> |
| <path d="M10.5 4H8.5a.5.5 0 0 0-.5.5v.5h1.5v-1H10a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5zM6.5 4H5.5a.5.5 0 0 0-.5.5v.5h1.5v-1H6a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5zM10.5 7.5H9.5v.5H10a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5h-.5v.5h-1v-1.5h1.5v-1.5zM6.5 7.5H5.5v.5H6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5h-.5v.5h-1v-1.5h1.5v-1.5z"/> |
| </svg> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Shop</h4> |
| <ul class="space-y-2 opacity-80"> |
| <li><a href="#" class="hover:underline">All Characters</a></li> |
| <li><a href="#" class="hover:underline">New Arrivals</a></li> |
| <li><a href="#" class="hover:underline">Limited Editions</a></li> |
| <li><a href="#" class="hover:underline">Bundles</a></li> |
| <li><a href="#" class="hover:underline">Accessories</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Help</h4> |
| <ul class="space-y-2 opacity-80"> |
| <li><a href="#" class="hover:underline">Shipping & Returns</a></li> |
| <li><a href="#" class="hover:underline">Store Policy</a></li> |
| <li><a href="#" class="hover:underline">Payment Methods</a></li> |
| <li><a href="#" class="hover:underline">FAQ</a></li> |
| <li><a href="#" class="hover:underline">Contact Us</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> |
| <p class="opacity-80 mb-4">Stay updated on new releases and special offers!</p> |
| <form class="flex"> |
| <input type="email" placeholder="Your email" class="py-3 px-4 rounded-l-lg w-full text-gray-800 focus:outline-none"> |
| <button class="labubu-btn bg-[var(--labubu-pink)] hover:bg-[#ff7aa3] py-3 px-4 rounded-r-lg font-bold"> |
| Join |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="pt-8 border-t border-white border-opacity-20 text-center text-sm opacity-80"> |
| <p>© 2023 Labubu Wonderland. All rights reserved. Created with ❤️ for Labubu fans.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="cart-popup" class="fixed hidden inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 relative"> |
| <button id="close-cart" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
| </svg> |
| </button> |
| |
| <h2 class="labubu-font text-2xl font-bold text-[var(--labubu-purple)] mb-6">Your Cart</h2> |
| |
| <div class="space-y-4 mb-4"> |
| <div class="flex items-center"> |
| <div class="bg-[var(--labubu-blue)] rounded-lg w-16 h-16 mr-4"></div> |
| <div class="flex-1"> |
| <h3 class="font-bold text-gray-800">Labubu Classic</h3> |
| <p class="text-gray-600">$24.99</p> |
| </div> |
| <div class="flex items-center"> |
| <button class="bg-gray-200 text-gray-700 w-8 h-8 rounded-l-full">-</button> |
| <span class="text-center w-10">1</span> |
| <button class="bg-gray-200 text-gray-700 w-8 h-8 rounded-r-full">+</button> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="bg-[var(--labubu-green)] rounded-lg w-16 h-16 mr-4"></div> |
| <div class="flex-1"> |
| <h3 class="font-bold text-gray-800">Zimomo Buddy</h3> |
| <p class="text-gray-600">$19.99</p> |
| </div> |
| <div class="flex items-center"> |
| <button class="bg-gray-200 text-gray-700 w-8 h-8 rounded-l-full">-</button> |
| <span class="text-center w-10">2</span> |
| <button class="bg-gray-200 text-gray-700 w-8 h-8 rounded-r-full">+</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center mb-6"> |
| <span class="text-lg font-bold">Total:</span> |
| <span class="text-xl font-bold text-[var(--labubu-purple)]">$64.97</span> |
| </div> |
| |
| <button class="labubu-btn w-full bg-[var(--labubu-pink)] hover:bg-[#ff7aa3] text-white py-4 font-bold text-lg"> |
| Checkout |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const cartBtn = document.getElementById('cart-btn'); |
| const cartPopup = document.getElementById('cart-popup'); |
| const closeCart = document.getElementById('close-cart'); |
| |
| cartBtn.addEventListener('click', () => { |
| cartPopup.classList.remove('hidden'); |
| cartPopup.classList.add('flex'); |
| }); |
| |
| closeCart.addEventListener('click', () => { |
| cartPopup.classList.add('hidden'); |
| cartPopup.classList.remove('flex'); |
| }); |
| |
| |
| cartPopup.addEventListener('click', (e) => { |
| if (e.target === cartPopup) { |
| cartPopup.classList.add('hidden'); |
| cartPopup.classList.remove('flex'); |
| } |
| }); |
| |
| |
| const addToCartButtons = document.querySelectorAll('.labubu-btn:not(.bg-[var(--labubu-purple)]):not(.bg-[var(--labubu-blue)])'); |
| const cartCount = document.getElementById('cart-count'); |
| |
| addToCartButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| |
| button.textContent = 'Added!'; |
| button.classList.add('bg-[var(--labubu-yellow)]', 'hover:bg-[var(--labubu-yellow)]'); |
| |
| |
| let count = parseInt(cartCount.textContent); |
| cartCount.textContent = count + 1; |
| |
| |
| setTimeout(() => { |
| button.textContent = 'Add to Cart'; |
| button.classList.remove('bg-[var(--labubu-yellow)]', 'hover:bg-[var(--labubu-yellow)]'); |
| }, 1500); |
| }); |
| }); |
| </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=dlimeng/labubu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
