admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: redesign 404 page with branded hero and dual CTAs
Deploy / verify (push) Successful in 38s
Details
Deploy / deploy (push) Successful in 54s
Details

Browse Source
This commit is contained in:
Peter Meier
2026-04-17 23:05:01 +02:00
parent 8dcfeb64c7
commit 78b358e10f
1 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+error.svelte
+41 -15
View File
@@ -1,27 +1,53 @@
<script lang="ts">
import { page } from '$app/stores';
import { useTranslate } from '$lib/translations';
import Icon from '@iconify/svelte';
import '$lib/iconify-offline';
const t = useTranslate();
const status = $derived($page.status);
const message = $derived($page.error?.message ?? '');
const isNotFound = $derived(status === 404);
</script>
<svelte:head>
<title>{status === 404 ? t('page_404_title') : `Fehler ${status}`}</title>
<title>{isNotFound ? t('page_404_title') : `Fehler ${status}`}</title>
<meta name="robots" content="noindex" />
</svelte:head>
<main class="mx-auto max-w-3xl px-4 py-12 text-center">
<h1 class="text-3xl font-bold text-zinc-900">{status}</h1>
{#if status === 404}
<p class="mt-2 text-zinc-600">{t('page_404_text')}</p>
{:else if message}
<p class="mt-2 text-zinc-600">{message}</p>
{/if}
<a
href="/"
class="mt-6 inline-block rounded bg-zinc-900 px-4 py-2 text-white hover:bg-zinc-800"
>
{t('page_404_back')}
</a>
</main>
<section class="bg-linear-to-br from-wald-700 via-wald-800 to-zinc-900 text-white">
<div class="container-custom py-20 md:py-28 text-center">
<div class="mx-auto inline-flex h-20 w-20 items-center justify-center rounded-full bg-white/10 backdrop-blur ring-1 ring-white/20">
<Icon
icon={isNotFound ? 'mdi:map-marker-question-outline' : 'mdi:alert-octagon-outline'}
class="h-10 w-10"
/>
</div>
<p class="mt-6 text-7xl md:text-8xl font-extrabold tracking-tight">{status}</p>
<h1 class="mt-3 text-2xl md:text-3xl font-semibold">
{isNotFound ? t('page_404_title') : `Fehler ${status}`}
</h1>
{#if isNotFound}
<p class="mx-auto mt-4 max-w-xl text-base text-white/80">{t('page_404_text')}</p>
{:else if message}
<p class="mx-auto mt-4 max-w-xl text-base text-white/80">{message}</p>
{/if}
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
<a
href="/"
class="inline-flex items-center gap-2 rounded-sm bg-white px-5 py-2.5 text-sm font-medium text-zinc-900 hover:bg-zinc-100 no-underline"
>
<Icon icon="mdi:home-outline" class="h-4 w-4" />
{t('page_404_back')}
</a>
<a
href="/posts/"
class="inline-flex items-center gap-2 rounded-sm border border-white/40 px-5 py-2.5 text-sm font-medium text-white hover:bg-white/10 no-underline"
>
<Icon icon="mdi:file-document-outline" class="h-4 w-4" />
Zu den Beiträgen
</a>
</div>
</div>
</section>