Archived
docs: add animated 404 page
This commit is contained in:
Federico Jaramillo Martinez
@@ -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>
|
||||||
+58
-1
@@ -52,7 +52,12 @@ body::after {
|
|||||||
.home-page .hero-actions,
|
.home-page .hero-actions,
|
||||||
.home-page .hero-stats,
|
.home-page .hero-stats,
|
||||||
.home-page .terminal,
|
.home-page .terminal,
|
||||||
.home-page main > section:not(.hero) {
|
.home-page main > section:not(.hero),
|
||||||
|
.error-page .site-header,
|
||||||
|
.error-page .site-footer,
|
||||||
|
.error-page .error-code,
|
||||||
|
.error-page .error-copy,
|
||||||
|
.error-page .error-actions {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: page-reveal 700ms ease-out 2.45s forwards;
|
animation: page-reveal 700ms ease-out 2.45s forwards;
|
||||||
}
|
}
|
||||||
@@ -118,6 +123,11 @@ body::after {
|
|||||||
.home-page .hero-stats,
|
.home-page .hero-stats,
|
||||||
.home-page .terminal,
|
.home-page .terminal,
|
||||||
.home-page main > section:not(.hero),
|
.home-page main > section:not(.hero),
|
||||||
|
.error-page .site-header,
|
||||||
|
.error-page .site-footer,
|
||||||
|
.error-page .error-code,
|
||||||
|
.error-page .error-copy,
|
||||||
|
.error-page .error-actions,
|
||||||
.intro-word {
|
.intro-word {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: none;
|
transform: none;
|
||||||
@@ -611,6 +621,53 @@ code .comment,
|
|||||||
padding: 76px 0 26px;
|
padding: 76px 0 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error-page main {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
min-height: calc(100vh - 175px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-hero {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: clamp(64px, 10vw, 122px) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 0 0 22px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: var(--panel);
|
||||||
|
color: var(--muted);
|
||||||
|
font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
max-width: 980px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title-line {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-copy {
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 28px 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: clamp(1.12rem, 2vw, 1.36rem);
|
||||||
|
line-height: 1.62;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.doc-layout {
|
.doc-layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 260px minmax(0, 1fr);
|
grid-template-columns: 260px minmax(0, 1fr);
|
||||||
|
|||||||
Reference in New Issue
Block a user