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

78
frontend/src/routes/admin/+page.svelte
View File

@@ -453,10 +453,7 @@
Kopieren
</button>
</div>
<button
onclick={() => (pinModal = null)}
class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
>
<button onclick={() => (pinModal = null)} class="btn btn-primary btn-block btn-sm">
Schließen
</button>
{/if}
@@ -473,16 +470,10 @@
Diashow und Export, und die Sitzung wird beendet. Rückgängig machbar über „Entsperren“.
</p>
<div class="flex gap-2">
<button
onclick={() => (banTarget = null)}
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
<button onclick={() => (banTarget = null)} class="btn btn-secondary btn-sm flex-1"
>Abbrechen</button
>
<button
onclick={confirmBan}
disabled={banSubmitting}
class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 active:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400"
>
<button onclick={confirmBan} disabled={banSubmitting} class="btn btn-danger btn-sm flex-1">
{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
</button>
</div>
@@ -543,33 +534,25 @@
<div class="space-y-3">
{#if stats}
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
<div
class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800"
>
<div class="card p-4 text-center">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
{stats.user_count}
</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Gäste</p>
</div>
<div
class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800"
>
<div class="card p-4 text-center">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
{stats.upload_count}
</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
</div>
<div
class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800"
>
<div class="card p-4 text-center">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
{stats.comment_count}
</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Kommentare</p>
</div>
<div
class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800"
>
<div class="card p-4 text-center">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
{diskPct(stats)} %
</p>
@@ -577,9 +560,7 @@
</div>
</div>
<!-- Disk bar -->
<div
class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
>
<div class="card p-5">
<div
class="mb-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
>
@@ -611,9 +592,7 @@
{:else if activeTab === 'config'}
<div class="relative space-y-3 pb-20">
{#each CONFIG_GROUPS as group (group.title)}
<div
class="rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
>
<div class="card">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h3
class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
@@ -652,7 +631,7 @@
id={field.key}
rows="6"
bind:value={configDraft[field.key]}
class="w-full resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 font-mono text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
class="input resize-none font-mono text-sm"
></textarea>
{#if field.hint}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
@@ -670,7 +649,7 @@
min="0"
inputmode="decimal"
bind:value={configDraft[field.key]}
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
class="input text-sm"
/>
{#if field.hint}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
@@ -686,11 +665,7 @@
<div
class="sticky bottom-0 -mx-4 border-t border-gray-100 bg-white px-5 py-3 dark:border-gray-800 dark:bg-gray-900 sm:mx-0 sm:rounded-b-xl"
>
<button
onclick={saveConfig}
disabled={saving}
class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
<button onclick={saveConfig} disabled={saving} class="btn btn-primary btn-block">
{saving ? 'Wird gespeichert…' : 'Speichern'}
</button>
</div>
@@ -700,9 +675,7 @@
{:else if activeTab === 'export'}
<div class="space-y-3">
<!-- Gallery release -->
<div
class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
>
<div class="card p-5">
<h3 class="mb-3 font-semibold text-gray-900 dark:text-gray-100">Galerie</h3>
<button
onclick={() =>
@@ -714,16 +687,14 @@
tone: 'danger',
run: releaseGallery
})}
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
class="btn btn-primary btn-sm"
>
Galerie freigeben
</button>
</div>
<!-- Export jobs -->
<div
class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
>
<div class="card p-5">
<div class="mb-4 flex items-center justify-between">
<h3 class="font-semibold text-gray-900 dark:text-gray-100">Export-Jobs</h3>
<button
@@ -781,9 +752,7 @@
<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
{:else if activeTab === 'users'}
<div
class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
>
<div class="card overflow-hidden">
<!-- Search -->
<div class="p-4">
<div
@@ -824,21 +793,12 @@
>{user.display_name}</span
>
{#if user.role === 'host'}
<span
class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
>Host</span
>
<span class="badge badge-primary">Host</span>
{:else if user.role === 'admin'}
<span
class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200"
>Admin</span
>
<span class="badge badge-gold">Admin</span>
{/if}
{#if user.is_banned}
<span
class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200"
>Gesperrt</span
>
<span class="badge badge-danger">Gesperrt</span>
{/if}
</div>
<p class="text-xs text-gray-400 dark:text-gray-500">