No saved templates.

'; return; } templates.forEach((template, index) => { const div = document.createElement('div'); div.className = "flex justify-between items-center bg-white p-3 rounded-md"; div.innerHTML = ` ${escapeHTML(template.name)} `; ui.templateList.appendChild(div); }); } // --- Event Listeners --- // Auto-update canvas when any input changes Object.values(ui.controls).forEach(control => { control.addEventListener('input', () => { // Update slider value displays if (control.type === 'range') { const valDisplay = document.getElementById(`${control.id}-val`); if(valDisplay) valDisplay.textContent = control.value; } drawCanvas(); }); }); ui.controls.logoUpload.addEventListener('change', handleLogoUpload); // Download buttons ui.downloadPngBtn.addEventListener('click', downloadPNG); ui.downloadPdfBtn.addEventListener('click', downloadPDF); // Tab switching ui.tabButtons.forEach(button => { button.addEventListener('click', () => { const targetTab = button.dataset.tab; ui.tabButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); ui.tabContents.forEach(content => { content.classList.toggle('active', content.id === `pfm-tab-${targetTab}`); }); }); }); // Nav buttons ui.nextTabBtn.addEventListener('click', () => { ui.tabButtons.forEach((btn, i) => { if (btn.classList.contains('active') && i + 1 < ui.tabButtons.length) { ui.tabButtons[i + 1].click(); } }); }); ui.prevTabBtn.addEventListener('click', () => { ui.tabButtons.forEach((btn, i) => { if (btn.classList.contains('active') && i > 0) { ui.tabButtons[i - 1].click(); } }); }); // Template Listeners ui.saveTemplateForm.addEventListener('submit', (e) => { e.preventDefault(); const name = ui.templateNameInput.value.trim(); if (!name) return; readState(); templates.push({ name: name, settings: { ...state } }); saveTemplates(); renderTemplateList(); ui.templateNameInput.value = ''; }); ui.templateList.addEventListener('click', (e) => { if (e.target.tagName !== 'BUTTON') return; const index = e.target.dataset.index; if (e.target.textContent === 'Load') { loadState(templates[index].settings); drawCanvas(); // Switch to dashboard tab ui.tabButtons[0].click(); } else if (e.target.textContent === 'Delete') { templates.splice(index, 1); saveTemplates(); renderTemplateList(); } }); function escapeHTML(str) { const p = document.createElement('p'); p.textContent = str; return p.innerHTML; } // --- Initial Draw --- document.fonts.ready.then(() => { populateFonts(); loadTemplates(); drawCanvas(); }); });