Add custom 404 error page and update server response for not found URLs

kevinlee-06 · Jan 20, 2025 · e75fc6a · e75fc6a
1 parent 92c3e49
commit e75fc6a
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 1 deletion.
diff --git a/public/status/404.html b/public/status/404.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 Not Found</title>
+    <style>
+:root {
+    --background-color: #fce4ec;
+    --container-background: #000000;
+    --button-background: #5e5e5e;
+    --button-hover-background: #ffa600;
+    --link-color: #ffa200;
+    --link-hover-color: #00d9ff;
+    --button-text-color: #ffffff;
+
+    --warn-color-1:#fcac00;
+    --warn-color-2:#fcbd00;
+    --warn-color-3:#000000;
+    --warn-color-4:#262626;
+    --warn-color-5:#9a9a9a;
+}
+
+body {
+    margin: 0;
+    height: 100dvh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, sans-serif;
+    background: repeating-linear-gradient(
+        135deg,
+        var(--warn-color-1),
+        var(--warn-color-2) 40px,
+        var(--warn-color-3) 40px,
+        var(--warn-color-4) 69px,   
+        var(--warn-color-5) 70px
+    );
+    font-family: "Ubuntu", Arial, Helvetica, sans-serif;
+    padding: 20px;
+    overflow: hidden;
+    color: #ffffff;
+
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--container-background);
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgb(255, 166, 0);
+    padding: 30px;
+    width: 90%;
+    max-width: 400px;
+    margin-bottom: 20px;
+    border: 10px dashed rgb(255, 255, 255);
+}
+
+button, select {
+    padding: 10px 20px;
+    font-size: 16px;
+    color: var(--button-text-color);
+    background-color: var(--button-background);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    width: auto;
+    transition: background-color 0.3s; 
+    margin-top: 20px;
+}
+
+button:hover, select:hover {
+    background-color: var(--button-hover-background);
+}
+a {
+    display: inline-block;
+    /* margin-top: 20px; */
+    text-decoration: none;
+    color: var(--link-color);
+    font-weight: bold;
+    transition: color 0.3s;
+}
+
+a:hover {
+    color: var(--link-hover-color);
+}
+    </style>
+</head>
+<body>
+    <div class="container">    
+        <h1>ERROR: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404">404 Not Found</a></h1>
+        <p>The page you are looking for does not exist.</p>
+        <a href="/">
+            <button>Go back to the homepage</button>
+        </a>
+    </div>
+</body>
+</html>
diff --git a/server.js b/server.js
@@ -80,7 +80,7 @@ app.get('/:id', (req, res) => {
 
     db.get("SELECT target_url FROM urls WHERE custom_id = ?", [id], (err, row) => {
         if (err || !row) {
-            return res.status(404).send('Not found');
+            return res.status(404).sendFile(path.join(__dirname, "/public/status", "404.html"));
         }
         res.redirect(row.target_url);
     });