182 lines
6 KiB
HTML
182 lines
6 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Palico Jukebox</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="/style/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="hero">
|
|
<div class="hero__visual">
|
|
<img src="/img/palico-jukebox.png" alt="Palico Jukebox" />
|
|
</div>
|
|
<div class="hero__content">
|
|
<p class="pill">Le Jukebox du Palico Bot</p>
|
|
<h1>Un peu de son pour le Discord !</h1>
|
|
<p>
|
|
Tu veux chill avec les autres sur un petit fond musical ?<br />
|
|
T'inquietes pas, je peux m'occuper de ca !<br />
|
|
<br />
|
|
Uploade des fichiers et gère la playlist depuis cette interface web.
|
|
Tout est synchronisé avec le salon vocal.
|
|
</p>
|
|
<div class="hero__actions">
|
|
<button id="heroUploadBtn" class="btn">Ajouter une musique</button>
|
|
<button id="heroQueueBtn" class="btn btn--ghost">Voir la file</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero__auth">
|
|
<div class="panel panel--glass">
|
|
<h2>Authentification</h2>
|
|
<p class="panel__subtitle">
|
|
Ca sera stocké sur ton navigateur si tu sauvegardes !
|
|
</p>
|
|
<form id="settingsForm">
|
|
<div class="grid grid--two">
|
|
<div>
|
|
<label for="displayName">Nom affiché</label>
|
|
<input
|
|
type="text"
|
|
id="displayName"
|
|
name="displayName"
|
|
placeholder="Shinuwa"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="apiKey">Mot de passe</label>
|
|
<input
|
|
type="text"
|
|
id="apiKey"
|
|
name="apiKey"
|
|
placeholder="Mot de passe"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn">Sauvegarder</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main>
|
|
<div id="status" class="status status--info" hidden></div>
|
|
|
|
<section class="panel panel--glass">
|
|
<div class="panel__header">
|
|
<div>
|
|
<h2>Lecture en cours</h2>
|
|
<p class="panel__subtitle">
|
|
État en temps réel du player Discord. Contrôle instantané.
|
|
</p>
|
|
</div>
|
|
<button id="refreshBtn" class="btn btn--ghost btn--small">Rafraîchir</button>
|
|
</div>
|
|
<div id="currentTrack" class="player-current player-current--empty">
|
|
En attente de lecture...
|
|
</div>
|
|
<div class="control-group">
|
|
<button class="btn" data-player-action="play">Play</button>
|
|
<button
|
|
id="pauseResumeBtn"
|
|
class="btn btn--secondary"
|
|
data-player-action="pause"
|
|
>
|
|
Pause
|
|
</button>
|
|
<button class="btn" data-player-action="skip">Suivante</button>
|
|
<button class="btn btn--danger" data-player-action="stop">
|
|
Stop & vider la file
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel panel--glass" id="queueSection">
|
|
<div class="panel__header">
|
|
<div>
|
|
<h2>File d'attente</h2>
|
|
<p class="panel__subtitle">
|
|
Réorganise les morceaux, supprime-les ou ajoute ceux de la
|
|
bibliothèque.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<ul id="queueList" class="list list--stack"></ul>
|
|
<p id="queueEmpty" class="text--muted">Aucun morceau en attente.</p>
|
|
</section>
|
|
|
|
<section class="panel panel--glass">
|
|
<h2>Bibliothèque permanente</h2>
|
|
<p class="panel__subtitle">
|
|
Les fichiers conservés sont listés ici. Ajoute-les à la file ou
|
|
supprime-les.
|
|
</p>
|
|
<ul id="libraryList" class="list list--stack"></ul>
|
|
<p id="libraryEmpty" class="text--muted">
|
|
Aucun fichier permanent enregistré.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="panel panel--glass" id="uploadSection">
|
|
<div class="panel__header">
|
|
<div>
|
|
<h2>Uploader une musique</h2>
|
|
<p class="panel__subtitle">
|
|
Formats audio supportés par FFmpeg. Les fichiers temporaires sont
|
|
supprimés automatiquement après lecture.
|
|
</p>
|
|
</div>
|
|
<div class="badge">Drag & drop supporté</div>
|
|
</div>
|
|
<form id="uploadForm">
|
|
<label for="musicFile">Fichier audio</label>
|
|
<input
|
|
type="file"
|
|
id="musicFile"
|
|
name="musicFile"
|
|
accept="audio/*"
|
|
required
|
|
/>
|
|
|
|
<label for="uploadNotes" class="u-mt-1">Commentaire (optionnel)</label>
|
|
<input
|
|
type="text"
|
|
id="uploadNotes"
|
|
name="notes"
|
|
placeholder="Titre personnalisé"
|
|
/>
|
|
|
|
<div class="grid grid--two u-mt-1">
|
|
<label class="form-checkbox">
|
|
<input type="checkbox" id="permanentFile" class="form-checkbox__input" />
|
|
<span>Conserver dans la bibliothèque après lecture</span>
|
|
</label>
|
|
<label class="form-checkbox">
|
|
<input type="checkbox" id="enqueueFile" checked class="form-checkbox__input" />
|
|
<span>Ajouter directement à la file d'attente</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn u-mt-1">Uploader</button>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="hero__actions hero__actions--centered">
|
|
<button
|
|
type="button"
|
|
class="btn btn--ghost btn--small"
|
|
onclick="window.location.href = '/'"
|
|
>
|
|
Retour à l'accueil
|
|
</button>
|
|
</div>
|
|
|
|
<script type="module" src="/scripts/jukebox.js"></script>
|
|
</body>
|
|
</html>
|