docs: group and reorder wristband_ui_gallery.html into logical parts by flow
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.3)</title>
|
<title>手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.4)</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;
|
||||||
@@ -27,7 +27,16 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #94A3B8;
|
color: #94A3B8;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #FFB74D;
|
||||||
|
border-left: 4px solid #FFB74D;
|
||||||
|
padding-left: 12px;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -54,7 +63,7 @@
|
|||||||
.card-title {
|
.card-title {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FFB74D;
|
color: #FFFFFF;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.card-desc {
|
.card-desc {
|
||||||
@@ -149,14 +158,16 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.3)</h1>
|
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.4)</h1>
|
||||||
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明（共 15 类全套界面）</div>
|
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明（共 15 类全套界面）</div>
|
||||||
|
|
||||||
|
<!-- ==================== PART 1 ==================== -->
|
||||||
|
<div class="section-title">第一部分：系统常态待机界面 (STATE_CLOCK)</div>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<!-- 1. Normal Clock -->
|
<!-- 1. Normal Clock -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">1. 待机时钟界面 (DESARME)</div>
|
<div class="card-title">1. 待机时钟 (撤防 DESARME)</div>
|
||||||
<div class="card-desc">撤防待机：超大数字时钟，状态栏左侧显示大解锁图标 🔓</div>
|
<div class="card-desc">正常走时，电量百分比大字显示，左侧带大解锁图标 🔓</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
|
||||||
@@ -190,8 +201,8 @@
|
|||||||
|
|
||||||
<!-- 2. Armed Clock -->
|
<!-- 2. Armed Clock -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">2. 系统布防时钟 (ARME)</div>
|
<div class="card-title">2. 系统待机时钟 (布防 ARME)</div>
|
||||||
<div class="card-desc">布防待机状态，状态栏左侧显示大红色锁图标 🔒</div>
|
<div class="card-desc">正常走时，电量百分比大字显示，左侧带大红色锁图标 🔒</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
|
||||||
@@ -219,13 +230,17 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-ops">
|
<div class="card-ops">
|
||||||
<b>按键操作：</b>
|
<b>按键操作：</b>
|
||||||
长按 ■ 确认键 3 秒进入主菜单；短按或长按 SOS 键直接触发【本地主动报警】。
|
长按 ■ 确认键 3 秒进入主选择菜单；短按或长按 SOS 键均直接触发【本地主动报警】。
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== PART 2 ==================== -->
|
||||||
|
<div class="section-title">第二部分：系统主选择菜单界面 (STATE_MENU)</div>
|
||||||
|
<div class="grid">
|
||||||
<!-- 3. Main Menu - Date/Time -->
|
<!-- 3. Main Menu - Date/Time -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">3. 主菜单: 时间修改</div>
|
<div class="card-title">3. 主菜单: 1.时间修改</div>
|
||||||
<div class="card-desc">菜单项 1：大时钟图标配合超大功能项文字</div>
|
<div class="card-desc">菜单项 1：大时钟图标配合超大功能项文字</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
@@ -253,7 +268,7 @@
|
|||||||
|
|
||||||
<!-- 4. Main Menu - Pairing -->
|
<!-- 4. Main Menu - Pairing -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">4. 主菜单: 传感器配对</div>
|
<div class="card-title">4. 主菜单: 2.传感器配对</div>
|
||||||
<div class="card-desc">菜单项 2：大雷达对码图标与对码文本</div>
|
<div class="card-desc">菜单项 2：大雷达对码图标与对码文本</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
@@ -281,7 +296,7 @@
|
|||||||
|
|
||||||
<!-- 5. Main Menu - Arm/Disarm -->
|
<!-- 5. Main Menu - Arm/Disarm -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">5. 主菜单: 手动布撤防</div>
|
<div class="card-title">5. 主菜单: 3.手动布撤防</div>
|
||||||
<div class="card-desc">菜单项 3：大盾牌防区图标与大字指示</div>
|
<div class="card-desc">菜单项 3：大盾牌防区图标与大字指示</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
@@ -302,13 +317,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-ops">
|
<div class="card-ops">
|
||||||
<b>按键操作：</b>
|
<b>按键操作：</b>
|
||||||
按 ▲/▼ 键翻看菜单选项；短按 ■ 确认进入手动布撤防选项页；长按 ■ 3秒返回时钟。
|
按 ▲/▼ 键翻看菜单选项；短按 ■ 确认进入手动布撤防页；长按 ■ 3秒返回时钟。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 6. Main Menu - Liaison -->
|
<!-- 6. Main Menu - Liaison -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">6. 主菜单: 摄像头绑定</div>
|
<div class="card-title">6. 主菜单: 4.摄像头绑定</div>
|
||||||
<div class="card-desc">菜单项 4：大摄像头图标与绑定文本</div>
|
<div class="card-desc">菜单项 4：大摄像头图标与绑定文本</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
@@ -333,7 +348,11 @@
|
|||||||
按 ▲/▼ 键翻看菜单选项；短按 ■ 确认进入摄像头绑定对码页；长按 ■ 3秒返回时钟。
|
按 ▲/▼ 键翻看菜单选项；短按 ■ 确认进入摄像头绑定对码页；长按 ■ 3秒返回时钟。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== PART 3 ==================== -->
|
||||||
|
<div class="section-title">第三部分：子设置流程 1 - 时间设定 (STATE_SET_TIME)</div>
|
||||||
|
<div class="grid">
|
||||||
<!-- 7. Single Value Time Edit -->
|
<!-- 7. Single Value Time Edit -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">7. 设定时间: 修改小时</div>
|
<div class="card-title">7. 设定时间: 修改小时</div>
|
||||||
@@ -362,11 +381,15 @@
|
|||||||
按 ▲ 增加数值，▼ 减少数值；短按 ■ 确认保存并切入分秒年等微调；长按 ■ 3s 放弃退出。
|
按 ▲ 增加数值，▼ 减少数值；短按 ■ 确认保存并切入分秒年等微调；长按 ■ 3s 放弃退出。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== PART 4 ==================== -->
|
||||||
|
<div class="section-title">第四部分：子设置流程 2 - 传感器配对 (STATE_PAIR)</div>
|
||||||
|
<div class="grid">
|
||||||
<!-- 8. Pairing Search -->
|
<!-- 8. Pairing Search -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">8. 雷达对码搜索</div>
|
<div class="card-title">8. 雷达对码搜索</div>
|
||||||
<div class="card-desc">64x64px 超大雷达闪烁动画，文字防超出优化</div>
|
<div class="card-desc">64x64px 超大雷达闪烁动画，等待对码信号</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
|
||||||
@@ -472,11 +495,81 @@
|
|||||||
自动显示 5 秒后回退到配对菜单，或短按任意键立即回退。
|
自动显示 5 秒后回退到配对菜单，或短按任意键立即回退。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 12. Alarm Received -->
|
<!-- ==================== PART 5 ==================== -->
|
||||||
|
<div class="section-title">第五部分：子设置流程 3 - 手动布撤防 (STATE_ARM_DISARM_SELECT)</div>
|
||||||
|
<div class="grid">
|
||||||
|
<!-- 12. Arm/Disarm Setting Select -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">12. 收到防区报警 (PORTE)</div>
|
<div class="card-title">12. 手动布撤防设定</div>
|
||||||
<div class="card-desc">全屏闪烁粗边框 + 64x64px 报警大图标</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>
|
||||||
|
|
||||||
|
<!-- ==================== PART 6 ==================== -->
|
||||||
|
<div class="section-title">第六部分：子设置流程 4 - IPC摄像头绑定 (STATE_IPC_BIND)</div>
|
||||||
|
<div class="grid">
|
||||||
|
<!-- 13. IPC Binding -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-title">13. IPC 绑定发送</div>
|
||||||
|
<div class="card-desc">48x48px 摄像头图标，大字发送与 ID 指示</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"/>
|
||||||
|
|
||||||
|
<!-- 48x48px Camera Icon -->
|
||||||
|
<g transform="translate(36, 40)">
|
||||||
|
<rect x="2" y="10" width="32" height="26" rx="4" fill="none" stroke="#00E5FF" stroke-width="3"/>
|
||||||
|
<circle cx="18" cy="23" r="6" stroke="#00E5FF" stroke-width="2.5" fill="none"/>
|
||||||
|
<path d="M 34 16 L 44 10 L 44 36 L 34 30 Z" fill="#00E5FF"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text x="60" y="130" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">LIAISON</text>
|
||||||
|
<text x="60" y="165" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">EN COURS</text>
|
||||||
|
|
||||||
|
<text x="60" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ID: 0x3F882</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-ops">
|
||||||
|
<b>按键操作：</b>
|
||||||
|
连发对码信号。长按 ■ 键 3 秒 或 长按 ▼ 键 2 秒可立刻退出返回时钟。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== PART 7 ==================== -->
|
||||||
|
<div class="section-title">第七部分：紧急警报触发状态 (STATE_ALARMING / STATE_SOS_EMITTED)</div>
|
||||||
|
<div class="grid">
|
||||||
|
<!-- 14. Alarm Received -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-title">14. 收到防区报警 (PORTE)</div>
|
||||||
|
<div class="card-desc">全屏闪烁粗红警告框 + 64x64px 报警传感器大图标</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
|
||||||
@@ -503,9 +596,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 13. Emitted SOS -->
|
<!-- 15. Emitted SOS -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">13. 本机主动求救 SOS</div>
|
<div class="card-title">15. 本机主动求救 SOS</div>
|
||||||
<div class="card-desc">巨大警灯，通过换行与字号分配，完全防止溢出</div>
|
<div class="card-desc">巨大警灯，通过换行与字号分配，完全防止溢出</div>
|
||||||
<div class="watch-device">
|
<div class="watch-device">
|
||||||
<div class="screen-bezel">
|
<div class="screen-bezel">
|
||||||
@@ -537,64 +630,6 @@
|
|||||||
连发 SOS 呼救信号。短按或长按任意按键均可停止发射并消除紧急求救。
|
连发 SOS 呼救信号。短按或长按任意按键均可停止发射并消除紧急求救。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 14. Arm/Disarm Setting Select -->
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-title">14. 手动布撤防设定</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>
|
|
||||||
|
|
||||||
<!-- 15. IPC Binding -->
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-title">15. IPC 绑定发送页</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"/>
|
|
||||||
|
|
||||||
<!-- 48x48px Camera Icon -->
|
|
||||||
<g transform="translate(36, 40)">
|
|
||||||
<rect x="2" y="10" width="32" height="26" rx="4" fill="none" stroke="#00E5FF" stroke-width="3"/>
|
|
||||||
<circle cx="18" cy="23" r="6" stroke="#00E5FF" stroke-width="2.5" fill="none"/>
|
|
||||||
<path d="M 34 16 L 44 10 L 44 36 L 34 30 Z" fill="#00E5FF"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<text x="60" y="130" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">LIAISON</text>
|
|
||||||
<text x="60" y="165" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">EN COURS</text>
|
|
||||||
|
|
||||||
<text x="60" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ID: 0x3F882</text>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-ops">
|
|
||||||
<b>按键操作：</b>
|
|
||||||
连发对码信号。长按 ■ 键 3 秒 或 长按 ▼ 键 2 秒可立刻退出返回时钟。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user