Editor 3-em-1: HTML + CSS + JS → Prévia + Copiar Unificado
O código unido gera um documento com o HTML fornecido + <style> (CSS) + <script> (JS) em ordem.
Resultado unido (somente visualização)
— isto é o que o botão “Copiar código unido” envia para a sua área de transferência.
',
'',
''
].join('\n');
return doc;
}
function updatePreview(){
const doc = buildUnified();
// Usa srcdoc para atualizar a prévia
preview.srcdoc = doc;
}
function showCombined(){
const doc = buildUnified();
combinedWrap.style.display = 'block';
combinedOutput.value = doc;
combinedOutput.scrollTop = 0;
}
async function copyCombined(){
const doc = buildUnified();
try{
await navigator.clipboard.writeText(doc);
copyStatus.textContent = 'Código unido copiado.';
setTimeout(()=> copyStatus.textContent = '', 2000);
}catch(e){
// Fallback: seleciona o textarea visível
showCombined();
combinedOutput.focus();
combinedOutput.select();
const ok = document.execCommand('copy');
copyStatus.textContent = ok ? 'Código unido copiado.' : 'Falha ao copiar. Copie manualmente do campo.';
setTimeout(()=> copyStatus.textContent = '', 2500);
}
}
function downloadCombined(){
const doc = buildUnified();
const blob = new Blob([doc], {type:'text/html;charset=utf-8'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'codigo-unido.html';
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
}
function clearAll(){
if(!confirm('Limpar todos os campos?')) return;
htmlInput.value = '';
cssInput.value = '';
jsInput.value = '';
saveLS();
updatePreview();
combinedWrap.style.display = 'none';
combinedOutput.value = '';
}
// Bind
btnPreview.addEventListener('click', updatePreview);
btnCopyCombined.addEventListener('click', copyCombined);
btnShowCombined.addEventListener('click', showCombined);
btnDownload.addEventListener('click', downloadCombined);
btnClear.addEventListener('click', clearAll);
// Prévia inicial
updatePreview();
})();