docs: add interactive fall detection UI prototype

docs/current-state.md

@@ -10,7 +10,7 @@
 - 旧生产基线：`demo/main.py`、`demo/fall_detection_gui.py`、`demo/detect_fall.py`、`demo/best.pt`。
 - V1 代码：`v1/` 目录存在但尚无实现。
 - V2 代码：`v2/` 目录存在但尚无实现。
-- 非代码设计工件：`docs/ui/silver-pose-ui-ux-spec.md` 已建立，定义客户演示的正常、确认摔倒和连接异常三种 UI 状态；等待用户审阅后才生成 HTML 原型，不改变 Phase 1 任务顺序。
+- 非代码设计工件：docs/ui/silver-pose-ui-ux-spec.md、docs/ui/2026-07-20-html-prototype-plan.md 与 docs/ui/silver-pose-v1-prototype.html 已建立。HTML 可离线演示正常、确认摔倒和连接异常三种 UI 状态；其中画面、事件和时间均为模拟数据，不连接真实摄像头、模型或网络，也不改变 Phase 1 任务顺序。
 - 测试：暂无 pytest 测试；`python -m compileall -q demo` 已通过。
 - 模型：`demo/best.pt` 可加载为 YOLO Pose，类别 `person`，`kpt_shape=[17, 3]`；与 `D:\PythonP\fall_detection\best.pt` 哈希一致。
 - 当前标准启动：`./init.ps1`。

docs/ui/2026-07-20-html-prototype-plan.md

@@ -0,0 +1,101 @@
+# Silver Pose HTML UI Prototype Implementation Plan
+
+> **For agentic workers:** REQUIRED SKILL: Use `executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Create one offline HTML prototype that lets a customer switch between normal monitoring, confirmed-fall, and connection-error views without accessing a camera or model.
+
+**Architecture:** One self-contained HTML document holds semantic layout, CSS tokens, inline SVG scene, and a small state controller. The controller changes visible copy, status semantics, scene treatment, event evidence, and an idempotent demonstration dialog; it does not fetch data, access files, or claim to perform inference.
+
+**Tech Stack:** HTML5, CSS custom properties, inline SVG, vanilla JavaScript, Node.js 22 static syntax checks.
+
+---
+
+## File structure
+
+| Path | Responsibility |
+| --- | --- |
+| `docs/ui/silver-pose-v1-prototype.html` | Offline, interactive customer-demo prototype. |
+| `docs/ui/silver-pose-ui-ux-spec.md` | Approved interaction and accessibility source for the artifact. |
+| `docs/current-state.md` | Records that the HTML prototype exists and remains a non-production design artifact. |
+| `progress.md` | Appends exact validation evidence and handoff state. |
+
+### Task 1: Create and verify the standalone prototype
+
+**Files:**
+
+- Create: `docs/ui/silver-pose-v1-prototype.html`
+- Modify: `docs/current-state.md`
+- Modify: `progress.md`
+
+- [ ] **Step 1: Confirm the artifact does not pre-exist**
+
+Run:
+
+```powershell
+if (Test-Path -LiteralPath docs/ui/silver-pose-v1-prototype.html) {
+  throw 'Prototype already exists; inspect it before overwriting.'
+}
+throw 'Expected initial failure: prototype file is missing.'
+```
+
+Expected: the command fails with `Expected initial failure: prototype file is missing.`.
+
+- [ ] **Step 2: Implement one semantic, offline page**
+
+Create the document with these state-controller names and controls:
+
+```html
+<main id="app" data-state="normal">
+  <button type="button" data-state-target="normal">1 正常监控</button>
+  <button type="button" data-state-target="confirmed">2 确认摔倒</button>
+  <button type="button" data-state-target="offline">3 连接异常</button>
+  <section aria-label="实时监控画面"><span id="scene-state">NORMAL</span></section>
+  <aside aria-label="事件证据"><div id="evidence-panel"></div></aside>
+  <dialog id="fall-dialog" aria-labelledby="dialog-title">
+    <h2 id="dialog-title">确认摔倒</h2>
+    <button id="acknowledge-button" type="button">我已知晓</button>
+  </dialog>
+</main>
+```
+
+Implement `setDemoState(nextState)` in the only inline script. It must set `app.dataset.state`, update every switch button's `aria-pressed`, open `fall-dialog` only on the first entry to `confirmed`, reset that one-shot marker when leaving `confirmed`, and close the dialog on Escape. The complete page also needs CSS tokens from the approved specification; title/source/status area; visible text and icons in addition to color; a 16:9 inline SVG scene with person `P-017`; current event evidence; recent-event rows; reflow at 1008 px, 640 px and 600 px; `aria-live="polite"` announcements; and the text “演示数据，未连接真实摄像头或模型”.
+
+- [ ] **Step 3: Run static syntax and structure validation**
+
+Run:
+
+```powershell
+node -e "const fs=require('fs'); const html=fs.readFileSync('docs/ui/silver-pose-v1-prototype.html','utf8'); const required=['data-state-target=\"normal\"','data-state-target=\"confirmed\"','data-state-target=\"offline\"','id=\"fall-dialog\"','id=\"acknowledge-button\"','aria-live=\"polite\"','@media (max-width: 640px)','@media (max-width: 1007px)']; for (const token of required) if (!html.includes(token)) throw new Error('missing '+token); const scripts=[...html.matchAll(/<script>([\\s\\S]*?)<\\/script>/g)]; if (scripts.length !== 1) throw new Error('expected exactly one inline script'); new Function(scripts[0][1]); console.log('prototype static validation passed');"
+```
+
+Expected: `prototype static validation passed`.
+
+- [ ] **Step 4: Run regression boundary checks**
+
+Run:
+
+```powershell
+Select-String -LiteralPath docs/ui/silver-pose-v1-prototype.html -Pattern 'rtsp://|password|username|best\.pt|fetch\(|XMLHttpRequest|WebSocket' -AllMatches
+if ($LASTEXITCODE -eq 0) { throw 'Prototype must not embed credentials, model paths, or network behavior.' }
+& .\init.ps1
+```
+
+Expected: no `Select-String` match; `init.ps1` completes successfully.
+
+- [ ] **Step 5: Record the completed design artifact and commit**
+
+Append a `DONE` record to `progress.md`, update `docs/current-state.md` with the artifact path and its offline-only limitation, then run:
+
+```powershell
+git add docs/ui/silver-pose-v1-prototype.html docs/ui/2026-07-20-html-prototype-plan.md docs/current-state.md progress.md
+git diff --cached --check
+git commit -m "docs: add interactive fall detection UI prototype"
+```
+
+Expected: no whitespace errors and a commit containing only the prototype documentation files.
+
+## Self-review
+
+- Spec coverage: Task 1 implements all specified views, dialog behavior, responsive breakpoints, keyboard paths, state text, offline limitation, and validation conditions.
+- Placeholder scan: no unresolved placeholder markers or file paths appear in this plan.
+- Consistency: the three controller state names are consistently `normal`, `confirmed`, and `offline`; the dialog and acknowledgement element IDs are fixed across layout and behavior.

progress.md

@@ -34,3 +34,13 @@
 - 阻塞：等待用户审阅已提交的规格；未生成 HTML，未变更 `demo/`、`v1/` 或任务看板状态。
 - 决策：原型为单页、无网络依赖的视觉与交互演示，使用虚构摄像头和事件数据，不表现为真实 RTSP 或模型推理。
 - 下一步：用户确认规格后，创建 `docs/ui/silver-pose-v1-prototype.html` 并执行离线交互验收。
+
+## 【2026-07-20】DESIGN 离线 HTML UI/UX 原型
+
+- 状态：DONE
+- 可视化验证：使用本机 Chrome 无界面模式实际渲染 1280 × 800、900 × 900、600 × 1000 三种窗口截图；宽屏与窄屏截图已人工检查，主操作可见，窄屏下右栏纵向重排，未见横向溢出。Chrome 对 file 页面返回非零退出码，但三张 PNG 均实际生成，故以文件与画面结果作为结论。
+- 变更：创建 docs/ui/silver-pose-v1-prototype.html 和实施计划 docs/ui/2026-07-20-html-prototype-plan.md。原型可在单页中通过按钮或数字键 1、2、3 切换正常监控、确认摔倒和连接异常；包含 16:9 模拟姿态画面、红色确认状态、一次性演示弹窗、报警/截图证据、最近事件、窄窗口重排、键盘焦点和屏幕阅读器状态提示。
+- 验证：Node.js 22 解析唯一内联脚本，并确认三种状态按钮、弹窗、确认按钮、aria-live 与 1007/640/600 epx 响应式断点存在，输出 prototype static validation passed；敏感与网络边界扫描未发现凭证、模型路径或网络行为标记；./init.ps1 通过。
+- 阻塞：无。该文件是离线视觉原型，已做静态和无界面浏览器布局验证，但不表示实时 RTSP、模型推理、声音播放或截图保存已实现。
+- 决策：原型采用单窗口深色控制台布局，以同一画面状态切换展示客户关心的“正常不报警、确认后完整报警闭环、断流不误报”三种结果。
+- 下一步：T-101；HTML 原型可作为后续 T-201 PyQt 界面实现的视觉与交互参考。