Choose your next calm checkpoint

Each course focuses on one practical question, helping you observe clearly and decide responsibly.

View Fallows

`; const footerHTML = ``; document.querySelector("header").innerHTML = headerHTML; document.querySelector("footer").innerHTML = footerHTML; // Re-run header scripts setTimeout(() => { const nav = document.getElementById("siteNav"); const menu = document.getElementById("mobileMenuButton"); const theme = document.getElementById("themeToggle"); const modal = document.getElementById("authModal"); menu?.addEventListener("click", () => nav?.classList.toggle("hidden")); theme?.addEventListener("click", () => { document.documentElement.classList.toggle("dark"); localStorage.setItem("kcl-theme", document.documentElement.classList.contains("dark") ? "dark" : "light"); }); if (localStorage.getItem("kcl-theme") === "dark") document.documentElement.classList.add("dark"); document.querySelectorAll("[data-auth]").forEach(b => b.addEventListener("click", () => { document.getElementById("authMode").textContent = b.dataset.auth === "login" ? "Welcome back" : "Create a learning profile"; modal.classList.remove("hidden"); modal.classList.add("flex"); })); document.getElementById("closeAuth")?.addEventListener("click", () => modal.classList.add("hidden")); }, 50); // Footer scripts setTimeout(() => { const banner = document.getElementById("cookieBanner"); if (localStorage.getItem("kcl-cookies") === "true") banner?.classList.add("hidden"); document.getElementById("acceptCookies")?.addEventListener("click", () => { localStorage.setItem("kcl-cookies", "true"); banner?.classList.add("hidden"); }); }, 50); const searchInput = document.getElementById("search"); const categorySelect = document.getElementById("category"); const courseGrid = document.getElementById("courseGrid"); const pagination = document.getElementById("pagination"); const detailModal = document.getElementById("detailModal"); const detailContent = document.getElementById("detailContent"); const closeDetail = document.getElementById("closeDetail"); let follows = read("kcl-fallows", []); let cart = read("kcl-cart", {}); async function loadData() { try { const res = await fetch("./catalog.json"); state.items = await res.json(); } catch { state.items = [ {"id":"c1","title":"Reservoir Markings 101","category":"Fundamentals","level":"Beginner","duration":"25 min","price":29,"summary":"Learn to identify every marking on the coolant reservoir.","description":"A calm introduction to reservoir design and standard level indicators.","checkpoints":["Visual inspection points","Hot vs cold markings","Cap safety basics"],"format":"Self-paced video"}, {"id":"c2","title":"Safe Level Check Routine","category":"Safety","level":"Beginner","duration":"30 min","price":34,"summary":"Step-by-step process for accurate level checks.","description":"Master the gentle routine that keeps you confident every time.","checkpoints":["Engine cooldown timing","Proper eye level alignment","Wipe and recheck method"],"format":"Interactive checklist"}, {"id":"c3","title":"Seasonal Coolant Behavior","category":"Maintenance","level":"Intermediate","duration":"40 min","price":39,"summary":"Understand how temperature changes affect coolant levels.","description":"Prepare for winter and summer with knowledge of expansion properties.","checkpoints":["Cold weather contraction","Overheat expansion signs","Seasonal top-up guide"],"format":"Video + quiz"}, {"id":"c4","title":"Cap and Seal Integrity","category":"Safety","level":"Intermediate","duration":"35 min","price":32,"summary":"Inspect the pressure cap and seals with care.","description":"Ensure your system stays sealed and safe during every drive.","checkpoints":["Cap pressure test","Gasket wear signs","Replacement timing"],"format":"Video lesson"}, {"id":"c5","title":"Color and Condition Guide","category":"Fundamentals","level":"Beginner","duration":"20 min","price":27,"summary":"Recognize healthy vs degraded coolant by appearance.","description":"Develop an eye for fluid quality during routine checks.","checkpoints":["Fresh coolant color","Contamination indicators","When to schedule service"],"format":"Visual guide"}, {"id":"c6","title":"Reservoir Fill Technique","category":"Maintenance","level":"Intermediate","duration":"28 min","price":36,"summary":"Add coolant correctly without spills or air pockets.","description":"Learn the proper method for clean and effective top-ups.","checkpoints":["Correct dilution ratio","Bleed air procedure","Post-fill verification"],"format":"Video + checklist"}, {"id":"c7","title":"Warning Light Interpretation","category":"Safety","level":"Advanced","duration":"45 min","price":44,"summary":"Decode dashboard messages related to coolant.","description":"Stay calm and respond correctly to every temperature alert.","checkpoints":["Sensor behavior","Overheating protocol","Professional visit triggers"],"format":"Scenario training"}, {"id":"c8","title":"Long-Term System Health","category":"Maintenance","level":"Advanced","duration":"50 min","price":49,"summary":"Develop habits that protect your cooling system for years.","description":"Turn regular checks into lasting vehicle confidence.","checkpoints":["Annual inspection schedule","Record keeping tips","Parts lifespan awareness"],"format":"Course bundle"} ]; } const cats = [...new Set(state.items.map(i => i.category))]; cats.forEach(cat => { const opt = document.createElement("option"); opt.value = cat; opt.textContent = cat; categorySelect.appendChild(opt); }); applyFilters(); } function applyFilters() { const q = searchInput.value.toLowerCase().trim(); const cat = categorySelect.value; state.filtered = state.items.filter(item => { const matchSearch = !q || item.title.toLowerCase().includes(q) || item.summary.toLowerCase().includes(q); const matchCat = cat === "all" || item.category === cat; return matchSearch && matchCat; }); state.page = 1; renderGrid(); renderPagination(); } function renderGrid() { courseGrid.innerHTML = ""; const start = (state.page - 1) * state.size; const pageItems = state.filtered.slice(start, start + state.size); pageItems.forEach(item => { const isFollow = follows.includes(item.id); const card = document.createElement("div"); card.className = `xk9h7 rounded-3xl border border-fuchsia-200 bg-white p-6 transition hover:shadow-xl dark:bg-slate-900`; card.innerHTML = `

${item.category} ${item.level}

${item.title}

${item.summary}

${item.duration} • $${item.price}

View details

Go to cart

`; courseGrid.appendChild(card); }); // Bind events courseGrid.querySelectorAll("[data-fav]").forEach(btn => { btn.onclick = () => { const id = btn.dataset.fav; if (follows.includes(id)) { follows = follows.filter(f => f !== id); btn.classList.remove("text-fuchsia-600"); btn.classList.add("text-slate-400"); } else { follows.push(id); btn.classList.remove("text-slate-400"); btn.classList.add("text-fuchsia-600"); } write("kcl-fallows", follows); }; }); courseGrid.querySelectorAll("[data-cart]").forEach(btn => { btn.onclick = () => { const id = btn.dataset.cart; cart[id] = (cart[id] || 0) + 1; write("kcl-cart", cart); btn.textContent = "Added ✓"; setTimeout(() => { btn.textContent = "Add to cart"; }, 1200); }; }); courseGrid.querySelectorAll("[data-detail]").forEach(el => { el.onclick = (e) => { e.preventDefault(); const id = el.dataset.detail; const item = state.items.find(i => i.id === id); showDetail(item); }; }); } function renderPagination() { pagination.innerHTML = ""; const totalPages = Math.ceil(state.filtered.length / state.size); for (let i = 1; i <= totalPages; i++) { const btn = document.createElement("button"); btn.className = `px-4 py-2 rounded-full text-sm font-semibold ${i === state.page ? 'bg-fuchsia-700 text-white' : 'border border-fuchsia-300'}`; btn.textContent = i; btn.onclick = () => { state.page = i; renderGrid(); renderPagination(); }; pagination.appendChild(btn); } } function showDetail(item) { detailContent.innerHTML = ` ${item.category}

${item.title}

${item.level} • ${item.duration} • $${item.price}

${item.description}

Checkpoints

• ${p}

Format: ${item.format}

`; detailModal.classList.remove("hidden"); detailModal.classList.add("flex"); detailContent.querySelector("[data-cartmodal]").onclick = () => { cart[item.id] = (cart[item.id] || 0) + 1; write("kcl-cart", cart); detailModal.classList.add("hidden"); detailModal.classList.remove("flex"); }; detailContent.querySelector("[data-favmodal]").onclick = () => { if (!follows.includes(item.id)) { follows.push(item.id); write("kcl-fallows", follows); } detailModal.classList.add("hidden"); detailModal.classList.remove("flex"); }; } closeDetail.onclick = () => { detailModal.classList.add("hidden"); detailModal.classList.remove("flex"); }; detailModal.onclick = (e) => { if (e.target === detailModal) { detailModal.classList.add("hidden"); detailModal.classList.remove("flex"); } }; searchInput.oninput = applyFilters; categorySelect.onchange = applyFilters; loadData(); })();