From b2b1de6495bde1c5004f96dffb98e17db8d465c7 Mon Sep 17 00:00:00 2001
From: Francesco <inbox@francescorocca.me>
Date: Thu, 12 Mar 2026 01:21:18 +0100
Subject: [PATCH] refactor(www): delete 500 and use a new modern look

---
 www/favicon.ico    | Bin 2825 -> 0 bytes
 www/index.html     | 262 ++++++++++++++++++---------------------------
 www/pages/404.html | 196 +++++++++++++++------------------
 www/pages/500.html | 116 --------------------
 4 files changed, 196 insertions(+), 378 deletions(-)
 delete mode 100644 www/favicon.ico
 delete mode 100644 www/pages/500.html

diff --git a/www/favicon.ico b/www/favicon.ico
deleted file mode 100644
index f9589d0e6b64a3b53f4d5e6532cd4599d441c482..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2825
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
bL@f9}y4yuGwM(fT00000NkvXXu0mjfQG#5F

diff --git a/www/index.html b/www/index.html
index caee79a..96ed865 100644
--- a/www/index.html
+++ b/www/index.html
@@ -4,199 +4,151 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>cws • home</title>
-        <link rel="icon" href="/favicon.ico" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
-            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap"
+            href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=DM+Sans:wght@300;400&display=swap"
             rel="stylesheet"
         />
         <style>
-            :root {
-                --bg: #f3f4f6;
-                --accent: #3b82f6;
-                --accent-soft: rgba(59, 130, 246, 0.08);
-                --text: #0f172a;
-                --muted: #6b7280;
-            }
-
-            * {
+            *,
+            *::before,
+            *::after {
                 box-sizing: border-box;
                 margin: 0;
                 padding: 0;
             }
 
-            body {
-                min-height: 100vh;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background:
-                    radial-gradient(
-                        circle at top left,
-                        #dbeafe 0,
-                        transparent 50%
-                    ),
-                    radial-gradient(
-                        circle at bottom right,
-                        #e5e7eb 0,
-                        transparent 55%
-                    ),
-                    var(--bg);
-                font-family:
-                    "Montserrat",
-                    system-ui,
-                    -apple-system,
-                    BlinkMacSystemFont,
-                    "Segoe UI",
-                    sans-serif;
-                color: var(--text);
-                font-size: 18px; /* increased base text size */
+            :root {
+                --bg: #0a0a0a;
+                --fg: #f0ede8;
+                --muted: #4a4a4a;
+                --line: #1e1e1e;
+                --accent: #e8e0d0;
             }
 
-            .wrapper {
+            body {
+                background: var(--bg);
+                color: var(--fg);
+                font-family: "DM Sans", sans-serif;
+                font-weight: 300;
+                min-height: 100vh;
+                display: grid;
+                place-items: center;
+                padding: 40px 24px;
+                overflow: hidden;
+            }
+
+            /* subtle grid */
+            body::before {
+                content: "";
+                position: fixed;
+                inset: 0;
+                background-image:
+                    linear-gradient(var(--line) 1px, transparent 1px),
+                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
+                background-size: 60px 60px;
+                pointer-events: none;
+                opacity: 0.5;
+            }
+
+            .container {
+                position: relative;
+                max-width: 600px;
+                width: 100%;
+                text-align: center;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
-                gap: 18px;
-                padding: 24px;
-                width: 100%;
-                text-align: left;
+                opacity: 0;
+                transform: translateY(16px);
+                animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
             }
 
-            main {
-                max-width: 560px;
-                width: 100%;
+            @keyframes rise {
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
             }
 
-            .badge {
+            .status {
                 display: inline-flex;
                 align-items: center;
-                gap: 10px;
-                padding: 7px 14px;
-                border-radius: 999px;
-                background: var(--accent-soft);
-                color: var(--accent);
-                font-size: 13px; /* slightly larger */
+                gap: 8px;
+                font-family: "DM Mono", monospace;
+                font-size: 11px;
+                letter-spacing: 0.12em;
                 text-transform: uppercase;
-                letter-spacing: 0.11em;
-                margin-bottom: 20px;
-                font-weight: 600;
+                color: #888;
+                margin-bottom: 40px;
             }
 
-            .badge-dot {
-                width: 9px;
-                height: 9px;
-                border-radius: 999px;
-                background: var(--accent);
-                box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22);
+            .dot {
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                background: #4ade80;
+                box-shadow: 0 0 8px #4ade8099;
+                animation: pulse 2.5s ease-in-out infinite;
+            }
+
+            @keyframes pulse {
+                0%,
+                100% {
+                    opacity: 1;
+                }
+                50% {
+                    opacity: 0.4;
+                }
             }
 
             h1 {
-                font-size: 36px; /* increased */
-                line-height: 1.2;
-                margin-bottom: 8px;
+                font-size: clamp(42px, 8vw, 64px);
+                font-weight: 300;
+                line-height: 1.05;
+                letter-spacing: -0.03em;
+                margin-bottom: 28px;
+                color: var(--fg);
+                white-space: nowrap;
             }
 
-            .highlight {
-                background: linear-gradient(115deg, #38bdf8, #3b82f6, #818cf8);
-                -webkit-background-clip: text;
-                color: transparent;
+            h1 em {
+                font-style: normal;
+                font-family: "DM Mono", monospace;
+                font-weight: 300;
+                color: var(--muted);
+            }
+
+            .divider {
+                width: 32px;
+                height: 1px;
+                background: var(--muted);
+                margin-bottom: 28px;
+                opacity: 0;
+                animation: rise 0.5s ease 0.5s forwards;
             }
 
             p {
-                font-size: 18px; /* increased */
-                color: var(--muted);
-                margin-bottom: 16px;
-                line-height: 1.7;
-            }
-
-            .lead {
-                font-size: 19px; /* increased */
-                margin-bottom: 10px;
-            }
-
-            .bg-orbit {
-                position: absolute;
-                width: 240px;
-                height: 240px;
-                border-radius: 50%;
-                border: 1px dashed rgba(148, 163, 184, 0.5);
-                top: -100px;
-                right: -60px;
-                opacity: 0.7;
-                pointer-events: none;
-            }
-
-            .bg-orbit-dot {
-                position: absolute;
-                width: 9px;
-                height: 9px;
-                border-radius: 50%;
-                background: #38bdf8;
-                box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
-                top: 32%;
-                left: 12%;
-            }
-
-            footer.icon-credit {
-                font-size: 13px; /* increased */
-                color: var(--muted);
-                text-align: center;
-                opacity: 0.9;
-            }
-
-            footer.icon-credit a {
-                color: var(--muted);
-                font-weight: 500;
-                text-decoration: none;
-            }
-
-            footer.icon-credit a:hover {
-                color: var(--accent);
-                text-decoration: underline;
-            }
-
-            @media (max-width: 480px) {
-                h1 {
-                    font-size: 30px;
-                }
-
-                .lead {
-                    font-size: 17px;
-                }
+                font-size: 15px;
+                line-height: 1.8;
+                color: #999;
             }
         </style>
     </head>
-
     <body>
-        <div class="bg-orbit">
-            <div class="bg-orbit-dot"></div>
-        </div>
+        <div class="container">
+            <div class="status">
+                <span class="dot"></span>
+                running
+            </div>
 
-        <div class="wrapper">
-            <main>
-                <div class="badge">
-                    <span class="badge-dot"></span>
-                    <span>cws is running</span>
-                </div>
+            <h1>Hello from <em>cws</em></h1>
 
-                <h1>Hello from <span class="highlight">cws</span>!</h1>
-                <p>
-                    You’re seeing the default homepage served by
-                    <strong>cws</strong>. Replace this file or point your
-                    virtual host to a different root directory to serve your own
-                    content.
-                </p>
-            </main>
+            <div class="divider"></div>
 
-            <footer class="icon-credit">
-                <a target="_blank" href="https://icons8.com/icon/38796/linux"
-                    >Linux</a
-                >
-                icon by
-                <a target="_blank" href="https://icons8.com">Icons8</a>
-            </footer>
+            <p>
+                Default homepage. Replace this file or point your virtual host
+                to a different root to serve your own content.
+            </p>
         </div>
     </body>
 </html>
diff --git a/www/pages/404.html b/www/pages/404.html
index 38a1368..620aed8 100644
--- a/www/pages/404.html
+++ b/www/pages/404.html
@@ -2,146 +2,128 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title>404 • Page not found</title>
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>404 • Not Found</title>
+        <link
+            href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=DM+Sans:wght@300;400&display=swap"
+            rel="stylesheet"
+        />
         <style>
-            :root {
-                --bg: #f9fafb;
-                --accent: #f97316;
-                --accent-soft: rgba(249, 115, 22, 0.14);
-                --text: #0f172a;
-                --muted: #6b7280;
-            }
-
-            * {
+            *,
+            *::before,
+            *::after {
                 box-sizing: border-box;
                 margin: 0;
                 padding: 0;
             }
 
-            body {
-                min-height: 100vh;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background:
-                    radial-gradient(circle at top, #ffedd5 0, transparent 55%),
-                    var(--bg);
-                font-family:
-                    system-ui,
-                    -apple-system,
-                    BlinkMacSystemFont,
-                    "Segoe UI",
-                    sans-serif;
-                color: var(--text);
-                padding: 16px;
+            :root {
+                --bg: #0a0a0a;
+                --fg: #f0ede8;
+                --muted: #4a4a4a;
+                --line: #1e1e1e;
             }
 
-            .wrap {
-                max-width: 520px;
+            body {
+                background: var(--bg);
+                color: var(--fg);
+                font-family: "DM Sans", sans-serif;
+                font-weight: 300;
+                min-height: 100vh;
+                display: grid;
+                place-items: center;
+                padding: 40px 24px;
+                overflow: hidden;
+            }
+
+            body::before {
+                content: "";
+                position: fixed;
+                inset: 0;
+                background-image:
+                    linear-gradient(var(--line) 1px, transparent 1px),
+                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
+                background-size: 60px 60px;
+                pointer-events: none;
+                opacity: 0.5;
+            }
+
+            .container {
+                position: relative;
+                max-width: 600px;
                 width: 100%;
                 text-align: center;
-            }
-
-            .badge {
-                display: inline-flex;
+                display: flex;
+                flex-direction: column;
                 align-items: center;
-                gap: 8px;
-                padding: 6px 12px;
-                border-radius: 999px;
-                background: var(--accent-soft);
-                color: var(--accent);
-                font-size: 11px;
-                text-transform: uppercase;
-                letter-spacing: 0.12em;
-                margin-bottom: 20px;
+                opacity: 0;
+                transform: translateY(16px);
+                animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
             }
 
-            .badge-dot {
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background: var(--accent);
-                box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.35);
+            @keyframes rise {
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
             }
 
             .code {
-                font-size: 60px;
-                font-weight: 900;
-                letter-spacing: 0.18em;
-                margin-bottom: 10px;
-                text-transform: uppercase;
-                background: linear-gradient(120deg, #fbbf24, #f97316, #ec4899);
-                -webkit-background-clip: text;
-                color: transparent;
+                font-family: "DM Mono", monospace;
+                font-size: clamp(80px, 18vw, 140px);
+                font-weight: 300;
+                letter-spacing: -0.04em;
+                line-height: 1;
+                color: #1e1e1e;
+                margin-bottom: 32px;
+                user-select: none;
             }
 
             h1 {
-                font-size: 28px;
-                margin-bottom: 10px;
+                font-size: clamp(22px, 5vw, 32px);
+                font-weight: 300;
+                letter-spacing: -0.02em;
+                color: var(--fg);
+                white-space: nowrap;
+                margin-bottom: 16px;
+            }
+
+            .divider {
+                width: 32px;
+                height: 1px;
+                background: var(--muted);
+                margin-bottom: 16px;
             }
 
             p {
                 font-size: 15px;
-                color: var(--muted);
-                margin-bottom: 24px;
-                line-height: 1.6;
+                line-height: 1.8;
+                color: #999;
             }
 
-            .actions {
-                display: flex;
-                justify-content: center;
-            }
-
-            .btn-primary {
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                border-radius: 999px;
-                padding: 10px 18px;
-                font-size: 13px;
-                font-weight: 600;
+            .back {
+                margin-top: 40px;
+                font-family: "DM Mono", monospace;
+                font-size: 11px;
+                letter-spacing: 0.12em;
+                text-transform: uppercase;
+                color: #555;
                 text-decoration: none;
-                border: none;
-                cursor: pointer;
-                background: linear-gradient(135deg, #f97316, #ec4899);
-                color: #fff7ed;
-                box-shadow: 0 10px 22px rgba(236, 72, 153, 0.3);
-                transition:
-                    transform 120ms ease,
-                    box-shadow 120ms ease,
-                    filter 120ms ease;
+                transition: color 0.2s;
             }
 
-            .btn-primary:hover {
-                transform: translateY(-1px);
-                box-shadow: 0 14px 30px rgba(236, 72, 153, 0.4);
-                filter: brightness(1.03);
-            }
-
-            @media (max-width: 480px) {
-                .code {
-                    font-size: 50px;
-                }
-                h1 {
-                    font-size: 24px;
-                }
-                p {
-                    font-size: 14px;
-                }
+            .back:hover {
+                color: var(--fg);
             }
         </style>
     </head>
     <body>
-        <div class="wrap">
-            <div class="badge">
-                <span class="badge-dot"></span>
-                <span>Page not found</span>
-            </div>
-
+        <div class="container">
             <div class="code">404</div>
-            <h1>You’ve reached an empty corner of the internet.</h1>
-            <p>The page you’re looking for doesn’t exist.</p>
+            <h1>Page not found</h1>
+            <div class="divider"></div>
+            <p>The page you're looking for doesn't exist.</p>
+            <a class="back" href="/">← back to home</a>
         </div>
     </body>
 </html>
diff --git a/www/pages/500.html b/www/pages/500.html
deleted file mode 100644
index 9d25968..0000000
--- a/www/pages/500.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <title>500 • Internal server error</title>
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <style>
-            :root {
-                --bg: #f9fafb;
-                --accent: #38bdf8;
-                --accent-soft: rgba(56, 189, 248, 0.14);
-                --text: #0f172a;
-                --muted: #6b7280;
-            }
-
-            * {
-                box-sizing: border-box;
-                margin: 0;
-                padding: 0;
-            }
-
-            body {
-                min-height: 100vh;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background:
-                    radial-gradient(circle at top, #ffedd5 0, transparent 55%),
-                    var(--bg);
-                font-family:
-                    system-ui,
-                    -apple-system,
-                    BlinkMacSystemFont,
-                    "Segoe UI",
-                    sans-serif;
-                color: var(--text);
-                padding: 16px;
-            }
-
-            .wrap {
-                max-width: 520px;
-                width: 100%;
-                text-align: center;
-            }
-
-            .badge {
-                display: inline-flex;
-                align-items: center;
-                gap: 8px;
-                padding: 6px 12px;
-                border-radius: 999px;
-                background: var(--accent-soft);
-                color: var(--accent);
-                font-size: 11px;
-                text-transform: uppercase;
-                letter-spacing: 0.12em;
-                margin-bottom: 20px;
-            }
-
-            .badge-dot {
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background: var(--accent);
-                box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.35);
-            }
-
-            .code {
-                font-size: 60px;
-                font-weight: 900;
-                letter-spacing: 0.18em;
-                margin-bottom: 10px;
-                text-transform: uppercase;
-                background: linear-gradient(120deg, #bae6fd, #38bdf8, #818cf8);
-                -webkit-background-clip: text;
-                color: transparent;
-            }
-
-            h1 {
-                font-size: 28px;
-                margin-bottom: 10px;
-            }
-
-            p {
-                font-size: 15px;
-                color: var(--muted);
-                margin-bottom: 24px;
-                line-height: 1.6;
-            }
-
-            @media (max-width: 480px) {
-                .code {
-                    font-size: 50px;
-                }
-                h1 {
-                    font-size: 24px;
-                }
-                p {
-                    font-size: 14px;
-                }
-            }
-        </style>
-    </head>
-    <body>
-        <div class="wrap">
-            <div class="badge">
-                <span class="badge-dot"></span>
-                <span>Internal server error</span>
-            </div>
-
-            <div class="code">500</div>
-            <h1>Something went wrong on our side.</h1>
-            <p>Try again in a moment or head back home while we fix things.</p>
-        </div>
-    </body>
-</html>