Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier for everything else left

Browse Source
This commit is contained in:
Scott Idem
2026-03-24 12:28:28 -04:00
parent 12a9472064
commit 23d25bf65a
4 changed files with 552 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/routes/+error.svelte
View File

@@ -1,62 +1,69 @@
<script lang="ts">
import { page } from '$app/state';
import { RefreshCw, Home, AlertTriangle } from '@lucide/svelte';
import { browser } from '$app/environment';
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') ||
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="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="p-4 rounded-full bg-error-100 dark:bg-error-900 text-error-600 dark:text-error-400">
<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-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">
<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
<button
onclick={() => browser && window.location.reload()}
class="btn btn-lg preset-filled-primary-500 hover:preset-filled-primary-600 w-full font-bold"
>
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"
>
<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
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>