labubu / index.html
dlimeng's picture
Create a Labubu online store page that matches Labubu's art style. - Initial Deployment
437912a verified
<!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 -->
<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>
<!-- Hero Section -->
<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>
<!-- Featured Products -->
<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">
<!-- Product 1 -->
<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>
<!-- Product 2 -->
<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>
<!-- Product 3 -->
<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>
<!-- Product 4 -->
<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>
<!-- Story 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 -->
<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>
<!-- Cart Popup -->
<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>
// Cart functionality
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');
});
// Close cart when clicking outside
cartPopup.addEventListener('click', (e) => {
if (e.target === cartPopup) {
cartPopup.classList.add('hidden');
cartPopup.classList.remove('flex');
}
});
// Add to cart buttons
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', () => {
// Add to cart animation
button.textContent = 'Added!';
button.classList.add('bg-[var(--labubu-yellow)]', 'hover:bg-[var(--labubu-yellow)]');
// Update cart count
let count = parseInt(cartCount.textContent);
cartCount.textContent = count + 1;
// Reset button after 1.5 seconds
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>