TechCool Electronics TVs Freezers Coolers
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TechCool Electronics - TVs, Freezers & Coolers</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> </head> <body> <!-- Header Banner --> <div class="header-banner" id="headerBanner"> <div class="container"> ? FREE DELIVERY ON ORDERS OVER $500 | EXTENDED WARRANTY AVAILABLE | EXPERT INSTALLATION SERVICE ❄️ </div> </div> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand tech-font" href="#home"> <i class="fas fa-bolt"></i> TechCool </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#products">Products</a> </li> <li class="nav-item"> <a class="nav-link" href="#categories">Categories</a> </li> <li class="nav-item"> <a class="nav-link" href="#newsletter">Contact</a> </li> <li class="nav-item"> <button class="btn btn-cart" onclick="openCart()"> <i class="fas fa-shopping-cart me-2"></i>Cart <span class="cart-badge" id="cartBadge">0</span> </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title tech-font">Smart Electronics & Cooling Solutions</h1> <p class="hero-subtitle">Discover premium TVs, freezers, and coolers with cutting-edge technology. From 4K smart TVs to energy-efficient refrigeration systems, we have everything for your modern home and business needs.</p> <div class="hero-features"> <div class="feature-item"> <i class="fas fa-truck feature-icon"></i> <span><strong>Free Delivery</strong></span> </div> <div class="feature-item"> <i class="fas fa-tools feature-icon"></i> <span><strong>Expert Installation</strong></span> </div> <div class="feature-item"> <i class="fas fa-shield-alt feature-icon"></i> <span><strong>Extended Warranty</strong></span> </div> </div> <div class="hero-buttons"> <a href="#products" class="btn btn-custom btn-primary-custom">Shop Now</a> <a href="#categories" class="btn btn-custom btn-secondary-custom">Browse Categories</a> </div> </div> </div> </div> </div> </section> <!-- Products Section --> <section id="products" class="products-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Featured Products</h2> <p class="section-subtitle animate-on-scroll">Explore our top-rated electronics and cooling appliances with the latest technology and energy-efficient features</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1593359677879-a4bb92f829d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge product-new">New</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('smart-tv-75')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('smart-tv-75')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="compareProduct('smart-tv-75')"> <i class="fas fa-balance-scale"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">75" 4K Smart TV</h5> </div> </div> <div class="product-content"> <div class="product-category">Smart TV</div> <h4 class="product-title">Samsung 75" 4K QLED Smart TV</h4> <p class="product-description">Experience stunning 4K resolution with Quantum Dot technology, HDR10+ support, and built-in smart features.</p> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Screen Size:</span> <span class="spec-value">75 inches</span> </div> <div class="spec-item"> <span class="spec-label">Resolution:</span> <span class="spec-value">4K UHD (3840x2160)</span> </div> <div class="spec-item"> <span class="spec-label">Smart Platform:</span> <span class="spec-value">Tizen OS</span> </div> <div class="spec-item"> <span class="spec-label">HDR:</span> <span class="spec-value">HDR10+, Dolby Vision</span> </div> </div> <div class="product-rating"> <div class="stars"> <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="rating-text">(287 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$1,299</span> <span class="price-original">$1,599</span> </div> <span class="price-discount">19% OFF</span> </div> <button class="btn-add-cart" onclick="addToCart('smart-tv-75', 'Samsung 75\' 4K QLED Smart TV', 1299.00)"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge product-sale">Sale</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('chest-freezer')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('chest-freezer')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="compareProduct('chest-freezer')"> <i class="fas fa-balance-scale"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Chest Freezer</h5> </div> </div> <div class="product-content"> <div class="product-category">Freezer</div> <h4 class="product-title">Frigidaire 15.6 Cu Ft Chest Freezer</h4> <p class="product-description">Energy-efficient chest freezer with adjustable temperature control, removable storage baskets, and power-on indicator light.</p> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Capacity:</span> <span class="spec-value">15.6 Cu Ft</span> </div> <div class="spec-item"> <span class="spec-label">Energy Star:</span> <span class="spec-value">Yes</span> </div> <div class="spec-item"> <span class="spec-label">Defrost:</span> <span class="spec-value">Manual</span> </div> <div class="spec-item"> <span class="spec-label">Color:</span> <span class="spec-value">White</span> </div> </div> <div class="product-rating"> <div class="stars"> <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-half-alt"></i> </div> <span class="rating-text">(156 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$449</span> <span class="price-original">$599</span> </div> <span class="price-discount">25% OFF</span> </div> <button class="btn-add-cart" onclick="addToCart('chest-freezer', 'Frigidaire 15.6 Cu Ft Chest Freezer', 449.00)"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1713874990887-6e76a16a2884?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YWlyJTIwY29vbGVyfGVufDB8fDB8fHww')"> <div class="product-badge">Bestseller</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('portable-cooler')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('portable-cooler')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="compareProduct('portable-cooler')"> <i class="fas fa-balance-scale"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Portable Cooler</h5> </div> </div> <div class="product-content"> <div class="product-category">Cooler</div> <h4 class="product-title">YETI Tundra 65 Portable Cooler</h4> <p class="product-description">Premium portable cooler with superior ice retention, rotomolded construction, and bear-resistant design.</p> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Capacity:</span> <span class="spec-value">65 Quarts</span> </div> <div class="spec-item"> <span class="spec-label">Ice Retention:</span> <span class="spec-value">7+ Days</span> </div> <div class="spec-item"> <span class="spec-label">Weight:</span> <span class="spec-value">29 lbs</span> </div> <div class="spec-item"> <span class="spec-label">Warranty:</span> <span class="spec-value">5 Years</span> </div> </div> <div class="product-rating"> <div class="stars"> <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="rating-text">(423 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$375</span> </div> </div> <button class="btn-add-cart" onclick="addToCart('portable-cooler', 'YETI Tundra 65 Portable Cooler', 375.00)"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1593359677879-a4bb92f829d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge product-new">New</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('oled-tv-55')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('oled-tv-55')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="compareProduct('oled-tv-55')"> <i class="fas fa-balance-scale"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">55" OLED TV</h5> </div> </div> <div class="product-content"> <div class="product-category">OLED TV</div> <h4 class="product-title">LG 55" OLED C3 Smart TV</h4> <p class="product-description">Self-lit OLED pixels deliver perfect blacks and infinite contrast with α9 Gen6 AI Processor and webOS smart platform.</p> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Screen Size:</span> <span class="spec-value">55 inches</span> </div> <div class="spec-item"> <span class="spec-label">Display:</span> <span class="spec-value">OLED 4K</span> </div> <div class="spec-item"> <span class="spec-label">Processor:</span> <span class="spec-value">α9 Gen6 AI</span> </div> <div class="spec-item"> <span class="spec-label">Gaming:</span> <span class="spec-value">120Hz, VRR, ALLM</span> </div> </div> <div class="product-rating"> <div class="stars"> <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="rating-text">(198 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$1,499</span> </div> </div> <button class="btn-add-cart" onclick="addToCart('oled-tv-55', 'LG 55\' OLED C3 Smart TV', 1499.00)"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge product-sale">Sale</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('upright-freezer')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('upright-freezer')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="compareProduct('upright-freezer')"> <i class="fas fa-balance-scale"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Upright Freezer</h5> </div> </div> <div class="product-content"> <div class="product-category">Freezer</div> <h4 class="product-title">GE 21.3 Cu Ft Upright Freezer</h4> <p class="product-description">Spacious upright freezer with frost-free operation, adjustable shelves, and LED lighting for easy organization.</p> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Capacity:</span> <span class="spec-value">21.3 Cu Ft</span> </div> <div class="spec-item"> <span class="spec-label">Defrost:</span> <span class="spec-value">Frost-Free</span> </div> <div class="spec-item"> <span class="spec-label">Shelves:</span> <span class="spec-value">6 Adjustable</span> </div> <div class="spec-item"> <span class="spec-label">Lighting:</span> <span class="spec-value">LED Interior</span> </div> </div> <div class="product-rating"> <div class="stars"> <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-half-alt"></i> </div> <span class="rating-text">(234 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$699</span> <span class="price-original">$899</span> </div> <span class="price-discount">22% OFF</span> </div> <button class="btn-add-cart" onclick="addToCart('upright-freezer', 'GE 21.3 Cu Ft Upright Freezer', 699.00)"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge">Premium</div> <div class="product-actions"> <button class="action-btn" onclick="addToWishlist('electric-cooler')"> <i class="fas fa-heart"></i> </button> <button class="action-btn" onclick="quickView('electric-cooler')"> <i class="fas fa-eye"></i> </button> <button class="action-btn" onclick="compareProduct('electric-cooler')"> <i class="fas fa-balance-scale"></i> </button> </div> <div class="product-overlay"> <h5 style="color: white; margin: 0;">Electric Cooler</h5> </div> </div> <div class="product-content"> <div class="product-category">Electric Cooler</div> <h4 class="product-title">Dometic CFX3 45 Electric Cooler</h4> <p class="product-description">Portable electric cooler with compressor cooling, WiFi connectivity, and dual zone temperature control.</p> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Capacity:</span> <span class="spec-value">45 Liters</span> </div> <div class="spec-item"> <span class="spec-label">Power:</span> <span class="spec-value">12V/24V/110V</span> </div> <div class="spec-item"> <span class="spec-label">Temperature:</span> <span class="spec-value">-7°F to 50°F</span> </div> <div class="spec-item"> <span class="spec-label">Connectivity:</span> <span class="spec-value">WiFi & Bluetooth</span> </div> </div> <div class="product-rating"> <div class="stars"> <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="rating-text">(167 reviews)</span> </div> <div class="product-price"> <div> <span class="price-current">$899</span> </div> </div> <button class="btn-add-cart" onclick="addToCart('electric-cooler', 'Dometic CFX3 45 Electric Cooler', 899.00)"> <i class="fas fa-shopping-cart me-2"></i>Add to Cart </button> </div> </div> </div> </div> </div> </section> <!-- Categories Section --> <section id="categories" class="categories-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Shop by Category</h2> <p class="section-subtitle animate-on-scroll">Explore our comprehensive range of electronics and cooling appliances</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-tv"></i> </div> <h4 class="category-title">Smart TVs</h4> <p class="category-description">Latest 4K, 8K, OLED, and QLED smart TVs with streaming capabilities, gaming features, and voice control.</p> <div class="category-count">25+ Models</div> <button class="btn-category" onclick="browseCategory('tvs')"> <i class="fas fa-arrow-right me-2"></i>Shop TVs </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-snowflake"></i> </div> <h4 class="category-title">Freezers</h4> <p class="category-description">Energy-efficient chest and upright freezers for home and commercial use with various capacities and features.</p> <div class="category-count">18+ Models</div> <button class="btn-category" onclick="browseCategory('freezers')"> <i class="fas fa-arrow-right me-2"></i>Shop Freezers </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="category-card animate-on-scroll"> <div class="category-icon"> <i class="fas fa-cube"></i> </div> <h4 class="category-title">Coolers</h4> <p class="category-description">Portable and electric coolers for camping, travel, and outdoor activities with superior ice retention.</p> <div class="category-count">15+ Models</div> <button class="btn-category" onclick="browseCategory('coolers')"> <i class="fas fa-arrow-right me-2"></i>Shop Coolers </button> </div> </div> </div> </div> </section> <!-- Features Section --> <section id="features" class="features-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Why Choose TechCool</h2> <p class="section-subtitle animate-on-scroll">We provide comprehensive electronics solutions with expert service and support</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-truck"></i> </div> <h4 class="feature-title">Free Delivery & Setup</h4> <p class="feature-description">Complimentary delivery and professional installation service for all major appliances and TVs over $500.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-shield-alt"></i> </div> <h4 class="feature-title">Extended Warranty</h4> <p class="feature-description">Comprehensive warranty coverage with extended protection plans available for peace of mind.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-tools"></i> </div> <h4 class="feature-title">Expert Installation</h4> <p class="feature-description">Certified technicians provide professional installation and setup services for optimal performance.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-headset"></i> </div> <h4 class="feature-title">24/7 Support</h4> <p class="feature-description">Round-the-clock customer support and technical assistance for all your electronics needs.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-exchange-alt"></i> </div> <h4 class="feature-title">Easy Returns</h4> <p class="feature-description">Hassle-free 30-day return policy with free pickup service for your convenience.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="feature-card animate-on-scroll"> <div class="feature-icon-large"> <i class="fas fa-credit-card"></i> </div> <h4 class="feature-title">Flexible Financing</h4> <p class="feature-description">Multiple payment options including 0% APR financing plans to fit your budget.</p> </div> </div> </div> </div> </section> <!-- Newsletter Section --> <section id="newsletter" class="newsletter-section section-padding"> <div class="container"> <div class="newsletter-content animate-on-scroll"> <h2 class="newsletter-title tech-font">Stay Connected</h2> <p class="newsletter-subtitle">Subscribe for exclusive deals, new product launches, and expert electronics tips</p> <form class="newsletter-form" id="newsletterForm"> <input type="email" class="newsletter-input" placeholder="Enter your email address" required> <button type="submit" class="btn-newsletter"> <i class="fas fa-paper-plane me-2"></i>Subscribe </button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand tech-font">⚡ TechCool </div> <p class="text-white-75 mb-4">Your trusted partner for premium electronics and cooling solutions. We provide cutting-edge technology with expert service and support.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Products</h5> <div class="footer-links"> <a href="#" onclick="browseCategory('tvs')">Smart TVs</a> <a href="#" onclick="browseCategory('tvs')">OLED TVs</a> <a href="#" onclick="browseCategory('freezers')">Chest Freezers</a> <a href="#" onclick="browseCategory('freezers')">Upright Freezers</a> <a href="#" onclick="browseCategory('coolers')">Portable Coolers</a> <a href="#" onclick="browseCategory('coolers')">Electric Coolers</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Services</h5> <div class="footer-links"> <a href="#" onclick="showDeliveryInfo()">Delivery & Installation</a> <a href="#" onclick="showWarrantyInfo()">Warranty & Support</a> <a href="#" onclick="showFinancingInfo()">Financing Options</a> <a href="#" onclick="showRepairService()">Repair Service</a> <a href="#" onclick="showTradeIn()">Trade-In Program</a> <a href="#" onclick="showBusinessSales()">Business Sales</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Contact</h5> <div class="footer-links"> <a href="tel:+15551234567">? (555) 123-TECH</a> <a href="mailto:info@techcool.com">? info@techcool.com</a> <a href="#">? 456 Electronics Ave, Tech City</a> <a href="#" onclick="showStoreHours()">? Store Hours</a> <a href="#" onclick="findStore()">? Find a Store</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-white-50 mb-0">© 2024 TechCool Electronics. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <a href="#" class="text-white-50 me-3">Privacy Policy</a> <a href="#" class="text-white-50 me-3">Terms of Service</a> <a href="#" class="text-white-50">Support</a> </div> </div> </div> </footer> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Success!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'977bf77a60310fce',t:'MTc1NjYzNzQyNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --electric-blue: #0066FF; --deep-blue: #003D99; --ice-blue: #E6F3FF; --cool-gray: #F8FAFC; --steel-gray: #64748B; --dark-slate: #1E293B; --silver: #E2E8F0; --white: #FFFFFF; --success-green: #10B981; --warning-orange: #F59E0B; --danger-red: #EF4444; --gradient-primary: linear-gradient(135deg, #0066FF 0%, #003D99 100%); --gradient-cool: linear-gradient(135deg, #E6F3FF 0%, #BFDBFE 100%); --gradient-dark: linear-gradient(135deg, #1E293B 0%, #334155 100%); --shadow-soft: 0 4px 20px rgba(0, 102, 255, 0.1); --shadow-medium: 0 8px 30px rgba(0, 102, 255, 0.15); --shadow-strong: 0 15px 40px rgba(0, 102, 255, 0.2); --border-radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--dark-slate); background: var(--cool-gray); overflow-x: hidden; } .tech-font { font-family: 'Orbitron', monospace; } /* Header Banner */ .header-banner { background: var(--gradient-primary); color: white; padding: 12px 0; text-align: center; font-weight: 600; animation: slideDown 0.6s ease-out; letter-spacing: 0.5px; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1.2rem 0; border-bottom: 2px solid var(--electric-blue); } .navbar-brand { font-weight: 800; font-size: 2.2rem; color: var(--dark-slate) !important; display: flex; align-items: center; letter-spacing: 1px; } .navbar-brand i { margin-right: 12px; font-size: 2.5rem; color: var(--electric-blue); } .nav-link { font-weight: 500; color: var(--dark-slate) !important; margin: 0 1rem; transition: all 0.3s ease; position: relative; letter-spacing: 0.3px; } .nav-link:hover { color: var(--electric-blue) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-primary); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .btn-cart { background: var(--gradient-primary); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-weight: 600; margin-left: 20px; transition: all 0.3s ease; letter-spacing: 0.5px; position: relative; } .btn-cart:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(0, 102, 255, 0.1), rgba(0, 61, 153, 0.05)), url('https://plus.unsplash.com/premium_photo-1681236323432-3df82be0c1b0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dHZ8ZW58MHx8MHx8fDA%3D') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 3.5rem; font-weight: 900; color: white; /* margin-bottom: 1.5rem; */ animation: fadeInUp 1s ease-out; line-height: 1.1; } .hero-subtitle { font-size: 1.2rem; color: white; /* margin-bottom: 2.5rem; */ animation: fadeInUp 1s ease-out 0.3s both; font-weight: 400; max-width: 600px; } .hero-features { display: flex; gap: 2rem; margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.6s both; flex-wrap: wrap; } .feature-item { display: flex; align-items: center; color: var(--dark-slate); background: rgba(255, 255, 255, 0.9); padding: 16px 24px; border-radius: 30px; backdrop-filter: blur(15px); border: 2px solid rgba(0, 102, 255, 0.2); transition: all 0.3s ease; } .feature-item:hover { background: rgba(255, 255, 255, 1); transform: translateY(-3px); box-shadow: var(--shadow-medium); } .feature-icon { font-size: 1.5rem; margin-right: 12px; color: var(--electric-blue); } .hero-buttons { animation: fadeInUp 1s ease-out 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 16px 35px; font-weight: 600; border-radius: 35px; letter-spacing: 0.5px; transition: all 0.3s ease; border: none; margin: 0 12px; text-decoration: none; display: inline-block; font-size: 1rem; } .btn-primary-custom { background: var(--gradient-primary); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: white; } .btn-secondary-custom { background: transparent; color: var(--dark-slate); border: 2px solid var(--electric-blue); } .btn-secondary-custom:hover { background: var(--electric-blue); color: white; transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; color: var(--dark-slate); text-align: center; line-height: 1.2; } .section-subtitle { font-size: 1.3rem; color: var(--steel-gray); margin-bottom: 4rem; text-align: center; font-weight: 400; max-width: 700px; margin-left: auto; margin-right: auto; } /* Products Section */ .products-section { background: var(--white); } .product-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.4s ease; height: 100%; border: 1px solid var(--silver); position: relative; } .product-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-strong); } .product-image { height: 280px; background-size: cover; background-position: center; position: relative; overflow: hidden; } .product-badge { position: absolute; top: 15px; left: 15px; background: var(--gradient-primary); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.5px; } .product-sale { background: linear-gradient(135deg, var(--danger-red) 0%, #DC2626 100%); } .product-new { background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%); } .product-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent, rgba(30, 41, 59, 0.8)); display: flex; align-items: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .product-overlay { opacity: 1; } .product-actions { position: absolute; top: 15px; right: 15px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .product-actions { opacity: 1; } .action-btn { width: 45px; height: 45px; background: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dark-slate); transition: all 0.3s ease; box-shadow: var(--shadow-soft); } .action-btn:hover { background: var(--electric-blue); color: white; transform: scale(1.1); } .product-content { padding: 2rem; } .product-category { color: var(--steel-gray); font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } .product-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.8rem; color: var(--dark-slate); line-height: 1.3; } .product-description { color: var(--steel-gray); margin-bottom: 1.5rem; line-height: 1.6; font-size: 0.95rem; } .product-specs { background: var(--ice-blue); padding: 1rem; border-radius: 12px; margin-bottom: 1.5rem; font-size: 0.9rem; } .spec-item { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .spec-item:last-child { margin-bottom: 0; } .spec-label { font-weight: 600; color: var(--dark-slate); } .spec-value { color: var(--steel-gray); } .product-rating { display: flex; align-items: center; margin-bottom: 1rem; } .stars { color: var(--warning-orange); margin-right: 8px; } .rating-text { color: var(--steel-gray); font-size: 0.9rem; } .product-price { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .price-current { font-size: 1.8rem; font-weight: 800; color: var(--electric-blue); } .price-original { font-size: 1.2rem; color: var(--steel-gray); text-decoration: line-through; margin-left: 8px; } .price-discount { background: linear-gradient(135deg, var(--danger-red) 0%, #DC2626 100%); color: white; padding: 6px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .btn-add-cart { background: var(--gradient-primary); color: white; border: none; padding: 14px 24px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; width: 100%; letter-spacing: 0.5px; } .btn-add-cart:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Categories Section */ .categories-section { background: var(--ice-blue); } .category-card { background: white; border-radius: var(--border-radius); padding: 3rem 2rem; text-align: center; transition: all 0.4s ease; height: 100%; border: 1px solid var(--silver); position: relative; overflow: hidden; } .category-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.1), transparent); transition: left 0.5s ease; } .category-card:hover::before { left: 100%; } .category-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-medium); } .category-icon { width: 120px; height: 120px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 3.5rem; color: white; transition: transform 0.3s ease; } .category-card:hover .category-icon { transform: scale(1.1); } .category-title { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; color: var(--dark-slate); } .category-description { color: var(--steel-gray); line-height: 1.6; margin-bottom: 2rem; } .category-count { font-size: 1.1rem; font-weight: 600; color: var(--electric-blue); margin-bottom: 2rem; } .btn-category { background: var(--gradient-primary); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; letter-spacing: 0.5px; } .btn-category:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Features Section */ .features-section { background: var(--white); } .feature-card { background: white; border-radius: var(--border-radius); padding: 3rem 2rem; text-align: center; transition: all 0.4s ease; height: 100%; border: 1px solid var(--silver); } .feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-strong); } .feature-icon-large { width: 80px; height: 80px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: white; transition: transform 0.3s ease; } .feature-card:hover .feature-icon-large { transform: scale(1.1); } .feature-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark-slate); } .feature-description { color: var(--steel-gray); line-height: 1.6; } /* Newsletter Section */ .newsletter-section { background: var(--gradient-primary); color: white; text-align: center; } .newsletter-content { max-width: 600px; margin: 0 auto; } .newsletter-title { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; } .newsletter-subtitle { font-size: 1.2rem; margin-bottom: 3rem; opacity: 0.9; } .newsletter-form { display: flex; gap: 1rem; max-width: 500px; margin: 0 auto; } .newsletter-input { flex: 1; padding: 16px 24px; border: none; border-radius: 25px; font-size: 1rem; background: rgba(255, 255, 255, 0.9); color: var(--dark-slate); } .newsletter-input::placeholder { color: var(--steel-gray); } .btn-newsletter { background: white; color: var(--electric-blue); border: none; padding: 16px 32px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; letter-spacing: 0.5px; } .btn-newsletter:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Footer */ .footer-section { background: var(--dark-slate); color: white; padding: 80px 0 40px; } .footer-brand { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--electric-blue); } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; display: block; margin-bottom: 0.8rem; font-weight: 400; } .footer-links a:hover { color: var(--electric-blue); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--gradient-primary); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 30px; background: var(--gradient-primary); color: white; padding: 16px 25px; border-radius: 12px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; font-weight: 600; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Cart Badge */ .cart-badge { position: absolute; top: -8px; right: -8px; background: var(--danger-red); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 3rem; } .section-title { font-size: 2.5rem; } .hero-features { flex-direction: column; gap: 1rem; } .newsletter-form { flex-direction: column; } .product-price { flex-direction: column; align-items: flex-start; gap: 0.5rem; } }
JavaScript
let cart = []; let cartTotal = 0; // Smooth scrolling for navigation links 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' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 12px 35px rgba(0, 102, 255, 0.15)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.boxShadow = '0 4px 20px rgba(0, 102, 255, 0.1)'; } animateOnScroll(); }); // Add to cart function function addToCart(productId, productName, price) { const existingItem = cart.find(item => item.id === productId); if (existingItem) { existingItem.quantity += 1; } else { cart.push({ id: productId, name: productName, price: price, quantity: 1 }); } updateCartBadge(); showSuccessMessage(`${productName} added to cart!`); setTimeout(() => { alert(`? ADDED TO CART! ?\n\n⚡ ${productName}\n? $${price.toFixed(2)}\n\n? Cart Summary:\n• Items: ${cart.length} products\n• Total: $${calculateCartTotal().toFixed(2)}\n\n? Benefits:\n• Free delivery on orders over $500\n• Professional installation included\n• Extended warranty available\n• 24/7 customer support\n\n⚡ Continue shopping or checkout when ready!\nYour tech upgrade awaits! ?❄️`); }, 1000); } // Update cart badge function updateCartBadge() { const badge = document.getElementById('cartBadge'); const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); badge.textContent = totalItems; } // Calculate cart total function calculateCartTotal() { return cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); } // Open cart function openCart() { if (cart.length === 0) { showSuccessMessage('Your cart is empty'); setTimeout(() => { alert('? YOUR SHOPPING CART ?\n\n? Your cart is currently empty\n\n⚡ Discover our amazing products:\n• Latest 4K & 8K Smart TVs\n• Energy-efficient freezers\n• Premium portable coolers\n• Professional installation service\n\n? Special Offers:\n• Free delivery on orders over $500\n• 0% APR financing available\n• Extended warranty options\n• Trade-in program discounts\n\n? Start shopping and upgrade your tech today!'); }, 800); return; } let cartSummary = '? YOUR SHOPPING CART ?\n\n'; cart.forEach(item => { cartSummary += `⚡ ${item.name}\n $${item.price.toFixed(2)} x ${item.quantity} = $${(item.price * item.quantity).toFixed(2)}\n\n`; }); cartSummary += `? Subtotal: $${calculateCartTotal().toFixed(2)}\n`; cartSummary += `? Delivery: ${calculateCartTotal() >= 500 ? 'FREE' : '$49.99'}\n`; cartSummary += `? Installation: ${calculateCartTotal() >= 500 ? 'FREE' : '$99.99'}\n`; cartSummary += `? Total: $${(calculateCartTotal() + (calculateCartTotal() >= 500 ? 0 : 149.98)).toFixed(2)}\n\n`; cartSummary += `? Your Benefits:\n• ${calculateCartTotal() >= 500 ? 'Free delivery & installation included!' : 'Add $' + (500 - calculateCartTotal()).toFixed(2) + ' for free delivery & installation'}\n• Extended warranty available\n• 24/7 customer support\n• 30-day return policy\n\n⚡ Ready to checkout? Your tech upgrade is waiting!`; alert(cartSummary); } // Product actions function addToWishlist(productId) { showSuccessMessage('Added to wishlist!'); setTimeout(() => { alert('? ADDED TO WISHLIST! ?\n\n⚡ Product saved to your wishlist\n\n? Wishlist Benefits:\n• Save items for later purchase\n• Price drop notifications\n• Stock availability alerts\n• Easy comparison shopping\n• Share with family & friends\n\n? We\'ll notify you about:\n• Price changes & sales\n• New model releases\n• Back in stock alerts\n• Special promotions\n\n? Keep building your tech wishlist!'); }, 800); } function quickView(productId) { showSuccessMessage('Opening quick view...'); setTimeout(() => { alert('?️ QUICK VIEW ?️\n\nDetailed product specifications, high-resolution images, customer reviews, and comparison features would be displayed in a modal window.\n\n? Quick View Features:\n• Complete technical specifications\n• Customer reviews & ratings\n• Size and model comparisons\n• Installation requirements\n• Warranty information\n• Financing options\n\n⚡ Complete product details at a glance!'); }, 800); } function compareProduct(productId) { showSuccessMessage('Added to comparison...'); setTimeout(() => { alert('⚖️ PRODUCT COMPARISON ⚖️\n\nProduct added to comparison tool!\n\n? Compare Features:\n• Side-by-side specifications\n• Price and value analysis\n• Customer rating comparison\n• Energy efficiency ratings\n• Warranty coverage details\n• Installation requirements\n\n? Comparison Benefits:\n• Make informed decisions\n• Find the best value\n• Compare up to 4 products\n• Expert recommendations\n• Detailed feature analysis\n\n⚡ Compare and choose the perfect product!'); }, 800); } // Browse categories function browseCategory(category) { const categories = { 'tvs': { title: 'Smart TVs Collection', details: '? SMART TVs COLLECTION ?\n\n⚡ Complete TV Range:\n\n?️ 4K Smart TVs:\n• 43" to 85" screen sizes\n• HDR10+ & Dolby Vision\n• Built-in streaming apps\n• Voice control compatible\n• Gaming features (120Hz, VRR)\n• Multiple HDMI 2.1 ports\n\n? OLED TVs:\n• Perfect blacks & infinite contrast\n• Self-lit pixel technology\n• Ultra-thin design\n• Premium smart platforms\n• Dolby Atmos audio\n• Cinema-quality picture\n\n? Smart Features:\n• Netflix, Disney+, Prime Video\n• Apple AirPlay & Chromecast\n• Voice assistants (Alexa, Google)\n• Smartphone app control\n• Screen mirroring\n• Web browsing capability\n\n? Gaming TVs:\n• 120Hz refresh rate\n• Variable Refresh Rate (VRR)\n• Auto Low Latency Mode (ALLM)\n• Game Mode optimization\n• HDMI 2.1 compatibility\n• AMD FreeSync & NVIDIA G-Sync\n\n? Price Range: $299 - $3,999\n? Free delivery & installation on orders $500+\n⭐ Professional calibration available\n\n? Upgrade your viewing experience!' }, 'freezers': { title: 'Freezers Collection', details: '❄️ FREEZERS COLLECTION ❄️\n\n⚡ Complete Freezer Range:\n\n? Chest Freezers:\n• 5.0 to 25.0 Cu Ft capacity\n• Energy Star certified models\n• Manual & frost-free defrost\n• Removable storage baskets\n• Temperature alarm systems\n• Lock & key security\n\n? Upright Freezers:\n• 10.0 to 21.3 Cu Ft capacity\n• Frost-free operation\n• Adjustable shelves & door bins\n• LED interior lighting\n• Digital temperature controls\n• Reversible door hinges\n\n? Commercial Freezers:\n• Heavy-duty construction\n• Stainless steel interior\n• High-capacity storage\n• Temperature monitoring\n• NSF certified models\n• Warranty & service support\n\n? Energy Efficient Features:\n• Energy Star ratings\n• Eco-friendly refrigerants\n• Insulation technology\n• Low power consumption\n• Smart temperature management\n• Cost-saving operation\n\n? Installation & Service:\n• Professional delivery\n• Setup & positioning\n• Old appliance removal\n• Extended warranty options\n• Repair service network\n• Parts availability\n\n? Price Range: $199 - $1,299\n? Free delivery on orders $500+\n⭐ Energy efficiency guaranteed\n\n❄️ Keep your food fresh longer!' }, 'coolers': { title: 'Coolers Collection', details: '? COOLERS COLLECTION ?\n\n⚡ Complete Cooler Range:\n\n? Portable Coolers:\n• 20 to 150 quart capacity\n• 3-10 day ice retention\n• Rotomolded construction\n• Bear-resistant designs\n• Heavy-duty wheels & handles\n• Lifetime warranty options\n\n? Electric Coolers:\n• 12V/24V/110V power options\n• Compressor cooling technology\n• -7°F to 50°F temperature range\n• WiFi & Bluetooth connectivity\n• Dual zone temperature control\n• Energy efficient operation\n\n?️ Camping Coolers:\n• Lightweight & durable\n• Superior insulation\n• Easy-carry designs\n• Leak-proof construction\n• UV-resistant materials\n• Multiple size options\n\n? Car Coolers:\n• 12V DC power compatible\n• Compact & portable\n• Thermoelectric cooling\n• Quiet operation\n• Cup holder friendly\n• Travel accessories included\n\n?️ Beach & Outdoor:\n• Sand-resistant wheels\n• Rust-proof hardware\n• Drain plug systems\n• Tie-down points\n• Bottle openers\n• Cup holders & accessories\n\n? Smart Features:\n• Mobile app control\n• Temperature monitoring\n• Power consumption tracking\n• GPS location tracking\n• Maintenance reminders\n• Usage statistics\n\n? Price Range: $49 - $1,299\n? Free shipping on orders $100+\n⭐ Ice retention guaranteed\n\n? Keep it cool wherever you go!' } }; const category_info = categories[category]; if (category_info) { showSuccessMessage('Loading category...'); setTimeout(() => { alert(category_info.details); }, 800); } } // Footer functions function showDeliveryInfo() { alert('? DELIVERY & INSTALLATION ?\n\n? Delivery Options:\n• Standard Delivery: FREE on orders $500+\n• White Glove Service: $99.99\n• Same-Day Delivery: Available in select areas\n• Scheduled Delivery: Choose your time slot\n\n? Installation Services:\n• TV mounting & setup: $149.99\n• Appliance installation: $99.99\n• Smart home integration: $199.99\n• Cable management: $49.99\n\n? Service Areas:\n• Metro area coverage\n• Suburban delivery available\n• Rural delivery (additional fees)\n• Commercial delivery options\n\n? What\'s Included:\n• Professional technicians\n• All necessary hardware\n• Old equipment removal\n• System testing & demo\n• Warranty activation\n\n⚡ Professional service guaranteed!'); } function showWarrantyInfo() { alert('?️ WARRANTY & SUPPORT ?️\n\n✅ Standard Warranty:\n• Manufacturer warranty included\n• Parts & labor coverage\n• Authorized service centers\n• Warranty registration assistance\n\n? Extended Protection:\n• 2-5 year extended plans\n• Accidental damage coverage\n• Power surge protection\n• Annual maintenance included\n• Priority service scheduling\n\n? Support Services:\n• 24/7 technical support\n• Remote troubleshooting\n• On-site repair service\n• Replacement unit program\n• Expert consultation\n\n? Protection Plans:\n• TVs: Starting at $99/year\n• Appliances: Starting at $149/year\n• Premium coverage available\n• No deductible options\n\n⚡ Peace of mind guaranteed!'); } function showFinancingInfo() { alert('? FINANCING OPTIONS ?\n\n? Payment Plans:\n• 0% APR for 12-24 months\n• Low monthly payments\n• No hidden fees\n• Instant approval available\n• Multiple credit options\n\n? Qualification:\n• Quick online application\n• Soft credit check initially\n• Flexible approval criteria\n• Same-day decisions\n• Multiple financing partners\n\n? Special Offers:\n• 6 months same as cash\n• Seasonal promotional rates\n• Trade-in credit programs\n• Bundle discounts available\n• Business financing options\n\n? Easy Application:\n• Online pre-qualification\n• In-store financing desk\n• Mobile-friendly process\n• Secure application system\n\n⚡ Make it affordable today!'); } // Newsletter subscription document.getElementById('newsletterForm').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('.btn-newsletter'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Subscribing...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; this.reset(); showSuccessMessage('Successfully subscribed!'); setTimeout(() => { alert('⚡ WELCOME TO TECHCOOL! ⚡\n\n? Thank you for subscribing!\n\n? Your Welcome Benefits:\n• 10% off your first purchase\n• Free delivery on any order\n• Early access to sales\n• New product notifications\n• Expert tech tips & guides\n\n? What to Expect:\n• Weekly tech newsletters\n• Exclusive member deals\n• Product launch alerts\n• Installation tips & tricks\n• Seasonal promotions\n• Birthday month specials\n\n⚡ Your tech journey starts now!\nCheck your email for your welcome discount! ?❄️'); }, 1000); }, 2000); }); // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); });
Output Preview
Desktop
Mobile
Fullscreen