タイピング道場（テンプレートから）

atomic.studio/s/3729

📄 index.html コードを直接編集して「適用」でプレビューに反映

<!doctype html><html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><title>タイピング道場</title>
<style>
 html,body{margin:0;height:100%;background:#0e1525;color:#f5f9fc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
 .wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;box-sizing:border-box}
 h1{font-size:18px;margin:0;font-weight:700} .hud{font-size:14px;color:#9da9bd} .hint{font-size:12px;color:#6b7689}
 canvas{background:var(--bg,#11131f);border-radius:14px;box-shadow:0 12px 48px #0008;max-width:96vw;height:auto;touch-action:none}
 .btn{background:#6366f1;color:#fff;border:0;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer}
 #board{display:grid;gap:6px} .cell{display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:700;user-select:none;cursor:pointer}
</style></head><body><div class="wrap">
<h1 id="title">タイピング道場</h1><div class="hud" id="hud">スコア <span id="sc">0</span></div>
<div id="word" style="font-size:40px;letter-spacing:4px;font-family:monospace"></div>
<div class="hint" id="hint">お題の単語をキーボードで入力</div><button class="btn" id="restart">もう一度</button>
</div>
<script id="game-data" type="application/json">{"title": "タイピング道場", "bg": "#0b1020", "ok": "#34d399", "words": ["atom", "reuse", "studio", "game", "pixel", "retro", "score", "level", "speed", "combo"]}</script>
<script>
const DATA=JSON.parse(document.getElementById('game-data').textContent);
document.getElementById('title').textContent=DATA.title||document.title;
if(DATA.bg)document.documentElement.style.setProperty('--bg',DATA.bg);

</script></body></html>