71 lines
2.4 KiB
Svelte
71 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="bg-surface-50 dark:bg-surface-900 flex min-h-screen flex-col items-center justify-center p-4 text-center">
|
|
<div
|
|
class="dark:bg-surface-800 border-surface-200 dark:border-surface-700 max-w-md rounded-2xl border bg-white p-8 shadow-xl">
|
|
<div class="mb-6 flex justify-center">
|
|
<div
|
|
class="bg-error-100 dark:bg-error-900 text-error-600 dark:text-error-400 rounded-full p-4">
|
|
<AlertTriangle size={48} />
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-surface-900 mb-2 text-6xl font-black dark:text-white">
|
|
{status}
|
|
</h1>
|
|
<h2
|
|
class="text-surface-700 dark:text-surface-200 mb-4 text-2xl font-bold">
|
|
{#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="border-surface-100 dark:border-surface-700 text-surface-500 mt-8 border-t pt-6 text-sm">
|
|
<p>
|
|
If you are onsite at an event, please check your network
|
|
connection or contact the registration desk.
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|