64 lines
2.4 KiB
Svelte
64 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/state';
|
|
import { RefreshCw, Home, AlertTriangle } from '@lucide/svelte';
|
|
import { browser } from '$app/environment';
|
|
|
|
let status = $derived(page.status);
|
|
let message = $derived(page.error?.message || 'An unexpected error occurred');
|
|
|
|
// Check if it looks like a connection/API failure
|
|
let is_connection_error = $derived(
|
|
message.toLowerCase().includes('site lookup failed') ||
|
|
message.toLowerCase().includes('fetch') ||
|
|
status === 500
|
|
);
|
|
</script>
|
|
|
|
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-surface-50 dark:bg-surface-900 text-center">
|
|
<div class="max-w-md p-8 rounded-2xl shadow-xl bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
|
|
|
|
<div class="mb-6 flex justify-center">
|
|
<div class="p-4 rounded-full bg-error-100 dark:bg-error-900 text-error-600 dark:text-error-400">
|
|
<AlertTriangle size={48} />
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-6xl font-black mb-2 text-surface-900 dark:text-white">{status}</h1>
|
|
<h2 class="text-2xl font-bold mb-4 text-surface-700 dark:text-surface-200">
|
|
{#if is_connection_error}
|
|
Connection Failure
|
|
{:else}
|
|
Something went wrong
|
|
{/if}
|
|
</h2>
|
|
|
|
<p class="text-surface-600 dark:text-surface-400 mb-8 leading-relaxed">
|
|
{message}
|
|
</p>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<button
|
|
onclick={() => browser && window.location.reload()}
|
|
class="btn btn-lg preset-filled-primary-500 hover:preset-filled-primary-600 w-full font-bold"
|
|
>
|
|
<RefreshCw class="mr-2 size-5" />
|
|
Retry Connection
|
|
</button>
|
|
|
|
<a
|
|
href="/"
|
|
class="btn btn-lg preset-outlined-surface-500 w-full font-bold"
|
|
>
|
|
<Home class="mr-2 size-5" />
|
|
Return Home
|
|
</a>
|
|
</div>
|
|
|
|
{#if is_connection_error}
|
|
<div class="mt-8 pt-6 border-t border-surface-100 dark:border-surface-700 text-sm text-surface-500">
|
|
<p>If you are onsite at an event, please check your network connection or contact the registration desk.</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|