feat: 404 page added (#457)

src/main.js

@@ -6,6 +6,7 @@ import VueMatomo from "vue-matomo";
 import "./semantic-ui-utils/main.css";
 import App from "./App.vue";
 import QuestionView from "./views/QuestionView.vue";
+import NotFound from './views/NotFound.vue'
 import NutritionView from "./views/NutritionView.vue";
 import NutritionInteractiveView from "./views/NutritionInteractiveView.vue";
 import TableAnnotation from "./views/TableAnnotation.vue";
@@ -52,6 +53,7 @@ const routes = [
   { path: "/logos/search", component: LogoSearchView },
   { path: "/logos/:id", component: LogoUpdateView },
   { path: "/subsetQuestion", component: SubsetQuestionView },
+  { path: '*', name: 'Not Found', component: NotFound}
 ];
 
 const router = new VueRouter({

src/views/NotFound.vue

@@ -0,0 +1,40 @@
+<template>
+  <center>
+    <img src="~/../assets/logo-404.png" class="logo" />
+    <h1 class="text-404">
+      Whoops! The page you're looking for can't be found.
+    </h1>
+    <p class="redirect-404">
+      Want to play some games? <a href="/">Click here</a>
+    </p>
+  </center>
+</template>
+
+<script>
+export default {
+  name: "NotFound",
+};
+</script>
+
+<style scoped>
+.logo {
+  width:60%;
+  height:auto;
+}
+.text-404 {
+  font-size: 2em;
+  margin-top:-2rem;
+}
+.redirect-404 {
+  padding-top: 1em;
+  font-size: 1.2em;
+}
+.redirect-404 a {
+  text-decoration: none;
+}
+@media only screen and (max-width: 767px) {
+  .logo {
+    width:100%;
+  }
+}
+</style>