Your studio basket
Cart
`;
const footerHTML = `
`;
document.querySelector('header').innerHTML = headerHTML;
document.querySelector('footer').innerHTML = footerHTML;
const themeToggle = document.querySelector('[data-theme-toggle]');
const mobileBtn = document.querySelector('[data-mobile-menu]');
const mobileNav = document.querySelector('[data-mobile-nav]');
const authLinks = document.querySelectorAll('[data-auth]');
const modal = document.querySelector('[data-auth-modal]');
const modalTitle = document.querySelector('[data-auth-title]');
const modalClose = document.querySelector('[data-modal-close]');
const cookieBanner = document.querySelector('[data-cookie-banner]');
const cookieClose = document.querySelector('[data-cookie-close]');
const consentKey = 'mystibloom-cookie-consent';
function initTheme() {
const saved = localStorage.getItem('mystibloom-theme');
if (saved === 'dark') document.documentElement.classList.add('dark');
}
function toggleTheme() {
document.documentElement.classList.toggle('dark');
localStorage.setItem('mystibloom-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
}
if (themeToggle) themeToggle.addEventListener('click', toggleTheme);
if (mobileBtn && mobileNav) mobileBtn.addEventListener('click', () => mobileNav.classList.toggle('hidden'));
if (authLinks.length && modal) {
authLinks.forEach(link => link.addEventListener('click', e => {
e.preventDefault();
if (modalTitle) modalTitle.textContent = link.dataset.auth === 'signin' ? 'Sign in to MystiBloom' : 'Create your MystiBloom account';
modal.showModal();
}));
}
if (modalClose && modal) modalClose.addEventListener('click', () => modal.close());
if (cookieBanner && cookieClose) {
if (localStorage.getItem(consentKey) === 'accepted') cookieBanner.style.display = 'none';
cookieClose.addEventListener('click', e => {
e.preventDefault();
localStorage.setItem(consentKey, 'accepted');
cookieBanner.style.display = 'none';
});
}
initTheme();
let catalog = [];
let cart = JSON.parse(localStorage.getItem('mystibloom-cart') || '{}');
async function loadCatalog() {
try {
const res = await fetch('./catalog.json');
if (res.ok) catalog = await res.json();
} catch (_) {}
if (!catalog.length) {
catalog = [
{id:1,title:"Wildflower Composition",price:245,description:"Seasonal wildflower arrangements"},
{id:2,title:"Terracotta Vessel Workshop",price:180,description:"Hand-built clay vessel techniques"},
{id:3,title:"Botanical Dye Studio",price:165,description:"Natural pigment extraction"},
{id:4,title:"Ikebana Foundations",price:210,description:"Japanese minimal floral design"}
];
}
renderCart();
}
function saveCart() {
localStorage.setItem('mystibloom-cart', JSON.stringify(cart));
}
function updateQuantity(id, delta) {
if (!cart[id]) cart[id] = 0;
cart[id] = Math.max(0, cart[id] + delta);
if (cart[id] === 0) delete cart[id];
saveCart();
renderCart();
}
function removeItem(id) {
delete cart[id];
saveCart();
renderCart();
}
function calculateTotal() {
let total = 0;
Object.keys(cart).forEach(id => {
const item = catalog.find(c => c.id == id);
if (item) total += item.price * cart[id];
});
return total;
}
function renderCart() {
const container = document.getElementById('cart-items');
const totalEl = document.getElementById('cart-total');
container.innerHTML = '';
const keys = Object.keys(cart);
if (!keys.length) {
container.innerHTML = `Your cart is empty.
Browse catalog${item.title}
$${item.price} × ${qty}
${qty}
$${line}