diff --git a/app.js b/app.js index 170396d..2c60ebe 100644 --- a/app.js +++ b/app.js @@ -20,6 +20,52 @@ if (signupEl) signupEl.textContent = text; })(); +// ── Screenshot Carousel ────────────────────────────────── +(function initCarousel() { + const carousel = document.getElementById('screenshotCarousel'); + if (!carousel) return; + + const slides = carousel.querySelectorAll('.carousel-slide'); + const dots = carousel.querySelectorAll('.carousel-dot'); + let current = 0; + let timer; + + function goTo(index) { + slides[current].classList.remove('active'); + dots[current].classList.remove('active'); + current = (index + slides.length) % slides.length; + slides[current].classList.add('active'); + dots[current].classList.add('active'); + } + + function next() { goTo(current + 1); } + function prev() { goTo(current - 1); } + + function startAuto() { + timer = setInterval(next, 4500); + } + function resetAuto() { + clearInterval(timer); + startAuto(); + } + + carousel.querySelector('.carousel-next').addEventListener('click', () => { next(); resetAuto(); }); + carousel.querySelector('.carousel-prev').addEventListener('click', () => { prev(); resetAuto(); }); + + dots.forEach(dot => { + dot.addEventListener('click', () => { + goTo(parseInt(dot.dataset.index, 10)); + resetAuto(); + }); + }); + + // Pause on hover + carousel.addEventListener('mouseenter', () => clearInterval(timer)); + carousel.addEventListener('mouseleave', startAuto); + + startAuto(); +})(); + // ── Form Handler ───────────────────────────────────────── document.addEventListener('DOMContentLoaded', () => { const form = document.getElementById('signupForm'); diff --git a/index.html b/index.html index 931f246..4375105 100644 --- a/index.html +++ b/index.html @@ -70,43 +70,33 @@ - +
-
-
- - - - LedgerIQ Dashboard +