HTML Online Editor | Glassmorphism UI
`;
const iframe = document.getElementById("outputFrame");
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write(combinedCode);
iframeDoc.close();
}
// Beautify active tab
function beautifyCode() {
const textarea = document.getElementById(`${currentTab}-code`);
const code = textarea.value;
if (code.trim() !== "") {
let beautified = "";
const options = { indent_size: 4, wrap_line_length: 0, preserve_newlines: true };
if (currentTab === 'html') beautified = html_beautify(code, options);
else if (currentTab === 'css') beautified = css_beautify(code, options);
else if (currentTab === 'js') beautified = js_beautify(code, options);
textarea.value = beautified;
updateLineNumbers(currentTab);
runCode();
}
}
// Copy Code to Clipboard
function copyCode() {
const textarea = document.getElementById(`${currentTab}-code`);
if (!textarea.value) return;
textarea.select();
textarea.setSelectionRange(0, 99999);
document.execCommand("copy");
window.getSelection().removeAllRanges();
const copyBtn = document.getElementById("copyBtn");
const originalText = copyBtn.innerText;
copyBtn.innerText = "Copied!";
copyBtn.style.backgroundColor = "#d4edda";
copyBtn.style.color = "#155724";
setTimeout(() => {
copyBtn.innerText = originalText;
copyBtn.style.backgroundColor = "";
copyBtn.style.color = "";
}, 2000);
}
// Initial setup on load
window.onload = () => {
tabs.forEach(tab => updateLineNumbers(tab));
runCode();
};
