jules/photobooth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo SikaPics local + QR 180px + clavier virtuel email + QR conditionnel booth

Browse Source 
- Logo SikaPics servi localement (/assets/logos/sikapics.png)
- QR code accueil agrandi a 180px
- Clavier AZERTY virtuel integre pour saisie email (tactile)
- Raccourcis @gmail, @hotmail, .com, .fr
- QR partage: affiche seulement si booth actif, lien vers galerie live
- Bouton QR visible si booth OU qr_code active

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jules
2026-04-07 18:50:01 +02:00
parent d2ae366e2f
commit 8b7a00b27e
6 changed files with 543 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

406
frontend/assets/logos/sikapics.png Normal file
View File

File diff suppressed because one or more lines are too long

48
frontend/css/style.css
View File

@@ -270,9 +270,9 @@ html, body {
}
.booth-qr {
width: 120px;
height: 120px;
border-radius: 8px;
width: 180px;
height: 180px;
border-radius: 10px;
}
.booth-code {
@@ -1206,6 +1206,48 @@ h3 {
border-radius: 3px;
}
/* === Clavier virtuel email === */
.clavier-virtuel {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 0.5rem;
max-width: 600px;
}
.clavier-ligne {
display: flex;
gap: 5px;
justify-content: center;
}
.clavier-ligne button {
min-width: 40px;
height: 44px;
border: none;
border-radius: 8px;
background: rgba(255,255,255,0.12);
color: var(--texte);
font-size: 1.1rem;
cursor: pointer;
flex: 1;
max-width: 52px;
}
.clavier-ligne button:active {
background: var(--primaire);
}
.clavier-wide {
min-width: 70px !important;
max-width: 120px !important;
font-size: 0.9rem !important;
}
.clavier-speciales {
gap: 8px;
}
/* === Wizard === */
.wizard-header {
position: absolute;

8
frontend/css/themes.css
View File

@@ -57,10 +57,10 @@
[data-theme="sikapics"] #nom-evenement::before {
content: '';
display: block;
width: 180px;
height: 60px;
margin: 0 auto 1rem;
background-image: url('https://sikapics.com/wp-content/uploads/2024/03/sikapics-logo-sans-fond.png');
width: 250px;
height: 80px;
margin: 0 auto 1.5rem;
background-image: url('/assets/logos/sikapics.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;

65
frontend/index.html
View File

@@ -113,9 +113,68 @@
<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>
<input type="email" id="input-email" placeholder="votre@email.com" autocomplete="off" readonly>
<div class="clavier-virtuel" id="clavier-email">
<div class="clavier-ligne">
<button onclick="clavierTape('1')">1</button>
<button onclick="clavierTape('2')">2</button>
<button onclick="clavierTape('3')">3</button>
<button onclick="clavierTape('4')">4</button>
<button onclick="clavierTape('5')">5</button>
<button onclick="clavierTape('6')">6</button>
<button onclick="clavierTape('7')">7</button>
<button onclick="clavierTape('8')">8</button>
<button onclick="clavierTape('9')">9</button>
<button onclick="clavierTape('0')">0</button>
</div>
<div class="clavier-ligne">
<button onclick="clavierTape('a')">a</button>
<button onclick="clavierTape('z')">z</button>
<button onclick="clavierTape('e')">e</button>
<button onclick="clavierTape('r')">r</button>
<button onclick="clavierTape('t')">t</button>
<button onclick="clavierTape('y')">y</button>
<button onclick="clavierTape('u')">u</button>
<button onclick="clavierTape('i')">i</button>
<button onclick="clavierTape('o')">o</button>
<button onclick="clavierTape('p')">p</button>
</div>
<div class="clavier-ligne">
<button onclick="clavierTape('q')">q</button>
<button onclick="clavierTape('s')">s</button>
<button onclick="clavierTape('d')">d</button>
<button onclick="clavierTape('f')">f</button>
<button onclick="clavierTape('g')">g</button>
<button onclick="clavierTape('h')">h</button>
<button onclick="clavierTape('j')">j</button>
<button onclick="clavierTape('k')">k</button>
<button onclick="clavierTape('l')">l</button>
<button onclick="clavierTape('m')">m</button>
</div>
<div class="clavier-ligne">
<button onclick="clavierTape('w')">w</button>
<button onclick="clavierTape('x')">x</button>
<button onclick="clavierTape('c')">c</button>
<button onclick="clavierTape('v')">v</button>
<button onclick="clavierTape('b')">b</button>
<button onclick="clavierTape('n')">n</button>
<button onclick="clavierTape('@')">@</button>
<button onclick="clavierTape('.')">.</button>
<button onclick="clavierTape('-')">-</button>
<button onclick="clavierTape('_')">_</button>
</div>
<div class="clavier-ligne clavier-speciales">
<button class="clavier-wide" onclick="clavierEffacer()">&#9003;</button>
<button class="clavier-wide" onclick="clavierTape('@gmail.com')">@gmail</button>
<button class="clavier-wide" onclick="clavierTape('@hotmail.com')">@hotmail</button>
<button class="clavier-wide" onclick="clavierTape('.com')">.com</button>
<button class="clavier-wide" onclick="clavierTape('.fr')">.fr</button>
</div>
</div>
<div style="display:flex;gap:1rem;margin-top:0.5rem">
<button class="btn-action" onclick="envoyerEmail()">Envoyer</button>
<button class="btn-secondaire" onclick="fermerEmail()">Annuler</button>
</div>
</div>
<div id="zone-qr" class="zone-qr cache">
<img id="img-qr" src="" alt="QR Code">

3
frontend/js/app.js
View File

@@ -39,7 +39,8 @@ function appliquerConfig() {
toggleVisible('btn-multi', fonc.multi_shot);
toggleVisible('btn-imprimer', fonc.impression);
toggleVisible('btn-email', fonc.email);
toggleVisible('btn-qr', fonc.qr_code);
const boothActif = config.booth?.actif;
toggleVisible('btn-qr', fonc.qr_code || boothActif);
// Media d'accueil (video/gif en boucle)
appliquerMediaAccueil(event.media_accueil);

30
frontend/js/share.js
View File

@@ -35,7 +35,7 @@ async function lancerImpression() {
function ouvrirEmail() {
document.getElementById('form-email').classList.remove('cache');
document.getElementById('input-email').focus();
document.getElementById('input-email').value = '';
}
function fermerEmail() {
@@ -43,6 +43,16 @@ function fermerEmail() {
document.getElementById('input-email').value = '';
}
function clavierTape(car) {
const input = document.getElementById('input-email');
input.value += car;
}
function clavierEffacer() {
const input = document.getElementById('input-email');
input.value = input.value.slice(0, -1);
}
async function envoyerEmail() {
const email = document.getElementById('input-email').value.trim();
if (!email || !photoFinale) return;
@@ -62,12 +72,20 @@ async function afficherQR() {
zone.classList.toggle('cache');
if (!zone.classList.contains('cache')) {
const resultat = await apiGet('/api/qr/galerie');
if (resultat.chemin) {
document.getElementById('img-qr').src = resultat.chemin;
const booth = config.booth || {};
if (booth.actif && booth.url) {
// QR vers la galerie live
const eventId = booth.event_id || 'default';
const qrUrl = `${booth.url}/${eventId}`;
document.getElementById('img-qr').src = `/api/qr?url=${encodeURIComponent(qrUrl)}`;
} else {
afficherStatut('QR Code non configure', 'erreur');
zone.classList.add('cache');
const resultat = await apiGet('/api/qr/galerie');
if (resultat.chemin) {
document.getElementById('img-qr').src = resultat.chemin;
} else {
afficherStatut('QR Code non configure', 'erreur');
zone.classList.add('cache');
}
}
}
}