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:
+11
-2
@@ -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";
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user