Backoffice complet : materiel, compteur, destinations, cadres, animations
- Onglet Materiel : choix appareil photo + imprimante - Compteur avec limite configurable (399/400) affiche sur l'accueil - Destinations multiples : memoire interne, cle USB, FTP, site web, email - Choix sauvegarder toutes les photos ou seulement les imprimees - Gestion des cadres : activation/desactivation + import - 7 animations de compte a rebours : classique, explosion, rebond, rotation 3D, fondu, emoji fun, tremblement - Preview des animations dans le backoffice - Module destinations.py (copie USB, envoi FTP, compteur) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -17,6 +17,9 @@
|
||||
<div class="accueil-animation">
|
||||
<div class="cercle-pulse"></div>
|
||||
</div>
|
||||
<div id="compteur-accueil" class="compteur-accueil cache">
|
||||
<span id="compteur-restant">400</span> / <span id="compteur-limite">400</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Zone admin : coin bas-droit, appui long 3s -->
|
||||
<div id="zone-admin" class="zone-admin"></div>
|
||||
@@ -58,10 +61,8 @@
|
||||
<img id="photo-resultat" src="" alt="Photo">
|
||||
</div>
|
||||
<div id="barre-filtres" class="barre-filtres">
|
||||
<!-- Rempli dynamiquement -->
|
||||
</div>
|
||||
<div id="barre-overlays" class="barre-overlays cache">
|
||||
<!-- Rempli dynamiquement -->
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button class="btn-action" onclick="allerA('partage')">Valider</button>
|
||||
@@ -89,17 +90,14 @@
|
||||
<span>QR Code</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Formulaire email -->
|
||||
<div id="form-email" class="form-email cache">
|
||||
<input type="email" id="input-email" placeholder="votre@email.com" autocomplete="off">
|
||||
<button class="btn-action" onclick="envoyerEmail()">Envoyer</button>
|
||||
<button class="btn-secondaire" onclick="fermerEmail()">Annuler</button>
|
||||
</div>
|
||||
<!-- QR Code -->
|
||||
<div id="zone-qr" class="zone-qr cache">
|
||||
<img id="img-qr" src="" alt="QR Code">
|
||||
</div>
|
||||
<!-- Message statut -->
|
||||
<div id="statut-partage" class="statut-partage cache"></div>
|
||||
<div class="partage-bas">
|
||||
<button class="btn-action" onclick="allerA('accueil')">Terminer</button>
|
||||
@@ -110,43 +108,154 @@
|
||||
<!-- Galerie -->
|
||||
<section id="ecran-galerie" class="ecran">
|
||||
<h2>Galerie</h2>
|
||||
<div id="grille-galerie" class="grille-galerie">
|
||||
<!-- Rempli dynamiquement -->
|
||||
</div>
|
||||
<div id="grille-galerie" class="grille-galerie"></div>
|
||||
<button class="btn-retour" onclick="allerA('accueil')">Retour</button>
|
||||
</section>
|
||||
|
||||
<!-- Menu Admin -->
|
||||
<!-- Menu Admin / Backoffice -->
|
||||
<section id="ecran-admin" class="ecran">
|
||||
<div class="admin-header">
|
||||
<h2>Administration</h2>
|
||||
<h2>Parametres</h2>
|
||||
<button class="btn-fermer" onclick="allerA('accueil')">×</button>
|
||||
</div>
|
||||
<div class="admin-contenu">
|
||||
<!-- Onglets -->
|
||||
<div class="admin-onglets">
|
||||
<button class="onglet actif" data-onglet="fonctionnalites">Fonctions</button>
|
||||
<button class="onglet actif" data-onglet="materiel">Materiel</button>
|
||||
<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="animations-admin">Animation 3-2-1</button>
|
||||
<button class="onglet" data-onglet="evenement">Evenement</button>
|
||||
<button class="onglet" data-onglet="camera-admin">Camera</button>
|
||||
<button class="onglet" data-onglet="impression-admin">Impression</button>
|
||||
<button class="onglet" data-onglet="fonctionnalites">Fonctions</button>
|
||||
<button class="onglet" data-onglet="email-admin">Email</button>
|
||||
<button class="onglet" data-onglet="galerie-admin">Galerie</button>
|
||||
<button class="onglet" data-onglet="systeme">Systeme</button>
|
||||
</div>
|
||||
|
||||
<!-- Panneau Fonctionnalites -->
|
||||
<div class="admin-panneau actif" id="panneau-fonctionnalites">
|
||||
<!-- Panneau Materiel (Camera + Imprimante) -->
|
||||
<div class="admin-panneau actif" id="panneau-materiel">
|
||||
<h3>Appareil photo</h3>
|
||||
<div class="champ">
|
||||
<label>Statut</label>
|
||||
<span id="admin-camera-statut" class="statut-badge">--</span>
|
||||
<button class="btn-secondaire btn-petit" onclick="reconnecterCamera()">Reconnecter</button>
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Appareil detecte</label>
|
||||
<select id="admin-appareil"><option value="">Detection...</option></select>
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Compte a rebours (secondes)</label>
|
||||
<input type="number" id="admin-car" min="1" max="10" value="3">
|
||||
</div>
|
||||
|
||||
<h3>Imprimante</h3>
|
||||
<div class="champ">
|
||||
<label>Imprimante</label>
|
||||
<select id="admin-imprimante"><option value="">Detection...</option></select>
|
||||
<button class="btn-secondaire btn-petit" onclick="rafraichirImprimantes()">Rafraichir</button>
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Copies par impression</label>
|
||||
<input type="number" id="admin-copies" min="1" max="5" value="1">
|
||||
</div>
|
||||
<button class="btn-action" onclick="sauvegarderMateriel()">Sauvegarder</button>
|
||||
</div>
|
||||
|
||||
<!-- Panneau Compteur -->
|
||||
<div class="admin-panneau" id="panneau-compteur-admin">
|
||||
<h3>Compteur de photos</h3>
|
||||
<div class="champ">
|
||||
<label class="toggle"><input type="checkbox" id="tog-compteur-actif"><span class="toggle-slider"></span> Compteur actif</label>
|
||||
</div>
|
||||
<div class="compteur-display">
|
||||
<div class="compteur-gros">
|
||||
<span id="admin-compteur-restant" class="compteur-nombre">400</span>
|
||||
<span class="compteur-sep">/</span>
|
||||
<span id="admin-compteur-limite-display" class="compteur-nombre petit">400</span>
|
||||
</div>
|
||||
<span class="compteur-label">photos restantes</span>
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Limite totale</label>
|
||||
<input type="number" id="admin-compteur-limite" min="1" max="9999" value="400">
|
||||
</div>
|
||||
<div class="champ-row">
|
||||
<button class="btn-action" onclick="sauvegarderCompteur()">Sauvegarder</button>
|
||||
<button class="btn-danger" onclick="resetCompteur()">Remettre a zero</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Panneau Destinations -->
|
||||
<div class="admin-panneau" id="panneau-destinations-admin">
|
||||
<h3>Ou sauvegarder les photos ?</h3>
|
||||
<div class="toggle-groupe">
|
||||
<label class="toggle"><input type="checkbox" id="tog-photo-simple" checked><span class="toggle-slider"></span> Photo simple</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-multi-shot"><span class="toggle-slider"></span> Multi-shot</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-filtres"><span class="toggle-slider"></span> Filtres</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-overlays"><span class="toggle-slider"></span> Overlays / Cadres</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-chroma-key"><span class="toggle-slider"></span> Chroma key (fond vert)</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-impression"><span class="toggle-slider"></span> Impression</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-email"><span class="toggle-slider"></span> Email</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-qr-code"><span class="toggle-slider"></span> QR Code</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-galerie"><span class="toggle-slider"></span> Galerie</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-compteur"><span class="toggle-slider"></span> Compteur</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-dest-memoire" checked><span class="toggle-slider"></span> Memoire interne</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-dest-usb"><span class="toggle-slider"></span> Cle USB</label>
|
||||
</div>
|
||||
<div id="dest-usb-details" class="sous-config cache">
|
||||
<div class="champ">
|
||||
<label>Chemin USB</label>
|
||||
<div class="champ-row">
|
||||
<select id="admin-chemin-usb"><option value="/media/usb">/media/usb</option></select>
|
||||
<button class="btn-secondaire btn-petit" onclick="detecterUSB()">Detecter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-groupe">
|
||||
<label class="toggle"><input type="checkbox" id="tog-dest-ftp"><span class="toggle-slider"></span> Serveur FTP</label>
|
||||
</div>
|
||||
<div id="dest-ftp-details" class="sous-config cache">
|
||||
<div class="champ"><label>Hote FTP</label><input type="text" id="admin-ftp-host" placeholder="ftp.exemple.com"></div>
|
||||
<div class="champ"><label>Port</label><input type="number" id="admin-ftp-port" value="21"></div>
|
||||
<div class="champ"><label>Utilisateur</label><input type="text" id="admin-ftp-user"></div>
|
||||
<div class="champ"><label>Mot de passe</label><input type="password" id="admin-ftp-pass"></div>
|
||||
<div class="champ"><label>Chemin distant</label><input type="text" id="admin-ftp-chemin" value="/photobooth"></div>
|
||||
</div>
|
||||
<div class="toggle-groupe">
|
||||
<label class="toggle"><input type="checkbox" id="tog-dest-web"><span class="toggle-slider"></span> Site internet</label>
|
||||
</div>
|
||||
<div id="dest-web-details" class="sous-config cache">
|
||||
<div class="champ"><label>URL d'upload</label><input type="text" id="admin-web-url" placeholder="https://..."></div>
|
||||
</div>
|
||||
<div class="toggle-groupe">
|
||||
<label class="toggle"><input type="checkbox" id="tog-dest-email-auto"><span class="toggle-slider"></span> Email automatique</label>
|
||||
</div>
|
||||
|
||||
<h3>Quelles photos sauvegarder ?</h3>
|
||||
<div class="radio-groupe">
|
||||
<label class="radio"><input type="radio" name="sauv-mode" id="sauv-tout" value="tout" checked><span class="radio-mark"></span> Toutes les photos</label>
|
||||
<label class="radio"><input type="radio" name="sauv-mode" id="sauv-imprimees" value="imprimees"><span class="radio-mark"></span> Uniquement les photos imprimees</label>
|
||||
</div>
|
||||
<button class="btn-action" onclick="sauvegarderDestinations()">Sauvegarder</button>
|
||||
</div>
|
||||
|
||||
<!-- Panneau Cadres -->
|
||||
<div class="admin-panneau" id="panneau-cadres-admin">
|
||||
<h3>Cadres disponibles</h3>
|
||||
<p class="aide">Cochez les cadres a proposer aux utilisateurs.</p>
|
||||
<div id="liste-cadres" class="liste-cadres">
|
||||
<p class="texte-secondaire">Aucun cadre importe</p>
|
||||
</div>
|
||||
<h3>Importer un cadre</h3>
|
||||
<div class="champ">
|
||||
<input type="file" id="input-cadre" accept=".png" class="input-fichier">
|
||||
<button class="btn-action" onclick="uploaderCadre()">Importer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<div id="liste-animations" class="liste-animations">
|
||||
</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>
|
||||
</div>
|
||||
<button class="btn-secondaire" onclick="testerAnimation()">Tester</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -167,53 +276,28 @@
|
||||
<button class="btn-action" onclick="sauvegarderEvenement()">Sauvegarder</button>
|
||||
</div>
|
||||
|
||||
<!-- Panneau Camera -->
|
||||
<div class="admin-panneau" id="panneau-camera-admin">
|
||||
<div class="champ">
|
||||
<label>Statut</label>
|
||||
<span id="admin-camera-statut">--</span>
|
||||
<button class="btn-secondaire" onclick="reconnecterCamera()">Reconnecter</button>
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Compte a rebours (secondes)</label>
|
||||
<input type="number" id="admin-car" min="1" max="10" value="3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Panneau Impression -->
|
||||
<div class="admin-panneau" id="panneau-impression-admin">
|
||||
<div class="champ">
|
||||
<label>Imprimante</label>
|
||||
<select id="admin-imprimante"><option value="">Chargement...</option></select>
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Copies</label>
|
||||
<input type="number" id="admin-copies" min="1" max="5" value="1">
|
||||
<!-- Panneau Fonctionnalites -->
|
||||
<div class="admin-panneau" id="panneau-fonctionnalites">
|
||||
<div class="toggle-groupe">
|
||||
<label class="toggle"><input type="checkbox" id="tog-photo-simple" checked><span class="toggle-slider"></span> Photo simple</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-multi-shot"><span class="toggle-slider"></span> Multi-shot</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-filtres"><span class="toggle-slider"></span> Filtres</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-overlays"><span class="toggle-slider"></span> Overlays / Cadres</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-chroma-key"><span class="toggle-slider"></span> Chroma key (fond vert)</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-impression"><span class="toggle-slider"></span> Impression</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-email"><span class="toggle-slider"></span> Email</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-qr-code"><span class="toggle-slider"></span> QR Code</label>
|
||||
<label class="toggle"><input type="checkbox" id="tog-galerie"><span class="toggle-slider"></span> Galerie</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Panneau Email -->
|
||||
<div class="admin-panneau" id="panneau-email-admin">
|
||||
<div class="champ">
|
||||
<label>Serveur SMTP</label>
|
||||
<input type="text" id="admin-smtp-host" placeholder="smtp.gmail.com">
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Port</label>
|
||||
<input type="number" id="admin-smtp-port" value="587">
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Utilisateur</label>
|
||||
<input type="text" id="admin-smtp-user" placeholder="user@gmail.com">
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Mot de passe</label>
|
||||
<input type="password" id="admin-smtp-pass">
|
||||
</div>
|
||||
<div class="champ">
|
||||
<label>Expediteur</label>
|
||||
<input type="text" id="admin-expediteur" placeholder="photobooth@event.com">
|
||||
</div>
|
||||
<div class="champ"><label>Serveur SMTP</label><input type="text" id="admin-smtp-host" placeholder="smtp.gmail.com"></div>
|
||||
<div class="champ"><label>Port</label><input type="number" id="admin-smtp-port" value="587"></div>
|
||||
<div class="champ"><label>Utilisateur</label><input type="text" id="admin-smtp-user" placeholder="user@gmail.com"></div>
|
||||
<div class="champ"><label>Mot de passe</label><input type="password" id="admin-smtp-pass"></div>
|
||||
<div class="champ"><label>Expediteur</label><input type="text" id="admin-expediteur" placeholder="photobooth@event.com"></div>
|
||||
<button class="btn-action" onclick="sauvegarderEmail()">Sauvegarder</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user