127 lines
3.8 KiB
JavaScript
127 lines
3.8 KiB
JavaScript
|
|
// Mobile Menu Toggle
|
||
|
|
const mobileToggle = document.querySelector('.mobile-toggle');
|
||
|
|
const navMenu = document.querySelector('.nav-menu');
|
||
|
|
|
||
|
|
if (mobileToggle) {
|
||
|
|
mobileToggle.addEventListener('click', () => {
|
||
|
|
navMenu.classList.toggle('active');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Close mobile menu when clicking a link
|
||
|
|
const navLinks = document.querySelectorAll('.nav-menu a');
|
||
|
|
navLinks.forEach(link => {
|
||
|
|
link.addEventListener('click', () => {
|
||
|
|
navMenu.classList.remove('active');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Smooth Scrolling
|
||
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
|
|
anchor.addEventListener('click', function (e) {
|
||
|
|
// Only prevent default for hash links, not for regular links
|
||
|
|
if (this.getAttribute('href').startsWith('#')) {
|
||
|
|
e.preventDefault();
|
||
|
|
const target = document.querySelector(this.getAttribute('href'));
|
||
|
|
if (target) {
|
||
|
|
const headerOffset = 80;
|
||
|
|
const elementPosition = target.getBoundingClientRect().top;
|
||
|
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||
|
|
|
||
|
|
window.scrollTo({
|
||
|
|
top: offsetPosition,
|
||
|
|
behavior: 'smooth'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// FAQ Accordion
|
||
|
|
const faqItems = document.querySelectorAll('.faq-item');
|
||
|
|
|
||
|
|
faqItems.forEach(item => {
|
||
|
|
const question = item.querySelector('.faq-question');
|
||
|
|
|
||
|
|
question.addEventListener('click', () => {
|
||
|
|
const isActive = item.classList.contains('active');
|
||
|
|
|
||
|
|
// Close all FAQ items
|
||
|
|
faqItems.forEach(faq => faq.classList.remove('active'));
|
||
|
|
|
||
|
|
// Open clicked item if it wasn't active
|
||
|
|
if (!isActive) {
|
||
|
|
item.classList.add('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Signup Form Handling
|
||
|
|
const signupForm = document.getElementById('signupForm');
|
||
|
|
const formMessage = document.getElementById('formMessage');
|
||
|
|
|
||
|
|
if (signupForm) {
|
||
|
|
signupForm.addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const emailInput = document.getElementById('email');
|
||
|
|
const email = emailInput.value.trim();
|
||
|
|
|
||
|
|
// Basic validation
|
||
|
|
if (!email || !isValidEmail(email)) {
|
||
|
|
showMessage('Please enter a valid email address.', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Get submit button
|
||
|
|
const submitBtn = signupForm.querySelector('button[type="submit"]');
|
||
|
|
const originalBtnText = submitBtn.textContent;
|
||
|
|
|
||
|
|
// Disable button and show loading state
|
||
|
|
submitBtn.disabled = true;
|
||
|
|
submitBtn.textContent = 'Redirecting...';
|
||
|
|
|
||
|
|
// Redirect to signup page after a brief delay
|
||
|
|
setTimeout(() => {
|
||
|
|
window.location.href = '/signup.html';
|
||
|
|
}, 300);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function isValidEmail(email) {
|
||
|
|
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
|
|
return re.test(email);
|
||
|
|
}
|
||
|
|
|
||
|
|
function showMessage(message, type) {
|
||
|
|
formMessage.textContent = message;
|
||
|
|
formMessage.className = `form-message ${type}`;
|
||
|
|
|
||
|
|
// Auto-hide success messages after 5 seconds
|
||
|
|
if (type === 'success') {
|
||
|
|
setTimeout(() => {
|
||
|
|
formMessage.className = 'form-message';
|
||
|
|
}, 5000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add scroll animation for header
|
||
|
|
let lastScroll = 0;
|
||
|
|
const header = document.querySelector('.header');
|
||
|
|
|
||
|
|
window.addEventListener('scroll', () => {
|
||
|
|
const currentScroll = window.pageYOffset;
|
||
|
|
|
||
|
|
if (currentScroll > 100) {
|
||
|
|
header.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
|
||
|
|
} else {
|
||
|
|
header.style.boxShadow = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
lastScroll = currentScroll;
|
||
|
|
});
|
||
|
|
|
||
|
|
// FIXED: Remove all inline opacity/transform styles.
|
||
|
|
// Elements are now visible by default. No animation needed.
|
||
|
|
// This fixes the issue where Intersection Observer wasn't working properly.
|