oceans2alaska/Youtube-to-mp3-ripper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Not Dave
2026-06-12 15:29:30 -07:00
commit e6e0c8d77e
13 changed files with 1030 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/index.html Normal file
View File

@@ -0,0 +1,71 @@
<!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>