File size: 3,539 Bytes
495ecb4 a7d1dc6 495ecb4 a7d1dc6 495ecb4 a7d1dc6 495ecb4 a7d1dc6 495ecb4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
// Banner close functionality
const closeBanner = document.getElementById('closeBanner');
const comingSoonBanner = document.getElementById('comingSoonBanner');
if (closeBanner && comingSoonBanner) {
closeBanner.addEventListener('click', function() {
comingSoonBanner.classList.add('hidden');
document.body.classList.add('banner-hidden');
setTimeout(() => {
comingSoonBanner.style.display = 'none';
}, 300); // Match this with CSS transition duration
});
}
// Mobile menu toggle
document.getElementById('menu-toggle').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Form submission handler
function onSubmit(token) {
const form = document.getElementById('wakeForm');
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
// Remove bot field from data
delete data['bot-field'];
// Here you would send the data to your server/Netlify
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams(formData).toString()
})
.then(() => {
// Show success message
alert('Thanks for your inquiry! We\'ll get back to you soon to plan your Florida Keys wakesurfing adventure.');
form.reset();
})
.catch((error) => {
console.error('Form submission error:', error);
alert('There was an error submitting your form. Please try again or contact us directly.');
});
}
// Form submission event
document.getElementById('wakeForm')?.addEventListener('submit', function(e) {
e.preventDefault();
// Trigger reCAPTCHA
grecaptcha.execute();
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
const headerOffset = 80; // Height of your header
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// Feather icons replacement (in case they need to be refreshed)
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
});
// Add animation to FAQ items when they come into view
const faqItems = document.querySelectorAll('#faq > div > div');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
faqItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(20px)';
item.style.transition = 'all 0.4s ease';
observer.observe(item);
}); |