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" /> | |
| <title>specimg · loop-scan</title> | |
| <style> | |
| :root { --mono: "SFMono-Regular", ui-monospace, "Menlo", monospace; --accent: #ffa000; } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; height: 100%; background: #000; color: #eee; | |
| font-family: var(--mono); overflow: hidden; } | |
| #canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #000; } | |
| .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; } | |
| .hint { font-size: 11px; color: #888; } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <div class="panel" id="panel"> | |
| <div class="row"> | |
| <button id="uploadBtn">Upload slip</button> | |
| <button id="playBtn">Pause</button> | |
| <button id="hideBtn">Hide</button> | |
| <a class="link" href="/">← create</a> | |
| <span class="hint" id="hint">upload a slip PNG</span> | |
| </div> | |
| <div class="row"> | |
| <label class="chk"><input type="checkbox" id="reverse" /> reverse</label> | |
| <label class="chk"><input type="checkbox" id="flip" /> calibrate (photo)</label> | |
| </div> | |
| <label class="sl">speed % | |
| <input type="range" id="speed" min="10" max="400" value="100" /> | |
| <span class="val"><span id="speedVal">100</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> | |
| <input type="file" id="fileInput" accept="image/*,.png" hidden /> | |
| <script src="/static/loopscan.js"></script> | |
| </body> | |
| </html> | |