From 0b0bff14c35f185d9b08a92dace226fe19221442 Mon Sep 17 00:00:00 2001
From: 0n1cOn3 <0n1cOn3@gmx.ch>
Date: Thu, 13 Feb 2025 08:04:11 +0100
Subject: [PATCH] Add 404 error page

---
 404/404.html  |  73 +++++++++++++++++++++++++++
 404/index.css | 136 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 209 insertions(+)
 create mode 100644 404/404.html
 create mode 100644 404/index.css
diff --git a/404/404.html b/404/404.html
new file mode 100644
index 0000000..b052810
--- /dev/null
+++ b/404/404.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="ASCII" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Error | LAINLOUNGE</title>
+    <link rel="stylesheet" href="./index.css" />
+    <meta name="referrer" content="no-referrer">
+</head>
+<body>
+
+    <div class="page">
+
+        <header>
+            <div class="header-flex">
+                <div class="header-left">
+                    <h1>lainlounge.xyz</h1>
+                    <sup class="logoSubline"><i>cold whispers in the wires...</i></sup>
+                    <hr />
+                </div>
+                <div class="header-right">
+                    <sub class="linksSubline">today you might be lost...</sub>
+                    <hr />
+                </div>
+            </div>
+        </header>
+
+        <div class="main-content">
+            <section class="content-left">
+                <h2>Error <span style="color: tomato;">404</span></h2>
+                <p id="error-message">The page you were looking for is lost in the wires.</p>
+                <p><b style="color: tomato;">But hey, don't despair.</b> There are still some places left untouched.</p>
+                <p>
+                    Return to <a href="/">home</a> or tune into <a href="https://share.lainlounge.xyz/public/lainstation">Lainstation</a>.
+                </p>
+            </section>
+        </div>
+
+        <footer>
+            <hr />
+            <hr />
+            <div class="footer-flex">
+                <address class="footer-left">
+                    You can message us through XMPP:<br />
+                    "contact (at) lainlounge (dot) xyz"<br />
+                    <br />
+                    Made with love by the <span style="color: tomato">LAINLOUNGE</span> team<br />
+                    The Web, Earth<br />
+                    <br />
+                    <span style="color: crimson">See you whenever, <em>and God bless</em>.</span>
+                </address>
+                <div class="footer-right">
+                    <p class="footer-note">Original source composed by Hornet and Spectre</p>
+		    <p class="footer-note">Error pages composed by h@x <p/>
+                    <p>LAINLOUNGE.XYZ - WORLDWIDE INTL.</p>
+                    <p>COPYLEFT ALL WRONGS RELEASED</p>
+                    <p>2025 - next month's electricity bill</p>
+                </div>
+            </div>
+            <!-- Easter Egg -->
+            <p class="easter">If you see this page, a Blackrock death squad is rapidly approaching your location.</p>
+            <p class="easter">For help, please contact God.</p>
+            <p class="easter">Psychological support is not available.</p>
+            <p class="easter"><em>Thank you for your sacrifice.</em></p>
+            <p class="easter">...but seriously, go away.</p>
+            <!-- Easter Egg -->
+        </footer>
+
+    </div>
+
+    <noscript><p>JS BS disabled? Nice!</p></noscript>
+</body>
+</html>
diff --git a/404/index.css b/404/index.css
new file mode 100644
index 0000000..95d21b3
--- /dev/null
+++ b/404/index.css
@@ -0,0 +1,136 @@
+:root {
+    --bg: rgb(12, 12, 24);  /* Dark background */
+    --logo: tomato;
+    --text: rgb(120, 120, 164);
+    --fonts: "Courier New";
+}
+
+body {
+    background-color: var(--bg); /* Dark background */
+    margin: 0;
+    font-family: var(--fonts);
+    color: var(--text);
+    padding: 5%;
+    overflow-x: hidden; /* Prevent horizontal overflow */
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    padding-top: 10px;
+}
+
+h1 {
+    font-size: 36px; /* Fixed size */
+    color: var(--logo);
+    margin: 0;
+    padding-top: 10px;
+}
+
+sup, sub {
+    font-size: 18px;
+    color: salmon;
+}
+
+hr {
+    color: crimson;
+    margin-top: -20px;
+}
+
+h2 {
+    font-size: 28px; /* Fixed size */
+    color: tomato;
+}
+
+p {
+    font-size: 20px; /* Fixed size */
+    margin-bottom: 1rem;
+}
+
+a {
+    color: tomato;
+    font-size: 20px; /* Fixed size */
+    text-decoration: none;
+}
+
+a:hover {
+    color: crimson;
+}
+
+footer {
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.footer-flex {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.footer-left, .footer-right {
+    flex: 1;
+}
+
+.footer-note {
+    font-size: 18px;
+    color: salmon;
+}
+
+.easter {
+    color: var(--bg);
+    text-align: right;
+}
+
+.logoSubline, .linksSubline {
+    font-family: var(--fonts);
+    font-size: 18px;
+    color: salmon;
+    text-align: left;
+    display: block;
+    padding-top: 5px; /* Added padding to avoid touching the top */
+}
+
+/* Mobile styles */
+@media (max-width: 1200px) {
+    .header-flex {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+@media (max-width: 768px) {
+    body {
+        padding: 3%;
+    }
+
+    .header-left,
+    .header-right {
+        text-align: left;
+    }
+
+    .footer-flex {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 30px;
+    }
+
+    h2 {
+        font-size: 24px;
+    }
+
+    p, a {
+        font-size: 16px;
+    }
+
+    .footer-note {
+        font-size: 16px;
+    }
+}
