From a935b654492040c9a9665de1c27ceeb3222a8f61 Mon Sep 17 00:00:00 2001
From: beaock <beaock@gmail.com>
Date: Mon, 11 May 2020 18:20:43 +0900
Subject: [PATCH] Create a 404 page

---
 pinry-spa/src/router/index.js        |  6 ++++
 pinry-spa/src/views/PageNotFound.vue | 53 ++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 pinry-spa/src/views/PageNotFound.vue

diff --git a/pinry-spa/src/router/index.js b/pinry-spa/src/router/index.js
index 2a98b30..2a58c69 100644
--- a/pinry-spa/src/router/index.js
+++ b/pinry-spa/src/router/index.js
@@ -8,6 +8,7 @@ import Pins4Id from '../views/Pins4Id.vue';
 import Boards4User from '../views/Boards4User.vue';
 import PinCreate from '../views/PinCreate.vue';
 import Search from '../views/Search.vue';
+import PageNotFound from '../views/PageNotFound.vue';
 
 Vue.use(VueRouter);
 
@@ -52,6 +53,11 @@ const routes = [
     name: 'search',
     component: Search,
   },
+  {
+    path: '*',
+    name: 'PageNotFound',
+    component: PageNotFound,
+  },
 ];
 
 const router = new VueRouter({
diff --git a/pinry-spa/src/views/PageNotFound.vue b/pinry-spa/src/views/PageNotFound.vue
new file mode 100644
index 0000000..a5bf70b
--- /dev/null
+++ b/pinry-spa/src/views/PageNotFound.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <PHeader></PHeader>
+    <div id="main">
+      <div class="fof">
+        <p>Oops! Page Not Found</p>
+        <h1>Error 404</h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PHeader from '../components/PHeader.vue';
+
+export default {
+  name: 'PageNotFound',
+  components: {
+    PHeader,
+  },
+};
+</script>
+
+<style scoped>
+*{
+    transition: all 0.6s;
+}
+body{
+    font-family: 'Lato', sans-serif;
+    color: #888;
+    margin: 0;
+}
+#main{
+    display: table;
+    width: 100%;
+    height: 100vh;
+    text-align: center;
+}
+.fof{
+  display: table-cell;
+  vertical-align: middle;
+}
+.fof h1{
+  font-size: 50px;
+  display: inline-block;
+  padding-right: 12px;
+  animation: type .5s alternate infinite;
+}
+@keyframes type{
+  from{box-shadow: inset -3px 0px 0px #888;}
+  to{box-shadow: inset -3px 0px 0px transparent;}
+}
+</style>