Mode fond vert : choix du fond apres la photo

- Apres la capture, si chroma key active, une barre de fonds
  s'affiche avec des miniatures cliquables
- L'utilisateur choisit son fond parmi la liste
- Remplacement du fond vert en temps reel (OpenCV backend)
- Onglet "Fonds verts" dans le backoffice pour importer/supprimer
  des images de fond
- Miniatures visuelles dans l'admin et sur l'ecran de preview

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-21 23:45:45 +01:00
parent c10812b4c0
commit 32392d3ccd
6 changed files with 221 additions and 4 deletions

View File

@@ -67,6 +67,8 @@
</div>
<div id="barre-overlays" class="barre-overlays cache">
</div>
<div id="barre-fonds" class="barre-fonds cache">
</div>
<div class="preview-actions">
<button class="btn-action" onclick="allerA('partage')">Valider</button>
<button class="btn-secondaire" onclick="recommencer()">Reprendre</button>
@@ -138,6 +140,7 @@
<button class="onglet" data-onglet="compteur-admin">Compteur</button>
<button class="onglet" data-onglet="destinations-admin">Destinations</button>
<button class="onglet" data-onglet="cadres-admin">Cadres</button>
<button class="onglet" data-onglet="fonds-admin">Fonds verts</button>
<button class="onglet" data-onglet="animations-admin">Animation 3-2-1</button>
<button class="onglet" data-onglet="evenement">Evenement</button>
<button class="onglet" data-onglet="fonctionnalites">Fonctions</button>
@@ -258,6 +261,20 @@
</div>
</div>
<!-- Panneau Fonds verts -->
<div class="admin-panneau" id="panneau-fonds-admin">
<h3>Fonds pour chroma key</h3>
<p class="aide">Importez des images de fond. Les utilisateurs choisiront leur fond apres la photo.</p>
<div id="liste-fonds" class="liste-fonds">
<p class="texte-secondaire">Aucun fond importe</p>
</div>
<h3>Importer un fond</h3>
<div class="champ">
<input type="file" id="input-fond" accept=".jpg,.jpeg,.png" class="input-fichier">
<button class="btn-action" onclick="uploaderFond()">Importer</button>
</div>
</div>
<!-- Panneau Animations -->
<div class="admin-panneau" id="panneau-animations-admin">
<h3>Animations CSS</h3>