Alexandre
fd2e0689bf
- App FastAPI : recherche dans un dossier média, download original ou conversion en AVI Xvid (tone-mapping HDR→SDR, audio FR auto, MP3 stéréo) - Auth Keycloak OIDC (Authlib) optionnelle - 3 composes : app seule, stack local (keycloak.local), production (NPM) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
63 lines
1.9 KiB
HTML
63 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>MKV → AVI</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="header-inner">
|
|
<div>
|
|
<h1>🎬 MKV → AVI</h1>
|
|
<p class="sub">Convertir des films (4K/HDR) en AVI Xvid pour vieux lecteurs</p>
|
|
</div>
|
|
<div id="user" class="user hidden">
|
|
<span id="user-name" class="user-name"></span>
|
|
<a class="btn ghost small" href="/logout">Déconnexion</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="panel">
|
|
<div class="search">
|
|
<input id="search" type="search" placeholder="Rechercher un fichier dans le dossier média…" autocomplete="off" />
|
|
<span id="count" class="count"></span>
|
|
</div>
|
|
<ul id="files" class="files"></ul>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>Conversions</h2>
|
|
<ul id="jobs" class="jobs"><li class="empty">Aucune conversion pour l'instant.</li></ul>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Modale d'options de conversion -->
|
|
<div id="modal" class="modal hidden">
|
|
<div class="modal-box">
|
|
<h3 id="modal-title">Convertir en AVI</h3>
|
|
<div id="modal-info" class="info"></div>
|
|
<label>Définition
|
|
<select id="opt-res">
|
|
<option value="720">Compatibilité max — 720 px (vieux lecteurs)</option>
|
|
<option value="1280">720p — 1280 px</option>
|
|
<option value="original">Originale (pas de redimensionnement)</option>
|
|
</select>
|
|
</label>
|
|
<label>Piste audio
|
|
<select id="opt-audio"></select>
|
|
</label>
|
|
<div class="modal-actions">
|
|
<button id="modal-cancel" class="btn ghost">Annuler</button>
|
|
<button id="modal-start" class="btn primary">🎬 Lancer la conversion</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|