Animations custom (video/GIF) + selection aleatoire

- Upload de GIF/MP4/WebM comme animations de compte a rebours
- Checkboxes pour activer/desactiver chaque animation (CSS + custom)
- Si plusieurs actives, tirage aleatoire a chaque photo
- Preview dans le backoffice avec tirage aleatoire
- Suppression des animations custom importees
- Les animations custom se jouent en plein ecran avant la capture

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-21 23:29:02 +01:00
parent a525f72800
commit cbe514bb93
7 changed files with 342 additions and 56 deletions

View File

@@ -257,16 +257,27 @@
<!-- Panneau Animations -->
<div class="admin-panneau" id="panneau-animations-admin">
<h3>Animation du compte a rebours</h3>
<p class="aide">Choisissez le style d'animation pour le 3... 2... 1...</p>
<h3>Animations CSS</h3>
<p class="aide">Cochez les animations a utiliser. Si plusieurs sont cochees, une sera choisie au hasard a chaque photo.</p>
<div id="liste-animations" class="liste-animations">
</div>
<h3>Animations personnalisees (video/GIF)</h3>
<p class="aide">Importez vos propres animations (GIF, MP4, WebM). Elles seront jouees en plein ecran avant la capture.</p>
<div id="liste-animations-custom" class="liste-animations">
</div>
<div class="champ">
<input type="file" id="input-animation" accept=".gif,.mp4,.webm" class="input-fichier">
<button class="btn-action" onclick="uploaderAnimation()">Importer</button>
</div>
<div class="animation-preview">
<h4>Apercu</h4>
<div id="preview-animation" class="preview-animation-box">
<span id="preview-anim-chiffre" class="anim-chiffre">3</span>
<video id="preview-anim-video" class="preview-anim-video cache" muted playsinline></video>
</div>
<button class="btn-secondaire" onclick="testerAnimation()">Tester</button>
<button class="btn-secondaire" onclick="testerAnimationPreview()">Tester</button>
</div>
</div>