66 lines
2.6 KiB
HTML
66 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<title>Register</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!--
|
|
identity's registration page (docs/project-plan.md Phase 6). The touch/type flow
|
|
here is the FALLBACK path — the primary path is voice ("register me as <name>",
|
|
see ../README.md), which never loads this page at all. This page exists for: the
|
|
no-mic case, disambiguating an "ambiguous" (multiple candidates found) result, and
|
|
reviewing who's already registered.
|
|
|
|
Reused as-is by hosts/kitchen-display/ and hosts/door-panel/ — config (?api=&
|
|
token=&device=) comes entirely from the kiosk's own launch URL, same pattern as
|
|
pantry-vision/frontend/app.js. Nothing in this file is host-specific.
|
|
-->
|
|
<main class="no-tabs">
|
|
<section class="block">
|
|
<h2>Register</h2>
|
|
<div id="camera-wrap">
|
|
<video id="camera-preview" autoplay playsinline muted style="width:100%;max-width:480px;border-radius:12px;background:#000"></video>
|
|
<canvas id="captured-frame" style="display:none"></canvas>
|
|
<p id="camera-error" class="error" hidden></p>
|
|
</div>
|
|
|
|
<form id="register-form" style="margin-top:16px;display:flex;flex-direction:column;gap:12px;max-width:480px">
|
|
<label style="display:flex;flex-direction:column;gap:4px">
|
|
Your name
|
|
<input id="f-name" type="text" required
|
|
style="min-height:48px;font-size:16px;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.16);background:#1a1a20;color:#e8e8ec">
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;font-size:15px">
|
|
<input id="f-no-device" type="checkbox" style="width:22px;height:22px">
|
|
I don't have a phone or tag
|
|
</label>
|
|
<button type="submit" id="register-btn" class="big-btn">Register</button>
|
|
<p id="register-status" class="hint"></p>
|
|
</form>
|
|
|
|
<div id="candidate-picker" hidden style="margin-top:16px">
|
|
<p class="hint">More than one device nearby — which one is yours?</p>
|
|
<div id="candidate-list" class="card-list"></div>
|
|
</div>
|
|
|
|
<div style="margin-top:20px;max-width:480px">
|
|
<button type="button" id="guest-btn" class="big-btn secondary">Add a guest (no name needed)</button>
|
|
<p id="guest-status" class="hint"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="block">
|
|
<h2>Already registered</h2>
|
|
<div id="people-list" class="card-list">
|
|
<p class="hint">Loading…</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="register.js"></script>
|
|
</body>
|
|
</html>
|