Download index.html from akbar4572/undefined: direct link, hf CLI and curl.
- Browser
- Download file 24.4 kB
-
https://huggingface.co/spaces/akbar4572/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/akbar4572/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/akbar4572/undefined/resolve/main/index.html
24.4 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CG TechWear - Where Fashion Meets Technology</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> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#f97316', | |
| secondary: '#eab308', | |
| } | |
| } | |
| } | |
| } | |
| </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; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(249,115,22,0.1) 0%, rgba(234,179,8,0.1) 100%); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.4); | |
| } | |
| .nav-link:hover { | |
| color: #f97316; | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white"> | |
| <!-- Animated Background --> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div> | |
| <!-- Navigation --> | |
| <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-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-gray-500 hover:text-gray-900 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> | |
| <a href="/about.html" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">About</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <i data-feather="search"></i> | |
| </button> | |
| <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> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <i data-feather="user"></i> | |
| </button> | |
| <div class="md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-10 lg:mb-0"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6"> | |
| <span class="text-primary">Tech</span> Meets <span class="text-secondary">Fashion</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-700 mb-8"> | |
| Discover the perfect fusion of cutting-edge technology and stylish clothing designed for the modern lifestyle. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="/products.html" class="bg-primary hover:bg-orange-600 text-white px-6 py-3 rounded-full font-medium transition duration-300 transform hover:scale-105"> | |
| Shop Now | |
| </a> | |
| <button class="border-2 border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-full font-medium transition duration-300"> | |
| Explore | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative pulse-animation"> | |
| <img src="http://static.photos/technology/1200x630/42" alt="Techwear Fashion" class="rounded-xl shadow-2xl"> | |
| <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-full shadow-lg"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center"> | |
| <i data-feather="arrow-right" class="text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Categories --> | |
| <section class="py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Featured Categories</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/fashion/1024x576/101" alt="Smart Clothing" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Smart Clothing</h3> | |
| <p class="text-gray-600 mb-4">Wearable tech that monitors your health and enhances performance.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| View Collection | |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/1024x576/102" alt="Tech Gadgets" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Tech Gadgets</h3> | |
| <p class="text-gray-600 mb-4">Innovative devices that complement your tech-savvy lifestyle.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| View Collection | |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/workspace/1024x576/103" alt="Accessories" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Accessories</h3> | |
| <p class="text-gray-600 mb-4">Essential add-ons to complete your techwear ensemble.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| View Collection | |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h2 class="text-3xl font-bold">Featured Products</h2> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| View All | |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/640x360/201" alt="Smart Jacket" class="w-full h-48 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">Quantum Smart Jacket</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| </div> | |
| <span class="text-gray-600 text-xs ml-1">(24)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-primary">$249.99</span> | |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="1" data-name="Quantum Smart Jacket" data-price="249.99" data-image="http://static.photos/technology/640x360/201"> | |
| <i data-feather="shopping-cart" class="w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/640x360/202" alt="Smart Watch" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Nexus Pro Watch</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current text-gray-300"></i> | |
| </div> | |
| <span class="text-gray-600 text-xs ml-1">(18)</span> | |
| </div> | |
| <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="2" data-name="Nexus Pro Watch" data-price="179.99" data-image="http://static.photos/technology/640x360/202"> | |
| <i data-feather="shopping-cart" class="w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="http://static.photos/fashion/640x360/203" alt="Smart Shoes" class="w-full h-48 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 Shoes</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| </div> | |
| <span class="text-gray-600 text-xs ml-1">(32)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-bold text-primary">$199.99</span> | |
| <span class="text-gray-500 text-sm line-through ml-2">$249.99</span> | |
| </div> | |
| <button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="3" data-name="Pulse Smart Shoes" data-price="199.99" data-image="http://static.photos/fashion/640x360/203"> | |
| <i data-feather="shopping-cart" class="w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/640x360/204" alt="Wireless Earbuds" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Skyline Wireless Earbuds</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 fill-current text-gray-300"></i> | |
| </div> | |
| <span class="text-gray-600 text-xs ml-1">(15)</span> | |
| </div> | |
| <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="4" data-name="Skyline Wireless Earbuds" data-price="129.99" data-image="http://static.photos/technology/640x360/204"> | |
| <i data-feather="shopping-cart" class="w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tech Features Section --> | |
| <section class="py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Why Choose CG TechWear?</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our products combine advanced technology with premium materials for unparalleled performance and style.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="cpu" class="text-primary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Smart Technology</h3> | |
| <p class="text-gray-600">Integrated with the latest wearable tech for health monitoring and connectivity.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="shield" class="text-primary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Premium Materials</h3> | |
| <p class="text-gray-600">High-quality, durable fabrics designed for comfort and performance.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="truck" class="text-primary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Fast Shipping</h3> | |
| <p class="text-gray-600">Get your order delivered quickly with our express shipping options.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-primary/5"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Stay Updated</h2> | |
| <p class="text-gray-600 mb-8">Subscribe to our newsletter for the latest product releases and exclusive offers.</p> | |
| <form id="newsletterForm" class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> | |
| <input type="email" id="emailInput" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| <button type="submit" class="bg-primary hover:bg-orange-600 text-white px-6 py-3 rounded-full font-medium transition duration-300 whitespace-nowrap"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <p id="subscriptionMessage" class="mt-4 text-green-500 hidden">Thanks for subscribing!</p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">CG TechWear</h3> | |
| <p class="text-gray-400 mb-4">Where technology meets fashion in perfect harmony.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="facebook" class="w-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter" class="w-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="instagram" class="w-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="youtube" class="w-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Shop</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="/clothing.html" class="text-gray-400 hover:text-white transition">Clothing</a></li> | |
| <li><a href="/gadgets.html" class="text-gray-400 hover:text-white transition">Gadgets</a></li> | |
| <li><a href="/products.html" class="text-gray-400 hover:text-white transition">Accessories</a></li> | |
| <li><a href="/products.html" class="text-gray-400 hover:text-white transition">New Arrivals</a></li> | |
| <li><a href="/products.html" class="text-gray-400 hover:text-white transition">Sale</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Help</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Customer Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Track Order</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Returns & Exchanges</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping Info</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="text-gray-400">123 Tech Street</li> | |
| <li class="text-gray-400">San Francisco, CA 94107</li> | |
| <li class="text-gray-400">(123) 456-7890</li> | |
| <li class="text-gray-400">info@cgtechwear.com</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 CG TechWear. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Cart functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize cart | |
| if (!localStorage.getItem('cart')) { | |
| localStorage.setItem('cart', JSON.stringify([])); | |
| } | |
| // Update cart count | |
| 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'); | |
| } | |
| } | |
| // Add to cart functionality | |
| 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(); | |
| // Show added notification | |
| 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); | |
| }); | |
| }); | |
| // Initialize cart count on page load | |
| updateCartCount(); | |
| }); | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xf97316, | |
| backgroundColor: 0xf8fafc, | |
| points: 10.00, | |
| maxDistance: 25.00, | |
| spacing: 18.00 | |
| }); | |
| // Feather icons | |
| feather.replace(); | |
| // Mobile menu toggle would go here | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Newsletter form submission | |
| document.getElementById('newsletterForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = document.getElementById('emailInput').value; | |
| const messageEl = document.getElementById('subscriptionMessage'); | |
| axios.post('/api/subscribe', { email }) | |
| .then(response => { | |
| messageEl.textContent = 'Thanks for subscribing!'; | |
| messageEl.classList.remove('hidden'); | |
| document.getElementById('newsletterForm').reset(); | |
| setTimeout(() => messageEl.classList.add('hidden'), 3000); | |
| }) | |
| .catch(error => { | |
| messageEl.textContent = 'Subscription failed. Please try again.'; | |
| messageEl.classList.add('text-red-500'); | |
| messageEl.classList.remove('hidden', 'text-green-500'); | |
| setTimeout(() => { | |
| messageEl.classList.add('hidden'); | |
| messageEl.classList.remove('text-red-500'); | |
| messageEl.classList.add('text-green-500'); | |
| }, 3000); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |