docs: add light Windows UI prototype

2026-07-20 23:06:54 +08:00
parent 4754ce740d
commit 50ac61fac5
4 changed files with 702 additions and 1 deletions
@@ -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、docs/ui/2026-07-20-html-prototype-plan.md 与 docs/ui/silver-pose-v1-prototype.html 已建立。UI 文档已将正式默认主题定为浅灰蓝底、白色卡片，红色只表示确认摔倒。当前 HTML 仍为历史深色版本，等待单独授权后再按文档重绘；其顶部双 Tab、设置草稿与状态交互仍可作为结构参考。画面、事件和时间均为模拟数据，不连接真实摄像头、模型或网络，也不改变 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 与 docs/ui/silver-pose-v2-prototype.html 已建立。v2 HTML 是符合正式浅色 Windows 规范的当前视觉参考：浅灰蓝底、白色卡片，红色只表示确认摔倒、其弹窗和事件证据；文件名中的 v2 只表示原型设计修订，不能理解为 Go V2 实现已开始。v1 HTML 保留为历史深色对照。两者均使用顶部双 Tab、设置草稿与状态交互，且画面、事件和时间都是模拟数据，不连接真实摄像头、模型或网络，也不改变 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`。
@@ -104,6 +104,10 @@ The revised prototype has a horizontal tablist with monitoring and settings tabs

 Use the approved light Windows palette from the UI specification: a pale blue-gray page background, white cards and toolbars, and semantic borders. Red is reserved exclusively for a confirmed fall and the associated dialog or event evidence. The existing dark HTML prototype must be recolored in a separate approved implementation task; it is not the visual source of truth after this revision.

+## Light theme implementation
+
+The approved repaint is delivered as `docs/ui/silver-pose-v2-prototype.html`. This is a standalone, offline design revision only; the `v2` filename does not begin the Go V2 implementation or alter its V1 acceptance gate. The historical dark `silver-pose-v1-prototype.html` remains unchanged for comparison. The new artifact supports `#settings`, `#confirmed`, and `#offline` hashes for deterministic local visual review of the settings, confirmed-event dialog, and reconnect states.
+
 - 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.
@@ -0,0 +1,688 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <title>Silver Pose · 浅色 Windows 演示原型</title>
+  <style>
+    :root {
+      --surface-base: #eaf1f8;
+      --surface-layer: #ffffff;
+      --surface-overlay: #f6f9fc;
+      --text-primary: #1e293b;
+      --text-secondary: #52657c;
+      --text-muted: #72839a;
+      --stroke: #c8d4e3;
+      --stroke-subtle: #dce5ef;
+      --accent: #2563eb;
+      --accent-hover: #1d4ed8;
+      --success: #15803d;
+      --success-fill: #e9f7ee;
+      --caution: #b45309;
+      --caution-fill: #fff7e6;
+      --critical: #c62828;
+      --critical-fill: #fff0f0;
+      --offline: #64748b;
+      --offline-fill: #f1f5f9;
+      --focus: #2563eb;
+      --radius-card: 10px;
+      --radius-control: 7px;
+      --space-1: 4px;
+      --space-2: 8px;
+      --space-3: 12px;
+      --space-4: 16px;
+      --space-5: 20px;
+      --space-6: 24px;
+      --font-ui: "Segoe UI Variable", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
+      --font-number: "Cascadia Mono", Consolas, monospace;
+    }
+
+    * { box-sizing: border-box; }
+
+    html { background: var(--surface-base); font-family: var(--font-ui); }
+
+    body {
+      min-width: 320px;
+      min-height: 100vh;
+      margin: 0;
+      color: var(--text-primary);
+      background:
+        radial-gradient(circle at 92% -10%, rgba(183, 211, 242, .72), transparent 34rem),
+        linear-gradient(145deg, #f3f7fb 0%, var(--surface-base) 60%, #e5eef8 100%);
+    }
+
+    button, input {
+      font: inherit;
+    }
+
+    button {
+      min-height: 40px;
+      border: 1px solid var(--stroke);
+      border-radius: var(--radius-control);
+      padding: 8px 13px;
+      color: var(--text-primary);
+      background: var(--surface-layer);
+      font-weight: 600;
+      line-height: 1.25;
+      cursor: pointer;
+      transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
+    }
+
+    button:hover { border-color: #9cb1c9; background: #f8fbff; }
+    button:active { transform: translateY(1px); }
+    button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
+      outline: 3px solid rgba(37, 99, 235, .35);
+      outline-offset: 2px;
+    }
+
+    .app-shell {
+      width: min(1440px, calc(100% - 40px));
+      min-height: 100vh;
+      margin: 0 auto;
+      padding: 20px 0 28px;
+    }
+
+    .topbar {
+      display: flex;
+      align-items: center;
+      min-height: 56px;
+      gap: var(--space-4);
+      padding: 8px 12px 8px 16px;
+      border: 1px solid rgba(186, 202, 220, .95);
+      border-radius: var(--radius-card);
+      background: rgba(255, 255, 255, .92);
+      box-shadow: 0 8px 24px rgba(41, 66, 99, .08);
+    }
+
+    .brand, .source-summary, .topbar-right, .section-heading, .toolbar, .chip, .state-title, .meta-line, .event-row, .setting-label, .setting-actions, .dialog-heading, .footer-note {
+      display: flex;
+      align-items: center;
+    }
+
+    .brand { min-width: 238px; gap: 10px; }
+    .brand-mark {
+      display: grid;
+      width: 30px;
+      height: 30px;
+      place-items: center;
+      border-radius: 8px;
+      color: #fff;
+      background: linear-gradient(135deg, #3473e6, #1e4fae);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
+      font-size: 12px;
+      font-weight: 750;
+      letter-spacing: .04em;
+    }
+    .brand strong { display: block; font-size: 16px; letter-spacing: .01em; }
+    .brand small { display: block; margin-top: 1px; color: var(--text-secondary); font-size: 12px; }
+
+    .source-summary { flex: 1; justify-content: center; min-width: 0; gap: 9px; color: var(--text-secondary); font-size: 13px; }
+    .source-indicator { width: 9px; height: 9px; border: 2px solid var(--success); border-radius: 50%; background: #fff; }
+    .source-name { overflow: hidden; color: var(--text-primary); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+    .topbar-right { gap: 12px; color: var(--text-secondary); font-family: var(--font-number); font-size: 12px; }
+    .demo-tag { padding: 4px 8px; border: 1px solid #b7c9df; border-radius: 99px; color: #315274; background: #f4f8fc; font-family: var(--font-ui); font-size: 11px; font-weight: 650; }
+
+    .tabs {
+      display: flex;
+      width: max-content;
+      max-width: 100%;
+      margin: 14px 0 0;
+      padding: 4px;
+      gap: 2px;
+      border: 1px solid var(--stroke);
+      border-radius: 9px;
+      background: rgba(255, 255, 255, .76);
+    }
+    .tabs button { min-height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); }
+    .tabs button[aria-selected="true"] { color: #173e7b; background: #eaf2ff; box-shadow: inset 0 -2px 0 var(--accent); }
+
+    main { padding-top: var(--space-4); }
+    [hidden] { display: none !important; }
+    .page-intro { margin: 0 0 var(--space-3); }
+    .page-intro h1 { margin: 0; font-size: 21px; line-height: 1.3; }
+    .page-intro p { margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
+    .inline-note { color: #315274; font-weight: 600; }
+
+    .toolbar {
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-bottom: var(--space-4);
+      padding: 10px 12px;
+      border: 1px solid var(--stroke);
+      border-radius: var(--radius-card);
+      background: rgba(255, 255, 255, .88);
+    }
+    .state-switches, .tool-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+    .state-switches button { min-height: 38px; color: var(--text-secondary); }
+    .state-switches button[aria-pressed="true"] { border-color: currentColor; font-weight: 700; }
+    .state-switches button[data-state-target="normal"][aria-pressed="true"] { color: var(--success); background: var(--success-fill); }
+    .state-switches button[data-state-target="confirmed"][aria-pressed="true"] { color: var(--critical); background: var(--critical-fill); }
+    .state-switches button[data-state-target="offline"][aria-pressed="true"] { color: var(--offline); background: var(--offline-fill); }
+    .primary-action { border-color: var(--accent); color: #fff; background: var(--accent); }
+    .primary-action:hover { border-color: var(--accent-hover); color: #fff; background: var(--accent-hover); }
+    .secondary-action { color: #24486f; background: #f7fbff; }
+
+    .monitor-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(292px, 4fr); gap: var(--space-4); }
+    .card { overflow: hidden; border: 1px solid var(--stroke); border-radius: var(--radius-card); background: var(--surface-layer); box-shadow: 0 6px 18px rgba(50, 77, 111, .06); }
+    .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 15px 16px 12px; border-bottom: 1px solid var(--stroke-subtle); }
+    .card-header h2 { margin: 0; font-size: 15px; line-height: 1.35; }
+    .card-header p { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
+
+    .scene-wrap { position: relative; aspect-ratio: 16 / 9; min-height: 300px; overflow: hidden; background: #dfeaf5; }
+    .scene-wrap::after { position: absolute; inset: 0; border: 2px solid transparent; content: ""; pointer-events: none; }
+    .scene-svg { display: block; width: 100%; height: 100%; }
+    .scene-topline { position: absolute; z-index: 2; top: 14px; right: 14px; left: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+    .scene-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #9fc7ae; border-radius: 6px; color: var(--success); background: rgba(255, 255, 255, .93); font-family: var(--font-number); font-size: 12px; font-weight: 700; }
+    .badge-dot { width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; background: #fff; }
+    .scene-time { padding: 5px 7px; border: 1px solid rgba(136, 160, 188, .75); border-radius: 5px; color: #315274; background: rgba(255, 255, 255, .9); font-family: var(--font-number); font-size: 11px; }
+    .track-label { position: absolute; z-index: 2; top: 47%; left: 47%; padding: 5px 7px; border: 1px solid #63a77e; border-radius: 5px; color: #0f6f33; background: rgba(255, 255, 255, .93); font-family: var(--font-number); font-size: 11px; font-weight: 700; }
+    .reconnect-overlay { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 24px; color: #334155; background: rgba(241, 245, 249, .82); opacity: 0; pointer-events: none; text-align: center; transition: opacity 130ms ease; }
+    .reconnect-overlay strong { display: block; font-size: 18px; }
+    .reconnect-overlay span { display: block; margin-top: 6px; color: var(--offline); font-size: 13px; }
+    .scene-caption { padding: 11px 16px; border-top: 1px solid var(--stroke-subtle); color: var(--text-secondary); background: #fbfdff; font-size: 12px; line-height: 1.5; }
+
+    .normal-person, .fall-person { transform-origin: 50% 50%; transition: opacity 160ms ease; }
+    .fall-person { opacity: 0; }
+    .skeleton { fill: none; stroke: #15803d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }
+    .joint { fill: #fff; stroke: #15803d; stroke-width: 3; }
+    .person-box { fill: none; stroke: #15803d; stroke-dasharray: 9 6; stroke-width: 2; }
+
+    .side-stack { display: grid; align-content: start; gap: var(--space-4); }
+    .state-body, .evidence-body { padding: 15px 16px; }
+    .state-title { gap: 10px; }
+    .state-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #9fc7ae; border-radius: 8px; color: var(--success); background: var(--success-fill); font-size: 15px; font-weight: 750; }
+    .state-title h2 { margin: 0; color: var(--success); font-size: 15px; }
+    .state-title p { margin: 2px 0 0; color: var(--text-secondary); font-size: 12px; }
+    .state-description { margin: 13px 0 0; padding: 10px 11px; border: 1px solid #cfe2d6; border-radius: 7px; color: #2d5540; background: #f5fbf7; font-size: 12px; line-height: 1.52; }
+    .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
+    .metric { padding: 9px 10px; border: 1px solid var(--stroke-subtle); border-radius: 7px; background: #fbfdff; }
+    .metric span { display: block; color: var(--text-muted); font-size: 11px; }
+    .metric strong { display: block; margin-top: 4px; color: #293c54; font-family: var(--font-number); font-size: 12px; }
+    .metric strong.status-success { color: var(--success); }
+
+    .evidence-list { display: grid; gap: 1px; }
+    .evidence-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--stroke-subtle); font-size: 12px; }
+    .evidence-row:last-child { border-bottom: 0; }
+    .evidence-shape { width: 13px; height: 13px; border: 2px solid var(--success); border-radius: 50%; }
+    .evidence-row strong { font-weight: 650; }
+    .evidence-row span:last-child { color: var(--text-secondary); text-align: right; }
+    .artifact-box { margin-top: 12px; padding: 10px; border: 1px solid #cfe2d6; border-radius: 7px; background: #f5fbf7; }
+    .artifact-box strong { display: block; color: var(--success); font-size: 12px; }
+    .artifact-box span { display: block; margin-top: 4px; color: var(--text-secondary); font-family: var(--font-number); font-size: 11px; line-height: 1.45; word-break: break-word; }
+
+    .event-card { margin-top: var(--space-4); }
+    .event-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .event-row { min-width: 0; gap: 10px; padding: 13px 15px; border-right: 1px solid var(--stroke-subtle); }
+    .event-row:last-child { border-right: 0; }
+    .event-symbol { flex: 0 0 auto; width: 11px; height: 11px; border: 2px solid var(--success); border-radius: 50%; }
+    .event-symbol.caution { border-color: var(--caution); }
+    .event-symbol.offline { border-color: var(--offline); }
+    .event-copy { min-width: 0; }
+    .event-copy strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+    .event-copy span { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
+
+    .settings-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #b9cce2; border-radius: 7px; color: #315274; background: #f4f8fc; font-size: 12px; font-weight: 650; }
+    .settings-status-dot { width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
+    .settings-status[data-config-state="dirty"] { border-color: #ecd09a; color: var(--caution); background: var(--caution-fill); }
+    .settings-status[data-config-state="saved"] { border-color: #b9cce2; color: #315274; background: #f4f8fc; }
+    .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+    .settings-card.wide { grid-column: 1 / -1; }
+    .settings-body { padding: 16px; }
+    .key-value { display: grid; grid-template-columns: minmax(108px, .75fr) minmax(0, 1.25fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--stroke-subtle); font-size: 13px; }
+    .key-value:last-child { border-bottom: 0; }
+    .key-value span { color: var(--text-secondary); }
+    .key-value strong { color: #293c54; font-weight: 650; }
+    .readiness { color: var(--success) !important; }
+    .setting-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
+    .setting-label { align-items: flex-start; flex-direction: column; gap: 6px; color: #384b63; font-size: 12px; font-weight: 650; }
+    .setting-label small { color: var(--text-muted); font-weight: 400; }
+    .setting-label input { width: 100%; min-height: 38px; border: 1px solid var(--stroke); border-radius: 6px; padding: 7px 9px; color: var(--text-primary); background: #fff; font-family: var(--font-number); }
+    .setting-actions { justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--stroke-subtle); }
+    .config-versions { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
+    .config-versions strong { color: #315274; font-family: var(--font-number); }
+    .settings-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
+    .settings-note { margin: 10px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
+
+    .footer-note { justify-content: space-between; gap: 12px; padding: 15px 2px 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
+    .footer-note strong { color: #315274; }
+    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    .toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(430px, calc(100% - 32px)); padding: 11px 13px; border: 1px solid #9bb8d8; border-radius: 8px; color: #24486f; background: #f4f8fc; box-shadow: 0 12px 30px rgba(45, 72, 104, .18); font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 150ms ease, transform 150ms ease; }
+    .toast.is-visible { opacity: 1; transform: translateY(0); }
+
+    dialog { width: min(440px, calc(100% - 32px)); border: 1px solid #e1aaaa; border-radius: 10px; padding: 0; color: var(--text-primary); background: #fff; box-shadow: 0 22px 68px rgba(68, 25, 25, .23); }
+    dialog::backdrop { background: rgba(30, 41, 59, .28); }
+    .dialog-heading { gap: 11px; padding: 18px 20px 14px; border-bottom: 1px solid #f0cdcd; background: var(--critical-fill); }
+    .dialog-symbol { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #e2a2a2; border-radius: 50%; color: var(--critical); background: #fff; font-size: 16px; font-weight: 800; }
+    .dialog-heading h2 { margin: 0; color: var(--critical); font-size: 18px; }
+    .dialog-heading p { margin: 3px 0 0; color: #7a3535; font-size: 12px; }
+    .dialog-body { padding: 16px 20px; }
+    .dialog-body p { margin: 0; color: #384b63; font-size: 13px; line-height: 1.6; }
+    .dialog-details { display: grid; gap: 8px; margin-top: 13px; padding: 11px; border: 1px solid #f0d0d0; border-radius: 7px; background: #fffafa; font-size: 12px; }
+    .dialog-details div { display: flex; justify-content: space-between; gap: 10px; }
+    .dialog-details span { color: var(--text-secondary); }
+    .dialog-details strong { color: #703232; font-family: var(--font-number); text-align: right; }
+    .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }
+    .dialog-actions button { border-color: var(--critical); color: #fff; background: var(--critical); }
+    .dialog-actions button:hover { border-color: #a91f1f; background: #a91f1f; }
+
+    .app-shell[data-state="confirmed"] .scene-wrap::after { border-color: var(--critical); box-shadow: inset 0 0 0 1px rgba(198, 40, 40, .12); }
+    .app-shell[data-state="confirmed"] .scene-badge, .app-shell[data-state="confirmed"] .track-label { border-color: #df9b9b; color: var(--critical); background: #fff8f8; }
+    .app-shell[data-state="confirmed"] .badge-dot { background: var(--critical); }
+    .app-shell[data-state="confirmed"] .normal-person { opacity: 0; }
+    .app-shell[data-state="confirmed"] .fall-person { opacity: 1; }
+    .app-shell[data-state="confirmed"] .state-mark { border-color: #dfa1a1; color: var(--critical); background: var(--critical-fill); }
+    .app-shell[data-state="confirmed"] .state-title h2 { color: var(--critical); }
+    .app-shell[data-state="confirmed"] .state-description, .app-shell[data-state="confirmed"] .artifact-box { border-color: #efc5c5; color: #763a3a; background: #fff8f8; }
+    .app-shell[data-state="confirmed"] .artifact-box strong, .app-shell[data-state="confirmed"] .metric strong.status-success, .app-shell[data-state="confirmed"] .evidence-shape { color: var(--critical); border-color: var(--critical); }
+    .app-shell[data-state="confirmed"] .event-symbol { border-color: var(--critical); }
+    .app-shell[data-state="confirmed"] .skeleton { stroke: var(--critical); }
+    .app-shell[data-state="confirmed"] .joint { stroke: var(--critical); }
+    .app-shell[data-state="confirmed"] .person-box { stroke: var(--critical); }
+
+    .app-shell[data-state="offline"] .scene-wrap::after { border-color: #9aaabd; }
+    .app-shell[data-state="offline"] .source-indicator { border-color: var(--offline); }
+    .app-shell[data-state="offline"] .scene-svg { filter: grayscale(.75) opacity(.64); }
+    .app-shell[data-state="offline"] .reconnect-overlay { opacity: 1; }
+    .app-shell[data-state="offline"] .scene-badge, .app-shell[data-state="offline"] .track-label { border-color: #b5c1cf; color: var(--offline); background: #f8fafc; }
+    .app-shell[data-state="offline"] .state-mark { border-color: #bdc8d4; color: var(--offline); background: var(--offline-fill); }
+    .app-shell[data-state="offline"] .state-title h2, .app-shell[data-state="offline"] .metric strong.status-success { color: var(--offline); }
+    .app-shell[data-state="offline"] .state-description, .app-shell[data-state="offline"] .artifact-box { border-color: #d6dee7; color: #52657c; background: #f8fafc; }
+    .app-shell[data-state="offline"] .artifact-box strong, .app-shell[data-state="offline"] .evidence-shape { color: var(--offline); border-color: var(--offline); }
+
+    @media (max-width: 1007px) {
+      .app-shell { width: min(100%, calc(100% - 28px)); padding-top: 14px; }
+      .monitor-layout { grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); gap: 12px; }
+      .event-list { grid-template-columns: 1fr; }
+      .event-row { border-right: 0; border-bottom: 1px solid var(--stroke-subtle); }
+      .event-row:last-child { border-bottom: 0; }
+    }
+
+    @media (max-width: 760px) {
+      .topbar, .toolbar, .setting-actions, .footer-note { align-items: flex-start; flex-wrap: wrap; }
+      .source-summary { order: 3; flex-basis: 100%; justify-content: flex-start; }
+      .topbar-right { margin-left: auto; }
+      .monitor-layout { grid-template-columns: 1fr; }
+      .settings-grid { grid-template-columns: 1fr; }
+      .settings-card.wide { grid-column: auto; }
+      .setting-form { grid-template-columns: 1fr 1fr; }
+    }
+
+    @media (max-width: 640px) {
+      .app-shell { width: min(100%, calc(100% - 20px)); padding-top: 10px; }
+      .topbar { padding: 10px 12px; }
+      .brand { min-width: 0; }
+      .topbar-right { display: none; }
+      .tabs { width: 100%; }
+      .tabs button { flex: 1; }
+      .toolbar { padding: 10px; }
+      .state-switches, .tool-actions { width: 100%; }
+      .state-switches button { flex: 1 1 132px; }
+      .tool-actions button { flex: 1; }
+      .scene-wrap { min-height: 220px; }
+      .scene-topline { top: 10px; right: 10px; left: 10px; }
+      .card-header, .state-body, .evidence-body, .settings-body { padding-right: 12px; padding-left: 12px; }
+      .setting-form { grid-template-columns: 1fr; }
+      .settings-buttons { width: 100%; }
+      .settings-buttons button { flex: 1; }
+      .key-value { grid-template-columns: 1fr; gap: 4px; }
+      .footer-note { padding-bottom: 8px; }
+      .toast { right: 16px; bottom: 16px; }
+    }
+
+    @media (max-width: 600px) {
+      .source-summary { font-size: 12px; }
+      .scene-time { display: none; }
+      .scene-badge { max-width: 100%; }
+      .metric-grid { grid-template-columns: 1fr 1fr; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
+    }
+  </style>
+</head>
+<body>
+  <div class="app-shell" id="app" data-state="normal" data-running="true">
+    <header class="topbar">
+      <div class="brand" aria-label="Silver Pose 跌倒事件演示">
+        <span class="brand-mark" aria-hidden="true">SP</span>
+        <div><strong>Silver Pose</strong><small>摔倒事件演示 · 单路本地监控</small></div>
+      </div>
+      <div class="source-summary" aria-label="当前演示来源状态">
+        <span class="source-indicator" aria-hidden="true"></span>
+        <span class="source-name">大厅东侧 · 固定俯视演示机位</span>
+        <span id="source-status">来源在线 · 模拟画面</span>
+      </div>
+      <div class="topbar-right"><span class="demo-tag">演示数据</span><time id="clock">12:08:42</time></div>
+    </header>
+
+    <nav class="tabs" role="tablist" aria-label="主视图">
+      <button id="monitor-tab" type="button" role="tab" aria-selected="true" aria-controls="monitor-panel" data-tab-target="monitor">实时监控</button>
+      <button id="settings-tab" type="button" role="tab" aria-selected="false" aria-controls="settings-panel" tabindex="-1" data-tab-target="settings">设置</button>
+    </nav>
+
+    <main>
+      <section id="monitor-panel" role="tabpanel" aria-labelledby="monitor-tab">
+        <div class="page-intro">
+          <h1>实时监控</h1>
+          <p>展示同一人员的姿态和事件状态。<span class="inline-note">演示数据，未连接真实摄像头或模型。</span></p>
+        </div>
+
+        <div class="toolbar" aria-label="原型状态和操作">
+          <div class="state-switches" aria-label="切换演示状态">
+            <button type="button" data-state-target="normal" aria-pressed="true">1 正常监控</button>
+            <button type="button" data-state-target="confirmed" aria-pressed="false">2 确认摔倒</button>
+            <button type="button" data-state-target="offline" aria-pressed="false">3 连接异常</button>
+          </div>
+          <div class="tool-actions">
+            <button id="monitor-toggle" type="button" class="primary-action" aria-pressed="true"><span>停止模拟监控</span></button>
+            <button id="artifact-button" type="button" class="secondary-action">查看截图位置</button>
+          </div>
+        </div>
+
+        <div class="monitor-layout">
+          <article class="card" aria-label="实时监控画面">
+            <div class="card-header"><div><h2>大厅东侧 · 画面预览</h2><p id="scene-caption">全身大部分可见，姿态质量满足监控条件。</p></div><span class="demo-tag">16:9 示例画面</span></div>
+            <div class="scene-wrap">
+              <div class="scene-topline"><div class="scene-badge"><span class="badge-dot" aria-hidden="true"></span><span id="scene-state">NORMAL</span></div><time class="scene-time" id="scene-time">12:08:42</time></div>
+              <span class="track-label" id="track-label">P-017 · 姿态可用</span>
+              <svg class="scene-svg" viewBox="0 0 960 540" role="img" aria-label="大厅俯视演示画面，含人员姿态示意">
+                <defs>
+                  <linearGradient id="floor" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#edf4fb"/><stop offset="1" stop-color="#d7e5f2"/></linearGradient>
+                  <linearGradient id="corridor" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f8fbff"/><stop offset="1" stop-color="#e8f1f8"/></linearGradient>
+                </defs>
+                <rect width="960" height="540" fill="url(#floor)"/>
+                <path d="M0 82H960M0 386H960" stroke="#c5d7e8" stroke-width="3"/>
+                <path d="M95 0V540M315 0V540M645 0V540M865 0V540" stroke="#d3e0ec" stroke-width="2"/>
+                <path d="M0 150 250 105 710 105 960 150V350L710 400H250L0 350Z" fill="url(#corridor)" stroke="#bdcfdf" stroke-width="3"/>
+                <path d="M160 105 160 400M800 105 800 400" stroke="#d1dfec" stroke-width="3"/>
+                <rect x="42" y="42" width="147" height="51" rx="8" fill="#dbe9f5" stroke="#b9ccdf"/>
+                <rect x="770" y="440" width="150" height="55" rx="8" fill="#dbe9f5" stroke="#b9ccdf"/>
+                <text x="65" y="74" fill="#607a95" font-family="Segoe UI, Microsoft YaHei" font-size="17">入口区域</text>
+                <text x="796" y="474" fill="#607a95" font-family="Segoe UI, Microsoft YaHei" font-size="17">服务台</text>
+                <g class="normal-person">
+                  <rect class="person-box" x="443" y="138" width="118" height="262" rx="8"/>
+                  <path class="skeleton" d="M500 184 500 237 469 284M500 237 530 284M500 237 482 327M500 237 520 327"/>
+                  <circle class="joint" cx="500" cy="163" r="18"/>
+                  <circle class="joint" cx="500" cy="184" r="5"/><circle class="joint" cx="500" cy="237" r="5"/>
+                  <circle class="joint" cx="469" cy="284" r="5"/><circle class="joint" cx="530" cy="284" r="5"/>
+                  <circle class="joint" cx="482" cy="327" r="5"/><circle class="joint" cx="520" cy="327" r="5"/>
+                </g>
+                <g class="fall-person">
+                  <rect class="person-box" x="378" y="274" width="266" height="104" rx="8"/>
+                  <path class="skeleton" d="M427 323 498 323 558 302M498 323 553 354M498 323 454 350M498 323 590 331"/>
+                  <circle class="joint" cx="406" cy="323" r="17"/>
+                  <circle class="joint" cx="427" cy="323" r="5"/><circle class="joint" cx="498" cy="323" r="5"/>
+                  <circle class="joint" cx="558" cy="302" r="5"/><circle class="joint" cx="553" cy="354" r="5"/>
+                  <circle class="joint" cx="454" cy="350" r="5"/><circle class="joint" cx="590" cy="331" r="5"/>
+                </g>
+              </svg>
+              <div class="reconnect-overlay"><div><strong>视频源正在重连</strong><span>连接异常不生成摔倒事件，也不播放报警。</span></div></div>
+            </div>
+          </article>
+
+          <aside class="side-stack" aria-label="状态与事件证据">
+            <section class="card">
+              <div class="state-body">
+                <div class="state-title"><span class="state-mark" id="state-mark" aria-hidden="true">✓</span><div><h2 id="state-heading">NORMAL · 正常监控</h2><p id="state-time">稳定观察中</p></div></div>
+                <p class="state-description" id="state-description">当前人员姿态稳定，没有生成摔倒候选或报警副作用。</p>
+                <div class="metric-grid" aria-label="当前状态指标">
+                  <div class="metric"><span>人员</span><strong id="metric-people">1 · P-017</strong></div>
+                  <div class="metric"><span>姿态质量</span><strong id="metric-quality">良好</strong></div>
+                  <div class="metric"><span>事件延迟</span><strong id="metric-latency">—</strong></div>
+                  <div class="metric"><span>报警</span><strong class="status-success" id="metric-alert">未触发</strong></div>
+                </div>
+              </div>
+            </section>
+
+            <section class="card">
+              <div class="card-header"><div><h2>事件证据</h2><p id="evidence-status">当前无待处理事件</p></div><span class="demo-tag" id="artifact-status">监控中</span></div>
+              <div class="evidence-body">
+                <div class="evidence-list" id="evidence-panel"></div>
+                <div class="artifact-box"><strong id="artifact-title">本地声音：未触发</strong><span id="artifact-path">当前没有已保存截图。</span></div>
+              </div>
+            </section>
+          </aside>
+        </div>
+
+        <section class="card event-card" aria-label="最近事件">
+          <div class="card-header"><div><h2>最近事件</h2><p>原型仅展示摘要；正式版由本地 JSONL 事件记录提供。</p></div><span class="demo-tag" id="event-count">无新增确认事件</span></div>
+          <div class="event-list" id="event-list"></div>
+        </section>
+      </section>
+
+      <section id="settings-panel" role="tabpanel" aria-labelledby="settings-tab" hidden data-config-state="saved">
+        <div class="page-intro">
+          <h1>设置</h1>
+          <p>编辑的是非敏感草稿配置。保存后仅在下一次开始监控时生效，当前运行配置保持不变。</p>
+        </div>
+
+        <div class="card" style="margin-bottom:16px">
+          <div class="card-header"><div><h2>配置应用状态</h2><p>用于区分正在监控的快照和下一次启动将采用的草稿。</p></div><span class="settings-status" id="config-state"><span class="settings-status-dot" aria-hidden="true"></span><span id="config-state-text">草稿已保存，下一次启动生效</span></span></div>
+          <div class="settings-body"><div class="key-value"><span>当前运行配置</span><strong>cfg-20260720-01 · 监控开始时冻结</strong></div><div class="key-value"><span>草稿版本</span><strong id="draft-version">cfg-20260720-02 · 已保存待应用</strong></div></div>
+        </div>
+
+        <div class="settings-grid">
+          <article class="card settings-card"><div class="card-header"><div><h2>视频来源</h2><p>真实来源只由本地环境变量或未跟踪配置提供。</p></div></div><div class="settings-body"><div class="key-value"><span>来源变量</span><strong>SILVER_POSE_RTSP_URL</strong></div><div class="key-value"><span>就绪状态</span><strong class="readiness">已检测 · 不显示具体地址</strong></div><p class="settings-note">此原型不读取、保存或回显来源地址及其凭证。</p></div></article>
+          <article class="card settings-card"><div class="card-header"><div><h2>姿态模型</h2><p>只读模型来源信息；原型不会执行推理。</p></div></div><div class="settings-body"><div class="key-value"><span>能力</span><strong>person Pose · 17 关键点</strong></div><div class="key-value"><span>锁定状态</span><strong>演示基线已记录</strong></div><p class="settings-note">姿态输出不等同于摔倒概率；事件判断由时序状态机负责。</p></div></article>
+          <article class="card settings-card wide"><div class="card-header"><div><h2>事件与重连草稿</h2><p>这些值为原型演示字段。修改后会标为“编辑中”，不会热修改实时监控。</p></div></div><div class="settings-body"><form id="settings-form"><div class="setting-form"><label class="setting-label">确认持续时间（秒）<small>目标范围 1–3 秒</small><input id="confirm-seconds" type="number" min="1" max="3" step="0.1" value="1.8"></label><label class="setting-label">恢复冷却（秒）<small>确认后再允许新事件</small><input id="cooldown-seconds" type="number" min="1" max="120" step="1" value="18"></label><label class="setting-label">关键点质量阈值<small>低质量姿态不产生候选</small><input id="quality-threshold" type="number" min="0" max="1" step="0.01" value="0.65"></label><label class="setting-label">重连初始等待（秒）<small>断流期间不报警</small><input id="reconnect-seconds" type="number" min="1" max="60" step="1" value="4"></label><label class="setting-label">最大重连等待（秒）<small>用于指数退避上限</small><input id="reconnect-max-seconds" type="number" min="1" max="300" step="1" value="30"></label><label class="setting-label">事件冷却复核（秒）<small>避免重复副作用</small><input id="event-debounce-seconds" type="number" min="1" max="120" step="1" value="12"></label></div><div class="setting-actions"><div class="config-versions">运行版本：<strong>cfg-20260720-01</strong><br>草稿仅在下一次开始监控时成为新的运行配置。</div><div class="settings-buttons"><button id="reset-settings" type="button">恢复演示默认值</button><button type="submit" class="primary-action">保存草稿</button></div></div></form></div></article>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer-note"><span><strong>适用边界：</strong>固定俯视大厅或走廊、单路、全身大部分可见的演示条件。</span><span>HTML 交互原型 · 不替代事件级验收</span></footer>
+  </div>
+
+  <div id="live-status" aria-live="polite" class="sr-only"></div>
+  <div id="toast" class="toast" role="status" aria-live="polite"></div>
+
+  <dialog id="fall-dialog" aria-labelledby="dialog-title" aria-describedby="dialog-description">
+    <div class="dialog-heading"><span class="dialog-symbol" aria-hidden="true">!</span><div><h2 id="dialog-title">确认摔倒</h2><p>已生成一次本地报警副作用</p></div></div>
+    <div class="dialog-body"><p id="dialog-description">人员 P-017 的倒地证据已持续满足确认条件。请按现场流程确认情况。</p><div class="dialog-details"><div><span>确认时间</span><strong id="dialog-time">12:08:42</strong></div><div><span>确认延迟</span><strong>1.8 秒</strong></div><div><span>事件编号</span><strong>FALL-00017</strong></div><div><span>截图状态</span><strong>已保存（演示）</strong></div></div></div>
+    <div class="dialog-actions"><button id="acknowledge-button" type="button">我已知晓</button></div>
+  </dialog>
+
+  <script>
+    (function () {
+      "use strict";
+      var app = document.getElementById("app");
+      var dialog = document.getElementById("fall-dialog");
+      var acknowledgeButton = document.getElementById("acknowledge-button");
+      var stateButtons = Array.prototype.slice.call(document.querySelectorAll("[data-state-target]"));
+      var topTabs = Array.prototype.slice.call(document.querySelectorAll("[data-tab-target]"));
+      var monitorPanel = document.getElementById("monitor-panel");
+      var settingsPanel = document.getElementById("settings-panel");
+      var liveStatus = document.getElementById("live-status");
+      var toast = document.getElementById("toast");
+      var monitorToggle = document.getElementById("monitor-toggle");
+      var settingsForm = document.getElementById("settings-form");
+      var resetSettingsButton = document.getElementById("reset-settings");
+      var settingInputs = Array.prototype.slice.call(settingsForm.querySelectorAll("input"));
+      var configState = document.getElementById("config-state");
+      var configStateText = document.getElementById("config-state-text");
+      var draftVersion = document.getElementById("draft-version");
+      var activeTab = "monitor";
+      var lastInvoker = null;
+      var confirmedDialogShown = false;
+      var toastTimer = null;
+      var draftRevision = 2;
+      var defaults = {};
+
+      settingInputs.forEach(function (input) { defaults[input.id] = input.value; });
+
+      var views = {
+        normal: {
+          sceneState: "NORMAL",
+          source: "来源在线 · 模拟画面",
+          track: "P-017 · 姿态可用",
+          title: "NORMAL · 正常监控",
+          mark: "✓",
+          time: "稳定观察中",
+          description: "当前人员姿态稳定，没有生成摔倒候选或报警副作用。",
+          caption: "全身大部分可见，姿态质量满足监控条件。",
+          people: "1 · P-017", quality: "良好", latency: "—", alert: "未触发",
+          evidenceStatus: "当前无待处理事件", artifactStatus: "监控中", artifactTitle: "本地声音：未触发", artifactPath: "当前没有已保存截图。",
+          evidence: [["视频来源", "在线"], ["姿态质量", "通过"], ["状态机", "NORMAL"]],
+          events: [["持续监控", "P-017 姿态稳定，未生成候选", "normal"], ["质量门控通过", "全身关键点可用于后续判断", "normal"], ["报警保持静默", "无确认事件，不播放声音", "normal"]],
+          announcement: "已切换到正常监控。当前没有生成摔倒事件或报警。"
+        },
+        confirmed: {
+          sceneState: "CONFIRMED · FALL-00017",
+          source: "来源在线 · 事件已确认",
+          track: "P-017 · 确认倒地",
+          title: "CONFIRMED · 已确认摔倒",
+          mark: "!",
+          time: "12:08:42 · 已确认",
+          description: "倒地证据持续 1.8 秒，已创建单个事件并完成声音、弹窗与截图演示。",
+          caption: "红色仅表示确认摔倒事件及其证据；关闭弹窗后，事件证据保持可追溯。",
+          people: "1 · P-017", quality: "良好", latency: "1.8 秒", alert: "已触发一次",
+          evidenceStatus: "确认事件 · 证据已冻结", artifactStatus: "FALL-00017", artifactTitle: "声音与截图：已触发（演示）", artifactPath: "events/20260720/FALL-00017.png · 原型不创建文件",
+          evidence: [["事件编号", "FALL-00017"], ["确认延迟", "1.8 秒"], ["报警副作用", "一次"], ["配置版本", "cfg-20260720-01"]],
+          events: [["确认摔倒", "12:08:42 · P-017 · FALL-00017", "confirmed"], ["截图已保存", "仅展示演示路径，不写入文件", "confirmed"], ["声音已播放", "同一事件不重复播放", "confirmed"]],
+          announcement: "已确认摔倒事件 FALL-00017。声音、弹窗和截图证据均只触发一次。"
+        },
+        offline: {
+          sceneState: "SOURCE RETRYING",
+          source: "视频源异常 · 正在重连",
+          track: "上一帧姿态已冻结",
+          title: "SOURCE ERROR · 连接异常",
+          mark: "—",
+          time: "重试第 2 次",
+          description: "视频源暂不可用。系统停止推进人员和倒地证据；断流本身不代表摔倒。",
+          caption: "正在重连期间保留最后一帧演示画面，不生成新的人员或摔倒结论。",
+          people: "—", quality: "不可用", latency: "—", alert: "未触发",
+          evidenceStatus: "事件处理已暂停", artifactStatus: "重连中", artifactTitle: "本地声音：未触发", artifactPath: "等待视频源恢复后继续监控。",
+          evidence: [["视频源状态", "重连中"], ["人员更新", "已暂停"], ["摔倒事件", "不触发"]],
+          events: [["视频源不可用", "12:08:42 · 已保留最后一帧", "offline"], ["第 2 次重连等待中", "4 秒后再次尝试", "offline"], ["报警保持静默", "连接异常不生成摔倒事件", "offline"]],
+          announcement: "视频源连接异常，正在重连。没有生成摔倒事件或报警。"
+        }
+      };
+
+      function setText(id, value) { document.querySelector(id).textContent = value; }
+      function eventMarkup(rows) {
+        return rows.map(function (row) {
+          return "<div class='event-row'><span class='event-symbol " + row[2] + "' aria-hidden='true'></span><div class='event-copy'><strong>" + row[0] + "</strong><span>" + row[1] + "</span></div></div>";
+        }).join("");
+      }
+      function evidenceMarkup(rows) {
+        return rows.map(function (row) {
+          return "<div class='evidence-row'><span class='evidence-shape' aria-hidden='true'></span><strong>" + row[0] + "</strong><span>" + row[1] + "</span></div>";
+        }).join("");
+      }
+      function showToast(message) {
+        toast.textContent = message;
+        toast.classList.add("is-visible");
+        window.clearTimeout(toastTimer);
+        toastTimer = window.setTimeout(function () { toast.classList.remove("is-visible"); }, 3600);
+      }
+      function setActiveTab(nextTab, moveFocus) {
+        if (nextTab !== "monitor" && nextTab !== "settings") return;
+        activeTab = nextTab;
+        topTabs.forEach(function (tab) {
+          var selected = tab.dataset.tabTarget === nextTab;
+          tab.setAttribute("aria-selected", String(selected));
+          tab.setAttribute("tabindex", selected ? "0" : "-1");
+          if (selected && moveFocus) tab.focus();
+        });
+        monitorPanel.hidden = nextTab !== "monitor";
+        settingsPanel.hidden = nextTab !== "settings";
+        liveStatus.textContent = nextTab === "settings" ? "已切换至设置。草稿保存后在下一次开始监控时生效。" : "已切换至实时监控。当前运行配置保持不变。";
+      }
+      function setDemoState(nextState, invoker) {
+        var view = views[nextState];
+        if (!view) return;
+        if (invoker) lastInvoker = invoker;
+        app.dataset.state = nextState;
+        stateButtons.forEach(function (button) { button.setAttribute("aria-pressed", String(button.dataset.stateTarget === nextState)); });
+        setText("#scene-state", view.sceneState); setText("#source-status", view.source); setText("#track-label", view.track);
+        setText("#state-heading", view.title); setText("#state-mark", view.mark); setText("#state-time", view.time);
+        setText("#state-description", view.description); setText("#scene-caption", view.caption);
+        setText("#metric-people", view.people); setText("#metric-quality", view.quality); setText("#metric-latency", view.latency); setText("#metric-alert", view.alert);
+        setText("#evidence-status", view.evidenceStatus); setText("#artifact-status", view.artifactStatus); setText("#artifact-title", view.artifactTitle); setText("#artifact-path", view.artifactPath);
+        setText("#event-count", nextState === "confirmed" ? "1 个确认事件" : view.artifactStatus);
+        document.getElementById("evidence-panel").innerHTML = evidenceMarkup(view.evidence);
+        document.getElementById("event-list").innerHTML = eventMarkup(view.events);
+        liveStatus.textContent = view.announcement;
+        if (nextState === "confirmed" && !confirmedDialogShown) {
+          confirmedDialogShown = true;
+          setText("#dialog-time", document.getElementById("scene-time").textContent);
+          if (typeof dialog.showModal === "function" && !dialog.open) {
+            dialog.showModal();
+            window.setTimeout(function () { acknowledgeButton.focus(); }, 0);
+          }
+        }
+        if (nextState !== "confirmed") {
+          confirmedDialogShown = false;
+          if (dialog.open) dialog.close();
+        }
+      }
+      function markConfigDirty() {
+        settingsPanel.dataset.configState = "dirty";
+        configState.dataset.configState = "dirty";
+        configStateText.textContent = "设置已修改，尚未保存";
+        draftVersion.textContent = "cfg-20260720-0" + (draftRevision + 1) + " · 编辑中";
+      }
+      function resetSettings() {
+        settingInputs.forEach(function (input) { input.value = defaults[input.id]; });
+        markConfigDirty();
+        showToast("已恢复演示默认值；请保存后在下一次启动监控时应用。");
+      }
+      function saveSettings() {
+        draftRevision += 1;
+        settingsPanel.dataset.configState = "saved";
+        configState.dataset.configState = "saved";
+        configStateText.textContent = "草稿已保存，下一次启动生效";
+        draftVersion.textContent = "cfg-20260720-0" + draftRevision + " · 已保存待应用";
+        liveStatus.textContent = "设置草稿已保存。当前监控仍使用 cfg-20260720-01，下一次开始监控时才使用新版本。";
+        showToast("演示草稿已保存；运行配置未被热修改。");
+      }
+      function updateClock() {
+        var time = new Date().toLocaleTimeString("zh-CN", { hour12: false });
+        document.getElementById("clock").textContent = time;
+        document.getElementById("scene-time").textContent = time;
+      }
+
+      topTabs.forEach(function (tab) { tab.addEventListener("click", function () { setActiveTab(tab.dataset.tabTarget, false); }); });
+      stateButtons.forEach(function (button) { button.addEventListener("click", function () { setDemoState(button.dataset.stateTarget, button); }); });
+      settingInputs.forEach(function (input) { input.addEventListener("input", markConfigDirty); });
+      resetSettingsButton.addEventListener("click", resetSettings);
+      settingsForm.addEventListener("submit", function (event) { event.preventDefault(); saveSettings(); });
+      acknowledgeButton.addEventListener("click", function () { dialog.close(); });
+      dialog.addEventListener("close", function () { if (lastInvoker && typeof lastInvoker.focus === "function") lastInvoker.focus(); });
+      monitorToggle.addEventListener("click", function () {
+        var running = app.dataset.running === "true";
+        app.dataset.running = String(!running);
+        monitorToggle.setAttribute("aria-pressed", String(!running));
+        monitorToggle.querySelector("span").textContent = running ? "开始模拟监控" : "停止模拟监控";
+        showToast(running ? "原型已暂停更新：未停止任何真实视频源。" : "原型已恢复更新：仍未连接真实视频源。");
+      });
+      document.getElementById("artifact-button").addEventListener("click", function () {
+        showToast(app.dataset.state === "confirmed" ? "演示截图位置：events/20260720/FALL-00017.png（原型不创建文件）。" : "当前没有已保存截图；切换到“确认摔倒”可查看报警工件状态。");
+      });
+      document.addEventListener("keydown", function (event) {
+        if (event.altKey || event.ctrlKey || event.metaKey) return;
+        var tabIndex = topTabs.indexOf(document.activeElement);
+        if (tabIndex !== -1 && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+          event.preventDefault();
+          var direction = event.key === "ArrowRight" ? 1 : -1;
+          var nextIndex = (tabIndex + direction + topTabs.length) % topTabs.length;
+          setActiveTab(topTabs[nextIndex].dataset.tabTarget, true);
+          return;
+        }
+        if (document.activeElement && document.activeElement.matches("input")) return;
+        var stateMap = { "1": "normal", "2": "confirmed", "3": "offline" };
+        if (activeTab === "monitor" && stateMap[event.key]) setDemoState(stateMap[event.key], document.querySelector("[data-state-target='" + stateMap[event.key] + "']"));
+        if (event.key === "Escape" && dialog.open) dialog.close();
+      });
+
+      if (window.location.hash === "#settings") setActiveTab("settings", false);
+      var initialState = window.location.hash === "#confirmed" ? "confirmed" : window.location.hash === "#offline" ? "offline" : "normal";
+      setDemoState(initialState);
+      updateClock();
+      window.setInterval(updateClock, 1000);
+    }());
+  </script>
+</body>
+</html>
@@ -62,3 +62,12 @@
 - 阻塞：按本轮用户范围未修改 HTML。现有 HTML 为深色历史原型，不能作为正式色彩实现来源，需在后续单独重绘。
 - 决策：后续 PyQt T-201 与任何新的 HTML 原型必须以浅色 Windows 主题规范为准，不得将红色用于非确认摔倒场景。
 - 下一步：等待用户授权，将 docs/ui/silver-pose-v1-prototype.html 重绘为浅色主题。
+
+## 【2026-07-20】DESIGN 浅色 Windows HTML 原型修订
+
+- 状态：DONE
+- 变更：新增 `docs/ui/silver-pose-v2-prototype.html` 作为独立离线原型。它使用浅灰蓝页面背景、白色卡片和集中 CSS 令牌；红色只用于确认摔倒、告警弹窗和事件证据。保留顶部双 Tab、正常/确认/断流三种状态、一次性告警弹窗、设置草稿及下一次启动生效边界；未改动历史深色 v1 原型。
+- 验证：Node.js 22 已解析唯一内联脚本，并检查状态控件、Tab、弹窗、三个响应式断点及浅色主题令牌；隐私与网络边界扫描未发现凭证、模型路径或网络行为；`./init.ps1` 通过。Chrome 无界面模式实际渲染了正常、确认摔倒、连接异常、900 宽设置和 600 宽设置画面；确认摔倒显示红色弹窗，连接异常不显示红色告警，窄宽度为纵向重排。
+- 阻塞：无。原型不连接真实摄像头、模型、声音或文件系统；截图路径和事件均为演示数据。
+- 决策：文件名中的 v2 仅表示 HTML 视觉修订，不启动 Go V2，也不改变 V1 验收和 ONNX 一致性门槛。
+- 下一步：T-101；后续 T-201 以 v2 HTML 和 UI/UX 规格实现 PyQt 浅色 Windows 界面。