72 lines
2.4 KiB
HTML
72 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>YouTube Audio Converter</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<section class="converter-card">
|
|
<div class="header">
|
|
<p class="eyebrow">Local utility</p>
|
|
<h1>YouTube Audio Converter</h1>
|
|
</div>
|
|
|
|
<form id="convert-form" class="form">
|
|
<label class="field field-wide" for="url">
|
|
<span>YouTube URL</span>
|
|
<input id="url" name="url" type="url" placeholder="https://www.youtube.com/watch?v=..." autocomplete="off" required />
|
|
</label>
|
|
|
|
<div class="controls">
|
|
<label class="field" for="format">
|
|
<span>Format</span>
|
|
<select id="format" name="format">
|
|
<option value="mp3">MP3</option>
|
|
<option value="wav">WAV</option>
|
|
<option value="flac">FLAC</option>
|
|
<option value="m4a">M4A</option>
|
|
<option value="ogg">OGG</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="field" id="quality-field" for="quality">
|
|
<span>MP3 quality</span>
|
|
<select id="quality" name="quality">
|
|
<option value="128">128 kbps</option>
|
|
<option value="192" selected>192 kbps</option>
|
|
<option value="256">256 kbps</option>
|
|
<option value="320">320 kbps</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<button id="convert-button" type="submit">Convert</button>
|
|
</form>
|
|
|
|
<section id="metadata" class="metadata hidden" aria-live="polite">
|
|
<img id="thumbnail" alt="" />
|
|
<div>
|
|
<h2 id="video-title"></h2>
|
|
<p id="video-channel"></p>
|
|
<p id="video-duration"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="status-panel" aria-live="polite">
|
|
<div class="status-line">
|
|
<span id="status-dot" class="status-dot idle"></span>
|
|
<span id="status-text">Idle</span>
|
|
</div>
|
|
<p id="error-text" class="error-text hidden"></p>
|
|
<a id="download-link" class="download-button hidden" href="#">Download audio</a>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|