Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" | |
| content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" /> | |
| <title>specimg · scroll player</title> | |
| <style> | |
| :root { --mono: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace; } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; height: 100%; background: #000; overflow: hidden; | |
| font-family: var(--mono); color: #eee; } | |
| #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) + 14px); | |
| transform: translateX(-50%); | |
| display: flex; flex-direction: column; gap: 10px; | |
| background: rgba(20, 20, 22, 0.86); border: 1px solid #333; border-radius: 12px; | |
| padding: 12px 14px; width: min(560px, 94vw); backdrop-filter: blur(6px); | |
| transition: opacity 0.2s; z-index: 10; | |
| } | |
| .panel.hidden { opacity: 0; pointer-events: none; } | |
| .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } | |
| .row.controls > label { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; | |
| font-size: 13px; letter-spacing: 0.04em; } | |
| input[type="range"] { flex: 1; accent-color: #ff9f1c; } | |
| button, .link { | |
| appearance: none; background: #f4f4f4; color: #111; border: none; | |
| border-radius: 8px; font-family: var(--mono); font-size: 13px; font-weight: 700; | |
| letter-spacing: 0.08em; padding: 9px 14px; cursor: pointer; text-decoration: none; | |
| } | |
| button:active { opacity: 0.85; } | |
| .link { background: transparent; color: #ff9f1c; padding: 9px 6px; } | |
| .chk { font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; } | |
| .hint { font-size: 11px; color: #888; letter-spacing: 0.04em; } | |
| .val { display: inline-block; min-width: 3.2em; text-align: right; color: #ff9f1c; } | |
| </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="fsBtn">Fullscreen</button> | |
| <a class="link" href="/">← create</a> | |
| <span class="hint" id="hint">tap the image to hide controls</span> | |
| </div> | |
| <div class="row controls"> | |
| <label>speed | |
| <input type="range" id="speed" min="0" max="1500" value="120" /> | |
| <span class="val"><span id="speedVal">120</span> px/s</span> | |
| </label> | |
| <label class="chk"><input type="checkbox" id="dir" /> reverse</label> | |
| </div> | |
| </div> | |
| <input type="file" id="fileInput" accept="image/*,.png" hidden /> | |
| <script src="/static/player.js"></script> | |
| </body> | |
| </html> | |