From 69b36be59124d10ff14c5ef727f280b37bf2b86b Mon Sep 17 00:00:00 2001
From: 4aiman <konsorumaniakku@ya.ru>
Date: Sat, 17 Oct 2026 14:35:54 +0300
Subject: [PATCH] Record buttons equal width (border-box + uniform padding); HR
 strap charge as a background fill on the HR toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Стоп was narrower: buttons had different horizontal padding and weren't
  border-box, so flex-basis:0 didn't equalize them. Force box-sizing + one
  padding on all three .rec-bottom buttons.
- HR strap battery now paints the HR toggle's background bottom-up 0-100%
  (--bat), coloured green/amber/red by level (setHrBatteryFill), instead of
  a number; cleared when HR is toggled off.
---
 frontend/css/styles.css | 18 ++++++++----------
 frontend/js/main.js     | 12 +++++++++++-
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/css/styles.css b/frontend/css/styles.css
index 3ab245f..8bdfea5 100644
--- a/frontend/css/styles.css
+++ b/frontend/css/styles.css
@@ -726,10 +726,12 @@ select {
 .workout-screen .btn-primary, .workout-screen .btn-secondary { margin-top: 8px; width: 100%; }
 
 /* HR on/off toggle on the record screen (replaces the wind button): grey = off, coloured = on. */
-.rec-hr-toggle { color: #888; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 6px 10px; }
+.rec-hr-toggle { color: #888; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+  /* Strap battery as a background fill, bottom-up, 0-100% (--bat), coloured by level (--bat-color). */
+  background-image: linear-gradient(to top, var(--bat-color, transparent) var(--bat, 0%), transparent var(--bat, 0%)); }
 .rec-hr-toggle svg { display: block; }
-.rec-hr-toggle.active { color: #fff; background: #ef5350; } /* on = white icon+bpm on solid red */
-.rec-hr-num { font-size: 14px; font-weight: 700; min-width: 0; }
+.rec-hr-toggle.active { color: #fff; } /* HR on = white icon + bpm (over the battery fill) */
+.rec-hr-num { font-size: 15px; font-weight: 700; min-width: 0; }
 .rec-hr-num:empty { display: none; }
 
 /* Progress fill for long-running action buttons: the background fills left-to-right by
@@ -1436,13 +1438,9 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
   background: var(--surface);
 }
 
-/* All three controls (HR toggle, pause, stop) share the width equally — no clustering right. */
-.rec-bottom > button { flex: 1 1 0; }
-
-.rec-bottom .gps-rec {
-  padding: 12px 0;
-  flex-shrink: 1;
-}
+/* All three controls (HR toggle, pause, stop) share the width equally — no clustering right.
+   border-box + one padding so the different per-button paddings don't make them unequal. */
+.rec-bottom > button { flex: 1 1 0; box-sizing: border-box; min-width: 0; padding: 12px 8px; }
 
 .gps-header {
   padding: 10px 12px;
diff --git a/frontend/js/main.js b/frontend/js/main.js
index 618d861..a49c154 100644
--- a/frontend/js/main.js
+++ b/frontend/js/main.js
@@ -1182,6 +1182,14 @@ function setBtnProgress(el, pct) {
   el.style.setProperty("--pct", Math.max(0, Math.min(100, Math.round(pct))) + "%");
 }
 
+// Show the HR strap charge as a background fill on the HR toggle (0-100%, coloured by level).
+function setHrBatteryFill(el, bat) {
+  if (!el) return;
+  if (bat == null || bat < 0 || bat > 100) { el.style.removeProperty("--bat"); el.style.removeProperty("--bat-color"); return; }
+  el.style.setProperty("--bat", bat + "%");
+  el.style.setProperty("--bat-color", bat > 40 ? "rgba(76,175,80,0.5)" : bat > 15 ? "rgba(255,183,77,0.55)" : "rgba(239,83,80,0.6)");
+}
+
 // Before a recording, nudge the user to turn on what it needs: Bluetooth (for the HR strap) and
 // location (for the track). Can't silently toggle them on modern Android, so prompt + act: BT via
 // the system enable dialog, location via the location-settings screen. Declining is fine, and the
@@ -5082,7 +5090,9 @@ async function renderRecordingInline(container) {
       if (hrEl) { hrEl.textContent = reading.hr; hrEl.className = "rec-val " + hrZoneClass(reading.hr); }
       let hrNum = document.querySelector("#rec-hr-num"); // live HR on the toggle button itself
       if (hrNum) hrNum.textContent = reading.hr;
+      setHrBatteryFill(document.querySelector("#rec-hr-toggle"), GPS.recording.currentBattery); // strap charge
     };
+    setHrBatteryFill(container.querySelector("#rec-hr-toggle"), GPS.recording.currentBattery); // on render, if already known
 
     // Timer — excludes pauses, starts only when recording
     let timer = setInterval(() => {
@@ -5138,7 +5148,7 @@ async function renderRecordingInline(container) {
       hrToggle.disabled = true;
       await GPS.setHrOn(!GPS.recording.hrOn);
       hrToggle.classList.toggle("active", !!GPS.recording.hrOn);
-      if (!GPS.recording.hrOn) { let n = container.querySelector("#rec-hr-num"); if (n) n.textContent = ""; } // off -> icon only
+      if (!GPS.recording.hrOn) { let n = container.querySelector("#rec-hr-num"); if (n) n.textContent = ""; setHrBatteryFill(hrToggle, null); } // off -> icon only, no fill
       hrToggle.disabled = false;
     };