CodeLab Studio

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CodeLab Studio</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#090b12;color:white;font-family:Arial;height:100vh;display:flex;flex-direction:column}
header{padding:13px;background:#151a2a;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:21px;font-weight:bold}
.logo span{color:#a78bfa}
button{padding:10px 13px;border:0;border-radius:7px;background:#30374d;color:white;font-weight:bold;cursor:pointer}
.run{background:#16a34a}
.play{background:#7c3aed}
.toolbar{display:flex;gap:7px;padding:9px;background:#111522;overflow:auto}
main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr}
.editor-area,.preview-area{display:flex;flex-direction:column;min-width:0;min-height:0}
.editor-area{border-right:1px solid #333}
.head{padding:12px;background:#171d2e;color:#bbb;font-size:13px}
.tabs{display:flex;gap:5px}
.tab.active{background:#8b5cf6}
textarea{flex:1;width:100%;resize:none;background:#0c101b;color:#d9d1ff;border:0;outline:none;padding:15px;font:14px/1.6 monospace;white-space:pre;overflow:auto}
iframe{flex:1;width:100%;border:0;background:white}
.status{padding:9px;background:#151a2a;color:#aaa;font-size:12px}
@media(max-width:650px){main{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}
</style>
</head>
<body>
<header>
<div class="logo">💻 Code<span>Lab</span></div>
<div style="display:flex;gap:6px">
<button class="run" onclick="runCode()">▶ Run</button>
<button class="play" onclick="playGame()">🎮 Play</button>
</div>
</header>

<div class="toolbar">
<div class="tabs">
<button class="tab active" onclick="changeTab('html',this)">HTML</button>
<button class="tab" onclick="changeTab('css',this)">CSS</button>
<button class="tab" onclick="changeTab('js',this)">JS</button>
</div>
<button onclick="downloadCode()">⬇ Download</button>
<button onclick="resetCode()">Clear</button>
</div>

<main>
<section class="editor-area">
<div class="head"><span id="filename">index.html</span></div>
<textarea id="editor" spellcheck="false" placeholder="Write your code here..."></textarea>
</section>
<section class="preview-area" id="previewArea">
<div class="head">🌐 Game / Website Preview</div>
<iframe id="preview" sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock" allow="fullscreen; autoplay"></iframe>
</section>
</main>

<div class="status" id="status">Ready • CodeLab Studio</div>

<script>
let code={html:'',css:'',js:''};
let current='html';
const editor=document.getElementById('editor');
const preview=document.getElementById('preview');

function saveCurrent(){
code[current]=editor.value;
}

function changeTab(tab,btn){
saveCurrent();
current=tab;
editor.value=code[tab];
document.querySelectorAll('.tab').forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
document.getElementById('filename').textContent=
tab==='html'?'index.html':tab==='css'?'style.css':'script.js';
}

editor.addEventListener('input',()=>{
saveCurrent();
document.getElementById('status').textContent='Editing '+current.toUpperCase();
});

editor.addEventListener('keydown',e=>{
if(e.key==='Tab'){
e.preventDefault();
const a=editor.selectionStart,b=editor.selectionEnd;
editor.setRangeText('  ',a,b,'end');
saveCurrent();
}
});

function buildPage(){
saveCurrent();
let html=code.html;

if(!html.trim())html='<!DOCTYPE html><html><head></head><body></body></html>';

const style='<style>'+code.css+'</style>';
const script='<script>'+code.js.replace(/<\/script/gi,'<\\/script')+'<\/script>';

if(/<\/head>/i.test(html)){
html=html.replace(/<\/head>/i,style+'</head>');
}else{
html=style+html;
}

if(/<\/body>/i.test(html)){
html=html.replace(/<\/body>/i,script+'</body>');
}else{
html+=script;
}
return html;
}

function runCode(){
try{
preview.srcdoc=buildPage();
document.getElementById('status').textContent='✓ Game / Website launched!';
}catch(e){
document.getElementById('status').textContent='Error: '+e.message;
}
}

function playGame(){
runCode();
const area=document.getElementById('previewArea');
if(area.requestFullscreen){
area.requestFullscreen().catch(()=>{});
}
}

function resetCode(){
if(!confirm('Delete all code?'))return;
code={html:'',css:'',js:''};
editor.value='';
preview.srcdoc='';
document.getElementById('status').textContent='New project created';
}

function downloadCode(){
const blob=new Blob([buildPage()],{type:'text/html'});
const url=URL.createObjectURL(blob);
const a=document.createElement('a');
a.href=url;
a.download='my-game.html';
a.click();
setTimeout(()=>URL.revokeObjectURL(url),1000);
}
</script>
</body>
</html>