From 3afd475a551f525cb2bda6af40ae045e57b77e7e Mon Sep 17 00:00:00 2001 From: Kevin Lecou Date: Wed, 16 Sep 2026 15:48:29 +0200 Subject: [PATCH] =?UTF-8?q?Deuxi=C3=A8me=20passe=20DA=20:=20direction=20"p?= =?UTF-8?q?unchy,=20friendly,=20donne=20envie=20de=20fun"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/admin/gallery/index.html | 20 +- src/admin/gallery/style.css | 133 +++-- src/admin/print-template/index.html | 85 +++- src/admin/qrcode/index.html | 31 +- src/e/index.html | 110 ++-- src/e/style.css | 479 +++++++++++++++--- src/e/upload.js | 13 +- src/vendor/NOTICE.md | 20 + .../fonts/fraunces-latin-500-italic.woff2 | Bin 0 -> 22888 bytes .../fonts/fraunces-latin-600-normal.woff2 | Bin 0 -> 18096 bytes 10 files changed, 716 insertions(+), 175 deletions(-) create mode 100644 src/vendor/fonts/fraunces-latin-500-italic.woff2 create mode 100644 src/vendor/fonts/fraunces-latin-600-normal.woff2 diff --git a/src/admin/gallery/index.html b/src/admin/gallery/index.html index 89f82aa..3bd72d4 100644 --- a/src/admin/gallery/index.html +++ b/src/admin/gallery/index.html @@ -13,6 +13,8 @@ fichier front, à mettre en place lors du déploiement. --> + + @@ -30,6 +32,7 @@
+

Chargement de la galerie…

@@ -42,8 +45,21 @@
- - + +
diff --git a/src/admin/gallery/style.css b/src/admin/gallery/style.css index eacdd18..44fe166 100644 --- a/src/admin/gallery/style.css +++ b/src/admin/gallery/style.css @@ -1,38 +1,58 @@ /* Page galerie admin — mobile-first mais utilisable au clavier/souris sur desktop (l'admin peut consulter depuis un ordinateur), sans dépendance - externe. Mêmes tokens de couleur/rayon/ombre que la page invité + externe. Mêmes tokens de couleur/rayon/ombre/police que la page invité (src/e/style.css) pour rester cohérent visuellement — c'est aussi l'écran que verront les prospects (photographes, wedding planners) lors d'une - démo, donc soigné au même niveau que la page invité. */ + démo, donc soigné au même niveau que la page invité. Palette et police + Fraunces alignées sur la passe 2 (2026-09-16) : voir src/e/style.css pour + la justification complète de la direction créative. */ + +@font-face { + font-family: "Fraunces"; + src: url("/vendor/fonts/fraunces-latin-600-normal.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, + U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} :root { color-scheme: light; - --color-bg: #faf8f5; + --color-bg: #fff8f0; --color-surface: #ffffff; - --color-surface-muted: #f2ede4; - --color-text: #262420; - --color-muted: #6f6a62; - --color-border: #e3ddd2; + --color-surface-muted: #fdecdd; + --color-text: #2b2016; + --color-muted: #8a7869; + --color-border: #f1ddc6; - --color-accent: #8a5a44; - --color-accent-hover: #6e4735; - --color-accent-soft: #f1e3d8; - --color-accent-contrast: #ffffff; + --color-accent: #e35f2b; + --color-accent-hover: #c74c1e; + --color-accent-light: #ff8a52; + --color-accent-soft: #ffe3d0; + --color-accent-contrast: #fffaf6; - --color-error-bg: #fbeceb; - --color-error-text: #7a1f14; - --color-warning-bg: #fbf1de; - --color-warning-text: #7a5a14; + --color-plum: #7c2f56; + --color-plum-soft: #f8e3ee; - --radius-sm: 8px; - --radius: 14px; + --color-error-bg: #fdeae6; + --color-error-text: #a3341c; + --color-warning-bg: #fbe9d8; + --color-warning-text: #8a4a10; - --shadow-sm: 0 1px 2px rgba(38, 36, 32, 0.06); - --shadow-md: 0 6px 20px rgba(38, 36, 32, 0.10); + --radius-sm: 12px; + --radius: 20px; + --radius-pill: 999px; + + --shadow-sm: 0 2px 6px rgba(163, 78, 30, 0.1); + --shadow-md: 0 10px 28px rgba(163, 78, 30, 0.16); + + --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-display: "Fraunces", Georgia, "Times New Roman", serif; } * { @@ -87,10 +107,16 @@ body { } .page__header h1 { - font-size: 1.5rem; - font-weight: 700; + font-family: var(--font-display); + font-size: 1.7rem; + font-weight: 600; letter-spacing: -0.01em; margin: 0.15rem 0 0; + color: var(--color-accent); + background: linear-gradient(100deg, var(--color-accent) 20%, var(--color-plum) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; } .event-meta { @@ -119,6 +145,23 @@ body { margin-bottom: 0; } +.spinner { + display: inline-block; + width: 26px; + height: 26px; + margin-bottom: 0.6rem; + border: 3px solid var(--color-accent-soft); + border-top-color: var(--color-accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + .status-banner { background: var(--color-warning-bg); color: var(--color-warning-text); @@ -136,22 +179,33 @@ body { } .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.45rem; font: inherit; - font-weight: 600; + font-weight: 700; border: none; - border-radius: var(--radius-sm); - padding: 0.75rem 1rem; - min-height: 44px; + border-radius: var(--radius-pill); + padding: 0.75rem 1.15rem; + min-height: 46px; cursor: pointer; - background: var(--color-accent); + background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent)); color: var(--color-accent-contrast); box-shadow: var(--shadow-sm); + transition: transform 0.12s var(--ease-bounce), background 0.12s ease; +} + +.btn-icon { + width: 18px; + height: 18px; + flex-shrink: 0; } .btn--secondary { background: var(--color-surface); - color: var(--color-accent); - border: 1px solid var(--color-accent); + color: var(--color-plum); + border: 1.5px solid var(--color-plum); box-shadow: none; } @@ -161,18 +215,18 @@ body { } .btn:active:not(:disabled) { - background: var(--color-accent-hover); - transform: translateY(1px); + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + transform: scale(0.97); } .btn--secondary:active:not(:disabled) { - background: var(--color-accent-soft); + background: var(--color-plum-soft); } .btn:focus-visible, a:focus-visible { - outline: 3px solid var(--color-accent); - outline-offset: 1px; + outline: 3px solid var(--color-plum); + outline-offset: 2px; } .zip-status { @@ -201,13 +255,13 @@ a:focus-visible { display: flex; flex-direction: column; box-shadow: var(--shadow-sm); - transition: box-shadow 0.15s ease, transform 0.15s ease; + transition: box-shadow 0.15s var(--ease-bounce), transform 0.15s var(--ease-bounce); } @media (hover: hover) { .photo-card:hover { box-shadow: var(--shadow-md); - transform: translateY(-2px); + transform: translateY(-3px) rotate(-0.6deg); } } @@ -284,3 +338,12 @@ a:focus-visible { .photo-card__download:hover { background: var(--color-accent-hover); } + +@media (prefers-reduced-motion: reduce) { + .spinner, + .photo-card, + .btn { + animation: none !important; + transition: none !important; + } +} diff --git a/src/admin/print-template/index.html b/src/admin/print-template/index.html index 16b5dbc..591f003 100644 --- a/src/admin/print-template/index.html +++ b/src/admin/print-template/index.html @@ -17,21 +17,51 @@ tables lors de l'événement. -->