441 lines
20 KiB
HTML
441 lines
20 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Wristband OLED UI Gallery</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: 50px;
|
|||
|
|
}
|
|||
|
|
.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: #FFB74D;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
.card-desc {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: #8B949E;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
height: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Realistic Smartwatch CSS Simulator */
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Inlined SVG Scaling */
|
|||
|
|
.screen-bezel svg {
|
|||
|
|
width: 120px;
|
|||
|
|
height: 240px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Button operations instruction 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>手环 OLED 屏幕 UI 效果图画册 (V1.5)</h1>
|
|||
|
|
<div class="subtitle">所有 10 类显示界面在手环硬件上的 1:1 视觉仿真效果及按键映射说明</div>
|
|||
|
|
|
|||
|
|
<div class="grid">
|
|||
|
|
<!-- 1. Normal Clock -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">1. 待机时钟界面</div>
|
|||
|
|
<div class="card-desc">常规待机状态，顶部仅显示电量，界面宽裕</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"/>
|
|||
|
|
|
|||
|
|
<!-- Status Bar (Right: Battery Icon) -->
|
|||
|
|
<rect x="82" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
|
|||
|
|
<rect x="84" y="29" width="13" height="6" rx="1" fill="#10B981"/>
|
|||
|
|
<rect x="103" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
|
|||
|
|
<text x="76" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
|
|||
|
|
|
|||
|
|
<!-- Time -->
|
|||
|
|
<text x="60" y="115" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
|
|||
|
|
|
|||
|
|
<!-- Date -->
|
|||
|
|
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
长按 ▲ 键 3 秒进入配对菜单；双击 ▲+▼ 组合键切换布防；长按 SOS 键 5 秒触发【本机求救】。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 2. Armed Clock -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">2. 系统布防时钟</div>
|
|||
|
|
<div class="card-desc">布防锁定 🔒 移至正下方，完美避免电池重叠</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"/>
|
|||
|
|
|
|||
|
|
<!-- Status Bar (Right: Battery Icon) -->
|
|||
|
|
<rect x="82" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
|
|||
|
|
<rect x="84" y="29" width="13" height="6" rx="1" fill="#10B981"/>
|
|||
|
|
<rect x="103" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
|
|||
|
|
<text x="76" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
|
|||
|
|
|
|||
|
|
<!-- Time -->
|
|||
|
|
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
|
|||
|
|
|
|||
|
|
<!-- Date -->
|
|||
|
|
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
|
|||
|
|
|
|||
|
|
<!-- Armed Status at the very bottom (Y=205) -->
|
|||
|
|
<g transform="translate(36, 192)">
|
|||
|
|
<rect x="0" y="0" width="12" height="12" rx="2" fill="none" stroke="#EF4444" stroke-width="1.2"/>
|
|||
|
|
<circle cx="6" cy="4" r="2.5" fill="none" stroke="#EF4444" stroke-width="1.2"/>
|
|||
|
|
<rect x="5" y="6" width="2" height="3" fill="#EF4444"/>
|
|||
|
|
</g>
|
|||
|
|
<text x="60" y="202" fill="#EF4444" font-family="system-ui, sans-serif" font-size="9" font-weight="bold" text-anchor="middle"> ARMED</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
双击 ▲+▼ 组合键本地切换为撤防状态；长按 SOS 键 5 秒触发【本机求救】。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 3. Disarmed Clock -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">3. 系统撤防时钟</div>
|
|||
|
|
<div class="card-desc">撤防解锁 🔓 移至正下方，界面均衡清爽</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"/>
|
|||
|
|
|
|||
|
|
<!-- Status Bar (Right: Battery Icon) -->
|
|||
|
|
<rect x="82" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
|
|||
|
|
<rect x="84" y="29" width="13" height="6" rx="1" fill="#10B981"/>
|
|||
|
|
<rect x="103" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
|
|||
|
|
<text x="76" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
|
|||
|
|
|
|||
|
|
<!-- Time -->
|
|||
|
|
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
|
|||
|
|
|
|||
|
|
<!-- Date -->
|
|||
|
|
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
|
|||
|
|
|
|||
|
|
<!-- Disarmed Status at the very bottom (Y=205) -->
|
|||
|
|
<g transform="translate(32, 192)">
|
|||
|
|
<rect x="0" y="3" width="12" height="9" rx="1.5" fill="none" stroke="#10B981" stroke-width="1.2"/>
|
|||
|
|
<path d="M 3 3 L 3 1.5 C 3 0.7, 6 0.7, 8 1.5 L 8 4" fill="none" stroke="#10B981" stroke-width="1.2"/>
|
|||
|
|
</g>
|
|||
|
|
<text x="60" y="202" fill="#10B981" font-family="system-ui, sans-serif" font-size="9" font-weight="bold" text-anchor="middle"> DISARM</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
双击 ▲+▼ 组合键本地切换为布防状态；长按 SOS 键 5 秒触发【本机求救】。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 4. Pairing Menu -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">4. 滚动选择菜单</div>
|
|||
|
|
<div class="card-desc">选择要对码配对的传感器类型</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="#FFB74D" font-family="system-ui, sans-serif" font-size="10" font-weight="bold" text-anchor="middle">PAIR MENU P-00</text>
|
|||
|
|
<text x="60" y="80" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">🚪 DOOR SENSOR</text>
|
|||
|
|
<rect x="10" y="105" width="100" height="30" rx="6" fill="none" stroke="#00E5FF" stroke-width="1.5"/>
|
|||
|
|
<text x="60" y="124" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="10" font-weight="bold" text-anchor="middle">👤 PIR MOTION</text>
|
|||
|
|
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">🔥 SMOKE DETECT</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
单击 ▲ 向上移动，单击 ▼ 向下移动；短按 SOS 确认选中进入搜索状态；长按 ▼ 3 秒退出。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 5. Pairing Search -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">5. 配对对码搜索</div>
|
|||
|
|
<div class="card-desc">雷达波纹 📡 扫射等待射频对码信号</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(0, 10)">
|
|||
|
|
<path d="M 60 70 L 60 90 M 52 75 A 10 10 0 0 1 68 75 M 48 70 A 15 15 0 0 1 72 70 M 44 65 A 20 20 0 0 1 76 65" stroke="#00E5FF" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|||
|
|
<circle cx="60" cy="92" r="2" fill="#00E5FF"/>
|
|||
|
|
</g>
|
|||
|
|
<text x="60" y="145" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">SEARCHING...</text>
|
|||
|
|
<text x="60" y="170" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">TRIGGER SENSOR</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
等待传感器触发。捕获成功且类型匹配时，系统将<b>自动跳转至对码确认页面</b>。长按 ▼ 3 秒退出。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 6. Pairing Confirm -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">6. 扫码成功确认</div>
|
|||
|
|
<div class="card-desc">对码捕获成功后的长按保存提示</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="120" r="58" stroke="#334155" stroke-width="1" fill="none"/>
|
|||
|
|
<g transform="translate(0, 10)">
|
|||
|
|
<circle cx="60" cy="80" r="28" stroke="#FFB74D" stroke-width="1.2" stroke-dasharray="3 3" fill="none"/>
|
|||
|
|
<rect x="46" y="74" width="28" height="20" rx="3" fill="none" stroke="#FFB74D" stroke-width="2.5"/>
|
|||
|
|
<circle cx="60" cy="81" r="2.5" fill="#FFB74D"/>
|
|||
|
|
<path d="M 60 83.5 L 60 88" stroke="#FFB74D" stroke-width="2" stroke-linecap="round"/>
|
|||
|
|
<path d="M 52 74 L 52 64 A 8 8 0 0 1 68 64 L 68 70" fill="none" stroke="#FFB74D" stroke-width="2.5" stroke-linecap="round"/>
|
|||
|
|
</g>
|
|||
|
|
<text x="60" y="145" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">CODE FOUND</text>
|
|||
|
|
<text x="60" y="170" fill="#FFB74D" font-family="system-ui, sans-serif" font-size="10" font-weight="bold" text-anchor="middle">HOLD SOS TO SAVE</text>
|
|||
|
|
<text x="60" y="192" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ADDR: 0x37A86</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
长按 SOS 键 3 秒确认保存并写入 EEPROM ➔ 进入【对码成功】页面；长按 ▼ 3 秒放弃并返回菜单。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 7. Pair Saved -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">7. 对码保存成功</div>
|
|||
|
|
<div class="card-desc">高保真圆形对勾绿色成功徽章 (✓)</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"/>
|
|||
|
|
|
|||
|
|
<!-- Symmetrical Circular Success Badge -->
|
|||
|
|
<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="145" fill="#10B981" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PAIR SUCCESS</text>
|
|||
|
|
<text x="60" y="175" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">ADDR: 0x37A86</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
纯状态提示，自动显示 2 秒后回退到待机，无需任何按键操作。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 8. Pair Fail -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">8. 对码匹配失败</div>
|
|||
|
|
<div class="card-desc">高保真圆形红叉失败徽章 (❌)</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"/>
|
|||
|
|
|
|||
|
|
<!-- Symmetrical Circular Fail Badge -->
|
|||
|
|
<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="155" fill="#EF4444" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PAIR FAILED</text>
|
|||
|
|
<text x="60" y="180" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">TYPE MISMATCH</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
自动显示 5 秒后回退到配对菜单，或短按任意键立即回退到配对菜单。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 9. Alarm Received -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">9. 收到传感器警报</div>
|
|||
|
|
<div class="card-desc">门磁/烟感等传感器触发的警报画面</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="2.5" fill="none" stroke-dasharray="6 4"/>
|
|||
|
|
<g transform="translate(0, 10)">
|
|||
|
|
<rect x="52" y="55" width="16" height="30" rx="1" fill="none" stroke="#EF4444" stroke-width="2.5"/>
|
|||
|
|
<circle cx="64" cy="70" r="1.5" fill="#EF4444"/>
|
|||
|
|
</g>
|
|||
|
|
<text x="60" y="130" fill="#EF4444" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">FRONT DOOR</text>
|
|||
|
|
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">ZONE 0 | ALARM</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
短按手环任意键（▲/▼/SOS）均可手动清除警报、消音并返回时钟待机。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 10. Emitted SOS -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">10. 本机紧急求救 SOS</div>
|
|||
|
|
<div class="card-desc">高保真闪光警报灯图标，字形避开边缘</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="2.5" fill="none"/>
|
|||
|
|
<rect x="8" y="8" width="104" height="224" rx="17" stroke="#FFFFFF" stroke-width="1" fill="none"/>
|
|||
|
|
|
|||
|
|
<!-- High-Fidelity Siren Icon -->
|
|||
|
|
<g transform="translate(0, -3)">
|
|||
|
|
<!-- Light Beams -->
|
|||
|
|
<path d="M 60 48 L 60 54 M 45 52 L 50 57 M 75 52 L 70 57 M 40 65 L 46 67 M 80 65 L 74 67" stroke="#EF4444" stroke-width="2" stroke-linecap="round"/>
|
|||
|
|
<!-- Siren Glass Dome -->
|
|||
|
|
<path d="M 46 82 C 46 64, 74 64, 74 82 Z" fill="#EF4444" stroke="#EF4444" stroke-width="1.5"/>
|
|||
|
|
<!-- Bulb inside -->
|
|||
|
|
<circle cx="60" cy="77" r="4.5" fill="#FFFFFF"/>
|
|||
|
|
<!-- Metallic Base -->
|
|||
|
|
<rect x="42" y="82" width="36" height="6" rx="1.5" fill="#64748B"/>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Centered SOS Alarm Texts safely inside circular active area -->
|
|||
|
|
<text x="60" y="138" fill="#EF4444" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">🆘 EMIT SOS</text>
|
|||
|
|
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">BAND TRIGGERED</text>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-ops">
|
|||
|
|
<b>按键操作：</b>
|
|||
|
|
长按 SOS 键 5 秒解除报警；或接收到主机的远程撤防指令自动解除。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|