414 lines
20 KiB
HTML
414 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Photobooth</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<!-- Ecran d'accueil -->
|
|
<section id="ecran-accueil" class="ecran actif">
|
|
<!-- Fond video/gif en boucle -->
|
|
<video id="accueil-video" class="accueil-media cache" muted loop playsinline></video>
|
|
<img id="accueil-gif" class="accueil-media cache">
|
|
<div class="accueil-contenu">
|
|
<h1 id="nom-evenement">Photobooth</h1>
|
|
<p class="accueil-instruction">Touchez pour commencer</p>
|
|
<div id="accueil-animation-defaut" 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>
|
|
<!-- Icone admin coin bas-droit -->
|
|
<div id="btn-admin" class="btn-admin" onclick="ouvrirAdmin()">⚙</div>
|
|
</section>
|
|
|
|
<!-- Choix du mode -->
|
|
<section id="ecran-mode" class="ecran">
|
|
<h2>Choisissez votre mode</h2>
|
|
<div class="grille-modes">
|
|
<button class="btn-mode" data-mode="simple">
|
|
<div class="mode-icone">📷</div>
|
|
<span>Photo</span>
|
|
</button>
|
|
<button class="btn-mode" data-mode="multi" id="btn-multi">
|
|
<div class="mode-icone">🎴</div>
|
|
<span>Multi-shot</span>
|
|
</button>
|
|
</div>
|
|
<button class="btn-retour" onclick="allerA('accueil')">Retour</button>
|
|
</section>
|
|
|
|
<!-- Compte a rebours + Capture -->
|
|
<section id="ecran-capture" class="ecran">
|
|
<div id="preview-live" class="preview-live">
|
|
<img id="img-preview" src="" alt="Preview">
|
|
</div>
|
|
<div id="compte-a-rebours" class="compte-a-rebours cache">
|
|
<span id="chiffre-car">3</span>
|
|
</div>
|
|
<div id="flash-blanc" class="flash-blanc cache"></div>
|
|
<div class="capture-info">
|
|
<span id="capture-compteur"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Preview photo + Filtres -->
|
|
<section id="ecran-preview" class="ecran">
|
|
<div class="preview-photo-container">
|
|
<img id="photo-resultat" src="" alt="Photo">
|
|
</div>
|
|
<div id="barre-filtres" class="barre-filtres">
|
|
</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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partage -->
|
|
<section id="ecran-partage" class="ecran">
|
|
<h2>Partagez votre photo !</h2>
|
|
<div class="photo-miniature">
|
|
<img id="photo-partage" src="" alt="Photo">
|
|
</div>
|
|
<div class="grille-partage">
|
|
<button class="btn-partage" id="btn-imprimer" onclick="ouvrirImpression()">
|
|
<div class="partage-icone">🖨</div>
|
|
<span>Imprimer</span>
|
|
</button>
|
|
<button class="btn-partage" id="btn-email" onclick="ouvrirEmail()">
|
|
<div class="partage-icone">📧</div>
|
|
<span>Email</span>
|
|
</button>
|
|
<button class="btn-partage" id="btn-qr" onclick="afficherQR()">
|
|
<div class="partage-icone">🔒</div>
|
|
<span>QR Code</span>
|
|
</button>
|
|
</div>
|
|
<!-- Choix exemplaires impression -->
|
|
<div id="form-impression" class="form-impression cache">
|
|
<div class="exemplaires-choix">
|
|
<button class="btn-exemplaire" onclick="changerExemplaires(-1)">-</button>
|
|
<span id="nb-exemplaires">1</span>
|
|
<button class="btn-exemplaire" onclick="changerExemplaires(1)">+</button>
|
|
</div>
|
|
<span class="exemplaires-label">exemplaire(s)</span>
|
|
<button class="btn-action" onclick="lancerImpression()">Imprimer</button>
|
|
<button class="btn-secondaire" onclick="fermerImpression()">Annuler</button>
|
|
</div>
|
|
<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>
|
|
<div id="zone-qr" class="zone-qr cache">
|
|
<img id="img-qr" src="" alt="QR Code">
|
|
</div>
|
|
<div id="statut-partage" class="statut-partage cache"></div>
|
|
<div class="partage-bas">
|
|
<button class="btn-action" onclick="allerA('accueil')">Terminer</button>
|
|
<button class="btn-secondaire" onclick="recommencer()">Nouvelle photo</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Galerie -->
|
|
<section id="ecran-galerie" class="ecran">
|
|
<h2>Galerie</h2>
|
|
<div id="grille-galerie" class="grille-galerie"></div>
|
|
<button class="btn-retour" onclick="allerA('accueil')">Retour</button>
|
|
</section>
|
|
|
|
<!-- Menu Admin / Backoffice -->
|
|
<section id="ecran-admin" class="ecran">
|
|
<div class="admin-header">
|
|
<h2>Parametres</h2>
|
|
<button class="btn-fermer" onclick="allerA('accueil')">×</button>
|
|
</div>
|
|
<div class="admin-contenu">
|
|
<div class="admin-onglets">
|
|
<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="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>
|
|
<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 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>Nombre max d'exemplaires</label>
|
|
<input type="number" id="admin-copies-max" min="1" max="20" value="5">
|
|
</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-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 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>
|
|
<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="testerAnimationPreview()">Tester</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panneau Evenement -->
|
|
<div class="admin-panneau" id="panneau-evenement">
|
|
<div class="champ">
|
|
<label>Nom de l'evenement</label>
|
|
<input type="text" id="admin-nom-event" placeholder="Mon Evenement">
|
|
</div>
|
|
<div class="champ">
|
|
<label>Video/GIF d'accueil (boucle)</label>
|
|
<div class="champ-row">
|
|
<select id="admin-media-accueil">
|
|
<option value="">Aucun (animation par defaut)</option>
|
|
</select>
|
|
<button class="btn-secondaire btn-petit" onclick="rafraichirMediaAccueil()">Rafraichir</button>
|
|
</div>
|
|
<input type="file" id="input-media-accueil" accept=".gif,.mp4,.webm" class="input-fichier">
|
|
<button class="btn-secondaire btn-petit" onclick="uploaderMediaAccueil()">Importer</button>
|
|
</div>
|
|
<div class="champ">
|
|
<label>Couleur primaire</label>
|
|
<input type="color" id="admin-couleur-primaire" value="#e91e63">
|
|
</div>
|
|
<div class="champ">
|
|
<label>Couleur secondaire</label>
|
|
<input type="color" id="admin-couleur-secondaire" value="#ffffff">
|
|
</div>
|
|
<button class="btn-action" onclick="sauvegarderEvenement()">Sauvegarder</button>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<button class="btn-action" onclick="sauvegarderEmail()">Sauvegarder</button>
|
|
</div>
|
|
|
|
<!-- Panneau Galerie -->
|
|
<div class="admin-panneau" id="panneau-galerie-admin">
|
|
<div class="champ">
|
|
<label>Photos prises : <span id="admin-nb-photos">0</span></label>
|
|
<label>Exports : <span id="admin-nb-exports">0</span></label>
|
|
</div>
|
|
<div class="champ">
|
|
<label>URL galerie en ligne</label>
|
|
<input type="text" id="admin-url-galerie" placeholder="https://...">
|
|
</div>
|
|
<button class="btn-action" onclick="sauvegarderGalerie()">Sauvegarder URL</button>
|
|
<button class="btn-danger" onclick="confirmerViderGalerie()">Vider toute la galerie</button>
|
|
</div>
|
|
|
|
<!-- Panneau Systeme -->
|
|
<div class="admin-panneau" id="panneau-systeme">
|
|
<button class="btn-danger" onclick="confirmerRedemarrage()">Redemarrer le systeme</button>
|
|
<button class="btn-danger" onclick="confirmerExtinction()">Eteindre le systeme</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Popup mot de passe admin -->
|
|
<div id="popup-mdp" class="popup-overlay cache">
|
|
<div class="popup-box popup-box-pave">
|
|
<h3>Acces administration</h3>
|
|
<input type="password" id="input-mdp-admin" placeholder="●●●●" inputmode="none" autocomplete="off" readonly>
|
|
<div class="pave-numerique">
|
|
<button class="pave-touche" onclick="paveTouche('1')">1</button>
|
|
<button class="pave-touche" onclick="paveTouche('2')">2</button>
|
|
<button class="pave-touche" onclick="paveTouche('3')">3</button>
|
|
<button class="pave-touche" onclick="paveTouche('4')">4</button>
|
|
<button class="pave-touche" onclick="paveTouche('5')">5</button>
|
|
<button class="pave-touche" onclick="paveTouche('6')">6</button>
|
|
<button class="pave-touche" onclick="paveTouche('7')">7</button>
|
|
<button class="pave-touche" onclick="paveTouche('8')">8</button>
|
|
<button class="pave-touche" onclick="paveTouche('9')">9</button>
|
|
<button class="pave-touche pave-effacer" onclick="paveEffacer()">⌫</button>
|
|
<button class="pave-touche" onclick="paveTouche('0')">0</button>
|
|
<button class="pave-touche pave-valider" onclick="validerMdpAdmin()">✓</button>
|
|
</div>
|
|
<p id="mdp-erreur" class="mdp-erreur cache">Mot de passe incorrect</p>
|
|
<button class="btn-secondaire" onclick="fermerPopupMdp()">Annuler</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="/js/websocket.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
<script src="/js/camera.js"></script>
|
|
<script src="/js/effects.js"></script>
|
|
<script src="/js/gallery.js"></script>
|
|
<script src="/js/share.js"></script>
|
|
<script src="/js/admin.js"></script>
|
|
</body>
|
|
</html>
|