Add running personal records and historical PR badges

This commit is contained in:
Peter Stockings
2026-10-02 13:52:27 +10:00
parent b902ec6312
commit a82135bc89
10 changed files with 240 additions and 9 deletions
+1 -5
View File
@@ -13,7 +13,6 @@ async function showDashboardRoute() {
const container = document.getElementById("dashboard-route-map");
if (!container?.dataset.url) return;
const status = document.getElementById("dashboard-route-status");
const toggle = document.getElementById("toggle-route-replay");
try {
const response = await fetch(container.dataset.url);
if (!response.ok) throw new Error("Route unavailable");
@@ -57,12 +56,9 @@ async function showDashboardRoute() {
const update = () => {
if (frame !== null) cancelAnimationFrame(frame);
frame = null; previous = null;
toggle.textContent = paused ? "Play replay" : "Pause replay";
status.textContent = paused ? "Replay paused. Explore the recorded route." : "Following the recorded route · 20-second replay";
status.hidden = true;
if (!paused && !document.hidden) frame = requestAnimationFrame(tick);
};
toggle.hidden = false;
toggle.onclick = () => { paused = !paused; update(); };
preference.addEventListener("change", event => { paused = event.matches; update(); });
document.addEventListener("visibilitychange", update);
update();
+10
View File
@@ -25,3 +25,13 @@ body{font-family:"Segoe UI",Arial,sans-serif}h1{font-weight:650;letter-spacing:-
.public-shell .landing-map{display:block;max-width:none;margin-top:26px}.public-shell .landing-map .running-map{height:210px}.public-shell .landing-features{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:22px;font-size:11px}@media(max-width:680px){.public-shell .landing-map .running-map{height:175px}}
/* Keep account controls at the bottom without a decorative sidebar map. */
.sidebar .sidebar-bottom{margin-top:auto}
.records-panel { margin-bottom: 24px; }
.records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.record-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid #394246; border-radius: 8px; color: inherit; text-decoration: none; }
.record-card > span { color: #a0aaac; font-size: 13px; }
.record-card > strong { font-size: 27px; }
.record-card > small { color: #a0aaac; overflow-wrap: anywhere; }
.run-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.run-badges:empty { display: none; }
.pr-badge { display: inline-block; border: 1px solid #886b34; border-radius: 4px; padding: 3px 6px; color: #f3cb78; background: #3a3020; font-size: 11px; font-weight: 600; }