\n \n \n
    \n \n \n \n \n
    🛠️ GameZipper
    \n

    Welcome aboard!

    \n

    Thanks for joining. Here's a sample email template you can preview and tweak.

    \n Get Started\n
    © 2026 GameZipper. All rights reserved.
    \n
    \n` }, { name: 'Form', code: `
    \n

    Sign in

    \n \n \n \n \n \n
    ` }, { name: 'Table', code: `\n \n \n \n \n \n \n \n \n \n \n
    ToolCategoryPrice
    JSON FormatterDev$0
    Color PickerColor$0
    Image CompressorImage$0
    ` }, ]; $('#examples').innerHTML = examples.map((e, i) => ``).join(''); function loadExample(i) { $('#html').value = examples[i].code; render(); } let renderTimer = null; function render() { const html = $('#html').value; const iframe = $('#preview'); const wrap = $('#iframeWrap'); // toggle sandbox based on scripts setting const allowScripts = $('#allowScripts').checked; iframe.sandbox = allowScripts ? 'allow-scripts allow-forms allow-modals allow-popups' : 'allow-forms'; // dark preview wrap.style.background = $('#darkPreview').checked ? '#1a1a1a' : '#fff'; // write content via srcdoc to keep it isolated iframe.srcdoc = html; } function setWidth(w) { const wrap = $('#iframeWrap'); if (w === 0) { wrap.style.maxWidth = 'none'; wrap.style.width = '100%'; wrap.style.margin = '0'; } else { wrap.style.maxWidth = w + 'px'; wrap.style.width = '100%'; wrap.style.margin = '0 auto'; } } document.querySelectorAll('[data-w]').forEach(b => b.addEventListener('click', () => setWidth(+b.dataset.w))); function openInNewTab() { const w = window.open('', '_blank'); w.document.open(); w.document.write($('#html').value || '

    (empty)

    '); w.document.close(); } $('#html').addEventListener('input', () => { if (!$('#autoRender').checked) return; clearTimeout(renderTimer); renderTimer = setTimeout(render, 300); }); ['allowScripts','autoRender','darkPreview'].forEach(id => $('#' + id).addEventListener('change', render)); $('#toolbar').innerHTML = ` `; $('#html').value = examples[0].code; render(); GZ.renderToolPage({ category: 'dev', titleKey: 'toolTitle', descKey: 'toolDesc', howToSteps: ['step1','step2','step3','step4'], related: [ {icon:'💻', href:'/dev/code-editor.html', name:'HTML/CSS/JS Editor'}, {icon:'📄', href:'/dev/html-minifier.html', name:'HTML Minifier'}, {icon:'📧', href:'/html-email-template.html', name:'Email Template'}, {icon:'🔣', href:'/dev/html-entities.html', name:'HTML Entities'}, ] });