git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-25 20:32:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

frontend(error): add error page

Browse Source
This commit is contained in:
Sam Chau
2025-10-18 05:50:42 +10:30
parent 86e9590337
commit d6a9be58bc
5 changed files with 80 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app.css
View File

@@ -18,4 +18,24 @@
html {
@apply bg-neutral-50 dark:bg-neutral-900;
}
/* Smooth theme transitions using View Transitions API */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}
/* Fallback transitions for browsers without View Transitions API */
@media (prefers-reduced-motion: no-preference) {
html {
transition: background-color 0.3s ease-in-out;
}
* {
transition: background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out,
color 0.3s ease-in-out;
}
}
}

8
src/app.html
View File

@@ -3,6 +3,14 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Prevent theme flash by setting theme immediately -->
<script>
(function() {
const stored = localStorage.getItem('theme');
const theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.classList.add(theme);
})();
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

40
src/routes/+error.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
import { page } from '$app/stores';
import gif404 from '$static/404.gif';
$: statusCode = $page.status;
$: errorMessage = $page.error?.message || 'An unexpected error occurred';
</script>
<div class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-neutral-50 px-4 dark:bg-neutral-900">
<div class="flex max-w-6xl items-center gap-12">
<!-- Left column: Error info and button -->
<div class="flex-1">
<h1 class="mb-4 text-9xl font-bold text-neutral-900 dark:text-neutral-50">
{statusCode}
</h1>
<p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400">
{errorMessage}
</p>
<a
href="/"
class="inline-block rounded-lg bg-neutral-900 px-6 py-3 font-semibold text-white transition-colors hover:bg-neutral-700 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200"
>
Go Home
</a>
</div>
<!-- Right column: 404 gif -->
{#if statusCode === 404}
<div class="flex-1">
<img
src={gif404}
alt="404 Not Found"
class="h-auto w-full rounded-lg"
/>
</div>
{/if}
</div>
</div>

BIN
src/static/404.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 MiB

15
src/stores/theme.ts
View File

@@ -21,7 +21,7 @@ function createThemeStore() {
}
}
const { subscribe, set, update } = writable<Theme>(initialTheme);
const { subscribe, update } = writable<Theme>(initialTheme);
// Apply theme on initialization
if (browser) {
@@ -30,8 +30,17 @@ function createThemeStore() {
function applyTheme(newTheme: Theme) {
if (browser) {
document.documentElement.classList.remove('light', 'dark');
document.documentElement.classList.add(newTheme);
// Use View Transitions API if available for smooth theme changes
if (document.startViewTransition) {
document.startViewTransition(() => {
document.documentElement.classList.remove('light', 'dark');
document.documentElement.classList.add(newTheme);
});
} else {
// Fallback for browsers without View Transitions API
document.documentElement.classList.remove('light', 'dark');
document.documentElement.classList.add(newTheme);
}
}
}