document.addEventListener("DOMContentLoaded", function () { const fadeInElements = document.querySelectorAll(".fade-in-on-scroll"); const fadeInSequenceElements = document.querySelectorAll(".fade-in-sequence"); const fadeInRightElement = document.querySelector(".fade-in-right"); // Hero section animations (sequential fade-in) if (fadeInRightElement) { fadeInRightElement.style.opacity = "0"; fadeInRightElement.style.transform = "translateX(50px)"; setTimeout(() => { fadeInRightElement.style.transition = "opacity 1s ease-out, transform 1s ease-out"; fadeInRightElement.style.opacity = "1"; fadeInRightElement.style.transform = "translateX(0)"; }, 500); } fadeInSequenceElements.forEach((element, index) => { element.style.opacity = "0"; setTimeout(() => { element.style.transition = "opacity 1s ease-out"; element.style.opacity = "1"; }, (index + 1) * 1000); }); // Scroll-triggered animations const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("fade-in"); observer.unobserve(entry.target); } }); }, { threshold: 0.2 }); fadeInElements.forEach(el => observer.observe(el)); }); // carousel js const track = document.getElementById('carouselTrack'); const pagination = document.getElementById('pagination'); let currentPage = 0; let pageDots = []; function getVisibleCount() { return window.innerWidth <= 768 ? 2 : 4; } function buildPagination() { pagination.innerHTML = ''; pageDots = []; const visibleCount = getVisibleCount(); const totalImages = track.querySelectorAll('img').length; const totalPages = Math.ceil(totalImages / visibleCount); for (let i = 0; i < totalPages; i++) { const dot = document.createElement('div'); dot.classList.add('page-dot'); if (i === currentPage) dot.classList.add('active'); // Accessibility + Shopify empty fix dot.setAttribute('role', 'tab'); dot.setAttribute('tabindex', '0'); dot.setAttribute('aria-selected', i === currentPage ? 'true' : 'false'); dot.setAttribute('aria-label', `Go to slide group ${i + 1}`); dot.dataset.page = i; // Add visible text for Shopify, hide visually dot.innerHTML = ``; dot.addEventListener('click', () => { scrollToPage(i); dot.focus(); }); dot.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); scrollToPage(i); } }); pageDots.push(dot); pagination.appendChild(dot); } } function scrollToPage(pageIndex) { const visibleCount = getVisibleCount(); const image = track.querySelector('img'); const imgWidth = image.offsetWidth; const gap = 16; const offset = pageIndex * (imgWidth * visibleCount + gap * (visibleCount - 1)); track.style.transform = `translateX(-${offset}px)`; pageDots.forEach((dot, i) => { dot.classList.toggle('active', i === pageIndex); dot.setAttribute('aria-selected', i === pageIndex ? 'true' : 'false'); }); currentPage = pageIndex; } function initializeCarousel() { buildPagination(); scrollToPage(currentPage); } window.addEventListener('load', initializeCarousel); window.addEventListener('resize', () => { currentPage = 0; initializeCarousel(); }); pagination.addEventListener('keydown', (e) => { const isLeft = e.key === 'ArrowLeft'; const isRight = e.key === 'ArrowRight'; if (!isLeft && !isRight) return; let newIndex = currentPage + (isRight ? 1 : -1); if (newIndex < 0) newIndex = pageDots.length - 1; if (newIndex >= pageDots.length) newIndex = 0; scrollToPage(newIndex); pageDots[newIndex].focus(); }); // Youtube Lightbox document.addEventListener("DOMContentLoaded", () => { const overlay = document.createElement("div"); overlay.id = "lightbox-overlay"; overlay.innerHTML = ` `; document.body.appendChild(overlay); const videoFrame = document.getElementById("lightbox-video"); const closeBtn = document.getElementById("lightbox-close"); function extractVideoSource(url) { try { const parsedUrl = new URL(url); if (parsedUrl.hostname.includes('youtu.be') || parsedUrl.hostname.includes('youtube.com')) { const videoId = parsedUrl.hostname.includes('youtu.be') ? parsedUrl.pathname.slice(1) : parsedUrl.searchParams.get('v'); return { platform: 'youtube', embedUrl: `https://www.youtube.com/embed/${videoId}?autoplay=1` }; } else if (parsedUrl.hostname.includes('drive.google.com')) { const match = url.match(/\/d\/(.*?)\//); if (match && match[1]) { return { platform: 'gdrive', embedUrl: `https://drive.google.com/file/d/${match[1]}/preview` }; } } } catch (err) { console.error("Invalid video URL:", url); } return null; } function openLightbox(videoUrl) { const source = extractVideoSource(videoUrl); if (source) { videoFrame.src = source.embedUrl; overlay.style.display = "flex"; } else { console.warn("Unsupported or invalid video URL:", videoUrl); } } function closeLightbox() { videoFrame.src = ""; overlay.style.display = "none"; } document.querySelectorAll(".youtube-lightbox").forEach(link => { link.addEventListener("click", e => { e.preventDefault(); const url = link.getAttribute("data-youtube"); if (url) { openLightbox(url); } else { console.warn("Missing data-youtube attribute:", link); } }); }); closeBtn.addEventListener("click", closeLightbox); overlay.addEventListener("click", e => { if (e.target === overlay) closeLightbox(); }); });

Contact Us

Contact form