Your professional online code editor is ready in the canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Code Editor | SOA Technology</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#0f172a;color:#fff}
header{padding:15px 20px;background:#020617;display:flex;justify-content:space-between;align-items:center}
header h1{font-size:20px}
.container{display:grid;grid-template-columns:1fr 1fr;height:90vh}
.editor-section{display:flex;flex-direction:column;padding:10px;gap:10px}
textarea{flex:1;background:#020617;color:#fff;border:1px solid #1e293b;padding:10px;border-radius:10px;resize:none}
.controls{display:flex;gap:10px}
button{padding:10px 15px;border:none;border-radius:8px;cursor:pointer;font-weight:600}
.run{background:#22c55e;color:#000}
.clear{background:#ef4444;color:#fff}
iframe{width:100%;height:100%;border:none;background:#fff}
.preview-section{position:relative}
/* Ad Placeholder */
.ad-box{position:absolute;bottom:10px;right:10px;background:#fff;color:#000;padding:10px;border-radius:10px;font-size:12px}
@media(max-width:900px){
.container{grid-template-columns:1fr}
}
</style>
</head>
<body>
<header>
<h1>💻 Online Code Editor</h1>
<div class="controls">
<button class="run" onclick="runCode()">Run ▶</button>
<button class="clear" onclick="clearCode()">Clear</button>
</div>
</header>
<div class="container">
<div class="editor-section">
<textarea id="htmlCode" placeholder="Write HTML here..."></textarea>
<textarea id="cssCode" placeholder="Write CSS here..."></textarea>
<textarea id="jsCode" placeholder="Write JavaScript here..."></textarea>
</div>
<div class="preview-section">
<iframe id="output"></iframe>
<!-- AdSense Placeholder -->
<div class="ad-box">Ad Space</div>
</div>
</div>
<script>
function runCode(){
let html=document.getElementById('htmlCode').value;
let css=document.getElementById('cssCode').value;
let js=document.getElementById('jsCode').value;
let output=document.getElementById('output');
output.srcdoc=`
<html>
<style>${css}</style>
<body>
${html}
<script>${js}<\/script>
</body>
</html>`;
// Save code
localStorage.setItem('html',html);
localStorage.setItem('css',css);
localStorage.setItem('js',js);
}
function clearCode(){
document.getElementById('htmlCode').value='';
document.getElementById('cssCode').value='';
document.getElementById('jsCode').value='';
runCode();
}
// Load saved code
window.onload=function(){
document.getElementById('htmlCode').value=localStorage.getItem('html')||'';
document.getElementById('cssCode').value=localStorage.getItem('css')||'';
document.getElementById('jsCode').value=localStorage.getItem('js')||'';
runCode();
}
// Live preview
document.querySelectorAll('textarea').forEach(el=>{
el.addEventListener('input',runCode);
});
</script>
</body>
</html>
