Initial Commit
This commit is contained in:
commit
6d2e379a0c
41 changed files with 5064 additions and 0 deletions
182
public/jukebox.html
Normal file
182
public/jukebox.html
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue