|
<!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> |