0b96eb824b1c374241cfb79b1609ca77b5687c8f
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 <noreply@anthropic.com>
Description
A backgammon clock: both a Progressise Web App (PWA) and an Android App.
https://bgclock.hansdezwart.nl
1.2 MiB
Languages
HTML
81%
Python
9.2%
Java
8.5%
JavaScript
1.3%