Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepStore - Premium Products</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #3a86ff; | |
| --secondary: #ff006e; | |
| --accent: #8338ec; | |
| --dark: #1a1a2e; | |
| --light: #f8f9fa; | |
| --success: #38b000; | |
| --warning: #ffbe0b; | |
| --text: #333333; | |
| --transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --transition-fast: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| body { | |
| background-color: var(--light); | |
| color: var(--text); | |
| overflow-x: hidden; | |
| } | |
| /* Header & Navigation */ | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| padding: 1rem 2rem; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .logo i { | |
| margin-right: 10px; | |
| color: var(--warning); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| } | |
| .nav-links li { | |
| margin: 0 1rem; | |
| } | |
| .nav-links a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| transition: var(--transition-fast); | |
| position: relative; | |
| } | |
| .nav-links a:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 50%; | |
| background-color: var(--warning); | |
| transition: var(--transition-fast); | |
| } | |
| .nav-links a:hover:after { | |
| width: 80%; | |
| left: 10%; | |
| } | |
| .nav-links a.active { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| .nav-links a.active:after { | |
| width: 80%; | |
| left: 10%; | |
| } | |
| .cart-btn { | |
| background: var(--warning); | |
| color: var(--dark); | |
| border: none; | |
| padding: 0.7rem 1.5rem; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .cart-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .cart-btn i { | |
| margin-right: 8px; | |
| } | |
| /* Page Container */ | |
| .page-container { | |
| margin-top: 80px; | |
| min-height: calc(100vh - 80px); | |
| padding: 2rem; | |
| } | |
| /* Page Transitions */ | |
| .page { | |
| display: none; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: var(--transition-slow); | |
| } | |
| .page.active { | |
| display: block; | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(rgba(58, 134, 255, 0.9), rgba(131, 56, 236, 0.9)), url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 500px; | |
| border-radius: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| color: white; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero:before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, var(--primary) 0%, transparent 100%); | |
| opacity: 0.8; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 800px; | |
| padding: 0 2rem; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| line-height: 1.6; | |
| } | |
| .cta-button { | |
| background: var(--warning); | |
| color: var(--dark); | |
| border: none; | |
| padding: 1rem 2.5rem; | |
| border-radius: 50px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Features Section */ | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .feature-card { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); | |
| transition: var(--transition-fast); | |
| text-align: center; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--primary); | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .feature-card p { | |
| color: #666; | |
| line-height: 1.6; | |
| } | |
| /* Product Categories */ | |
| .categories { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .category-card { | |
| height: 300px; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| position: relative; | |
| cursor: pointer; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |
| transition: var(--transition-slow); | |
| } | |
| .category-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); | |
| } | |
| .category-card img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition-slow); | |
| } | |
| .category-card:hover img { | |
| transform: scale(1.1); | |
| } | |
| .category-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); | |
| padding: 2rem; | |
| color: white; | |
| } | |
| .category-overlay h3 { | |
| font-size: 1.8rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .category-overlay p { | |
| opacity: 0.9; | |
| } | |
| /* Products Grid */ | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); | |
| transition: var(--transition-fast); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .product-image { | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .product-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition-slow); | |
| } | |
| .product-card:hover .product-image img { | |
| transform: scale(1.1); | |
| } | |
| .product-info { | |
| padding: 1.5rem; | |
| } | |
| .product-info h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .product-price { | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| .add-to-cart { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.7rem 1.5rem; | |
| border-radius: 30px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| width: 100%; | |
| } | |
| .add-to-cart:hover { | |
| background: var(--accent); | |
| } | |
| /* Page Title */ | |
| .page-title { | |
| font-size: 2.5rem; | |
| margin-bottom: 2rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 3px solid var(--primary); | |
| display: inline-block; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 2rem; | |
| margin-top: 4rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .footer-section h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--warning); | |
| } | |
| .footer-section p { | |
| line-height: 1.6; | |
| margin-bottom: 1rem; | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 0.8rem; | |
| } | |
| .footer-links a { | |
| color: #ddd; | |
| text-decoration: none; | |
| transition: var(--transition-fast); | |
| } | |
| .footer-links a:hover { | |
| color: var(--warning); | |
| margin-left: 5px; | |
| } | |
| .social-icons { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .social-icons a { | |
| color: white; | |
| font-size: 1.5rem; | |
| transition: var(--transition-fast); | |
| } | |
| .social-icons a:hover { | |
| color: var(--warning); | |
| transform: translateY(-5px); | |
| } | |
| .copyright { | |
| text-align: center; | |
| margin-top: 3rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| .page-title { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header & Navigation --> | |
| <header> | |
| <nav> | |
| <div class="logo"> | |
| <i class="fas fa-store"></i> | |
| <span>DeepStore</span> | |
| </div> | |
| <ul class="nav-links"> | |
| <li><a href="#" class="active" data-page="home">Home</a></li> | |
| <li><a href="#" data-page="kitchen">Kitchen</a></li> | |
| <li><a href="#" data-page="accessories">Accessories</a></li> | |
| <li><a href="#" data-page="clothing">Clothing</a></li> | |
| <li><a href="#" data-page="electronics">Electronics</a></li> | |
| </ul> | |
| <button class="cart-btn"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span>Cart (0)</span> | |
| </button> | |
| </nav> | |
| </header> | |
| <!-- Page Container --> | |
| <div class="page-container"> | |
| <!-- Home Page --> | |
| <div id="home" class="page active"> | |
| <div class="hero"> | |
| <div class="hero-content"> | |
| <h1>Welcome to DeepStore</h1> | |
| <p>Discover premium products with exceptional quality and unbeatable prices. We carefully curate our collection to bring you the best items for your home, wardrobe, and lifestyle.</p> | |
| <button class="cta-button">Shop Now</button> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-truck"></i> | |
| </div> | |
| <h3>Free Shipping</h3> | |
| <p>Enjoy free shipping on all orders over $50. Fast delivery to your doorstep.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Secure Payment</h3> | |
| <p>Your payments are secure with our encrypted checkout process.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-undo"></i> | |
| </div> | |
| <h3>Easy Returns</h3> | |
| <p>Not satisfied? Return within 30 days for a full refund, no questions asked.</p> | |
| </div> | |
| </div> | |
| <h2 class="page-title">Shop by Category</h2> | |
| <div class="categories"> | |
| <div class="category-card" data-page="kitchen"> | |
| <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Kitchen Supplies"> | |
| <div class="category-overlay"> | |
| <h3>Kitchen</h3> | |
| <p>Upgrade your culinary experience</p> | |
| </div> | |
| </div> | |
| <div class="category-card" data-page="accessories"> | |
| <img src="https://images.unsplash.com/photo-1591565244552-a5a85b5c911d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Accessories"> | |
| <div class="category-overlay"> | |
| <h3>Accessories</h3> | |
| <p>Complete your look</p> | |
| </div> | |
| </div> | |
| <div class="category-card" data-page="clothing"> | |
| <img src="https://images.unsplash.com/photo-1445205170230-053b83016050?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Clothing"> | |
| <div class="category-overlay"> | |
| <h3>Clothing</h3> | |
| <p>Style and comfort combined</p> | |
| </div> | |
| </div> | |
| <div class="category-card" data-page="electronics"> | |
| <img src="https://images.unsplash.com/photo-1468495244123-6c6c332eeece?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80" alt="Electronics"> | |
| <div class="category-overlay"> | |
| <h3>Electronics</h3> | |
| <p>Cutting-edge technology</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Kitchen Page --> | |
| <div id="kitchen" class="page"> | |
| <h2 class="page-title">Kitchen Supplies</h2> | |
| <div class="products-grid"> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1583778176475-6c7f6d38f6a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Premium Knife Set"> | |
| </div> | |
| <div class="product-info"> | |
| <h3>Premium Knife Set</h3> | |
| <p>Professional grade knives for the home chef</p> | |
| <div class="product-price">$129.99</div> | |
| <button class="add-to-cart">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Non-Stick Cookware"> | |
| </div> | |
| <div class="product-info"> | |
| <h3>Non-Stick Cookware</h3> | |
| <p>10-piece set for all your cooking needs</p> | |
| <div class="product-price">$199.99</div> | |
| <button class="add-to-cart">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1596038250181-7c2dfa5e5db6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Smart Blender"> | |
| </div> | |
| <div class="product-info"> | |
| <h3>Smart Blender</h3> | |
| <p>With 10 speed settings and wireless connectivity</p> | |
| <div class="product-price">$89.99</div> | |
| <button class="add-to-cart">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1556906781-2f0520405b71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Coffee Maker"> | |
| </div> | |
| <div class="product-info"> | |
| <h3>Premium Coffee Maker</h3> | |
| <p>Brew the perfect cup every time</p> | |
| <div class="product-price">$149.99</div> | |
| <button class="add-to-cart">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Other category pages would follow similar structure --> | |
| <!-- For brevity, I'll include just one more category page --> | |
| <!-- Electronics Page --> | |
| <div id="electronics" class="page"> | |
| <h2 class="page-title">Electronics</h2> | |
| <div class="products-grid"> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Gaming Console"> | |
| </div> | |
| <div class="product-info"> | |
| <h3>Next-Gen Gaming Console</h3> | |
| <p>Experience gaming like never before</p> | |
| <div class="product-price">$499.99</div> | |
| <button class="add-to-cart">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Wireless Earbuds"> | |
| </div> | |
| <div class="product-info"> | |
| <h3>Wireless Earbuds</h3> | |
| <p>Premium sound quality with noise cancellation</p> | |
| <div class="product-price">$159.99</div> | |
| <button class="add-to-cart">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1530893609608-32a9af3aa95c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2064&q=80" alt="Smart Watch"> | |
| </div> | |
| <div class="product-info"> | |
| <h3>Smart Watch</h3> | |
| <p>Track your health and stay connected</p> | |
| <div class="product-price">$249.99</div> | |
| <button class="add-to-cart">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"> | |
| <img src="https://images.unsplash.com/photo-1585298723682-7115561c51b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="4K Monitor"> | |
| </div> | |
| <div class="product-info"> | |
| <h3>27" 4K Monitor</h3> | |
| <p>Crystal clear display for work and play</p> | |
| <div class="product-price">$349.99</div> | |
| <button class="add-to-cart">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional category pages would be here --> | |
| <!-- For this example, I've only included Home, Kitchen, and Electronics --> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>About DeepStore</h3> | |
| <p>We are committed to providing high-quality products with exceptional customer service. Our team carefully selects each item in our collection to ensure the best shopping experience.</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Quick Links</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#" data-page="home">Home</a></li> | |
| <li><a href="#" data-page="kitchen">Kitchen Supplies</a></li> | |
| <li><a href="#" data-page="accessories">Accessories</a></li> | |
| <li><a href="#" data-page="clothing">Clothing</a></li> | |
| <li><a href="#" data-page="electronics">Electronics</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Contact Us</h3> | |
| <p><i class="fas fa-map-marker-alt"></i> 123 Commerce St, City, Country</p> | |
| <p><i class="fas fa-phone"></i> +1 234 567 8900</p> | |
| <p><i class="fas fa-envelope"></i> support@deepstore.com</p> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fab fa-facebook"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 DeepStore. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Page Navigation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const navLinks = document.querySelectorAll('.nav-links a, .footer-links a, .category-card'); | |
| const pages = document.querySelectorAll('.page'); | |
| // Function to switch pages | |
| function switchPage(pageId) { | |
| pages.forEach(page => { | |
| page.classList.remove('active'); | |
| }); | |
| document.getElementById(pageId).classList.add('active'); | |
| // Update active nav link | |
| navLinks.forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.getAttribute('data-page') === pageId) { | |
| link.classList.add('active'); | |
| } | |
| }); | |
| } | |
| // Add click event to all navigation links | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const pageId = this.getAttribute('data-page'); | |
| switchPage(pageId); | |
| }); | |
| }); | |
| // Add to cart functionality | |
| const addToCartButtons = document.querySelectorAll('.add-to-cart'); | |
| const cartCount = document.querySelector('.cart-btn span'); | |
| let count = 0; | |
| addToCartButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| count++; | |
| cartCount.textContent = `Cart (${count})`; | |
| // Animation for button | |
| this.textContent = 'Added!'; | |
| this.style.background = 'var(--success)'; | |
| setTimeout(() => { | |
| this.textContent = 'Add to Cart'; | |
| this.style.background = ''; | |
| }, 1500); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |