UX: Routen Standby — Fingerabdruck-Button statt ganzer Bildschirm (SW by-v947)

This commit is contained in:
rene 2026-05-14 16:29:09 +02:00
parent 1ea8127aaf
commit 2cf87bab7e
4 changed files with 30 additions and 16 deletions

View file

@ -406,7 +406,7 @@ async def serve_media(path: str, request: _Request):
raise _HE(404, "Nicht gefunden.") raise _HE(404, "Nicht gefunden.")
return _media_response(filepath) return _media_response(filepath)
APP_VER = "946" # muss mit APP_VER in app.js übereinstimmen APP_VER = "947" # muss mit APP_VER in app.js übereinstimmen
@app.get("/.well-known/assetlinks.json") @app.get("/.well-known/assetlinks.json")
async def assetlinks(): async def assetlinks():

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '946'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '947'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen // Cache-Bust-Parameter nach Update-Reload sofort entfernen

View file

@ -668,13 +668,25 @@ window.Page_routes = (() => {
<span>·</span> <span>·</span>
<span id="rk-rec-dim-dist">0.00 km</span> <span id="rk-rec-dim-dist">0.00 km</span>
</div> </div>
<svg width="56" height="56" viewBox="0 0 56 56" style="margin-top:36px"> <button id="rk-dim-unlock-btn"
<circle cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="2.5"/> style="background:none;border:none;cursor:pointer;outline:none;
<circle id="rk-dim-prog" cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,.7)" stroke-width="2.5" display:flex;flex-direction:column;align-items:center;gap:0;
stroke-dasharray="150.8" stroke-dashoffset="150.8" stroke-linecap="round" margin-top:36px;padding:0;-webkit-tap-highlight-color:transparent;
transform="rotate(-90 28 28)" style="transition:none"/> touch-action:none;user-select:none">
</svg> <div style="position:relative;width:56px;height:56px">
<div style="font-size:11px;opacity:.3;margin-top:8px">2 Sek. halten</div> <svg width="56" height="56" viewBox="0 0 56 56">
<circle cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="2.5"/>
<circle id="rk-dim-prog" cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,.7)" stroke-width="2.5"
stroke-dasharray="150.8" stroke-dashoffset="150.8" stroke-linecap="round"
transform="rotate(-90 28 28)" style="transition:none"/>
</svg>
<svg style="position:absolute;inset:0;margin:auto;width:24px;height:24px;opacity:.55"
viewBox="0 0 256 256" aria-hidden="true">
<use href="/icons/phosphor.svg#fingerprint"></use>
</svg>
</div>
<div style="font-size:11px;opacity:.3;margin-top:8px">2 Sek. halten</div>
</button>
</div> </div>
`; `;
document.body.appendChild(ovl); document.body.appendChild(ovl);
@ -789,16 +801,18 @@ window.Page_routes = (() => {
_recOvl.addEventListener('touchstart', _onRecOvlTouch, { passive: true }); _recOvl.addEventListener('touchstart', _onRecOvlTouch, { passive: true });
_recOvl.addEventListener('pointerdown', _onRecOvlTouch); _recOvl.addEventListener('pointerdown', _onRecOvlTouch);
// Long-Press auf dem Schwarzbildschirm → nach 4s zurück zur Aufzeichnung // Long-Press auf Fingerabdruck-Button → nach 2s zurück zur Aufzeichnung
const dim = document.getElementById('rk-rec-dim'); const dim = document.getElementById('rk-rec-dim');
const unlockBtn = document.getElementById('rk-dim-unlock-btn');
let _lpTimer = null; let _lpTimer = null;
const cancelLp = () => { const cancelLp = () => {
clearTimeout(_lpTimer); clearTimeout(_lpTimer);
const prog = document.getElementById('rk-dim-prog'); const prog = document.getElementById('rk-dim-prog');
if (prog) { prog.style.transition = 'none'; prog.style.strokeDashoffset = '150.8'; } if (prog) { prog.style.transition = 'none'; prog.style.strokeDashoffset = '150.8'; }
}; };
dim.addEventListener('pointerdown', e => { unlockBtn.addEventListener('pointerdown', e => {
e.stopPropagation(); e.stopPropagation();
unlockBtn.setPointerCapture(e.pointerId);
const prog = document.getElementById('rk-dim-prog'); const prog = document.getElementById('rk-dim-prog');
if (prog) { prog.style.transition = 'stroke-dashoffset 2s linear'; prog.style.strokeDashoffset = '0'; } if (prog) { prog.style.transition = 'stroke-dashoffset 2s linear'; prog.style.strokeDashoffset = '0'; }
_lpTimer = setTimeout(() => { _lpTimer = setTimeout(() => {
@ -807,9 +821,9 @@ window.Page_routes = (() => {
_resetRecInactTimer(); _resetRecInactTimer();
}, 2000); }, 2000);
}); });
dim.addEventListener('pointerup', cancelLp); unlockBtn.addEventListener('pointerup', cancelLp);
dim.addEventListener('pointercancel', cancelLp); unlockBtn.addEventListener('pointercancel', cancelLp);
dim.addEventListener('pointerleave', cancelLp); unlockBtn.addEventListener('pointerleave', cancelLp);
} }
function _onRecOvlTouch(e) { function _onRecOvlTouch(e) {

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v946'; const CACHE_VERSION = 'by-v947';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache