commit 230c4e36bc8d4229a9376b7ab0fa4d2a74f44260 Author: mrmoi Date: Thu Jul 31 23:05:14 2025 +0200 Téléverser les fichiers vers "/" 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