index.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Code Playground Lite — код на смартфоне</title>
<!--
  Лёгкая кодовая площадка для слабых смартфонов.
  - Редактор HTML/CSS/JS с мгновенным запуском прямо в браузере
  - Работает офлайн, без серверов, без установки
  - Минимальный вес
-->
<style>
:root{--bg:#0f1115;--panel:#171a21;--accent:#4f8cff;--text:#e6e9ef;--muted:#8b93a3;--ok:#2ecc71;--err:#e74c3c}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",monospace,Roboto;background:var(--bg);color:var(--text);display:flex;flex-direction:column;height:100dvh;overflow:hidden;font-size:14px}
header{padding:9px 12px;background:var(--panel);display:flex;align-items:center;gap:9px;border-bottom:1px solid #ffffff12;flex-shrink:0}
header .logo{width:28px;height:28px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
header h1{font-size:14px;font-weight:600}
button.run{margin-left:auto;background:var(--ok);border:none;color:#052e16;font-weight:700;padding:7px 16px;border-radius:9px;font-size:13px;cursor:pointer}
button.run:active{transform:scale(.96)}
.tabs{display:flex;gap:2px;background:var(--panel);padding:6px 12px 0;flex-shrink:0}
.tab{background:none;border:none;color:var(--muted);padding:8px 14px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;font-family:inherit}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}
.tab:disabled{opacity:.4;cursor:not-allowed}
#editor-wrap{flex:1;position:relative;min-height:0}
textarea#code{width:100%;height:100%;background:#0a0c10;color:#c9d1d9;border:none;resize:none;padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;white-space:pre;overflow:auto;tab-size:2}
#result{display:none;flex:1;background:#fff;color:#000;min-height:0}
#result.show{display:block}
#console{flex-shrink:0;background:#0a0c10;color:#9faeff;font-family:ui-monospace,monospace;font-size:12px;padding:8px 12px;max-height:38%;overflow:auto;border-top:1px solid #ffffff14;white-space:pre-wrap}
#console .err{color:var(--err)}
#controls-bar{flex-shrink:0;display:flex;gap:6px;padding:8px 12px;background:var(--panel);border-top:1px solid #ffffff12;flex-wrap:wrap}
#controls-bar button{background:#ffffff12;border:1px solid #ffffff16;color:var(--text);padding:6px 11px;border-radius:8px;font-size:12px;cursor:pointer;font-family:inherit}
#controls-bar button:active{background:#ffffff24}
</style>
</head>
<body>
<header>
  <div class="logo">&lt;/&gt;</div>
  <h1>Code Playground Lite</h1>
  <button class="run" id="run">▶ Запустить</button>
</header>

<div class="tabs">
  <button class="tab active" data-mode="html">HTML</button>
  <button class="tab" data-mode="js" disabled>REPL JS</button>
</div>

<div id="editor-wrap">
  <textarea id="code" spellcheck="false" placeholder="&lt;h1&gt;Привет!&lt;/h1&gt;&#10;&lt;p&gt;Это бесплатная тестовая площадка для кода.&#10;Пиши HTML, CSS и JS здесь — результат появится ниже.&#10;&#10;&lt;button onclick=&quot;say()&quot;&gt;Нажми&lt;/button&gt;&#10;&lt;script&gt;&#10;function say(){ alert('Привет из кода!') }&#10;&lt;/script&gt;"></textarea>
  <iframe id="result" sandbox="allow-scripts allow-forms allow-modals"></iframe>
</div>

<div id="console"></div>
<div id="controls-bar">
  <button id="example">Пример</button>
  <button id="clear">Очистить</button>
  <button id="reset">Сбросить</button>
</div>

<script>
(function(){
  const code=document.getElementById('code');
  const result=document.getElementById('result');
  const con=document.getElementById('console');
  const runBtn=document.getElementById('run');

  const EXAMPLES={
    html:`<style>
  body{font-family:sans-serif;text-align:center;padding:30px;background:#f0f4f8}
  h1{color:#1f6feb}
  button{font-size:20px;padding:12px 24px;border:none;border-radius:12px;background:#1f6feb;color:#fff;cursor:pointer}
</style>
<h1>Привет, мир! 👋</h1>
<p>Твой код работает прямо здесь, на этом телефоне.</p>
<button onclick="alert('Отлично! 🎉')">Нажми меня</button>
<hr>
<canvas id="c" width="200" height="80" style="border:1px solid #ccc"></canvas>
<script>
  var c=document.getElementById('c'),x=c.getContext('2d');
  x.fillStyle='#1f6feb';x.fillRect(10,10,180,60);
  x.fillStyle='#fff';
  x.font='14px sans-serif';x.fillText('Canvas OK',50,45);
<\/script>`
  };

  function log(t,cls){const d=document.createElement('div');d.textContent=t;if(cls)d.className=cls;con.appendChild(d);con.scrollTop=con.scrollHeight}
  function run(){
    result.classList.add('show');
    const src=code.value;
    result.srcdoc=src;
    con.innerHTML='';
    log('▶ Запуск...');
    result.onload=()=>log('✓ Готово (страница отрисована внизу)','');
  }
  runBtn.addEventListener('click',run);

  document.getElementById('example').addEventListener('click',()=>{code.value=EXAMPLES.html;run()});
  document.getElementById('clear').addEventListener('click',()=>con.innerHTML='');
  document.getElementById('reset').addEventListener('click',()=>{code.value=EXAMPLES.html});
  code.focus();
})();
</script>
</body>
</html>