diff options
| author | 魏曹先生 <1992414357@qq.com> | 2026-05-25 22:01:06 +0800 |
|---|---|---|
| committer | 魏曹先生 <1992414357@qq.com> | 2026-05-25 22:01:06 +0800 |
| commit | 17217317eaaf57dd5c39538c115e35ddccb8666d (patch) | |
| tree | 9f1944b847d5e9d157bbc6a8c496bf8f2e7e1d23 /docs/play/play.html | |
| parent | 979e881762a728661e72efd99bc2b35b3db8c71b (diff) | |
Restructure docs
add template and interactive tutorial, update tool runner
Diffstat (limited to 'docs/play/play.html')
| -rw-r--r-- | docs/play/play.html | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/docs/play/play.html b/docs/play/play.html new file mode 100644 index 0000000..8620908 --- /dev/null +++ b/docs/play/play.html @@ -0,0 +1,135 @@ +<!doctype html> +<html lang="zh-CN"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + + <!-- highlight.js --> + <link rel="stylesheet" href="../scripts/highlight/github.min.css" /> + <link + id="hljs-light" + rel="stylesheet" + href="../scripts/highlight/github.min.css" + /> + <link + id="hljs-dark" + rel="stylesheet" + href="../scripts/highlight/github-dark.min.css" + disabled + /> + <script src="../scripts/highlight/highlight.min.js"></script> + <script src="../scripts/highlight/rust.min.js"></script> + <script src="../scripts/highlight/bash.min.js"></script> + + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" + rel="stylesheet" + /> + <link rel="stylesheet" href="style.css" /> + </head> + <body> + <!-- Topbar --> + <div class="topbar"> + <h1 class="topbar__title"> + <span id="tutorialTitle">Title</span> + </h1> + <div style="display: flex; align-items: center; gap: 16px"> + <span class="topbar__step"> + STEP <span id="stepNum">1</span> / + <span id="totalSteps">0</span> + </span> + <button class="theme-toggle" id="themeToggle">🌙</button> + </div> + </div> + + <!-- Main area --> + <div class="layout" id="layout"> + <!-- Left: code panel --> + <div class="code-panel"> + <pre id="codeDisplay"></pre> + </div> + + <!-- Right: description --> + <div class="speech-panel"> + <div class="speech-content" id="speechDisplay"></div> + </div> + </div> + + <!-- Control bar --> + <div class="controls"> + <button id="prevBtn" disabled>◀ PREV</button> + <button id="nextBtn" class="controls__btn--primary">NEXT ▶</button> + + <div class="controls__progress"> + <div + class="controls__progress-fill" + id="progressFill" + style="width: 0%" + ></div> + </div> + + <span class="controls__text" id="progressText">0%</span> + </div> + + <script src="player.js"></script> + <script> + (function () { + var hljsDark = document.getElementById("hljs-dark"); + var html = document.documentElement; + var btn = document.getElementById("themeToggle"); + + function resolveTheme() { + var t = localStorage.getItem("theme"); + if (t === "dark" || t === "light") return t; + return window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)") + .matches + ? "dark" + : "light"; + } + + function applyTheme(t) { + if (t === "dark") { + hljsDark.disabled = false; + html.setAttribute("data-theme", "dark"); + if (btn) btn.textContent = "☀️"; + } else { + hljsDark.disabled = true; + html.setAttribute("data-theme", "light"); + if (btn) btn.textContent = "🌙"; + } + } + + applyTheme(resolveTheme()); + + window.addEventListener("storage", function (e) { + if (e.key === "theme") applyTheme(resolveTheme()); + }); + + setInterval(function () { + var desired = resolveTheme(); + var current = html.getAttribute("data-theme") || "dark"; + if (desired !== current) applyTheme(desired); + }, 1000); + + if (btn) { + btn.addEventListener("click", function () { + var current = resolveTheme(); + var next = current === "dark" ? "light" : "dark"; + localStorage.setItem("theme", next); + applyTheme(next); + }); + } + })(); + </script> + </body> +</html> + +<!-- + INCLUDE + <iframe + src="../play/play.html?tur=default.md&title=Title" + height="400px"/> +--> |