hansdezwart/bgclock
1
0
Fork 0
Code Issues Actions Releases Activity

Make the armed reset a centred, unwinding ring in the button flash colour

Browse Source 
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>
This commit is contained in:
hansdezwart
2026-08-11 11:31:06 +02:00
co-authored by Claude Opus 5
parent 559b6cd335
commit 0b96eb824b
2 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public_html/index.html
+22 -10
View File
@@ -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 @@
<div class="bar">
<button class="btn" id="reset" aria-label="Reset clock">
<svg class="ring" viewBox="0 0 40 40" aria-hidden="true"><circle cx="20" cy="20" r="18"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 5v6h-6"/><path d="M20 11a8 8 0 1 0-2.3 5.3"/>
</svg>