familienarchiv/frontend/src/routes/hilfe/transkription/+page.svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import RichtlinienRuleCard from '$lib/components/RichtlinienRuleCard.svelte';

const rules = [
	{
		icon: '❓',
		title: m.richtlinien_rule_unleserlich_title(),
		body: m.richtlinien_rule_unleserlich_body(),
		beispielOutput: '[unleserlich]'
	},
	{
		icon: '✗',
		title: m.richtlinien_rule_durchgestrichen_title(),
		body: m.richtlinien_rule_durchgestrichen_body(),
		beispielInput: 'der Text',
		beispielInputStrike: true,
		beispielOutput: '[durchgestrichen: der Text]'
	},
	{
		icon: 'ſ',
		title: m.richtlinien_rule_langes_s_title(),
		body: m.richtlinien_rule_langes_s_body(),
		beispielInput: 'ſtraße',
		beispielOutput: 'straße'
	},
	{
		icon: '?',
		title: m.richtlinien_rule_name_title(),
		body: m.richtlinien_rule_name_body(),
		beispielInput: 'Müller',
		beispielOutput: '[Müller?]'
	},
	{
		icon: '💬',
		title: m.richtlinien_rule_dialekt_title(),
		body: m.richtlinien_rule_dialekt_body()
	}
];

const klaerungChips = [
	m.richtlinien_klaer_abkuerzungen(),
	m.richtlinien_klaer_datumsformate(),
	m.richtlinien_klaer_umbrueche(),
	m.richtlinien_klaer_caps()
];
</script>

<svelte:head>
	<title>{m.richtlinien_title()} — Familienarchiv</title>
</svelte:head>

<main class="mx-auto max-w-2xl px-4 py-10 font-serif">
	<!-- Title -->
	<h1 class="mb-4 text-3xl font-bold text-ink">{m.richtlinien_title()}</h1>

	<!-- Intro -->
	<p class="mb-8 text-base leading-relaxed text-ink-2">{m.richtlinien_intro()}</p>

	<!-- Wikipedia info card -->
	<div class="border-brand-sand mb-10 rounded-sm border bg-white p-5 shadow-sm">
		<p class="mb-3 font-sans text-sm text-ink-2">{m.richtlinien_wiki_text()}</p>
		<a
			href="https://de.wikipedia.org/wiki/Kurrent"
			target="_blank"
			rel="noopener noreferrer"
			referrerpolicy="no-referrer"
			aria-label="{m.richtlinien_wiki_link()} — {m.common_opens_new_tab()}"
			class="inline-flex items-center gap-1.5 font-sans text-sm font-medium text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
		>
			{m.richtlinien_wiki_link()}
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
				class="h-3.5 w-3.5 shrink-0"
				aria-hidden="true"
			>
				<path
					fill-rule="evenodd"
					d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Zm6.75-3a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0V3.56l-4.22 4.22a.75.75 0 0 1-1.06-1.06l4.22-4.22H11a.75.75 0 0 1-.75-.75Z"
					clip-rule="evenodd"
				/>
			</svg>
		</a>
	</div>

	<!-- Rules section -->
	<h2 class="mb-5 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.richtlinien_rules_label()}
	</h2>
	<div class="mb-10 flex flex-col gap-4">
		{#each rules as rule (rule.title)}
			<RichtlinienRuleCard
				icon={rule.icon}
				title={rule.title}
				body={rule.body}
				beispielInput={rule.beispielInput}
				beispielInputStrike={rule.beispielInputStrike}
				beispielOutput={rule.beispielOutput}
				beispielLabel={m.richtlinien_beispiel_label()}
			/>
		{/each}
	</div>

	<!-- Noch in Klärung -->
	<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.richtlinien_klaerung_label()}
	</h2>
	<p class="mb-4 font-serif text-sm leading-relaxed text-ink-2">
		{m.richtlinien_klaerung_intro()}
	</p>
	<div class="mb-10 flex flex-wrap gap-2">
		{#each klaerungChips as chip (chip)}
			<span
				class="border-brand-sand rounded-full border bg-white px-3 py-1 font-sans text-xs text-ink-2"
				>{chip}</span
			>
		{/each}
	</div>

	<!-- Closing card -->
	<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
		<h3 class="mb-2 font-serif text-lg font-bold text-ink">{m.richtlinien_closing_title()}</h3>
		<p class="font-serif text-sm leading-relaxed text-ink-2">{m.richtlinien_closing_body()}</p>
	</div>
</main>

<style>
@media print {
	:global(.app-nav) {
		display: none;
	}

	@page {
		margin: 1.5cm;
	}
}
</style>