zouhaitao/stc32g128k
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add Card 11 (Arm/Disarm setting select) to wristband_ui_gallery.html

Browse Source
This commit is contained in:
zouhaitao
2026-07-09 18:12:25 +08:00
parent b15fca3629
commit afaf0bf360
1 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
Docs/40_ui-design/wristband_ui_gallery.html
View File

@@ -2,7 +2,7 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.1)</title>
<title>手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.2)</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -149,8 +149,8 @@
</head>
<body>
<div class="container">
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.1)</h1>
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明</div>
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.2)</h1>
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明（共 11 类）</div>
<div class="grid">
<!-- 1. Normal Clock -->
@@ -463,6 +463,35 @@
连发对码信号。长按 ■ 键 3 秒 或 长按 ▼ 键 2 秒可立刻退出返回时钟。
</div>
</div>
<!-- 11. Arm/Disarm Setting Select -->
<div class="card">
<div class="card-title">11. 手动布撤防设定</div>
<div class="card-desc">48x48px 锁/防区图标，无障碍大字状态指示</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<text x="60" y="35" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="14" font-weight="bold" text-anchor="middle">REG. ALARME</text>
<!-- 48x48px Big Lock Icon representing ARME selection -->
<g transform="translate(36, 65)">
<rect x="6" y="16" width="36" height="26" rx="4" fill="none" stroke="#EF4444" stroke-width="3"/>
<path d="M 12 16 L 12 10 C 12 5, 36 5, 36 10 L 36 16" fill="none" stroke="#EF4444" stroke-width="3" stroke-linecap="round"/>
<circle cx="24" cy="28" r="3.5" fill="#EF4444"/>
</g>
<!-- Large active state option in brackets -->
<text x="60" y="165" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">[ ARME ]</text>
<text x="60" y="210" fill="#64748B" font-family="system-ui, sans-serif" font-size="14" text-anchor="middle">^ v</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>按键操作：</b>
按 ▲/▼ 键来回切换 `[ ARME ]` 和 `[ DESARME ]`；短按 ■ 确认保存退出；长按 ■ 3s 放弃退出。
</div>
</div>
</div>
</div>
</body>