gbpark/invyone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 화재 알람 데모 건물별 색상 분류 + 라벨/아이콘 가독성 개선

Browse Source 
- 건물 4종(utility/service/factory1/office)에 배경 그라디언트 분기
- zone 영역도 같은 톤 색상 클래스 (za-utility/service/factory1/office)
- room-label 폰트 5.7 → 7.5, zone-label 10 → 13.5 키움
- 센서/manual-call 아이콘 26 → 34, 18 → 24 로 확대 + 위치 보정

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
DDD1542
2026-05-07 11:05:42 +09:00
parent de0bfc1af4
commit 5d2283cb47
1 changed files with 125 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/fire-alarm-demo/index.html
+125 -94
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
@@ -713,6 +713,29 @@
<stop offset="0.58" stop-color="#087033" />
<stop offset="1" stop-color="#04461f" />
</linearGradient>
<linearGradient id="building-bg-utility" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1c8aa8" />
<stop offset="0.58" stop-color="#155f73" />
<stop offset="1" stop-color="#082c38" />
</linearGradient>
<linearGradient id="building-bg-service" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#c47018" />
<stop offset="0.58" stop-color="#8a4d0c" />
<stop offset="1" stop-color="#4d2806" />
</linearGradient>
<linearGradient id="building-bg-factory1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#7c44b8" />
<stop offset="0.58" stop-color="#5a3088" />
<stop offset="1" stop-color="#2c1448" />
</linearGradient>
<linearGradient id="building-bg-office" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#5a6678" />
<stop offset="0.58" stop-color="#3e4858" />
<stop offset="1" stop-color="#232a36" />
</linearGradient>
<linearGradient id="core-room" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#0a6630" />
@@ -777,7 +800,11 @@
.road-dash { fill: none; stroke: #d6ecff; stroke-width: 1.05; stroke-dasharray: 8 6; opacity: .58; }
.route { fill: none; stroke: rgba(234,250,255,.65); stroke-width: .9; stroke-dasharray: 4 4; }
.building { fill: url(#building-bg); stroke: #f3fbff; stroke-width: 1.45; filter: url(#soft-shadow); }
.building { fill: url(#building-bg); stroke: #f3fbff; stroke-width: 1.45; filter: url(#soft-shadow); }
.building.bg-utility { fill: url(#building-bg-utility); }
.building.bg-service { fill: url(#building-bg-service); }
.building.bg-factory1 { fill: url(#building-bg-factory1); }
.building.bg-office { fill: url(#building-bg-office); }
.building-inset { fill: none; stroke: rgba(255,255,255,.36); stroke-width: .9; }
.room-core { fill: url(#core-room); stroke: rgba(255,255,255,.58); stroke-width: .8; }
.wall { stroke: #edf9ff; stroke-width: 1; opacity: .66; }
@@ -786,16 +813,20 @@
.detail-light { stroke: #dff4ff; stroke-width: .45; opacity: .31; }
.hatch { stroke: #dff4ff; stroke-width: .55; opacity: .28; }
.zone-area { fill: rgba(27,146,63,.12); stroke: rgba(255,255,255,.26); stroke-width: .78; cursor: pointer; }
.zone-area { fill: rgba(27,146,63,.12); stroke: rgba(255,255,255,.26); stroke-width: .78; cursor: pointer; }
.zone-area.za-utility { fill: rgba(40,170,200,.16); }
.zone-area.za-service { fill: rgba(220,140,40,.18); }
.zone-area.za-factory1 { fill: rgba(150,90,210,.18); }
.zone-area.za-office { fill: rgba(140,160,190,.14); }
.zone:hover .zone-area { fill: rgba(255,255,255,.075); }
.zone.warn .zone-area { fill: rgba(255,207,78,.32); stroke: #ffe595; }
.zone.alarm .zone-area { fill: rgba(255,56,82,.42); stroke: #ffffff; animation: alarmPulse .82s infinite; }
.building-name { font-family: Arial, 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 900; fill: #ffffff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.58); stroke-width: 3px; }
.building-sub { font-family: Arial, 'Noto Sans KR', sans-serif; font-size: 8px; font-weight: 800; fill: #e8fff1; text-anchor: middle; letter-spacing: .55px; }
.room-label { font-family: Arial, 'Noto Sans KR', sans-serif; font-size: 5.7px; font-weight: 700; fill: rgba(240,255,248,.82); text-transform: uppercase; }
.room-label.dim { fill: rgba(240,255,248,.54); }
.zone-label { font-family: Arial, 'Noto Sans KR', sans-serif; font-size: 10px; font-weight: 900; fill: #ffffff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.68); stroke-width: 3px; }
.room-label { font-family: Arial, 'Noto Sans KR', sans-serif; font-size: 7.5px; font-weight: 700; fill: rgba(240,255,248,.88); text-transform: uppercase; }
.room-label.dim { fill: rgba(240,255,248,.6); }
.zone-label { font-family: Arial, 'Noto Sans KR', sans-serif; font-size: 13.5px; font-weight: 900; fill: #ffffff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.78); stroke-width: 3.4px; }
.small-note { font-family: Arial, 'Noto Sans KR', sans-serif; font-size: 5.5px; font-weight: 700; fill: rgba(237,252,255,.58); }
.sensor-outer { fill: #0e1826; stroke: #ffffff; stroke-width: 1.4; }
@@ -851,31 +882,31 @@
<!-- Wastewater -->
<g id="zone-01" class="zone" data-zone="ZONE 01">
<rect x="48" y="44" width="158" height="90" class="building" />
<rect x="56" y="52" width="142" height="74" class="zone-area" />
<rect x="48" y="44" width="158" height="90" class="building bg-utility" />
<rect x="56" y="52" width="142" height="74" class="zone-area za-utility" />
<path d="M56 88H198 M96 52V126 M148 52V126" class="detail" />
<path d="M62 56V126 M70 56V126 M78 56V126 M184 56V126" class="hatch" />
<text x="127" y="89" class="building-name" style="font-size:13px;stroke-width:2.2px">WASTEWATER</text>
<use href="#sensor" x="114" y="98" width="26" height="26" />
<use href="#manual-call" x="82" y="100" width="18" height="18" />
<text x="127" y="70" class="building-name" style="font-size:16px;stroke-width:2.6px">WASTEWATER</text>
<use href="#sensor" x="110" y="78" width="34" height="34" />
<use href="#manual-call" x="79" y="80" width="24" height="24" />
<text x="127" y="130" class="zone-label">ZONE 01</text>
</g>
<!-- SBG -->
<g id="zone-02" class="zone" data-zone="ZONE 02">
<rect x="48" y="140" width="158" height="92" class="building" />
<rect x="56" y="148" width="142" height="76" class="zone-area" />
<rect x="48" y="140" width="158" height="92" class="building bg-utility" />
<rect x="56" y="148" width="142" height="76" class="zone-area za-utility" />
<path d="M56 184H198 M100 148V224 M152 148V224" class="detail" />
<path d="M62 152V224 M70 152V224 M78 152V224 M184 152V224" class="hatch" />
<text x="127" y="184" class="building-name" style="font-size:13px;stroke-width:2.2px">SBG TREATMENT</text>
<use href="#sensor" x="114" y="196" width="26" height="26" />
<use href="#manual-call" x="166" y="198" width="18" height="18" />
<text x="127" y="164" class="building-name" style="font-size:15px;stroke-width:2.6px">SBG TREATMENT</text>
<use href="#sensor" x="110" y="174" width="34" height="34" />
<use href="#manual-call" x="163" y="176" width="24" height="24" />
<text x="127" y="226" class="zone-label">ZONE 02</text>
</g>
<!-- Utility building -->
<g>
<rect x="246" y="44" width="560" height="164" class="building" />
<rect x="246" y="44" width="560" height="164" class="building bg-utility" />
<rect x="256" y="54" width="540" height="144" class="building-inset" />
<text x="526" y="74" class="building-name">UTILITY BUILDING</text>
@@ -894,31 +925,31 @@
<path d="M688 112h86 M688 128h86 M688 144h86 M688 160h86" class="detail-light" />
<g id="zone-03" class="zone" data-zone="ZONE 03">
<rect x="256" y="96" width="130" height="102" class="zone-area" />
<text x="321" y="160" class="zone-label">ZONE 03</text>
<use href="#sensor" x="308" y="125" width="26" height="26" />
<use href="#manual-call" x="260" y="174" width="17" height="17" />
<rect x="256" y="96" width="130" height="102" class="zone-area za-utility" />
<text x="321" y="180" class="zone-label">ZONE 03</text>
<use href="#sensor" x="304" y="106" width="34" height="34" />
<use href="#manual-call" x="256" y="170" width="24" height="24" />
</g>
<g id="zone-04" class="zone" data-zone="ZONE 04">
<rect x="386" y="96" width="140" height="102" class="zone-area" />
<text x="456" y="160" class="zone-label">ZONE 04</text>
<use href="#sensor" x="443" y="125" width="26" height="26" />
<use href="#manual-call" x="393" y="174" width="17" height="17" />
<rect x="386" y="96" width="140" height="102" class="zone-area za-utility" />
<text x="456" y="180" class="zone-label">ZONE 04</text>
<use href="#sensor" x="439" y="106" width="34" height="34" />
<use href="#manual-call" x="389" y="170" width="24" height="24" />
</g>
<g id="zone-05" class="zone" data-zone="ZONE 05">
<rect x="526" y="96" width="140" height="102" class="zone-area" />
<text x="596" y="160" class="zone-label">ZONE 05</text>
<use href="#sensor" x="583" y="125" width="26" height="26" />
<use href="#manual-call" x="534" y="174" width="17" height="17" />
<rect x="526" y="96" width="140" height="102" class="zone-area za-utility" />
<text x="596" y="180" class="zone-label">ZONE 05</text>
<use href="#sensor" x="579" y="106" width="34" height="34" />
<use href="#manual-call" x="530" y="170" width="24" height="24" />
</g>
<g id="zone-06" class="zone" data-zone="ZONE 06">
<rect x="666" y="96" width="130" height="102" class="zone-area" />
<text x="731" y="160" class="zone-label">ZONE 06</text>
<use href="#sensor" x="718" y="125" width="26" height="26" />
<use href="#manual-call" x="672" y="174" width="17" height="17" />
<rect x="666" y="96" width="130" height="102" class="zone-area za-utility" />
<text x="731" y="180" class="zone-label">ZONE 06</text>
<use href="#sensor" x="714" y="106" width="34" height="34" />
<use href="#manual-call" x="668" y="170" width="24" height="24" />
</g>
<use href="#door-leaf" x="310" y="197" width="28" height="20" />
@@ -929,13 +960,13 @@
<!-- Cafeteria -->
<g id="zone-07" class="zone" data-zone="ZONE 07">
<rect x="844" y="58" width="178" height="124" class="building" />
<rect x="856" y="70" width="154" height="100" class="zone-area" />
<rect x="844" y="58" width="178" height="124" class="building bg-service" />
<rect x="856" y="70" width="154" height="100" class="zone-area za-service" />
<path d="M868 126h130 M916 70v100 M958 70v100" class="detail" />
<path d="M868 86h130 M868 102h130 M868 142h130" class="detail-light" />
<text x="933" y="106" class="building-name" style="font-size:14px;stroke-width:2.2px">CAFETERIA</text>
<use href="#sensor" x="920" y="125" width="26" height="26" />
<use href="#manual-call" x="864" y="148" width="18" height="18" />
<text x="933" y="106" class="building-name" style="font-size:17px;stroke-width:2.8px">CAFETERIA</text>
<use href="#sensor" x="916" y="121" width="34" height="34" />
<use href="#manual-call" x="861" y="145" width="24" height="24" />
<text x="933" y="170" class="zone-label">ZONE 07</text>
<use href="#door-leaf" x="904" y="170" width="28" height="20" />
<use href="#door-leaf" x="964" y="170" width="28" height="20" />
@@ -943,13 +974,13 @@
<!-- Safety center -->
<g id="zone-08" class="zone" data-zone="ZONE 08">
<rect x="1040" y="58" width="98" height="124" class="building" />
<rect x="1048" y="70" width="82" height="100" class="zone-area" />
<rect x="1040" y="58" width="98" height="124" class="building bg-service" />
<rect x="1048" y="70" width="82" height="100" class="zone-area za-service" />
<path d="M1068 70v100 M1048 124h82" class="detail" />
<path d="M1078 70v100 M1088 70v100" class="detail-light" />
<text x="1089" y="106" class="building-name" style="font-size:11px;stroke-width:2px">SAFETY CENTER</text>
<use href="#sensor" x="1076" y="129" width="26" height="26" />
<use href="#manual-call" x="1053" y="147" width="18" height="18" />
<text x="1089" y="106" class="building-name" style="font-size:13px;stroke-width:2.4px">SAFETY CENTER</text>
<use href="#sensor" x="1072" y="125" width="34" height="34" />
<use href="#manual-call" x="1050" y="144" width="24" height="24" />
<text x="1089" y="170" class="zone-label">ZONE 08</text>
<use href="#door-leaf" x="1070" y="170" width="28" height="20" />
</g>
@@ -1007,58 +1038,58 @@
<g id="zone-09" class="zone" data-zone="ZONE 09">
<rect x="60" y="392" width="150" height="114" class="zone-area" />
<text x="135" y="456" class="zone-label">ZONE 09</text>
<use href="#sensor" x="122" y="421" width="26" height="26" />
<use href="#manual-call" x="72" y="480" width="18" height="18" />
<text x="135" y="461" class="zone-label">ZONE 09</text>
<use href="#sensor" x="118" y="417" width="34" height="34" />
<use href="#manual-call" x="69" y="477" width="24" height="24" />
</g>
<g id="zone-10" class="zone" data-zone="ZONE 10">
<rect x="210" y="392" width="150" height="114" class="zone-area" />
<text x="285" y="456" class="zone-label">ZONE 10</text>
<use href="#sensor" x="272" y="421" width="26" height="26" />
<use href="#manual-call" x="222" y="480" width="18" height="18" />
<text x="285" y="461" class="zone-label">ZONE 10</text>
<use href="#sensor" x="268" y="417" width="34" height="34" />
<use href="#manual-call" x="219" y="477" width="24" height="24" />
</g>
<g id="zone-11" class="zone" data-zone="ZONE 11">
<rect x="360" y="392" width="150" height="114" class="zone-area" />
<text x="435" y="456" class="zone-label">ZONE 11</text>
<use href="#sensor" x="422" y="421" width="26" height="26" />
<use href="#manual-call" x="372" y="480" width="17" height="17" />
<text x="435" y="461" class="zone-label">ZONE 11</text>
<use href="#sensor" x="418" y="417" width="34" height="34" />
<use href="#manual-call" x="368" y="476" width="24" height="24" />
</g>
<g id="zone-12" class="zone" data-zone="ZONE 12">
<rect x="510" y="392" width="170" height="114" class="zone-area" />
<text x="595" y="456" class="zone-label">ZONE 12</text>
<use href="#sensor" x="582" y="421" width="26" height="26" />
<use href="#manual-call" x="522" y="480" width="18" height="18" />
<text x="595" y="461" class="zone-label">ZONE 12</text>
<use href="#sensor" x="578" y="417" width="34" height="34" />
<use href="#manual-call" x="519" y="477" width="24" height="24" />
</g>
<g id="zone-13" class="zone" data-zone="ZONE 13">
<rect x="60" y="506" width="150" height="122" class="zone-area" />
<text x="135" y="574" class="zone-label">ZONE 13</text>
<use href="#sensor" x="122" y="539" width="26" height="26" />
<use href="#manual-call" x="184" y="600" width="18" height="18" />
<text x="135" y="579" class="zone-label">ZONE 13</text>
<use href="#sensor" x="118" y="535" width="34" height="34" />
<use href="#manual-call" x="181" y="597" width="24" height="24" />
</g>
<g id="zone-14" class="zone" data-zone="ZONE 14">
<rect x="210" y="506" width="150" height="122" class="zone-area" />
<text x="285" y="574" class="zone-label">ZONE 14</text>
<use href="#sensor" x="272" y="539" width="26" height="26" />
<use href="#manual-call" x="334" y="600" width="18" height="18" />
<text x="285" y="579" class="zone-label">ZONE 14</text>
<use href="#sensor" x="268" y="535" width="34" height="34" />
<use href="#manual-call" x="331" y="597" width="24" height="24" />
</g>
<g id="zone-15" class="zone" data-zone="ZONE 15">
<rect x="360" y="506" width="150" height="122" class="zone-area" />
<text x="435" y="574" class="zone-label">ZONE 15</text>
<use href="#sensor" x="422" y="539" width="26" height="26" />
<use href="#manual-call" x="484" y="600" width="18" height="18" />
<text x="435" y="579" class="zone-label">ZONE 15</text>
<use href="#sensor" x="418" y="535" width="34" height="34" />
<use href="#manual-call" x="481" y="597" width="24" height="24" />
</g>
<g id="zone-16" class="zone" data-zone="ZONE 16">
<rect x="510" y="506" width="170" height="122" class="zone-area" />
<text x="595" y="574" class="zone-label">ZONE 16</text>
<use href="#sensor" x="582" y="539" width="26" height="26" />
<use href="#manual-call" x="650" y="600" width="18" height="18" />
<text x="595" y="579" class="zone-label">ZONE 16</text>
<use href="#sensor" x="578" y="535" width="34" height="34" />
<use href="#manual-call" x="647" y="597" width="24" height="24" />
</g>
<use href="#door-leaf" x="108" y="618" width="28" height="20" />
@@ -1069,23 +1100,23 @@
<!-- Office -->
<g>
<rect x="696" y="306" width="96" height="322" class="building" />
<rect x="696" y="306" width="96" height="322" class="building bg-office" />
<rect x="704" y="318" width="80" height="298" class="building-inset" />
<text x="744" y="328" class="building-name" style="font-size:11px">OFFICE BLDG</text>
<text x="744" y="328" class="building-name" style="font-size:13px;stroke-width:2.4px">OFFICE BLDG</text>
<line x1="696" y1="466" x2="792" y2="466" class="wall" />
<g id="zone-17" class="zone" data-zone="ZONE 17">
<rect x="696" y="306" width="96" height="160" class="zone-area" />
<text x="744" y="448" class="zone-label">ZONE 17</text>
<use href="#sensor" x="731" y="411" width="26" height="26" />
<use href="#manual-call" x="704" y="442" width="18" height="18" />
<rect x="696" y="306" width="96" height="160" class="zone-area za-office" />
<text x="744" y="453" class="zone-label">ZONE 17</text>
<use href="#sensor" x="727" y="407" width="34" height="34" />
<use href="#manual-call" x="701" y="439" width="24" height="24" />
</g>
<g id="zone-18" class="zone" data-zone="ZONE 18">
<rect x="696" y="466" width="96" height="162" class="zone-area" />
<text x="744" y="552" class="zone-label">ZONE 18</text>
<use href="#sensor" x="731" y="517" width="26" height="26" />
<use href="#manual-call" x="704" y="600" width="18" height="18" />
<rect x="696" y="466" width="96" height="162" class="zone-area za-office" />
<text x="744" y="557" class="zone-label">ZONE 18</text>
<use href="#sensor" x="727" y="513" width="34" height="34" />
<use href="#manual-call" x="701" y="597" width="24" height="24" />
</g>
<use href="#door-leaf" x="730" y="618" width="28" height="20" />
@@ -1093,7 +1124,7 @@
<!-- Factory 1 -->
<g>
<rect x="906" y="286" width="304" height="350" class="building" />
<rect x="906" y="286" width="304" height="350" class="building bg-factory1" />
<rect x="918" y="298" width="280" height="326" class="building-inset" />
<text x="1058" y="340" class="building-name">FACTORY 1</text>
@@ -1118,31 +1149,31 @@
<use href="#stairs" x="914" y="590" width="42" height="34" opacity=".88" />
<g id="zone-19" class="zone" data-zone="ZONE 19">
<rect x="906" y="382" width="152" height="124" class="zone-area" />
<text x="982" y="452" class="zone-label">ZONE 19</text>
<use href="#sensor" x="969" y="417" width="26" height="26" />
<use href="#manual-call" x="916" y="480" width="18" height="18" />
<rect x="906" y="382" width="152" height="124" class="zone-area za-factory1" />
<text x="982" y="457" class="zone-label">ZONE 19</text>
<use href="#sensor" x="965" y="413" width="34" height="34" />
<use href="#manual-call" x="913" y="477" width="24" height="24" />
</g>
<g id="zone-20" class="zone" data-zone="ZONE 20">
<rect x="1058" y="382" width="152" height="124" class="zone-area" />
<text x="1134" y="452" class="zone-label">ZONE 20</text>
<use href="#sensor" x="1121" y="417" width="26" height="26" />
<use href="#manual-call" x="1182" y="480" width="18" height="18" />
<rect x="1058" y="382" width="152" height="124" class="zone-area za-factory1" />
<text x="1134" y="457" class="zone-label">ZONE 20</text>
<use href="#sensor" x="1117" y="413" width="34" height="34" />
<use href="#manual-call" x="1179" y="477" width="24" height="24" />
</g>
<g id="zone-21" class="zone" data-zone="ZONE 21">
<rect x="906" y="506" width="152" height="130" class="zone-area" />
<text x="982" y="578" class="zone-label">ZONE 21</text>
<use href="#sensor" x="969" y="543" width="26" height="26" />
<use href="#manual-call" x="1030" y="606" width="18" height="18" />
<rect x="906" y="506" width="152" height="130" class="zone-area za-factory1" />
<text x="982" y="583" class="zone-label">ZONE 21</text>
<use href="#sensor" x="965" y="539" width="34" height="34" />
<use href="#manual-call" x="1027" y="603" width="24" height="24" />
</g>
<g id="zone-22" class="zone" data-zone="ZONE 22">
<rect x="1058" y="506" width="152" height="130" class="zone-area" />
<text x="1134" y="578" class="zone-label">ZONE 22</text>
<use href="#sensor" x="1121" y="543" width="26" height="26" />
<use href="#manual-call" x="1182" y="606" width="18" height="18" />
<rect x="1058" y="506" width="152" height="130" class="zone-area za-factory1" />
<text x="1134" y="583" class="zone-label">ZONE 22</text>
<use href="#sensor" x="1117" y="539" width="34" height="34" />
<use href="#manual-call" x="1179" y="603" width="24" height="24" />
</g>
<use href="#door-leaf" x="948" y="626" width="28" height="20" />