| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Luxe Lingerie | Premium Intimate Apparel</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"> |
| <script src="https://js.stripe.com/v3/"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap'); |
| |
| :root { |
| --primary: #f8c6d2; |
| --secondary: #e8a4b8; |
| --dark: #1a1a1a; |
| --light: #f9f9f9; |
| } |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background-color: var(--light); |
| color: var(--dark); |
| } |
| |
| .heading-font { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .hero { |
| background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1590845947676-fa2576f585d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); |
| background-size: cover; |
| background-position: center; |
| min-height: 80vh; |
| } |
| |
| .product-card:hover .product-overlay { |
| opacity: 1; |
| } |
| |
| .product-overlay { |
| transition: all 0.3s ease; |
| opacity: 0; |
| } |
| |
| .size-selector input[type="radio"]:checked + label { |
| background-color: var(--secondary); |
| color: white; |
| } |
| |
| .cart-item-enter { |
| opacity: 0; |
| transform: translateX(100px); |
| } |
| |
| .cart-item-enter-active { |
| opacity: 1; |
| transform: translateX(0); |
| transition: all 300ms ease; |
| } |
| |
| .cart-item-exit { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| |
| .cart-item-exit-active { |
| opacity: 0; |
| transform: translateX(100px); |
| transition: all 300ms ease; |
| } |
| |
| .dropdown:hover .dropdown-menu { |
| display: block; |
| } |
| |
| |
| .ai-assistant { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| z-index: 1000; |
| } |
| |
| .ai-toggle { |
| background-color: #6b46c1; |
| color: white; |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .ai-toggle:hover { |
| transform: scale(1.1); |
| } |
| |
| .ai-container { |
| position: fixed; |
| bottom: 90px; |
| right: 20px; |
| width: 350px; |
| max-height: 500px; |
| background-color: white; |
| border-radius: 12px; |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| transform: translateY(20px); |
| opacity: 0; |
| visibility: hidden; |
| display: flex; |
| flex-direction: column; |
| z-index: 1001; |
| overflow: hidden; |
| } |
| |
| .ai-container.open { |
| transform: translateY(0); |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| .ai-header { |
| background-color: #6b46c1; |
| color: white; |
| padding: 15px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .ai-header img { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| margin-right: 10px; |
| } |
| |
| .ai-header h3 { |
| font-weight: 600; |
| font-size: 18px; |
| } |
| |
| .ai-messages { |
| flex-grow: 1; |
| padding: 15px; |
| overflow-y: auto; |
| background-color: #f9f9f9; |
| } |
| |
| .message { |
| margin-bottom: 15px; |
| max-width: 80%; |
| padding: 10px 15px; |
| border-radius: 18px; |
| font-size: 14px; |
| line-height: 1.4; |
| } |
| |
| .ai-message { |
| background-color: #e9e9eb; |
| color: #333; |
| align-self: flex-start; |
| border-bottom-left-radius: 5px; |
| } |
| |
| .user-message { |
| background-color: #6b46c1; |
| color: white; |
| align-self: flex-end; |
| border-bottom-right-radius: 5px; |
| } |
| |
| .ai-input { |
| display: flex; |
| padding: 15px; |
| border-top: 1px solid #eee; |
| background-color: white; |
| } |
| |
| .ai-input input { |
| flex-grow: 1; |
| padding: 10px 15px; |
| border: 1px solid #ddd; |
| border-radius: 20px; |
| outline: none; |
| font-size: 14px; |
| } |
| |
| .ai-input button { |
| background-color: #6b46c1; |
| color: white; |
| border: none; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| margin-left: 10px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .ai-suggestions { |
| display: flex; |
| flex-wrap: wrap; |
| padding: 10px; |
| background-color: #f9f9f9; |
| border-top: 1px solid #eee; |
| } |
| |
| .suggestion-chip { |
| background-color: white; |
| border: 1px solid #ddd; |
| border-radius: 20px; |
| padding: 5px 12px; |
| margin: 5px; |
| font-size: 12px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
| |
| .suggestion-chip:hover { |
| background-color: #6b46c1; |
| color: white; |
| border-color: #6b46c1; |
| } |
| |
| .typing-indicator { |
| display: flex; |
| padding: 10px 15px; |
| background-color: #e9e9eb; |
| border-radius: 18px; |
| width: fit-content; |
| margin-bottom: 15px; |
| } |
| |
| .typing-dot { |
| width: 8px; |
| height: 8px; |
| background-color: #999; |
| border-radius: 50%; |
| margin: 0 2px; |
| animation: typing 1.4s infinite ease-in-out; |
| } |
| |
| .typing-dot:nth-child(1) { |
| animation-delay: 0s; |
| } |
| |
| .typing-dot:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| |
| .typing-dot:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| |
| @keyframes typing { |
| 0%, 60%, 100% { |
| transform: translateY(0); |
| } |
| 30% { |
| transform: translateY(-5px); |
| } |
| } |
| |
| |
| .page { |
| display: none; |
| } |
| |
| .page.active { |
| display: block; |
| animation: fadeIn 0.5s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| |
| .StripeElement { |
| box-sizing: border-box; |
| height: 40px; |
| padding: 10px 12px; |
| border: 1px solid #d1d5db; |
| border-radius: 4px; |
| background-color: white; |
| } |
| |
| .StripeElement--focus { |
| border-color: #818cf8; |
| box-shadow: 0 0 0 1px #818cf8; |
| } |
| |
| .StripeElement--invalid { |
| border-color: #ef4444; |
| } |
| |
| .StripeElement--webkit-autofill { |
| background-color: #fefde0 !important; |
| } |
| |
| |
| .job-application-form input, |
| .job-application-form textarea, |
| .job-application-form select { |
| width: 100%; |
| padding: 0.75rem; |
| border: 1px solid #d1d5db; |
| border-radius: 0.375rem; |
| margin-bottom: 1rem; |
| } |
| |
| |
| .contact-form input, |
| .contact-form textarea { |
| width: 100%; |
| padding: 0.75rem; |
| border: 1px solid #d1d5db; |
| border-radius: 0.375rem; |
| margin-bottom: 1rem; |
| } |
| </style> |
| </head> |
| <body class="overflow-x-hidden"> |
| |
| <div class="bg-pink-900 text-white text-center py-2 px-4 text-sm"> |
| Free shipping on orders over $100 | Use code LUXE20 for 20% off your first order |
| </div> |
| |
| |
| <header class="sticky top-0 z-50 bg-white shadow-sm"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| |
| |
| <div class="flex items-center"> |
| <a href="#" class="text-2xl font-bold heading-font text-pink-800" onclick="showPage('home')">Luxe Lingerie</a> |
| </div> |
| |
| |
| <nav class="hidden md:flex space-x-8"> |
| <div class="dropdown relative"> |
| <button class="hover:text-pink-700 transition">Shop <i class="fas fa-chevron-down ml-1 text-xs"></i></button> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-pink-50" onclick="showPage('bras')">Bras</a> |
| <a href="#" class="block px-4 py-2 hover:bg-pink-50" onclick="showPage('panties')">Panties</a> |
| <a href="#" class="block px-4 py-2 hover:bg-pink-50" onclick="showPage('lingerie-sets')">Lingerie Sets</a> |
| <a href="#" class="block px-4 py-2 hover:bg-pink-50" onclick="showPage('bodysuits')">Bodysuits</a> |
| <a href="#" class="block px-4 py-2 hover:bg-pink-50" onclick="showPage('sleepwear')">Sleepwear</a> |
| </div> |
| </div> |
| <a href="#" class="hover:text-pink-700 transition" onclick="showPage('new-arrivals')">New Arrivals</a> |
| <a href="#" class="hover:text-pink-700 transition" onclick="showPage('collections')">Collections</a> |
| <a href="#" class="hover:text-pink-700 transition" onclick="showPage('about')">About</a> |
| </nav> |
| |
| |
| <div class="flex items-center space-x-4"> |
| <button class="hover:text-pink-700 transition" onclick="showPage('search')"> |
| <i class="fas fa-search"></i> |
| </button> |
| <button class="hover:text-pink-700 transition" onclick="showPage('account')"> |
| <i class="fas fa-user"></i> |
| </button> |
| <button id="cart-button" class="hover:text-pink-700 transition relative"> |
| <i class="fas fa-shopping-bag"></i> |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-pink-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> |
| <div class="container mx-auto px-4 py-3"> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('home')">Home</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('bras')">Bras</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('panties')">Panties</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('lingerie-sets')">Lingerie Sets</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('bodysuits')">Bodysuits</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('sleepwear')">Sleepwear</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('new-arrivals')">New Arrivals</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('collections')">Collections</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('about')">About</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('contact')">Contact</a> |
| <a href="#" class="block py-2 hover:text-pink-700" onclick="showPage('account')">Account</a> |
| </div> |
| </div> |
| </header> |
| |
| |
| <main id="main-content"> |
| |
| <div id="home" class="page active"> |
| |
| <section class="hero flex items-center justify-center text-center text-white"> |
| <div class="max-w-4xl px-4"> |
| <h1 class="heading-font text-4xl md:text-6xl font-bold mb-6">Discover Your Perfect Fit</h1> |
| <p class="text-xl mb-8">Indulge in our luxurious collection of handcrafted lingerie designed to celebrate every curve.</p> |
| <button onclick="showPage('new-arrivals')" class="bg-white text-pink-800 px-8 py-3 rounded-full font-medium hover:bg-opacity-90 transition">Shop Now</button> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 px-4"> |
| <div class="container mx-auto"> |
| <h2 class="heading-font text-3xl text-center mb-12">Shop by Category</h2> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <a href="#" class="group relative overflow-hidden rounded-lg h-64" onclick="showPage('bras')"> |
| <img src="https://images.unsplash.com/photo-1590239926043-53316d594bfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Bras" class="w-full h-full object-cover transition duration-500 group-hover:scale-105"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <h3 class="text-white text-xl font-medium">Bras</h3> |
| </div> |
| </a> |
| <a href="#" class="group relative overflow-hidden rounded-lg h-64" onclick="showPage('panties')"> |
| <img src="https://images.unsplash.com/photo-1529374257234-475a008414b8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Panties" class="w-full h-full object-cover transition duration-500 group-hover:scale-105"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <h3 class="text-white text-xl font-medium">Panties</h3> |
| </div> |
| </a> |
| <a href="#" class="group relative overflow-hidden rounded-lg h-64" onclick="showPage('lingerie-sets')"> |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Lingerie Sets" class="w-full h-full object-cover transition duration-500 group-hover:scale-105"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <h3 class="text-white text-xl font-medium">Lingerie Sets</h3> |
| </div> |
| </a> |
| <a href="#" class="group relative overflow-hidden rounded-lg h-64" onclick="showPage('bodysuits')"> |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Bodysuits" class="w-full h-full object-cover transition duration-500 group-hover:scale-105"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <h3 class="text-white text-xl font-medium">Bodysuits</h3> |
| </div> |
| </a> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 px-4 bg-pink-50" id="products-section"> |
| <div class="container mx-auto"> |
| <h2 class="heading-font text-3xl text-center mb-12">New Arrivals</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8" id="products-container"> |
| |
| </div> |
| <div class="text-center mt-12"> |
| <button onclick="showPage('new-arrivals')" class="border border-pink-700 text-pink-700 px-8 py-3 rounded-full font-medium hover:bg-pink-700 hover:text-white transition">View All Products</button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 px-4"> |
| <div class="container mx-auto max-w-5xl"> |
| <h2 class="heading-font text-3xl text-center mb-12">Size Guide</h2> |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="grid grid-cols-1 md:grid-cols-2"> |
| <div class="p-8"> |
| <h3 class="font-bold text-lg mb-4">Bra Size Guide</h3> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-sm"> |
| <thead> |
| <tr class="border-b"> |
| <th class="text-left py-2">Size</th> |
| <th class="text-left py-2">Underbust (cm)</th> |
| <th class="text-left py-2">Bust (cm)</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b"> |
| <td class="py-2">32A</td> |
| <td class="py-2">68-72</td> |
| <td class="py-2">82-84</td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2">32B</td> |
| <td class="py-2">68-72</td> |
| <td class="py-2">84-86</td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2">34B</td> |
| <td class="py-2">73-77</td> |
| <td class="py-2">89-91</td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2">34C</td> |
| <td class="py-2">73-77</td> |
| <td class="py-2">91-93</td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2">36C</td> |
| <td class="py-2">78-82</td> |
| <td class="py-2">96-98</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div class="p-8 bg-pink-50"> |
| <h3 class="font-bold text-lg mb-4">How to Measure</h3> |
| <div class="flex items-start mb-4"> |
| <div class="bg-pink-100 rounded-full h-8 w-8 flex items-center justify-center mr-3 mt-1"> |
| <span class="text-pink-700 font-bold">1</span> |
| </div> |
| <p>Measure your underbust (just below your bust) while exhaling normally.</p> |
| </div> |
| <div class="flex items-start mb-4"> |
| <div class="bg-pink-100 rounded-full h-8 w-8 flex items-center justify-center mr-3 mt-1"> |
| <span class="text-pink-700 font-bold">2</span> |
| </div> |
| <p>Measure your bust at the fullest part while wearing a non-padded bra.</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-pink-100 rounded-full h-8 w-8 flex items-center justify-center mr-3 mt-1"> |
| <span class="text-pink-700 font-bold">3</span> |
| </div> |
| <p>Subtract your underbust measurement from your bust measurement to determine your cup size.</p> |
| </div> |
| <div class="mt-6"> |
| <a href="#" class="text-pink-700 font-medium hover:underline">Download Full Size Guide</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 px-4 bg-gray-100"> |
| <div class="container mx-auto max-w-4xl"> |
| <h2 class="heading-font text-3xl text-center mb-12">What Our Customers Say</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="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"></i> |
| </div> |
| <span class="text-sm text-gray-600">Verified Purchase</span> |
| </div> |
| <p class="mb-4">"The lace bralette is the most comfortable yet sexy piece I own. It's become my everyday essential!"</p> |
| <div class="flex items-center"> |
| <div class="h-10 w-10 rounded-full bg-pink-200 flex items-center justify-center mr-3"> |
| <span class="text-pink-700 font-bold">S</span> |
| </div> |
| <div> |
| <p class="font-medium">Sarah J.</p> |
| <p class="text-sm text-gray-600">New York</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="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"></i> |
| </div> |
| <span class="text-sm text-gray-600">Verified Purchase</span> |
| </div> |
| <p class="mb-4">"The silk chemise makes me feel like a goddess. The quality is exceptional and worth every penny."</p> |
| <div class="flex items-center"> |
| <div class="h-10 w-10 rounded-full bg-pink-200 flex items-center justify-center mr-3"> |
| <span class="text-pink-700 font-bold">M</span> |
| </div> |
| <div> |
| <p class="font-medium">Maya T.</p> |
| <p class="text-sm text-gray-600">Los Angeles</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 px-4 bg-pink-800 text-white"> |
| <div class="container mx-auto max-w-4xl text-center"> |
| <h2 class="heading-font text-3xl mb-4">Join Our Community</h2> |
| <p class="mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for exclusive offers, styling tips, and new collection previews.</p> |
| <form class="flex flex-col sm:flex-row max-w-md mx-auto sm:max-w-xl"> |
| <input type="email" placeholder="Your email address" class="px-4 py-3 rounded-l-full sm:rounded-r-none rounded-r-full mb-2 sm:mb-0 flex-grow text-gray-900"> |
| <button type="submit" class="bg-white text-pink-800 px-6 py-3 rounded-r-full sm:rounded-l-none rounded-l-full font-medium hover:bg-opacity-90 transition">Subscribe</button> |
| </form> |
| <p class="text-sm mt-4 text-pink-200">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <div id="bras" class="page"> |
| <section class="py-12 px-4"> |
| <div class="container mx-auto"> |
| <h1 class="heading-font text-3xl mb-8">Bras</h1> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
| |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="panties" class="page"> |
| <section class="py-12 px-4"> |
| <div class="container mx-auto"> |
| <h1 class="heading-font text-3xl mb-8">Panties</h1> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
| |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="lingerie-sets" class="page"> |
| <section class="py-12 px-4"> |
| <div class="container mx-auto"> |
| <h1 class="heading-font text-3xl mb-8">Lingerie Sets</h1> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
| |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="bodysuits" class="page"> |
| <section class="py-12 px-4"> |
| <div class="container mx-auto"> |
| <h1 class="heading-font text-3xl mb-8">Bodysuits</h1> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
| |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="sleepwear" class="page"> |
| <section class="py-12 px-4"> |
| <div class="container mx-auto"> |
| <h1 class="heading-font text-3xl mb-8">Sleepwear</h1> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
| |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="new-arrivals" class="page"> |
| <section class="py-12 px-4"> |
| <div class="container mx-auto"> |
| <h1 class="heading-font text-3xl mb-8">New Arrivals</h1> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
| |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <div id="collections" class="page"> |
| <section class="py-12 px-4"> |
| <div class="container mx-auto"> |
| <h1 class="heading-font text-3xl mb-8">Collections</h1> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="bg-pink-50 p-8 rounded-lg"> |
| <h2 class="text-2xl font-bold mb-4">Romantic Dreams</h2> |
| <p class="mb-4">Delicate lace and soft pastels for your most romantic moments.</p> |
| <button onclick="showPage('romantic-collection')" class="bg-pink-700 text-white px-4 py-2 rounded hover:bg-pink-800">View Collection</button> |
| </div> |
| <div class="bg-gray-100 p-8 rounded-lg"> |
| <h2 class="text-2xl font-bold mb-4">Modern Edge</h2> |
| <p class="mb-4">Bold designs and contemporary styles for the fashion-forward woman.</p> |
| <button onclick="showPage('modern-collection')" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-900">View Collection</button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <div id="about" class="page"> |
| <section class="py-16 px-4"> |
| <div class="container mx-auto max-w-4xl"> |
| <h1 class="heading-font text-4xl mb-8">Our Story</h1> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div> |
| <img src="https://images.unsplash.com/photo-1583744946564-b52d01e2da64?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Founder" class="w-full rounded-lg shadow-md"> |
| </div> |
| <div> |
| <h2 class="text-2xl font-bold mb-4">Crafting Confidence Since 2010</h2> |
| <p class="mb-4">Luxe Lingerie was born from a simple idea: every woman deserves to feel beautiful and confident in her own skin. Our founder, Isabella Laurent, started this journey in her Paris apartment, hand-sewing lingerie for friends and family.</p> |
| <p class="mb-4">Today, we're proud to be a global brand that stays true to our roots - creating luxurious, comfortable lingerie that celebrates all body types.</p> |
| <h3 class="text-xl font-bold mt-6 mb-3">Our Values</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-pink-600 mt-1 mr-2"></i> |
| <span>Ethical production with fair wages</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-pink-600 mt-1 mr-2"></i> |
| <span>Sustainable materials whenever possible</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-pink-600 mt-1 mr-2"></i> |
| <span>Inclusive sizing from XS to 3XL</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-pink-600 mt-1 mr-2"></i> |
| <span>Quality craftsmanship that lasts</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <div id="contact" class="page"> |
| <section class="py-16 px-4"> |
| <div class="container mx-auto max-w-4xl"> |
| <h1 class="heading-font text-4xl mb-8">Contact Us</h1> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div> |
| <h2 class="text-2xl font-bold mb-4">Get in Touch</h2> |
| <form class="contact-form"> |
| <div> |
| <label for="name" class="block mb-1">Name</label> |
| <input type="text" id="name" required> |
| </div> |
| <div> |
| <label for="email" class="block mb-1">Email</label> |
| <input type="email" id="email" required> |
| </div> |
| <div> |
| <label for="subject" class="block mb-1">Subject</label> |
| <input type="text" id="subject" required> |
| </div> |
| <div> |
| <label for="message" class="block mb-1">Message</label> |
| <textarea id="message" rows="5" required></textarea> |
| </div> |
| <button type="submit" class="bg-pink-700 text-white px-6 py-3 rounded hover:bg-pink-800">Send Message</button> |
| </form> |
| </div> |
| <div> |
| <h2 class="text-2xl font-bold mb-4">Our Information</h2> |
| <div class="space-y-4"> |
| <div> |
| <h3 class="font-bold">Customer Service</h3> |
| <p>Email: hello@luxelingerie.com</p> |
| <p>Phone: +1 (555) 123-4567</p> |
| </div> |
| <div> |
| <h3 class="font-bold">Headquarters</h3> |
| <p>123 Fashion Avenue</p> |
| <p>New York, NY 10001</p> |
| </div> |
| <div> |
| <h3 class="font-bold">Hours</h3> |
| <p>Monday - Friday: 9am - 6pm EST</p> |
| <p>Saturday - Sunday: 10am - 4pm EST</p> |
| </div> |
| </div> |
| <div class="mt-8"> |
| <h3 class="font-bold mb-2">Frequently Asked Questions</h3> |
| <div class="space-y-2"> |
| <a href="#" class="block text-pink-700 hover:underline" onclick="showPage('shipping')">Shipping Information</a> |
| <a href="#" class="block text-pink-700 hover:underline" onclick="showPage('returns')">Returns & Exchanges</a> |
| <a href="#" class="block text-pink-700 hover:underline" onclick="showPage('size-guide')">Size Guide</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <div id="shipping" class="page"> |
| <section class="py-16 px-4"> |
| <div class="container mx-auto max-w-4xl"> |
| <h1 class="heading-font text-4xl mb-8">Shipping Information</h1> |
| <div class="bg-white rounded-lg shadow-md p-8"> |
| <h2 class="text-2xl font-bold mb-4">Shipping Options</h2> |
| <div class="space-y-6"> |
| <div> |
| <h3 class="font-bold text-lg">Standard Shipping</h3> |
| <p>Delivery in 5-7 business days</p> |
| <p class="text-pink-700">Free on orders over $100</p> |
| <p>$5.95 for orders under $100</p> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">Express Shipping</h3> |
| <p>Delivery in 2-3 business days</p> |
| <p>$12.95</p> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">Overnight Shipping</h3> |
| <p>Delivery next business day</p> |
| <p>$24.95</p> |
| </div> |
| </div> |
| |
| <h2 class="text-2xl font-bold mt-8 mb-4">International Shipping</h2> |
| <p class="mb-4">We ship to over 50 countries worldwide. International orders typically arrive within 7-14 business days.</p> |
| <p class="mb-4">Customs fees may apply depending on your country's regulations. These fees are the responsibility of the customer.</p> |
| |
| <h2 class="text-2xl font-bold mt-8 mb-4">Order Tracking</h2> |
| <p>Once your order has shipped, you'll receive a tracking number via email. You can track your package using our <a href="#" class="text-pink-700 hover:underline">Order Tracker</a>.</p> |
| |
| <div class="mt-8"> |
| <button onclick="showPage('contact')" class="bg-pink-700 text-white px-6 py-3 rounded hover:bg-pink-800">Contact Us for Shipping Questions</button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <div id="returns" class="page"> |
| <section class="py-16 px-4"> |
| <div class="container mx-auto max-w-4xl"> |
| <h1 class="heading-font text-4xl mb-8">Returns & Exchanges</h1> |
| <div class="bg-white rounded-lg shadow-md p-8"> |
| <h2 class="text-2xl font-bold mb-4">Our Return Policy</h2> |
| <p class="mb-4">We want you to be completely satisfied with your purchase. If for any reason you're not happy with your order, we accept returns within 30 days of delivery.</p> |
| |
| <div class="space-y-6"> |
| <div> |
| <h3 class="font-bold text-lg">Return Conditions</h3> |
| <ul class="list-disc pl-5 space-y-2"> |
| <li>Items must be unworn, unwashed, and in original condition with tags attached</li> |
| <li>Final sale items marked "non-returnable" cannot be returned</li> |
| <li>Underwear and swimwear must have hygiene seal intact</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">How to Return</h3> |
| <ol class="list-decimal pl-5 space-y-2"> |
| <li>Log in to your account and go to "Order History"</li> |
| <li>Select the item(s) you wish to return</li> |
| <li>Print the prepaid return label</li> |
| <li>Package your return securely and attach the label</li> |
| <li>Drop off at any UPS location</li> |
| </ol> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">Refunds</h3> |
| <p>Refunds will be processed within 3-5 business days after we receive your return. The original shipping fee is non-refundable.</p> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">Exchanges</h3> |
| <p>For size exchanges, please place a new order for the correct size and return the original item following our return process.</p> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <button onclick="showPage('contact')" class="bg-pink-700 text-white px-6 py-3 rounded hover:bg-pink-800">Contact Us for Return Questions</button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <div id="careers" class="page"> |
| <section class="py-16 px-4"> |
| <div class="container mx-auto max-w-4xl"> |
| <h1 class="heading-font text-4xl mb-8">Join Our Team</h1> |
| <div class="bg-white rounded-lg shadow-md p-8"> |
| <h2 class="text-2xl font-bold mb-4">Current Openings</h2> |
| |
| <div class="space-y-6"> |
| <div class="border-b pb-4"> |
| <h3 class="font-bold text-lg">Retail Sales Associate</h3> |
| <p class="text-gray-600 mb-2">New York, NY | Full-time</p> |
| <p class="mb-3">We're looking for passionate individuals to join our flagship store team in SoHo. You'll provide exceptional customer service and help clients find their perfect fit.</p> |
| <button onclick="showPage('retail-position')" class="text-pink-700 hover:underline">View Details & Apply</button> |
| </div> |
| <div class="border-b pb-4"> |
| <h3 class="font-bold text-lg">E-commerce Specialist</h3> |
| <p class="text-gray-600 mb-2">Remote | Full-time</p> |
| <p class="mb-3">Join our digital team to help manage our online store, optimize product listings, and improve the customer shopping experience.</p> |
| <button onclick="showPage('ecommerce-position')" class="text-pink-700 hover:underline">View Details & Apply</button> |
| </div> |
| <div class="border-b pb-4"> |
| <h3 class="font-bold text-lg">Design Assistant</h3> |
| <p class="text-gray-600 mb-2">Los Angeles, CA | Full-time</p> |
| <p class="mb-3">Support our design team in creating beautiful lingerie collections. Ideal for fashion graduates with a passion for intimate apparel.</p> |
| <button onclick="showPage('design-position')" class="text-pink-700 hover:underline">View Details & Apply</button> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h2 class="text-2xl font-bold mb-4">Why Work With Us?</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="bg-pink-50 p-4 rounded-lg"> |
| <h3 class="font-bold mb-2">Employee Benefits</h3> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>Competitive salaries</li> |
| <li>Health, dental, and vision insurance</li> |
| <li>401(k) matching</li> |
| <li>Generous employee discount</li> |
| </ul> |
| </div> |
| <div class="bg-pink-50 p-4 rounded-lg"> |
| <h3 class="font-bold mb-2">Our Culture</h3> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>Inclusive and diverse workplace</li> |
| <li>Opportunities for growth</li> |
| <li>Creative and collaborative environment</li> |
| <li>Commitment to sustainability</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <button onclick="showPage('contact')" class="bg-pink-700 text-white px-6 py-3 rounded hover:bg-pink-800">Contact Our HR Team</button> |
| </div> |
| </极简AI购物助手代码已添加，但为了保持简洁，我将继续完成剩余的HTML结构。以下是完整的AI购物助手实现： |
|
|
| ```html |
| |
| <div class="ai-assistant"> |
| <div class="ai-toggle" id="ai-toggle"> |
| <i class="fas fa-robot text-2xl"></i> |
| </div> |
| <div class="ai-container" id="ai-container"> |
| <div class="ai-header"> |
| <img src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png" alt="AI Assistant"> |
| <h3>Luxe Shopping Assistant</h3> |
| </div> |
| <div class="ai-messages" id="ai-messages"> |
| |
| </div> |
| <div class="ai-suggestions" id="ai-suggestions"> |
| <div class="suggestion-chip">What's new?</div> |
| <div class="suggestion-chip">Best sellers</div> |
| <div class="suggestion-chip">Size guide</div> |
| <div class="suggestion-chip">Shipping info</div> |
| </div> |
| <div class="ai-input"> |
| <input type="text" id="ai-input" placeholder="Ask me anything..."> |
| <button id="ai-send"><i class="fas fa-paper-plane"></i></button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const aiToggle = document.getElementById('ai-toggle'); |
| const aiContainer = document.getElementById('ai-container'); |
| const aiMessages = document.getElementById('ai-messages'); |
| const aiInput = document.getElementById('ai-input'); |
| const aiSend = document.getElementById('ai-send'); |
| const aiSuggestions = document.getElementById('ai-suggestions'); |
| |
| let isAssistantOpen = false; |
| |
| |
| setTimeout(() => { |
| addBotMessage("Hello there! 👋 I'm your Luxe Lingerie shopping assistant. How can I help you today?"); |
| }, 1000); |
| |
| |
| aiToggle.addEventListener('click', function() { |
| isAssistantOpen = !isAssistantOpen; |
| if (isAssistantOpen) { |
| aiContainer.classList.add('open'); |
| } else { |
| aiContainer.classList.remove('open'); |
| } |
| }); |
| |
| |
| aiSend.addEventListener('click', sendMessage); |
| |
| |
| aiInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| |
| aiSuggestions.querySelectorAll('.suggestion-chip').forEach(chip => { |
| chip.addEventListener('click', function() { |
| const text = this.textContent; |
| aiInput.value = text; |
| sendMessage(); |
| }); |
| }); |
| |
| function sendMessage() { |
| const message = aiInput.value.trim(); |
| if (message) { |
| addUserMessage(message); |
| aiInput.value = ''; |
| |
| |
| const typingIndicator = document.createElement('div'); |
| typingIndicator.className = 'typing-indicator'; |
| typingIndicator.innerHTML = ` |
| <div class="typing-dot"></div> |
| <div class="typing-dot"></div> |
| <div class="typing-dot"></div> |
| `; |
| aiMessages.appendChild(typingIndicator); |
| aiMessages.scrollTop = aiMessages.scrollHeight; |
| |
| |
| setTimeout(() => { |
| |
| aiMessages.removeChild(typingIndicator); |
| |
| |
| const response = generateResponse(message); |
| addBotMessage(response); |
| }, 1000 + Math.random() * 2000); |
| } |
| } |
| |
| function addUserMessage(text) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'message user-message'; |
| messageDiv.textContent = text; |
| aiMessages.appendChild(messageDiv); |
| aiMessages.scrollTop = aiMessages.scrollHeight; |
| } |
| |
| function addBotMessage(text) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'message ai-message'; |
| messageDiv.innerHTML = text; |
| aiMessages.appendChild(messageDiv); |
| aiMessages.scrollTop = aiMessages.scrollHeight; |
| } |
| |
| function generateResponse(userMessage) { |
| const lowerMessage = userMessage.toLowerCase(); |
| |
| if (lowerMessage.includes('hello') || lowerMessage.includes('hi') || lowerMessage.includes('hey')) { |
| return "Hello again! 😊 What can I help you with today? You can ask about our products, sizes, shipping, or anything else!"; |
| } |
| |
| if (lowerMessage.includes('new') || lowerMessage.includes('arrival')) { |
| return "Our new arrivals are absolutely stunning! 💖 Check out our latest <a href='#' onclick='showPage(\"new-arrivals\")' class='text-pink-700 hover:underline'>collection here</a>. Would you like recommendations based on your style?"; |
| } |
| |
| if (lowerMessage.includes('best') || lowerMessage.includes('popular') || lowerMessage.includes('seller')) { |
| return "Our customers love these bestsellers:<br><br>" + |
| "1. <a href='#' onclick='showPage(\"bras\")' class='text-pink-700 hover:underline'>Lace Bralette</a> - Comfortable and sexy<br>" + |
| "2. <a href='#' onclick='showPage(\"lingerie-sets\")' class='text-pink-700 hover:underline'>Silk Chemise Set</a> - Luxurious feel<br>" + |
| "3. <a href='#' onclick='showPage(\"panties\")' class='text-pink-700 hover:underline'>Seamless Panties</a> - Perfect for everyday wear<br><br>" + |
| "Would you like more details about any of these?"; |
| } |
| |
| if (lowerMessage.includes('size') || lowerMessage.includes('fit') || lowerMessage.includes('measure')) { |
| return "Finding the perfect fit is so important! 👙 You can check our detailed <a href='#' onclick='showPage(\"size-guide\")' class='text-pink-700 hover:underline'>size guide here</a>. Would you like me to help you determine your size?"; |
| } |
| |
| if (lowerMessage.includes('ship') || lowerMessage.includes('deliver') || lowerMessage.includes('shipping')) { |
| return "We offer several shipping options:<br><br>" + |
| "🚚 Standard: 5-7 business days (Free over $100)<br>" + |
| "✈️ Express: 2-3 business days ($12.95)<br>" + |
| "⚡ Overnight: Next business day ($24.95)<br><br>" + |
| "More details in our <a href='#' onclick='showPage(\"shipping\")' class='text-pink-700 hover:underline'>shipping info</a> section."; |
| } |
| |
| if (lowerMessage.includes('return') || lowerMessage.includes('exchange')) { |
| return "We accept returns within 30 days of delivery. Items must be unworn with tags attached. For more details, check our <a href='#' onclick='showPage(\"returns\")' class='text-pink-700 hover:underline'>returns policy</a>."; |
| } |
| |
| if (lowerMessage.includes('bra') || lowerMessage.includes('bralette')) { |
| return "Our bras and bralettes are designed for both comfort and style! You might like:<br><br>" + |
| "1. <a href='#' onclick='showPage(\"bras\")' class='text-pink-700 hover:underline'>Lace Bralette</a> - Perfect for everyday wear<br>" + |
| "2. <a href='#' onclick='showPage(\"bras\")' class='text-pink-700 hover:underline'>Push-Up Bra</a> - For extra lift<br>" + |
| "3. <a href='#' onclick='showPage(\"bras\")' class='text-pink-700 hover:underline'>Sports Bra</a> - For active lifestyles<br><br>" + |
| "Would you like recommendations based on your size?"; |
| } |
| |
| if (lowerMessage.includes('pant') || lowerMessage.includes('underwear')) { |
| return "We have a beautiful selection of panties in various styles:<br><br>" + |
| "1. <a href='#' onclick='showPage(\"panties\")' class='text-pink-700 hover:underline'>Seamless</a> - Invisible under clothing<br>" + |
| "2. <a href='#' onclick='showPage(\"panties\")' class='text-pink-700 hover:underline'>Lace</a> - Feminine and delicate<br>" + |
| "3. <a href='#' onclick='showPage(\"panties\")' class='text-pink-700 hover:underline'>High-Waisted</a> - Smoothing and flattering<br><br>" + |
| "What style are you looking for?"; |
| } |
| |
| if (lowerMessage.includes('set') || lowerMessage.includes('lingerie')) { |
| return "Our lingerie sets are perfect for special occasions or treating yourself! Check out our <a href='#' onclick='showPage(\"lingerie-sets\")' class='text-pink-700 hover:underline'>collection here</a>. Would you like recommendations for a particular occasion?"; |
| } |
| |
| if (lowerMessage.includes('thank') || lowerMessage.includes('thanks')) { |
| return "You're very welcome! 😊 Is there anything else I can help you with?"; |
| } |
| |
| if (lowerMessage.includes('bye') || lowerMessage.includes('goodbye')) { |
| return "Goodbye! 👋 Remember, I'm here whenever you need help with your Luxe Lingerie shopping experience!"; |
| } |
| |
| |
| return "I'd love to help you with that! While I'm still learning, I can assist with:<br><br>" + |
| "• Product recommendations<br>" + |
| "• Size and fit guidance<br>" + |
| "• Order and shipping info<br>" + |
| "• Returns and exchanges<br><br>" + |
| "What would you like to know more about?"; |
| } |
| }); |
| |
| |
| function showPage(pageId) { |
| document.querySelectorAll('.page').forEach(page => { |
| page.classList.remove('active'); |
| }); |
| document.getElementById(pageId).classList.add('active'); |
| window.scrollTo(0, 0); |
| } |
| |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| document.getElementById('mobile-menu').classList.toggle('hidden'); |
| }); |
| |
| |
| function logout() { |
| alert('You have been logged out.'); |
| showPage('home'); |
| } |
| </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=ILLERRAPS/segalsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
