Golden Head

(function(){ var TOTAL = 3; var current = 0; var isDesktop = false; var runner = document.getElementById('mh-runner'); var viewport = document.getElementById('mh-viewport'); var cards = [ document.getElementById('mh-card-0'), document.getElementById('mh-card-1'), document.getElementById('mh-card-2') ]; /* ── Responsive layout ──────────────────────────── */ function mhLayout() { isDesktop = window.innerWidth >= 720; if (isDesktop) { /* Two cards side by side */ runner.style.gap = '16px'; cards[0].style.flex = '0 0 calc(50% - 8px)'; cards[1].style.flex = '0 0 calc(50% - 8px)'; cards[2].style.flex = '0 0 100%'; } else { /* One card full width */ runner.style.gap = '0px'; cards[0].style.flex = '0 0 100%'; cards[1].style.flex = '0 0 100%'; cards[2].style.flex = '0 0 100%'; } mhApplyPosition(false); /* snap without animation on resize */ } /* ── Position runner ────────────────────────────── */ function mhApplyPosition(animate) { runner.style.transition = animate ? 'transform .45s cubic-bezier(.4,0,.2,1)' : 'none'; var vw = viewport.offsetWidth; var gap = isDesktop ? 16 : 0; var offset; if (isDesktop) { /* On desktop: - step 0 → show card 0+1 side by side (offset 0) - step 1 → show card 2 full width We only have 2 "pages" on desktop, remap current: current 0 or 1 → page 0 (offset 0) current 2 → page 1 */ if (current < 2) { offset = 0; } else { /* card 2 starts after card0 + gap + card1 + gap */ offset = (vw - 8) / 2 + gap + (vw - 8) / 2 + gap; /* simplified: full viewport width + gap */ offset = vw + gap; } } else { offset = current * vw; } runner.style.transform = 'translateX(-' + offset + 'px)'; mhUpdateChrome(); } /* ── Chrome (dots / counter / buttons) ─────────── */ function mhUpdateChrome() { var dots = [ document.getElementById('mh-dot-0'), document.getElementById('mh-dot-1'), document.getElementById('mh-dot-2') ]; /* active dot = current; on desktop page 0 lights up dot-0 AND dot-1 */ for (var d = 0; d < TOTAL; d++) { var active = isDesktop ? (current < 2 ? d < 2 : d === 2) : d === current; dots[d].style.background = active ? '#E42120' : '#e2e8f0'; dots[d].style.width = (active && !isDesktop) ? '28px' : (active ? '14px' : '8px'); } /* counter */ var totalPages = isDesktop ? 2 : TOTAL; var page = isDesktop ? (current < 2 ? 1 : 2) : current + 1; document.getElementById('mh-counter').textContent = page + ' / ' + totalPages; /* prev */ var prevBtn = document.getElementById('mh-prev'); var atStart = isDesktop ? current < 2 : current === 0; prevBtn.style.opacity = atStart ? '0' : '1'; prevBtn.style.pointerEvents = atStart ? 'none' : 'auto'; /* next */ var nextBtn = document.getElementById('mh-next'); var atEnd = isDesktop ? current >= 2 : current === TOTAL - 1; nextBtn.style.opacity = atEnd ? '0' : '1'; nextBtn.style.pointerEvents = atEnd ? 'none' : 'auto'; } /* ── Navigation ─────────────────────────────────── */ window.mhGoTo = function(idx) { current = idx; mhApplyPosition(true); }; window.mhNext = function() { if (isDesktop) { if (current < 2) { current = 2; mhApplyPosition(true); } } else { if (current < TOTAL - 1) { current++; mhApplyPosition(true); } } }; window.mhPrev = function() { if (isDesktop) { if (current >= 2) { current = 0; mhApplyPosition(true); } } else { if (current > 0) { current--; mhApplyPosition(true); } } }; /* ── Touch swipe ────────────────────────────────── */ var startX = 0; viewport.addEventListener('touchstart', function(e){ startX = e.touches[0].clientX; }, {passive:true}); viewport.addEventListener('touchend', function(e){ var dx = e.changedTouches[0].clientX - startX; if (dx < -50) mhNext(); else if (dx > 50) mhPrev(); }, {passive:true}); /* ── Mouse drag ─────────────────────────────────── */ var mouseDown = false, mouseStartX = 0; viewport.addEventListener('mousedown', function(e){ mouseDown = true; mouseStartX = e.clientX; }); document.addEventListener('mouseup', function(e){ if (!mouseDown) return; mouseDown = false; var dx = e.clientX - mouseStartX; if (Math.abs(dx) > 50) { if (dx < 0) mhNext(); else mhPrev(); } }); /* ── Init ───────────────────────────────────────── */ mhLayout(); window.addEventListener('resize', mhLayout); })();