<div style="max-width:100%; margin:20px auto; border:1px solid #4a2c8a; border-radius:15px; overflow:hidden; box-shadow:0 8px 25px rgba(74,44,138,0.3); background:#1a1229; font-family:'Segoe UI',Arial,sans-serif;">
<!-- Header -->
<div style="background:linear-gradient(135deg, #4a2c8a, #2e1a5e); padding:14px 18px; color:white; display:flex; align-items:center; justify-content:space-between;">
<div style="font-weight:bold; font-size:16px;">✨ Live HTML/CSS/JS Editor</div>
<button onclick="runCode()" style="background:#00d4aa; color:#000; border:none; padding:8px 20px; border-radius:25px; font-weight:bold; cursor:pointer;">Run ▶ Live Preview</button>
</div>
<!-- Tabs -->
<div style="display:flex; background:#2a1f4a; border-bottom:1px solid #4a2c8a;">
<button onclick="switchTab(0)" class="tab active" style="flex:1; padding:12px; background:transparent; border:none; color:#fff; cursor:pointer;">HTML</button>
<button onclick="switchTab(1)" class="tab" style="flex:1; padding:12px; background:transparent; border:none; color:#fff; cursor:pointer;">CSS</button>
<button onclick="switchTab(2)" class="tab" style="flex:1; padding:12px; background:transparent; border:none; color:#fff; cursor:pointer;">JavaScript</button>
</div>
<!-- Code Area -->
<div style="display:flex; flex-direction:column; height:460px; background:#1a1229;">
<textarea id="htmlCode" spellcheck="false" style="flex:1; background:#120c1f; color:#a0d8ff; border:none; padding:15px; font-family:'Consolas',monospace; font-size:14px; resize:none;"><div style="text-align:center; padding:40px;">
<h1 style="color:#ffd700;">ॐ नमः शिवाय</h1>
<p>Welcome to Padma Shukla Blog</p>
</div></textarea>
<textarea id="cssCode" spellcheck="false" style="flex:1; background:#120c1f; color:#a0d8ff; border:none; padding:15px; font-family:'Consolas',monospace; font-size:14px; resize:none; display:none;">body {
background: linear-gradient(135deg, #1a1229, #2e1a5e);
color: #eee;
font-family: Arial, sans-serif;
}</textarea>
<textarea id="jsCode" spellcheck="false" style="flex:1; background:#120c1f; color:#a0d8ff; border:none; padding:15px; font-family:'Consolas',monospace; font-size:14px; resize:none; display:none;">console.log("🙏 Live Coding Gadget running on Padma Shukla Blog");</textarea>
</div>
<!-- Live Preview -->
<div style="border-top:2px solid #4a2c8a; background:#fff; height:280px; overflow:auto;">
<iframe id="previewFrame" style="width:100%; height:100%; border:none; background:white;"></iframe>
</div>
<div style="text-align:center; padding:10px; font-size:12px; color:#888; background:#2a1f4a;">
Real-time Live Update • Made for Padma Shukla Blog
</div>
</div>
<script>
let currentTab = 0;
const tabs = document.querySelectorAll('.tab');
const areas = [
document.getElementById('htmlCode'),
document.getElementById('cssCode'),
document.getElementById('jsCode')
];
function switchTab(n) {
currentTab = n;
tabs.forEach((tab, i) => tab.classList.toggle('active', i === n));
areas.forEach((area, i) => {
area.style.display = (i === n) ? 'block' : 'none';
});
}
function runCode() {
const html = document.getElementById('htmlCode').value;
const css = document.getElementById('cssCode').value;
const js = document.getElementById('jsCode').value;
const frame = document.getElementById('previewFrame');
const doc = frame.contentDocument || frame.contentWindow.document;
doc.open();
doc.write(`
<!DOCTYPE html>
<html>
<head><style>${css}</style></head>
<body>${html}<script>${js}<\/script></body>
</html>
`);
doc.close();
}
// Live Update as you type
areas.forEach(area => {
area.addEventListener('keyup', runCode);
area.addEventListener('input', runCode);
});
// Initialize
window.onload = () => {
switchTab(0);
runCode();
};
</script>
0 $type={blogger}:
Post a Comment