From 6fda0f1233b54ddd25898fdd66899d19ae4ddda7 Mon Sep 17 00:00:00 2001 From: seo Date: Fri, 26 Jun 2026 01:42:44 +0900 Subject: [PATCH] Fix trunk indicator alignment --- README.md | 3 +++ monitor.php | 6 ++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 20a0204..77d9dc9 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저 - TCP 실패 reason과 마지막 수신 지연 표시 - 수집 공백을 반영한 차량 상태 경과 시간 표시 - 도어/경계/시동/공조 상태 해석 +- 실시간 차량 도어/트렁크 열림 표시 - service worker와 PWA icon 제공 ## 주요 API @@ -40,6 +41,8 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저 모바일처럼 폭이 좁은 화면에서는 조회 경과와 시동 유지 시간이 한 줄로 유지되도록 초, 필요 시 분 단위를 생략해 표시합니다. 사용량 지표와 상태 기록 테이블은 카드 내부에서 좌우 스크롤되도록 분리해 전체 페이지 레이아웃이 밀리지 않게 합니다. +실시간 차량 그림의 도어/트렁크 열림 표시선은 열림 애니메이션 중에도 차량 기준 위치를 유지합니다. 트렁크 표시선은 중앙 정렬 기준을 유지한 상태에서 확대되어 PC와 모바일 모두에서 차체 하단과 맞도록 표시됩니다. + ## Monitor 화면 제어 헤더 우측 컨트롤은 WakeLock, 언어, 테마 순서입니다. WakeLock은 Screen Wake Lock API를 지원하는 브라우저에서 화면 꺼짐을 방지하며, 활성 상태는 초록색 아이콘 버튼으로 표시합니다. 사용자의 선택은 `localStorage`에 저장하고, 새로고침이나 탭 복귀 후에는 브라우저 정책에 맞춰 다시 획득을 시도합니다. diff --git a/monitor.php b/monitor.php index 8408bcd..91e20d5 100644 --- a/monitor.php +++ b/monitor.php @@ -830,9 +830,11 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') { position: absolute; background: var(--accent-red); box-shadow: 0 0 10px var(--accent-red); opacity: 0; border-radius: 2px; + transform: var(--door-transform, none); + transform-origin: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } - .door-line.open { opacity: 1; transform: scale(1.1); } + .door-line.open { opacity: 1; transform: var(--door-transform, none) scale(1.1); } /* 더뉴 니로 2020 탑뷰 실루엣 기준 */ .dp-fl { top: 132px; left: calc(50% - 86px); width: 4px; height: 72px; } @@ -841,7 +843,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') { .dp-rl { top: 225px; left: calc(50% - 86px); width: 4px; height: 78px; } .dp-rr { top: 225px; right: calc(50% - 86px); width: 4px; height: 78px; } - .dp-tk { bottom: 28px; left: 50%; transform: translateX(-50%); width: 86px; height: 4px; } + .dp-tk { --door-transform: translateX(-50%); bottom: 28px; left: 50%; width: 86px; height: 4px; } /* Headlights */ .headlight-beam {