Merge pull request #188 from MythicalPlayz/404

locales/en_US.json

@@ -391,5 +391,8 @@
 		"cancel": "Cancel",
 		"confirm": "Confirm",
 		"close": "Close"
+	},
+	"notfound": {
+		"description": "Oops! We could not find this page."
 	}
 }

public/assets/css/404.css

@@ -0,0 +1,24 @@
+.status {
+	text-align: center;
+	font-size: 8rem;
+	padding-top: 60px;
+	color: var(--text-shade-1);
+}
+.description {
+	text-align: center;
+	font-size: 1.7rem;
+	margin-top: -10px;
+	color: var(--text-shade-1);
+}
+.shocked-bandwidth {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 70px;
+	margin-bottom: -120px;
+}
+@media screen and (max-width: 900px) {
+	.shocked-bandwidth {
+		margin-bottom: -100px;
+	}
+}

src/server.js

@@ -113,10 +113,9 @@ app.use('/nso-legacy-pack', routes.aprilfools);
 logger.info('Creating 404 status handler');
 // This works because it is the last router created
 // Meaning the request could not find a valid router
-app.use((request, response, next) => {
+app.use((request, response) => {
 	const fullUrl = util.fullUrl(request);
-	logger.warn(`HTTP 404 at ${fullUrl}`);
-	next();
+	response.render('404');
 });
 
 logger.info('Setting up handlebars engine');

views/404.handlebars

@@ -0,0 +1,10 @@
+<link rel="stylesheet" href="/assets/css/404.css">
+
+{{> header}}
+
+<div class="wrapper">
+	<div class="status"><b>404</b></div>
+	<div class="description">{{ locale.notfound.description }}</div>
+	<img src="/assets/images/shockedbandwidth.svg" class="shocked-bandwidth"/>
+	{{> footer }}
+</div>