129 lines
5.5 KiB
HTML
129 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<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">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
</div>
|
|
|
|
<main class="container">
|
|
<header>
|
|
<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>
|
|
<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>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">
|
|
<div class="input-row">
|
|
<div class="input-wrap">
|
|
<svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/>
|
|
<path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
|
|
</svg>
|
|
<input
|
|
type="url"
|
|
id="url-input"
|
|
placeholder="https://www.youtube.com/watch?v=..."
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
aria-label="URL de la vidéo"
|
|
/>
|
|
<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="Récupérer les infos de la vidéo">
|
|
Rechercher
|
|
</button>
|
|
</div>
|
|
|
|
<div id="error-msg" class="error-msg" role="alert" hidden></div>
|
|
|
|
<!-- Video preview -->
|
|
<div id="preview" class="preview" hidden>
|
|
<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">
|
|
<span id="uploader" class="tag"></span>
|
|
<span id="duration" class="tag"></span>
|
|
<span id="upload-date" class="tag"></span>
|
|
<span id="views" class="tag"></span>
|
|
<span id="likes" class="tag"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download button -->
|
|
<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>
|
|
Télécharger
|
|
</button>
|
|
|
|
<!-- Progress -->
|
|
<div id="progress-wrap" class="progress-wrap" hidden>
|
|
<div class="progress-header">
|
|
<span id="progress-label" class="progress-label"></span>
|
|
</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="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>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Propulsé par <a href="https://github.com/yt-dlp/yt-dlp" target="_blank" rel="noopener">yt-dlp</a></p>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
// Runs before app.js — resets any browser-restored state immediately
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const input = document.getElementById('url-input');
|
|
if (input) input.value = '';
|
|
});
|
|
</script>
|
|
<script src="/static/app.js?v=7"></script>
|
|
</body>
|
|
</html>
|