/* ────────────────────────────────────────────────────────────── App — sets up state shared between the two phones, lays them out side-by-side, and renders the brand-extraction footer (palette swatches + font pairings). ────────────────────────────────────────────────────────────── */ const { useState, useCallback, useEffect } = React; const USER = { name: 'Marina', lastName: 'Etxebarria', initial: 'M', id: '4087-2231', since: '2024', }; const TOTAL_STAMPS = 10; const App = () => { // single source of truth: stamp count drives BOTH phones const [stampCount, setStampCount] = useState(7); const [justAdded, setJustAdded] = useState(null); const [justScanned, setJustScanned] = useState(false); const [showCelebration, setShowCelebration] = useState(false); useEffect(() => { // demo loop: simulate a fresh scan after a beat const t = setTimeout(() => setJustScanned(true), 300); return () => clearTimeout(t); }, []); const handleAddStamp = useCallback(() => { setStampCount(c => { if (c >= TOTAL_STAMPS) return c; const next = c + 1; setJustAdded(c); setTimeout(() => setJustAdded(null), 700); if (next === TOTAL_STAMPS) { setShowCelebration(true); setTimeout(() => setShowCelebration(false), 4500); } return next; }); }, []); const handleRedeem = useCallback(() => { setStampCount(0); setShowCelebration(false); }, []); const handleReset = useCallback(() => { setStampCount(0); setShowCelebration(false); }, []); return (
{/* page header */} {/* two phones side-by-side */}
{/* hint — interactive demo */}
👆 Pulsa Añadir sello en la pantalla del personal — la tarjeta del cliente se actualiza al instante.
{/* brand extraction sheets */}
); }; const PageHeader = () => (
Sakura · Tarjeta de sellos digital

La tarjeta de papel,
en tu bolsillo.

Una traducción digital fiel de la tarjeta de fidelidad —en rosa y oro— de Sakura. Dos pantallas, cliente y personal, que comparten un mismo recuento de sellos.

); /* ── Brand-extraction sheets ─────────────────────────────────────── */ const BrandSheet = () => (
); const PaletteCard = () => { const colors = [ { name: 'Rosa Sakura', token: '--sakura-blush', hex: '#F4C5C7', note: 'Degradado del borde · rosa principal' }, { name: 'Crema Sakura', token: '--sakura-cream', hex: '#FBE6E2', note: 'Centro de la tarjeta, rosa crema suave' }, { name: 'Rosa pétalo', token: '--sakura-petal', hex: '#E89AA0', note: 'Rosa cerezo más intenso' }, { name: 'Rosa acento', token: '--sakura-rose', hex: '#C46B73', note: 'Núcleo del pétalo · botones' }, { name: 'Oro champán', token: '--sakura-gold', hex: '#B89968', note: 'Logotipo, filetes, iconos' }, { name: 'Oro intenso', token: '--sakura-gold-dk', hex: '#8A7148', note: 'Texto en oro' }, { name: 'Cobalto sello', token: '--sakura-ink', hex: '#2F5BAA', note: 'El azul del sello de tinta' }, { name: 'Cobalto profundo', token: '--sakura-ink-dk', hex: '#1E3F7E', note: 'Sombra / profundidad del sello' }, { name: 'Carbón cálido', token: '--sakura-char', hex: '#1A1815', note: 'Texto · casi negro cálido' }, { name: 'Blanco cálido', token: '--sakura-paper', hex: '#FFFDFB', note: 'Blanco papel de la tarjeta' }, ]; return (
{colors.map(c => (
{c.name}
{c.note}
{c.hex}
))}
); }; const TypeCard = () => (
{/* Display — Outfit */}
Titular · Outfit 800
sakura
Sushi Japonés y Cocina Asiática
{/* Accent — Shippori Mincho */}
Acento · Shippori Mincho cursiva
llévate 1 gratis
桜 · こんにちは · ありがとう
{/* Body — DM Sans */}
Cuerpo · DM Sans 400 / 500 / 700
Por cada 10 menús completos llévate 1 menú gratis. La tarjeta se sellará después de pagar la cuenta.
12:00 – 16:00 · 20:00 – 23:30 · 948 952 818
Por qué esta combinación:{' '} Las formas geométricas y gruesas en minúscula de Outfit reflejan casi al milímetro el logotipo impreso. Shippori Mincho aporta una voz serif japonesa tradicional para los acentos emocionales. DM Sans se encarga del texto funcional en tamaños pequeños sin competir.
); const CSSVarsCard = () => ( 
{`:root {
  /* Extracted from the physical card */
  --sakura-blush:    #F4C5C7;  `}{`/* card edges */`}{`
  --sakura-cream:    #FBE6E2;  `}{`/* card center */`}{`
  --sakura-petal:    #E89AA0;  `}{`/* deep blossom */`}{`
  --sakura-rose:     #C46B73;  `}{`/* petal cores */`}{`
  --sakura-gold:     #B89968;  `}{`/* wordmark */`}{`
  --sakura-gold-dk:  #8A7148;  `}{`/* gold body */`}{`
  --sakura-ink:      #2F5BAA;  `}{`/* stamp blue */`}{`
  --sakura-ink-dk:   #1E3F7E;  `}{`/* stamp shade */`}{`
  --sakura-char:     #1A1815;  `}{`/* warm black */`}{`
  --sakura-paper:    #FFFDFB;  `}{`/* paper white */`}{`

  /* Type */
  --font-display: 'Outfit', sans-serif;
  --font-accent:  'Shippori Mincho', serif;
  --font-body:    'DM Sans', sans-serif;
}`}
); const StampStudyCard = () => (
{[ { title: 'Vacío', fill: false, idx: 0, bg: 'linear-gradient(180deg, var(--sakura-cream), var(--sakura-blush))' }, { title: 'Sellado', fill: true, idx: 3, bg: 'linear-gradient(180deg, var(--sakura-cream), var(--sakura-blush))' }, { title: 'En personal', fill: true, idx: 5, bg: 'linear-gradient(180deg, #221C15, var(--staff-bg))' }, ].map((s, i) => (
{s.title}
))}
The actual photo of the cobalt rubber stamp, paper-background removed and ink-pixels thresholded to alpha. Each cell is rotated a deterministic ±11° to feel hand-pressed, sits on a white paper halo, and adds a cobalt drop-shadow when filled. Empty cells use the same artwork desaturated to near-white for a subtle silhouette.
); /* shared sheet card */ const SheetCard = ({ title, subtitle, children }) => (
System
{title}
{subtitle}
{children}
); const KeyframesAndStyles = () => ( ); ReactDOM.createRoot(document.getElementById('root')).render();