From 230c4e36bc8d4229a9376b7ab0fa4d2a74f44260 Mon Sep 17 00:00:00 2001 From: mrmoi Date: Thu, 31 Jul 2025 23:05:14 +0200 Subject: [PATCH] =?UTF-8?q?T=C3=A9l=C3=A9verser=20les=20fichiers=20vers=20?= =?UTF-8?q?"/"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 14 ++++++++++++++ script.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ style.css | 39 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 100 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..96cf476 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Lecteur Audio + + + +

Mes Fichiers Audio

+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..2d5c8b2 --- /dev/null +++ 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 = ` +

${file}

+ +

Télécharger

+ `; + section.appendChild(item); + }); + + container.appendChild(section); + }); + }); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b11f56a --- /dev/null +++ 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; +} \ No newline at end of file