Première passe de direction artistique (palette, marque, carton imprimable)
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:
@@ -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>
|
||||
|
||||
+79
-22
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
+22
-2
@@ -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"
|
||||
|
||||
+93
-21
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user