Spaces:
Running
Running
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Animation on scroll | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.feature-card, .step-card, .testimonial-card'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.3; | |
| if (elementPosition < screenPosition) { | |
| element.style.opacity = 1; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Set initial state for animated elements | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const animatedElements = document.querySelectorAll('.feature-card, .step-card, .testimonial-card'); | |
| animatedElements.forEach(element => { | |
| element.style.opacity = 0; | |
| element.style.transform = 'translateY(20px)'; | |
| element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| }); | |
| // Trigger animation on scroll | |
| window.addEventListener('scroll', animateOnScroll); | |
| // Initial check in case elements are already in view | |
| animateOnScroll(); | |
| }); | |
| // Form validation example | |
| const validateForm = (formId) => { | |
| const form = document.getElementById(formId); | |
| if (!form) return; | |
| form.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Example validation | |
| const email = form.querySelector('input[type="email"]'); | |
| const message = form.querySelector('textarea'); | |
| if (email && !email.value.includes('@')) { | |
| alert('Please enter a valid email address'); | |
| return; | |
| } | |
| if (message && message.value.trim() === '') { | |
| alert('Please enter your message'); | |
| return; | |
| } | |
| // In a real app, you would submit the form here | |
| alert('Thank you for your message! We will get back to you soon.'); | |
| form.reset(); | |
| }); | |
| }; | |
| // Initialize form validation | |
| document.addEventListener('DOMContentLoaded', () => { | |
| validateForm('contact-form'); | |
| }); | |
| // Mobile menu functionality | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Handle sidebar open event | |
| document.addEventListener('open-sidebar', () => { | |
| const sidebar = document.querySelector('custom-sidebar'); | |
| if (sidebar) { | |
| sidebar.openSidebar(); | |
| } | |
| }); | |
| }); | |