646 lines
33 KiB
HTML
646 lines
33 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Wristband Accessibility Big Font UI Gallery (A11y V3.4)</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
|
|
background-color: #0A0D14;
|
||
|
|
color: #E2E8F0;
|
||
|
|
margin: 0;
|
||
|
|
padding: 40px 20px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 页面居中大框容器 */
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 页面大标题 */
|
||
|
|
h1 {
|
||
|
|
font-size: 2.2rem;
|
||
|
|
color: #00E5FF;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 页面副标题 */
|
||
|
|
.subtitle {
|
||
|
|
text-align: center;
|
||
|
|
color: #94A3B8;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
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 {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 40px;
|
||
|
|
justify-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 每一个卡片的样式 */
|
||
|
|
.card {
|
||
|
|
background-color: #161B22;
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid #30363D;
|
||
|
|
padding: 24px;
|
||
|
|
text-align: center;
|
||
|
|
width: 270px;
|
||
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
||
|
|
transition: transform 0.2s, border-color 0.2s;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
border-color: #00E5FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 卡片内标题 */
|
||
|
|
.card-title {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #FFFFFF;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 卡片内简短描述 */
|
||
|
|
.card-desc {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: #8B949E;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
height: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 智能手环 CSS 仿真外壳 */
|
||
|
|
.watch-device {
|
||
|
|
position: relative;
|
||
|
|
width: 160px;
|
||
|
|
height: 280px;
|
||
|
|
background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
|
||
|
|
border-radius: 35px;
|
||
|
|
border: 5px solid #4A5568;
|
||
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 10px 20px rgba(0, 0, 0, 0.6);
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 表带连接件仿真效果 (上) */
|
||
|
|
.watch-device::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: -20px;
|
||
|
|
left: 45px;
|
||
|
|
width: 70px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: #2D3748;
|
||
|
|
border-radius: 5px 5px 0 0;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 表带连接件仿真效果 (下) */
|
||
|
|
.watch-device::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: -20px;
|
||
|
|
left: 45px;
|
||
|
|
width: 70px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: #2D3748;
|
||
|
|
border-radius: 0 0 5px 5px;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 屏幕物理边框 */
|
||
|
|
.screen-bezel {
|
||
|
|
position: relative;
|
||
|
|
width: 130px;
|
||
|
|
height: 250px;
|
||
|
|
background-color: #000000;
|
||
|
|
border-radius: 25px;
|
||
|
|
border: 2px solid #0D1117;
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SVG 自动适应屏幕比例 */
|
||
|
|
.screen-bezel svg {
|
||
|
|
width: 120px;
|
||
|
|
height: 240px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 底部按键操作说明框 */
|
||
|
|
.card-ops {
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: #E2E8F0;
|
||
|
|
margin-top: 20px;
|
||
|
|
text-align: left;
|
||
|
|
background-color: #0D1117;
|
||
|
|
padding: 12px;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid #21262D;
|
||
|
|
min-height: 70px;
|
||
|
|
flex-grow: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 操作说明高亮前缀 */
|
||
|
|
.card-ops b {
|
||
|
|
color: #FFB74D;
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Wristband Accessibility Big Font UI Gallery (A11y V3.4)</h1>
|
||
|
|
<div class="subtitle">Concentrated single-page display of large-font, large-icon UI screens and button
|
||
|
|
interaction instructions optimized for special groups (13 categories of complete UI screens)</div>
|
||
|
|
|
||
|
|
<div class="section-title">Part 1: Normal Standby Clock Screen (STATE_CLOCK)</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">1. Standby Clock (Disarmed)</div>
|
||
|
|
<div class="card-desc">Normal time display, large battery percentage, with a large unlock icon 🔓 on the
|
||
|
|
left</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" />
|
||
|
|
<g transform="translate(10, 15)">
|
||
|
|
<rect x="0" y="8" width="20" height="15" rx="3" fill="none" stroke="#10B981"
|
||
|
|
stroke-width="2" />
|
||
|
|
<path d="M 5 8 L 5 4 C 5 2, 12 2, 15 4 L 15 10" fill="none" stroke="#10B981"
|
||
|
|
stroke-width="2" stroke-linecap="round" />
|
||
|
|
</g>
|
||
|
|
<text x="82" y="32" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="end">85%</text>
|
||
|
|
<rect x="86" y="19" width="24" height="13" rx="2" fill="none" stroke="#FFFFFF"
|
||
|
|
stroke-width="1.8" />
|
||
|
|
<rect x="89" y="22" width="15" height="7" rx="0.5" fill="#10B981" />
|
||
|
|
<rect x="110" y="23" width="1.5" height="5" rx="0.5" fill="#FFFFFF" />
|
||
|
|
|
||
|
|
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34"
|
||
|
|
font-weight="bold" text-anchor="middle">10:35</text>
|
||
|
|
<text x="60" y="150" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="16"
|
||
|
|
font-weight="bold" text-anchor="middle">AM</text>
|
||
|
|
<text x="60" y="195" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">FRI 07-10</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Long press ■ confirm key for 3 seconds to enter main menu; <b>long press ▲ (UP) key to toggle
|
||
|
|
Arm/Disarm</b>; short or long press SOS key directly triggers [Local Active Alarm].
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">2. Standby Clock (Armed)</div>
|
||
|
|
<div class="card-desc">Normal time display, large battery percentage, with a large red lock icon 🔒 on
|
||
|
|
the left</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" />
|
||
|
|
<g transform="translate(10, 15)">
|
||
|
|
<rect x="0" y="8" width="20" height="15" rx="3" fill="none" stroke="#EF4444"
|
||
|
|
stroke-width="2" />
|
||
|
|
<path d="M 5 8 L 5 3 C 5 1, 15 1, 15 3 L 15 8" fill="none" stroke="#EF4444"
|
||
|
|
stroke-width="2" stroke-linecap="round" />
|
||
|
|
</g>
|
||
|
|
<text x="82" y="32" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="end">85%+</text>
|
||
|
|
<rect x="86" y="19" width="24" height="13" rx="2" fill="none" stroke="#FFFFFF"
|
||
|
|
stroke-width="1.8" />
|
||
|
|
<rect x="89" y="22" width="15" height="7" rx="0.5" fill="#10B981" />
|
||
|
|
<rect x="110" y="23" width="1.5" height="5" rx="0.5" fill="#FFFFFF" />
|
||
|
|
|
||
|
|
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34"
|
||
|
|
font-weight="bold" text-anchor="middle">10:35</text>
|
||
|
|
<text x="60" y="150" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="16"
|
||
|
|
font-weight="bold" text-anchor="middle">PM</text>
|
||
|
|
<text x="60" y="195" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">FRI 07-10</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Long press ■ confirm key for 3 seconds to enter main menu; <b>long press ▲ (UP) key to toggle
|
||
|
|
Arm/Disarm</b>; short or long press SOS key directly triggers [Local Active Alarm].
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section-title">Part 2: Main Menu Screen (STATE_MENU)</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">3. Main Menu: 1. Time Settings</div>
|
||
|
|
<div class="card-desc">Menu Item 1: Large clock icon with extra large menu text</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" />
|
||
|
|
<path d="M 52 30 L 60 20 L 68 30 Z" fill="#64748B" />
|
||
|
|
|
||
|
|
<g transform="translate(36, 65)">
|
||
|
|
<circle cx="24" cy="24" r="20" stroke="#00E5FF" stroke-width="3" fill="none" />
|
||
|
|
<path d="M 24 10 L 24 24 L 34 24" stroke="#00E5FF" stroke-width="3"
|
||
|
|
stroke-linecap="round" fill="none" />
|
||
|
|
<path d="M 8 6 L 16 2 M 40 6 L 32 2" stroke="#00E5FF" stroke-width="3.5"
|
||
|
|
stroke-linecap="round" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">1. CLOCK</text>
|
||
|
|
|
||
|
|
<path d="M 52 210 L 60 220 L 68 210 Z" fill="#64748B" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Press ▲/▼ keys to browse menu items; short press ■ to confirm entry; long press ■ for 3 seconds to
|
||
|
|
return to clock.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">4. Main Menu: 2. Sensor Pairing</div>
|
||
|
|
<div class="card-desc">Menu Item 2: Large radar pairing icon with pairing text</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" />
|
||
|
|
<path d="M 52 30 L 60 20 L 68 30 Z" fill="#64748B" />
|
||
|
|
|
||
|
|
<g transform="translate(36, 65)">
|
||
|
|
<path
|
||
|
|
d="M 24 38 A 12 12 0 0 1 36 28 M 24 38 A 18 18 0 0 1 42 22 M 24 38 A 24 24 0 0 1 48 16"
|
||
|
|
stroke="#00E5FF" stroke-width="3" fill="none" stroke-linecap="round" />
|
||
|
|
<circle cx="24" cy="38" r="4" fill="#00E5FF" />
|
||
|
|
<line x1="24" y1="38" x2="6" y2="44" stroke="#00E5FF" stroke-width="2.5" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">2. PAIR</text>
|
||
|
|
|
||
|
|
<path d="M 52 210 L 60 220 L 68 210 Z" fill="#64748B" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Press ▲/▼ keys to browse menu items; short press ■ to confirm entry to start pairing search; long
|
||
|
|
press ■ for 3 seconds to return to clock.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">5. Main Menu: 3. Camera Binding</div>
|
||
|
|
<div class="card-desc">Menu Item 3: Large camera icon with binding text</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" />
|
||
|
|
<path d="M 52 30 L 60 20 L 68 30 Z" fill="#64748B" />
|
||
|
|
|
||
|
|
<g transform="translate(36, 65)">
|
||
|
|
<rect x="4" y="14" width="30" height="24" rx="3" fill="none" stroke="#00E5FF"
|
||
|
|
stroke-width="3" />
|
||
|
|
<circle cx="19" cy="26" r="6" stroke="#00E5FF" stroke-width="2.5" fill="none" />
|
||
|
|
<path d="M 34 20 L 44 14 L 44 38 L 34 32 Z" fill="#00E5FF" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">3. BIND</text>
|
||
|
|
|
||
|
|
<path d="M 52 210 L 60 220 L 68 210 Z" fill="#64748B" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Press ▲/▼ keys to browse menu items; short press ■ to confirm entry into camera binding page; long
|
||
|
|
press ■ for 3 seconds to return to clock.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section-title">Part 3: Sub-setting Flow 1 - Time Adjustment (STATE_SET_TIME)</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">6. Time Edit: Select Hours (Blinking)</div>
|
||
|
|
<div class="card-desc">The actively selected digits (e.g., hours '10') will continuously blink on and
|
||
|
|
off.</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" />
|
||
|
|
|
||
|
|
<g transform="translate(10, 15)">
|
||
|
|
<rect x="0" y="8" width="20" height="15" rx="3" fill="none" stroke="#10B981"
|
||
|
|
stroke-width="2" />
|
||
|
|
<path d="M 5 8 L 5 4 C 5 2, 12 2, 15 4 L 15 10" fill="none" stroke="#10B981"
|
||
|
|
stroke-width="2" stroke-linecap="round" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="82" y="32" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="end">85%+</text>
|
||
|
|
<rect x="86" y="19" width="24" height="13" rx="2" fill="none" stroke="#FFFFFF"
|
||
|
|
stroke-width="1.8" />
|
||
|
|
<rect x="89" y="22" width="15" height="7" rx="0.5" fill="#10B981" />
|
||
|
|
<rect x="110" y="23" width="1.5" height="5" rx="0.5" fill="#FFFFFF" />
|
||
|
|
|
||
|
|
<text x="52" y="115" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="34"
|
||
|
|
font-weight="bold" text-anchor="end">10</text>
|
||
|
|
<text x="60" y="113" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34"
|
||
|
|
font-weight="bold" text-anchor="middle">:</text>
|
||
|
|
<text x="68" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34"
|
||
|
|
font-weight="bold" text-anchor="start">35</text>
|
||
|
|
|
||
|
|
<text x="60" y="150" fill="#E2E8F0" font-family="system-ui, sans-serif" font-size="16"
|
||
|
|
font-weight="bold" text-anchor="middle">AM</text>
|
||
|
|
|
||
|
|
<text x="60" y="195" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">FRI 07-10</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Long press ■ confirm key to enter edit mode; short press ▲/▼ to adjust the currently blinking
|
||
|
|
number; long press ■ to jump to the next field (Minutes blink); short press ■ to save and exit edit
|
||
|
|
mode.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section-title">Part 4: Sub-setting Flow 2 - Sensor Pairing (STATE_PAIR)</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">7. Radar Pairing Search</div>
|
||
|
|
<div class="card-desc">64x64px extra large radar flashing animation, waiting for pairing signal</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">PAIRING</text>
|
||
|
|
|
||
|
|
<g transform="translate(28, 65)">
|
||
|
|
<path
|
||
|
|
d="M 32 50 C 32 30, 48 10, 60 10 M 32 50 C 32 35, 42 20, 52 20 M 32 50 C 32 40, 36 30, 44 30"
|
||
|
|
stroke="#00E5FF" stroke-width="3" fill="none" stroke-linecap="round" />
|
||
|
|
<circle cx="32" cy="50" r="5" fill="#00E5FF" />
|
||
|
|
<line x1="32" y1="50" x2="8" y2="58" stroke="#00E5FF" stroke-width="3" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="14"
|
||
|
|
font-weight="bold" text-anchor="middle">SEARCHING</text>
|
||
|
|
<text x="60" y="200" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="13"
|
||
|
|
font-weight="bold" text-anchor="middle">TRIGGER DET.</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Trigger the physical sensor. After capturing data, the wristband will <b>automatically identify the
|
||
|
|
type by data code and jump to the confirmation page</b>. Long press ▼ for 2 seconds to exit.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">8. Identify Type and Adjust ID</div>
|
||
|
|
<div class="card-desc">Auto-display type and large icon, adjust index number inside large box directly
|
||
|
|
</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="32" fill="#10B981" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">✓ RECEIVED</text>
|
||
|
|
|
||
|
|
<g transform="translate(36, 45)">
|
||
|
|
<rect x="2" y="2" width="24" height="42" rx="3" fill="none" stroke="#FFFFFF"
|
||
|
|
stroke-width="2.5" />
|
||
|
|
<rect x="30" y="8" width="10" height="30" rx="1.5" fill="none" stroke="#10B981"
|
||
|
|
stroke-width="2.5" />
|
||
|
|
<circle cx="8" cy="24" r="2.5" fill="#FFFFFF" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="60" y="130" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">DOOR</text>
|
||
|
|
|
||
|
|
<rect x="15" y="152" width="90" height="44" rx="6" fill="none" stroke="#00E5FF"
|
||
|
|
stroke-width="2" />
|
||
|
|
<text x="60" y="186" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="34"
|
||
|
|
font-weight="bold" text-anchor="middle">01</text>
|
||
|
|
|
||
|
|
<text x="60" y="225" fill="#64748B" font-family="system-ui, sans-serif" font-size="13"
|
||
|
|
font-weight="bold" text-anchor="middle">CONFIRM</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Press ▲ to increase, ▼ to decrease the index number (01-99); short press ■ to save; long press ■ for
|
||
|
|
3 seconds to cancel.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">9. Pairing Saved Successfully</div>
|
||
|
|
<div class="card-desc">Accessibility big font: circle with checkmark, green success indicator</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" />
|
||
|
|
|
||
|
|
<circle cx="60" cy="90" r="24" stroke="#10B981" stroke-width="2.5" fill="none" />
|
||
|
|
<path d="M 48 90 L 56 98 L 72 82" stroke="#10B981" stroke-width="3.5" fill="none"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
||
|
|
|
||
|
|
<text x="60" y="150" fill="#10B981" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">SUCCESS</text>
|
||
|
|
<text x="60" y="185" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="13"
|
||
|
|
font-weight="bold" text-anchor="middle">SAVED</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Automatically returns to standby clock after showing for 2 seconds, no buttons required.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">10. Pairing Failed</div>
|
||
|
|
<div class="card-desc">Accessibility big font: red cross circle, warning to re-activate pairing</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" />
|
||
|
|
|
||
|
|
<circle cx="60" cy="90" r="24" stroke="#EF4444" stroke-width="2.5" fill="none" />
|
||
|
|
<path d="M 50 80 L 70 100 M 70 80 L 50 100" stroke="#EF4444" stroke-width="3.5" fill="none"
|
||
|
|
stroke-linecap="round" />
|
||
|
|
|
||
|
|
<text x="60" y="150" fill="#EF4444" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">FAILED</text>
|
||
|
|
<text x="60" y="185" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="12"
|
||
|
|
font-weight="bold" text-anchor="middle">PAIRED</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Automatically returns to pairing menu after showing for 5 seconds, or press any key to return
|
||
|
|
immediately.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section-title">Part 5: Sub-setting Flow 3 - IPC Camera Binding (STATE_IPC_BIND)</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">11. IPC Binding Transmission</div>
|
||
|
|
<div class="card-desc">48x48px camera icon, large status text and ID indicator</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" />
|
||
|
|
|
||
|
|
<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">BIND</text>
|
||
|
|
<text x="60" y="165" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="15"
|
||
|
|
font-weight="bold" text-anchor="middle">PAIRING...</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>Button Operations:</b>
|
||
|
|
Continuously sends pairing signal. Long press ■ for 3 seconds or long press ▼ for 2 seconds to exit
|
||
|
|
immediately and return to clock.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section-title">Part 6: Emergency Alarm Status (STATE_ALARMING / STATE_SOS_EMITTED)</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">12. Received Zone Alarm (DOOR)</div>
|
||
|
|
<div class="card-desc">Full screen flashing thick red border + 64x64px large sensor icon</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" />
|
||
|
|
<rect x="4" y="4" width="112" height="232" rx="20" stroke="#EF4444" stroke-width="4.5"
|
||
|
|
fill="none" />
|
||
|
|
|
||
|
|
<g transform="translate(28, 40)">
|
||
|
|
<rect x="2" y="2" width="32" height="58" rx="4" fill="none" stroke="#EF4444"
|
||
|
|
stroke-width="3.5" />
|
||
|
|
<rect x="42" y="12" width="14" height="42" rx="2" fill="none" stroke="#EF4444"
|
||
|
|
stroke-width="3" />
|
||
|
|
<circle cx="10" cy="32" r="3.5" fill="#EF4444" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="60" y="145" fill="#EF4444" font-family="system-ui, sans-serif" font-size="16"
|
||
|
|
font-weight="bold" text-anchor="middle">DOOR 01</text>
|
||
|
|
<text x="60" y="185" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="16"
|
||
|
|
font-weight="bold" text-anchor="middle">INTRUSION!</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
High-decibel motor and light alarms activated. Short press any key on the side or top of the
|
||
|
|
wristband to instantly dismiss the alarm and reset.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title">13. Local Active Help SOS</div>
|
||
|
|
<div class="card-desc">Huge alarm light, preventing overflow via word wraps and size allocation</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" />
|
||
|
|
<rect x="4" y="4" width="112" height="232" rx="20" stroke="#EF4444" stroke-width="4.5"
|
||
|
|
fill="none" />
|
||
|
|
|
||
|
|
<g transform="translate(28, 25)">
|
||
|
|
<path d="M 32 10 L 32 18 M 14 16 L 22 22 M 50 16 L 42 22 M 6 32 L 15 34 M 58 32 L 49 34"
|
||
|
|
stroke="#EF4444" stroke-width="3" stroke-linecap="round" />
|
||
|
|
<path d="M 12 52 C 12 28, 52 28, 52 52 Z" fill="#EF4444" stroke="#EF4444"
|
||
|
|
stroke-width="2" />
|
||
|
|
<circle cx="32" cy="45" r="7" fill="#FFFFFF" />
|
||
|
|
<rect x="6" y="52" width="52" height="8" rx="2" fill="#64748B" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="60" y="125" fill="#EF4444" font-family="system-ui, sans-serif" font-size="16"
|
||
|
|
font-weight="bold" text-anchor="middle">SOS</text>
|
||
|
|
<text x="60" y="152" fill="#EF4444" font-family="system-ui, sans-serif" font-size="16"
|
||
|
|
font-weight="bold" text-anchor="middle">SENT</text>
|
||
|
|
|
||
|
|
<text x="60" y="195" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="14"
|
||
|
|
font-weight="bold" text-anchor="middle">CALLING...</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-ops">
|
||
|
|
<b>Button Operations:</b>
|
||
|
|
Continuously sends SOS distress signal. Short or long press any button to stop transmission and
|
||
|
|
clear the emergency distress.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|