Ajouter test2.html

2026-06-17 17:11:20 +00:00
parent 6c63bb17a3
commit 4bedfdd0f4
1 changed files with 50 additions and 0 deletions
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>⚡ Sandbox - Modification Catégorie</title>
+    <style>
+        body { font-family: sans-serif; background: #333; padding: 50px; }
+        .modal { background: white; padding: 20px; border-radius: 12px; width: 400px; margin: 0 auto; }
+        .btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; margin: 5px; }
+        .btn-blue { background: #1976d2; color: white; }
+    </style>
+</head>
+<body>
+
+    <div class="modal">
+        <h3>Produit : Jus Ananas</h3>
+        <p>Catégorie actuelle : <b>Boissons</b></p>
+        <button class="btn btn-blue" onclick="editCategory()">✏️ Modifier la catégorie</button>
+    </div>
+
+    <script>
+        // Simulation des données d'EverShelf
+        const app = {
+            categories: ["Fruits", "Légumes", "Boissons", "Épicerie", "Surgelés", "Produits laitiers"],
+            updateProductCategory: function(newCat) {
+                alert("SUCCESS : EverShelf a enregistré la nouvelle catégorie : " + newCat);
+            }
+        };
+
+        function editCategory() {
+            const container = document.querySelector('.modal');
+            container.innerHTML = `
+                <h3>Changer la catégorie</h3>
+                <select id="cat-select" style="width:100%; padding:10px;">
+                    ${app.categories.map(c => `<option value="${c}">${c}</option>`).join('')}
+                </select>
+                <br><br>
+                <button class="btn btn-blue" onclick="save()">Enregistrer</button>
+                <button class="btn" onclick="location.reload()">Annuler</button>
+            `;
+        }
+
+        function save() {
+            const selected = document.getElementById('cat-select').value;
+            app.updateProductCategory(selected);
+            location.reload();
+        }
+    </script>
+</body>
+</html>