← back to Dw Photo Capture
public/kid-simple/v2-four-tiles.html
589 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v2 — Four Big Tiles</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#F7F3EC;
--add:#8FAE8B;
--update:#7C93B0;
--find:#C97B5B;
--sample:#9C6B1F;
--text:#2B2B2B;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0a0a0a;font-family:'DM Sans',sans-serif;}
.stage{
width:390px;height:780px;margin:24px auto;position:relative;
background:var(--bg);border-radius:36px;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.5);border:8px solid #000;color:var(--text);
}
.screen{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);}
.screen.active{display:flex;}
h1,h2,h3{font-family:'Fraunces',serif;margin:0;color:var(--text);}
.pad{padding:8px 22px 22px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto;}
.home-title{text-align:center;font-size:24px;margin:24px 0 0;}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 20px;flex:1;}
.tile{
border-radius:20px;min-height:140px;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:10px;color:#fff;cursor:pointer;font-size:18px;font-weight:700;
text-align:center;padding:12px;border:none;
}
.tile:active, .btn:active, .thumb-card:active, .brand-tile:active, .nav-btn:active{transform:scale(.97);}
.tile:focus-visible, button:focus-visible, .thumb-card:focus-visible, .brand-tile:focus-visible, input:focus-visible{outline:3px solid #2B2B2B;outline-offset:3px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;flex-shrink:0;z-index:6;}
.nav-btn{
min-height:56px;min-width:56px;border-radius:14px;border:2px solid #ddd4c2;background:#fff;
font-size:17px;font-weight:600;cursor:pointer;color:var(--text);padding:0 16px;
display:flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;
}
.camera-screen .nav-btn{background:rgba(255,255,255,.92);}
.step-indicator{padding:0 22px;font-size:16px;opacity:.7;flex-shrink:0;}
.tile .icon{font-size:44px;}
.tile.add{background:var(--add);}
.tile.update{background:var(--update);}
.tile.find{background:var(--find);}
.tile.sample{background:var(--sample);}
.camera-screen{background:#1c1c1e;color:#fff;position:relative;}
.camera-screen .hint{position:absolute;top:80px;left:0;right:0;text-align:center;font-size:17px;z-index:2;}
.viewfinder{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#2a2a2c 0 40px,#1c1c1e 40px 80px);}
.shutter-wrap{position:absolute;bottom:48px;left:0;right:0;display:flex;justify-content:center;z-index:2;}
.shutter{
width:88px;height:88px;border-radius:50%;background:#fff;border:6px solid var(--sample);
font-size:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.demo-toggle{position:absolute;bottom:150px;left:0;right:0;text-align:center;z-index:2;
font-size:14px;color:#fff;opacity:.75;display:flex;align-items:center;justify-content:center;gap:8px;}
.demo-toggle input{width:18px;height:18px;}
.btn{min-height:56px;border-radius:16px;border:none;font-family:'DM Sans',sans-serif;
font-size:18px;font-weight:700;cursor:pointer;padding:0 20px;width:100%;}
.btn-primary{background:var(--add);color:#fff;}
.btn-update{background:var(--update);color:#fff;}
.btn-find{background:var(--find);color:#fff;}
.btn-sample{background:var(--sample);color:#fff;}
.btn-secondary{background:#fff;color:var(--text);border:2px solid #ddd4c2;}
.actions{margin-top:auto;display:flex;flex-direction:column-reverse;gap:12px;padding-top:16px;}
.search-bar{background:#fff;border-radius:14px;padding:0 16px;border:2px solid #e6dfd2;display:flex;align-items:center;}
.search-bar input{border:none;background:none;font-size:17px;color:var(--text);padding:14px 6px;width:100%;font-family:'DM Sans',sans-serif;}
.search-bar input::placeholder{color:#6B6156;}
.section-label{font-size:14px;opacity:.65;text-transform:uppercase;letter-spacing:.5px;}
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.brand-tile{
background:#fff;border:2px solid #e6dfd2;border-radius:14px;min-height:72px;
display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;
cursor:pointer;text-align:center;padding:8px;
}
.brand-tile:hover{border-color:var(--add);}
.brand-tile.selected{border-color:var(--add);background:#eef5ec;box-shadow:inset 0 0 0 2px var(--add);}
.brand-tile.hidden{display:none;}
.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 4px 16px rgba(0,0,0,.08);}
.swatch{
width:100%;height:180px;border-radius:14px;margin-bottom:12px;
background:repeating-linear-gradient(45deg,#8FAE8B 0 22px,#B9CBB2 22px 44px),linear-gradient(135deg,#8FAE8B,#6f8d6c);
background-blend-mode:multiply;
}
.swatch.blue{background:repeating-linear-gradient(45deg,#7C93B0 0 22px,#B3C3D6 22px 44px),linear-gradient(135deg,#7C93B0,#5f7692);background-blend-mode:multiply;}
.swatch.small{height:120px;}
.thumb{width:96px;height:96px;border-radius:12px;flex-shrink:0;
background:repeating-linear-gradient(45deg,#8FAE8B 0 16px,#B9CBB2 16px 32px),linear-gradient(135deg,#8FAE8B,#6f8d6c);
background-blend-mode:multiply;}
.item-title{font-size:20px;font-weight:700;}
.item-sub{font-size:17px;color:#6B6156;}
.center-flex{align-items:center;justify-content:center;text-align:center;}
.big-emoji{font-size:60px;}
.thumb-list{display:flex;flex-direction:column;gap:12px;overflow-y:auto;}
.thumb-card{
display:flex;gap:12px;background:#fff;border-radius:14px;padding:10px;border:2px solid #e6dfd2;
cursor:pointer;align-items:center;min-height:56px;
}
.thumb-sw{width:64px;height:64px;border-radius:10px;flex-shrink:0;
background:repeating-linear-gradient(45deg,#C97B5B 0 14px,#e0a184 14px 28px);}
.thumb-text .item-title{font-size:16px;}
.done-row{display:flex;gap:14px;align-items:center;}
.done-facts{font-size:17px;line-height:1.5;}
.done-facts strong{font-size:18px;}
.toast{
position:absolute;left:16px;right:16px;bottom:24px;background:#2B2B2B;color:#fff;
border-radius:14px;padding:14px 18px;display:none;align-items:center;justify-content:space-between;
gap:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:20;font-size:17px;border:2px solid var(--sample);
}
.toast.show{display:flex;}
.toast button{background:none;border:none;color:#F4D48A;font-weight:700;font-size:17px;cursor:pointer;min-height:56px;min-width:56px;padding:0 6px;}
@media (prefers-reduced-motion: reduce){
*{transition:none !important;}
}
</style>
</head>
<body>
<div class="stage">
<!-- HOME -->
<div class="screen active" id="home">
<div class="home-title">What are we doing?</div>
<div class="tile-grid">
<button class="tile add" onclick="go('addCamera')"><span class="icon">🆕</span>Add New Item</button>
<button class="tile update" onclick="go('updateCamera1')"><span class="icon">🔄</span>Update an Item</button>
<button class="tile find" onclick="go('findMethods')"><span class="icon">🔍</span>Find an Item</button>
<button class="tile sample" onclick="go('sampleCamera')"><span class="icon">📦</span>A Sample Came In</button>
</div>
</div>
<!-- ADD: CAMERA -->
<div class="screen camera-screen" id="addCamera">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="hint">Take a photo of the sample</div>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="showPhotoCheck('addBrand')" aria-label="Shoot photo">📸</button></div>
</div>
<!-- PHOTO CHECK (generic) -->
<div class="screen center-flex" id="photoCheck">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad center-flex">
<div class="thumb" id="photoCheckThumb" style="width:200px;height:200px;"></div>
<p style="font-size:18px;" aria-live="polite">Looks good?</p>
<div class="actions">
<button class="btn btn-primary" onclick="photoLooksGood()">Looks good</button>
<button class="btn btn-secondary" onclick="goBack()">Retake</button>
</div>
</div>
</div>
<!-- ADD: BRAND GRID -->
<div class="screen" id="addBrand">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<h3>Which brand?</h3>
<div class="search-bar"><input type="text" id="brandSearch" placeholder="Search brands…" oninput="filterBrands()" aria-label="Search brands"></div>
<div class="section-label">Recent</div>
<div class="brand-grid" id="recentBrands">
<div class="brand-tile" tabindex="0" role="button" onclick="selectBrand(this,'York')" onkeydown="onBrandKey(event,this,'York')">York</div>
<div class="brand-tile" tabindex="0" role="button" onclick="selectBrand(this,'Kravet')" onkeydown="onBrandKey(event,this,'Kravet')">Kravet</div>
<div class="brand-tile" tabindex="0" role="button" onclick="selectBrand(this,'Thibaut')" onkeydown="onBrandKey(event,this,'Thibaut')">Thibaut</div>
</div>
<div class="section-label">All Brands</div>
<div class="brand-grid" id="allBrands">
<div class="brand-tile" tabindex="0" role="button" onclick="selectBrand(this,'Brewster')" onkeydown="onBrandKey(event,this,'Brewster')">Brewster</div>
<div class="brand-tile" tabindex="0" role="button" onclick="selectBrand(this,'Cole & Son')" onkeydown="onBrandKey(event,this,'Cole & Son')">Cole & Son</div>
<div class="brand-tile" tabindex="0" role="button" onclick="selectBrand(this,'Mulberry')" onkeydown="onBrandKey(event,this,'Mulberry')">Mulberry</div>
</div>
<div class="actions">
<button class="btn btn-primary" id="saveDraftBtn" disabled onclick="saveDraft()">Save as Draft</button>
</div>
</div>
</div>
<!-- GENERIC DONE -->
<div class="screen center-flex" id="doneScreen">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<div class="done-row">
<div class="thumb" id="doneThumb"></div>
<div class="done-facts">
<strong id="doneTitle"></strong><br>
code <span id="doneCode"></span> · <span id="doneBrand"></span><br>
<span id="doneAction"></span>
</div>
</div>
<div class="actions">
<button class="btn btn-primary" id="doneRepeatBtn" onclick="goHome()">Do Another</button>
<button class="btn btn-secondary" onclick="goHome()">Home</button>
</div>
</div>
</div>
<!-- UPDATE: CAMERA 1 -->
<div class="screen camera-screen" id="updateCamera1">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="step-indicator" style="color:#fff;opacity:.75;">Step 1 of 2</div>
<div class="hint">Take a photo of the label or pattern</div>
<label class="demo-toggle"><input type="checkbox" id="demoToggle" onchange="setDemoToggle(this.checked)"> Demo: show "no match"</label>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="showPhotoCheck('afterUpdateShot')" aria-label="Shoot photo">📸</button></div>
</div>
<!-- UPDATE: MATCH CARD -->
<div class="screen" id="updateMatch">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="step-indicator">Step 1 of 2</div>
<div class="pad">
<div class="card">
<div class="swatch blue"></div>
<div class="item-title">Palm Damask — Sage</div>
<div class="item-sub">code DW-10423 · York</div>
</div>
<div class="actions">
<button class="btn btn-update" onclick="go('updateCamera2')">Yes, this one</button>
<button class="btn btn-secondary" onclick="go('updateTyping')">Search by typing instead</button>
</div>
</div>
</div>
<!-- UPDATE: TYPE SEARCH FALLBACK -->
<div class="screen" id="updateTyping">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<h2>Type the item name or code</h2>
<div class="search-bar"><input type="text" id="updateTypeInput" placeholder="Palm Damask…" aria-label="Type the item name or code"></div>
<div class="actions">
<button class="btn btn-update" onclick="go('updateCamera2')">Found It</button>
</div>
</div>
</div>
<!-- UPDATE: NO MATCH -->
<div class="screen center-flex" id="updateNoMatch">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad center-flex">
<div class="big-emoji">🤔</div>
<h2 aria-live="polite">No match found</h2>
<div class="actions">
<button class="btn btn-update" onclick="go('updateCamera1')">Try again</button>
<button class="btn btn-secondary" onclick="go('updateTyping')">Type the code instead</button>
</div>
</div>
</div>
<!-- UPDATE: CAMERA 2 -->
<div class="screen camera-screen" id="updateCamera2">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="step-indicator" style="color:#fff;opacity:.75;">Step 2 of 2</div>
<div class="hint">Take the new photo</div>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="showPhotoCheck('updateSave')" aria-label="Shoot new photo">📸</button></div>
</div>
<!-- FIND: METHODS -->
<div class="screen" id="findMethods">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<h3>How do you want to find it?</h3>
<button class="btn btn-find" onclick="findScan()">📷 Scan the Label</button>
<button class="btn btn-find" onclick="go('findResults')">🎤 Say the Name</button>
<button class="btn btn-find" onclick="go('findResults')">⌨️ Type It</button>
<label style="font-size:14px;opacity:.7;display:flex;align-items:center;gap:8px;margin-top:8px;">
<input type="checkbox" id="demoToggleFind" onchange="setDemoToggle(this.checked)" style="width:18px;height:18px;"> Demo: show "no match"
</label>
</div>
</div>
<!-- FIND: SCAN CAMERA -->
<div class="screen camera-screen" id="findCamera">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="hint">Scan the label</div>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="showPhotoCheck('findResults')" aria-label="Scan label">📸</button></div>
</div>
<!-- FIND: RESULTS -->
<div class="screen" id="findResults">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<h3 aria-live="polite">Results</h3>
<div class="thumb-list" id="findResultsList"></div>
<div id="findNoResults" style="display:none;" class="center-flex">
<div class="big-emoji">🤔</div>
<h2>No match found</h2>
<div class="actions">
<button class="btn btn-find" onclick="go('findMethods')">Try again</button>
<button class="btn btn-secondary" onclick="go('findTyping')">Type the code instead</button>
</div>
</div>
</div>
</div>
<!-- FIND: TYPE CODE (no-match fallback) -->
<div class="screen" id="findTyping">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<h3>Type the item's code</h3>
<div class="search-bar"><input type="text" placeholder="e.g. DW-10423" aria-label="Type the item code"></div>
<div class="actions">
<button class="btn btn-find" onclick="go('findDetail')">Find It</button>
</div>
</div>
</div>
<!-- FIND: DETAIL -->
<div class="screen" id="findDetail">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<div class="card">
<div class="swatch"></div>
<div class="item-title" id="findDetailTitle">Palm Damask — Sage</div>
<div class="item-sub" id="findDetailSub">code DW-10423 · York</div>
</div>
<div class="actions">
<button class="btn btn-update" onclick="go('updateCamera2')">Update This</button>
<button class="btn btn-secondary" onclick="go('findMethods')">Back to Search</button>
</div>
</div>
</div>
<!-- SAMPLE: CAMERA -->
<div class="screen camera-screen" id="sampleCamera">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="hint">Scan the label on the box</div>
<label class="demo-toggle"><input type="checkbox" id="demoToggleSample" onchange="setDemoToggle(this.checked)"> Demo: show "no match"</label>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="showPhotoCheck('afterSampleShot')" aria-label="Scan box">📸</button></div>
</div>
<!-- SAMPLE: MATCH -->
<div class="screen" id="sampleMatch">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<div class="card">
<div class="swatch small"></div>
<div class="item-title">Palm Damask — Sage</div>
<div class="item-sub">code DW-10423 · York</div>
</div>
<div class="actions">
<button class="btn btn-sample" onclick="markReceived()">Yes, Mark Received</button>
<button class="btn btn-secondary" onclick="go('sampleNoMatch')">Not this item</button>
</div>
</div>
</div>
<!-- SAMPLE: NO MATCH -->
<div class="screen center-flex" id="sampleNoMatch">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad center-flex">
<div class="big-emoji">🤔</div>
<h2 aria-live="polite">No match found</h2>
<div class="actions">
<button class="btn btn-sample" onclick="go('sampleCamera')">Try again</button>
<button class="btn btn-secondary" onclick="go('sampleTyping')">Type the code instead</button>
</div>
</div>
</div>
<!-- SAMPLE: TYPE CODE -->
<div class="screen" id="sampleTyping">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad">
<h3>Type the item's code</h3>
<div class="search-bar"><input type="text" placeholder="e.g. DW-10423" aria-label="Type the item code"></div>
<div class="actions">
<button class="btn btn-sample" onclick="markReceived()">Find It</button>
</div>
</div>
</div>
<!-- SAMPLE: PRINTING -->
<div class="screen center-flex camera-screen" id="samplePrinting">
<div class="topbar"><button class="nav-btn" onclick="goBack()" aria-label="Back">‹ Back</button><button class="nav-btn" onclick="goHome()" aria-label="Home">⌂ Home</button></div>
<div class="pad center-flex">
<div class="big-emoji">🖨️</div>
<p style="font-size:18px;" aria-live="polite">Printing sticker…</p>
</div>
</div>
</div>
<!-- TOAST (undo) -->
<div class="toast" id="toast" role="status" aria-live="polite">
<span id="toastText">Saved</span>
<button onclick="undoAction()">Undo</button>
</div>
<script>
let historyStack = ['home'];
let selectedBrand = null;
let demoNoMatch = false;
let photoCheckNext = null;
let toastTimer = null;
let undoTarget = null;
let findResultCounter = 0;
function render(id){
document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
function go(id){
historyStack.push(id);
render(id);
onEnter(id);
}
function goBack(){
if(historyStack.length > 1){
historyStack.pop();
render(historyStack[historyStack.length - 1]);
} else {
goHome();
}
}
function goHome(){ historyStack = ['home']; render('home'); }
function onEnter(id){
if(id === 'addBrand'){
selectedBrand = null;
document.querySelectorAll('#addBrand .brand-tile').forEach(t=>t.classList.remove('selected'));
document.getElementById('saveDraftBtn').disabled = true;
document.getElementById('brandSearch').value = '';
filterBrands();
}
if(id === 'findResults'){ renderFindResults(); }
if(id === 'updateCamera1' || id === 'findMethods' || id === 'sampleCamera'){ syncDemoToggles(); }
}
// the three demo "no match" checkboxes all reflect ONE shared boolean
function setDemoToggle(checked){
demoNoMatch = checked;
syncDemoToggles();
}
function syncDemoToggles(){
['demoToggle','demoToggleFind','demoToggleSample'].forEach(function(id){
const el = document.getElementById(id);
if(el) el.checked = demoNoMatch;
});
}
function showPhotoCheck(nextId){
photoCheckNext = nextId;
go('photoCheck');
}
function photoLooksGood(){
historyStack.pop(); // drop photoCheck
if(photoCheckNext === 'afterUpdateShot'){ afterUpdateShot(); return; }
if(photoCheckNext === 'afterSampleShot'){ afterSampleShot(); return; }
if(photoCheckNext === 'updateSave'){ updateSave(); return; }
if(photoCheckNext === 'findResults'){ go('findResults'); return; }
go(photoCheckNext);
}
function afterUpdateShot(){
demoNoMatch ? go('updateNoMatch') : go('updateMatch');
}
function afterSampleShot(){
demoNoMatch ? go('sampleNoMatch') : go('sampleMatch');
}
function findScan(){ go('findCamera'); }
function renderFindResults(){
const list = document.getElementById('findResultsList');
const empty = document.getElementById('findNoResults');
findResultCounter++;
const miss = demoNoMatch;
if(miss){
list.style.display = 'none';
empty.style.display = 'flex';
return;
}
list.style.display = 'flex';
empty.style.display = 'none';
const items = [
{name:'Palm Damask — Sage', code:'DW-10423', brand:'York', bg:'repeating-linear-gradient(45deg,#C97B5B 0 14px,#e0a184 14px 28px)'},
{name:'Meadow Stripe — Gold', code:'DW-20115', brand:'Kravet', bg:'repeating-linear-gradient(45deg,#B8842A 0 14px,#eec076 14px 28px)'},
{name:'Coastal Weave — Blue', code:'DW-30871', brand:'Thibaut', bg:'repeating-linear-gradient(45deg,#7C93B0 0 14px,#a9bcd3 14px 28px)'},
];
list.innerHTML = '';
items.forEach(it=>{
const card = document.createElement('div');
card.className = 'thumb-card';
card.tabIndex = 0;
card.setAttribute('role','button');
card.innerHTML = '<div class="thumb-sw" style="background:'+it.bg+';"></div><div class="thumb-text"><div class="item-title">'+it.name+'</div><div class="item-sub">code '+it.code+'</div></div>';
card.onclick = () => {
document.getElementById('findDetailTitle').textContent = it.name;
document.getElementById('findDetailSub').textContent = 'code ' + it.code + ' · ' + it.brand;
go('findDetail');
};
list.appendChild(card);
});
}
function selectBrand(el, name){
document.querySelectorAll('#addBrand .brand-tile').forEach(t=>t.classList.remove('selected'));
el.classList.add('selected');
selectedBrand = name;
document.getElementById('saveDraftBtn').disabled = false;
}
function onBrandKey(evt, el, name){
if(evt.key === 'Enter' || evt.key === ' '){
evt.preventDefault();
selectBrand(el, name);
}
}
function filterBrands(){
const q = document.getElementById('brandSearch').value.trim().toLowerCase();
document.querySelectorAll('#allBrands .brand-tile').forEach(t=>{
t.classList.toggle('hidden', q.length > 0 && !t.textContent.toLowerCase().includes(q));
});
}
function randomCode(){ return 'DW-' + Math.floor(10000 + Math.random() * 89999); }
function showDone(opts){
document.getElementById('doneThumb').className = 'thumb' + (opts.blue ? ' blue' : '');
document.getElementById('doneTitle').textContent = opts.name;
document.getElementById('doneCode').textContent = opts.code;
document.getElementById('doneBrand').textContent = opts.brand;
document.getElementById('doneAction').textContent = opts.action;
historyStack = ['home', 'doneScreen'];
render('doneScreen');
}
function saveDraft(){
if(!selectedBrand) return;
showToast('Saved · Undo', 'addBrand');
showDone({name:'New Item', code: randomCode(), brand: selectedBrand, action:'Saved as a draft'});
}
function updateSave(){
showToast('Saved · Undo', 'updateMatch');
showDone({name:'Palm Damask — Sage', code:'DW-10423', brand:'York', action:'Updated the photo', blue:true});
}
function markReceived(){
go('samplePrinting');
var fromScreen = 'samplePrinting';
setTimeout(function(){
if(historyStack[historyStack.length - 1] !== fromScreen) return;
showToast('Saved · Undo', 'sampleMatch');
showDone({name:'Palm Damask — Sage', code:'DW-10423', brand:'York', action:'Marked as received'});
}, 1100);
}
function showToast(text, backTarget){
document.getElementById('toastText').textContent = text;
undoTarget = backTarget;
const t = document.getElementById('toast');
t.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(function(){ t.classList.remove('show'); }, 5000);
}
function undoAction(){
document.getElementById('toast').classList.remove('show');
clearTimeout(toastTimer);
if(undoTarget){
historyStack = ['home', undoTarget];
render(undoTarget);
// NOTE: do NOT call onEnter() here — undo must restore the confirm
// screen with the prior selection intact, not reset it (onEnter('addBrand')
// clears selectedBrand for a fresh forward-navigation entry only).
}
}
</script>
</body>
</html>