From 0b96eb824b1c374241cfb79b1609ca77b5687c8f Mon Sep 17 00:00:00 2001 From: Hans de Zwart Date: Tue, 11 Aug 2026 11:31:06 +0200 Subject: [PATCH] Make the armed reset a centred, unwinding ring in the button flash colour MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The old confirmation ring was a scaling, fading border. It sat off-centre — the ::before had no top/left, so it landed on its static position in the grid rather than over the icon — and it read as a shrinking circle rather than time running out. It's now an SVG ring animated on stroke-dashoffset (0 to 113.1, the circumference at r=18) and rotated -90deg to start at 12 o'clock, so it unwinds like a progress ring in reverse over the same 2s as the timeout. Explicitly centred on the button. The stroke is currentColor against #reset.armed{color:var(--icon-hot)}, so it uses the pale flash every button already shows on :active instead of the theme accent, and no longer changes with the colour setting. Co-Authored-By: Claude Opus 5 --- public_html/README.md | 2 +- public_html/index.html | 32 ++++++++++++++++++++++---------- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/public_html/README.md b/public_html/README.md index b3d0dae..cb81401 100644 --- a/public_html/README.md +++ b/public_html/README.md @@ -35,7 +35,7 @@ except installation and the service worker. - The bar under the big time is the delay draining. When it empties you get a soft tick and your reserve starts moving. That's the moment worth hearing. - **Reset** returns to the starting position. It takes two taps: the first arms - the button — it turns your accent colour and a ring drains — and a second tap + the button — it lights up and a ring unwinds around it — and a second tap within those two seconds does it. One stray thumb can't wipe a live game. - **Pause** freezes mid-turn and resumes exactly where it stopped, delay included. Opening settings pauses automatically, and leaves it paused so the diff --git a/public_html/index.html b/public_html/index.html index 374ad86..f33da78 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -149,18 +149,29 @@ .btn svg[hidden]{display:none} .btn:focus-visible{outline:2px solid var(--icon-hot);outline-offset:-6px;border-radius:8px} - /* reset armed for a second tap — the ring drains over the same 2s as the timeout */ + /* reset armed for a second tap — the ring unwinds over the same 2s as the timeout */ #reset{position:relative} - #reset.armed{color:var(--accent)} - #reset.armed::before{ - content:"";position:absolute; - width:clamp(36px,9vw,48px);aspect-ratio:1; - border-radius:50%;border:2px solid var(--accent); - animation:drain 2s linear forwards; + #reset.armed{color:var(--icon-hot)} + #reset .ring{ + position:absolute; + top:50%;left:50%; + width:clamp(36px,9.6vw,48px);height:clamp(36px,9.6vw,48px); + transform:translate(-50%,-50%) rotate(-90deg); /* start the arc at 12 o'clock */ + display:none; + pointer-events:none; } - @keyframes drain{ - from{opacity:1;transform:scale(1)} - to{opacity:0;transform:scale(.72)} + #reset.armed .ring{display:block} + #reset .ring circle{ + fill:none; + stroke:currentColor; /* the same flash the buttons use */ + stroke-width:2.6; + stroke-linecap:round; + stroke-dasharray:113.1; /* 2πr, r=18 */ + animation:unwind 2s linear forwards; + } + @keyframes unwind{ + from{stroke-dashoffset:0} + to{stroke-dashoffset:113.1} } /* ---------- settings sheet ---------- */ @@ -292,6 +303,7 @@