QR code par photo : popup QR dynamique + page vue photo sur booth

- afficherQR() génère un QR vers /g/{event}/view/{photo}?p=
- Page photo-view.html : plein écran + bouton télécharger + galerie
- QR accueil reste la galerie complète, QR après capture = la photo

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-27 14:14:28 +02:00
parent 09c8ea75fa
commit 0407244554
3 changed files with 43 additions and 0 deletions

View File

@@ -627,6 +627,27 @@ html, body {
} }
/* Choix exemplaires impression */ /* Choix exemplaires impression */
.popup-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin: 1rem 0;
padding: 1.5rem;
background: rgba(255,255,255,0.05);
border-radius: 16px;
}
.qr-photo-img {
width: 200px;
height: 200px;
border-radius: 12px;
background: #fff;
}
.qr-label {
font-size: 1rem;
color: #aaa;
}
.form-impression { .form-impression {
display: flex; display: flex;
gap: 1rem; gap: 1rem;

View File

@@ -146,6 +146,11 @@
<span>QR Code</span> <span>QR Code</span>
</button> </button>
</div> </div>
<div id="popup-qr" class="popup-qr cache">
<img id="qr-photo" class="qr-photo-img" src="">
<p class="qr-label">Scannez pour voir votre photo</p>
<button class="btn-secondaire" onclick="fermerQR()">Fermer</button>
</div>
<div id="form-impression" class="form-impression cache"> <div id="form-impression" class="form-impression cache">
<div class="exemplaires-choix"> <div class="exemplaires-choix">
<button class="btn-exemplaire" onclick="changerExemplaires(-1)">-</button> <button class="btn-exemplaire" onclick="changerExemplaires(-1)">-</button>

View File

@@ -372,6 +372,23 @@ async function chargerBoothInfo() {
} }
} }
async function afficherQR() {
const booth = config.booth || {};
if (!booth.actif || !booth.url || !photoFinale) return;
try {
const info = await apiGet('/api/booth/info');
if (!info.password) return;
const eventId = (config.evenement || {}).event_id || booth.event_id || 'default';
const qrUrl = `${booth.url}/g/${eventId}/view/${photoFinale}?p=${info.password}`;
document.getElementById('qr-photo').src = `/api/qr?url=${encodeURIComponent(qrUrl)}`;
document.getElementById('popup-qr').classList.remove('cache');
} catch (e) {}
}
function fermerQR() {
document.getElementById('popup-qr').classList.add('cache');
}
function afficherStatut(message, type = 'succes') { function afficherStatut(message, type = 'succes') {
const el = document.getElementById('statut-partage'); const el = document.getElementById('statut-partage');
el.textContent = message; el.textContent = message;