your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { page } from '$app/stores';
3 import MadeWithBlento from '$lib/website/MadeWithBlento.svelte';
4</script>
5
6<div
7 class="bg-base-100 dark:bg-base-950 text-base-900 dark:text-base-50 min-h-screen px-4 py-8 lg:px-8"
8>
9 <div class="@container/grid mx-auto max-w-4xl">
10 <!-- Bento Grid -->
11 <div class="grid grid-cols-4 gap-3 lg:grid-cols-8 lg:gap-4">
12 <!-- Error Code - Large prominent card -->
13 <div
14 class="col-span-4 row-span-2 flex flex-col items-center justify-center rounded-3xl bg-gradient-to-br from-pink-500 to-rose-500 p-8 text-white lg:col-span-4"
15 >
16 <span class="text-8xl font-black lg:text-9xl">{$page.status}</span>
17 <span class="mt-2 text-xl font-medium opacity-90">Error</span>
18 </div>
19
20 <!-- Oops card -->
21 <div
22 class="col-span-2 flex items-center justify-center rounded-3xl bg-amber-500 p-6 text-white"
23 >
24 <span class="text-2xl font-bold lg:text-3xl">Oops!</span>
25 </div>
26
27 <!-- Decorative emoji card -->
28 <div
29 class="col-span-2 flex items-center justify-center rounded-3xl bg-violet-500 p-6 text-4xl lg:text-5xl"
30 >
31 <span class="animate-bounce">:(</span>
32 </div>
33
34 <!-- Message card -->
35 <div
36 class="bg-base-200/50 dark:bg-base-800/50 text-base-700 dark:text-base-300 col-span-4 flex items-center justify-center rounded-3xl p-6 text-center"
37 >
38 <p class="text-lg font-medium">
39 {$page.error?.message ||
40 "Something went wrong. We couldn't find what you're looking for."}
41 </p>
42 </div>
43
44 <!-- Decorative pattern card -->
45 <div
46 class="col-span-2 flex items-center justify-center overflow-hidden rounded-3xl bg-cyan-500 p-4"
47 >
48 <div class="grid grid-cols-3 gap-2">
49 {#each Array(9) as _, i (i)}
50 <div class="h-3 w-3 rounded-full bg-white/40 lg:h-4 lg:w-4"></div>
51 {/each}
52 </div>
53 </div>
54
55 <!-- Home link card -->
56 <a
57 href="/"
58 class="col-span-2 flex items-center justify-center rounded-3xl bg-emerald-500 p-6 text-white transition-transform hover:scale-[1.02] active:scale-[0.98]"
59 >
60 <span class="text-lg font-bold lg:text-xl">Go Home</span>
61 </a>
62
63 <!-- Decorative stripes card -->
64 <div class="col-span-2 overflow-hidden rounded-3xl bg-blue-500 p-4">
65 <div class="flex h-full w-full flex-col justify-center gap-2">
66 <div class="h-2 w-full rounded-full bg-white/30"></div>
67 <div class="h-2 w-3/4 rounded-full bg-white/40"></div>
68 <div class="h-2 w-1/2 rounded-full bg-white/50"></div>
69 </div>
70 </div>
71
72 <!-- Decorative circles card -->
73 <div
74 class="col-span-2 flex items-center justify-center rounded-3xl bg-orange-500 p-4 lg:col-span-2"
75 >
76 <div class="relative h-16 w-16 lg:h-20 lg:w-20">
77 <div class="absolute inset-0 rounded-full border-4 border-white/40"></div>
78 <div class="absolute inset-2 rounded-full border-4 border-white/50"></div>
79 <div class="absolute inset-4 rounded-full border-4 border-white/60"></div>
80 </div>
81 </div>
82 </div>
83 </div>
84
85 <!-- Footer -->
86 <MadeWithBlento class="text-base-500 mt-12 text-center" />
87</div>