Spaces:
Running
Running
| // Initialize when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize animations | |
| initScrollAnimations(); | |
| // Initialize smooth scrolling | |
| initSmoothScroll(); | |
| // Initialize contact form | |
| initContactForm(); | |
| // Initialize theme toggle | |
| initThemeToggle(); | |
| }); | |
| // Scroll animations | |
| function initScrollAnimations() { | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animated'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all animated elements | |
| document.querySelectorAll('.animate-on-scroll').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| } | |
| // Smooth scrolling for anchor links | |
| function initSmoothScroll() { | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| } | |
| // Contact form handling | |
| function initContactForm() { | |
| const form = document.getElementById('contactForm'); | |
| if (form) { | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form data | |
| const formData = new FormData(form); | |
| const data = Object.fromEntries(formData); | |
| // Show success message | |
| showNotification('Thank you for your message! We\'ll get back to you soon.', 'success'); | |
| // Reset form | |
| form.reset(); | |
| }); | |
| } | |
| } | |
| // Theme toggle | |
| function initThemeToggle() { | |
| const themeToggle = document.getElementById('themeToggle'); | |
| if (themeToggle) { | |
| themeToggle.addEventListener('click', function() { | |
| document.documentElement.classList.toggle('dark'); | |
| localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| } | |
| // Load saved theme | |
| const savedTheme = localStorage.getItem('theme'); | |
| if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| document.documentElement.classList.add('dark'); | |
| } | |
| } | |
| // Notification system | |
| function showNotification(message, type = 'info') { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed bottom-4 right-4 px-6 py-4 rounded-lg shadow-lg transform translate-y-full transition-transform duration-300 z-50`; | |
| // Set background color based on type | |
| if (type === 'success') { | |
| notification.classList.add('bg-green-500', 'text-white'); | |
| } else if (type === 'error') { | |
| notification.classList.add('bg-red-500', 'text-white'); | |
| } else { | |
| notification.classList.add('bg-blue-500', 'text-white'); | |
| } | |
| notification.innerHTML = ` | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20"> | |
| ${type === 'success' ? | |
| '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>' : | |
| '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>' | |
| } | |
| </svg> | |
| <span>${message}</span> | |
| </div> | |
| `; | |
| document.body.appendChild(notification); | |
| // Slide in | |
| setTimeout(() => { | |
| notification.style.transform = 'translateY(0)'; | |
| }, 100); | |
| // Remove after 3 seconds | |
| setTimeout(() => { | |
| notification.style.transform = 'translateY(100%)'; | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 300); | |
| }, 3000); | |
| } | |
| // Add parallax effect to hero section | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const parallax = document.querySelector('.hero-parallax'); | |
| if (parallax) { | |
| parallax.style.transform = `translateY(${scrolled * 0.5}px)`; | |
| } | |
| }); | |
| // Add hover effect to engine cards | |
| document.querySelectorAll('.engine-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-10px) rotateX(5deg)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0) rotateX(0)'; | |
| }); | |
| }); | |
| // Typing effect for hero title | |
| function typeWriter(element, text, speed = 50) { | |
| let i = 0; | |
| element.innerHTML = ''; | |
| function type() { | |
| if (i < text.length) { | |
| element.innerHTML += text.charAt(i); | |
| i++; | |
| setTimeout(type, speed); | |
| } | |
| } | |
| type(); | |
| } | |
| // Initialize typing effect when page loads | |
| window.addEventListener('load', () => { | |
| const heroTitle = document.querySelector('.hero-title'); | |
| if (heroTitle) { | |
| const originalText = heroTitle.textContent; | |
| typeWriter(heroTitle, originalText, 80); | |
| } | |
| }); |