Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" | |
| content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <title>specimg · scanner</title> | |
| <style> | |
| :root { --mono: "SFMono-Regular", ui-monospace, "Menlo", monospace; --accent: #ffa000; } | |
| * { box-sizing: border-box; } | |
| /* make the `hidden` attribute win over our display:flex rules below */ | |
| [hidden] { display: none ; } | |
| html, body { margin: 0; height: 100%; background: #000; color: #eee; | |
| font-family: var(--mono); overflow: hidden; } | |
| /* video shows the live feed; canvas is a transparent overlay on top. | |
| Position/size are set in JS (layout()) so the overlay aligns exactly. */ | |
| #video, #disp { position: fixed; } | |
| #video { z-index: 0; background: #000; } | |
| #disp { z-index: 1; touch-action: none; } | |
| .panel { | |
| position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 10px); | |
| transform: translateX(-50%); width: min(560px, 95vw); z-index: 10; | |
| display: flex; flex-direction: column; gap: 9px; | |
| background: rgba(18,18,20,0.84); border: 1px solid #333; border-radius: 12px; | |
| padding: 11px 13px; backdrop-filter: blur(6px); | |
| } | |
| .panel.hidden { opacity: 0; pointer-events: none; } | |
| .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } | |
| label.sl { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: 13px; } | |
| input[type=range] { flex: 1; accent-color: var(--accent); } | |
| .val { min-width: 3.4em; text-align: right; color: var(--accent); } | |
| button { appearance: none; background: #f4f4f4; color: #111; border: none; | |
| border-radius: 8px; font-family: var(--mono); font-size: 13px; font-weight: 700; | |
| padding: 9px 13px; cursor: pointer; } | |
| .chk { font-size: 13px; white-space: nowrap; } | |
| a.link { color: var(--accent); text-decoration: none; font-size: 13px; padding: 9px 4px; } | |
| #overlay { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; | |
| align-items: center; justify-content: center; gap: 14px; background: #000; | |
| text-align: center; padding: 24px; } | |
| #overlay h1 { font-size: 18px; letter-spacing: 0.1em; margin: 0; } | |
| #overlay p { font-size: 13px; color: #aaa; max-width: 340px; line-height: 1.5; } | |
| #overlay .go { background: var(--accent); color: #111; font-size: 16px; padding: 16px 28px; | |
| border-radius: 12px; font-weight: 700; letter-spacing: 0.1em; } | |
| #err { position: fixed; top: 10px; left: 10px; right: 10px; z-index: 30; color: #ff6b6b; | |
| font-size: 12px; background: rgba(0,0,0,0.7); padding: 8px; border-radius: 8px; } | |
| </style> | |
| </head> | |
| <body> | |
| <video id="video" playsinline muted></video> | |
| <canvas id="disp"></canvas> | |
| <div id="err" hidden></div> | |
| <div class="panel" id="panel"> | |
| <div class="row"> | |
| <button id="playBtn">Pause</button> | |
| <button id="resetBtn">Reset box</button> | |
| <button id="hideBtn">Hide</button> | |
| <label class="chk"><input type="checkbox" id="reverse" /> reverse</label> | |
| <a class="link" href="/">← create</a> | |
| </div> | |
| <label class="sl">speed | |
| <input type="range" id="speed" min="20" max="1500" value="200" /> | |
| <span class="val"><span id="speedVal">200</span></span> | |
| </label> | |
| <label class="sl">range dB | |
| <input type="range" id="range" min="10" max="400" value="80" /> | |
| <span class="val"><span id="rangeVal">80</span></span> | |
| </label> | |
| <label class="sl">gain % | |
| <input type="range" id="gain" min="0" max="400" value="100" /> | |
| <span class="val"><span id="gainVal">100</span></span> | |
| </label> | |
| </div> | |
| <div id="overlay"> | |
| <h1>SPECIMG SCANNER</h1> | |
| <p>Point the camera at a printed slip, line the green box up with its band, | |
| and a sweeping line plays it. Audio runs on this device.</p> | |
| <button class="go" id="goBtn">TAP TO START</button> | |
| <p>Allow camera access when asked.</p> | |
| </div> | |
| <script src="/static/scanner.js"></script> | |
| </body> | |
| </html> | |