Your studio basket
Cart
Review your selected learning paths. This demo stores choices locally and does not submit payment.
Browse the catalog and add courses to begin building your plan.
Go to catalog
`;
var loginBtn = header.querySelector('#login-open');
var registerBtn = header.querySelector('#register-open');
var authModal = header.querySelector('#auth-modal');
var authClose = header.querySelector('#auth-close');
var themeBtn = header.querySelector('#theme-toggle');
function toggleTheme() {
document.documentElement.classList.toggle('dark');
localStorage.setItem('radiantTheme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
}
if (localStorage.getItem('radiantTheme') === 'dark') document.documentElement.classList.add('dark');
themeBtn.addEventListener('click', toggleTheme);
function openAuth(title) { authModal.querySelector('#auth-title').textContent = title; authModal.showModal(); }
loginBtn.addEventListener('click', function() { openAuth('Log in to Radiant Stitch'); });
registerBtn.addEventListener('click', function() { openAuth('Join Radiant Stitch'); });
authClose.addEventListener('click', function() { authModal.close(); });
var cookieBanner = footer.querySelector('#cookie-banner');
var cookieClose = footer.querySelector('#cookie-close');
if (localStorage.getItem('radiantStitchCookies') === 'accepted') cookieBanner.style.display = 'none';
cookieClose.addEventListener('click', function() { localStorage.setItem('radiantStitchCookies', 'accepted'); cookieBanner.style.display = 'none'; });
var itemsContainer = document.getElementById('cart-items');
var emptyState = document.getElementById('empty-state');
var summary = document.getElementById('summary');
var totalEl = document.getElementById('cart-total');
var checkoutOpen = document.getElementById('checkout-open');
var checkoutModal = document.getElementById('checkout-modal');
var checkoutClose = document.getElementById('checkout-close');
var cart = JSON.parse(localStorage.getItem('radiantStitchCart') || '{}');
function saveCart() { localStorage.setItem('radiantStitchCart', JSON.stringify(cart)); }
function updateTotal(catalog) {
var total = 0;
Object.keys(cart).forEach(function(id) {
var course = catalog.find(function(c) { return c.id === id; });
if (course) total += course.price * cart[id];
});
totalEl.textContent = '$' + total.toFixed(2);
}
function renderCart(catalog) {
itemsContainer.innerHTML = '';
var ids = Object.keys(cart);
if (ids.length === 0) {
emptyState.classList.remove('hidden');
summary.classList.add('hidden');
return;
}
emptyState.classList.add('hidden');
summary.classList.remove('hidden');
ids.forEach(function(id) {
var course = catalog.find(function(c) { return c.id === id; });
if (!course) return;
var qty = cart[id];
var row = document.createElement('div');
row.className = 'p8q3x flex flex-col md:flex-row md:items-center justify-between gap-4 rounded-3xl bg-white p-6 dark:bg-slate-900';
row.innerHTML = '' +
'';
itemsContainer.appendChild(row);
var qtyInput = row.querySelector('.qty-input');
var dec = row.querySelector('.dec-btn');
var inc = row.querySelector('.inc-btn');
var del = row.querySelector('.del-btn');
function persistQty(newQty) {
if (newQty < 1) newQty = 1;
if (newQty > 99) newQty = 99;
cart[id] = newQty;
saveCart();
renderCart(catalog);
}
qtyInput.addEventListener('change', function() { persistQty(parseInt(qtyInput.value) || 1); });
dec.addEventListener('click', function() { persistQty(cart[id] - 1); });
inc.addEventListener('click', function() { persistQty(cart[id] + 1); });
del.addEventListener('click', function() { delete cart[id]; saveCart(); renderCart(catalog); });
});
updateTotal(catalog);
}
fetch('./catalog.json').then(function(r) { return r.json(); }).then(function(catalog) {
renderCart(catalog);
checkoutOpen.addEventListener('click', function() {
checkoutModal.showModal();
Object.keys(cart).forEach(function(k) { delete cart[k]; });
saveCart();
setTimeout(function() { renderCart(catalog); }, 600);
});
}).catch(function() {
itemsContainer.innerHTML = 'Unable to load catalog. Please refresh.
';
});
checkoutClose.addEventListener('click', function() { checkoutModal.close(); });
});