HTMLify

document.addEventListener('DOMContentLoaded', () => { const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); if (hamburger && navMenu) { hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); const icon = hamburger.querySelector('i'); if (icon.classList.contains('fa-bars')) { icon.classList.remove('fa-bars'); icon.classList.add('fa-xmark'); } else { icon.classList.remove('fa-xmark'); icon.classList.add('fa-bars'); } }); } const filterBtns = document.querySelectorAll('.filter-btn'); const galleryCards = document.querySelectorAll('.gallery-card'); if (filterBtns.length > 0) { filterBtns.forEach(btn => { btn.addEventListener('click', () => { filterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); const filter = btn.getAttribute('data-filter'); galleryCards.forEach(card => { if (filter === 'all' || card.getAttribute('data-category') === filter) { card.style.display = 'block'; card.classList.add('animate-fade-in'); } else { card.style.display = 'none'; } }); }); }); } const bookingForm = document.getElementById('bookingForm'); const bookingSuccess = document.getElementById('bookingSuccess'); const resetFormBtn = document.getElementById('resetFormBtn'); if (bookingForm) { bookingForm.addEventListener('submit', (e) => { e.preventDefault(); bookingForm.style.display = 'none'; bookingSuccess.classList.remove('hidden'); }); } if (resetFormBtn) { resetFormBtn.addEventListener('click', () => { bookingForm.reset(); bookingForm.style.display = 'flex'; bookingSuccess.classList.add('hidden'); }); } const contactForm = document.getElementById('contactForm'); const contactSuccess = document.getElementById('contactSuccess'); if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); contactForm.style.display = 'none'; contactSuccess.classList.remove('hidden'); }); } const baSliderHandle = document.querySelector('.ba-slider-handle'); const baBefore = document.querySelector('.ba-before'); if (baSliderHandle && baBefore) { baSliderHandle.addEventListener('input', (e) => { const value = e.target.value; baBefore.style.width = value + '%'; }); } const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); const animatedElements = document.querySelectorAll('.animate-on-scroll'); animatedElements.forEach(el => { observer.observe(el); }); });