KevinLecou/photobooth-qr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Première passe de direction artistique (palette, marque, carton imprimable)

Browse Source 
Palette affinée autour de l'accent brun/terracotta déjà en prod (continuité,
pas de rupture) : tokens de couleur/rayon/ombre partagés entre la page
upload et la galerie admin. Emoji remplacés par des icônes SVG inline
(rendu cohérent multi-OS). Bloc de marque discret en en-tête des deux
écrans invité/admin.

Nouveau : carton imprimable A5 (src/admin/print-template/) qui génère le
QR en direct via le module qrcode.js existant, prêt pour l'export PDF
navigateur.

Pas de police custom : stack système conservée pour rester sobre
(zéro poids réseau supplémentaire).
This commit is contained in:
KevinLecou
2026-09-16 13:19:44 +02:00
parent 9bc3464a2b
commit a1e24d1aa8
5 changed files with 645 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/admin/gallery/index.html
+7
View File
@@ -18,6 +18,13 @@
<body>
<main class="page">
<header class="page__header">
<p class="brand" aria-hidden="true">
<svg class="brand__mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z"/>
<circle cx="12" cy="13" r="3.5"/>
</svg>
<span class="brand__name">photobooth</span>
</p>
<h1 id="event-name">Galerie événement</h1>
<p id="event-meta" class="event-meta" hidden></p>
</header>
src/admin/gallery/style.css
+79 -22
View File
@@ -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);
}
src/admin/print-template/index.html
+444
View File
@@ -0,0 +1,444 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Carton imprimable — photobooth-qr (admin)</title>
<meta name="robots" content="noindex, nofollow" />
<!--
Outil admin autonome, au même titre que src/admin/qrcode/index.html : pas
d'appel Supabase, pas de config.js requis. Le QR est généré dynamiquement
à partir du slug saisi via le module existant src/admin/qrcode/qrcode.js
(buildEventUrl / generateEventQrSvg) — rien n'est codé en dur.
Usage : ouvrir cette page en local ou sur le VPS, saisir le slug de
l'événement, ajuster le titre si besoin, puis Cmd/Ctrl+P → « Enregistrer
en PDF ». Format cible : A5 portrait, un carton par page, à poser sur les
tables lors de l'événement.
-->
<style>
:root {
color-scheme: light;
--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-contrast: #ffffff;
--radius-sm: 8px;
--radius: 14px;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-sans);
background: #e7e2d8;
color: var(--color-text);
}
.workspace {
display: grid;
grid-template-columns: 300px 1fr;
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.25rem 3rem;
align-items: start;
}
@media (max-width: 760px) {
.workspace {
grid-template-columns: 1fr;
}
}
.controls {
background: var(--color-surface);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: 0 1px 2px rgba(38, 36, 32, 0.06);
}
.controls h1 {
font-size: 1.05rem;
margin: 0 0 0.4rem;
}
.hint {
color: var(--color-muted);
font-size: 0.82rem;
margin: 0 0 1.1rem;
line-height: 1.4;
}
.hint--small {
margin: 0.9rem 0 0;
font-size: 0.75rem;
}
label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.3rem;
margin-top: 0.9rem;
}
label:first-of-type {
margin-top: 0;
}
input,
select {
width: 100%;
font: inherit;
padding: 0.6rem 0.65rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: inherit;
}
input:focus-visible,
select:focus-visible,
button:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 1px;
}
.error {
color: #7a1f14;
font-size: 0.82rem;
margin: 0.6rem 0 0;
min-height: 1.1em;
}
#printBtn {
width: 100%;
margin-top: 1.1rem;
font: inherit;
font-weight: 600;
border: none;
border-radius: var(--radius-sm);
padding: 0.8rem 1rem;
min-height: 46px;
cursor: pointer;
background: var(--color-accent);
color: var(--color-accent-contrast);
}
#printBtn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
#printBtn:active:not(:disabled) {
background: var(--color-accent-hover);
}
/* --- Zone d'aperçu (écran uniquement) --- */
.print-area {
display: flex;
justify-content: center;
padding: 1rem 0;
}
/* --- Le carton lui-même : dimensions A5 réelles (148 x 210mm) pour que
l'aperçu écran corresponde au rendu imprimé. --- */
.card {
width: 148mm;
height: 210mm;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 4mm;
box-shadow: 0 10px 30px rgba(38, 36, 32, 0.18);
padding: 14mm 12mm;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.card__brand {
display: flex;
align-items: center;
gap: 2mm;
color: var(--color-muted);
}
.card__mark {
width: 5mm;
height: 5mm;
color: var(--color-accent);
}
.card__brand-name {
font-size: 3mm;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.card__title {
font-size: 8mm;
font-weight: 700;
letter-spacing: -0.01em;
margin: 6mm 0 2mm;
line-height: 1.2;
word-break: break-word;
}
.card__prompt {
font-size: 4.2mm;
color: var(--color-muted);
margin: 0 0 8mm;
}
.card__qr {
width: 88mm;
height: 88mm;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-muted);
border-radius: 3mm;
padding: 5mm;
}
.card__qr svg {
width: 100%;
height: 100%;
display: block;
}
.card__qr .card__qr-placeholder {
font-size: 3.4mm;
color: var(--color-muted);
}
.card__url {
font-size: 3mm;
color: var(--color-muted);
word-break: break-all;
margin: 6mm 0 0;
}
.card__footnote {
font-size: 2.8mm;
color: var(--color-muted);
margin-top: auto;
padding-top: 6mm;
}
/* --- Impression : un seul carton, plein format A5, sans chrome d'admin --- */
@page {
size: A5 portrait;
margin: 0;
}
@media print {
body {
background: #fff;
}
.controls,
.print-area {
display: none !important;
}
.card {
display: flex;
box-shadow: none;
border: none;
border-radius: 0;
width: 148mm;
height: 210mm;
margin: 0;
page-break-after: avoid;
}
.card--for-print {
display: flex !important;
}
}
.card--for-print {
display: none;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="workspace">
<aside class="controls" aria-label="Paramètres du carton">
<h1>Carton table — QR événement</h1>
<p class="hint">
Génère un carton A5 avec QR code, à imprimer (ou exporter en PDF) et
poser sur les tables le jour de l'événement. Le QR est recalculé en
direct à partir du slug saisi ci-dessous — rien n'est codé en dur.
</p>
<label for="slug">Slug de l'événement *</label>
<input id="slug" type="text" placeholder="mariage-julie-marc" autocomplete="off" />
<label for="title">Titre affiché sur le carton</label>
<input id="title" type="text" placeholder="Laissé vide : déduit du slug" autocomplete="off" />
<label for="baseUrl">Domaine de base de l'app</label>
<input id="baseUrl" type="text" placeholder="https://photobooth.mondomaine.fr" autocomplete="off" />
<label for="ecLevel">Correction d'erreur du QR</label>
<select id="ecLevel">
<option value="M">M — standard</option>
<option value="Q" selected>Q — recommandé (carton manipulé)</option>
<option value="H">H — maximal</option>
</select>
<p class="error" id="error" role="alert"></p>
<button type="button" id="printBtn" disabled>Imprimer / Enregistrer en PDF</button>
<p class="hint hint--small">
Format A5 portrait, un carton par page. Dans la boîte de dialogue
d'impression : désactiver en-têtes/pieds de page et mettre les
marges à « Aucune » pour un rendu propre.
</p>
</aside>
<div class="print-area">
<section class="card" id="previewCard" aria-label="Aperçu du carton">
<div class="card__brand">
<svg class="card__mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z"/>
<circle cx="12" cy="13" r="3.5"/>
</svg>
<span class="card__brand-name">photobooth</span>
</div>
<h2 class="card__title" id="cardTitle">Votre événement</h2>
<p class="card__prompt">Scannez pour déposer vos photos</p>
<div class="card__qr" id="qrContainer">
<span class="card__qr-placeholder">Saisissez un slug pour générer le QR</span>
</div>
<p class="card__url" id="cardUrl"></p>
<p class="card__footnote">Vos photos sont supprimées automatiquement 7 jours après l'événement.</p>
</section>
</div>
</div>
<!-- Carton dupliqué, caché à l'écran, affiché uniquement à l'impression :
évite de dépendre de la mise en page d'aperçu (grille 2 colonnes,
fond gris) pour le rendu papier. Contenu synchronisé en JS. -->
<section class="card card--for-print" id="printCard" aria-hidden="true">
<div class="card__brand">
<svg class="card__mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z"/>
<circle cx="12" cy="13" r="3.5"/>
</svg>
<span class="card__brand-name">photobooth</span>
</div>
<h2 class="card__title" id="cardTitlePrint">Votre événement</h2>
<p class="card__prompt">Scannez pour déposer vos photos</p>
<div class="card__qr" id="qrContainerPrint"></div>
<p class="card__url" id="cardUrlPrint"></p>
<p class="card__footnote">Vos photos sont supprimées automatiquement 7 jours après l'événement.</p>
</section>
<script type="module">
import {
DEFAULT_BASE_URL,
buildEventUrl,
generateEventQrSvg,
} from '../qrcode/qrcode.js';
const slugInput = document.getElementById('slug');
const titleInput = document.getElementById('title');
const baseUrlInput = document.getElementById('baseUrl');
const ecLevelSelect = document.getElementById('ecLevel');
const errorEl = document.getElementById('error');
const printBtn = document.getElementById('printBtn');
const qrContainer = document.getElementById('qrContainer');
const cardTitle = document.getElementById('cardTitle');
const cardUrl = document.getElementById('cardUrl');
const qrContainerPrint = document.getElementById('qrContainerPrint');
const cardTitlePrint = document.getElementById('cardTitlePrint');
const cardUrlPrint = document.getElementById('cardUrlPrint');
baseUrlInput.placeholder = DEFAULT_BASE_URL;
function humanizeSlug(slug) {
return slug
.replace(/[-_]+/g, ' ')
.trim()
.replace(/\b\w/g, (c) => c.toUpperCase());
}
function currentOptions() {
const baseUrl = baseUrlInput.value.trim() || undefined;
const errorCorrectionLevel = ecLevelSelect.value;
return { baseUrl, errorCorrectionLevel };
}
function refresh() {
errorEl.textContent = '';
const slug = slugInput.value.trim();
if (!slug) {
qrContainer.innerHTML = '<span class="card__qr-placeholder">Saisissez un slug pour générer le QR</span>';
qrContainerPrint.innerHTML = '';
cardUrl.textContent = '';
cardUrlPrint.textContent = '';
printBtn.disabled = true;
return;
}
try {
const options = currentOptions();
// margin réduit (cellSize * 2 au lieu du défaut *4) : le conteneur
// .card__qr porte déjà sa propre marge visuelle, pas besoin de la
// dupliquer dans le SVG.
const svg = generateEventQrSvg(slug, { ...options, cellSize: 8, margin: 16 });
const url = buildEventUrl(slug, options.baseUrl);
const title = titleInput.value.trim() || humanizeSlug(slug);
qrContainer.innerHTML = svg;
qrContainerPrint.innerHTML = svg;
cardUrl.textContent = url;
cardUrlPrint.textContent = url;
cardTitle.textContent = title;
cardTitlePrint.textContent = title;
printBtn.disabled = false;
} catch (err) {
qrContainer.innerHTML = '<span class="card__qr-placeholder">Erreur</span>';
qrContainerPrint.innerHTML = '';
printBtn.disabled = true;
errorEl.textContent = err.message;
}
}
slugInput.addEventListener('input', refresh);
titleInput.addEventListener('input', refresh);
baseUrlInput.addEventListener('input', refresh);
ecLevelSelect.addEventListener('change', refresh);
printBtn.addEventListener('click', () => {
window.print();
});
refresh();
</script>
</body>
</html>
src/e/index.html
+22 -2
View File
@@ -17,6 +17,13 @@
<body>
<main class="page">
<header class="page__header">
<p class="brand" aria-hidden="true">
<svg class="brand__mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z"/>
<circle cx="12" cy="13" r="3.5"/>
</svg>
<span class="brand__name">photobooth</span>
</p>
<h1 id="event-name">Ajouter une photo</h1>
</header>
@@ -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. -->
<div class="photo-source-buttons">
<label for="photo-input" class="btn-secondary">📷 Prendre une photo</label>
<label for="photo-input-gallery" class="btn-secondary">🖼️ Depuis la galerie</label>
<label for="photo-input" class="btn-secondary">
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z"/>
<circle cx="12" cy="13" r="3.5"/>
</svg>
<span>Prendre une photo</span>
</label>
<label for="photo-input-gallery" class="btn-secondary">
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<rect x="3" y="4" width="18" height="16" rx="2.5"/>
<circle cx="8.5" cy="9.5" r="1.5"/>
<path d="M21 16.5 15.6 11a1 1 0 0 0-1.4 0L6 19"/>
</svg>
<span>Depuis la galerie</span>
</label>
</div>
<input
type="file"
src/e/style.css
+93 -21
View File
@@ -1,18 +1,42 @@
/* Page upload invité — mobile-first, sobre, sans dépendance externe */
/* Page upload invité — mobile-first, sobre, sans dépendance externe.
Système de design partagé avec la galerie admin (src/admin/gallery/style.css) :
mêmes tokens de couleur/rayon/ombre, pour une identité cohérente entre les
deux écrans (voir docs/decisions.md pour le contexte produit). */
:root {
color-scheme: light;
--color-bg: #faf9f7;
--color-text: #2a2a28;
--color-muted: #6b6b66;
/* Couleurs — palette chaude et sobre, cohérente avec l'identité perso de
Kévin Lecou (Rêves Liquides). L'accent brun/terracotta est inchangé par
rapport à la V1 déployée : on affine la palette autour, pas de rupture. */
--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-success-bg: #eaf5ec;
--color-success-bg: #eaf3ec;
--color-success-text: #1e5c2d;
--radius: 10px;
--spacing: 1rem;
/* Rayon à deux niveaux : sm pour les petits éléments (inputs, chips),
base pour les blocs/cards — donne une identité "arrondie/artisanale"
un peu plus marquée que le 10px uniforme de la V1. */
--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;
}
* {
@@ -25,7 +49,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;
@@ -34,7 +58,7 @@ body {
.page {
max-width: 480px;
margin: 0 auto;
padding: 1.25rem 1rem 3rem;
padding: 1.5rem 1.1rem 3rem;
min-height: 100dvh;
}
@@ -43,9 +67,38 @@ body {
margin-bottom: 1.5rem;
}
/* Bloc de marque — discret, rassure l'invité (outil "pro") et signe le
produit pour les organisateurs/prestataires qui verront la page.
Volontairement minuscule : ce n'est pas l'écran de l'invité qui doit
porter la marque de Kévin, c'est un clin d'œil en filigrane. */
.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;
}
.state-block {
@@ -101,9 +154,9 @@ input[type="file"],
textarea {
font: inherit;
padding: 0.7rem 0.75rem;
border: 1px solid #d8d5cf;
border-radius: var(--radius);
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: inherit;
width: 100%;
}
@@ -134,22 +187,35 @@ input[type="file"] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
text-align: center;
font-weight: 600;
font-size: 0.9rem;
padding: 0.85rem 0.6rem;
min-height: 48px;
border: 1px solid var(--color-accent);
border-radius: var(--radius);
border-radius: var(--radius-sm);
color: var(--color-accent);
background: #fff;
background: var(--color-surface);
cursor: pointer;
}
.btn-secondary:active {
background: var(--color-accent-soft);
transform: translateY(1px);
}
/* Icônes SVG inline (aucune requête réseau) : remplacent les emoji des
boutons "Prendre une photo" / "Depuis la galerie". Le rendu des emoji
varie fortement selon l'OS (Android/iOS/Windows) — pas assez maîtrisé
pour une pièce de portfolio. Les icônes héritent de currentColor, donc
suivent l'état du bouton sans CSS supplémentaire. */
.btn-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.file-chosen-label {
font-size: 0.85rem;
color: var(--color-muted);
@@ -173,15 +239,15 @@ button:focus-visible {
max-height: 320px;
object-fit: contain;
border-radius: var(--radius);
background: #eee;
background: var(--color-surface-muted);
}
.legal-notice {
font-size: 0.8rem;
color: var(--color-muted);
background: #f1efe9;
background: var(--color-surface-muted);
border-radius: var(--radius);
padding: 0.75rem;
padding: 0.8rem 0.9rem;
margin: 0;
}
@@ -197,7 +263,7 @@ button {
font: inherit;
font-weight: 600;
border: none;
border-radius: var(--radius);
border-radius: var(--radius-sm);
padding: 0.85rem 1rem;
min-height: 48px;
cursor: pointer;
@@ -207,6 +273,12 @@ button {
#add-another-btn {
background: var(--color-accent);
color: var(--color-accent-contrast);
box-shadow: var(--shadow-sm);
}
#submit-btn:active:not(:disabled),
#add-another-btn:active {
background: var(--color-accent-hover);
}
#submit-btn:disabled {