feat: add 404 page

client/src/app/app.routes.ts

@@ -6,7 +6,9 @@
 
 import { Routes } from "@angular/router";
 import { Home } from "./home/home.js";
+import { Soon } from "./soon/soon.js";
 
 export const routes: Routes = [
   { component: Home, path: "", pathMatch: "full" },
+  { component: Soon, path: "**" },
 ];

client/src/app/nav/nav.ts

@@ -1,3 +1,9 @@
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 

client/src/app/soon/soon.css

@@ -0,0 +1,15 @@
+.btn {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: var(--foreground);
+    color: var(--background);
+    text-decoration: none;
+    border-radius: 50px;
+    border: 2px solid white;
+}
+
+.btn:hover {
+    background-color: var(--background);
+    color: var(--foreground);
+    transition: background-color 0.3s, color 0.3s;
+}

client/src/app/soon/soon.html

@@ -0,0 +1,9 @@
+<h1>Oh dear~!</h1>
+<img src="https://cdn.nhcarrigan.com/new-avatars/hikari-cry-full.png" alt="Hikari" height="250" />
+<p>You appear to have become lost!</p>
+<p>Either this feature is still under construction, or you have tried to go somewhere that does not exist.</p>
+<p>Do not worry, I can guide you back. Where would you like to go?</p>
+<div id="fade">
+  <a href="javascript:history.back()" class="btn">Take me back!</a>
+  <a href="/" class="btn">Take me home!</a>
+</div>

client/src/app/soon/soon.ts

@@ -0,0 +1,17 @@
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Component } from "@angular/core";
+
+@Component({
+  imports:     [],
+  selector:    "app-soon",
+  styleUrl:    "./soon.css",
+  templateUrl: "./soon.html",
+})
+export class Soon {
+
+}