76 lines
2.8 KiB
HTML
76 lines
2.8 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>Pantry</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!--
|
|
pantry-vision's frontend (docs/project-plan.md Phase 17). A single static page, no
|
|
build step, no framework — same "vendored, dependency-free" choice as the digest/
|
|
admin canvas SDKs. Config (the pantry-vision API URL and its bearer token) arrives
|
|
as URL query params from the kitchen-display kiosk's own launch command
|
|
(hosts/kitchen-display/configs/sway/pantry-kiosk), never baked into this file, so
|
|
this stays a plain static asset with no secret in git — see app.js's top comment.
|
|
-->
|
|
<nav id="tabs">
|
|
<button class="tab active" data-tab="scan">📷<span>Scan</span></button>
|
|
<button class="tab" data-tab="inventory">🧊<span>Inventory</span></button>
|
|
<button class="tab" data-tab="recipes">🍳<span>Recipes</span></button>
|
|
</nav>
|
|
|
|
<main>
|
|
<section id="scan" class="panel active">
|
|
<div id="scan-camera">
|
|
<video id="camera-preview" autoplay playsinline muted></video>
|
|
<button id="capture-btn" class="big-btn">Capture</button>
|
|
<p id="camera-error" class="error" hidden></p>
|
|
</div>
|
|
|
|
<div id="scan-result" hidden>
|
|
<canvas id="captured-frame"></canvas>
|
|
<form id="confirm-form">
|
|
<label>Name <input id="f-name" type="text" required></label>
|
|
<label>Category
|
|
<select id="f-category">
|
|
<option value="produce">Produce</option>
|
|
<option value="dairy">Dairy</option>
|
|
<option value="meat">Meat</option>
|
|
<option value="frozen">Frozen</option>
|
|
<option value="pantry">Pantry</option>
|
|
<option value="bakery">Bakery</option>
|
|
<option value="beverage">Beverage</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</label>
|
|
<label>Best before <input id="f-date" type="date" required></label>
|
|
<label>Quantity <input id="f-quantity" type="number" min="1" step="1" value="1"></label>
|
|
<p id="f-confidence" class="hint"></p>
|
|
<div class="form-actions">
|
|
<button type="button" id="retake-btn" class="big-btn secondary">Retake</button>
|
|
<button type="submit" id="confirm-btn" class="big-btn primary">Confirm & add</button>
|
|
</div>
|
|
<p id="confirm-status" class="hint"></p>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="inventory" class="panel">
|
|
<div id="inventory-list" class="card-list">
|
|
<p class="hint">Loading…</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="recipes" class="panel">
|
|
<div id="recipes-list" class="card-list">
|
|
<p class="hint">Loading…</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|