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

docs: 更新 wristband_ui_gallery 至 135x240 尺寸并重构传感器命名与后缀微调 UI

Browse Source
This commit is contained in:
zouhaitao
2026-07-09 14:22:59 +08:00
parent 2208a97fd6
commit 8e6feeaee8
1 changed files with 95 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
Docs/wristband_ui_gallery.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Wristband OLED UI Gallery</title> <title>Wristband LCD UI Gallery</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;
@@ -70,7 +70,7 @@
/* Realistic Smartwatch CSS Simulator */ /* Realistic Smartwatch CSS Simulator */
.watch-device { .watch-device {
position: relative; position: relative;
width: 160px; width: 175px;
height: 280px; height: 280px;
background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%); background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
border-radius: 35px; border-radius: 35px;
@@ -105,7 +105,7 @@
} }
.screen-bezel { .screen-bezel {
position: relative; position: relative;
width: 130px; width: 145px;
height: 250px; height: 250px;
background-color: #000000; background-color: #000000;
border-radius: 25px; border-radius: 25px;
@@ -118,7 +118,7 @@
/* Inlined SVG Scaling */ /* Inlined SVG Scaling */
.screen-bezel svg { .screen-bezel svg {
width: 120px; width: 135px;
height: 240px; height: 240px;
display: block; display: block;
} }
@@ -149,7 +149,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>手环 OLED 屏幕 UI 效果图画册 (V1.5)</h1> <h1>手环 LCD 屏幕 UI 效果图画册 (V2.0)</h1>
<div class="subtitle">所有 10 类显示界面在手环硬件上的 1:1 视觉仿真效果及按键映射说明</div> <div class="subtitle">所有 10 类显示界面在手环硬件上的 1:1 视觉仿真效果及按键映射说明</div>
<div class="grid"> <div class="grid">
@@ -159,20 +159,20 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" height="240" fill="#000000"/>
<!-- Status Bar (Right: Battery Icon) --> <!-- 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="107" 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="109" 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"/> <rect x="128" 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> <text x="101" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
<!-- Time --> <!-- 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> <text x="67.5" y="115" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<!-- Date --> <!-- Date -->
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text> <text x="67.5" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
</svg> </svg>
</div> </div>
</div> </div>
@@ -188,28 +188,28 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" height="240" fill="#000000"/>
<!-- Status Bar (Right: Battery Icon) --> <!-- 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="107" 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="109" 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"/> <rect x="128" 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> <text x="101" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%+</text>
<!-- Time --> <!-- 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> <text x="67.5" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<!-- Date --> <!-- Date -->
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text> <text x="67.5" 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) --> <!-- Armed Status at the very bottom (Y=205) -->
<g transform="translate(36, 192)"> <g transform="translate(43.5, 192)">
<rect x="0" y="0" width="12" height="12" rx="2" fill="none" stroke="#EF4444" stroke-width="1.2"/> <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"/> <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"/> <rect x="5" y="6" width="2" height="3" fill="#EF4444"/>
</g> </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> <text x="67.5" y="202" fill="#EF4444" font-family="system-ui, sans-serif" font-size="9" font-weight="bold" text-anchor="middle"> ARMED</text>
</svg> </svg>
</div> </div>
</div> </div>
@@ -225,27 +225,27 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" height="240" fill="#000000"/>
<!-- Status Bar (Right: Battery Icon) --> <!-- 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="107" 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="109" 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"/> <rect x="128" 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> <text x="101" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
<!-- Time --> <!-- 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> <text x="67.5" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<!-- Date --> <!-- Date -->
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text> <text x="67.5" 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) --> <!-- Disarmed Status at the very bottom (Y=205) -->
<g transform="translate(32, 192)"> <g transform="translate(39.5, 192)">
<rect x="0" y="3" width="12" height="9" rx="1.5" fill="none" stroke="#10B981" stroke-width="1.2"/> <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"/> <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> </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> <text x="67.5" y="202" fill="#10B981" font-family="system-ui, sans-serif" font-size="9" font-weight="bold" text-anchor="middle"> DISARM</text>
</svg> </svg>
</div> </div>
</div> </div>
@@ -261,13 +261,13 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" 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="67.5" 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> <text x="67.5" 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"/> <rect x="10" y="105" width="115" 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="67.5" 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> <text x="67.5" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">🔥 SMOKE DETECT</text>
</svg> </svg>
</div> </div>
</div> </div>
@@ -283,14 +283,14 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" height="240" fill="#000000"/>
<g transform="translate(0, 10)"> <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"/> <path d="M 60 70 L 67.5 90 M 59.5 75 A 10 10 0 0 1 75.5 75 M 55.5 70 A 15 15 0 0 1 79.5 70 M 51.5 65 A 20 20 0 0 1 83.5 65" stroke="#00E5FF" stroke-width="2" fill="none" stroke-linecap="round"/>
<circle cx="60" cy="92" r="2" fill="#00E5FF"/> <circle cx="67.5" cy="92" r="2" fill="#00E5FF"/>
</g> </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="67.5" 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> <text x="67.5" y="170" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">TRIGGER SENSOR</text>
</svg> </svg>
</div> </div>
</div> </div>
@@ -302,29 +302,34 @@
<!-- 6. Pairing Confirm --> <!-- 6. Pairing Confirm -->
<div class="card"> <div class="card">
<div class="card-title">6. 扫码成功确认</div> <div class="card-title">6. 对码成功与命名微调</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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" height="240" fill="#000000"/>
<circle cx="60" cy="120" r="58" stroke="#334155" stroke-width="1" fill="none"/> <text x="67.5" y="45" fill="#10B981" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">v RECU</text>
<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"/> <g transform="translate(54.5, 70)">
<circle cx="60" cy="81" r="2.5" fill="#FFB74D"/> <rect x="0" y="2" width="16" height="28" rx="2" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>
<path d="M 60 83.5 L 60 88" stroke="#FFB74D" stroke-width="2" stroke-linecap="round"/> <rect x="20" y="6" width="6" height="20" rx="1" fill="none" stroke="#10B981" stroke-width="1.8"/>
<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"/> <circle cx="4" cy="16" r="1.5" fill="#FFFFFF"/>
</g> </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="67.5" y="140" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PORTE</text>
<text x="60" y="192" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ADDR: 0x37A86</text>
<!-- 序号选框 [ 01 ] -->
<rect x="37.5" y="160" width="60" height="22" rx="4" fill="none" stroke="#00E5FF" stroke-width="1.5"/>
<text x="67.5" y="176" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">01</text>
<text x="67.5" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ADDR: 0x37A86</text>
</svg> </svg>
</div> </div>
</div> </div>
<div class="card-ops"> <div class="card-ops">
<b>按键操作：</b> <b>按键操作：</b>
长按 SOS 键 3 秒确认保存并写入 EEPROM ➔ 进入【对码成功】页面；长按 ▼ 3 秒放弃并返回菜单。 短按 ▲ 自增，▼ 自减序号（01~99）；短按 CONFIRM 键或 SOS 键保存退出。
</div> </div>
</div> </div>
@@ -334,15 +339,15 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" height="240" fill="#000000"/>
<!-- Symmetrical Circular Success Badge --> <!-- Symmetrical Circular Success Badge -->
<circle cx="60" cy="90" r="24" stroke="#10B981" stroke-width="2.5" fill="none"/> <circle cx="67.5" 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"/> <path d="M 55.5 90 L 63.5 98 L 79.5 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="67.5" 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> <text x="67.5" y="175" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">ADDR: 0x37A86</text>
</svg> </svg>
</div> </div>
</div> </div>
@@ -358,15 +363,15 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" height="240" fill="#000000"/>
<!-- Symmetrical Circular Fail Badge --> <!-- Symmetrical Circular Fail Badge -->
<circle cx="60" cy="90" r="24" stroke="#EF4444" stroke-width="2.5" fill="none"/> <circle cx="67.5" 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"/> <path d="M 57.5 80 L 77.5 100 M 77.5 80 L 57.5 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="67.5" 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> <text x="67.5" y="180" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">TYPE MISMATCH</text>
</svg> </svg>
</div> </div>
</div> </div>
@@ -382,15 +387,15 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" 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"/> <rect x="4" y="4" width="127" height="232" rx="20" stroke="#EF4444" stroke-width="2.5" fill="none" stroke-dasharray="6 4"/>
<g transform="translate(0, 10)"> <g transform="translate(0, 10)">
<rect x="52" y="55" width="16" height="30" rx="1" fill="none" stroke="#EF4444" stroke-width="2.5"/> <rect x="59.5" 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"/> <circle cx="71.5" cy="70" r="1.5" fill="#EF4444"/>
</g> </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="67.5" 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> <text x="67.5" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">ZONE 0 | ALARM</text>
</svg> </svg>
</div> </div>
</div> </div>
@@ -406,26 +411,26 @@
<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="135" height="240" viewBox="0 0 135 240">
<rect width="120" height="240" fill="#000000"/> <rect width="135" 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="4" y="4" width="127" 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"/> <rect x="8" y="8" width="119" height="224" rx="17" stroke="#FFFFFF" stroke-width="1" fill="none"/>
<!-- High-Fidelity Siren Icon --> <!-- High-Fidelity Siren Icon -->
<g transform="translate(0, -3)"> <g transform="translate(0, -3)">
<!-- Light Beams --> <!-- 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"/> <path d="M 67.5 48 L 67.5 54 M 52.5 52 L 57.5 57 M 82.5 52 L 77.5 57 M 47.5 65 L 53.5 67 M 87.5 65 L 81.5 67" stroke="#EF4444" stroke-width="2" stroke-linecap="round"/>
<!-- Siren Glass Dome --> <!-- Siren Glass Dome -->
<path d="M 46 82 C 46 64, 74 64, 74 82 Z" fill="#EF4444" stroke="#EF4444" stroke-width="1.5"/> <path d="M 53.5 82 C 53.5 64, 81.5 64, 81.5 82 Z" fill="#EF4444" stroke="#EF4444" stroke-width="1.5"/>
<!-- Bulb inside --> <!-- Bulb inside -->
<circle cx="60" cy="77" r="4.5" fill="#FFFFFF"/> <circle cx="67.5" cy="77" r="4.5" fill="#FFFFFF"/>
<!-- Metallic Base --> <!-- Metallic Base -->
<rect x="42" y="82" width="36" height="6" rx="1.5" fill="#64748B"/> <rect x="49.5" y="82" width="36" height="6" rx="1.5" fill="#64748B"/>
</g> </g>
<!-- Centered SOS Alarm Texts safely inside circular active area --> <!-- 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="67.5" 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> <text x="67.5" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">BAND TRIGGERED</text>
</svg> </svg>
</div> </div>
</div> </div>