https://flowmetrics.space/tools/ Recent content in Tools on Schegl blog https://flowmetrics.space/images/preview.png https://flowmetrics.space/images/preview.png Hugo en-us https://flowmetrics.space/tools/pace-calculator/ Mon, 01 Jan 0001 00:00:00 +0000 https://flowmetrics.space/tools/pace-calculator/ <h2 id="pace-calculator">Pace Calculator</h2> <style> .calc-box { background: #1e1e1e; padding: 16px; border-radius: 12px; max-width: 650px; /* немного шире */ } .calc-row { margin-bottom: 12px; } .calc-inline input { width: 55px; padding: 5px; margin-right: 4px; border-radius: 6px; border: 1px solid #444; background: #111; color: white; font-size: 14px; } .buttons { margin-top: 8px; } .buttons button { margin: 3px; padding: 5px 8px; border-radius: 6px; border: 1px solid #555; background: #222; color: white; cursor: pointer; font-size: 13px; } .buttons button.active { background: #4caf50; border-color: #4caf50; } /* 🔥 ФИКС: 4 КОЛОНКИ */ .splits { margin-top: 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 14px; font-size: 13px; } .split-row { display: flex; justify-content: space-between; opacity: 0.9; } .split-key { font-weight: bold; color: #4caf50; } </style> <div class="calc-box"> <div class="calc-row"> <b>Distance</b><br> <input id="distance" value="10000"> </div> <div class="buttons"> <button onclick="setDistance(this,1000)">1 km</button> <button onclick="setDistance(this,5000)">5 km</button> <button onclick="setDistance(this,10000)">10 km</button> <button onclick="setDistance(this,21097)">21.1 km</button> <button onclick="setDistance(this,42195)">42.2 km</button> </div> <div class="calc-row"> <b>Time</b><br> <div class="calc-inline"> <input id="hours" value="0">h <input id="minutes" value="50">m <input id="seconds" value="0">s </div> </div> <div class="calc-row"> <b>Pace</b><br> <div class="calc-inline"> <input id="paceMin" value="5">min <input id="paceSec" value="0">sec </div> </div> <div id="splits" class="splits"></div> </div> <script> let active = null; function setDistance(btn, d) { document.getElementById("distance").value = d; document.querySelectorAll(".buttons button").forEach(b => b.classList.remove("active")); btn.classList.add("active"); calculate(); } window.onload = function() { ["distance","hours","minutes","seconds","paceMin","paceSec"].forEach(id => { document.getElementById(id).addEventListener("input", (e) => { active = id; calculate(); }); }); calculate(); }; function calculate() { const d = parseFloat(document.getElementById("distance").value); const h = parseFloat(document.getElementById("hours").value) || 0; const m = parseFloat(document.getElementById("minutes").value) || 0; const s = parseFloat(document.getElementById("seconds").value) || 0; const paceMin = parseFloat(document.getElementById("paceMin").value) || 0; const paceSec = parseFloat(document.getElementById("paceSec").value) || 0; if (!d) return; // TIME → PACE if (["hours","minutes","seconds"].includes(active)) { const totalSec = h*3600 + m*60 + s; if (totalSec === 0) return; const pace = totalSec / (d / 1000); document.getElementById("paceMin").value = Math.floor(pace / 60); document.getElementById("paceSec").value = Math.round(pace % 60); } // PACE → TIME if (["paceMin","paceSec"].includes(active)) { const paceTotal = paceMin*60 + paceSec; if (paceTotal === 0) return; const totalSec = paceTotal * (d / 1000); document.getElementById("hours").value = Math.floor(totalSec / 3600); document.getElementById("minutes").value = Math.floor((totalSec % 3600) / 60); document.getElementById("seconds").value = Math.round(totalSec % 60); } updateSplits(); } function formatTime(totalSec) { const h = Math.floor(totalSec / 3600); const m = Math.floor((totalSec % 3600) / 60); const s = Math.round(totalSec % 60); return `${h}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; } function updateSplits() { const d = parseFloat(document.getElementById("distance").value); const paceMin = parseFloat(document.getElementById("paceMin").value) || 0; const paceSec = parseFloat(document.getElementById("paceSec").value) || 0; const paceTotal = paceMin * 60 + paceSec; if (!d || !paceTotal) return; const totalKm = Math.floor(d / 1000); let html = ""; for (let i = 1; i <= totalKm; i++) { const sec = paceTotal * i; const isKey = (i % 5 === 0 || i === totalKm); html += ` <div class="split-row ${isKey ? 'split-key' : ''}"> <span>${i} km</span> <span>${formatTime(sec)}</span> </div> `; } document.getElementById("splits").innerHTML = html; } </script>