pelmen/baton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

kin: BATON-ARCH-009-frontend_dev

Browse source
This commit is contained in:
Gros Frumos 2026-03-20 21:09:05 +02:00
parent 8ecaeeafc6
commit 6dff5de077
7 changed files with 625 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

78
frontend/index.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="Emergency signal button">
<!-- PWA meta tags -->
<meta name="theme-color" content="#ff0000">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Baton">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/icons/icon-192.png">
<link rel="stylesheet" href="/style.css">
<title>Baton</title>
</head>
<body>
<!-- Private mode banner: shown when localStorage is unavailable (decision #1041).
Explicit action guidance: user must open in normal mode to retain registration. -->
<div id="private-mode-banner" class="private-banner" hidden>
&#9888;&#65039; Private mode detected. Your registration will be lost when this tab
closes. To keep your data, open Baton in a regular (non-private) browser tab.
</div>
<!-- Shared top bar: user initials avatar + network status indicator -->
<header class="topbar">
<div class="user-avatar" id="user-avatar" aria-label="User">?</div>
<div class="network-indicator" id="indicator-network"
role="status" aria-label="Network status"></div>
</header>
<!-- Onboarding screen: shown on first visit (no UUID registered yet) -->
<div id="screen-onboarding" class="screen" role="main" hidden>
<div class="screen-content">
<input
type="text"
id="name-input"
class="name-input"
placeholder="Your name"
maxlength="100"
autocomplete="name"
autocorrect="off"
autocapitalize="words"
spellcheck="false"
aria-label="Your name"
>
<button type="button" id="btn-confirm" class="btn-confirm" disabled>
Confirm
</button>
</div>
</div>
<!-- Main screen: SOS button -->
<div id="screen-main" class="screen" role="main" hidden>
<div class="screen-content">
<button
type="button"
id="btn-sos"
class="btn-sos"
data-state="default"
aria-label="Send emergency signal"
>
SOS
</button>
</div>
</div>
<!-- Status message: errors and confirmations -->
<div id="status" class="status" role="alert" aria-live="polite" hidden></div>
<script src="/app.js"></script>
</body>
</html>