← back to Dw Photo Capture
public/themes/v19-left-or-right.html
161 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v19 — Left or Right</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#ffffff;
--ink:#1a1a1a;
--muted:#6b6b6b;
--left:#ededed;
--keep:#2e9e5b;
--photo:#b9a27a;
--focus:#2e6bd6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0a0a0a;font-family:'Inter',system-ui,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(--ink);
display:flex;flex-direction:column;
}
@media (max-width:405.98px){
.stage{width:100%;height:100dvh;min-height:640px;margin:0;border:0;border-radius:0;}
}
.screen{display:none;flex:1;min-height:0;flex-direction:column;gap:16px;padding:18px 24px 28px;overflow-y:auto;overflow-x:hidden;}
.screen.is-active{display:flex;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;flex-shrink:0;}
.step{margin:0;font-size:13px;font-weight:600;color:var(--muted);}
h1{margin:0;font-weight:700;text-align:center;line-height:1.2;color:var(--ink);}
h1:focus{outline:none;}
.h-30{font-size:30px;} .h-32{font-size:32px;}
button{font:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent;}
button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;}
.home{
min-width:44px;min-height:44px;padding:0 14px;border-radius:14px;
background:var(--left);color:var(--ink);font-size:15px;font-weight:700;
}
.spacer{flex:1 1 0;min-height:0;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex-shrink:0;}
.side{
height:360px;max-height:52dvh;min-height:220px;border-radius:20px;font-weight:700;line-height:1.2;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;
transition:transform .12s ease;
}
.side:active{transform:scale(.98);}
.side .arrow{font-size:30px;}
.side .word{font-size:34px;}
.side .word.sm{font-size:26px;}
.side.l{background:var(--left);color:var(--ink);}
.side.r{background:var(--ink);color:#fff;}
.side.r:focus-visible{outline-color:var(--focus);}
.hint{margin:0;text-align:center;font-size:15px;color:var(--muted);min-height:20px;}
.camera{
background:#1c1c1e;border-radius:24px;display:flex;align-items:center;justify-content:center;
color:#fff;font-size:18px;font-weight:600;flex:1 1 auto;min-height:220px;max-height:470px;position:relative;overflow:hidden;
}
.camera::before,.camera::after{content:"";position:absolute;width:40px;height:40px;border:3px solid rgba(255,255,255,.55);}
.camera::before{top:20px;left:20px;border-right:0;border-bottom:0;border-radius:10px 0 0 0;}
.camera::after{bottom:20px;right:20px;border-left:0;border-top:0;border-radius:0 0 10px 0;}
.shutter-row{display:flex;justify-content:center;flex-shrink:0;}
.shutter{width:96px;height:96px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px #fff inset;}
.shutter:active{transform:scale(.96);}
.photo{
background:var(--photo);border-radius:24px;height:380px;max-height:46dvh;min-height:200px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;color:#2b2415;font-size:18px;font-weight:600;
background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 14px,rgba(0,0,0,.04) 14px 28px);
}
.choice{
min-height:120px;border-radius:20px;font-size:24px;font-weight:700;
display:flex;align-items:center;justify-content:center;gap:8px;
}
.choice.l{background:var(--left);color:var(--ink);}
.choice.r{background:var(--keep);color:#fff;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none !important;transition:none !important;}
}
</style>
</head>
<body>
<main class="stage" id="app">
<!-- 1 / 4 · Start -->
<section class="screen is-active" data-screen="1" aria-labelledby="s1-h">
<div class="topbar"><p class="step">1 / 4 · Start</p></div>
<h1 id="s1-h" class="h-30" tabindex="-1">Got a sample in your hand?</h1>
<div class="spacer"></div>
<div class="split">
<button class="side l" id="no-btn" aria-label="No"><span class="arrow" aria-hidden="true">⬅️</span><span class="word">NO</span></button>
<button class="side r" data-go="2" aria-label="Yes"><span class="arrow" aria-hidden="true">➡️</span><span class="word">YES</span></button>
</div>
<p class="hint" id="no-hint" aria-live="polite"></p>
<div class="spacer"></div>
</section>
<!-- 2 / 4 · Is it new? -->
<section class="screen" data-screen="2" aria-labelledby="s2-h">
<div class="topbar"><p class="step">2 / 4 · Is it new?</p><button class="home" data-go="1" aria-label="Home">⌂ Home</button></div>
<h1 id="s2-h" class="h-32" tabindex="-1">Is it new to us?</h1>
<div class="spacer"></div>
<div class="split">
<button class="side l" data-go="3" aria-label="Already have it"><span class="arrow" aria-hidden="true">⬅️</span><span class="word sm">Already<br>have it</span></button>
<button class="side r" data-go="3" aria-label="Brand new"><span class="arrow" aria-hidden="true">➡️</span><span class="word sm">Brand<br>new</span></button>
</div>
<div class="spacer"></div>
</section>
<!-- 3 / 4 · Snap -->
<section class="screen" data-screen="3" aria-labelledby="s3-h">
<div class="topbar"><p class="step">3 / 4 · Snap</p><button class="home" data-go="1" aria-label="Home">⌂ Home</button></div>
<h1 id="s3-h" class="h-32" tabindex="-1">Snap it</h1>
<div class="camera" role="img" aria-label="Camera viewfinder (pretend)">📷 point at the sample</div>
<div class="shutter-row"><button class="shutter" data-go="4" aria-label="Take photo"></button></div>
</section>
<!-- 4 / 4 · Keep? -->
<section class="screen" data-screen="4" aria-labelledby="s4-h">
<div class="topbar"><p class="step">4 / 4 · Keep?</p><button class="home" data-go="1" aria-label="Home">⌂ Home</button></div>
<div class="photo" role="img" aria-label="Your photo (pretend)">your photo</div>
<h1 id="s4-h" class="h-30" tabindex="-1">Keep this one?</h1>
<div class="spacer"></div>
<div class="split">
<button class="choice l" data-go="3" aria-label="Redo"><span aria-hidden="true">⬅️</span> Redo</button>
<button class="choice r" id="keep-btn" aria-label="Keep"><span>Keep</span> <span aria-hidden="true">➡️</span></button>
</div>
</section>
</main>
<script>
(function(){
const screens = Array.from(document.querySelectorAll('.screen'));
function go(n){
screens.forEach(s => s.classList.toggle('is-active', s.dataset.screen === String(n)));
const h = document.querySelector('.screen.is-active h1');
if (h) h.focus({preventScroll:true});
if (String(n) === '1') document.getElementById('no-hint').textContent = '';
}
document.addEventListener('click', e => {
const b = e.target.closest('[data-go]');
if (b) go(b.dataset.go);
});
document.getElementById('no-btn').addEventListener('click', () => {
document.getElementById('no-hint').textContent = 'No worries — grab one and tap YES.';
});
document.getElementById('keep-btn').addEventListener('click', () => {
go(1);
document.getElementById('no-hint').textContent = 'Kept! Ready for the next one.';
});
})();
</script>
<script>window.__theme = {id:'v19', name:'Left or Right', screens:4};</script>
</body>
</html>