Spaces:
Running
Running
| // Main JavaScript file for NanoMatter Technologies | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize all components and animations | |
| initScrollAnimations(); | |
| initFormHandling(); | |
| }); | |
| function initScrollAnimations() { | |
| // Add intersection observer for scroll animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -100px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-in'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all sections for animation | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| } | |
| function initFormHandling() { | |
| const contactForm = document.querySelector('#contact form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Simple form validation | |
| const inputs = contactForm.querySelectorAll('input, textarea'); | |
| let isValid = true; | |
| inputs.forEach(input => { | |
| if (!input.value.trim()) { | |
| isValid = false; | |
| input.style.borderColor = '#ef4444'; | |
| } else { | |
| input.style.borderColor = '#d1d5db'; | |
| } | |
| }); | |
| if (isValid) { | |
| // Show success message (in a real app, this would send to server) | |
| alert('Thank you for your message! We will get back to you soon.'); | |
| contactForm.reset(); | |
| } else { | |
| alert('Please fill in all fields.'); | |
| } | |
| }); | |
| } | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| window.scrollTo({ | |
| top: target.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Navbar scroll effect | |
| window.addEventListener('scroll', function() { | |
| const navbar = document.querySelector('custom-navbar'); | |
| if (navbar) { | |
| const navShadow = navbar.shadowRoot.querySelector('nav'); | |
| if (window.scrollY > 100) { | |
| navShadow.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)'; | |
| } else { | |
| navShadow.style.boxShadow = 'none'; | |
| } | |
| }); | |
| } | |
| } |