Remplace le bloc RGPD permanent par une modale de bienvenue au 1er passage
Demande Kévin : mot de bienvenue personnalisé (nom de l'événement) + mention légale RGPD, affiché une fois par événement (localStorage) au lieu d'un bloc toujours visible dans le formulaire. Texte légal conservé à l'identique (docs/rgpd.md), seule la présentation change. Reste consultable à tout moment via un lien "Infos sur tes données" sous le formulaire, qui rouvre la même modale.
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user