alvertra.pro
Courses Catalog
Search, filter, and compare courses. Click a card for full details.
alvertra.pro
'
: '';
}
}
function initHeaderFooterInteractions(){
document.body.addEventListener('click', (e)=>{
if(e.target.matches('[data-open]')){
e.preventDefault();
const sel = e.target.getAttribute('data-open');
const dlg = document.querySelector(sel);
if(dlg) dlg.showModal();
}
if(e.target.matches('[data-close]')){
e.preventDefault();
e.target.closest('dialog')?.close();
}
if(e.target.matches('[data-theme-toggle]')){
e.preventDefault();
const current = localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
const next = current === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', next);
applyTheme(next);
}
});
const cookieConsent = localStorage.getItem('cookie-consent');
if(!cookieConsent) document.getElementById('cookieConsent')?.showModal();
document.getElementById('acceptCookies')?.addEventListener('click', ()=>{
localStorage.setItem('cookie-consent','1');
document.getElementById('cookieConsent')?.close();
});
document.getElementById('declineCookies')?.addEventListener('click', ()=> document.getElementById('cookieConsent')?.close());
document.body.addEventListener('submit', (e)=>{
if(e.target.matches('form')){
e.preventDefault();
const d=document.createElement('dialog');
d.className='backdrop:bg-black/40 rounded-lg w-full max-w-md';
d.innerHTML='Form Sent
Captured locally for demo.
Loading courses…
';
try{
const res = await fetch('./catalog.json', {cache:'no-cache'});
if(!res.ok) throw new Error('Failed to load catalog');
const data = await res.json();
if(!Array.isArray(data)) throw new Error('Invalid data');
state.items = data;
filterItems();
render();
}catch(e){
els.grid.innerHTML = 'Unable to load catalog. Please try again later.
';
console.error(e);
}
}
function initElements(){
els.grid = $('#grid');
els.count = $('#countInfo');
els.prev = $('#prev');
els.next = $('#next');
els.page = $('#page');
els.tpl = $('#cardTpl');
els.ld = $('#ldList');
els.inputs = {
q: $('#q'),
category: $('#category'),
difficulty: $('#difficulty'),
format: $('#format'),
province: $('#province'),
priceMax: $('#priceMax')
};
els.modal = {
root: $('#detailsModal'),
title: $('#dTitle'),
desc: $('#dDesc'),
syllabus: $('#dSyllabus'),
meta: $('#dMeta'),
img: $('#dImg'),
price: $('#dPrice'),
fav: $('#dFav'),
cart: $('#dCart')
};
// Adaptive perPage depending on viewport width
const w = window.innerWidth;
if(w>=1024) state.perPage = 9;
else if(w>=640) state.perPage = 6;
else state.perPage = 6;
}
function init(){
initElements();
readURL();
bindControls();
load();
updateHeaderCounts();
// Open modal from hash if present after load
const hashId = location.hash.replace('#','');
if(hashId){ const obs = new MutationObserver(()=>{ if(state.items.length){ openDetails(hashId); obs.disconnect(); } }); obs.observe(document.body, {subtree:true, childList:true}); }
}
return { init };
})();
(async function bootstrap(){
const preferred = localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
applyTheme(preferred);
await injectPartial('header', './header.html');
await injectPartial('footer', './footer.html');
initHeaderFooterInteractions();
App.init();
})();
