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" | |
| /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <title>specimg · slip</title> | |
| <link rel="stylesheet" href="/static/style.css" /> | |
| </head> | |
| <body> | |
| <nav class="jump"> | |
| <a href="/static/scanner.html">scan ◉</a> | |
| <a href="/static/loopscan.html">loop ♪</a> | |
| <a href="/static/player.html">scroll ▶</a> | |
| </nav> | |
| <div class="quality"> | |
| <label for="quality">QUALITY</label> | |
| <select id="quality"> | |
| <option value="gray">Standard · 8-bit grayscale</option> | |
| <option value="digital">Max digital · 16-bit (near-lossless)</option> | |
| <option value="thermal">Thermal print · 1-bit dithered (lo-fi)</option> | |
| </select> | |
| </div> | |
| <main class="slip" id="slip"> | |
| <div class="tear tear--top" aria-hidden="true"></div> | |
| <header class="slip__head"> | |
| <div | |
| class="slip__title" | |
| id="title" | |
| contenteditable="true" | |
| spellcheck="false" | |
| role="textbox" | |
| aria-label="Slip title" | |
| data-placeholder="TAP TO EDIT TITLE" | |
| ></div> | |
| <div class="slip__meta" id="meta"></div> | |
| <div class="rule" aria-hidden="true"></div> | |
| </header> | |
| <section class="slip__body"> | |
| <!-- Upload placeholder; replaced in place by the rendered spectrogram. --> | |
| <button type="button" class="dropzone" id="dropzone"> | |
| <span class="dropzone__plus">＋</span> | |
| <span class="dropzone__label">TAP TO UPLOAD SONG</span> | |
| <span class="dropzone__hint">wav · flac · mp3 · m4a</span> | |
| </button> | |
| <figure class="spectro" id="spectro" hidden> | |
| <img class="spectro__img" id="spectroImg" alt="spectrogram" /> | |
| </figure> | |
| <div class="status" id="status" hidden> | |
| <div class="spinner" aria-hidden="true"></div> | |
| <div class="status__text" id="statusText">PRINTING…</div> | |
| </div> | |
| </section> | |
| <footer class="slip__foot" id="foot" hidden> | |
| <div class="rule" aria-hidden="true"></div> | |
| <div class="totals" id="totals"></div> | |
| <div class="slip__thanks">*** SOUND PRINTED AS LIGHT ***</div> | |
| </footer> | |
| <div class="tear tear--bottom" aria-hidden="true"></div> | |
| </main> | |
| <div class="controls" id="controls" hidden> | |
| <button type="button" class="print-btn" id="printBtn">PRINT</button> | |
| </div> | |
| <input | |
| type="file" | |
| id="fileInput" | |
| accept="audio/*,.wav,.flac,.mp3,.m4a,.ogg,.aac,.aiff" | |
| hidden | |
| /> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |