ClearScene Atelier

Studio folio

A considered selection.

`; const footerHTML = ``; document.getElementById('site-header').innerHTML = headerHTML; document.getElementById('site-footer').innerHTML = footerHTML; let data = []; let cart = JSON.parse(localStorage.getItem('clearSceneCart') || '{}'); const itemsEl = document.getElementById('cart-items'); function applyTheme() { const theme = localStorage.getItem('clearSceneTheme') || 'dark'; if (theme === 'light') { document.documentElement.style.setProperty('--tw-bg-opacity', '1'); document.body.className = 'bg-slate-100 text-slate-950'; } else { document.body.className = 'bg-slate-950 text-slate-100'; } } function initThemeToggle() { const btn = document.getElementById('theme-toggle'); if (!btn) return; btn.addEventListener('click', () => { const current = localStorage.getItem('clearSceneTheme') || 'dark'; const next = current === 'dark' ? 'light' : 'dark'; localStorage.setItem('clearSceneTheme', next); applyTheme(); }); } function initMobileNav() { const toggle = document.getElementById('mobile-menu-toggle'); const mobile = document.getElementById('mobile-navigation'); if (toggle && mobile) { toggle.addEventListener('click', () => mobile.classList.toggle('hidden')); } } function initModals() { document.querySelectorAll('[data-modal-open]').forEach(b => { b.addEventListener('click', () => { const m = document.getElementById(b.dataset.modalOpen); if (m) m.classList.replace('hidden', 'flex'); }); }); document.querySelectorAll('[data-modal-close]').forEach(b => { b.addEventListener('click', () => { const m = document.getElementById(b.dataset.modalClose); if (m) m.classList.replace('flex', 'hidden'); }); }); } function initCookieBanner() { const banner = document.getElementById('cookie-banner'); if (!banner) return; if (localStorage.getItem('clearSceneCookies') === 'accepted') { banner.remove(); } else { const close = document.getElementById('cookie-close'); if (close) { close.addEventListener('click', () => { localStorage.setItem('clearSceneCookies', 'accepted'); banner.remove(); }); } } } function render() { let total = 0; const chosen = data.filter(p => cart[p.id] && cart[p.id] > 0); if (chosen.length === 0) { itemsEl.innerHTML = `

Your folio is empty.

Select a resource from the catalog to begin.

Browse catalog
`; } else { itemsEl.innerHTML = chosen.map(p => { const qty = cart[p.id]; total += p.price * qty; return `

${p.category}

${p.title}

$${p.price.toFixed(2)} each

${qty}
`; }).join(''); } document.getElementById('cart-total').textContent = `$${total.toFixed(2)}`; localStorage.setItem('clearSceneCart', JSON.stringify(cart)); } function initCartListeners() { itemsEl.addEventListener('click', e => { const id = e.target.dataset.plus || e.target.dataset.minus || e.target.dataset.delete; if (!id) return; if (e.target.dataset.plus) cart[id] = (cart[id] || 0) + 1; if (e.target.dataset.minus) cart[id] = Math.max(0, (cart[id] || 1) - 1); if (e.target.dataset.delete) delete cart[id]; if (cart[id] === 0) delete cart[id]; render(); }); } function initCheckout() { const btn = document.getElementById('checkout'); const modal = document.getElementById('checkout-modal'); const closeBtn = document.getElementById('close-checkout'); if (btn && modal) { btn.addEventListener('click', () => modal.classList.replace('hidden', 'flex')); } if (closeBtn && modal) { closeBtn.addEventListener('click', () => modal.classList.replace('flex', 'hidden')); } } fetch('./catalog.json') .then(r => r.json()) .then(x => { data = x; render(); }) .catch(() => { itemsEl.innerHTML = `

Unable to load catalog.

Please try again later.

`; }); applyTheme(); initThemeToggle(); initMobileNav(); initModals(); initCookieBanner(); initCartListeners(); initCheckout();