From aa7bba900bfcbb0e5ccdb6e9962277c9bd727a37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Abonnel?= <cedric@abonnel.fr>
Date: Thu, 26 Mar 2026 22:47:00 +0100
Subject: [PATCH] Premiere version

---
 public/index.html | 191 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 public/index.html
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..77dffff
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Soundboard Pro - Expert Edition</title>
+    <style>
+        :root { --bg: #0f0f0f; --panel-bg: #1e1e1e; --accent: #ffb703; --text: #eee; }
+        body { background: var(--bg); color: var(--text); margin: 0; font-family: sans-serif; overflow: hidden; }
+        
+        header { height: 50px; background: #222; display: flex; align-items: center; padding: 0 15px; justify-content: space-between; border-bottom: 2px solid #333; }
+        .grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); gap: 5px; height: calc(100vh - 50px); padding: 5px; box-sizing: border-box; }
+        
+        .btn { background: #2a2a2a; border: 1px solid #444; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; font-size: 0.7rem; text-align: center; }
+        .btn.active { border-color: var(--accent); color: var(--accent); }
+        .btn.playing { background: #e63946; color: white; box-shadow: 0 0 10px #e63946; }
+        .btn.has-loop::after { content: "∞"; position: absolute; top: 2px; right: 5px; font-size: 12px; color: var(--accent); }
+
+        /* Overlay / Panneau d'édition */
+        #editOverlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.8); display: none; z-index: 100;
+            align-items: flex-end;
+        }
+        #editPanel {
+            background: var(--panel-bg); width: 100%; padding: 20px;
+            border-radius: 20px 20px 0 0; box-sizing: border-box;
+            transform: translateY(100%); transition: transform 0.3s ease;
+        }
+        #editOverlay.show { display: flex; }
+        #editOverlay.show #editPanel { transform: translateY(0); }
+
+        .form-group { margin-bottom: 15px; }
+        label { display: block; margin-bottom: 5px; color: #888; font-size: 0.9rem; }
+        input[type="text"], input[type="range"] { width: 100%; padding: 10px; background: #333; border: 1px solid #444; color: white; border-radius: 5px; box-sizing: border-box; }
+        
+        .actions { display: flex; gap: 10px; margin-top: 20px; }
+        .actions button { flex: 1; padding: 15px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
+        .btn-save { background: var(--accent); color: black; }
+        .btn-cancel { background: #444; color: white; }
+        .btn-file { background: #219ebc; color: white; margin-bottom: 10px; width: 100%; }
+
+        body.edit-mode .btn { border: 1px dashed var(--accent); }
+    </style>
+</head>
+<body>
+
+<header>
+    <div id="status">MODE LECTURE</div>
+    <button onclick="toggleEditMode()" id="toggleBtn" style="padding: 5px 15px;">ÉDITER</button>
+</header>
+
+<div class="grid" id="board"></div>
+
+<div id="editOverlay" onclick="closeEditIfOutside(event)">
+    <div id="editPanel" onclick="event.stopPropagation()">
+        <h3 id="editTitle" style="margin-top:0">Paramètres du bouton</h3>
+        
+        <div class="form-group">
+            <label>Nom du bouton</label>
+            <input type="text" id="inputName" placeholder="Entrez un nom...">
+        </div>
+
+        <div class="form-group">
+            <button class="btn-file" onclick="document.getElementById('fileInput').click()">📁 CHOISIR UN FICHIER SON</button>
+            <small id="fileNameLabel" style="color:#666; display:block"></small>
+        </div>
+
+        <div class="form-group" style="display:flex; align-items:center; gap:10px;">
+            <input type="checkbox" id="inputLoop" style="width:20px; height:20px;">
+            <label for="inputLoop" style="margin:0">Activer la boucle (Loop)</label>
+        </div>
+
+        <div class="form-group">
+            <label>Volume</label>
+            <input type="range" id="inputVolume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="actions">
+            <button class="btn-cancel" onclick="closeEdit()">ANNULER</button>
+            <button class="btn-save" onclick="saveSettings()">ENREGISTRER</button>
+        </div>
+    </div>
+</div>
+
+<input type="file" id="fileInput" accept="audio/*" style="display:none">
+
+<script>
+    let isEditMode = false;
+    let editingIndex = null;
+    let tempFileData = null;
+
+    // Données des boutons
+    let btnData = JSON.parse(localStorage.getItem('sb_pro_data')) || Array(30).fill(null).map((_, i) => ({
+        id: i, name: "", file: null, loop: false, volume: 1
+    }));
+
+    const players = {};
+
+    function init() {
+        const board = document.getElementById('board');
+        board.innerHTML = "";
+        btnData.forEach((data, i) => {
+            const div = document.createElement('div');
+            div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`;
+            div.id = `btn-${i}`;
+            div.innerHTML = `<span>${data.name || (i+1)}</span>`;
+            div.onclick = () => handleBtnClick(i);
+            board.appendChild(div);
+        });
+    }
+
+    function toggleEditMode() {
+        isEditMode = !isEditMode;
+        document.body.classList.toggle('edit-mode', isEditMode);
+        document.getElementById('status').innerText = isEditMode ? "MODE ÉDITION" : "MODE LECTURE";
+        document.getElementById('toggleBtn').innerText = isEditMode ? "QUITTER" : "ÉDITER";
+    }
+
+    function handleBtnClick(i) {
+        if (isEditMode) {
+            openEdit(i);
+        } else {
+            playSound(i);
+        }
+    }
+
+    // --- LOGIQUE LECTURE ---
+    function playSound(i) {
+        const data = btnData[i];
+        if (!data.file) return;
+
+        if (players[i] && !players[i].paused) {
+            players[i].pause();
+            players[i].currentTime = 0;
+            document.getElementById(`btn-${i}`).classList.remove('playing');
+        } else {
+            if (!players[i]) players[i] = new Audio(data.file);
+            players[i].loop = data.loop;
+            players[i].volume = data.volume || 1;
+            players[i].play();
+            document.getElementById(`btn-${i}`).classList.add('playing');
+            players[i].onended = () => { if(!data.loop) document.getElementById(`btn-${i}`).classList.remove('playing'); };
+        }
+    }
+
+    // --- LOGIQUE ÉDITION ---
+    function openEdit(i) {
+        editingIndex = i;
+        const data = btnData[i];
+        document.getElementById('editTitle').innerText = "Bouton " + (i + 1);
+        document.getElementById('inputName').value = data.name;
+        document.getElementById('inputLoop').checked = data.loop;
+        document.getElementById('inputVolume').value = data.volume || 1;
+        document.getElementById('fileNameLabel').innerText = data.file ? "Fichier chargé" : "Aucun fichier";
+        tempFileData = data.file;
+
+        document.getElementById('editOverlay').classList.add('show');
+    }
+
+    document.getElementById('fileInput').onchange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                tempFileData = ev.target.result;
+                document.getElementById('fileNameLabel').innerText = "Nouveau fichier : " + file.name;
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+
+    function saveSettings() {
+        btnData[editingIndex].name = document.getElementById('inputName').value;
+        btnData[editingIndex].loop = document.getElementById('inputLoop').checked;
+        btnData[editingIndex].volume = parseFloat(document.getElementById('inputVolume').value);
+        btnData[editingIndex].file = tempFileData;
+
+        localStorage.setItem('sb_pro_data', JSON.stringify(btnData));
+        if (players[editingIndex]) delete players[editingIndex]; // Reset audio pour appliquer changements
+        closeEdit();
+        init();
+    }
+
+    function closeEdit() { document.getElementById('editOverlay').classList.remove('show'); }
+    function closeEditIfOutside(e) { if(e.target.id === 'editOverlay') closeEdit(); }
+
+    init();
+</script>
+</body>
+</html>
\ No newline at end of file
