zatups/bot
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refine route map colors and layout

Browse source
This commit is contained in:
синечка ♡ 2026-09-09 21:51:26 +00:00
parent ef308a58de
commit e7e8876714
3 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/map/index.html
View file

@ -7,7 +7,7 @@
<title>Карта</title>
<script src="../common/telegram.js"></script>
<script src="../common/eruda.min.js?v15"></script>
<link rel="stylesheet" href="./styles/main.css?v15">
<link rel="stylesheet" href="./styles/main.css?v16">
</head>
<body>
<section id="block" aria-live="polite">
@ -80,7 +80,7 @@
</section>
</main>
<script src="./js/map.js?v15"></script>
<script src="./js/map.js?v16"></script>
<script>window.Telegram.WebApp.expand(); window.ZatupsMap.init();</script>
</body>
</html>

5
web/map/js/map.js
View file

@ -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))

24
web/map/styles/main.css
View file

@ -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: "<color>";
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 {