Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Clear · In your browser</title> | |
| <meta name="description" content="Detail's Clear models running on-device in your browser. Drop in a file, get a podcast-ready WAV out. Your audio never leaves your machine." /> | |
| <meta name="robots" content="noindex" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700;900&family=Geist+Mono:wght@400;500&display=swap" /> | |
| <link rel="stylesheet" href="../theme.css" /> | |
| <link rel="stylesheet" href="../demo.css" /> | |
| </head> | |
| <body class="web-page"> | |
| <main class="page web-only"> | |
| <header class="web-head"> | |
| <a class="web-back" href="../"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 4 L5 8 L10 12"/></svg> | |
| <span>iOS demo</span> | |
| </a> | |
| <div class="web-brand"> | |
| <span class="eyebrow"><span>Detail · Clear · in your browser</span></span> | |
| </div> | |
| </header> | |
| <section class="web-stage"> | |
| <article class="clip try-player is-empty" id="tryPlayer"> | |
| <div class="clip-index" id="tryPlayerHeader"> | |
| <span id="tryPlayerFilename">YOUR AUDIO</span> | |
| </div> | |
| <div class="controls-row"> | |
| <fieldset class="track-pills try-variant-pills"> | |
| <label class="pill"><input type="radio" name="tryVariant" value="studio" checked />Studio</label> | |
| <label class="pill"><input type="radio" name="tryVariant" value="natural" />Natural</label> | |
| </fieldset> | |
| <div class="mix-row"> | |
| <button class="mix-end" data-mix="0">0%</button> | |
| <input type="range" class="mix-slider" id="tryMixSlider" min="0" max="100" value="100" aria-label="Raw to enhanced mix" disabled /> | |
| <button class="mix-end accent" data-mix="100">100%</button> | |
| </div> | |
| </div> | |
| <div class="quote try-player-meta" id="tryPlayerMeta"> | |
| <span id="tryPlayerMetaText">Pick a m4a, aac, or wav from your files to enhance. | |
| Works best with files shorter than 10 minutes.</span> | |
| <span class="try-meta-actions" id="tryPlayerActions"> | |
| <a id="tryPlayerSaveLink" class="try-meta-link" download="clear-enhanced.wav">Save</a> | |
| or | |
| <button id="tryPlayerNewInline" class="try-meta-link" type="button">select other file</button>. | |
| </span> | |
| </div> | |
| <div class="try-player-pick"> | |
| <label class="try-file-btn" id="tryFileLabel"> | |
| <input type="file" id="tryFileInput" accept="audio/*" /> | |
| <span class="icon"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true"><path d="M8 2.5 L8 11"/><path d="M4.5 6 L8 2.5 L11.5 6"/><path d="M3 13 L13 13"/></svg> | |
| </span> | |
| <span>Select a file</span> | |
| </label> | |
| <span class="try-pick-hint">or drop one on the page</span> | |
| </div> | |
| <div class="transport"> | |
| <button class="play play-lg" id="tryPlayBtn" data-state="paused" aria-label="Play / pause" disabled></button> | |
| <div class="track-area"> | |
| <div class="scrubber" id="tryScrubber"><div class="progress accent"></div></div> | |
| <div class="time-row"><span class="cur">0:00</span><span class="tot">0:00</span></div> | |
| </div> | |
| </div> | |
| <div class="try-download"> | |
| <button id="tryDownloadM4a" class="try-download-alt" type="button" style="display:none">Save as .m4a</button> | |
| </div> | |
| </article> | |
| </section> | |
| </main> | |
| <!-- ─── Page-wide drop hint ─── --> | |
| <div class="drag-hint" aria-hidden="true"> | |
| <div class="label">Drop to enhance</div> | |
| </div> | |
| <script src="../try-browser.js" type="module"></script> | |
| </body> | |
| </html> | |