87 lines
2.3 KiB
Svelte
87 lines
2.3 KiB
Svelte
<script>
|
|
import { page } from "$app/stores";
|
|
import { goto } from "$app/navigation";
|
|
import "../styles/errorpage.css";
|
|
|
|
$: status = $page.status || 500;
|
|
$: message = $page.error?.message || "Something went wrong";
|
|
|
|
function goBack() {
|
|
history.back();
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Error {status} — Project Optima</title>
|
|
</svelte:head>
|
|
|
|
<div class="error-page">
|
|
<div class="error-pane">
|
|
<!-- Pane header -->
|
|
<div class="error-pane-header">
|
|
<h2 class="error-pane-title">Error</h2>
|
|
<span class="error-status-badge">{status}</span>
|
|
</div>
|
|
|
|
<!-- Pane body -->
|
|
<div class="error-pane-body">
|
|
<div class="error-illustration">
|
|
<svg viewBox="0 0 120 120" width="120" height="120" aria-hidden="true">
|
|
<circle
|
|
cx="60"
|
|
cy="60"
|
|
r="56"
|
|
fill="var(--error-circle-outer)"
|
|
stroke="var(--error-circle-stroke)"
|
|
stroke-width="2"
|
|
/>
|
|
<circle cx="60" cy="60" r="40" fill="var(--error-circle-inner)" />
|
|
<path
|
|
d="M60 35v30"
|
|
stroke="#dc2626"
|
|
stroke-width="5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<circle cx="60" cy="78" r="4" fill="#dc2626" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h3 class="error-heading">Oops! Something went wrong</h3>
|
|
<p class="error-message">{message}</p>
|
|
<p class="error-hint">
|
|
Please try again or contact support if the problem persists.
|
|
</p>
|
|
|
|
<div class="error-actions">
|
|
<button class="btn btn-primary" on:click={goBack}>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
width="16"
|
|
height="16"
|
|
>
|
|
<path d="M19 12H5M12 19l-7-7 7-7" />
|
|
</svg>
|
|
Go Back
|
|
</button>
|
|
<a href="/" class="btn btn-secondary">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
width="16"
|
|
height="16"
|
|
>
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
<polyline points="9 22 9 12 15 12 15 22" />
|
|
</svg>
|
|
Go Home
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|