| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Magical Swim Collection | Disney Inspired</title> |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --primary: #e91e63; |
| --primary-light: #fce4ec; |
| --secondary: #9c27b0; |
| --accent: #ffd700; |
| --dark: #1a1a2e; |
| --light: #fefefe; |
| --glass: rgba(255, 255, 255, 0.1); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
| color: var(--light); |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| |
| .sparkles { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 0; |
| overflow: hidden; |
| } |
| |
| .sparkle { |
| position: absolute; |
| width: 4px; |
| height: 4px; |
| background: var(--accent); |
| border-radius: 50%; |
| animation: float 15s infinite; |
| opacity: 0; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; } |
| 10% { opacity: 1; } |
| 90% { opacity: 1; } |
| 100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; } |
| } |
| |
| |
| header { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 100; |
| padding: 1rem 5%; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| background: linear-gradient(180deg, rgba(26,26,46,0.95) 0%, rgba(26,26,46,0) 100%); |
| backdrop-filter: blur(10px); |
| } |
| |
| .logo { |
| font-family: 'Playfair Display', serif; |
| font-size: 1.8rem; |
| font-weight: 700; |
| background: linear-gradient(45deg, var(--primary), var(--accent)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| text-decoration: none; |
| } |
| |
| .logo span { |
| font-size: 0.9rem; |
| font-weight: 300; |
| display: block; |
| letter-spacing: 3px; |
| text-transform: uppercase; |
| } |
| |
| nav ul { |
| display: flex; |
| gap: 2rem; |
| list-style: none; |
| } |
| |
| nav a { |
| color: var(--light); |
| text-decoration: none; |
| font-weight: 400; |
| position: relative; |
| transition: color 0.3s; |
| } |
| |
| nav a::after { |
| content: ''; |
| position: absolute; |
| bottom: -5px; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: var(--primary); |
| transition: width 0.3s; |
| } |
| |
| nav a:hover::after { |
| width: 100%; |
| } |
| |
| |
| .hero { |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| padding: 8rem 5% 4rem; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .hero-content { |
| flex: 1; |
| max-width: 600px; |
| } |
| |
| .hero h1 { |
| font-family: 'Playfair Display', serif; |
| font-size: clamp(3rem, 8vw, 5rem); |
| line-height: 1.1; |
| margin-bottom: 1.5rem; |
| animation: slideUp 1s ease-out; |
| } |
| |
| .hero h1 span { |
| display: block; |
| background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .hero p { |
| font-size: 1.1rem; |
| opacity: 0.8; |
| margin-bottom: 2rem; |
| animation: slideUp 1s ease-out 0.2s both; |
| } |
| |
| .cta-btn { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 1rem 2.5rem; |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); |
| color: white; |
| text-decoration: none; |
| border-radius: 50px; |
| font-weight: 600; |
| transition: transform 0.3s, box-shadow 0.3s; |
| animation: slideUp 1s ease-out 0.4s both; |
| } |
| |
| .cta-btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 30px rgba(233, 30, 99, 0.4); |
| } |
| |
| .hero-visual { |
| flex: 1; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| position: relative; |
| } |
| |
| .hero-model { |
| width: 100%; |
| max-width: 450px; |
| height: 600px; |
| background: linear-gradient(135deg, var(--primary-light), rgba(156, 39, 176, 0.3)); |
| border-radius: 50% 50% 0 0; |
| position: relative; |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| .hero-model::before { |
| content: '👗'; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| font-size: 12rem; |
| opacity: 0.9; |
| } |
| |
| .floating-element { |
| position: absolute; |
| font-size: 2rem; |
| animation: float 4s ease-in-out infinite; |
| } |
| |
| .floating-element:nth-child(2) { top: 10%; right: 10%; animation-delay: -1s; } |
| .floating-element:nth-child(3) { bottom: 20%; left: 5%; animation-delay: -2s; } |
| .floating-element:nth-child(4) { top: 30%; left: 10%; animation-delay: -3s; } |
| |
| @keyframes slideUp { |
| from { opacity: 0; transform: translateY(30px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| |
| .collection { |
| padding: 4rem 5%; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .section-header { |
| text-align: center; |
| margin-bottom: 4rem; |
| } |
| |
| .section-header h2 { |
| font-family: 'Playfair Display', serif; |
| font-size: 2.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .section-header p { |
| opacity: 0.7; |
| max-width: 500px; |
| margin: 0 auto; |
| } |
| |
| .filter-tabs { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| margin-bottom: 3rem; |
| flex-wrap: wrap; |
| } |
| |
| .filter-tab { |
| padding: 0.8rem 1.5rem; |
| border: 1px solid rgba(255,255,255,0.2); |
| border-radius: 30px; |
| background: transparent; |
| color: var(--light); |
| cursor: pointer; |
| transition: all 0.3s; |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| .filter-tab.active, .filter-tab:hover { |
| background: var(--primary); |
| border-color: var(--primary); |
| } |
| |
| .products-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 2rem; |
| } |
| |
| .product-card { |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 20px; |
| overflow: hidden; |
| transition: transform 0.3s, box-shadow 0.3s; |
| cursor: pointer; |
| position: relative; |
| } |
| |
| .product-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); |
| } |
| |
| .product-image { |
| height: 350px; |
| position: relative; |
| overflow: hidden; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .product-image .swimsuit-display { |
| font-size: 8rem; |
| transition: transform 0.5s; |
| } |
| |
| .product-card:hover .swimsuit-display { |
| transform: scale(1.1); |
| } |
| |
| .product-badge { |
| position: absolute; |
| top: 15px; |
| left: 15px; |
| padding: 0.3rem 1rem; |
| background: var(--accent); |
| color: var(--dark); |
| font-size: 0.75rem; |
| font-weight: 600; |
| border-radius: 20px; |
| } |
| |
| .product-info { |
| padding: 1.5rem; |
| } |
| |
| .product-theme { |
| font-size: 0.8rem; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| color: var(--primary); |
| margin-bottom: 0.5rem; |
| } |
| |
| .product-name { |
| font-family: 'Playfair Display', serif; |
| font-size: 1.3rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| .product-price { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .price { |
| font-size: 1.4rem; |
| font-weight: 600; |
| color: var(--accent); |
| } |
| |
| .original-price { |
| text-decoration: line-through; |
| opacity: 0.5; |
| } |
| |
| .add-to-cart { |
| position: absolute; |
| bottom: 1.5rem; |
| right: 1.5rem; |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| background: var(--primary); |
| border: none; |
| color: white; |
| font-size: 1.3rem; |
| cursor: pointer; |
| transition: transform 0.3s, background 0.3s; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .add-to-cart:hover { |
| transform: scale(1.1); |
| background: var(--secondary); |
| } |
| |
| |
| .features { |
| padding: 4rem 5%; |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 2rem; |
| margin-top: 4rem; |
| } |
| |
| .feature-card { |
| text-align: center; |
| padding: 2rem; |
| background: rgba(255,255,255,0.03); |
| border-radius: 20px; |
| border: 1px solid rgba(255,255,255,0.05); |
| } |
| |
| .feature-icon { |
| font-size: 3rem; |
| margin-bottom: 1rem; |
| } |
| |
| .feature-card h3 { |
| margin-bottom: 0.5rem; |
| font-size: 1.2rem; |
| } |
| |
| .feature-card p { |
| opacity: 0.6; |
| font-size: 0.9rem; |
| } |
| |
| |
| .newsletter { |
| padding: 6rem 5%; |
| text-align: center; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .newsletter-box { |
| max-width: 600px; |
| margin: 0 auto; |
| padding: 3rem; |
| background: linear-gradient(135deg, rgba(233, 30, 99, 0.2), rgba(156, 39, 176, 0.2)); |
| border-radius: 30px; |
| border: 1px solid rgba(255,255,255,0.1); |
| } |
| |
| .newsletter h2 { |
| font-family: 'Playfair Display', serif; |
| font-size: 2rem; |
| margin-bottom: 1rem; |
| } |
| |
| .newsletter-form { |
| display: flex; |
| gap: 1rem; |
| margin-top: 2rem; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| .newsletter-form input { |
| flex: 1; |
| min-width: 250px; |
| padding: 1rem 1.5rem; |
| border: none; |
| border-radius: 50px; |
| background: rgba(255,255,255,0.1); |
| color: white; |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| .newsletter-form input::placeholder { |
| color: rgba(255,255,255,0.5); |
| } |
| |
| .newsletter-form button { |
| padding: 1rem 2rem; |
| border: none; |
| border-radius: 50px; |
| background: var(--primary); |
| color: white; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background 0.3s; |
| } |
| |
| .newsletter-form button:hover { |
| background: var(--secondary); |
| } |
| |
| |
| footer { |
| padding: 3rem 5%; |
| border-top: 1px solid rgba(255,255,255,0.1); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 1rem; |
| } |
| |
| footer a { |
| color: var(--accent); |
| text-decoration: none; |
| } |
| |
| footer a:hover { |
| text-decoration: underline; |
| } |
| |
| .social-links { |
| display: flex; |
| gap: 1rem; |
| } |
| |
| .social-links a { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: rgba(255,255,255,0.1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: background 0.3s; |
| } |
| |
| .social-links a:hover { |
| background: var(--primary); |
| } |
| |
| |
| .menu-toggle { |
| display: none; |
| flex-direction: column; |
| gap: 5px; |
| cursor: pointer; |
| z-index: 101; |
| } |
| |
| .menu-toggle span { |
| width: 25px; |
| height: 2px; |
| background: white; |
| transition: all 0.3s; |
| } |
| |
| |
| @media (max-width: 968px) { |
| .hero { |
| flex-direction: column; |
| text-align: center; |
| padding-top: 6rem; |
| } |
| |
| .hero-content { |
| max-width: 100%; |
| } |
| |
| .hero-model { |
| width: 300px; |
| height: 400px; |
| margin-top: 2rem; |
| } |
| |
| nav { |
| position: fixed; |
| top: 0; |
| right: -100%; |
| width: 70%; |
| height: 100vh; |
| background: rgba(26, 26, 46, 0.98); |
| padding: 5rem 2rem; |
| transition: right 0.3s; |
| } |
| |
| nav.active { |
| right: 0; |
| } |
| |
| nav ul { |
| flex-direction: column; |
| gap: 1.5rem; |
| } |
| |
| .menu-toggle { |
| display: flex; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .logo { |
| font-size: 1.4rem; |
| } |
| |
| .hero h1 { |
| font-size: 2.5rem; |
| } |
| |
| .products-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .newsletter-form { |
| flex-direction: column; |
| } |
| |
| .newsletter-form input, |
| .newsletter-form button { |
| width: 100%; |
| } |
| } |
| |
| |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0,0,0,0.8); |
| z-index: 1000; |
| justify-content: center; |
| align-items: center; |
| padding: 2rem; |
| } |
| |
| .modal.active { |
| display: flex; |
| } |
| |
| .modal-content { |
| background: linear-gradient(135deg, #1a1a2e, #16213e); |
| border-radius: 30px; |
| padding: 3rem; |
| max-width: 500px; |
| width: 100%; |
| text-align: center; |
| position: relative; |
| border: 1px solid rgba(255,255,255,0.1); |
| } |
| |
| .modal-close { |
| position: absolute; |
| top: 1rem; |
| right: 1rem; |
| background: none; |
| border: none; |
| color: white; |
| font-size: 1.5rem; |
| cursor: pointer; |
| } |
| |
| .modal-icon { |
| font-size: 4rem; |
| margin-bottom: 1rem; |
| } |
| |
| .modal h3 { |
| font-family: 'Playfair Display', serif; |
| font-size: 1.8rem; |
| margin-bottom: 1rem; |
| } |
| |
| |
| .anycoder-link { |
| position: fixed; |
| bottom: 20px; |
| left: 20px; |
| z-index: 99; |
| padding: 0.5rem 1rem; |
| background: rgba(255, 215, 0, 0.2); |
| border: 1px solid var(--accent); |
| border-radius: 20px; |
| color: var(--accent); |
| text-decoration: none; |
| font-size: 0.8rem; |
| transition: all 0.3s; |
| } |
| |
| .anycoder-link:hover { |
| background: rgba(255, 215, 0, 0.4); |
| transform: scale(1.05); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="sparkles" id="sparkles"></div> |
|
|
| |
| <header> |
| <a href="#" class="logo"> |
| Enchanted |
| <span>Collection</span> |
| </a> |
| <nav id="nav"> |
| <ul> |
| <li><a href="#home">Home</a></li> |
| <li><a href="#collection">Collection</a></li> |
| <li><a href="#about">About</a></li> |
| <li><a href="#contact">Contact</a></li> |
| </ul> |
| </nav> |
| <div class="menu-toggle" id="menuToggle"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </header> |
|
|
| |
| <section class="hero" id="home"> |
| <div class="hero-content"> |
| <h1> |
| Disney Inspired |
| <span>Magical Swimwear</span> |
| </h1> |
| <p>Dive into a world of enchantment with our exclusive one-piece swimsuits. Each piece tells a story of magic, elegance, and timeless Disney charm.</p> |
| <a href="#collection" class="cta-btn"> |
| ✨ Explore Collection |
| </a> |
| </div> |
| <div class="hero-visual"> |
| <div class="hero-model"></div> |
| <div class="floating-element">🦋</div> |
| <div class="floating-element">✨</div> |
| <div class="floating-element">🌟</div> |
| </div> |
| </section> |
|
|
| |
| <section class="collection" id="collection"> |
| <div class="section-header"> |
| <h2>Our Magical Collection</h2> |
| <p>Discover stunning one-piece swimsuits inspired by your favorite Disney stories</p> |
| </div> |
|
|
| <div class="filter-tabs"> |
| <button class="filter-tab active" data-filter="all">All</button> |
| <button class="filter-tab" data-filter="princess">Princess</button> |
| <button class="filter-tab" data-filter="magic">Magic Castle</button> |
| <button class="filter-tab" data-filter="ocean">Ocean</button> |
| <button class="filter-tab" data-filter="forest">Forest</button> |
| </div> |
|
|
| <div class="products-grid" id="productsGrid"> |
| |
| </div> |
| </section> |
|
|
| |
| <section class="features"> |
| <div class="feature-card"> |
| <div class="feature-icon">👗</div> |
| <h3>Premium Quality</h3> |
| <p>Made with luxurious, durable fabrics for lasting comfort</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon">🌟</div> |
| <h3>Unique Designs</h3> |
| <p>Exclusive Disney-inspired patterns and embellishments</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon">💫</div> |
| <h3>Perfect Fit</h3> |
| <p>Flattering cuts designed for all body types</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon">🚚</div> |
| <h3>Free Shipping</h3> |
| <p>On orders over $100 with magical delivery</p> |
| </div> |
| </section> |
|
|
| |
| <section class="newsletter" id="contact"> |
| <div class="newsletter-box"> |
| <h2>Join the Magic ✨</h2> |
| <p>Subscribe to receive exclusive offers and be the first to see new collections</p> |
| <form class="newsletter-form" onsubmit="handleSubscribe(event)"> |
| <input type="email" placeholder="Enter your email" required> |
| <button type="submit">Subscribe</button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <footer> |
| <div> |
| <p>© 2024 Enchanted Swimwear. All rights reserved.</p> |
| </div> |
| <div class="social-links"> |
| <a href="#">📘</a> |
| <a href="#">📸</a> |
| <a href="#">🐦</a> |
| <a href="#">📌</a> |
| </div> |
| </footer> |
|
|
| |
| <div class="modal" id="successModal"> |
| <div class="modal-content"> |
| <button class="modal-close" onclick="closeModal()">×</button> |
| <div class="modal-icon">🎉</div> |
| <h3>Added to Cart!</h3> |
| <p>The magical swimsuit has been added to your collection</p> |
| </div> |
| </div> |
|
|
| |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a> |
|
|
| <script> |
| |
| const products = [ |
| { |
| id: 1, |
| name: "Cinderella Glass Slipper", |
| theme: "Princess", |
| price: 89.99, |
| originalPrice: 120.00, |
| badge: "Bestseller", |
| emoji: "👗", |
| colors: ["#3498db", "#f1c40f"], |
| description: "Elegant blue gown with golden accents" |
| }, |
| { |
| id: 2, |
| name: "Aurora's Rose Garden", |
| theme: "Princess", |
| price: 79.99, |
| originalPrice: 99.99, |
| badge: "New", |
| emoji: "🌹", |
| colors: ["#e91e63", "#9c27b0"], |
| description: "Romantic pink petals design" |
| }, |
| { |
| id: 3, |
| name: "Ariel's Ocean Kingdom", |
| theme: "Ocean", |
| price: 94.99, |
| originalPrice: 130.00, |
| badge: "Limited", |
| emoji: "🧜♀️", |
| colors: ["#00bcd4", "#4caf50"], |
| description: "Deep sea shimmer with scales" |
| }, |
| { |
| id: 4, |
| name: "Belle's Golden Library", |
| theme: "Magic", |
| price: 109.99, |
| originalPrice: 150.00, |
| badge: "Premium", |
| emoji: "📚", |
| colors: ["#f1c40f", "#8b4513"], |
| description: "Golden elegance with rose motifs" |
| }, |
| { |
| id: 5, |
| name: "Snow White's Apple", |
| theme: "Princess", |
| price: 74.99, |
| originalPrice: 95.00, |
| badge: null, |
| emoji: "🍎", |
| colors: ["#e74c3c", "#ecf0f1"], |
| description: "Classic red and white design" |
| }, |
| { |
| id: 6, |
| name: "Tinker Bell's Sparkle", |
| theme: "Magic", |
| price: 84.99, |
| originalPrice: 110.00, |
| badge: "Popular", |
| emoji: "🧚", |
| colors: ["#2ecc71", "#f39c12"], |
| description: "Green glitter fairy wings" |
| }, |
| { |
| id: 7, |
| name: "Mermaid's Secret Cove", |
| theme: "Ocean", |
| price: 99.99, |
| originalPrice: 140.00, |
| badge: null, |
| emoji: "🐠", |
| colors: ["#00cec9", "#6c5ce7"], |
| description: "Tropical fish and coral pattern" |
| }, |
| { |
| id: 8, |
| name: "Woodland Friends", |
| theme: "Forest", |
| price: 69.99, |
| originalPrice: 89.99, |
| badge: null, |
| emoji: "🦌", |
| colors: ["#27ae60", "#8fbc8f"], |
| description: "Forest creature embroidered design" |
| }, |
| { |
| id: 9, |
| name: "Princess Castle Dream", |
| theme: "Magic", |
| price: 119.99, |
| originalPrice: 160.00, |
| badge: "Exclusive", |
| emoji: "🏰", |
| colors: ["#9b59b6", "#e91e63"], |
| description: "Castle silhouette at sunset" |
| }, |
| { |
| id: 10, |
| name: "Rapunzel's Tower", |
| theme: "Princess", |
| price: 89.99, |
| originalPrice: 115.00, |
| badge: null, |
| emoji: "🏞️", |
| colors: ["#d35400", "#f1c40f"], |
| description: "Long flowing hair design" |
| }, |
| { |
| id: 11, |
| name: "Little Mermaid's Cove", |
| theme: "Ocean", |
| price: 94.99, |
| originalPrice: 125.00, |
| badge: "New", |
| emoji: "🐚", |
| colors: ["#1abc9c", "#3498db"], |
| description: "Shell and sea sparkles" |
| }, |
| { |
| id: 12, |
| name: "Enchanted Forest", |
| theme: "Forest", |
| price: 79.99, |
| originalPrice: 100.00, |
| badge: null, |
| emoji: "🍃", |
| colors: ["#2ecc71", "#1abc9c"], |
| description: "Mystical leaves and vines" |
| } |
| ]; |
| |
| |
| function createSparkles() { |
| const container = document.getElementById('sparkles'); |
| for (let i = 0; i < 50; i++) { |
| const sparkle = document.createElement('div'); |
| sparkle.className = 'sparkle'; |
| sparkle.style.left = Math.random() * 100 + '%'; |
| sparkle.style.animationDelay = Math.random() * 15 + 's'; |
| sparkle.style.animationDuration = (15 + Math.random() * 10) + 's'; |
| container.appendChild(sparkle); |
| } |
| } |
| |
| |
| function renderProducts(filter = 'all') { |
| const grid = document.getElementById('productsGrid'); |
| const filteredProducts = filter === 'all' |
| ? products |
| : products.filter(p => p.theme.toLowerCase() === filter); |
| |
| grid.innerHTML = filteredProducts.map(product => ` |
| <div class="product-card" data-id="${product.id}"> |
| <div class="product-image" style="background: linear-gradient(135deg, ${product.colors[0]}33, ${product.colors[1]}33)"> |
| ${product.badge ? `<span class="product-badge">${product.badge}</span>` : ''} |
| <span class="swimsuit-display">${product.emoji}</span> |
| </div> |
| <div class="product-info"> |
| <div class="product-theme">${product.theme}</div> |
| <div class="product-name">${product.name}</div> |
| <div class="product-price"> |
| <span class="price">$${product.price}</span> |
| <span class="original-price">$${product.originalPrice}</span> |
| </div> |
| </div> |
| <button class="add-to-cart" onclick="addToCart(${product.id})">+</button> |
| </div> |
| `).join(''); |
| } |
| |
| |
| document.querySelectorAll('.filter-tab').forEach(tab => { |
| tab.addEventListener('click', () => { |
| document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active')); |
| tab.classList.add('active'); |
| renderProducts(tab.dataset.filter); |
| }); |
| }); |
| |
| |
| function addToCart(id) { |
| const modal = document.getElementById('successModal'); |
| modal.classList.add('active'); |
| setTimeout(() => closeModal(), 2500); |
| } |
| |
| function closeModal() { |
| document.getElementById('successModal').classList.remove('active'); |
| } |
| |
| |
| function handleSubscribe(e) { |
| e.preventDefault(); |
| const input = e.target.querySelector('input'); |
| alert(`Thank you for subscribing! ✨ We'll send magical offers to ${input.value}`); |
| input.value = ''; |
| } |
| |
| |
| document.getElementById('menuToggle').addEventListener('click', () => { |
| document.getElementById('nav').classList.toggle('active'); |
| }); |
| |
| |
| document.getElementById('successModal').addEventListener('click', (e) => { |
| if (e.target === document.getElementById('successModal')) { |
| closeModal(); |
| } |
| }); |
| |
| |
| createSparkles(); |
| renderProducts(); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| document.getElementById('nav').classList.remove('active'); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
