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:
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user