diff --git a/src/e/index.html b/src/e/index.html index 1d49b4a..2c91c74 100644 --- a/src/e/index.html +++ b/src/e/index.html @@ -30,6 +30,48 @@

Une photo, un petit mot, et hop dans l'album !

+ + +

Chargement de l'événement…

@@ -142,21 +184,13 @@ -

+

diff --git a/src/e/style.css b/src/e/style.css index c34f7b1..7c39e6d 100644 --- a/src/e/style.css +++ b/src/e/style.css @@ -441,6 +441,102 @@ button:focus-visible { color: var(--color-plum); } +.legal-link { + display: flex; + align-items: center; + gap: 0.5rem; + background: none; + border: none; + box-shadow: none; + padding: 0.4rem 0.1rem; + margin: 0; + font: inherit; + font-size: 0.8rem; + font-weight: 600; + color: var(--color-muted); + text-decoration: underline; + text-underline-offset: 2px; + cursor: pointer; + min-height: 0; +} + +.legal-link .legal-notice__icon { + color: var(--color-muted); +} + +/* Mot de bienvenue + RGPD — overlay affiché une fois par événement, + au-dessus du formulaire déjà présent en arrière-plan (cf. upload.js). */ +.welcome-modal { + position: fixed; + inset: 0; + z-index: 100; + display: flex; + align-items: flex-end; + justify-content: center; + padding: 0; + background: rgba(43, 32, 22, 0.45); + animation: fade-in 0.2s ease both; +} + +.welcome-modal__card { + width: 100%; + max-width: 480px; + max-height: 88vh; + overflow-y: auto; + background: var(--color-surface); + border-radius: var(--radius) var(--radius) 0 0; + padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); + box-shadow: var(--shadow-md); + animation: slide-up 0.35s var(--ease-bounce) both; + display: flex; + flex-direction: column; + gap: 0.9rem; +} + +@media (min-width: 520px) { + .welcome-modal { + align-items: center; + } + .welcome-modal__card { + border-radius: var(--radius); + } +} + +.welcome-modal .brand { + margin-bottom: 0; +} + +.welcome-modal__title { + font-family: var(--font-display); + font-weight: 600; + font-size: 1.5rem; + text-align: center; + margin: 0; + color: var(--color-accent); +} + +.welcome-modal__text { + text-align: center; + margin: 0; + color: var(--color-text); +} + +#welcome-modal-dismiss { + background: var(--color-accent); + color: var(--color-accent-contrast); + box-shadow: var(--shadow-sm); +} + +@keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slide-up { + from { transform: translateY(24px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + .progress-text { min-height: 1.2em; font-size: 0.9rem; diff --git a/src/e/upload.js b/src/e/upload.js index e3eca5d..888accd 100644 --- a/src/e/upload.js +++ b/src/e/upload.js @@ -48,6 +48,10 @@ const messageInput = document.getElementById("message-input"); const progressText = document.getElementById("progress-text"); const submitBtn = document.getElementById("submit-btn"); const submitBtnLabel = document.getElementById("submit-btn-label"); +const welcomeModal = document.getElementById("welcome-modal"); +const welcomeModalTitle = document.getElementById("welcome-modal-title"); +const welcomeModalDismiss = document.getElementById("welcome-modal-dismiss"); +const legalLink = document.getElementById("legal-link"); // --------------------------------------------------------------------------- // État @@ -201,6 +205,52 @@ function incrementLocalGuestPhotoCount(slug) { } } +// --------------------------------------------------------------------------- +// Mot de bienvenue + RGPD — affiché une fois par événement (localStorage), +// plutôt qu'en bloc permanent dans le formulaire (décision Kévin 2026-09-16). +// Reste ré-ouvrable à tout moment via le lien "Infos sur tes données". +// --------------------------------------------------------------------------- + +function welcomeSeenStorageKey(slug) { + return `photobooth_welcome_seen_${slug}`; +} + +function hasSeenWelcome(slug) { + try { + return window.localStorage.getItem(welcomeSeenStorageKey(slug)) === "1"; + } catch { + return false; + } +} + +function markWelcomeSeen(slug) { + try { + window.localStorage.setItem(welcomeSeenStorageKey(slug), "1"); + } catch { + // Pas grave : la modale se réaffichera simplement à la prochaine visite, + // ce n'est pas un risque de conformité (juste redondant pour l'invité). + } +} + +function openWelcomeModal(eventName) { + welcomeModalTitle.textContent = eventName ? `Bienvenue à ${eventName} !` : "Bienvenue !"; + welcomeModal.hidden = false; +} + +function closeWelcomeModal() { + welcomeModal.hidden = true; +} + +welcomeModalDismiss.addEventListener("click", () => { + const slug = getSlugFromPath(); + if (slug) markWelcomeSeen(slug); + closeWelcomeModal(); +}); + +legalLink.addEventListener("click", () => { + openWelcomeModal(state.event ? state.event.nom : null); +}); + function isHeicFile(file) { const type = (file.type || "").toLowerCase(); if (type === "image/heic" || type === "image/heif") return true; @@ -232,6 +282,11 @@ function showForm(event) { errorBlock.hidden = true; successBlock.hidden = true; form.hidden = false; + + const slug = getSlugFromPath(); + if (slug && !hasSeenWelcome(slug)) { + openWelcomeModal(event.nom); + } } function showError(rawErr, retryAction) {