<div style="font-family: Arial, sans-serif; max-width: 100%; margin: 20px auto; border: 1px solid #333; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.3); background: #1e1e1e; color: #eee;">
<div style="background: #2d2d2d; padding: 12px 15px; display: flex; gap: 8px; border-bottom: 1px solid #444;">
<button onclick="switchTab(0)" class="tab-btn active" style="padding: 8px 16px; background: #0e0e0e; color: #fff; border: none; border-radius: 6px; cursor: pointer;">HTML</button>
<button onclick="switchTab(1)" class="tab-btn" style="padding: 8px 16px; background: #0e0e0e; color: #fff; border: none; border-radius: 6px; cursor: pointer;">CSS</button>
<button onclick="switchTab(2)" class="tab-btn" style="padding: 8px 16px; background: #0e0e0e; color: #fff; border: none; border-radius: 6px; cursor: pointer;">JS</button>
<button onclick="runCode()" style="margin-left: auto; padding: 8px 20px; background: #00cc66; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;">Run ▶</button>
</div>
<div style="display: flex; flex-direction: column; height: 520px;">
<!-- Editors -->
<div id="editor-container" style="flex: 1; display: flex; flex-direction: column; padding: 10px; background: #1e1e1e;">
<textarea id="html" spellcheck="false" style="flex: 1; background: #252526; color: #d4d4d4; border: 1px solid #444; padding: 12px; font-family: 'Courier New', monospace; font-size: 14px; resize: none; margin-bottom: 8px;"><h1 style="color:#ffd700; text-align:center;">Namaste from Padma Shukla Blog</h1>
<p style="text-align:center;">Live Coding Gadget Demo</p></textarea>
<textarea id="css" spellcheck="false" style="flex: 1; background: #252526; color: #d4d4d4; border: 1px solid #444; padding: 12px; font-family: 'Courier New', monospace; font-size: 14px; resize: none; display: none;">body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #1a0033, #000);
color: #eee;
}</textarea>
<textarea id="js" spellcheck="false" style="flex: 1; background: #252526; color: #d4d4d4; border: 1px solid #444; padding: 12px; font-family: 'Courier New', monospace; font-size: 14px; resize: none; display: none;">console.log("Hello from the Gita blog live gadget!");</textarea>
</div>
<!-- Live Preview -->
<div style="border-top: 2px solid #444; padding: 10px; background: #fff; flex: 1.2; overflow: auto;">
<iframe id="preview" style="width: 100%; height: 100%; border: none; background: white;"></iframe>
</div>
</div>
<div style="text-align: center; padding: 8px; font-size: 12px; color: #888; background: #2d2d2d;">
Live HTML + CSS + JS Editor • Real-time Update
</div>
</div>
<script>
let currentTab = 0;
const tabs = document.querySelectorAll('.tab-btn');
const textareas = [
document.getElementById('html'),
document.getElementById('css'),
document.getElementById('js')
];
function switchTab(n) {
currentTab = n;
tabs.forEach((btn, i) => {
btn.classList.toggle('active', i === n);
});
textareas.forEach((ta, i) => {
ta.style.display = i === n ? 'block' : 'none';
});
}
function runCode() {
const html = document.getElementById('html').value;
const css = document.getElementById('css').value;
const js = document.getElementById('js').value;
const preview = document.getElementById('preview');
const doc = preview.contentDocument || preview.contentWindow.document;
doc.open();
doc.write(`
<!DOCTYPE html>
<html>
<head>
<style>${css}</style>
</head>
<body>
${html}
<script>${js}<\/script>
</body>
</html>
`);
doc.close();
}
// Auto-run on input (live update)
textareas.forEach(ta => {
ta.addEventListener('input', runCode);
});
// Initial load
window.onload = () => {
switchTab(0);
runCode();
};
</script>
0 $type={blogger}:
Post a Comment