Idan16/ic-locksmith-website-e3yw0

1// IC Locksmith Website JavaScript2 3document.addEventListener('DOMContentLoaded', function() {4    5    // Mobile Menu Toggle6    const mobileMenuBtn = document.getElementById('mobile-menu-btn');7    const mobileMenu = document.getElementById('mobile-menu');8    9    if (mobileMenuBtn && mobileMenu) {10        mobileMenuBtn.addEventListener('click', function() {11            mobileMenu.classList.toggle('hidden');12            // Change icon based on menu state13            const isHidden = mobileMenu.classList.contains('hidden');14            const icon = mobileMenuBtn.querySelector('i');15            if (icon) {16                icon.setAttribute('data-lucide', isHidden ? 'menu' : 'x');17                lucide.createIcons();18            }19        });20    }21 22    // Close mobile menu when clicking on a link23    const mobileLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];24    mobileLinks.forEach(link => {25        link.addEventListener('click', () => {26            mobileMenu.classList.add('hidden');27            const icon = mobileMenuBtn.querySelector('i');28            if (icon) {29                icon.setAttribute('data-lucide', 'menu');30                lucide.createIcons();31            }32        });33    });34 35    // Sticky Navigation Effect36    const nav = document.querySelector('nav');37    let lastScroll = 0;38 39    window.addEventListener('scroll', () => {40        const currentScroll = window.pageYOffset;41        42        // Add shadow on scroll43        if (currentScroll > 100) {44            nav.classList.add('shadow-xl');45        } else {46            nav.classList.remove('shadow-xl');47        }48        49        lastScroll = currentScroll;50    });51 52    // Contact Form Handling53    const contactForm = document.getElementById('contactForm');54    if (contactForm) {55        contactForm.addEventListener('submit', function(e) {56            e.preventDefault();57            58            // Get form data59            const formData = new FormData(contactForm);60            const submitBtn = contactForm.querySelector('button[type="submit"]');61            62            // Add loading state63            submitBtn.classList.add('loading');64            submitBtn.disabled = true;65            66            // Simulate form submission (replace with actual API call)67            setTimeout(() => {68                submitBtn.classList.remove('loading');69                submitBtn.disabled = false;70                contactForm.reset();71                showSuccessModal();72            }, 1500);73        });74    }75 76    // Smooth scroll for anchor links77    document.querySelectorAll('a[href^="#"]').forEach(anchor => {78        anchor.addEventListener('click', function (e) {79            e.preventDefault();80            const target = document.querySelector(this.getAttribute('href'));81            if (target) {82                target.scrollIntoView({83                    behavior: 'smooth',84                    block: 'start'85                });86            }87        });88    });89 90    // Intersection Observer for fade-in animations91    const observerOptions = {92        root: null,93        rootMargin: '0px',94        threshold: 0.195    };96 97    const observer = new IntersectionObserver((entries) => {98        entries.forEach(entry => {99            if (entry.isIntersecting) {100                entry.target.classList.add('animate-fade-in');101                observer.unobserve(entry.target);102            }103        });104    }, observerOptions);105 106    // Observe sections for animation107    document.querySelectorAll('section > div').forEach(section => {108        observer.observe(section);109    });110 111    // Phone number formatter112    const phoneInputs = document.querySelectorAll('input[type="tel"]');113    phoneInputs.forEach(input => {114        input.addEventListener('input', function(e) {115            let x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);116            e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');117        });118    });119 120});121 122// Service Modal Functions123function showServiceModal(serviceType) {124    const modal = document.getElementById('serviceModal');125    const title = document.getElementById('modalTitle');126    const content = document.getElementById('modalContent');127    128    const serviceDetails = {129        'Residential': 'Our residential services include lock installation, repair, rekeying, smart lock setup, and emergency home lockouts. We ensure your home is secure with high-quality locks and professional installation.',130        'Commercial': 'Protect your business with our commercial locksmith services including master key systems, access control installation, high-security locks, panic bars, and file cabinet locks. We service all types of commercial properties.',131        'Automotive': 'Locked out of your car? We provide fast automotive locksmith services including car lockouts, key replacement, transponder key programming, ignition repair, and key extraction for all vehicle makes and models.'132    };133    134    title.textContent = serviceType + ' Services';135    content.textContent = serviceDetails[serviceType] || 'Contact us for detailed information about this service.';136    137    modal.classList.remove('hidden');138    modal.classList.add('flex');139    document.body.style.overflow = 'hidden';140    141    // Reinitialize icons in modal142    if (typeof lucide !== 'undefined') {143        lucide.createIcons();144    }145}146 147function closeServiceModal() {148    const modal = document.getElementById('serviceModal');149    modal.classList.add('hidden');150    modal.classList.remove('flex');151    document.body.style.overflow = 'auto';152}153 154// Success Modal Functions155function showSuccessModal() {156    const modal = document.getElementById('successModal');157    modal.classList.remove('hidden');158    modal.classList.add('flex');159    document.body.style.overflow = 'hidden';160    161    if (typeof lucide !== 'undefined') {162        lucide.createIcons();163    }164    165    // Auto close after 3 seconds166    setTimeout(closeSuccessModal, 3000);167}168 169function closeSuccessModal() {170    const modal = document.getElementById('successModal');171    modal.classList.add('hidden');172    modal.classList.remove('flex');173    document.body.style.overflow = 'auto';174}175 176// Close modals on backdrop click177document.addEventListener('click', function(e) {178    const serviceModal = document.getElementById('serviceModal');179    const successModal = document.getElementById('successModal');180    181    if (e.target === serviceModal) {182        closeServiceModal();183    }184    if (e.target === successModal) {185        closeSuccessModal();186    }187});188 189// Close modals on Escape key190document.addEventListener('keydown', function(e) {191    if (e.key === 'Escape') {192        closeServiceModal();193        closeSuccessModal();194    }195});196 197// Emergency Button Tracking (analytics placeholder)198function trackEmergencyCall() {199    console.log('Emergency call button clicked');200    // Add your analytics code here201}202 203// Performance optimization: Lazy load images if needed204function lazyLoadImages() {205    const images = document.querySelectorAll('img[data-src]');206    const imageObserver = new IntersectionObserver((entries, observer) => {207        entries.forEach(entry => {208            if (entry.isIntersecting) {209                const img = entry.target;210                img.src = img.dataset.src;211                img.removeAttribute('data-src');212                observer.unobserve(img);213            }214        });215    });216    217    images.forEach(img => imageObserver.observe(img));218}219 220// Initialize lazy loading221if ('IntersectionObserver' in window) {222    lazyLoadImages();223}