Preferences

Panel Preferences

Language

Choose language

Content auto-translates instantly.

Preferences are saved locally and apply across the app.

`; // attach root.appendChild(styleEl); root.appendChild(wrap); // set CSS vars function applyTokens(){ wrap.style.setProperty('--panelBg', t('panelBg')); wrap.style.setProperty('--border', t('border')); wrap.style.setProperty('--soft', t('soft')); wrap.style.setProperty('--softer', t('softer')); wrap.style.setProperty('--text', t('text')); wrap.style.setProperty('--textDim', t('textDim')); wrap.style.setProperty('--glow', t('glow')); } applyTokens(); const obs = new MutationObserver(applyTokens); obs.observe(html, { attributes:true, attributeFilter:['class'] }); // elements const tab = root.getElementById('tab'); const backdrop = root.getElementById('backdrop'); const closeBtn = root.getElementById('close'); const langGrid = root.getElementById('langGrid'); // build languages const langs = [ { code: 'en', label: 'English', svg: Flag.en }, { code: 'de', label: 'Deutsch', svg: Flag.de }, { code: 'fr', label: 'Français', svg: Flag.fr }, { code: 'it', label: 'Italiano', svg: Flag.it }, { code: 'es', label: 'Español', svg: Flag.es }, ]; langGrid.innerHTML = langs.map(l => ` ` ).join(''); // open/close let shown = false; const setShown = (v) => { shown = v; if (shown) wrap.classList.add('shown'); else wrap.classList.remove('shown'); backdrop.style.pointerEvents = shown ? 'auto' : 'none'; }; tab.addEventListener('click', () => setShown(!shown)); backdrop.addEventListener('click', () => setShown(false)); closeBtn.addEventListener('click', () => setShown(false)); window.addEventListener('keydown', (e) => { if (e.key === 'Escape') setShown(false); }); // state + handlers function markChoices(){ const lang = get('site_locale') || 'en'; root.querySelectorAll('[data-lang]').forEach(b => b.classList.toggle('active', b.getAttribute('data-lang') === lang)); } markChoices(); root.querySelectorAll('[data-lang]').forEach(b => b.addEventListener('click', () => { const l = b.getAttribute('data-lang') || 'en'; set('site_locale', l); window.dispatchEvent(new CustomEvent('locale:changed', { detail: { locale: l }})); try { sessionStorage.clear(); } catch {} markChoices(); })); })();

Step 1 — Load