| <!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> |
| |
| |
| |
| |
| |
| |
| <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"></></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="<h1>Привет!</h1> <p>Это бесплатная тестовая площадка для кода. Пиши HTML, CSS и JS здесь — результат появится ниже. <button onclick="say()">Нажми</button> <script> function say(){ alert('Привет из кода!') } </script>"></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> |
|
|
