// script.js document.addEventListener('DOMContentLoaded', () => { // 1. Mobile Menu Toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenuBtn && mobileMenu) { mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Close mobile menu when clicking a link const mobileLinks = mobileMenu.querySelectorAll('a'); mobileLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); }); } // 2. Navbar Scroll Effect (Glassmorphism toggle) const navbar = document.getElementById('navbar'); window.addEventListener('scroll', () => { if (window.scrollY > 20) { navbar.classList.add('shadow-md'); } else { navbar.classList.remove('shadow-md'); } }); // 3. Intersection Observer for Fade-in Animations const observerOptions = { threshold: 0.1 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('fade-in-up'); // Or add a class that triggers CSS animation observer.unobserve(entry.target); } }); }, observerOptions); // Target elements to animate const animatedElements = document.querySelectorAll('.group, .scale-105, .bg-white.rounded-2xl'); animatedElements.forEach(el => { // el.style.opacity = 0; // Initial state handled by CSS animation classes in HTML observer.observe(el); }); // 4. Simple Contact Form Handler (Demo) const contactForm = document.querySelector('form'); if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); const emailInput = contactForm.querySelector('input[type="email"]'); if(emailInput && emailInput.value) { // Simulate API call const btn = contactForm.querySelector('button'); const originalText = btn.innerText; btn.innerText = 'در حال ارسال...'; btn.disabled = true; btn.classList.add('opacity-75', 'cursor-not-allowed'); setTimeout(() => { alert(`ایمیل ${emailInput.value} با موفقیت ثبت شد!`); btn.innerText = 'ارسال شد ✓'; btn.classList.remove('bg-secondary'); btn.classList.add('bg-green-500'); emailInput.value = ''; }, 1500); } }); } // 5. Pricing Card Hover Effect (Optional JS enhancement) const cards = document.querySelectorAll('#pricing .group, #pricing > div > div'); cards.forEach(card => { card.addEventListener('mouseenter', () => { // Logic if needed }); }); });