jriou/yt-mp3-ui
1
0
Fork 0
Code Activity

Fork to yt-mp3-ui

Browse source 
Signed-off-by: Julien Riou <julien@riou.xyz>
This commit is contained in:
Julien Riou 2026-07-26 08:20:36 +02:00
commit 9c6360e9c4
Signed by: jriou
GPG key ID: 9A099EDA51316854
10 changed files with 243 additions and 288 deletions
Download patch file Download diff file Expand all files Collapse all files

70
web/frontend/index.html
View file

@ -1,14 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>yt-dlp Web</title>
<title>YouTube MP3</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><rect width='36' height='36' rx='10' fill='%236366f1'/><path d='M11 12l14 6-14 6V12z' fill='white'/></svg>" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/style.css" />
<script>
(function () {
const saved = localStorage.getItem('theme');
const theme = saved
|| (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
</head>
<body>
<div class="bg-orbs">
@ -19,24 +27,20 @@
<main class="container">
<header>
<div class="logo">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">
<rect width="36" height="36" rx="10" fill="url(#grad)"/>
<path d="M11 12l14 6-14 6V12z" fill="white"/>
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse">
<stop stop-color="#6366f1"/>
<stop offset="1" stop-color="#8b5cf6"/>
</linearGradient>
</defs>
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Changer de thème" title="Changer de thème">
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="4"/>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
</svg>
<span>yt-dlp web</span>
</div>
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
</svg>
</button>
</header>
<section class="hero">
<h1>Download any video,<br /><span class="gradient-text">instantly.</span></h1>
<p class="subtitle">Paste a YouTube (or any supported) link below and grab your video.</p>
<h1>Téléchargez n'importe quel morceau en<br /><span class="gradient-text">MP3.</span></h1>
<p class="subtitle">Collez un lien YouTube ci-dessous et récupérez l'audio en MP3.</p>
</section>
<div class="card" id="main-card">
@ -52,16 +56,16 @@
placeholder="https://www.youtube.com/watch?v=..."
autocomplete="off"
spellcheck="false"
aria-label="Video URL"
aria-label="URL de la vidéo"
/>
<button class="clear-btn" id="clear-btn" aria-label="Clear input">
<button class="clear-btn" id="clear-btn" aria-label="Effacer">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
<button class="btn-primary" id="fetch-btn" aria-label="Fetch video info">
Fetch
<button class="btn-primary" id="fetch-btn" aria-label="Récupérer les infos de la vidéo">
Rechercher
</button>
</div>
@ -69,7 +73,7 @@
<!-- Video preview -->
<div id="preview" class="preview" hidden>
<img id="thumbnail" class="thumbnail" alt="Video thumbnail" />
<img id="thumbnail" class="thumbnail" alt="Miniature de la vidéo" />
<div class="meta">
<h2 id="video-title" class="video-title"></h2>
<div class="meta-row">
@ -82,25 +86,14 @@
</div>
</div>
<!-- Format selector -->
<div id="format-section" class="format-section" hidden>
<label for="format-select" class="format-label">Format</label>
<div class="select-wrap">
<select id="format-select" aria-label="Select download format"></select>
<svg class="select-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<polyline points="6 9 12 15 18 9"/>
</svg>
</div>
</div>
<!-- Download button -->
<button class="btn-download" id="download-btn" hidden aria-label="Download video">
<button class="btn-download" id="download-btn" hidden aria-label="Télécharger le MP3">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Download
Télécharger
</button>
<!-- Progress -->
@ -110,17 +103,18 @@
</div>
<div class="progress-row">
<div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
<button id="cancel-btn" type="button" class="progress-btn cancel" aria-label="Cancel download">
<button id="cancel-btn" type="button" class="progress-btn cancel" aria-label="Annuler le téléchargement">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
Cancel
Annuler
</button>
</div>
</div>
</div>
<footer>
<p>Powered by <a href="https://github.com/yt-dlp/yt-dlp" target="_blank" rel="noopener">yt-dlp</a></p>
<p>Propulsé par <a href="https://github.com/yt-dlp/yt-dlp" target="_blank" rel="noopener">yt-dlp</a></p>
</footer>
</main>
<script>
@ -130,6 +124,6 @@
if (input) input.value = '';
});
</script>
<script src="/static/app.js?v=4"></script>
<script src="/static/app.js?v=7"></script>
</body>
</html>