Personal OS

Generate your Personal OS dashboard template in minutes.

Start with your role, goals, time zone, and focus style. This builds a structured dashboard template you can use immediately, then export as downloadable HTML or a JSON seed for Yuzool tools.

Founder / Creator / Dev / Writer Structured dashboard output Download HTML JSON import seed Runs in your browser

Structured Dashboard Template

Preview the generated Personal OS before exporting.

Ready
Exportable

Use this as a starter operating system for your work. Export HTML for a standalone template, or export JSON to reuse inside Yuzool tools and future import flows.

`; } function persistFormState() { const payload = { role: el.roleInput.value, goals: el.goalsInput.value, timezone: el.timezoneInput.value, focusType: activeFocusType }; localStorage.setItem(STORAGE_KEYS.generatorState, JSON.stringify(payload)); } function loadFormState() { const raw = localStorage.getItem(STORAGE_KEYS.generatorState); if (!raw) { applyRoleDefaults(el.roleInput.value); el.timezoneInput.value = detectTimezone(); return; } try { const data = JSON.parse(raw); if (data.role && ROLE_PRESETS[data.role]) { el.roleInput.value = data.role; } if (typeof data.goals === 'string') { el.goalsInput.value = data.goals; } el.timezoneInput.value = (typeof data.timezone === 'string' && data.timezone.trim()) ? data.timezone : detectTimezone(); setActiveFocusType(data.focusType && FOCUS_PROFILES[data.focusType] ? data.focusType : 'Deep Work', { save: false }); if (!el.goalsInput.value.trim()) { applyRoleDefaults(el.roleInput.value); } } catch (error) { applyRoleDefaults(el.roleInput.value); el.timezoneInput.value = detectTimezone(); } } function applyRoleDefaults(role) { const preset = rolePreset(role); if (!el.goalsInput.value.trim()) { el.goalsInput.value = preset.defaultGoals.join('\n'); } } function setActiveFocusType(value, options = {}) { activeFocusType = FOCUS_PROFILES[value] ? value : 'Deep Work'; Array.from(el.focusButtons.querySelectorAll('button')).forEach((button) => { button.classList.toggle('active', button.dataset.focus === activeFocusType); button.setAttribute('aria-pressed', String(button.dataset.focus === activeFocusType)); }); if (options.save !== false) { persistFormState(); } } function refreshOutput(options = {}) { currentOutput = generatePersonalOs(); renderMetaChips(currentOutput); renderPreview(currentOutput); renderJson(currentOutput); updateStatus(options.statusText || 'Generated'); persistFormState(); } function initTabs() { el.previewTab.addEventListener('click', () => setTab('preview')); el.jsonTab.addEventListener('click', () => setTab('json')); } function initEvents() { el.themeToggle.addEventListener('click', () => { const current = document.documentElement.getAttribute('data-theme'); setTheme(current === 'dark' ? 'light' : 'dark'); }); el.detectTzBtn.addEventListener('click', () => { el.timezoneInput.value = detectTimezone(); persistFormState(); showToast('Time zone detected'); }); el.focusButtons.addEventListener('click', (event) => { const btn = event.target.closest('button[data-focus]'); if (!btn) return; setActiveFocusType(btn.dataset.focus); refreshOutput({ statusText: 'Updated' }); }); el.roleInput.addEventListener('change', () => { if (!el.goalsInput.value.trim()) { applyRoleDefaults(el.roleInput.value); } refreshOutput({ statusText: 'Updated' }); }); el.goalsInput.addEventListener('input', () => { persistFormState(); }); el.timezoneInput.addEventListener('input', () => { persistFormState(); }); el.generateBtn.addEventListener('click', () => { refreshOutput({ statusText: 'Generated' }); showToast('Personal OS generated'); }); el.downloadJsonBtn.addEventListener('click', () => { if (!currentOutput) refreshOutput(); const json = JSON.stringify(currentOutput.jsonImport, null, 2); const name = `${slugify(currentOutput.profile.role)}-personal-os.json`; downloadFile(name, json, 'application/json'); showToast('JSON downloaded'); }); el.copyJsonBtn.addEventListener('click', async () => { if (!currentOutput) refreshOutput(); const json = JSON.stringify(currentOutput.jsonImport, null, 2); try { if (navigator.clipboard && navigator.clipboard.writeText) { await navigator.clipboard.writeText(json); showToast('JSON copied'); return; } } catch (error) { // Fallback below. } const area = document.createElement('textarea'); area.value = json; area.setAttribute('readonly', ''); area.style.position = 'fixed'; area.style.opacity = '0'; document.body.appendChild(area); area.select(); document.execCommand('copy'); area.remove(); showToast('JSON copied'); }); el.downloadHtmlBtn.addEventListener('click', () => { if (!currentOutput) refreshOutput(); const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'; const html = buildExportHtml(currentOutput, theme); const name = `${slugify(currentOutput.profile.role)}-personal-os-template.html`; downloadFile(name, html, 'text/html'); showToast('HTML downloaded'); }); } function initFocusButtons() { Array.from(el.focusButtons.querySelectorAll('button')).forEach((button) => { button.setAttribute('role', 'tab'); button.setAttribute('aria-pressed', String(button.classList.contains('active'))); }); } initTheme(); initFocusButtons(); loadFormState(); initTabs(); initEvents(); refreshOutput({ statusText: 'Ready' }); })();