Fallows
Your considered next steps
Fallows keeps selected products nearby while you compare your practice priorities.
Browse the full catalog
`;
document.querySelector('header').innerHTML = headerHTML;
document.querySelector('footer').innerHTML = footerHTML;
initTheme();
initModals();
initCookieBanner();
}
function initTheme() {
const toggle = document.querySelector('[data-theme-toggle]');
const root = document.documentElement;
if (localStorage.getItem('kc-theme') === 'dark') {
root.classList.add('dark');
document.body.classList.add('bg-slate-950', 'text-slate-100');
document.body.classList.remove('bg-white', 'text-slate-900');
}
toggle.addEventListener('click', () => {
if (root.classList.contains('dark')) {
root.classList.remove('dark');
document.body.classList.remove('bg-slate-950', 'text-slate-100');
document.body.classList.add('bg-white', 'text-slate-900');
localStorage.setItem('kc-theme', 'light');
} else {
root.classList.add('dark');
document.body.classList.add('bg-slate-950', 'text-slate-100');
document.body.classList.remove('bg-white', 'text-slate-900');
localStorage.setItem('kc-theme', 'dark');
}
});
}
function initModals() {
const openLogin = document.querySelector('[data-open-login]');
const loginModal = document.querySelector('[data-login-modal]');
const openRegister = document.querySelector('[data-open-register]');
const registerModal = document.querySelector('[data-register-modal]');
const closeButtons = document.querySelectorAll('[data-close-modal]');
openLogin.addEventListener('click', () => loginModal.showModal());
openRegister.addEventListener('click', () => registerModal.showModal());
closeButtons.forEach(btn => btn.addEventListener('click', () => {
loginModal.close();
registerModal.close();
}));
document.querySelectorAll('[data-login-modal] form, [data-register-modal] form').forEach(form => {
form.addEventListener('submit', e => {
e.preventDefault();
alert('Local demo: action saved in browser only.');
form.closest('dialog').close();
});
});
}
function initCookieBanner() {
const banner = document.getElementById('cookie-banner');
const accept = banner.querySelector('[data-cookie-accept]');
if (!localStorage.getItem('kc-cookie-consent')) banner.classList.remove('hidden');
accept.addEventListener('click', () => {
banner.classList.add('hidden');
localStorage.setItem('kc-cookie-consent', '1');
});
}
function renderFallows() {
fetch('./catalog.json')
.then(r => r.json())
.then(items => {
const ids = JSON.parse(localStorage.getItem('kc-follows') || '[]');
const root = document.getElementById('fallows-list');
function draw() {
const saved = items.filter(x => ids.includes(x.id));
root.innerHTML = saved.length
? saved.map(x => `${x.category} · ${x.level}
${x.title}
${x.shortDescription}
`).join('')
: 'No products are saved yet. Visit the catalog to build a thoughtful shortlist.
';
}
draw();
root.addEventListener('click', e => {
if (e.target.dataset.remove) {
const idx = ids.indexOf(e.target.dataset.remove);
if (idx > -1) ids.splice(idx, 1);
localStorage.setItem('kc-follows', JSON.stringify(ids));
draw();
}
});
});
}
loadTemplates().then(() => renderFallows());