From e7e8876714c6c5cc82416444b6ed598da0f610a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D1=81=D0=B8=D0=BD=D0=B5=D1=87=D0=BA=D0=B0=20=E2=99=A1?= <63897347+ktnk-dev@users.noreply.github.com> Date: Wed, 9 Sep 2026 21:51:26 +0000 Subject: [PATCH] refine route map colors and layout --- web/map/index.html | 4 ++-- web/map/js/map.js | 5 +++-- web/map/styles/main.css | 24 ++++++++++++++++++------ 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/web/map/index.html b/web/map/index.html index 112a5ef..0465b4f 100644 --- a/web/map/index.html +++ b/web/map/index.html @@ -7,7 +7,7 @@ Карта - +
@@ -80,7 +80,7 @@
- + diff --git a/web/map/js/map.js b/web/map/js/map.js index c3e7099..aaee1f7 100644 --- a/web/map/js/map.js +++ b/web/map/js/map.js @@ -4,7 +4,7 @@ * both inside and outside Telegram. */ const FLOOR_COUNT = 6 -const MAP_VERSION = '15' +const MAP_VERSION = '16' const $ = (selector) => document.querySelector(selector) const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)) @@ -370,8 +370,9 @@ function drawRoute(segment) { group.append(line) } const markerSize = Math.max(strokeWidth * 2.5, 12) - ;[points[0], points[points.length - 1]].forEach((point) => { + ;[points[0], points[points.length - 1]].forEach((point, index) => { const marker = document.createElementNS('http://www.w3.org/2000/svg', 'rect') + marker.classList.add(index === 0 ? 'route-start-marker' : 'route-end-marker') marker.setAttribute('x', String(point.x - markerSize / 2)) marker.setAttribute('y', String(point.y - markerSize / 2)) marker.setAttribute('width', String(markerSize)) diff --git a/web/map/styles/main.css b/web/map/styles/main.css index 0924a54..c66be51 100644 --- a/web/map/styles/main.css +++ b/web/map/styles/main.css @@ -7,14 +7,17 @@ --panel-text: #f6f6f6; --panel-hint: #d4d4d4; --white: #ffffff; - --accent: #b01820; - --line: #b01820; + --accent: #2481cc; + --accent-pulse: #1767a6; + --line: #2481cc; + --route-end: #b01820; + --route-end-pulse: #7f1118; } @property --found-fill { syntax: ""; inherits: true; - initial-value: #b01820; + initial-value: #2481cc; } * { @@ -187,9 +190,18 @@ input { fill: var(--found-fill) !important; } +#Линия .route-end-marker { + animation: route-end-fill 2s ease-in-out infinite; +} + @keyframes found-fill { 0%, 100% { --found-fill: var(--accent); } - 50% { --found-fill: #7f1118; } + 50% { --found-fill: var(--accent-pulse); } +} + +@keyframes route-end-fill { + 0%, 100% { --found-fill: var(--route-end); } + 50% { --found-fill: var(--route-end-pulse); } } #map-message { @@ -380,8 +392,8 @@ input { } .route-card { - max-height: min(62vh, 26rem); - overflow: auto; + max-height: none; + overflow: visible; } .route-card-head {