refactor(www): improve root default pages

2025-12-01 04:22:34 +01:00
parent b52483abaa
commit fc0dce9574
5 changed files with 519 additions and 111 deletions
--- a/www/pages/500.html
+++ b/www/pages/500.html
@@ -0,0 +1,171 @@
+<!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: #020617;
+                --accent: #38bdf8; /* light blue */
+                --accent-soft: rgba(56, 189, 248, 0.16);
+                --text: #e5e7eb;
+                --muted: #9ca3af;
+            }
+
+            * {
+                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,
+                    #0f172a 0,
+                    var(--bg) 60%
+                );
+                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;
+                position: relative;
+            }
+
+            .badge {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                padding: 6px 13px;
+                border-radius: 999px;
+                background: var(--accent-soft);
+                color: var(--accent);
+                font-size: 11px;
+                text-transform: uppercase;
+                letter-spacing: 0.14em;
+                margin-bottom: 22px;
+            }
+
+            .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: 64px;
+                font-weight: 900;
+                letter-spacing: 0.22em;
+                margin-bottom: 14px;
+                text-transform: uppercase;
+                background: linear-gradient(120deg, #e0f2fe, #38bdf8, #818cf8);
+                -webkit-background-clip: text;
+                color: transparent;
+            }
+
+            h1 {
+                font-size: 32px;
+                margin-bottom: 12px;
+            }
+
+            p {
+                font-size: 15px;
+                color: var(--muted);
+                margin-bottom: 26px;
+                line-height: 1.7;
+            }
+
+            .actions {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                max-width: 260px;
+                margin: 0 auto;
+            }
+
+            .btn-primary,
+            .btn-ghost {
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 999px;
+                padding: 11px 18px;
+                font-size: 13px;
+                font-weight: 600;
+                text-decoration: none;
+                border: none;
+                cursor: pointer;
+                transition:
+                    transform 120ms ease,
+                    box-shadow 120ms ease,
+                    background 120ms ease,
+                    color 120ms ease,
+                    border-color 120ms ease;
+                outline: none;
+            }
+
+            .btn-primary {
+                background: linear-gradient(135deg, #38bdf8, #818cf8);
+                color: #020617;
+                box-shadow: 0 12px 26px rgba(56, 189, 248, 0.5);
+            }
+
+            .btn-primary:hover {
+                transform: translateY(-1px) scale(1.01);
+                box-shadow: 0 16px 34px rgba(56, 189, 248, 0.6);
+            }
+
+            .btn-ghost {
+                background: transparent;
+                color: var(--muted);
+                border: 1px solid rgba(148, 163, 184, 0.5);
+            }
+
+            .btn-ghost:hover {
+                background: rgba(15, 23, 42, 0.9);
+                color: var(--text);
+                border-color: rgba(148, 163, 184, 0.85);
+            }
+
+            @media (max-width: 480px) {
+                .code {
+                    font-size: 52px;
+                }
+                h1 {
+                    font-size: 26px;
+                }
+                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>