Add lightweight offline web game for tablets

web/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#0b3943">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="description" content="鱼池、红点和羽毛，三个会回应爪子的触摸小游戏。免费，无广告。">
+  <link rel="manifest" href="./manifest.webmanifest">
+  <link rel="icon" href="./icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="./apple-touch-icon.png">
+  <link rel="stylesheet" href="./style.css?v=1.0.0">
+  <title>猫爪游乐场 · PawPlay</title>
+  <script defer src="./game.js?v=1.0.0"></script>
+</head>
+<body data-mode="fish">
+  <canvas id="pond" aria-label="猫咪触摸游戏：鱼池。轻触屏幕有反馈，长按角落爪印两秒打开家长设置。"></canvas>
+  <button class="paw left" aria-label="长按两秒打开家长设置" title="长按两秒打开家长设置"><svg viewBox="0 0 64 64" aria-hidden="true"><ellipse cx="17" cy="21" rx="7" ry="10" transform="rotate(-24 17 21)"/><ellipse cx="32" cy="14" rx="7" ry="10"/><ellipse cx="47" cy="21" rx="7" ry="10" transform="rotate(24 47 21)"/><path d="M15 43c0-11 10-19 17-19s17 8 17 19c0 12-11 7-17 7s-17 5-17-7"/></svg></button>
+  <button class="paw right" aria-label="长按两秒打开家长设置" title="长按两秒打开家长设置"><svg viewBox="0 0 64 64" aria-hidden="true"><ellipse cx="17" cy="21" rx="7" ry="10" transform="rotate(-24 17 21)"/><ellipse cx="32" cy="14" rx="7" ry="10"/><ellipse cx="47" cy="21" rx="7" ry="10" transform="rotate(24 47 21)"/><path d="M15 43c0-11 10-19 17-19s17 8 17 19c0 12-11 7-17 7s-17 5-17-7"/></svg></button>
+  <aside id="hint" role="status"><span>猫爪游乐场</span>轻触屏幕一起玩 · 长按角落爪印 2 秒进入设置</aside>
+  <dialog id="settings" aria-labelledby="settings-title">
+    <div class="eyebrow">PAWPLAY / 家长设置</div>
+    <h1 id="settings-title">今天，玩哪一个？</h1>
+    <p class="intro">陪它轻轻玩一会儿。</p>
+    <div class="modes" role="group" aria-label="选择游戏">
+      <button data-scene="fish" aria-pressed="true"><span class="mode-icon fish-icon">≈</span><strong>鱼池</strong><small>游一游，扑一下</small></button>
+      <button data-scene="laser" aria-pressed="false"><span class="mode-icon laser-icon">●</span><strong>红点</strong><small>停一停，再追上</small></button>
+      <button data-scene="feather" aria-pressed="false"><span class="mode-icon feather-icon">⌁</span><strong>羽毛</strong><small>爪子带起一阵风</small></button>
+    </div>
+    <div class="setting-row"><div><strong>轻柔音效</strong><small>首次触摸后开启声音</small></div><button id="sound" role="switch" aria-checked="true" aria-label="轻柔音效"><span></span></button></div>
+    <div class="setting-row"><div><strong>离线游玩</strong><small id="offline" role="status">正在准备离线内容…</small></div><span class="status-dot" id="offline-dot"></span></div>
+    <div class="actions"><button id="fullscreen">进入全屏</button><button id="resume" class="primary">继续玩</button></div>
+    <details><summary>玩法与添加到主屏幕</summary><p>屏幕放平，贴好保护膜，由人陪着玩。猫咪不感兴趣时，换个模式或换成实体玩具。屏幕互动不能替代日常陪伴。</p><p>iPad：用 Safari 打开，点“分享”→“添加到主屏幕”。完成离线准备后，可断网重新打开。系统清理缓存后，需要联网加载一次。</p><p>网页无法屏蔽系统手势。需要防止误退出时，可由家长开启 iPad 的“引导式访问”或 Android 的“屏幕固定”。</p><p>免费 · 无广告 · 无账号 · 设置仅保存在这台设备。网页托管服务可能保留常规访问日志。</p></details>
+    <footer>猫爪游乐场 · PawPlay <span>网页版 1.0.0</span></footer>
+  </dialog>
+  <noscript><div class="noscript">请开启 JavaScript 后游玩猫爪游乐场。</div></noscript>
+</body>
+</html>