`; const blob = new Blob([htmlContent], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'images-to-pdf-preview.html'; a.click(); URL.revokeObjectURL(url); showToast('HTML preview downloaded! Open it and print to PDF.', 'success'); } function resetTool() { uploadedFiles = []; jobQueue = []; activeJobId = null; queueError = ''; currentStep = 1; processingProgress = 0; processComplete = false; render(); } function showToast(message, type = 'info') { const baseSize = config.font_size || defaultConfig.font_size; const colors = { info: config.primary_color || defaultConfig.primary_color, success: '#10b981', error: '#ef4444' }; const toast = document.createElement('div'); toast.style.cssText = ` position: fixed; bottom: 20px; right: 20px; padding: 16px 24px; background-color: ${colors[type]}; color: white; border-radius: 8px; font-size: ${baseSize * 0.875}px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; animation: fadeIn 0.3s ease; `; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { toast.style.animation = 'fadeOut 0.3s ease'; setTimeout(() => toast.remove(), 300); }, 3000); } window.addEventListener('hashchange', () => { uploadedFiles = []; jobQueue = []; activeJobId = null; queueError = ''; currentStep = 1; processingProgress = 0; processComplete = false; render(); }); async function onConfigChange(newConfig) { Object.assign(config, newConfig); render(); } const element = { defaultConfig, onConfigChange, mapToCapabilities: (cfg) => ({ recolorables: [ { get: () => cfg.background_color || defaultConfig.background_color, set: (value) => { cfg.background_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ background_color: value }); } } }, { get: () => cfg.surface_color || defaultConfig.surface_color, set: (value) => { cfg.surface_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ surface_color: value }); } } }, { get: () => cfg.text_color || defaultConfig.text_color, set: (value) => { cfg.text_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ text_color: value }); } } }, { get: () => cfg.primary_color || defaultConfig.primary_color, set: (value) => { cfg.primary_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ primary_color: value }); } } }, { get: () => cfg.secondary_color || defaultConfig.secondary_color, set: (value) => { cfg.secondary_color = value; if (window.elementSdk) { window.elementSdk.setConfig({ secondary_color: value }); } } } ], borderables: [], fontEditable: { get: () => cfg.font_family || defaultConfig.font_family, set: (value) => { cfg.font_family = value; if (window.elementSdk) { window.elementSdk.setConfig({ font_family: value }); } } }, fontSizeable: { get: () => cfg.font_size || defaultConfig.font_size, set: (value) => { cfg.font_size = value; if (window.elementSdk) { window.elementSdk.setConfig({ font_size: value }); } } } }), mapToEditPanelValues: (cfg) => new Map([ ['app_name', cfg.app_name || defaultConfig.app_name], ['tagline', cfg.tagline || defaultConfig.tagline], ['privacy_banner', cfg.privacy_banner || defaultConfig.privacy_banner], ['upload_text', cfg.upload_text || defaultConfig.upload_text], ['process_button', cfg.process_button || defaultConfig.process_button], ['download_button', cfg.download_button || defaultConfig.download_button] ]) }; if (window.elementSdk) { window.elementSdk.init(element); } render();