| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Gadgets - CG TechWear</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Space Grotesk', sans-serif; |
| } |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.4); |
| } |
| .filter-btn.active { |
| background-color: #f97316; |
| color: white; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <nav class="bg-white/90 backdrop-blur-md sticky top-0 z-50 shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16 items-center"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <span class="text-primary font-bold text-2xl">CG</span> |
| <span class="font-bold text-2xl">TechWear</span> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-4"> |
| <a href="/index.html" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a> |
| <a href="/clothing.html" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Clothing</a> |
| <a href="/gadgets.html" class="nav-link text-primary px-3 py-2 rounded-md text-sm font-medium">Gadgets</a> |
| <a href="/products.html" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">New Arrivals</a> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="/cart.html" class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none relative"> |
| <i data-feather="shopping-cart"></i> |
| <span id="cartCount" class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span> |
| </a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> |
| <h1 class="text-3xl font-bold mb-4 md:mb-0">Tech Gadgets Collection</h1> |
| |
| <div class="flex flex-col w-full md:w-auto"> |
| <div class="flex space-x-2 mb-4"> |
| <button class="filter-btn active px-4 py-2 rounded-full border border-gray-300 text-sm" data-category="all">All</button> |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-300 text-sm" data-category="wearables">Wearables</button> |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-300 text-sm" data-category="audio">Audio</button> |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-300 text-sm" data-category="smart">Smart Tech</button> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <select id="sortSelect" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary w-full"> |
| <option value="default">Sort by</option> |
| <option value="price-low">Price: Low to High</option> |
| <option value="price-high">Price: High to Low</option> |
| <option value="newest">Newest</option> |
| <option value="popular">Popular</option> |
| </select> |
| <i data-feather="chevron-down" class="absolute right-3 top-2.5 w-4 text-gray-500"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="productsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="wearables" data-price="179.99" data-date="2023-11-15" data-popularity="4"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/401" alt="Nexus Pro Watch" class="w-full h-64 object-cover"> |
| <div class="absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Nexus Pro Watch</h3> |
| <p class="text-gray-600 text-sm mb-2">Advanced smartwatch with health monitoring</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-primary">$179.99</span> |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="201" data-name="Nexus Pro Watch" data-price="179.99" data-image="http://static.photos/technology/640x360/401"> |
| <i data-feather="shopping-cart" class="w-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="audio" data-price="129.99" data-date="2023-10-20" data-popularity="5"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/402" alt="Skyline Wireless Earbuds" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Skyline Wireless Earbuds</h3> |
| <p class="text-gray-600 text-sm mb-2">Noise-cancelling with 30hr battery life</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-primary">$129.99</span> |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="202" data-name="Skyline Wireless Earbuds" data-price="129.99" data-image="http://static.photos/technology/640x360/402"> |
| <i data-feather="shopping-cart" class="w-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="wearables" data-price="89.99" data-date="2023-09-05" data-popularity="3"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/403" alt="Pulse Smart Ring" class="w-full h-64 object-cover"> |
| <div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">SALE</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Pulse Smart Ring</h3> |
| <p class="text-gray-600 text-sm mb-2">Fitness tracking in a minimalist design</p> |
| <div class="flex justify-between items-center"> |
| <div> |
| <span class="font-bold text-primary">$89.99</span> |
| <span class="text-gray-500 text-sm line-through ml-2">$109.99</span> |
| </div> |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="203" data-name="Pulse Smart Ring" data-price="89.99" data-image="http://static.photos/technology/640x360/403"> |
| <i data-feather="shopping-cart" class="w-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="smart" data-price="299.99" data-date="2023-11-01" data-popularity="4"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/404" alt="Vista Smart Glasses" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Vista Smart Glasses</h3> |
| <p class="text-gray-600 text-sm mb-2">AR-enabled glasses with camera</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-primary">$299.99</span> |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="204" data-name="Vista Smart Glasses" data-price="299.99" data-image="http://static.photos/technology/640x360/404"> |
| <i data-feather="shopping-cart" class="w-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="audio" data-price="159.99" data-date="2023-08-15" data-popularity="4"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/405" alt="Neon Wireless Headphones" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Neon Wireless Headphones</h3> |
| <p class="text-gray-600 text-sm mb-2">Premium sound with adaptive noise cancellation</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-primary">$159.99</span> |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="205" data-name="Neon Wireless Headphones" data-price="159.99" data-image="http://static.photos/technology/640x360/405"> |
| <i data-feather="shopping-cart" class="w-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="wearables" data-price="199.99" data-date="2023-10-01" data-popularity="5"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/406" alt="Aura Fitness Tracker" class="w-full h-64 object-cover"> |
| <div class="absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Aura Fitness Tracker</h3> |
| <p class="text-gray-600 text-sm mb-2">Comprehensive health metrics in a sleek band</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-primary">$199.99</span> |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="206" data-name="Aura Fitness Tracker" data-price="199.99" data-image="http://static.photos/technology/640x360/406"> |
| <i data-feather="shopping-cart" class="w-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="smart" data-price="349.99" data-date="2023-09-20" data-popularity="4"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/407" alt="Quantum Smart Hub" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Quantum Smart Hub</h3> |
| <p class="text-gray-600 text-sm mb-2">Central control for all your smart devices</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-primary">$349.99</span> |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="207" data-name="Quantum Smart Hub" data-price="349.99" data-image="http://static.photos/technology/640x360/407"> |
| <i data-feather="shopping-cart" class="w-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="audio" data-price="79.99" data-date="2023-07-10" data-popularity="3"> |
| <div class="relative"> |
| <img src="http://static.photos/technology/640x360/408" alt="Echo Mini Speaker" class="w-full h-64 object-cover"> |
| <div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">SALE</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Echo Mini Speaker</h3> |
| <p class="text-gray-600 text-sm mb-2">Portable speaker with 360° sound</p> |
| <div class="flex justify-between items-center"> |
| <div> |
| <span class="font-bold text-primary">$79.99</span> |
| <span class="text-gray-500 text-sm line-through ml-2">$99.99</span> |
| </div> |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="208" data-name="Echo Mini Speaker" data-price="79.99" data-image="http://static.photos/technology/640x360/408"> |
| <i data-feather="shopping-cart" class="w-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| |
| |
| function updateCartCount() { |
| const cart = JSON.parse(localStorage.getItem('cart')) || []; |
| const countEl = document.getElementById('cartCount'); |
| if (cart.length > 0) { |
| countEl.textContent = cart.length; |
| countEl.classList.remove('hidden'); |
| } else { |
| countEl.classList.add('hidden'); |
| } |
| } |
| |
| |
| document.querySelectorAll('.add-to-cart').forEach(button => { |
| button.addEventListener('click', function() { |
| const product = { |
| id: this.dataset.id, |
| name: this.dataset.name, |
| price: this.dataset.price, |
| image: this.dataset.image, |
| quantity: 1 |
| }; |
| |
| let cart = JSON.parse(localStorage.getItem('cart')) || []; |
| const existingItem = cart.find(item => item.id === product.id); |
| |
| if (existingItem) { |
| existingItem.quantity += 1; |
| } else { |
| cart.push(product); |
| } |
| |
| localStorage.setItem('cart', JSON.stringify(cart)); |
| updateCartCount(); |
| |
| |
| const notification = document.createElement('div'); |
| notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg'; |
| notification.textContent = `${product.name} added to cart`; |
| document.body.appendChild(notification); |
| setTimeout(() => notification.remove(), 3000); |
| }); |
| }); |
| |
| |
| const filterButtons = document.querySelectorAll('.filter-btn'); |
| filterButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| |
| filterButtons.forEach(btn => btn.classList.remove('active', 'bg-primary', 'text-white')); |
| this.classList.add('active', 'bg-primary', 'text-white'); |
| |
| const category = this.dataset.category; |
| const products = document.querySelectorAll('.product-card'); |
| |
| products.forEach(product => { |
| if (category === 'all' || product.dataset.category === category) { |
| product.style.display = 'block'; |
| } else { |
| product.style.display = 'none'; |
| } |
| }); |
| }); |
| }); |
| |
| |
| document.getElementById('sortSelect').addEventListener('change', function() { |
| const sortValue = this.value; |
| const productsGrid = document.getElementById('productsGrid'); |
| const products = Array.from(document.querySelectorAll('.product-card')); |
| |
| products.sort((a, b) => { |
| switch(sortValue) { |
| case 'price-low': |
| return parseFloat(a.dataset.price) - parseFloat(b.dataset.price); |
| case 'price-high': |
| return parseFloat(b.dataset.price) - parseFloat(a.dataset.price); |
| case 'newest': |
| return new Date(b.dataset.date) - new Date(a.dataset.date); |
| case 'popular': |
| return parseFloat(b.dataset.popularity) - parseFloat(a.dataset.popularity); |
| default: |
| return 0; |
| } |
| }); |
| |
| |
| products.forEach(product => productsGrid.appendChild(product)); |
| }); |
| |
| |
| updateCartCount(); |
| }); |
| </script> |
| </body> |
| </html> |
