Spaces:

StevenExtraAnalyzer
/

deepsite-project-sxbxo

Running

Initial DeepSite commit

86752df verified 8 months ago

4.6 kB

// 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();
    }
});

	// 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();
	}
	});