Welcome back
This demonstration account panel keeps your studio entrance simple while server authentication is unavailable.
Your studio table
Cart
Order review complete
This demonstration confirms your selections locally. No payment has been processed.
`;
const footerHTML = `
`;
document.querySelector('header').innerHTML = headerHTML;
document.querySelector('footer').innerHTML = footerHTML;
// tailwind script and existing header/footer scripts would run here but truncated in source; re-init minimal theme & menu & auth & cookie
const htmlEl = document.documentElement;
function applyTheme(isDark){ if(isDark){htmlEl.style.setProperty('--bg','#2F241F');htmlEl.style.setProperty('color-scheme','dark');}else{htmlEl.style.setProperty('--bg','#F6EFE3');htmlEl.style.setProperty('color-scheme','light');} }
const savedTheme = localStorage.getItem('pw_theme'); applyTheme(savedTheme==='dark');
const themeBtn = document.querySelector('[data-theme-toggle]'); if(themeBtn){themeBtn.addEventListener('click',()=>{const dark=htmlEl.style.getPropertyValue('--bg')==='#2F241F';localStorage.setItem('pw_theme',dark?'light':'dark');applyTheme(!dark);});}
// cart logic
let catalog = [];
let cart = JSON.parse(localStorage.getItem('cart')||'{}');
function updateTotal() {
let total = 0;
let weeks = 0;
Object.keys(cart).forEach(id => {
const item = catalog.find(c => c.id === id);
if(item){ total += item.price * cart[id]; weeks += (item.weeks||4) * cart[id]; }
});
document.getElementById('cart-total').innerHTML = '$' + total;
document.getElementById('week-summary').innerHTML = weeks + ' total practice weeks';
}
function renderCart() {
const container = document.getElementById('cart-items');
container.innerHTML = '';
if(Object.keys(cart).length === 0){
container.innerHTML = 'Your studio table is empty. Browse the catalog.
';
document.getElementById('week-summary').innerHTML = '0 total practice weeks';
document.getElementById('cart-total').innerHTML = '$0';
return;
}
Object.keys(cart).forEach(id => {
const item = catalog.find(c => c.id === id);
if(!item) return;
const qty = cart[id];
const row = document.createElement('div');
row.className = 'flex items-center justify-between rounded-3xl border border-[#D8C4AD] bg-[#FFF9F0] p-6 qx3m9';
row.innerHTML = `${item.title}
$${item.price} · ${item.weeks} weeks
${qty}
$${(item.price*qty)}
`;
container.appendChild(row);
});
container.querySelectorAll('[data-inc]').forEach(btn => btn.onclick = () => { cart[btn.dataset.inc]++; localStorage.setItem('cart',JSON.stringify(cart)); renderCart(); updateTotal(); });
container.querySelectorAll('[data-dec]').forEach(btn => btn.onclick = () => { if(cart[btn.dataset.dec]>1) cart[btn.dataset.dec]--; localStorage.setItem('cart',JSON.stringify(cart)); renderCart(); updateTotal(); });
container.querySelectorAll('[data-remove]').forEach(btn => btn.onclick = () => { delete cart[btn.dataset.remove]; localStorage.setItem('cart',JSON.stringify(cart)); renderCart(); updateTotal(); });
updateTotal();
}
fetch('./catalog.json').then(r=>r.json()).then(data => { catalog = data; renderCart(); }).catch(()=>{ catalog=[]; renderCart(); });
const checkoutBtn = document.getElementById('checkout');
const modal = document.getElementById('checkout-modal');
checkoutBtn.onclick = () => { modal.classList.remove('hidden'); modal.classList.add('grid'); };
document.querySelector('[data-close-checkout]').onclick = () => { modal.classList.add('hidden'); modal.classList.remove('grid'); };
modal.onclick = e => { if(e.target === modal){ modal.classList.add('hidden'); modal.classList.remove('grid'); } };
})();