hansdezwartandClaude Opus 5
998009629b
Two things Hans spotted playing on the phone. A blackish gradient sat across the bottom of the screen. Both sheets are fixed to bottom:0 and pushed off with translateY(101%), but their box-shadow is thrown 18px *upward* with a 50px blur — so a closed sheet, sitting 1% below the viewport, blurred darkness back onto the clock and left it there, twice over, once per sheet. The shadow now only exists on .sheet.on. Down one column the bottom used to fade 154 to 111 over the last 70px; it is flat 154 to the edge. An open sheet still casts exactly what it did. A flagged clock now reads "Out of time" over two lines in white instead of showing 0:00, on the red the panel already turned. Sizing it off the viewport would not work: the score lines above eat into what is left, so a 5-point match has less room than a 1-point one on the same phone. The stack is a size container and the words take the smaller of 23vw and 42cqh — two lines at line-height 1.04 need 2.08x the font size, so 42% of the container leaves a tenth spare. Measured in real viewports it lands between 52px on a 320x568 at five points and 95px on a 412x915, fitting every combination; with two lines it is the width that binds first, "Out of" being the long line. The other half keeps showing its own time. Checked that normal play still shows clocks and hides the words on both panels, and that Reset puts the flagged panel back to its clock. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
34 lines
981 B
JavaScript
34 lines
981 B
JavaScript
/* Cache-first: once installed the clock never touches the network again. */
|
|
const CACHE = "bgclock-v16";
|
|
const FILES = [
|
|
"./",
|
|
"./index.html",
|
|
"./manifest.webmanifest",
|
|
"./icon-192.png",
|
|
"./icon-512.png",
|
|
"./icon-maskable-512.png"
|
|
];
|
|
|
|
self.addEventListener("install", (e) => {
|
|
e.waitUntil(caches.open(CACHE).then((c) => c.addAll(FILES)).then(() => self.skipWaiting()));
|
|
});
|
|
|
|
self.addEventListener("activate", (e) => {
|
|
e.waitUntil(
|
|
caches.keys()
|
|
.then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
|
|
.then(() => self.clients.claim())
|
|
);
|
|
});
|
|
|
|
self.addEventListener("fetch", (e) => {
|
|
if (e.request.method !== "GET") return;
|
|
e.respondWith(
|
|
caches.match(e.request).then((hit) => hit || fetch(e.request).then((res) => {
|
|
const copy = res.clone();
|
|
caches.open(CACHE).then((c) => c.put(e.request, copy)).catch(() => {});
|
|
return res;
|
|
}).catch(() => caches.match("./index.html")))
|
|
);
|
|
});
|