fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): elegant wedding white/silver/gold redesign

Browse Source 
Reskin the whole app via design tokens in tailwind-theme.css (remapped
color ramps) plus a define-once component layer in lib/styles/components.css
(.btn, .card, .input, .chip, .badge, .sheet, …). Buttons are muted/outlined
gold rather than flat fills. Self-host Inter + Fraunces (woff2) under the
existing font-src 'self' CSP. Restyle the shared components and the account,
admin, host, join, recover and upload screens against the new tokens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-18 17:28:42 +02:00
parent 5546fb82e6
commit f243bfe89a
22 changed files with 696 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
frontend/src/routes/join/+page.svelte
View File

@@ -139,142 +139,184 @@
}
</script>
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
<div class="w-full max-w-sm">
{#if nameTaken}
<!-- Name-taken state: sign in with PIN or choose a different name -->
<div
class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-primary-50 via-gray-50 to-gray-50 px-4 py-10 dark:from-gray-900 dark:via-gray-950 dark:to-gray-950"
>
<!-- Soft celebratory glow behind the card — a champagne-gold and a silver wash
for the classic warm/cool wedding tension, kept subtle. -->
<div
aria-hidden="true"
class="pointer-events-none absolute -top-20 h-72 w-72 rounded-full bg-primary-200/30 blur-3xl dark:bg-primary-900/25"
></div>
<div
aria-hidden="true"
class="pointer-events-none absolute -bottom-24 right-0 h-72 w-72 rounded-full bg-gray-200/50 blur-3xl dark:bg-gray-800/40"
></div>
<div class="relative w-full max-w-sm">
<!-- Brand -->
<div class="mb-7 flex flex-col items-center text-center">
<div
class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/60 dark:bg-amber-950/30"
class="mb-3 flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-600 text-white shadow-lg shadow-primary-600/30"
>
<p class="font-semibold text-amber-900 dark:text-amber-200">
„{takenName}" ist bereits vergeben.
</p>
<p class="mt-1 text-sm text-amber-800 dark:text-amber-300/90">
Wähle einen anderen Namen, z.&nbsp;B. einen Spitznamen oder füge deinen Nachnamen hinzu („{takenName}
M." oder „{takenName} aus Berlin").
</p>
<svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 8.5A2.5 2.5 0 0 1 6.5 6h1.2c.5 0 .95-.28 1.17-.72l.42-.85A1.5 1.5 0 0 1 10.9 3.6h2.2c.57 0 1.09.32 1.34.83l.42.85c.22.44.67.72 1.17.72h1.2A2.5 2.5 0 0 1 20 8.5v7A2.5 2.5 0 0 1 17.5 18h-11A2.5 2.5 0 0 1 4 15.5v-7Z"
stroke="currentColor"
stroke-width="1.6"
/>
<circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.6" />
</svg>
</div>
<p class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
Falls du das bist, melde dich mit deinem PIN an:
</p>
<form
onsubmit={(e) => {
e.preventDefault();
handleInlineRecover();
}}
<span
class="font-display text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-100"
>EventSnap</span
>
<input
type="text"
value={recoveryPin}
oninput={onRecoveryPinInput}
placeholder="4-stelliger PIN"
maxlength={4}
inputmode="numeric"
pattern="[0-9]*"
data-testid="recovery-pin-input"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
/>
</div>
{#if recoveryError}
<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recovery-error">
{recoveryError}
<!-- Invitation card -->
<div class="card p-6 shadow-xl">
{#if nameTaken}
<!-- Name-taken state: sign in with PIN or choose a different name -->
<div
class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/60 dark:bg-amber-950/30"
>
<p class="font-semibold text-amber-900 dark:text-amber-200">
„{takenName}" ist bereits vergeben.
</p>
{/if}
<p class="mt-1 text-sm text-amber-800 dark:text-amber-300/90">
Wähle einen anderen Namen, z.&nbsp;B. einen Spitznamen oder füge deinen Nachnamen hinzu
(„{takenName}
M." oder „{takenName} aus Berlin").
</p>
</div>
<p class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
Falls du das bist, melde dich mit deinem PIN an:
</p>
<form
onsubmit={(e) => {
e.preventDefault();
handleInlineRecover();
}}
>
<input
type="text"
value={recoveryPin}
oninput={onRecoveryPinInput}
placeholder="4-stelliger PIN"
maxlength={4}
inputmode="numeric"
pattern="[0-9]*"
data-testid="recovery-pin-input"
class="input mb-3 text-center font-mono text-2xl tracking-widest"
/>
{#if recoveryError}
<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recovery-error">
{recoveryError}
</p>
{/if}
<button
type="submit"
disabled={recoveryLoading || recoveryPin.length < 4}
data-testid="recovery-submit"
class="btn btn-primary btn-block mb-3"
>
{recoveryLoading ? 'Wird angemeldet...' : 'Anmelden'}
</button>
</form>
<button
type="submit"
disabled={recoveryLoading || recoveryPin.length < 4}
data-testid="recovery-submit"
class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
onclick={tryDifferentName}
data-testid="try-different-name"
class="btn btn-secondary btn-block"
>
{recoveryLoading ? 'Wird angemeldet...' : 'Anmelden'}
Anderen Namen wählen
</button>
</form>
<button
onclick={tryDifferentName}
data-testid="try-different-name"
class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Anderen Namen wählen
</button>
<!-- Forgot the PIN entirely — ask a host to reset it in-app. -->
{#if pinRequestSent}
<p
class="mt-3 rounded-lg bg-green-50 px-4 py-3 text-center text-sm text-green-700 dark:bg-green-950/30 dark:text-green-300"
>
Anfrage gesendet. Bitte einen Host, deine PIN zurückzusetzen — danach kannst du dich mit
der neuen PIN anmelden.
</p>
<!-- Forgot the PIN entirely — ask a host to reset it in-app. -->
{#if pinRequestSent}
<p
class="mt-3 rounded-lg bg-green-50 px-4 py-3 text-center text-sm text-green-700 dark:bg-green-950/30 dark:text-green-300"
>
Anfrage gesendet. Bitte einen Host, deine PIN zurückzusetzen — danach kannst du dich mit
der neuen PIN anmelden.
</p>
{:else}
<button
onclick={requestPinReset}
disabled={pinRequestLoading}
data-testid="request-pin-reset"
class="mt-3 w-full text-center text-sm text-blue-600 underline decoration-dotted underline-offset-2 hover:text-blue-700 disabled:opacity-50 dark:text-blue-400"
>
{pinRequestLoading ? 'Wird gesendet…' : 'PIN vergessen? Host um Zurücksetzen bitten'}
</button>
{/if}
{:else}
<button
onclick={requestPinReset}
disabled={pinRequestLoading}
data-testid="request-pin-reset"
class="mt-3 w-full text-center text-sm text-blue-600 underline decoration-dotted underline-offset-2 hover:text-blue-700 disabled:opacity-50 dark:text-blue-400"
<!-- Normal join form -->
<p class="mb-1 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
Willkommen bei
</p>
{#if eventName}
<h1
class="mb-3 text-center text-3xl font-semibold text-gray-900 dark:text-gray-100"
data-testid="join-event-name"
>
{eventName}
</h1>
{:else}
<h1 class="mb-3 text-center text-3xl font-semibold text-gray-900 dark:text-gray-100">
dem Event
</h1>
{/if}
<p class="mb-6 text-center text-gray-600 dark:text-gray-400">
Gib deinen Namen ein, um Fotos zu teilen und die Galerie zu sehen.
</p>
<form
onsubmit={(e) => {
e.preventDefault();
handleJoin();
}}
>
{pinRequestLoading ? 'Wird gesendet…' : 'PIN vergessen? Host um Zurücksetzen bitten'}
</button>
{/if}
{:else}
<!-- Normal join form -->
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">
Willkommen!
</h1>
{#if eventName}
<p
class="mb-1 text-center text-lg font-semibold text-blue-600 dark:text-blue-400"
data-testid="join-event-name"
>
{eventName}
<input
type="text"
bind:value={displayName}
placeholder="Dein Name"
maxlength={50}
data-testid="join-name-input"
class="input mb-3 text-lg"
/>
{#if error}
<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="join-error">
{error}
</p>
{/if}
<button
type="submit"
disabled={loading || !displayName.trim()}
data-testid="join-submit"
class="btn btn-primary btn-lg btn-block"
>
{loading ? 'Wird geladen...' : 'Beitreten'}
</button>
</form>
<p class="mt-4 text-center text-sm">
<a
href="/recover"
data-testid="link-to-recover"
class="text-blue-600 hover:underline dark:text-blue-400"
>Ich habe bereits einen Account</a
>
</p>
{/if}
<p class="mb-6 text-center text-gray-600 dark:text-gray-400">
Gib deinen Namen ein, um dem Event beizutreten.
</p>
<form
onsubmit={(e) => {
e.preventDefault();
handleJoin();
}}
>
<input
type="text"
bind:value={displayName}
placeholder="Dein Name"
maxlength={50}
data-testid="join-name-input"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
{#if error}
<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="join-error">
{error}
</p>
{/if}
<button
type="submit"
disabled={loading || !displayName.trim()}
data-testid="join-submit"
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{loading ? 'Wird geladen...' : 'Beitreten'}
</button>
</form>
<p class="mt-4 text-center text-sm">
<a
href="/recover"
data-testid="link-to-recover"
class="text-blue-600 hover:underline dark:text-blue-400">Ich habe bereits einen Account</a
>
</p>
{/if}
</div>
</div>
</div>
@@ -284,7 +326,7 @@
data-testid="pin-modal"
>
<div
class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900"
class="card w-full max-w-sm p-6 shadow-xl"
role="dialog"
aria-modal="true"
aria-labelledby="pin-modal-title"
@@ -298,18 +340,12 @@
wiederherzustellen.
</p>
<div
class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4 dark:bg-gray-800"
>
<div class="surface-muted mb-4 flex items-center justify-center gap-3 p-4">
<span
class="text-4xl font-mono font-bold tracking-widest text-gray-900 dark:text-gray-100"
class="font-mono text-4xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
data-testid="pin-display">{pin}</span
>
<button
onclick={copyPin}
data-testid="pin-copy"
class="min-h-11 min-w-11 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:active:bg-gray-600"
>
<button onclick={copyPin} data-testid="pin-copy" class="btn btn-secondary btn-sm min-h-11">
{copied ? 'Kopiert!' : 'Kopieren'}
</button>
</div>
@@ -317,14 +353,14 @@
<button
onclick={goToFeed}
data-testid="continue-to-feed"
class="mb-2 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
class="btn btn-primary btn-block mb-2"
>
Weiter zur Galerie
</button>
<button
type="button"
onclick={closePinModal}
class="w-full rounded-lg py-2 text-sm text-gray-500 hover:text-gray-700 active:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:active:text-gray-200"
class="btn btn-ghost btn-block text-sm text-gray-500 dark:text-gray-400"
>
Schließen
</button>