File: //tmp/debug_deleted_check.txt
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>404 • Panomity GmbH</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#0b1020" />
<style>
:root{
--bg0:#070a14;
--bg1:#0b1020;
--card: rgba(255,255,255,.06);
--card2: rgba(255,255,255,.09);
--text: rgba(255,255,255,.92);
--muted: rgba(255,255,255,.66);
--muted2: rgba(255,255,255,.48);
--stroke: rgba(255,255,255,.12);
--good: #7CFFB2;
--warn: #FFD37C;
--bad: #FF7CB1;
--a: #8CE7FF;
--b: #C7A7FF;
--c: #7CFFDA;
--shadow: 0 24px 80px rgba(0,0,0,.55);
--radius: 22px;
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
margin:0;
font-family: var(--font);
color: var(--text);
background:
radial-gradient(1200px 800px at 12% 18%, rgba(140,231,255,.18), transparent 55%),
radial-gradient(900px 700px at 82% 28%, rgba(199,167,255,.16), transparent 55%),
radial-gradient(900px 800px at 62% 86%, rgba(124,255,218,.12), transparent 60%),
linear-gradient(180deg, var(--bg0), var(--bg1));
overflow-x:hidden;
}
/* Subtle animated “AI noise grid” */
.grid{
position: fixed; inset: 0;
background:
linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 56px 56px;
opacity: .08;
mask-image: radial-gradient( circle at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 78% );
pointer-events:none;
animation: drift 18s linear infinite;
transform-origin: center;
}
@keyframes drift{
0% { transform: translate3d(0,0,0) scale(1.02); }
50% { transform: translate3d(10px,-14px,0) scale(1.02); }
100% { transform: translate3d(0,0,0) scale(1.02); }
}
header{
max-width: 1100px;
margin: 0 auto;
padding: 24px 20px 0;
display:flex;
align-items:center;
justify-content: space-between;
gap: 16px;
position: relative;
z-index: 2;
}
.brand{
display:flex;
align-items:center;
gap: 12px;
text-decoration:none;
color: var(--text);
}
.logo{
width: 40px; height: 40px;
border-radius: 12px;
background:
radial-gradient(circle at 30% 30%, rgba(140,231,255,.95), rgba(140,231,255,.15) 55%, transparent 70%),
radial-gradient(circle at 72% 62%, rgba(199,167,255,.9), rgba(199,167,255,.12) 55%, transparent 70%),
rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
position: relative;
overflow:hidden;
}
.logo::after{
content:"";
position:absolute; inset:-40%;
background: conic-gradient(from 140deg, rgba(140,231,255,.0), rgba(140,231,255,.22), rgba(199,167,255,.22), rgba(124,255,218,.18), rgba(140,231,255,.0));
animation: spin 8s linear infinite;
opacity:.9;
}
@keyframes spin{ to{ transform: rotate(360deg);} }
.brand strong{
font-size: 14px;
letter-spacing: .2px;
font-weight: 650;
}
.brand small{
display:block;
font-size: 12px;
color: var(--muted2);
margin-top: 2px;
letter-spacing:.2px;
}
.pill{
display:flex;
align-items:center;
gap: 10px;
padding: 10px 12px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: var(--muted);
font-size: 12px;
line-height: 1;
white-space: nowrap;
user-select:none;
}
.dot{
width: 8px; height: 8px; border-radius:999px;
background: var(--warn);
box-shadow: 0 0 0 5px rgba(255,211,124,.13);
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{ transform: scale(1); opacity: .9; }
50%{ transform: scale(1.14); opacity: 1; }
}
main{
max-width: 1100px;
margin: 0 auto;
padding: 26px 20px 46px;
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: 22px;
align-items: stretch;
position: relative;
z-index: 2;
}
@media (max-width: 940px){
main{ grid-template-columns: 1fr; }
}
.card{
background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.05));
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow:hidden;
position: relative;
}
.card::before{
content:"";
position:absolute; inset:-2px;
background: radial-gradient(700px 280px at 22% 12%, rgba(140,231,255,.22), transparent 60%),
radial-gradient(640px 260px at 72% 18%, rgba(199,167,255,.18), transparent 62%),
radial-gradient(700px 280px at 44% 110%, rgba(124,255,218,.12), transparent 60%);
opacity: .95;
pointer-events:none;
filter: blur(0px);
}
.card > *{ position: relative; z-index: 1; }
.hero{
padding: 26px 24px 22px;
}
@media (max-width: 500px){ .hero{ padding: 22px 18px; } }
.kicker{
display:flex; flex-wrap:wrap;
gap: 10px 10px;
align-items:center;
margin-bottom: 14px;
}
.tag{
font-size: 12px;
color: rgba(255,255,255,.75);
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.14);
padding: 8px 10px;
border-radius: 999px;
display:inline-flex;
align-items:center;
gap: 8px;
user-select:none;
}
.tag b{ font-weight: 650; color: rgba(255,255,255,.88); }
.chip{
font-size: 12px;
color: rgba(255,255,255,.78);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
padding: 8px 10px;
border-radius: 999px;
display:inline-flex;
align-items:center;
gap: 8px;
user-select:none;
}
h1{
margin: 0;
font-size: clamp(34px, 4.2vw, 54px);
letter-spacing: -0.8px;
line-height: 1.05;
}
.sub{
margin: 12px 0 18px;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
max-width: 62ch;
}
.actions{
display:flex;
gap: 12px;
flex-wrap: wrap;
align-items:center;
margin-top: 18px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 10px;
padding: 12px 14px;
border-radius: 14px;
text-decoration:none;
font-weight: 650;
font-size: 14px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.92);
transition: transform .12s ease, background .12s ease, border-color .12s ease;
user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn.primary{
background: linear-gradient(135deg, rgba(140,231,255,.22), rgba(199,167,255,.18), rgba(124,255,218,.14));
border-color: rgba(255,255,255,.22);
}
.btn.ghost{
background: rgba(0,0,0,.18);
}
.hint{
display:flex;
align-items:center;
gap: 10px;
font-size: 12px;
color: var(--muted2);
margin-top: 12px;
}
/* Right panel: “AI console” */
.console{
padding: 18px;
display:flex;
flex-direction: column;
gap: 14px;
}
.consoleTop{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
background: rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
}
.lights{ display:flex; gap:8px; align-items:center; }
.light{ width:10px; height:10px; border-radius:999px; opacity:.95; }
.light.r{ background: rgba(255,124,177,.9); box-shadow: 0 0 0 4px rgba(255,124,177,.12); }
.light.y{ background: rgba(255,211,124,.92); box-shadow: 0 0 0 4px rgba(255,211,124,.12); }
.light.g{ background: rgba(124,255,178,.9); box-shadow: 0 0 0 4px rgba(124,255,178,.12); }
.consoleTitle{
font-size: 12px;
color: rgba(255,255,255,.76);
letter-spacing:.2px;
user-select:none;
}
.terminal{
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
padding: 14px 14px 12px;
min-height: 250px;
overflow: hidden;
position: relative;
}
.lines{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size: 12.5px;
line-height: 1.6;
color: rgba(255,255,255,.86);
margin: 0;
white-space: pre-wrap;
}
.muted{ color: rgba(255,255,255,.55); }
.ok{ color: var(--good); }
.warn{ color: var(--warn); }
.bad{ color: var(--bad); }
.cursor{
display:inline-block;
width: 8px;
height: 14px;
background: rgba(255,255,255,.82);
vertical-align: -2px;
margin-left: 4px;
border-radius: 2px;
animation: blink 1s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }
.promptRow{
display:flex;
gap: 10px;
align-items: stretch;
margin-top: 12px;
}
.input{
flex:1;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.9);
border-radius: 14px;
padding: 12px 12px;
font-size: 13px;
outline: none;
}
.input::placeholder{ color: rgba(255,255,255,.38); }
.miniBtn{
width: 46px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.92);
font-weight: 800;
cursor: pointer;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.miniBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.miniBtn:active{ transform: translateY(0px) scale(.99); }
/* Bottom bar */
footer{
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 26px;
color: rgba(255,255,255,.50);
font-size: 12px;
position: relative;
z-index: 2;
display:flex;
gap: 12px;
justify-content: space-between;
flex-wrap: wrap;
}
.footLinks{
display:flex;
gap: 12px;
flex-wrap: wrap;
align-items:center;
}
.footLinks a{
color: rgba(255,255,255,.62);
text-decoration: none;
border-bottom: 1px dotted rgba(255,255,255,.22);
}
.footLinks a:hover{ color: rgba(255,255,255,.82); border-bottom-color: rgba(255,255,255,.36); }
/* Tiny floating “model bubble” */
.bubble{
position:absolute;
right: -22px;
top: -22px;
width: 110px;
height: 110px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, rgba(140,231,255,.22), rgba(140,231,255,0) 58%),
radial-gradient(circle at 70% 60%, rgba(199,167,255,.20), rgba(199,167,255,0) 60%),
rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
filter: blur(.0px);
transform: rotate(12deg);
opacity: .9;
pointer-events:none;
}
.bubble::after{
content:"404";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-weight: 850;
font-size: 28px;
letter-spacing: -0.6px;
color: rgba(255,255,255,.82);
text-shadow: 0 10px 30px rgba(0,0,0,.55);
}
/* Accessibility */
.sr-only{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap;border:0;
}
</style>
</head>
<body>
<div class="grid" aria-hidden="true"></div>
<header>
<a class="brand" href="https://panomity.com" aria-label="Go to panomity.com">
<div class="logo" aria-hidden="true"></div>
<div>
<strong>Panomity GmbH</strong>
<small>Private AI. Real work. No hallucinations, except this page.</small>
</div>
</a>
<div class="pill" role="status" aria-live="polite">
<span class="dot" aria-hidden="true"></span>
<span>Model status: <b style="color: rgba(255,255,255,.86); font-weight:650;">confidently wrong</b> • route not found</span>
</div>
</header>
<main>
<!-- Left: Hero -->
<section class="card hero">
<div class="bubble" aria-hidden="true"></div>
<div class="kicker">
<span class="tag" title="HTTP status">
<span aria-hidden="true">🧠</span>
<b>404</b> not found
</span>
<span class="chip" id="pathChip" title="Requested path">
<span aria-hidden="true">📍</span>
<span class="muted">requested:</span>
<span id="pathText">/this/page/does/not/exist</span>
</span>
<span class="chip" id="confidenceChip" title="Fake AI confidence score">
<span aria-hidden="true">🎲</span>
<span class="muted">confidence:</span>
<span id="confidenceText">97%</span>
</span>
</div>
<h1>Our AI tried to generate this page.</h1>
<p class="sub">
It produced a highly plausible answer, backed by zero evidence.
Classic. The link you followed doesn’t exist, but the model is already preparing a 12-step explanation.
</p>
<div class="actions">
<a class="btn primary" href="https://panomity.com">
<span aria-hidden="true">↩︎</span>
Back to panomity.com
</a>
<a class="btn ghost" href="javascript:history.back()">
<span aria-hidden="true">⟵</span>
Undo reality
</a>
<button class="btn" type="button" id="regenBtn">
<span aria-hidden="true">✨</span>
Regenerate a better excuse
</button>
</div>
<div class="hint">
<span aria-hidden="true">💡</span>
<span>
Pro tip: if you meant to find something, try the homepage. If you meant to break something, congratulations.
</span>
</div>
</section>
<!-- Right: AI Console -->
<aside class="card console" aria-label="AI console">
<div class="consoleTop">
<div class="lights" aria-hidden="true">
<span class="light r"></span><span class="light y"></span><span class="light g"></span>
</div>
<div class="consoleTitle">panomity://router • inference log</div>
</div>
<div class="terminal" role="region" aria-label="Inference output">
<pre class="lines" id="terminalLines"></pre>
</div>
<div class="promptRow" aria-label="Prompt controls">
<label class="sr-only" for="promptInput">Prompt</label>
<input class="input" id="promptInput" type="text" spellcheck="false"
placeholder='Try: "find the page", "be honest", or "stop hallucinating"' />
<button class="miniBtn" id="sendBtn" type="button" aria-label="Send prompt">↵</button>
</div>
</aside>
</main>
<footer>
<div>© <span id="year"></span> Panomity GmbH • This 404 is generated by humans, the safest model available.</div>
<div class="footLinks">
<a href="https://panomity.com">Homepage</a>
<a href="https://support.panomity.com" id="supportLink">Support</a>
</div>
</footer>
<script>
(function(){
const $ = (id) => document.getElementById(id);
// Display requested path (no server variables needed)
const path = (location.pathname || "/") + (location.search || "");
$("pathText").textContent = path || "/";
$("year").textContent = new Date().getFullYear();
// “AI confidence” (fake, of course)
const confidence = 82 + Math.floor(Math.random() * 18); // 82–99
$("confidenceText").textContent = confidence + "%";
// Witty log generator
const excuses = [
"I searched the latent space. It searched back.",
"The page exists in a parallel token stream.",
"This URL was removed during a dataset cleanup. Along with common sense.",
"The router asked the model. The model asked the router. Nobody asked the database.",
"I found the page, but it refused to be evaluated.",
"I’m not lost, I’m exploring. (The server disagrees.)",
"The link is correct. Reality is outdated.",
"I can’t find it, but I can confidently explain it.",
"404: page not found. 200: feelings not found.",
"The path is missing. The confidence is thriving."
];
const actions = [
"Retrying with higher temperature…",
"Switching to 'truthy' mode…",
"Reducing hallucination coefficient…",
"Enabling evidence-based routing…",
"Consulting the sacred sitemap…",
"Applying a small amount of humility…",
"Re-ranking candidates by existence…"
];
const findings = [
{ label: "HTTP", value: "404 Not Found", cls: "bad" },
{ label: "Route", value: "no matching handler", cls: "warn" },
{ label: "Model", value: "helpful, harmless, occasionally dramatic", cls: "ok" }
];
function now(){
const d = new Date();
const hh = String(d.getHours()).padStart(2,"0");
const mm = String(d.getMinutes()).padStart(2,"0");
const ss = String(d.getSeconds()).padStart(2,"0");
return `${hh}:${mm}:${ss}`;
}
function pick(arr){ return arr[Math.floor(Math.random()*arr.length)]; }
function formatLog(promptText){
const a = pick(actions);
const e = pick(excuses);
const lines = [];
lines.push(`[${now()}] ${a}`);
lines.push(`[${now()}] requested_path: "${path}"`);
lines.push(`[${now()}] prompt: "${promptText}"`);
lines.push(`[${now()}] verdict: <${pick(["nonexistent","imaginary","hypothetical","aspirational"])}>`);
lines.push(`[${now()}] note: ${e}`);
lines.push(`[${now()}] suggestion: go to https://panomity.com (it actually exists)`);
lines.push("");
lines.push(`diagnostics:`);
for(const f of findings){
lines.push(` - ${f.label}: %${f.cls}%${f.value}%reset%`);
}
return lines.join("\n");
}
// Color tokens inside the monospace block
function colorize(text){
return text
.replaceAll("%bad%", "\x1b[31m")
.replaceAll("%warn%", "\x1b[33m")
.replaceAll("%ok%", "\x1b[32m")
.replaceAll("%reset%", "\x1b[0m");
}
// Render ANSI-ish colors without a library
function renderANSI(preEl, text){
// Minimal: convert our few ANSI codes to spans
const ansi = colorize(text);
const parts = [];
let i = 0;
let cls = "";
while(i < ansi.length){
const esc = ansi.indexOf("\x1b[", i);
if(esc === -1){
parts.push({cls, s: ansi.slice(i)});
break;
}
if(esc > i) parts.push({cls, s: ansi.slice(i, esc)});
const end = ansi.indexOf("m", esc);
const code = ansi.slice(esc+2, end);
i = end + 1;
if(code === "31") cls = "bad";
else if(code === "33") cls = "warn";
else if(code === "32") cls = "ok";
else if(code === "0") cls = "";
}
// Build DOM
preEl.innerHTML = "";
for(const p of parts){
if(!p.s) continue;
if(p.cls){
const span = document.createElement("span");
span.className = p.cls;
span.textContent = p.s;
preEl.appendChild(span);
}else{
preEl.appendChild(document.createTextNode(p.s));
}
}
// Cursor
const cursor = document.createElement("span");
cursor.className = "cursor";
cursor.setAttribute("aria-hidden","true");
preEl.appendChild(cursor);
}
const terminal = $("terminalLines");
function regen(withPrompt){
const promptText = (withPrompt && withPrompt.trim()) ? withPrompt.trim() : pick([
"be honest",
"find the page",
"stop hallucinating",
"provide evidence",
"use the sitemap",
"return the truth"
]);
const txt = formatLog(promptText);
renderANSI(terminal, txt);
}
// Bind buttons
$("regenBtn").addEventListener("click", () => regen(""));
$("sendBtn").addEventListener("click", () => regen($("promptInput").value));
$("promptInput").addEventListener("keydown", (e) => {
if(e.key === "Enter"){
e.preventDefault();
regen($("promptInput").value);
}
});
// First render
regen("find the page");
})();
</script>
</body>