From d73755af3529c6a82efdf52279739775df157ab0 Mon Sep 17 00:00:00 2001
From: kianiadee <kianiadee@gmail.com>
Date: Sat, 6 Jun 2026 10:28:56 +0300
Subject: [PATCH] style(markers): parked = clean pastel department square, no
 arrow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per feedback: recently-parked vehicles now render as a pastel tint of their
cost-centre colour (blended toward white) as a plain square — arrow removed.
Moving-now keeps the full-colour circle + arrow; offline stays grey.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 README.md  |  4 ++--
 index.html | 37 +++++++++++++++++++++++++------------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index e67ac8e..faf9358 100644
--- a/README.md
+++ b/README.md
@@ -7,8 +7,8 @@ trips** into one view for the Fireside Communications / Tracksolid fleet.
   a heading arrow, the plate tail, and a hover popup (status, driver, reverse-geocoded
   address, heading, odometer, last fix, source). Markers **scale with the zoom level**.
   Shape encodes recency so stakeholders read activity at a glance:
-  - **● circle** — moving right now
-  - **■ square** — active within the last 24h, now stopped (with last-heading arrow)
+  - **● circle** (full colour + heading arrow) — moving right now
+  - **■ square** (pastel colour, no arrow) — active within the last 24h, now stopped
   - **grey ●** — offline (no fix in 24h)
 - **Filters** (bottom-right card) apply to the live map *instantly*:
   - **Number plate** — multi-select, sorted A→Z; picking a vehicle auto-fills its
diff --git a/index.html b/index.html
index 34872b2..765cfee 100644
--- a/index.html
+++ b/index.html
@@ -202,10 +202,10 @@
     filter: drop-shadow(0 0 1px rgba(0,0,0,.65));
   }
   .veh-pin .idle-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.92); }
-  /* Parked = reported within 24h ("moved within 24h"): department-coloured
-     SQUARE (same 32px) with the heading arrow, so high-level viewers can scan
-     recent fleet activity by department. Moving-now stays a circle. */
-  .veh-marker.parked  .veh-pin { border-radius: 6px; opacity: .95; }
+  /* Parked = reported within 24h ("active within 24h"): a clean PASTEL
+     department-coloured SQUARE (same 32px, no arrow/dot), so high-level viewers
+     can scan recent fleet activity by department. Moving-now stays a circle. */
+  .veh-marker.parked  .veh-pin { border-radius: 6px; opacity: 1; }
   .veh-marker.offline .veh-pin { opacity: .5; border-color: rgba(255,255,255,.4); }
   .veh-plate {
     position: absolute; top: 33px; left: 50%; transform: translateX(-50%);
@@ -359,6 +359,14 @@ function colorForCostCentre(cc) {
   for (let i = 0; i < cc.length; i++) h = (h * 31 + cc.charCodeAt(i)) | 0;
   return COST_CENTRE_PALETTE[Math.abs(h) % COST_CENTRE_PALETTE.length];
 }
+// Pastel tint of a #rrggbb colour — blended toward white. Used for recently-
+// parked vehicles so they read as a softer version of their department colour.
+function pastelColor(hex, mix = 0.58) {
+  const h = hex.replace('#', '');
+  const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
+  const t = c => Math.round(c + (255 - c) * mix);
+  return `rgb(${t(r)}, ${t(g)}, ${t(b)})`;
+}
 
 // ============================================================================
 // State
@@ -520,10 +528,13 @@ function renderLive() {
 
 function upsertLiveMarker(p, coords, feature) {
   const state = vehicleState(p);
-  // Active (moving now) and parked (reported within 24h = "moved within 24h")
-  // both take the department/cost-centre colour so stakeholders read fleet
-  // activity at a glance. Only offline (>24h silent) stays grey.
-  const color = state === 'offline' ? OFFLINE_COLOR : colorForCostCentre(p.cost_centre);
+  // Active (moving now) = full department colour. Parked (reported within 24h)
+  // = a PASTEL of that department colour. Offline (>24h silent) = grey. Lets
+  // high-level viewers read fleet activity by department at a glance.
+  const ccColor = colorForCostCentre(p.cost_centre);
+  const color = state === 'offline' ? OFFLINE_COLOR
+              : state === 'parked' ? pastelColor(ccColor)
+              : ccColor;
   const speed = Number(p.speed || 0);
   const dir = Number(p.direction || 0);
   let m = liveMarkers.get(p.imei);
@@ -552,13 +563,15 @@ function upsertLiveMarker(p, coords, feature) {
   el.classList.add(state);
   const pin = el.querySelector('.veh-pin');
   pin.style.setProperty('--c', color);
-  // Direction arrow for vehicles moving now AND for parked vehicles (last
-  // heading) — the square + arrow says "active in the last 24h, now stopped".
-  // Idling (engine on, speed 0) and offline keep the neutral dot.
+  // Direction arrow only for vehicles moving now. Parked = a clean pastel
+  // square (no arrow, no dot). Idling/offline keep the neutral dot.
   const glyph = el.querySelector('.glyph');
-  if ((state === 'active' && speed > 0) || state === 'parked') {
+  if (state === 'active' && speed > 0) {
     glyph.className = 'glyph veh-arrow';
     glyph.style.setProperty('--dir', dir + 'deg');
+  } else if (state === 'parked') {
+    glyph.className = 'glyph';   // empty — just the pastel square
+    glyph.style.removeProperty('--dir');
   } else {
     glyph.className = 'glyph idle-dot';
     glyph.style.removeProperty('--dir');