관제 화면 문구와 반응형 표시 개선

This commit is contained in:
2026-06-06 19:47:51 +09:00
parent b2562e9145
commit e5ae236b8a
3 changed files with 71 additions and 37 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CargoRadar Control</title>
<title>CargoRadar 관제</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
@@ -13,11 +13,11 @@
<span class="brand-mark" aria-hidden="true">CR</span>
<div>
<strong class="brand">CargoRadar</strong>
<span class="subtitle">Live freight control</span>
<span class="subtitle">실시간 화물 관제</span>
</div>
</div>
<div class="topbar-context">
<span class="topbar-chip">Demo control tower</span>
<span class="topbar-chip">시범 관제</span>
<time id="systemClock" datetime="">--:--</time>
</div>
<div class="toolbar">
@@ -41,7 +41,7 @@
<path d="M15 18v-2" />
</svg>
</span>
샘플 위치
샘플 전송
</button>
</div>
</header>
@@ -74,11 +74,11 @@
<strong id="totalCount">0</strong>
</div>
<div class="metric">
<span class="metric-label">수신중</span>
<span class="metric-label">수신 </span>
<strong id="activeCount">0</strong>
</div>
<div class="metric">
<span class="metric-label">지연</span>
<span class="metric-label">주의</span>
<strong id="staleCount">0</strong>
</div>
</section>
@@ -100,7 +100,7 @@
</label>
<div class="status-filters" aria-label="차량 상태 필터">
<button class="filter-button is-active" type="button" data-status-filter="all">전체</button>
<button class="filter-button" type="button" data-status-filter="active">수신중</button>
<button class="filter-button" type="button" data-status-filter="active">수신 </button>
<button class="filter-button" type="button" data-status-filter="stale">주의</button>
</div>
</div>
@@ -153,21 +153,21 @@
<div id="map"></div>
<div id="mapMessage" class="map-message">지도 로딩 중</div>
<section class="map-status-panel" aria-label="지도 운영 상태">
<span class="section-eyebrow">Realtime map</span>
<strong id="mapStatusTitle">전국 화물 이동 </strong>
<span class="section-eyebrow">실시간 지도</span>
<strong id="mapStatusTitle">화물 이동 </strong>
<div class="map-status-grid">
<span><b id="mapActiveCount">0</b> 수신중</span>
<span><b id="mapActiveCount">0</b> 수신 </span>
<span><b id="mapEtaSummary">-</b> 평균 ETA</span>
<span><b id="mapUpdatedAt">-</b> 최근 수신</span>
</div>
</section>
<section id="routeFocusPanel" class="route-focus-panel" aria-live="polite">
<span class="section-eyebrow">Selected route</span>
<strong id="routeFocusTitle">차량 선택하세요</strong>
<p id="routeFocusMeta">목적지 경로와 예상 도착 시간이 지도 위에 표시됩니다.</p>
<span class="section-eyebrow">선택 경로</span>
<strong id="routeFocusTitle">차량 선택</strong>
<p id="routeFocusMeta">선택하면 경로와 도착 예정 시간이 표시됩니다.</p>
</section>
<div class="map-legend" aria-label="지도 범례">
<span><i class="legend-dot active"></i>수신중</span>
<span><i class="legend-dot active"></i>수신 </span>
<span><i class="legend-dot stale"></i>주의</span>
<span><i class="legend-line"></i>목적지 경로</span>
</div>