HTML
CSS
Preview

    ${html}`); doc.close(); } function scheduleUpdate() { if (!autoRun) return; clearTimeout(timer); timer = setTimeout(updatePreview, 300); } function loadExample() { $('#html-editor').value = `
    \n
    \n
    GZ
    \n

    CSS Playground

    \n

    Experiment with modern CSS features live!

    \n
    \n Grid\n Flexbox\n Animation\n
    \n \n
    \n
    `; $('#css-editor').value = `.container {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);\n}\n\n.card {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 20px;\n padding: 40px;\n text-align: center;\n max-width: 380px;\n color: #fff;\n}\n\n.avatar {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n background: linear-gradient(135deg, #4ecdc4, #44b09e);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 1.2em;\n margin: 0 auto 20px;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n}\n\nh2 { margin: 0 0 8px; font-size: 1.5em; }\np { color: rgba(255,255,255,0.7); margin: 0 0 20px; }\n\n.tags { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }\n.tag {\n padding: 4px 12px;\n border-radius: 99px;\n background: rgba(78, 205, 196, 0.15);\n color: #4ecdc4;\n font-size: 0.8em;\n}\n\n.btn {\n background: linear-gradient(135deg, #4ecdc4, #44b09e);\n color: #fff;\n border: none;\n padding: 12px 28px;\n border-radius: 99px;\n font-size: 0.95em;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n.btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(78, 205, 196, 0.3);\n}`; updatePreview(); } function doClear() { $('#html-editor').value = ''; $('#css-editor').value = ''; updatePreview(); } function downloadCode() { const html = $('#html-editor').value; const css = $('#css-editor').value; const full = `\n\n\n\n\n\n \n\n${html}\n\n`; const blob = new Blob([full], { type: 'text/html' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'style.html'; a.click(); } function copyCode() { const html = $('#html-editor').value; const css = $('#css-editor').value; copyCode_full = `\n\n \n\n${html}\n\n`; copyText(copyCode_full); } $('#html-editor').addEventListener('input', scheduleUpdate); $('#css-editor').addEventListener('input', scheduleUpdate); // Tab support in textareas ['html-editor','css-editor'].forEach(id => { const el = $('#' + id); el.addEventListener('keydown', e => { if (e.key === 'Tab') { e.preventDefault(); const s = el.selectionStart, end = el.selectionEnd; el.value = el.value.substring(0, s) + ' ' + el.value.substring(end); el.selectionStart = el.selectionEnd = s + 2; scheduleUpdate(); } }); }); $('#toolbar').innerHTML = ` `; GZ.renderToolPage({ category: 'css-tools', titleKey: 'toolTitle', descKey: 'toolDesc', howToSteps: ['step1','step2','step3','step4','step5'], related: [ {icon:'🌐', href:'/text/html-playground.html', name:'HTML Playground'}, {icon:'⚡', href:'/dev/javascript-playground.html', name:'JS Playground'}, {icon:'🎨', href:'/css-tools/border-radius.html', name:'Border Radius'}, {icon:'🌈', href:'/css-tools/box-shadow.html', name:'Box Shadow'}, ] }); loadExample();