marcel/familienarchiv
1
0
Fork 0
Code Issues 116 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use de gruyter ci

Browse Source
This commit is contained in:
Marcel
2026-03-17 18:35:13 +00:00
parent 3b04f4cafe
commit 49fd29c1e6
366 changed files with 2642 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/routes/+layout.svelte
View File

@@ -8,16 +8,19 @@
const isAdmin = $derived(page.data.user?.groups.some((g: { permissions: string[] }) => g.permissions.includes('ADMIN')));
</script>
<div class="min-h-screen bg-brand-sand">
<div class="min-h-screen bg-white">
{#if !page.url.pathname.startsWith('/login')}
<header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
<header class="bg-white border-b border-gray-100 sticky top-0 z-50">
<!-- De Gruyter Brill purple accent strip -->
<div class="h-1 bg-brand-purple"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20">
<div class="flex justify-between h-16">
<!-- Logo & Nav -->
<div class="flex">
<div class="flex-shrink-0 flex items-center mr-8">
<div class="flex-shrink-0 flex items-center mr-10">
<a href="/" class="flex items-center gap-2" aria-label="Familienarchiv">
<svg
width="250"
@@ -38,7 +41,7 @@
<text
x="35"
y="20"
fill="#002850"
fill="#012851"
font-family="Montserrat"
font-weight="bold"
font-size="20">FAMILIENARCHIV</text
@@ -47,48 +50,48 @@
</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
<nav class="hidden sm:flex sm:space-x-1 items-center">
<a
href="/"
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
class="inline-flex items-center px-3 py-1.5 text-xs font-bold uppercase tracking-widest font-sans transition-colors
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
? 'border-brand-navy text-brand-navy'
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
? 'text-brand-navy bg-brand-purple/15 rounded'
: 'text-gray-500 hover:text-brand-navy hover:bg-brand-sand/60 rounded'}"
>
Dokumente
</a>
<a
href="/persons"
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
class="inline-flex items-center px-3 py-1.5 text-xs font-bold uppercase tracking-widest font-sans transition-colors
{page.url.pathname.startsWith('/persons')
? 'border-brand-navy text-brand-navy'
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
? 'text-brand-navy bg-brand-purple/15 rounded'
: 'text-gray-500 hover:text-brand-navy hover:bg-brand-sand/60 rounded'}"
>
Personen
</a>
<a
href="/conversations"
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
class="inline-flex items-center px-3 py-1.5 text-xs font-bold uppercase tracking-widest font-sans transition-colors
{page.url.pathname.startsWith('/conversations')
? 'border-brand-navy text-brand-navy'
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
? 'text-brand-navy bg-brand-purple/15 rounded'
: 'text-gray-500 hover:text-brand-navy hover:bg-brand-sand/60 rounded'}"
>
Konversationen
</a>
{#if isAdmin}
<a
href="/admin"
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
class="inline-flex items-center px-3 py-1.5 text-xs font-bold uppercase tracking-widest font-sans transition-colors
{page.url.pathname.startsWith('/admin')
? 'border-brand-navy text-brand-navy'
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
? 'text-brand-navy bg-brand-purple/15 rounded'
: 'text-gray-500 hover:text-brand-navy hover:bg-brand-sand/60 rounded'}"
>
Admin
</a>
{/if}
</div>
</nav>
</div>
<!-- Right Side -->
@@ -96,8 +99,9 @@
<form action="/logout" method="POST" use:enhance>
<button
type="submit"
class="text-sm text-gray-500 hover:text-brand-navy font-bold uppercase font-sans tracking-wide px-3 py-2 transition"
class="inline-flex items-center gap-1.5 text-xs text-gray-400 hover:text-brand-navy font-bold uppercase font-sans tracking-widest px-3 py-2 transition-colors"
>
<img src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg" alt="" aria-hidden="true" class="w-4 h-4 opacity-50" />
Abmelden
</button>
</form>

87
frontend/src/routes/+page.svelte
View File

@@ -76,14 +76,7 @@ $effect(() => {
class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg" alt="" aria-hidden="true" class="h-4 w-4 opacity-40" />
</div>
</div>
@@ -92,21 +85,7 @@ $effect(() => {
onclick={() => (showAdvanced = !showAdvanced)}
class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-gray-600 uppercase transition hover:bg-gray-100 hover:text-brand-navy"
>
<svg
class="h-4 w-4 transform transition-transform duration-200 {showAdvanced
? 'rotate-180'
: ''}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
<img src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg" alt="" aria-hidden="true" class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}" />
Filter
</button>
@@ -116,14 +95,7 @@ $effect(() => {
class="flex items-center justify-center border border-transparent px-3 py-2.5 text-gray-400 transition hover:text-red-500"
title="Filter zurücksetzen"
>
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 opacity-40" />
</a>
</div>
@@ -212,9 +184,7 @@ $effect(() => {
href="/documents/new"
class="inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg" alt="" aria-hidden="true" class="h-4 w-4" />
Neues Dokument
</a>
</div>
@@ -256,39 +226,12 @@ $effect(() => {
<!-- Metadata Row -->
<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
<div class="flex items-center">
<svg
class="mr-1.5 h-4 w-4 text-brand-mint"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg" alt="" aria-hidden="true" class="mr-1.5 h-4 w-4" />
{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : '—'}
</div>
{#if doc.location}
<div class="flex items-center">
<svg
class="mr-1.5 h-4 w-4 text-brand-mint"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
/><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg" alt="" aria-hidden="true" class="mr-1.5 h-4 w-4" />
{doc.location}
</div>
{/if}
@@ -344,14 +287,7 @@ $effect(() => {
<div
class="hidden items-center text-gray-300 transition-colors group-hover:text-brand-mint sm:flex"
>
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-6 w-6" />
</div>
</div>
</a>
@@ -364,14 +300,7 @@ $effect(() => {
<div
class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
>
<svg class="h-6 w-6 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg" alt="" aria-hidden="true" class="h-6 w-6" />
</div>
<h3 class="font-serif text-lg font-medium text-brand-navy">Keine Dokumente gefunden</h3>
<p class="mt-1 font-sans text-sm text-gray-500">

93
frontend/src/routes/documents/[id]/+page.svelte
View File

@@ -38,7 +38,7 @@
}
</script>
<div class="h-screen flex flex-col bg-brand-sand">
<div class="h-screen flex flex-col bg-white">
<!-- Top Bar -->
<div
class="bg-white border-b border-brand-sand px-6 py-4 flex items-center justify-between z-10 shadow-sm"
@@ -51,19 +51,7 @@
<div
class="w-8 h-8 rounded-full bg-brand-sand group-hover:bg-brand-mint flex items-center justify-center transition-colors"
>
<svg
class="w-4 h-4 text-brand-navy"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 19l-7-7m0 0l7-7m-7 7h18"
/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg" alt="" aria-hidden="true" class="w-4 h-4" />
</div>
<span>Zurück</span>
</a>
@@ -88,14 +76,7 @@
href="/documents/{doc.id}/edit"
class="text-brand-navy bg-transparent border border-brand-navy hover:bg-brand-navy hover:text-white px-4 py-2 rounded text-sm font-medium transition flex items-center gap-2"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg" alt="" aria-hidden="true" class="w-4 h-4" />
Bearbeiten
</a>
@@ -106,14 +87,7 @@
class="text-brand-navy bg-brand-sand/50 hover:bg-brand-mint border border-transparent p-2 rounded transition"
title="Download"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
</a>
{/if}
</div>
@@ -137,14 +111,7 @@
<!-- Date -->
<div class="flex items-start group">
<span class="text-brand-mint w-8 mt-0.5">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
</span>
<div>
<span class="block font-serif text-lg text-brand-navy">
@@ -157,19 +124,7 @@
<!-- Creation Location -->
<div class="flex items-start group">
<span class="text-brand-mint w-8 mt-0.5">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
/><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
</span>
<div>
<span class="block font-serif text-lg text-brand-navy">
@@ -183,14 +138,7 @@
{#if doc.documentLocation}
<div class="flex items-start group">
<span class="text-brand-mint w-8 mt-0.5">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Folder-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
</span>
<div>
<span class="block font-serif text-lg text-brand-navy">
@@ -205,14 +153,7 @@
{#if doc.tags && doc.tags.length > 0}
<div class="flex items-start group">
<span class="text-brand-mint w-8 mt-0.5">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 8V3c0-1.105.895-2 2-2z"
/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Bookmark/Bookmark-Outline-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
</span>
<div class="flex-1">
<div class="flex flex-wrap gap-2 mb-1">
@@ -300,14 +241,7 @@
class="text-gray-300 hover:text-brand-mint transition"
title="Konversation anzeigen"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Chat-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
</a>
{/if}
</div>
@@ -398,14 +332,7 @@
{:else if !doc.filePath}
<div class="flex flex-col items-center text-gray-400">
<div class="bg-white/5 p-8 rounded-full mb-6">
<svg class="w-12 h-12 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-12 h-12 opacity-50 invert" />
</div>
<p class="font-sans text-sm tracking-wide uppercase">Kein Scan vorhanden</p>
</div>

8
frontend/src/routes/documents/[id]/edit/+page.svelte
View File

@@ -42,9 +42,7 @@
<!-- Heading -->
<div class="mb-6">
<a href="/documents/{doc.id}" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group mb-4">
<svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg" alt="" aria-hidden="true" class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" />
Zurück zum Dokument
</a>
<h1 class="text-3xl font-serif text-brand-navy">
@@ -189,9 +187,7 @@
<h2 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-5">Datei</h2>
<div class="flex items-center gap-3 mb-4 text-sm text-gray-600 bg-brand-sand/20 rounded px-3 py-2">
<svg class="w-4 h-4 text-brand-navy flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-4 h-4 flex-shrink-0" />
<span>Aktuelle Datei: <strong class="text-brand-navy font-medium">{doc.originalFilename}</strong></span>
</div>

43
frontend/src/routes/layout.css
View File

@@ -1,52 +1,39 @@
/* 1. Import Tailwind (replaces @tailwind base/components/utilities) */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&family=Montserrat:wght@400;500;600;700&display=swap');
/* Fonts: Montserrat = Gotham substitute | Tinos = Times substitute (De Gruyter Brill CI) */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
@import "tailwindcss";
/* 2. Define Custom Theme Variables */
/* 2. Define Custom Theme Variables — De Gruyter Brill CI */
@theme {
/* COLORS:
Defining a variable starting with --color-* automatically creates
utilities like bg-brand-navy, text-brand-navy, border-brand-navy, etc.
*/
--color-brand-navy: #002850;
--color-brand-mint: #A6DAD8;
--color-brand-sand: #E4E2D7;
/* COLORS — exact De Gruyter Brill brand palette */
--color-brand-navy: #012851; /* Prussian Blue */
--color-brand-mint: #A1DCD8; /* Aqua Island */
--color-brand-purple: #B4B9FF; /* Melrose */
--color-brand-sand: #F0EFE9; /* Neutral paper tone */
--color-brand-white: #ffffff;
--color-brand-dark: #1A1A1A;
--color-brand-dark: #0D0D0D;
/* FONTS:
Defining --font-* creates utilities like font-sans, font-serif.
We override the defaults here.
*/
/* FONTS */
--font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Merriweather", ui-serif, Georgia, serif;
--font-serif: "Tinos", "Times New Roman", Georgia, serif;
/* SPACING/SIZING (Optional):
You can also define custom sizes if needed, e.g., for that huge number
*/
--text-huge: 4rem;
--text-huge: 4rem;
}
/* 3. Custom Utilities & Base Styles */
/* Import the fonts from Google */
/* Apply base styles directly to HTML elements */
/* 3. Base Styles */
@layer base {
html {
overscroll-behavior: none;
}
body {
/* Use the theme variable directly using standard CSS syntax */
background-color: var(--color-brand-sand);
background-color: #ffffff;
color: var(--color-brand-navy);
font-family: var(--font-serif);
}
/* Set headings to use the brand sans-serif font */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 500; /* Medium weight matches the screenshot headers */
font-weight: 600;
}
}

66
frontend/src/routes/login/+page.svelte
View File

@@ -2,31 +2,55 @@
let { form }: { form?: { error?: string; success?: boolean } } = $props();
</script>
<div class="min-h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded shadow-md w-96">
<h1 class="text-2xl font-bold mb-6 text-center">Familienarchiv</h1>
<div class="min-h-screen bg-white flex flex-col">
<!-- DGB purple accent strip -->
<div class="h-1 bg-brand-purple"></div>
<form method="POST" action="?/login" class="space-y-4">
<div>
<label for="username" class="block text-sm font-medium text-gray-700">Benutzername</label>
<input type="text" name="username" id="username" required
class="mt-1 block w-full rounded border-gray-300 shadow-sm p-2 border" />
<div class="flex-1 flex items-center justify-center px-4">
<div class="w-full max-w-sm">
<!-- Logo -->
<div class="mb-10 text-center">
<a href="/" class="inline-flex items-center gap-2" aria-label="Familienarchiv">
<svg width="220" height="22" viewBox="0 0 250 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.156128 1.01562C5.375 1.43431 9.621 4.65591 9.621 11.6669V19.8779H0.156128V10.4467H5.76852C5.76852 5.6736 3.70661 3.72129 0.156128 2.8334V1.01562Z" fill="#B4B9FF"></path>
<path d="M10.5892 19.8779C15.8076 19.4592 20.0541 16.2371 20.0541 9.22655V1.01562H10.5892V10.4467H16.2012C16.2012 15.2199 14.1397 17.1722 10.5892 18.0601V19.8779Z" fill="#B4B9FF"></path>
<text x="35" y="20" fill="#012851" font-family="Montserrat" font-weight="bold" font-size="20">FAMILIENARCHIV</text>
</svg>
</a>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">Passwort</label>
<input type="password" name="password" id="password" required
class="mt-1 block w-full rounded border-gray-300 shadow-sm p-2 border" />
<!-- Card -->
<div class="bg-white border border-brand-sand rounded-sm shadow-sm p-8">
<h1 class="font-sans text-sm font-bold uppercase tracking-widest text-brand-navy mb-6">Anmelden</h1>
<form method="POST" action="?/login" class="space-y-5">
<div>
<label for="username" class="block text-xs font-bold font-sans uppercase tracking-widest text-gray-500 mb-1.5">Benutzername</label>
<input type="text" name="username" id="username" required autocomplete="username"
class="block w-full border border-gray-300 py-2.5 px-3 text-sm font-serif text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none" />
</div>
<div>
<label for="password" class="block text-xs font-bold font-sans uppercase tracking-widest text-gray-500 mb-1.5">Passwort</label>
<input type="password" name="password" id="password" required autocomplete="current-password"
class="block w-full border border-gray-300 py-2.5 px-3 text-sm font-serif text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none" />
</div>
{#if form?.error}
<div class="text-red-600 text-xs font-sans font-medium text-center">{form.error}</div>
{/if}
<button type="submit"
class="w-full bg-brand-navy text-white py-2.5 text-xs font-bold uppercase tracking-widest font-sans hover:bg-brand-navy/90 transition-colors mt-2">
Anmelden
</button>
</form>
</div>
</div>
</div>
{#if form?.error}
<div class="text-red-600 text-sm text-center">{form.error}</div>
{/if}
<button type="submit"
class="bg-brand-navy text-white h-[42px] rounded text-sm font-bold uppercase hover:bg-brand-mint hover:text-brand-navy w-full">
Anmelden
</button>
</form>
<!-- Footer -->
<div class="py-4 text-center">
<p class="text-xs font-sans text-gray-300 uppercase tracking-widest">De Gruyter Familienarchiv</p>
</div>
</div>

27
frontend/src/routes/persons/+page.svelte
View File

@@ -28,14 +28,7 @@ function handleSearch(e: Event) {
href="/persons/new"
class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg" alt="" aria-hidden="true" class="h-4 w-4" />
Neue Person
</a>
</div>
@@ -55,14 +48,7 @@ function handleSearch(e: Event) {
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg" alt="" aria-hidden="true" class="h-4 w-4 opacity-40" />
</div>
</div>
</div>
@@ -75,14 +61,7 @@ function handleSearch(e: Event) {
<div
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30 text-brand-navy"
>
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/></svg
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg" alt="" aria-hidden="true" class="h-6 w-6" />
</div>
<p class="font-serif text-lg text-brand-navy">Keine Personen gefunden.</p>
<p class="mt-1 font-sans text-sm text-gray-500">Versuchen Sie einen anderen Suchbegriff.</p>

10
frontend/src/routes/persons/[id]/+page.svelte
View File

@@ -28,7 +28,7 @@
<!-- Back Link -->
<div class="mb-6">
<a href="/persons" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group">
<svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg" alt="" aria-hidden="true" class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" />
Zurück zur Übersicht
</a>
</div>
@@ -108,7 +108,7 @@
{person.firstName} {person.lastName}
</h1>
<button onclick={() => (editMode = true)} class="ml-4 flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold uppercase tracking-widest border border-gray-300 text-gray-500 rounded hover:border-brand-navy hover:text-brand-navy transition-colors">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
<img src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg" alt="" aria-hidden="true" class="w-3.5 h-3.5" />
Bearbeiten
</button>
</div>
@@ -217,7 +217,7 @@
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div class="flex-shrink-0 h-10 w-10 bg-brand-sand/20 text-brand-navy rounded flex items-center justify-center group-hover:bg-brand-mint group-hover:text-brand-navy transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
</div>
<div class="min-w-0">
<div class="font-serif text-base font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2">
@@ -239,9 +239,7 @@
: 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
{doc.status}
</span>
<svg class="h-5 w-5 text-gray-300 ml-4 group-hover:text-brand-navy transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-4 opacity-40 group-hover:opacity-100 transition-opacity" />
</div>
</div>
</a>