${html}${js}`; const frame=$('#preview'); frame.srcdoc=doc; } function clearAll(){ $('#htmlCode').value='';$('#cssCode').value='';$('#jsCode').value=''; localStorage.removeItem('gz-code-html');localStorage.removeItem('gz-code-css');localStorage.removeItem('gz-code-js'); runCode(); } function loadExample(){ $('#htmlCode').value='
    \n

    🎨 Color Palette

    \n
    \n \n
    '; $('#cssCode').value='.app { font-family: system-ui; text-align: center; padding: 20px; }\n.palette { display: flex; gap: 8px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }\n.swatch { width: 60px; height: 60px; border-radius: 12px; cursor: pointer; transition: transform 0.2s; }\n.swatch:hover { transform: scale(1.1); }\nbutton { padding: 10px 20px; border: none; border-radius: 8px; background: #333; color: #fff; font-size: 14px; cursor: pointer; }'; $('#jsCode').value='function generate() {\n const p = document.getElementById("palette");\n p.innerHTML = "";\n for (let i = 0; i < 5; i++) {\n const c = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6,"0");\n const d = document.createElement("div");\n d.className = "swatch";\n d.style.background = c;\n d.title = c;\n d.onclick = () => navigator.clipboard.writeText(c);\n p.appendChild(d);\n }\n}\ngenerate();'; runCode(); } $('#toolbar').innerHTML=``; GZ.renderToolPage({ category:'dev', titleKey:'toolTitle', descKey:'toolDesc', howToSteps:['step1','step2','step3','step4'], related:[ {icon:'🔧',href:'/dev/html-formatter.html',name:'HTML Formatter'}, {icon:'🎨',href:'/dev/css-validator.html',name:'CSS Validator'}, {icon:'⚡',href:'/dev/js-formatter.html',name:'JS Formatter'}, {icon:'📝',href:'/text/html-playground.html',name:'HTML Playground'}, ] }); runCode();