From 14d15b1fe8f396fc52ffb52414f3c69013a2c5ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?= =?UTF-8?q?=D0=B8=D0=BD?= Date: Fri, 23 Oct 2026 21:37:15 +0300 Subject: [PATCH] batch waiting cue: use the app's SIM silhouette for the card Redraw the inline card-into-reader SVG after sim.svg: a rounded card with the top-right cut corner and the 3x2 contact pad, sliding behind the reader bar. The viewBox grew to 72x48 and the resting position is 0, so the card is no longer clipped at the top; the insert slide is 20px. The currentColor/Tailwind theming and the reduced-motion fallback are unchanged. 1024 Python + 1063 frontend; simple-v472. --- CHANGELOG.md | 3 ++- frontend/index.html | 16 +++++++++------- frontend/src/style.css | 9 +++++---- frontend/style.css | 9 +++++---- frontend/sw.js | 2 +- 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dea0b07..feac810 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,8 @@ every change carries a descriptive commit message. title hints "Insert next card". The speaker button next to the status mutes the chime and the choice is remembered (`simple_ram_batch_sound`); the chime is unlocked by the Start click (browser autoplay policy); reduced-motion users get the static card-above- - the-slot picture. + the-slot picture. The card follows the app's SIM silhouette (`sim.svg`): a cut corner + and the contact pad, sliding behind the reader bar. ### Changed diff --git a/frontend/index.html b/frontend/index.html index 187d727..af59daa 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1919,15 +1919,17 @@
Working... diff --git a/frontend/src/style.css b/frontend/src/style.css index 23ec191..a541db3 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -10,13 +10,14 @@ run waits. The static transform is the reduced-motion fallback: the card rests above the slot. */ .ram-insert-card { - transform: translateY(-14px); + /* the resting position is the card just above the slot (0); the insert + slide takes it 20px down, behind the reader front */ animation: ram-insert 2.8s ease-in-out infinite; } @keyframes ram-insert { - 0%, 12% { transform: translateY(-14px); } - 45%, 55% { transform: translateY(10px); } - 88%, 100% { transform: translateY(-14px); } + 0%, 12% { transform: translateY(0); } + 45%, 55% { transform: translateY(20px); } + 88%, 100% { transform: translateY(0); } } .ram-insert-glow { animation: ram-insert-glow 1.4s ease-in-out infinite; diff --git a/frontend/style.css b/frontend/style.css index 3d80922..01f5c1e 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -1944,21 +1944,22 @@ video { rests above the slot. */ .ram-insert-card { - transform: translateY(-14px); + /* the resting position is the card just above the slot (0); the insert + slide takes it 20px down, behind the reader front */ animation: ram-insert 2.8s ease-in-out infinite; } @keyframes ram-insert { 0%, 12% { - transform: translateY(-14px); + transform: translateY(0); } 45%, 55% { - transform: translateY(10px); + transform: translateY(20px); } 88%, 100% { - transform: translateY(-14px); + transform: translateY(0); } } diff --git a/frontend/sw.js b/frontend/sw.js index 32c58ba..8bce6cf 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -1,4 +1,4 @@ -const CACHE = 'simple-v471'; +const CACHE = 'simple-v472'; const URLS = [ 'index.html', 'help.html',