File size: 4,596 Bytes
86752df | 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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | // Mobile Menu Toggle
function toggleMobileMenu() {
const menu = document.getElementById('mobileMenu');
menu.classList.toggle('hidden');
}
// Filter Functionality
function filterDates(category) {
const cards = document.querySelectorAll('.date-card');
const buttons = document.querySelectorAll('.filter-btn');
// Update active button
buttons.forEach(btn => {
if (btn.textContent.toLowerCase() === category || (category === 'all' && btn.textContent === 'All')) {
btn.classList.add('bg-rose-600', 'text-white', 'border-rose-600');
btn.classList.remove('text-warm-800', 'border-warm-200');
} else {
btn.classList.remove('bg-rose-600', 'text-white', 'border-rose-600');
btn.classList.add('text-warm-800', 'border-warm-200');
}
});
// Filter cards
cards.forEach(card => {
if (category === 'all' || card.dataset.category === category) {
card.style.display = 'block';
setTimeout(() => {
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 10);
} else {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
setTimeout(() => {
card.style.display = 'none';
}, 300);
}
});
}
// Modal Functions
function openBookingModal(experienceName = '') {
const modal = document.getElementById('bookingModal');
const input = document.getElementById('experienceInput');
if (experienceName) {
input.value = experienceName;
} else {
input.value = '';
}
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
// Reinitialize icons in modal
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
}
function closeBookingModal() {
const modal = document.getElementById('bookingModal');
modal.classList.add('hidden');
document.body.style.overflow = '';
}
// Form Submission
document.getElementById('bookingForm').addEventListener('submit', function(e) {
e.preventDefault();
// Show success message
const form = this;
const originalContent = form.innerHTML;
form.innerHTML = `
<div class="text-center py-8">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-600"></i>
</div>
<h4 class="font-serif text-2xl font-bold text-warm-900 mb-2">Booking Request Sent!</h4>
<p class="text-warm-600">We'll contact you within 2 hours to confirm your date details.</p>
<button onclick="closeBookingModal()" class="mt-6 bg-warm-100 text-warm-800 px-6 py-2 rounded-full font-medium hover:bg-warm-200 transition-colors">
Close
</button>
</div>
`;
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
// Reset form after delay
setTimeout(() => {
form.innerHTML = originalContent;
closeBookingModal();
}, 3000);
});
// Smooth scroll 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) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// Close mobile menu if open
document.getElementById('mobileMenu').classList.add('hidden');
}
});
});
// Intersection Observer for fade-in animations
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in-up');
observer.unobserve(entry.target);
}
});
}, observerOptions);
// Observe elements
document.querySelectorAll('.date-card').forEach((el) => {
el.style.opacity = '0';
observer.observe(el);
});
// Close modal on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeBookingModal();
}
});
// Initialize Lucide icons on load
document.addEventListener('DOMContentLoaded', () => {
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
}); |