subby2006's picture
Include quick overviews for engines we support.
6fdf8e5 verified
// 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);
}
});