7 languages · live preview · zero server · lifetime safe
⏺ Output / Preview
✨ Select a language, write code, then press Run Code. For HTML/CSS/JS you’ll see a live preview. For other languages, use copy.
`;// create or reuse iframe
let iframe = document.querySelector('.ugcl-dynamic-iframe');
if (!iframe) {
iframe = document.createElement('iframe');
iframe.className = 'ugcl-output-frame ugcl-dynamic-iframe';
ugclOutputDiv.innerHTML = ''; // clear any static content
ugclOutputDiv.appendChild(iframe);
} else {
ugclOutputDiv.innerHTML = ''; // clear and re-append
ugclOutputDiv.appendChild(iframe);
}// srcdoc CSP‑friendly, no external calls
try {
iframe.srcdoc = fullDocument;
ugclOutputHeader.innerText = '⏺ Output / Preview [ LIVE WEB ]';
} catch (e) {
// fallback for very old browsers – write directly
iframe.contentDocument.open();
iframe.contentDocument.write(fullDocument);
iframe.contentDocument.close();
}
} else {
// ---- NON‑WEB LANGUAGES: show informative message ----
ugclOutputDiv.innerHTML = `
⚠️ Client‑side execution not available
You wrote ${ugclActiveLang.toUpperCase()} code.
Browsers cannot run PHP, Python, Java, or SQL directly.
Use the 📋 Copy Code button to paste and run in your local environment.
`;
ugclOutputHeader.innerText = '⏺ Output / Preview [ ' + ugclActiveLang.toUpperCase() + ' ]';
}
}// ---------- COPY code to clipboard ----------
function ugclCopyAction() {
ugclSaveCurrentCode();
const textToCopy = ugclEditor.value;if (!textToCopy.trim()) {
alert('Editor is empty — nothing to copy.');
return;
}if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(textToCopy).then(() => {
// brief visual feedback (no console)
const originalText = ugclCopy.innerHTML;
ugclCopy.innerHTML = '✅ Copied!';
setTimeout(() => { ugclCopy.innerHTML = originalText; }, 1200);
}).catch(() => {
fallbackCopy(textToCopy);
});
} else {
fallbackCopy(textToCopy);
}function fallbackCopy(text) {
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert('Code copied (fallback method).');
}
}// ---------- CLEAR current editor and state ----------
function ugclClearAction() {
ugclSaveCurrentCode(); // save (though we are going to clear it)
ugclState[ugclActiveLang] = ''; // reset state
ugclEditor.value = ''; // clear textarea
ugclOutputDiv.innerHTML = `
✏️ Editor cleared. Start writing new ${ugclActiveLang.toUpperCase()} code.
`;
ugclOutputHeader.innerText = '⏺ Output / Preview [ cleared ]';
}// ---------- attach event listeners (pure CSP‑safe, no inline JS) ----------
document.addEventListener('DOMContentLoaded', function() {
// --- populate editor from initial state (empty) ---
ugclLoadEditorFromState();
ugclOutputHeader.innerText = '⏺ Output / Preview [ HTML ]';// --- tab switching ---
ugclTabs.forEach(tab => {
tab.addEventListener('click', function(e) {
const lang = this.dataset.lang;
ugclSwitchLanguage(lang);
});
});// --- editor input → live save to state ---
ugclEditor.addEventListener('input', function() {
ugclState[ugclActiveLang] = ugclEditor.value;
});// --- run button ---
ugclRun.addEventListener('click', ugclRunAction);// --- copy button ---
ugclCopy.addEventListener('click', ugclCopyAction);// --- clear button ---
ugclClear.addEventListener('click', ugclClearAction);
});})();