Téléverser les fichiers vers "/"

2025-07-31 23:05:14 +02:00 · 2025-07-31 23:05:14 +02:00 · 230c4e36bc
commit 230c4e36bc
3 changed files with 100 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Lecteur Audio</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <h1>Mes Fichiers Audio</h1>
+  <div id="audio-list"></div>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,47 @@
+fetch('./back/generate.php')
+  .then(() => fetch('./back/media_list.json'))
+  .then(res => res.json())
+  .then(data => {
+    const container = document.getElementById('audio-list');
+    container.innerHTML = '';
+
+    Object.entries(data).forEach(([category, files]) => {
+      const section = document.createElement('section');
+
+      if (data[category].length !== 0) {
+        const button = document.createElement('button');
+        button.setAttribute("id", category);
+        const title = document.createElement('h3');
+        title.textContent = category === 'racine' ? 'Fichiers sans dossier' : category;
+        button.appendChild(title);
+        button.addEventListener("click", function() {
+          elements = document.querySelectorAll(`div#${this.id}`);
+          for (const el of elements) {
+            if (el.className.includes("audio-item")) {
+              if (el.className.includes("hidden")) {
+                el.classList.remove("hidden");
+              } else {
+                el.classList.add("hidden");
+              }
+            }
+          }
+        });
+        section.appendChild(button);
+      }
+
+      files.forEach(file => {
+        const path = category === 'racine' ? file : `${category}/${file}`;
+        const item = document.createElement('div');
+        item.className = 'audio-item hidden';
+        item.id = category;
+        item.innerHTML = `
+          <p><strong>${file}</strong></p>
+          <audio controls src="./media/${path}"></audio>
+          <p><a href="./media/${path}" download>Télécharger</a></p>
+        `;
+        section.appendChild(item);
+      });
+
+      container.appendChild(section);
+    });
+  });
--- a/style.css
+++ b/style.css
@ -0,0 +1,39 @@
+* {
+  background-color: #14141e;
+  color: #ebebeb;
+}
+
+body {
+  font-family: sans-serif;
+  padding: 2rem;
+  max-width: 700px;
+  margin: auto;
+}
+#audio-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.audio-item {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+}
+audio {
+  width: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+button {
+  display: inline-block;
+  padding: 0.15rem 1.25rem;
+  margin-bottom: 0.5rem;
+  border: white solid 1px;
+  border-radius: 30px;
+  font-weight: bold;
+  cursor: pointer;
+}