← back to Dw Photo Capture
public/themes/v2-four-tiles.html
349 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:#D9A441;
--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:28px 22px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto;}
.home-title{text-align:center;font-size:24px;margin:32px 0 8px;}
.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:#1B1B1B;cursor:pointer;font-size:18px;font-weight:700;
text-align:center;padding:12px;border:none;
}
.tile:focus-visible, button:focus-visible, .thumb-card:focus-visible, .brand-tile:focus-visible{outline:3px solid #2B2B2B;outline-offset:3px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.home-fab{
position:absolute;top:14px;right:14px;z-index:6;min-width:56px;min-height:56px;border-radius:16px;
background:#fff;border:2px solid #ddd4c2;font-size:22px;cursor:pointer;color:var(--text);
}
.camera-screen .home-fab{background:rgba(255,255,255,.9);}
.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:56px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center;font-size:17px;z-index:2;color:#fff;background:rgba(10,10,12,.82);padding:6px 14px;border-radius:999px;}
.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;
}
.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:#1B1B1B;}
.btn-update{background:var(--update);color:#1B1B1B;}
.btn-find{background:var(--find);color:#1B1B1B;}
.btn-sample{background:var(--sample);color:#1B1B1B;}
.btn-secondary{background:#fff;color:var(--text);border:2px solid #ddd4c2;}
.search-bar{
background:#fff;border-radius:14px;padding:14px 16px;font-size:16px;color:#6B6258;
border:2px solid #e6dfd2;
}
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow-y:auto;}
.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);}
.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;}
.item-title{font-size:20px;font-weight:700;}
.item-sub{font-size:14px;color:#6B6258;}
.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;
}
.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;}
</style>
<style id="ux-baseline">/* TK-12343 UX baseline: full-bleed on real phones, visible focus everywhere */
@media (max-width:405px){ html,body{margin:0;padding:0} body{overflow-x:hidden} .stage,.phone{width:100% !important;max-width:100%;margin:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;height:100dvh;min-height:640px} }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:3px solid #9C7A33 !important;outline-offset:2px}
</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="show('addCamera')"><span class="icon">🆕</span>Add New Item</button>
<button class="tile update" onclick="show('updateCamera1')"><span class="icon">🔄</span>Update an Item</button>
<button class="tile find" onclick="show('findMethods')"><span class="icon">🔍</span>Find an Item</button>
<button class="tile sample" onclick="show('sampleCamera')"><span class="icon">📦</span>Sample Arrived</button>
</div>
</div>
<!-- ADD: CAMERA -->
<div class="screen camera-screen" id="addCamera">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="hint">Take a photo of the sample</div>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="show('addBrand')" aria-label="Shoot photo">📸</button></div>
</div>
<!-- ADD: BRAND GRID -->
<div class="screen" id="addBrand">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad">
<div class="search-bar">🔎 Search brands…</div>
<h3>Which brand?</h3>
<div class="brand-grid">
<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,'Brewster')" onkeydown="onBrandKey(event,this,'Brewster')">Brewster</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,'Cole & Son')" onkeydown="onBrandKey(event,this,'Cole & Son')">Cole & Son</div>
<div class="brand-tile" tabindex="0" role="button" onclick="selectBrand(this,'Thibaut')" onkeydown="onBrandKey(event,this,'Thibaut')">Thibaut</div>
<div class="brand-tile" tabindex="0" role="button" onclick="selectBrand(this,'Mulberry')" onkeydown="onBrandKey(event,this,'Mulberry')">Mulberry</div>
</div>
<button class="btn btn-primary" id="saveDraftBtn" disabled onclick="saveDraft()">Save as Draft</button>
</div>
</div>
<!-- ADD: SAVED -->
<div class="screen center-flex" id="addSaved">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad center-flex">
<div class="big-emoji">✅</div>
<h2>Saved!</h2>
<div class="item-sub">Added as <strong id="savedBrandName"></strong></div>
<button class="btn btn-primary" onclick="show('addCamera')">Add Another Photo</button>
<button class="btn btn-secondary" onclick="goHome()">Done</button>
</div>
</div>
<!-- UPDATE: CAMERA 1 -->
<div class="screen camera-screen" id="updateCamera1">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="hint">Take a photo of the label or pattern</div>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="show('updateMatch')" aria-label="Shoot photo">📸</button></div>
</div>
<!-- UPDATE: MATCH CARD -->
<div class="screen" id="updateMatch">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<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</div>
</div>
<button class="btn btn-update" onclick="show('updateCamera2')">Yes, this one</button>
<button class="btn btn-secondary" onclick="show('updateTyping')">Search by typing instead</button>
</div>
</div>
<!-- UPDATE: TYPE SEARCH FALLBACK -->
<div class="screen" id="updateTyping">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad">
<h3>Type the item name or code</h3>
<div class="search-bar">Palm Damask…</div>
<button class="btn btn-update" onclick="show('updateCamera2')">Found It</button>
</div>
</div>
<!-- UPDATE: CAMERA 2 -->
<div class="screen camera-screen" id="updateCamera2">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="hint">Take the new photo</div>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="show('updateSaved')" aria-label="Shoot new photo">📸</button></div>
</div>
<!-- UPDATE: SAVED -->
<div class="screen center-flex" id="updateSaved">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad center-flex">
<div class="big-emoji">✅</div>
<h2>Saved!</h2>
<button class="btn btn-secondary" onclick="goHome()">Done</button>
</div>
</div>
<!-- FIND: METHODS -->
<div class="screen" id="findMethods">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad">
<h3>How do you want to find it?</h3>
<button class="btn btn-find" onclick="show('findResults')">📷 Scan the Label</button>
<button class="btn btn-find" onclick="show('findResults')">🎤 Say the Name</button>
<button class="btn btn-find" onclick="show('findResults')">⌨️ Type It</button>
</div>
</div>
<!-- FIND: RESULTS -->
<div class="screen" id="findResults">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad">
<h3>Results</h3>
<div class="thumb-list">
<div class="thumb-card" onclick="show('findDetail')">
<div class="thumb-sw"></div>
<div class="thumb-text">
<div class="item-title">Palm Damask — Sage</div>
<div class="item-sub">code DW-10423</div>
</div>
</div>
<div class="thumb-card" onclick="show('findDetail')">
<div class="thumb-sw" style="background:repeating-linear-gradient(45deg,#D9A441 0 14px,#eec076 14px 28px);"></div>
<div class="thumb-text">
<div class="item-title">Meadow Stripe — Gold</div>
<div class="item-sub">code DW-20115</div>
</div>
</div>
<div class="thumb-card" onclick="show('findDetail')">
<div class="thumb-sw" style="background:repeating-linear-gradient(45deg,#7C93B0 0 14px,#a9bcd3 14px 28px);"></div>
<div class="thumb-text">
<div class="item-title">Coastal Weave — Blue</div>
<div class="item-sub">code DW-30871</div>
</div>
</div>
</div>
</div>
</div>
<!-- FIND: DETAIL -->
<div class="screen" id="findDetail">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad">
<div class="card">
<div class="swatch"></div>
<div class="item-title">Palm Damask — Sage</div>
<div class="item-sub">code DW-10423</div>
</div>
<button class="btn btn-update" onclick="show('updateCamera2')">Update This</button>
<button class="btn btn-secondary" onclick="show('findMethods')">Back to Search</button>
</div>
</div>
<!-- SAMPLE: CAMERA -->
<div class="screen camera-screen" id="sampleCamera">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="hint">Scan the label on the box</div>
<div class="viewfinder"></div>
<div class="shutter-wrap"><button class="shutter" onclick="show('sampleMatch')" aria-label="Scan box">📸</button></div>
</div>
<!-- SAMPLE: MATCH -->
<div class="screen" id="sampleMatch">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<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</div>
</div>
<button class="btn btn-sample" onclick="show('samplePrinting')">Yes, Mark Received</button>
</div>
</div>
<!-- SAMPLE: PRINTING -->
<div class="screen center-flex camera-screen" id="samplePrinting">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad center-flex">
<div class="big-emoji">🖨️</div>
<p style="font-size:18px;">Printing sticker…</p>
</div>
</div>
<!-- SAMPLE: DONE -->
<div class="screen center-flex" id="sampleDone">
<button class="home-fab" onclick="goHome()" aria-label="Home">⌂</button>
<div class="pad center-flex">
<div class="big-emoji">✅</div>
<h2>Done!</h2>
<button class="btn btn-secondary" onclick="goHome()">Done</button>
</div>
</div>
</div>
<script>
let selectedBrand = null;
let printTimer = null;
function show(id){
if (printTimer && id !== 'sampleDone') { clearTimeout(printTimer); printTimer = null; }
document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
document.getElementById(id).classList.add('active');
if(id === 'addBrand'){
selectedBrand = null;
document.querySelectorAll('#addBrand .brand-tile').forEach(t=>t.classList.remove('selected'));
document.getElementById('saveDraftBtn').disabled = true;
}
if(id === 'samplePrinting'){
printTimer = setTimeout(function(){ printTimer = null; show('sampleDone'); }, 1100);
}
}
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 saveDraft(){
if(!selectedBrand) return;
document.getElementById('savedBrandName').textContent = selectedBrand;
show('addSaved');
}
function goHome(){ show('home'); }
</script>
</body>
</html>