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

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

@ -4,7 +4,7 @@
* both inside and outside Telegram. * both inside and outside Telegram.
*/ */
const FLOOR_COUNT = 6 const FLOOR_COUNT = 6
const MAP_VERSION = '15' const MAP_VERSION = '16'
const $ = (selector) => document.querySelector(selector) const $ = (selector) => document.querySelector(selector)
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)) const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
@ -370,8 +370,9 @@ function drawRoute(segment) {
group.append(line) group.append(line)
} }
const markerSize = Math.max(strokeWidth * 2.5, 12) 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') 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('x', String(point.x - markerSize / 2))
marker.setAttribute('y', String(point.y - markerSize / 2)) marker.setAttribute('y', String(point.y - markerSize / 2))
marker.setAttribute('width', String(markerSize)) marker.setAttribute('width', String(markerSize))

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

@ -7,14 +7,17 @@
--panel-text: #f6f6f6; --panel-text: #f6f6f6;
--panel-hint: #d4d4d4; --panel-hint: #d4d4d4;
--white: #ffffff; --white: #ffffff;
--accent: #b01820; --accent: #2481cc;
--line: #b01820; --accent-pulse: #1767a6;
--line: #2481cc;
--route-end: #b01820;
--route-end-pulse: #7f1118;
} }
@property --found-fill { @property --found-fill {
syntax: "<color>"; syntax: "<color>";
inherits: true; inherits: true;
initial-value: #b01820; initial-value: #2481cc;
} }
* { * {
@ -187,9 +190,18 @@ input {
fill: var(--found-fill) !important; fill: var(--found-fill) !important;
} }
#Линия .route-end-marker {
animation: route-end-fill 2s ease-in-out infinite;
}
@keyframes found-fill { @keyframes found-fill {
0%, 100% { --found-fill: var(--accent); } 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 { #map-message {
@ -380,8 +392,8 @@ input {
} }
.route-card { .route-card {
max-height: min(62vh, 26rem); max-height: none;
overflow: auto; overflow: visible;
} }
.route-card-head { .route-card-head {