Cart

`; document.getElementById('site-header').innerHTML = headerHTML; document.getElementById('site-footer').innerHTML = footerHTML; function initTheme() { const toggle = document.getElementById('theme-toggle'); const body = document.body; if (localStorage.getItem('kes-theme') === 'dark') { body.classList.add('dark'); body.style.background = '#1a2520'; body.style.color = '#dfe8d8'; } toggle.addEventListener('click', () => { if (body.classList.contains('dark')) { body.classList.remove('dark'); body.style.background = '#f7f1e8'; body.style.color = '#29332d'; localStorage.setItem('kes-theme', 'light'); } else { body.classList.add('dark'); body.style.background = '#1a2520'; body.style.color = '#dfe8d8'; localStorage.setItem('kes-theme', 'dark'); } }); } function initMobileMenu() { const toggle = document.getElementById('mobile-menu-toggle'); const nav = document.getElementById('mobile-nav'); toggle.addEventListener('click', () => nav.classList.toggle('hidden')); } function initModals() { document.querySelectorAll('[data-modal-open]').forEach(btn => { btn.addEventListener('click', () => { const modalId = btn.getAttribute('data-modal-open'); const modal = document.getElementById(modalId); modal.classList.remove('hidden'); modal.classList.add('flex'); }); }); document.querySelectorAll('[data-modal-close]').forEach(btn => { btn.addEventListener('click', () => { btn.closest('[id$="-modal"]').classList.add('hidden'); btn.closest('[id$="-modal"]').classList.remove('flex'); }); }); document.getElementById('login-form').addEventListener('submit', e => { e.preventDefault(); alert('Welcome back. Redirecting to your learning dashboard.'); window.location.href = './catalog.html'; }); document.getElementById('register-form').addEventListener('submit', e => { e.preventDefault(); alert('Account created. Welcome to Keen Ember Studio.'); window.location.href = './catalog.html'; }); } let catalog = []; let cart = JSON.parse(localStorage.getItem('kes-cart') || '{}'); async function loadCatalog() { try { const res = await fetch('./catalog.json'); catalog = await res.json(); } catch { catalog = [ {id:1,title:"Quiet Geometry Basics",price:145,accent:"#b95f45"}, {id:2,title:"Terracotta Rhythm",price:165,accent:"#9caf88"}, {id:3,title:"Paper-to-Pixel Foundations",price:125,accent:"#b95f45"} ]; } renderCart(); } function renderCart() { const container = document.getElementById('cart-items'); const emptyState = document.getElementById('empty-state'); const summary = document.getElementById('cart-summary'); container.innerHTML = ''; const items = Object.keys(cart); if (items.length === 0) { emptyState.classList.remove('hidden'); summary.classList.add('hidden'); return; } emptyState.classList.add('hidden'); summary.classList.remove('hidden'); let total = 0; items.forEach(id => { const product = catalog.find(p => p.id == id); if (!product) return; const qty = cart[id]; const lineTotal = product.price * qty; total += lineTotal; const itemHTML = `

${product.title}

${product.category || 'Core skill'} • ${product.level || 'Beginner'}

${qty}

$${product.price}

× ${qty} = $${lineTotal}

`; container.innerHTML += itemHTML; }); document.getElementById('cart-total').textContent = '$' + total.toFixed(2); } function changeQty(id, delta) { cart[id] = (cart[id] || 0) + delta; if (cart[id] <= 0) delete cart[id]; localStorage.setItem('kes-cart', JSON.stringify(cart)); renderCart(); } function removeFromCart(id) { delete cart[id]; localStorage.setItem('kes-cart', JSON.stringify(cart)); renderCart(); } function initCheckout() { const checkoutModal = document.getElementById('checkout-modal'); const checkoutLink = document.getElementById('checkout-link'); checkoutLink.addEventListener('click', function(e) { e.preventDefault(); checkoutModal.classList.remove('hidden'); checkoutModal.classList.add('flex'); }); document.getElementById('close-checkout').addEventListener('click', () => { checkoutModal.classList.add('hidden'); checkoutModal.classList.remove('flex'); }); document.getElementById('modal-close-btn').addEventListener('click', () => { checkoutModal.classList.add('hidden'); checkoutModal.classList.remove('flex'); }); } function initCart() { initTheme(); initMobileMenu(); initModals(); initCheckout(); loadCatalog(); } window.changeQty = changeQty; window.removeFromCart = removeFromCart; window.onload = initCart;