docs: add animated 404 page

2026-05-16 00:41:14 +02:00
parent 0f92203834
commit 9c2a704c29
2 changed files with 149 additions and 1 deletions
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Page not found — Pi Web</title>
+    <meta name="description" content="The Pi Web page you requested does not exist." />
+    <meta name="robots" content="noindex" />
+    <meta property="og:title" content="Page not found — Pi Web" />
+    <meta property="og:image" content="/assets/pi-web-banner.png" />
+    <link rel="icon" href="data:," />
+    <script>
+      (() => {
+        const theme = window.localStorage.getItem("pi-web-theme");
+        if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
+      })();
+    </script>
+    <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=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body class="error-page">
+    <header class="site-header">
+      <nav class="container nav" aria-label="Main navigation">
+        <a class="brand" href="/" aria-label="Pi Web home">Pi Web</a>
+        <div class="nav-links">
+          <a href="/">Home</a>
+          <a href="/install.html">Install</a>
+          <a href="/faq.html">FAQ</a>
+          <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="Pi Web on GitHub">
+            <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
+              />
+            </svg>
+            <span>GitHub</span>
+          </a>
+          <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
+            <span data-theme-icon aria-hidden="true">◐</span>
+            <span data-theme-label>Theme</span>
+          </button>
+        </div>
+      </nav>
+    </header>
+
+    <main>
+      <section class="error-hero" aria-labelledby="not-found-title">
+        <div class="container">
+          <p class="error-code"><span class="pulse"></span> 404 · hallucinated route</p>
+          <h1 id="not-found-title" class="error-title" aria-label="Your agent lied to you. This page does not exist.">
+            <span class="error-title-line intro-target" aria-hidden="true">
+              <span class="intro-word" style="--i: 0">Your</span>
+              <span class="intro-word" style="--i: 1">agent</span>
+              <span class="intro-word" style="--i: 2; --intro-color: var(--danger)">lied</span>
+              <span class="intro-word" style="--i: 3">to</span>
+              <span class="intro-word" style="--i: 4">you.</span>
+            </span>
+            <span class="error-title-line intro-target" aria-hidden="true">
+              <span class="intro-word" style="--i: 5">This</span>
+              <span class="intro-word" style="--i: 6">page</span>
+              <span class="intro-word" style="--i: 7">does</span>
+              <span class="intro-word" style="--i: 8; --intro-color: var(--brand-3)">not</span>
+              <span class="intro-word" style="--i: 9">exist.</span>
+            </span>
+          </h1>
+          <p class="error-copy">The route was hallucinated, deleted, or never shipped.</p>
+          <div class="error-actions">
+            <a class="button primary" href="/">Back to Pi Web</a>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container footer-inner">
+        <span>Pi Web · remote control for persistent Pi Coding Agent sessions.</span>
+        <div class="footer-links">
+          <a href="/install.html">Install</a>
+          <a href="/faq.html">FAQ</a>
+          <a href="https://www.npmjs.com/package/@jmfederico/pi-web">npm</a>
+        </div>
+      </div>
+    </footer>
+    <script src="/site.js"></script>
+  </body>
+</html>