diff --git a/src/admin/gallery/index.html b/src/admin/gallery/index.html index d6fc379..468e7d6 100644 --- a/src/admin/gallery/index.html +++ b/src/admin/gallery/index.html @@ -18,6 +18,13 @@
+

Galerie événement

diff --git a/src/admin/gallery/style.css b/src/admin/gallery/style.css index 1619927..eacdd18 100644 --- a/src/admin/gallery/style.css +++ b/src/admin/gallery/style.css @@ -1,21 +1,38 @@ /* 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 que la page invité (src/e/style.css) - pour rester cohérent visuellement. */ + externe. Mêmes tokens de couleur/rayon/ombre 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é. */ :root { color-scheme: light; - --color-bg: #faf9f7; - --color-text: #2a2a28; - --color-muted: #6b6b66; + + --color-bg: #faf8f5; + --color-surface: #ffffff; + --color-surface-muted: #f2ede4; + --color-text: #262420; + --color-muted: #6f6a62; + --color-border: #e3ddd2; + --color-accent: #8a5a44; + --color-accent-hover: #6e4735; + --color-accent-soft: #f1e3d8; --color-accent-contrast: #ffffff; - --color-error-bg: #fdecea; + + --color-error-bg: #fbeceb; --color-error-text: #7a1f14; - --color-warning-bg: #fdf3e3; + --color-warning-bg: #fbf1de; --color-warning-text: #7a5a14; - --radius: 10px; - --spacing: 1rem; + + --radius-sm: 8px; + --radius: 14px; + + --shadow-sm: 0 1px 2px rgba(38, 36, 32, 0.06); + --shadow-md: 0 6px 20px rgba(38, 36, 32, 0.10); + + --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, sans-serif; } * { @@ -28,7 +45,7 @@ html { body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.45; @@ -37,7 +54,7 @@ body { .page { max-width: 960px; margin: 0 auto; - padding: 1.25rem 1rem 3rem; + padding: 1.5rem 1.1rem 3rem; min-height: 100dvh; } @@ -46,9 +63,34 @@ body { margin-bottom: 1.5rem; } +.brand { + display: flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + margin-bottom: 0.6rem; + color: var(--color-muted); +} + +.brand__mark { + width: 16px; + height: 16px; + flex-shrink: 0; + color: var(--color-accent); +} + +.brand__name { + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.13em; + text-transform: uppercase; +} + .page__header h1 { - font-size: 1.4rem; - margin: 0.25rem 0 0; + font-size: 1.5rem; + font-weight: 700; + letter-spacing: -0.01em; + margin: 0.15rem 0 0; } .event-meta { @@ -97,18 +139,20 @@ body { font: inherit; font-weight: 600; border: none; - border-radius: var(--radius); + border-radius: var(--radius-sm); padding: 0.75rem 1rem; min-height: 44px; cursor: pointer; background: var(--color-accent); color: var(--color-accent-contrast); + box-shadow: var(--shadow-sm); } .btn--secondary { - background: #fff; + background: var(--color-surface); color: var(--color-accent); border: 1px solid var(--color-accent); + box-shadow: none; } .btn:disabled { @@ -117,9 +161,14 @@ body { } .btn:active:not(:disabled) { + background: var(--color-accent-hover); transform: translateY(1px); } +.btn--secondary:active:not(:disabled) { + background: var(--color-accent-soft); +} + .btn:focus-visible, a:focus-visible { outline: 3px solid var(--color-accent); @@ -142,23 +191,31 @@ a:focus-visible { padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: 0.9rem; + gap: 1rem; } .photo-card { - background: #fff; + background: var(--color-surface); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); + transition: box-shadow 0.15s ease, transform 0.15s ease; +} + +@media (hover: hover) { + .photo-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } } .photo-card__thumb-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; - background: #ececec; + background: var(--color-surface-muted); } .photo-card__thumb { @@ -189,7 +246,7 @@ a:focus-visible { } .photo-card__meta { - padding: 0.6rem 0.7rem 0.5rem; + padding: 0.65rem 0.75rem 0.55rem; flex: 1; } @@ -216,7 +273,7 @@ a:focus-visible { .photo-card__download { display: block; text-align: center; - padding: 0.55rem; + padding: 0.6rem; background: var(--color-accent); color: var(--color-accent-contrast); text-decoration: none; @@ -225,5 +282,5 @@ a:focus-visible { } .photo-card__download:hover { - filter: brightness(1.05); + background: var(--color-accent-hover); } diff --git a/src/admin/print-template/index.html b/src/admin/print-template/index.html new file mode 100644 index 0000000..16b5dbc --- /dev/null +++ b/src/admin/print-template/index.html @@ -0,0 +1,444 @@ + + + + + +Carton imprimable — photobooth-qr (admin) + + + + + +
+ + +
+
+
+ + photobooth +
+

Votre événement

+

Scannez pour déposer vos photos

+
+ Saisissez un slug pour générer le QR +
+

+

Vos photos sont supprimées automatiquement 7 jours après l'événement.

+
+
+
+ + + + + + + diff --git a/src/e/index.html b/src/e/index.html index 9d33867..d5d7529 100644 --- a/src/e/index.html +++ b/src/e/index.html @@ -17,6 +17,13 @@
+

Ajouter une photo

@@ -42,8 +49,21 @@ le sélecteur de fichiers classique. Décision actée avec Kévin le 2026-09-16 : les deux doivent être accessibles en un tap. -->
- - + +