docs: add Card 11 (Arm/Disarm setting select) to wristband_ui_gallery.html
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.1)</title>
|
<title>手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.2)</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
@@ -149,8 +149,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.1)</h1>
|
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.2)</h1>
|
||||||
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明</div>
|
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明(共 11 类)</div>
|
||||||
|
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<!-- 1. Normal Clock -->
|
<!-- 1. Normal Clock -->
|
||||||
@@ -463,6 +463,35 @@
|
|||||||
连发对码信号。长按 ■ 键 3 秒 或 长按 ▼ 键 2 秒可立刻退出返回时钟。
|
连发对码信号。长按 ■ 键 3 秒 或 长按 ▼ 键 2 秒可立刻退出返回时钟。
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user