(function(){ function el(id){ return document.getElementById(id); } var CATS = [ { n: 1, cards: 4, cur: 0 }, { n: 2, cards: 4, cur: 0 } ]; var activeCat = 0; function cardOf(c, i){ return el('hd-card-' + CATS[c].n + '-' + (i + 1)); } function trackOf(c){ return el('hd-track-' + CATS[c].n); } function updatePos(c){ var pos = el('hd-pos-' + CATS[c].n); if (pos) pos.innerText = (CATS[c].cur + 1) + ' / ' + CATS[c].cards; var prev = el('hd-prev-' + CATS[c].n); var next = el('hd-next-' + CATS[c].n); var atFirst = CATS[c].cur === 0 && c === 0; var atLast = (CATS[c].cur + 1) === CATS[c].cards && (c + 1) === CATS.length; if (prev) prev.style.opacity = atFirst ? '0.4' : '1'; if (next) next.style.opacity = atLast ? '0.4' : '1'; } function goTo(c, i){ if (0 > i) i = 0; if (i > CATS[c].cards - 1) i = CATS[c].cards - 1; CATS[c].cur = i; var card = cardOf(c, i); var track = trackOf(c); if (card && track){ track.scrollTo({ left: card.offsetLeft - track.offsetLeft, behavior: 'smooth' }); } updatePos(c); } function syncFromScroll(c){ var track = trackOf(c); if (!track) return; var best = 0; var bestDist = 999999; var i = 0; while (CATS[c].cards > i){ var card = cardOf(c, i); if (card){ var dist = Math.abs((card.offsetLeft - track.offsetLeft) - track.scrollLeft); if (bestDist > dist){ bestDist = dist; best = i; } } i++; } CATS[c].cur = best; updatePos(c); } function toHorizontal(c){ var track = trackOf(c); if (!track) return; track.style.display = 'flex'; track.style.overflowX = 'auto'; track.style.scrollSnapType = 'x mandatory'; track.style.scrollbarWidth = 'none'; track.style.gap = '12px'; var i = 0; while (CATS[c].cards > i){ var card = cardOf(c, i); if (card){ card.style.flex = '0 0 100%'; card.style.scrollSnapAlign = 'start'; card.style.marginBottom = '0'; } i++; } } function styleTab(c, on){ var tab = el('hd-tab-' + CATS[c].n); if (!tab) return; tab.style.background = on ? '#FFD93B' : '#4A11A8'; tab.style.color = on ? '#3D0A86' : '#E6D7FB'; tab.style.borderColor = on ? '#FFD93B' : '#9B6FE0'; } function showCat(c){ activeCat = c; var i = 0; while (CATS.length > i){ var sec = el('hd-sec-' + CATS[i].n); if (sec) sec.style.display = i === c ? 'block' : 'none'; styleTab(i, i === c); i++; } goTo(c, CATS[c].cur); } function stepNext(c){ if (CATS[c].cards > CATS[c].cur + 1){ goTo(c, CATS[c].cur + 1); return; } if (CATS.length > c + 1){ CATS[c + 1].cur = 0; showCat(c + 1); } } function stepPrev(c){ if (CATS[c].cur > 0){ goTo(c, CATS[c].cur - 1); return; } if (c > 0){ CATS[c - 1].cur = CATS[c - 1].cards - 1; showCat(c - 1); } } function bindCat(c){ var tab = el('hd-tab-' + CATS[c].n); if (tab) tab.addEventListener('click', function(){ showCat(c); }); var prev = el('hd-prev-' + CATS[c].n); var next = el('hd-next-' + CATS[c].n); if (prev) prev.addEventListener('click', function(){ stepPrev(c); }); if (next) next.addEventListener('click', function(){ stepNext(c); }); var track = trackOf(c); if (track){ var timer = null; track.addEventListener('scroll', function(){ if (timer) clearTimeout(timer); timer = setTimeout(function(){ syncFromScroll(c); }, 120); }); } } function init(){ var tabs = el('hd-tabs'); if (tabs) tabs.style.display = 'block'; var c = 0; while (CATS.length > c){ var head = el('hd-head-' + CATS[c].n); if (head) head.style.display = 'none'; var nav = el('hd-nav-' + CATS[c].n); if (nav) nav.style.display = 'block'; toHorizontal(c); bindCat(c); updatePos(c); c++; } showCat(0); } if (document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); } else { init(); } })();