pimp my error page

frontend-new/TODO.md

@@ -52,7 +52,7 @@ once QA has passed, the checkboxes can be removed and the page can be ~~striked
   - [x] fetch
   - [x] layout
   - [x] functionality
-  - [ ] design
+  - [x] design
   - [ ] qa
 - index
   - [x] fetch

frontend-new/src/components/Lottie.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { onMounted } from "vue";
+
+defineProps<{
+  src: string;
+}>();
+
+if (!import.meta.env.SSR) {
+  onMounted(() => {
+    if (document.querySelector("[data-lottie-loaded=true]")) return;
+    let script = document.createElement("script");
+    script.setAttribute("src", "https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js");
+    script.setAttribute("data-lottie-loaded", "true");
+    document.head.append(script);
+  });
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <lottie-player autoplay loop mode="normal" :src="src" />
+  </ClientOnly>
+</template>

frontend-new/src/pages/error.vue

@@ -2,15 +2,22 @@
 import { useRoute } from "vue-router";
 import { useHead } from "@vueuse/head";
 import { useSeo } from "~/composables/useSeo";
+import Lottie from "~/components/Lottie.vue";
 
 const route = useRoute();
 useHead(useSeo((route.params.status || 404) + " " + (route.params.msg || "Not found"), null, route, null));
 </script>
 
-<!-- todo make error page pretty -->
 <template>
-  <h1>Error: {{ route.params.status || 404 }}</h1>
-  <h2>{{ route.params.msg || "Not found" }}</h2>
+  <div class="flex flex-col items-center justify-center min-h-50vh">
+    <template v-if="(route.params.status || '404') === '404'">
+      <Lottie src="https://assets9.lottiefiles.com/temp/lf20_dzWAyu.json" />
+    </template>
+    <template v-else>
+      <h1 class="text-4xl font-bold">Error: {{ route.params.status || 404 }}</h1>
+      <h2 class="text-xl font-bold">{{ route.params.msg || "Not found" }}</h2>
+    </template>
+  </div>
 </template>
 
 <route lang="yaml">