From 27c60a460a04e484753b0b1370d1f105b809fc70 Mon Sep 17 00:00:00 2001
From: 4aiman <konsorumaniakku@ya.ru>
Date: Mon, 26 Oct 2026 20:55:11 +0300
Subject: [PATCH] Route slope coloring: colour descents by a cool fan
 (green->cyan->navy)

Slope was coloured by |grade| - up and down looked identical. Colour by signed
grade in travel-direction order: uphill keeps the warm fan (green->yellow->red->
brown->black), downhill drops through a cool fan (green->cyan->blue->navy). Legend
shows both strips.
---
 frontend/js/main.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/js/main.js b/frontend/js/main.js
index 29cc7a9..8d47408 100644
--- a/frontend/js/main.js
+++ b/frontend/js/main.js
@@ -3797,22 +3797,29 @@ function showShareModal(session, stats, points) {
 }
 
 // Slope tint by absolute grade in %, in 1%-wide discrete bands (hard boundaries
-// kept — one colour per segment): green -> yellow -> red -> brown -> black.
-// <1%=0 .. 9–10%=9, >=10% = black. Both up- and downhill coloured by magnitude.
-let ROUTE_SLOPE_BANDS = [
+// Slope is coloured by DIRECTION of travel (point order = travel direction):
+// uphill climbs through a WARM fan (green -> yellow -> red -> brown -> black),
+// downhill drops through a COOL fan (green -> cyan -> blue -> navy). Flat (<1%)
+// is green either way. 1% bands: <1%=0 .. 9–10%=9, >=10% = last.
+let ROUTE_SLOPE_UP = [
   "#2e7d32", "#7cb342", "#aeea00", "#ffeb3b", "#ffc107",
   "#ff9800", "#ff5722", "#e53935", "#b71c1c", "#6d4c41", "#000000",
 ];
+let ROUTE_SLOPE_DOWN = [
+  "#2e7d32", "#2e9e5b", "#26a69a", "#00bcd4", "#29b6f6",
+  "#1e88e5", "#1976d2", "#1565c0", "#0d47a1", "#0a357a", "#001f5c",
+];
 function routeSlopeColor(gradePct) {
-  let idx = Math.min(10, Math.floor(Math.abs(gradePct || 0)));
-  return ROUTE_SLOPE_BANDS[idx];
+  let g = gradePct || 0;
+  let idx = Math.min(10, Math.floor(Math.abs(g)));
+  return g < 0 ? ROUTE_SLOPE_DOWN[idx] : ROUTE_SLOPE_UP[idx];
 }
-// Compact colour strip for the slope legend (every 1% band, 0 → 10%+).
+// Compact colour strips for the slope legend (every 1% band, 0 → 10%+), both fans.
 function slopeLegendHtml() {
-  let cells = ROUTE_SLOPE_BANDS
-    .map(c => `<span style="display:inline-block;width:11px;height:10px;background:${c};vertical-align:middle"></span>`)
+  let strip = arr => arr
+    .map(c => `<span style="display:inline-block;width:9px;height:10px;background:${c};vertical-align:middle"></span>`)
     .join("");
-  return `уклон 0% ${cells} 10%+`;
+  return `подъём ${strip(ROUTE_SLOPE_UP)} крутой&nbsp;&nbsp;спуск ${strip(ROUTE_SLOPE_DOWN)} крутой`;
 }
 
 // Draw a route as a feature group: a wide colored casing (per segment — by slope