79 lines
2.5 KiB
HTML
79 lines
2.5 KiB
HTML
|
<!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>
|
||
|
|
⚠️ 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>
|