NativeON/aesthetic-haven

1// Aesthetic Haven - Main JavaScript2document.addEventListener('DOMContentLoaded', function() {3    // Initialize Feather Icons4    feather.replace();5    6    // Newsletter Form Submission7    const newsletterForm = document.querySelector('form');8    if (newsletterForm) {9        newsletterForm.addEventListener('submit', function(e) {10            e.preventDefault();11            const emailInput = this.querySelector('input[type="email"]');12            const email = emailInput.value.trim();13            14            if (validateEmail(email)) {15                // Simulate form submission16                const submitBtn = this.querySelector('button[type="submit"]');17                const originalText = submitBtn.textContent;18                19                submitBtn.innerHTML = '<span class="loading-spinner"></span>';20                submitBtn.disabled = true;21                22                // Simulate API call23                setTimeout(() => {24                    submitBtn.textContent = 'Subscribed!';25                    submitBtn.classList.remove('bg-white', 'hover:bg-gray-100');26                    submitBtn.classList.add('bg-green-500', 'text-white');27                    emailInput.value = '';28                    29                    // Show success message30                    showToast('Successfully subscribed to our newsletter!', 'success');31                    32                    // Reset button after 3 seconds33                    setTimeout(() => {34                        submitBtn.textContent = originalText;35                        submitBtn.disabled = false;36                        submitBtn.classList.remove('bg-green-500', 'text-white');37                        submitBtn.classList.add('bg-white', 'text-gray-900', 'hover:bg-gray-100');38                    }, 3000);39                }, 1500);40            } else {41                showToast('Please enter a valid email address', 'error');42                emailInput.focus();43            }44        });45    }46    47    // Product Card Interaction48    document.addEventListener('click', function(e) {49        if (e.target.closest('.product-card') || e.target.closest('product-card')) {50            const productCard = e.target.closest('.product-card') || e.target.closest('product-card');51            if (productCard) {52                // Add visual feedback53                productCard.style.transform = 'scale(0.98)';54                setTimeout(() => {55                    productCard.style.transform = '';56                }, 150);57                58                // Log interaction for analytics59                console.log('Product card clicked');60            }61        }62    });63    64    // Mobile Menu Toggle65    document.addEventListener('click', function(e) {66        if (e.target.hasAttribute('data-toggle-menu')) {67            const navbar = document.querySelector('aesthetic-navbar');68            if (navbar) {69                navbar.toggleMenu();70            }71        }72    });73    74    // Scroll Animation75    const observerOptions = {76        threshold: 0.1,77        rootMargin: '0px 0px -50px 0px'78    };79    80    const observer = new IntersectionObserver((entries) => {81        entries.forEach(entry => {82            if (entry.isIntersecting) {83                entry.target.classList.add('fade-in-up');84            }85        });86    }, observerOptions);87    88    // Observe elements for animation89    document.querySelectorAll('section, product-card, feature-card, testimonial-card').forEach(el => {90        observer.observe(el);91    });92});93 94// Email Validation95function validateEmail(email) {96    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;97    return re.test(email);98}99 100// Toast Notification101function showToast(message, type = 'info') {102    // Remove existing toasts103    const existingToasts = document.querySelectorAll('.custom-toast');104    existingToasts.forEach(toast => toast.remove());105    106    // Create toast element107    const toast = document.createElement('div');108    toast.className = `custom-toast fixed top-4 right-4 z-50 px-6 py-4 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 ${109        type === 'success' ? 'bg-green-500 text-white' : 110        type === 'error' ? 'bg-red-500 text-white' : 111        'bg-gray-800 text-white'112    }`;113    toast.textContent = message;114    115    // Add to document116    document.body.appendChild(toast);117    118    // Animate in119    setTimeout(() => {120        toast.style.transform = 'translateX(0)';121    }, 10);122    123    // Remove after delay124    setTimeout(() => {125        toast.style.transform = 'translateX(100%)';126        setTimeout(() => toast.remove(), 300);127    }, 4000);128}129 130// Add to Cart Simulation131function addToCart(productId, productName, price) {132    showToast(`${productName} added to cart!`, 'success');133    134    // Update cart count in navbar135    const cartCount = document.querySelector('[data-cart-count]');136    if (cartCount) {137        const currentCount = parseInt(cartCount.textContent) || 0;138        cartCount.textContent = currentCount + 1;139        140        // Add animation141        cartCount.classList.add('scale-125');142        setTimeout(() => {143            cartCount.classList.remove('scale-125');144        }, 300);145    }146}147 148// Debounce function for performance149function debounce(func, wait) {150    let timeout;151    return function executedFunction(...args) {152        const later = () => {153            clearTimeout(timeout);154            func(...args);155        };156        clearTimeout(timeout);157        timeout = setTimeout(later, wait);158    };159}160 161// Handle window resize162const handleResize = debounce(() => {163    // Update any responsive behaviors164    console.log('Window resized to:', window.innerWidth);165}, 250);166 167window.addEventListener('resize', handleResize);