databar/beanbrew-b2b

1// Initialize Feather Icons2document.addEventListener('DOMContentLoaded', () => {3    feather.replace();4    5    // Mobile menu toggle6    const mobileMenuBtn = document.getElementById('mobileMenuBtn');7    const mobileMenu = document.getElementById('mobileMenu');8    9    if (mobileMenuBtn && mobileMenu) {10        mobileMenuBtn.addEventListener('click', () => {11            mobileMenu.classList.toggle('hidden');12            const isOpen = !mobileMenu.classList.contains('hidden');13            mobileMenuBtn.setAttribute('aria-expanded', isOpen);14        });15    }16 17    // Form submission18    const orderForm = document.getElementById('orderForm');19    const successModal = document.getElementById('successModal');20    21    if (orderForm) {22        orderForm.addEventListener('submit', (e) => {23            e.preventDefault();24            25            // Simulate form processing26            const submitBtn = orderForm.querySelector('button[type="submit"]');27            const originalText = submitBtn.innerHTML;28            29            submitBtn.disabled = true;30            submitBtn.innerHTML = '<span class="animate-spin inline-block mr-2">⟳</span> Sending...';31            32            setTimeout(() => {33                showModal();34                submitBtn.disabled = false;35                submitBtn.innerHTML = originalText;36                orderForm.reset();37            }, 1500);38        });39    }40 41    // Intersection Observer for scroll animations42    const observerOptions = {43        root: null,44        rootMargin: '0px',45        threshold: 0.146    };47 48    const observer = new IntersectionObserver((entries) => {49        entries.forEach(entry => {50            if (entry.isIntersecting) {51                entry.target.classList.add('animate-fade-up');52                entry.target.style.opacity = '1';53                observer.unobserve(entry.target);54            }55        });56    }, observerOptions);57 58    // Observe elements with animation class59    document.querySelectorAll('section > div').forEach(el => {60        el.style.opacity = '0';61        observer.observe(el);62    });63 64    // Smooth scroll for anchor links65    document.querySelectorAll('a[href^="#"]').forEach(anchor => {66        anchor.addEventListener('click', function (e) {67            e.preventDefault();68            const target = document.querySelector(this.getAttribute('href'));69            if (target) {70                const headerOffset = 80;71                const elementPosition = target.getBoundingClientRect().top;72                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;73 74                window.scrollTo({75                    top: offsetPosition,76                    behavior: 'smooth'77                });78                79                // Close mobile menu if open80                if (mobileMenu && !mobileMenu.classList.contains('hidden')) {81                    mobileMenu.classList.add('hidden');82                }83            }84        });85    });86 87    // Add scroll effect to navbar88    let lastScroll = 0;89    const navbar = document.querySelector('custom-navbar');90    91    if (navbar) {92        window.addEventListener('scroll', () => {93            const currentScroll = window.pageYOffset;94            95            if (currentScroll > 100) {96                navbar.style.transform = currentScroll > lastScroll ? 'translateY(-100%)' : 'translateY(0)';97                navbar.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';98            } else {99                navbar.style.transform = 'translateY(0)';100                navbar.style.boxShadow = 'none';101            }102            103            lastScroll = currentScroll;104        });105    }106});107 108// Modal functions109function showModal() {110    const modal = document.getElementById('successModal');111    const modalContent = modal.querySelector('div');112    113    modal.classList.remove('hidden');114    modal.classList.add('flex');115    116    // Trigger reflow117    void modal.offsetWidth;118    119    modal.classList.remove('opacity-0');120    modalContent.classList.remove('scale-95');121    modalContent.classList.add('scale-100');122}123 124function closeModal() {125    const modal = document.getElementById('successModal');126    const modalContent = modal.querySelector('div');127    128    modal.classList.add('opacity-0');129    modalContent.classList.remove('scale-100');130    modalContent.classList.add('scale-95');131    132    setTimeout(() => {133        modal.classList.add('hidden');134        modal.classList.remove('flex');135    }, 300);136}137 138// Close modal on outside click139document.addEventListener('click', (e) => {140    const modal = document.getElementById('successModal');141    if (e.target === modal) {142        closeModal();143    }144});145 146// Close modal on Escape key147document.addEventListener('keydown', (e) => {148    if (e.key === 'Escape') {149        const modal = document.getElementById('successModal');150        if (!modal.classList.contains('hidden')) {151            closeModal();152        }153    }154});