Deuxième passe DA : direction "punchy, friendly, donne envie de fun"

Retour direct de Kévin après la 1ère passe (trop sage) : palette poussée
en saturation (corail vif en primaire, prune + doré en accents), formes
plus rondes (boutons pilule, rayons 20px), micro-animations avec du peps
(easing overshoot, coche qui se dessine + confettis CSS purs à l'envoi,
spinner animé). Police d'accent Fraunces ajoutée pour les titres (2
fichiers .woff2 auto-hébergés, ~44 Ko, SIL OFL, jamais de CDN).

Ton de voix retravaillé : micro-copies plus souriantes, nouvel état
"limite de photos atteinte" traité chaleureusement (pas comme une erreur).

Cohérence maintenue sur galerie admin, carton imprimable, et générateur
QR (sync légère, priorité basse). Testé en conditions réelles sur
photobooth.assistantaikev.eu.
This commit is contained in:
2026-09-16 15:48:29 +02:00
parent 66435b0705
commit 3afd475a55
10 changed files with 716 additions and 175 deletions
+11 -2
View File
@@ -47,6 +47,7 @@ const nomInput = document.getElementById("nom-input");
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");
// ---------------------------------------------------------------------------
// État
@@ -72,7 +73,7 @@ const ERROR_MESSAGES = {
"event-closed":
"Cet événement n'accepte plus de photos (il est clos). Merci quand même d'avoir essayé !",
"guest-limit-reached":
"Tu as déjà envoyé le nombre maximum de photos autorisé pour cet événement. Merci pour ta participation !",
"Dis donc, on ne t'arrête plus ! Tu as atteint le nombre de photos autorisé pour cet événement. Merci d'avoir aussi bien joué le jeu !",
"file-missing": "Choisis d'abord une photo avant d'envoyer.",
"file-not-image":
"Ce fichier n'est pas une photo. Choisis une image (JPEG, PNG, HEIC…).",
@@ -239,6 +240,11 @@ function showError(rawErr, retryAction) {
successBlock.hidden = true;
errorBlock.hidden = false;
errorMessageEl.textContent = ERROR_MESSAGES[err.code] || ERROR_MESSAGES.unknown;
// Traitement visuel dédié (chaleureux, pas rouge "erreur") pour la limite
// de photos atteinte : ce n'est pas un échec pour l'invité, juste une
// limite après participation. Pur toggle de classe CSS, cf. style.css
// (.state-block--limit) — aucun changement de logique ici.
errorBlock.classList.toggle("state-block--limit", err.code === "guest-limit-reached");
state.lastRetryAction = retryAction || null;
const canRetry = Boolean(retryAction) && RETRYABLE_CODES.has(err.code);
@@ -290,7 +296,10 @@ function setProgress(text) {
function setSubmitting(isSubmitting) {
state.isSubmitting = isSubmitting;
submitBtn.disabled = isSubmitting;
submitBtn.textContent = isSubmitting ? "Envoi en cours…" : "Envoyer ma photo";
// On cible le <span> du libellé (et non submitBtn.textContent) pour ne pas
// effacer l'icône SVG du bouton à chaque bascule — changement purement
// visuel, la logique de soumission elle-même est inchangée.
submitBtnLabel.textContent = isSubmitting ? "Envoi en cours…" : "Envoyer ma photo";
}
// ---------------------------------------------------------------------------