your personal website on atproto - mirror blento.app
25
fork

Configure Feed

Select the types of activity you want to include in your feed.

add error

jycouet 309b72e1 1fd59d31

+87
+87
src/routes/+error.svelte
··· 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>