SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/404.php

<?php
declare(strict_types=1);

http_response_code(404);
header('Content-Type: text/html; charset=utf-8');
header('X-Robots-Tag: noindex, nofollow, nosnippet, noarchive');
header('X-Content-Type-Options: nosniff');
header('Referrer-Policy: strict-origin-when-cross-origin');
header('X-Frame-Options: SAMEORIGIN');
header("Permissions-Policy: geolocation=(self), microphone=(), camera=()");
header("Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://www.google-analytics.com; img-src 'self' data: https://www.google-analytics.com; connect-src 'self' https://www.google-analytics.com https://region1.google-analytics.com; font-src 'self' data:; frame-ancestors 'self'; base-uri 'self'; form-action 'self'");

$SIMON_TRACKERS = [
    'ga4_id'              => 'G-S6MEHB4BEY',
    'impact_verification' => 'e8ec6683-663c-421a-a30d-f8c0fe517345',
    'webhook'             => '/connlink/test1/ui/webhook_inbox.php',
    'visit_stream'        => 'visits',
    'pulse_stream'        => 'default',
    'simon_key'           => '',
    'source'              => 'simon-404.php',
];

$GA_ID            = $SIMON_TRACKERS['ga4_id'];
$SHOW_TOOLS_LINK  = true;
$TOOLS_URL        = '/tools/site_map.php';
$RID              = bin2hex(random_bytes(8));
$REASON           = 'not_found';
$SEVERITY         = 'low';
$YEAR             = date('Y');

function simon_clean(string $value): string {
    return trim(str_replace(["\r", "\n", "\0"], ' ', $value));
}

function simon_uri(): string {
    return simon_clean((string)($_SERVER['REQUEST_URI'] ?? ''));
}

function simon_ip(): string {
    foreach ([
        $_SERVER['HTTP_CF_CONNECTING_IP'] ?? '',
        $_SERVER['HTTP_X_REAL_IP'] ?? '',
        $_SERVER['REMOTE_ADDR'] ?? '',
    ] as $candidate) {
        $candidate = trim((string)$candidate);
        if ($candidate !== '' && filter_var($candidate, FILTER_VALIDATE_IP)) {
            return $candidate;
        }
    }

$xff = (string)($_SERVER['HTTP_X_FORWARDED_FOR'] ?? '');
    if ($xff !== '') {
        foreach (explode(',', $xff) as $part) {
            $part = trim($part);
            if ($part !== '' && filter_var($part, FILTER_VALIDATE_IP)) {
                return $part;
            }
        }
    }

return 'unknown';
}

function simon_ndjson_append(string $file, array $row): bool {
    $json = json_encode($row, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
    if ($json === false) {
        return false;
    }
    return @file_put_contents($file, $json . PHP_EOL, FILE_APPEND | LOCK_EX) !== false;
}

$SIMON_EVENT = [
    'rid'        => $RID,
    'event_type' => 'route_not_found',
    'time'       => gmdate('c'),
    'severity'   => $SEVERITY,
    'decision'   => [
        'reason'      => $REASON,
        'status_code' => 404,
    ],
    'request'    => [
        'host'         => simon_clean((string)($_SERVER['HTTP_HOST'] ?? '')),
        'scheme'       => simon_scheme(),
        'method'       => simon_clean((string)($_SERVER['REQUEST_METHOD'] ?? 'GET')),
        'uri'          => simon_uri(),
        'path'         => parse_url(simon_uri(), PHP_URL_PATH) ?: '/',
        'query_string' => simon_clean((string)($_SERVER['QUERY_STRING'] ?? '')),
        'referrer'     => simon_clean((string)($_SERVER['HTTP_REFERER'] ?? '')),
    ],
    'client'     => [
        'ip'          => simon_ip(),
        'user_agent'  => simon_clean((string)($_SERVER['HTTP_USER_AGENT'] ?? '')),
        'fingerprint' => hash('sha256', implode('|', [
            $_SERVER['HTTP_USER_AGENT'] ?? '',
            $_SERVER['HTTP_ACCEPT'] ?? '',
            $_SERVER['HTTP_ACCEPT_LANGUAGE'] ?? '',
            $_SERVER['HTTP_ACCEPT_ENCODING'] ?? '',
        ])),
    ],
    'labels'     => [
        'powered'      => 'SIMON',
        'display_code' => '404',
        'source'       => $SIMON_TRACKERS['source'],
    ],
];

simon_ndjson_append(simon_logs_dir() . '/route_events.ndjson', $SIMON_EVENT);

function h(string $s): string {
    return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/>
<title>404 — Signal Lost · SIMON</title>
<meta name="theme-color" content="#03060f"/>
<meta name="impact-site-verification" value="<?= h($SIMON_TRACKERS['impact_verification']) ?>"/>

<?php if ($GA_ID !== ''): ?>
<script async src="https://www.googletagmanager.com/gtag/js?id=<?= h($GA_ID) ?>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', '<?= h($GA_ID) ?>', {
  send_page_view: true,
  page_title: 'SIMON 404 · Signal Lost',
  page_path: location.pathname + location.search
});
gtag('event', 'simon_404', {
  rid: '<?= h($RID) ?>',
  reason: '<?= h($REASON) ?>',
  severity: '<?= h($SEVERITY) ?>',
  path: location.pathname,
  referrer: document.referrer || '(direct)'
});
</script>
<?php endif; ?>

.vignette{
  position:fixed; inset:0; z-index:10; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(3,6,15,.16) 48%, rgba(3,6,15,.74) 100%),
    linear-gradient(180deg, rgba(3,6,15,.10), rgba(3,6,15,.58));
}

.scan-copy{
  position:fixed; top:18px; right:18px; z-index:15;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  pointer-events:none; text-align:right;
  color:rgba(150,183,228,.44);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 0 14px rgba(0,229,255,.16);
}

.ui{
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:20px;
  pointer-events:none;
}

.errBlock{text-align:center;margin-bottom:20px}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 13px;border-radius:999px;
  border:1px solid rgba(255,56,90,.38);
  background:rgba(255,56,90,.10);
  color:var(--red);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:14px;
  backdrop-filter:blur(8px);
}
.tag-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--red);box-shadow:0 0 8px var(--red);
  animation:blink .9s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.code-wrap{
  position:relative;
  display:inline-block;
}

.code{
  font-size:clamp(5rem,20vw,12rem);
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
  color:transparent;
  background:linear-gradient(170deg,#fff 0%,var(--cyan) 28%,var(--violet) 65%,rgba(120,85,255,0) 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 28px rgba(0,229,255,.32)) drop-shadow(0 0 70px rgba(120,85,255,.18));
  animation:shimmer 5s ease-in-out infinite;
  position:relative;
  will-change:transform,opacity,filter;
}
@keyframes shimmer{
  0%,100%{filter:drop-shadow(0 0 28px rgba(0,229,255,.32)) drop-shadow(0 0 70px rgba(120,85,255,.18))}
  50%{filter:drop-shadow(0 0 52px rgba(0,229,255,.58)) drop-shadow(0 0 110px rgba(120,85,255,.32))}
}
.code::before,.code::after{
  content:'404';position:absolute;inset:0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.code::before{
  background:linear-gradient(170deg,var(--cyan),transparent);
  animation:gClip1 7s step-end infinite;
}
.code::after{
  background:linear-gradient(170deg,var(--red),transparent);
  animation:gClip2 7s step-end infinite;
}
@keyframes gClip1{
  0%,92%,100%{clip-path:none;transform:none}
  93%{clip-path:inset(22% 0 55% 0);transform:translate(-4px,0)}
  95%{clip-path:inset(55% 0 20% 0);transform:translate(3px,0)}
  97%{clip-path:none;transform:none}
}
@keyframes gClip2{
  0%,94%,100%{clip-path:none;transform:none}
  95%{clip-path:inset(10% 0 70% 0);transform:translate(5px,0)}
  97%{clip-path:inset(68% 0 6% 0);transform:translate(-3px,0)}
  99%{clip-path:none;transform:none}
}

.headline{
  font-size:clamp(.95rem,2.2vw,1.25rem);
  color:var(--muted);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:6px;
}

.message{
  max-width:58ch;
  margin:12px auto 0;
  line-height:1.6;
  color:rgba(223,238,255,.72);
  font-size:clamp(.92rem,1.4vw,1.06rem);
}

.terminal{
  width:min(900px,95vw);
  background:rgba(0,0,0,.42);
  border:1px solid rgba(0,229,255,.16);
  border-radius:16px;
  padding:14px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(.72rem,1.1vw,.84rem);
  color:var(--dim);
  display:grid;gap:5px;
  pointer-events:auto;
  backdrop-filter:blur(8px);
  box-shadow:0 0 40px rgba(0,229,255,.06), inset 0 1px 0 rgba(0,229,255,.08);
  margin-bottom:18px;
}
.trow{display:flex;gap:10px;flex-wrap:wrap}
.tkey{color:var(--cyan);min-width:80px}
.tval{color:rgba(223,238,255,.7);word-break:break-all;flex:1}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:6px;font-size:.75rem;
  border:1px solid rgba(0,229,255,.22);
  background:rgba(0,229,255,.06);color:var(--cyan);
}
.pill.warn{border-color:rgba(255,184,48,.26);background:rgba(255,184,48,.06);color:var(--amber)}
.pill.bad{border-color:rgba(255,61,90,.26);background:rgba(255,61,90,.06);color:var(--red)}

.searchRow{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-bottom:14px;pointer-events:auto;width:min(900px,95vw);
}
.searchRow input{
  flex:1;min-width:220px;max-width:480px;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(0,229,255,.20);
  color:var(--ink);border-radius:11px;
  padding:11px 14px;font-size:.9rem;outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.searchRow input:focus{
  border-color:rgba(0,229,255,.55);
  box-shadow:0 0 0 4px rgba(0,229,255,.08);
}

.btns{
  display:flex;flex-wrap:wrap;gap:11px;
  justify-content:center;pointer-events:auto;
}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:13px;
  text-decoration:none;color:var(--ink);
  font-size:.92rem;font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
  transition:transform .18s,box-shadow .18s,border-color .18s, background .18s;
  box-shadow:0 6px 24px rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-100%);
  transition:transform .55s ease;
}
.btn:hover::before{transform:translateX(100%)}
.btn:hover{transform:translateY(-2px)}
.btn-home{border-color:rgba(0,229,255,.42);box-shadow:0 0 20px rgba(0,229,255,.12)}
.btn-home:hover{border-color:rgba(0,229,255,.78);box-shadow:0 0 38px rgba(0,229,255,.26)}
.btn-search{border-color:rgba(120,85,255,.44);background:rgba(120,85,255,.10)}
.btn-search:hover{border-color:rgba(120,85,255,.8)}
.btn-build{border-color:rgba(0,255,163,.28);background:rgba(0,255,163,.07)}
.btn-build:hover{border-color:rgba(0,255,163,.65)}

.helpPanel{
  width:min(980px,95vw);
  margin:14px auto 0;
  pointer-events:auto;
}
.helpTitle{
  color:rgba(223,238,255,.78);
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 10px;
}
.helpGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(145px,1fr));
  gap:10px;
}
.helpCard{
  display:block;
  text-decoration:none;
  color:var(--ink);
  border:1px solid rgba(0,229,255,.16);
  background:rgba(0,0,0,.28);
  border-radius:15px;
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  transition:transform .18s,border-color .18s,background .18s;
}
.helpCard:hover{
  transform:translateY(-2px);
  border-color:rgba(0,229,255,.48);
  background:rgba(0,229,255,.07);
}
.helpCard strong{
  display:block;
  color:var(--cyan);
  font-size:.9rem;
  margin-bottom:5px;
}
.helpCard span{
  display:block;
  color:rgba(223,238,255,.62);
  font-size:.78rem;
  line-height:1.35;
}
@media(max-width:860px){
  .helpGrid{grid-template-columns:repeat(2,minmax(145px,1fr))}
}
@media(max-width:520px){
  .helpGrid{grid-template-columns:1fr}
}

.foot{
  position:fixed;left:0;right:0;bottom:0;z-index:21;
  padding:9px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:linear-gradient(180deg,transparent,rgba(3,6,15,.85) 38%,rgba(3,6,15,.96));
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.76rem;color:var(--dim);
  backdrop-filter:blur(6px);
}
.foot strong{color:var(--muted)}
.foot a{color:var(--cyan);text-decoration:none}

@media(max-width:680px){
  .btns,.searchRow{flex-direction:column;align-items:center}
  .foot{flex-direction:column;align-items:flex-start}
  .scan-copy{right:12px;top:12px;font-size:10px}
}
</style>
</head>
<body>

<div class="scan-copy" aria-hidden="true">
  <span>SIMON // LOST COORDINATE FIELD</span>
  <span>404 SIGNAL FRACTURE · RANDOMIZED NAV RECOVERY</span>
  <span>HOME → SITEMAP → MESSAGE → BUILD STATUS</span>
</div>

<div class="ui" role="main" aria-label="404 error">
  <div class="errBlock">
    <div class="tag"><span class="tag-dot"></span>Signal Lost · Coordinate Not Found</div>
    <div class="code-wrap">
      <div class="code" aria-label="Error 404" id="code404">404</div>
    </div>
    <p class="headline">Destination Unreachable</p>
    <p class="message">This route is missing, moving, unpublished, or still under construction inside the SIMON lattice.</p>
  </div>

<div class="terminal" aria-label="Request details">
    <div class="trow"><span class="tkey">PATH</span><span class="tval" id="tPath">—</span></div>
    <div class="trow"><span class="tkey">REF</span><span class="tval" id="tRef">—</span></div>
    <div class="trow">
      <span class="tkey">REASON</span>
      <span class="tval"><?= h($REASON) ?></span>
      <span class="pill">SEVERITY: <?= h(strtoupper($SEVERITY)) ?></span>
    </div>
    <div class="trow">
      <span class="tkey">RID</span>
      <span class="pill"><?= h($RID) ?></span>
      <span class="pill">SIMON Log Intelligence</span>
      <span class="pill"><?= h(gmdate('Y-m-d\TH:i:s\Z')) ?></span>
    </div>
  </div>

<div class="searchRow">
    <input id="sQ" type="search" placeholder="Search the GS network…" autocomplete="off" aria-label="Site search"/>
    <button class="btn btn-search" id="sGo">🔍 Search</button>
  </div>

<div class="btns">
    <a class="btn btn-home" href="/">⟵ Home</a>
    <a class="btn" href="/sitemap.php">🧭 Sitemap</a>
    <a class="btn" href="/message.php">✉ Message</a>
    <a class="btn btn-build" href="<?= h($SHOW_TOOLS_LINK ? $TOOLS_URL : '/sitemap.php') ?>">🛠 Build / Site Map</a>
  </div>

<section class="helpPanel" aria-label="Suggested helpful results">
    <div class="helpTitle">Results worth checking next</div>
    <div class="helpGrid">
      <a class="helpCard simon-help-link" data-help="public_pages" href="/sitemap.php?q=public">
        <strong>Find public pages</strong>
        <span>Search published pages and live sections.</span>
      </a>
      <a class="helpCard simon-help-link" data-help="books_art" href="/books/">
        <strong>Books + art hub</strong>
        <span>Return to active creative inventory.</span>
      </a>
      <a class="helpCard simon-help-link" data-help="web360" href="/web360/">
        <strong>Web360 builder</strong>
        <span>Open build tools and site recovery paths.</span>
      </a>
      <a class="helpCard simon-help-link" data-help="report_missing" href="/message.php?topic=missing-page&rid=<?= h($RID) ?>">
        <strong>Report missing route</strong>
        <span>Send this RID so SIMON can repair it.</span>
      </a>
    </div>
  </section>
</div>

<div class="foot" aria-hidden="true">
  <div><strong>SIMON</strong> · Powered by GaylordSinclair.com</div>
  <div>© <?= h((string)$YEAR) ?> Gaylord Sinclair · <a href="/message.php">Report an issue</a></div>
</div>

const SIMON_CONFIG = window.SIMON_CONFIG || {};
  const SIMON_EVENT = window.SIMON_EVENT || {};
  const simonKey = SIMON_CONFIG.simon_key ? ('&key=' + encodeURIComponent(SIMON_CONFIG.simon_key)) : '';

function simonPost(stream, payload){
    if(!SIMON_CONFIG.webhook || !stream) return;
    try{
      fetch(SIMON_CONFIG.webhook + '?stream=' + encodeURIComponent(stream) + simonKey, {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        keepalive: true,
        body: JSON.stringify(payload)
      }).catch(() => {});
    }catch(e){}
  }

simonPost(SIMON_CONFIG.visit_stream || 'visits', {
    title: '404 Visit · ' + document.title,
    summary: 'Missing route: ' + location.pathname,
    url: location.href,
    referrer: document.referrer || '',
    source: SIMON_CONFIG.source || 'simon-404.php',
    rid: SIMON_EVENT.rid || '<?= h($RID) ?>',
    at: new Date().toISOString(),
    screen: innerWidth + 'x' + innerHeight,
    tz: Intl.DateTimeFormat().resolvedOptions().timeZone || 'Local'
  });

simonPost(SIMON_CONFIG.pulse_stream || 'default', Object.assign({
    title: 'SIMON 404 · Signal Lost',
    summary: 'User reached a missing route and was shown recovery actions.',
    url: location.href,
    at: new Date().toISOString()
  }, SIMON_EVENT));

const sQ = document.getElementById('sQ');
  const sGo = document.getElementById('sGo');
  function doSearch(){
    location.href = '/sitemap.php?q=' + encodeURIComponent(sQ.value.trim());
  }
  sGo.addEventListener('click', doSearch);
  sQ.addEventListener('keydown', e => { if(e.key === 'Enter') doSearch(); });

/* setup */
  const DPR = Math.min(2, window.devicePixelRatio || 1);
  const TAU = Math.PI * 2;
  const rand = (a,b) => a + Math.random() * (b-a);
  const lerp = (a,b,t) => a + (b-a) * t;

let W = innerWidth, H = innerHeight;
  let CX = W * .5, CY = H * .5;
  let prevW = W, prevH = H;
  const ptr = { x:CX, y:CY, tx:CX, ty:CY };
  const LOOP_MS = 16000;
  let prevPhase = 0;

function resize(){
    prevW = W; prevH = H;
    W = innerWidth; H = innerHeight; CX = W * .5; CY = H * .5;
    ids.forEach(id => {
      cvs[id].width = Math.floor(W * DPR);
      cvs[id].height = Math.floor(H * DPR);
      cvs[id].style.width = W + 'px';
      cvs[id].style.height = H + 'px';
      ctx[id].setTransform(DPR,0,0,DPR,0,0);
    });
    rescaleStars();
    rebuildDigitStreams();
    buildStorms();
    buildFractals();
    buildTargets();
    resetBlocks();
  }
  resize();

addEventListener('resize', resize, { passive:true });
  addEventListener('pointermove', e => {
    ptr.tx = e.clientX;
    ptr.ty = e.clientY;
  }, { passive:true });

/* LAYER 1 — GRID */
  function drawGrid(t,p){
    const c = ctx['cv-grid'];
    c.clearRect(0,0,W,H);

const bg = c.createLinearGradient(0,0,0,H);
    bg.addColorStop(0, 'rgba(3,6,15,1)');
    bg.addColorStop(1, 'rgba(6,11,26,1)');
    c.fillStyle = bg;
    c.fillRect(0,0,W,H);

const horizon = H * .52;
    const vanish = H * .42;
    const halfW = W * .5;
    const drift = (t * .00006) % 1;
    const grid = 44;
    const fold = Math.sin(p * TAU) * .5 + .5;

c.strokeStyle = 'rgba(0,229,255,.06)';
    c.lineWidth = 1;

for(let i=0; i<=18; i++){
      const frac = (i / 18 + drift) % 1;
      const y = horizon + Math.pow(frac, 2.2) * (H - horizon);
      const alpha = Math.pow(frac, 1.4) * (.12 + fold * .08);
      c.globalAlpha = alpha;
      c.beginPath();
      for(let x=-grid; x<=W+grid; x+=8){
        const wx = x + Math.sin((y * .012) + t * .0013) * 6 * fold;
        const wy = y + Math.sin((x * .011) + t * .0015) * 5 * fold;
        if(x === -grid) c.moveTo(wx, wy);
        else c.lineTo(wx, wy);
      }
      c.stroke();
    }

for(let i=0; i<=24; i++){
      const frac = i / 24;
      const xBase = frac * W;
      const alpha = (1 - Math.abs(frac - .5) * 1.8) * .14;
      if(alpha < .005) continue;
      c.globalAlpha = Math.max(0, alpha);
      c.beginPath();
      c.moveTo(halfW + (xBase - halfW) * .04, vanish);
      c.lineTo(xBase, H);
      c.stroke();
    }

c.globalAlpha = 1;

const hg = c.createLinearGradient(0, horizon-40, 0, horizon+40);
    hg.addColorStop(0, 'transparent');
    hg.addColorStop(.5, 'rgba(0,229,255,.06)');
    hg.addColorStop(1, 'transparent');
    c.fillStyle = hg;
    c.fillRect(0, horizon-40, W, 80);
  }

/* LAYER 2 — NEBULA */
  function drawNebula(t){
    const c = ctx['cv-nebula'];
    c.clearRect(0,0,W,H);

const dx = Math.sin(t * .00013) * 110;
    const dy = Math.cos(t * .00009) * 65;

let g = c.createRadialGradient(CX - 260 + dx, CY - 180 + dy, 24, CX - 260 + dx, CY - 180 + dy, 560);
    g.addColorStop(0,'rgba(120,85,255,.24)');
    g.addColorStop(.34,'rgba(0,229,255,.13)');
    g.addColorStop(1,'transparent');
    c.fillStyle = g;
    c.fillRect(0,0,W,H);

g = c.createRadialGradient(CX + 300 - dx*.55, CY + 140 - dy*.38, 10, CX + 300 - dx*.55, CY + 140 - dy*.38, 500);
    g.addColorStop(0,'rgba(255,43,214,.22)');
    g.addColorStop(.34,'rgba(120,85,255,.12)');
    g.addColorStop(1,'transparent');
    c.fillStyle = g;
    c.fillRect(0,0,W,H);

g = c.createRadialGradient(CX - 60 + dx*.24, CY + 280, 8, CX - 60 + dx*.24, CY + 280, 420);
    g.addColorStop(0,'rgba(0,229,255,.14)');
    g.addColorStop(1,'transparent');
    c.fillStyle = g;
    c.fillRect(0,0,W,H);
  }

/* LAYER 3 — STORMS */
  let storms = [];
  function buildStorms(){
    storms = Array.from({length:8}, () => ({
      x: rand(W*.08, W*.92),
      y: rand(H*.08, H*.92),
      r: rand(100, 260),
      phase: rand(0, TAU),
      speed: rand(.00045, .0013),
      colA: Math.random() > .5 ? '0,229,255' : '255,43,214',
      colB: Math.random() > .5 ? '120,85,255' : '255,184,48'
    }));
  }

function drawStorm(t){
    const c = ctx['cv-storm'];
    c.clearRect(0,0,W,H);

for(const s of storms){
      const px = s.x + Math.sin(t * s.speed + s.phase) * 74;
      const py = s.y + Math.cos(t * s.speed * .94 + s.phase) * 42;
      const rr = s.r + Math.sin(t * .0012 + s.phase) * 22;

const g = c.createRadialGradient(px, py, rr*.05, px, py, rr);
      g.addColorStop(0, `rgba(${s.colA},.18)`);
      g.addColorStop(.35, `rgba(${s.colB},.08)`);
      g.addColorStop(1, 'transparent');
      c.fillStyle = g;
      c.fillRect(px-rr, py-rr, rr*2, rr*2);

for(let i=0;i<5;i++){
        const a0 = (i/5) * TAU + t*.0002 + s.phase;
        c.beginPath();
        c.strokeStyle = `rgba(${s.colA},${0.08 + Math.sin(t*.001+i)*0.03})`;
        c.lineWidth = 1.1;
        c.shadowBlur = 18;
        c.shadowColor = `rgba(${s.colA},.38)`;
        c.arc(px, py, rr * (.34 + i*.15), a0, a0 + .78);
        c.stroke();
        c.shadowBlur = 0;
      }
    }
  }

/* LAYER 4 — NODES */
  const NODE_COUNT = 88;
  const LINK_DIST = 160;
  const nodes = Array.from({length: NODE_COUNT}, () => ({
    x: rand(0, W),
    y: rand(0, H),
    vx: rand(-.12, .12),
    vy: rand(-.08, .08),
    r: rand(1.2, 3.6),
    a: rand(.15, .55),
    dead: Math.random() < .16
  }));

function drawNodes(){
    const c = ctx['cv-nodes'];
    c.clearRect(0,0,W,H);

for(const n of nodes){
      n.x += n.vx; n.y += n.vy;
      if(n.x < -30) n.x = W + 30;
      if(n.x > W + 30) n.x = -30;
      if(n.y < -30) n.y = H + 30;
      if(n.y > H + 30) n.y = -30;
    }

for(let i=0;i<nodes.length;i++){
      for(let j=i+1;j<nodes.length;j++){
        const ni = nodes[i], nj = nodes[j];
        const dx = ni.x - nj.x, dy = ni.y - nj.y;
        const d = Math.sqrt(dx*dx + dy*dy);
        if(d > LINK_DIST) continue;
        const fade = 1 - d / LINK_DIST;
        const dead = ni.dead || nj.dead;
        c.strokeStyle = dead ? `rgba(255,61,90,${fade*.20})` : `rgba(0,229,255,${fade*.16})`;
        c.lineWidth = dead ? .7 : .9;
        c.beginPath();
        c.moveTo(ni.x, ni.y);
        c.lineTo(nj.x, nj.y);
        c.stroke();
      }
    }

for(const n of nodes){
      c.save();
      c.shadowBlur = n.dead ? 12 : 7;
      c.shadowColor = n.dead ? 'rgba(255,61,90,.4)' : 'rgba(0,229,255,.4)';
      c.globalAlpha = n.a;
      c.beginPath();
      c.fillStyle = n.dead ? '#ff3d5a' : '#00e5ff';
      c.arc(n.x, n.y, n.r, 0, TAU);
      c.fill();
      c.restore();
    }
  }

/* LAYER 5 — RADAR */
  let radarAngle = 0;
  function drawRadar(t){
    const c = ctx['cv-radar'];
    c.clearRect(0,0,W,H);

ptr.x = lerp(ptr.x, ptr.tx, .04);
    ptr.y = lerp(ptr.y, ptr.ty, .04);

const rX = CX + (ptr.x - CX) * .05;
    const rY = CY + (ptr.y - CY) * .04;
    const R  = Math.min(W,H) * .36;

radarAngle += .008;

[R*.38, R*.62, R*.82, R].forEach((r,i) => {
      c.strokeStyle = `rgba(0,229,255,${.04 + i*.012})`;
      c.lineWidth = 1;
      c.beginPath();
      c.arc(rX,rY,r,0,TAU);
      c.stroke();
    });

const arm = R * 1.05;
    c.strokeStyle = 'rgba(0,229,255,.10)';
    c.beginPath();
    c.moveTo(rX-arm, rY); c.lineTo(rX+arm, rY);
    c.moveTo(rX, rY-arm); c.lineTo(rX, rY+arm);
    c.stroke();

const sweep = .88;
    c.save();
    c.translate(rX,rY);
    c.rotate(radarAngle);

const sg = c.createLinearGradient(-R, 0, R, 0);
    sg.addColorStop(0,'transparent');
    sg.addColorStop(.6,'rgba(0,229,255,.22)');
    sg.addColorStop(1,'rgba(0,229,255,.44)');

c.beginPath();
    c.moveTo(0,0);
    c.arc(0,0,R*1.02,-sweep*.5,sweep*.5);
    c.closePath();
    c.fillStyle = sg;
    c.globalAlpha = .9;
    c.fill();
    c.restore();

c.save();
    c.translate(rX,rY);
    c.rotate(radarAngle + sweep*.5);
    c.strokeStyle = 'rgba(0,229,255,.72)';
    c.lineWidth = 2;
    c.shadowBlur = 18;
    c.shadowColor = '#00e5ff';
    c.beginPath();
    c.moveTo(0,0);
    c.lineTo(R*1.02, 0);
    c.stroke();
    c.restore();

const blipA = Math.max(0, Math.sin(t*.002) * Math.cos(t*.00137));
    if(blipA > .2){
      const bx = rX + Math.cos(t*.00088) * R * .55;
      const by = rY + Math.sin(t*.00061) * R * .35;
      c.save();
      c.globalAlpha = blipA * .7;
      c.strokeStyle = '#ff3d5a';
      c.lineWidth = 1.5;
      c.shadowBlur = 22;
      c.shadowColor = '#ff3d5a';
      const bs = 10;
      c.beginPath();
      c.moveTo(bx-bs, by-bs); c.lineTo(bx+bs, by+bs);
      c.moveTo(bx+bs, by-bs); c.lineTo(bx-bs, by+bs);
      c.stroke();
      c.restore();
    }
  }

/* LAYER 6 — WAVEFORM */
  function drawWave(t){
    const c = ctx['cv-wave'];
    c.clearRect(0,0,W,H);

const wY = H * .88;
    const wH = 38;
    const seg = 5;
    let prevX = null, prevY = null;

const glitchNow = Math.random() < .022;

for(let x=0; x<=W; x+=seg){
      if(Math.random() < (glitchNow ? .18 : .04)){
        prevX = null; prevY = null;
        continue;
      }
      const base =
        Math.sin(x*.012 + t*.0018) * wH * .55 +
        Math.sin(x*.038 - t*.0009) * wH * .30 +
        Math.sin(x*.005 + t*.0032) * wH * .15;

const y = wY + base;
      const progress = x / W;
      const fadeEdge = Math.min(progress, 1-progress) * 3;
      const fade = Math.min(1, fadeEdge);
      const col = glitchNow ? `rgba(255,61,90,${fade*.55})` : `rgba(0,229,255,${fade*.42})`;

if(prevX !== null){
        c.beginPath();
        c.strokeStyle = col;
        c.lineWidth = 1.4;
        c.shadowBlur = glitchNow ? 12 : 6;
        c.shadowColor = glitchNow ? '#ff3d5a' : '#00e5ff';
        c.moveTo(prevX, prevY);
        c.lineTo(x, y);
        c.stroke();
      }
      prevX = x; prevY = y;
    }
    c.shadowBlur = 0;
  }

/* LAYER 7 — DIGITS */
  let streams = [];
  function rebuildDigitStreams(){
    const cols = Math.floor(W / 22);
    streams = Array.from({length: cols}, (_,i) => ({
      x: 22*i + 11,
      y: rand(-H, 0),
      spd: rand(.4, 1.1),
      chars: Array.from({length: 24}, () =>
        Math.random() > .5
          ? Math.floor(Math.random()*10)
          : String.fromCharCode(0x30A0 + Math.floor(Math.random()*96))
      ),
      timer: 0
    }));
  }

function drawDigits(){
    const c = ctx['cv-digits'];
    c.clearRect(0,0,W,H);
    c.font = '11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace';
    c.textAlign = 'center';
    c.textBaseline = 'top';

for(const s of streams){
      s.y += s.spd;
      s.timer++;
      if(s.timer % 12 === 0){
        s.chars[Math.floor(Math.random() * s.chars.length)] = Math.floor(Math.random()*10);
      }
      if(s.y > H + 22 * s.chars.length){
        s.y = rand(-H*.5, 0);
      }

for(let i=0;i<s.chars.length;i++){
        const cy = s.y + i*22;
        if(cy < -20 || cy > H+20) continue;
        const bright = 1 - i/s.chars.length;
        const alpha = bright * .38;
        c.fillStyle = i === 0
          ? `rgba(0,229,255,${alpha*1.8})`
          : `rgba(0,229,255,${alpha*.7})`;
        c.fillText(String(s.chars[i]), s.x, cy);
      }
    }
  }

/* LAYER 8 — FRACTAL DUST */
  let fractals = [];
  function buildFractals(){
    fractals = Array.from({length:140}, () => ({
      x:rand(0,W),
      y:rand(0,H),
      r:rand(10,34),
      a:rand(0,TAU),
      spin:rand(-.006,.006),
      drift:rand(-.14,.14),
      hue: Math.random()>.5 ? 'cyan' : (Math.random()>.5 ? 'violet' : 'pink')
    }));
  }

function drawFractals(t){
    const c = ctx['cv-main'];
    for(const f of fractals){
      f.y += f.drift;
      f.a += f.spin;
      if(f.y < -50) f.y = H + 50;
      if(f.y > H + 50) f.y = -50;

const col = f.hue === 'cyan' ? '0,229,255' : (f.hue === 'violet' ? '120,85,255' : '255,43,214');
      c.save();
      c.translate(f.x, f.y);
      c.rotate(f.a + Math.sin(t*.001 + f.x*.01) * .4);
      c.strokeStyle = `rgba(${col},.12)`;
      c.lineWidth = 1;
      c.shadowBlur = 10;
      c.shadowColor = `rgba(${col},.32)`;
      c.beginPath();
      c.moveTo(0, -f.r);
      c.lineTo(f.r*.7, -f.r*.18);
      c.lineTo(f.r*.35, f.r*.78);
      c.lineTo(-f.r*.55, f.r*.55);
      c.closePath();
      c.stroke();
      c.restore();
    }
  }

/* LAYER 9 — 404 SHARD FIELD */
  const BLOCK_SIZE = 12;
  let blocks = [];
  let targetSets = {};

function bitmapFromText(text, fontPx=210){
    const off = document.createElement('canvas');
    off.width = 620;
    off.height = 280;
    const o = off.getContext('2d');
    o.clearRect(0,0,off.width,off.height);
    o.fillStyle = '#fff';
    o.textAlign = 'center';
    o.textBaseline = 'middle';
    o.font = `900 ${fontPx}px Inter, system-ui, sans-serif`;
    o.fillText(text, off.width*.5, off.height*.54);
    return pointsFromCanvas(off, BLOCK_SIZE, .10, 1.0);
  }

function drawQuestionIcon(o,cx,cy,s){
    o.clearRect(0,0,o.canvas.width,o.canvas.height);
    o.fillStyle = '#fff';
    o.textAlign = 'center';
    o.textBaseline = 'middle';
    o.font = `900 ${220*s}px Inter, system-ui, sans-serif`;
    o.fillText('?', cx, cy);
  }

function drawCompassIcon(o,cx,cy,s){
    o.clearRect(0,0,o.canvas.width,o.canvas.height);
    o.save();
    o.translate(cx,cy);
    o.strokeStyle = '#fff';
    o.lineWidth = 16;
    o.beginPath();
    o.arc(0,0,110*s,0,TAU);
    o.stroke();
    o.beginPath();
    o.moveTo(-24*s,76*s);
    o.lineTo(28*s,-88*s);
    o.lineTo(74*s,-24*s);
    o.lineTo(-24*s,76*s);
    o.stroke();
    o.restore();
  }

function drawBuildIcon(o,cx,cy,s){
    o.clearRect(0,0,o.canvas.width,o.canvas.height);
    o.save();
    o.translate(cx,cy);
    o.strokeStyle = '#fff';
    o.lineWidth = 15;
    o.lineJoin = 'round';
    o.lineCap = 'round';
    o.strokeRect(-86*s,-76*s,172*s,152*s);
    o.beginPath();
    o.moveTo(-86*s,-18*s); o.lineTo(86*s,-18*s);
    o.stroke();
    o.beginPath();
    o.moveTo(-46*s,-48*s); o.lineTo(-46*s,-48*s);
    o.moveTo(0,-48*s); o.lineTo(0,-48*s);
    o.moveTo(46*s,-48*s); o.lineTo(46*s,-48*s);
    o.lineWidth = 18;
    o.stroke();
    o.restore();
  }

function bitmapForIcon(name){
    const off = document.createElement('canvas');
    off.width = 460;
    off.height = 340;
    const o = off.getContext('2d');

if(name === 'question') drawQuestionIcon(o, off.width*.5, off.height*.54, 1);
    if(name === 'compass') drawCompassIcon(o, off.width*.5, off.height*.54, 1);
    if(name === 'build') drawBuildIcon(o, off.width*.5, off.height*.54, 1);

return pointsFromCanvas(off, BLOCK_SIZE, .08, 1.08);
  }

function buildTargets(){
    targetSets = {
      code404: bitmapFromText('404', Math.min(228, W*.17)),
      question: bitmapForIcon('question'),
      compass: bitmapForIcon('compass'),
      build: bitmapForIcon('build')
    };
  }

function maxTargetCount(){
    return Math.max(
      targetSets.code404?.length || 0,
      targetSets.question?.length || 0,
      targetSets.compass?.length || 0,
      targetSets.build?.length || 0,
      260
    );
  }

function setTargets(name){
    const pts = targetSets[name];
    if(!pts || !pts.length) return;
    for(let i=0;i<blocks.length;i++){
      const p = pts[i % pts.length];
      blocks[i].tx = CX + p.x;
      blocks[i].ty = CY + p.y;
    }
  }

function explodeBlocks(power=1){
    for(const b of blocks){
      const a = Math.atan2(b.y-CY,b.x-CX) + rand(-.55,.55);
      const s = rand(3,12) * power;
      b.vx += Math.cos(a) * s;
      b.vy += Math.sin(a) * s;
      b.vr += rand(-.18,.18);
    }
  }

function drawShardField(t,p){
    const c = ctx['cv-main'];
    c.clearRect(0,0,W,H);

const phase404   = p < .22;
    const explode1   = p >= .22 && p < .30;
    const question   = p >= .30 && p < .48;
    const explode2   = p >= .48 && p < .56;
    const compass    = p >= .56 && p < .72;
    const explode3   = p >= .72 && p < .80;
    const build      = p >= .80 && p < .93;
    const zoomNull   = p >= .93;

if(phase404) setTargets('code404');
    else if(question) setTargets('question');
    else if(compass) setTargets('compass');
    else if(build) setTargets('build');

const nullK = zoomNull ? (p - .93) / .07 : 0;
    const zoomScale = zoomNull ? 1 + nullK * 4.4 : 1;
    const fadeOut = zoomNull ? 1 - nullK : 1;

for(const b of blocks){
      const spring = .036;
      const friction = (explode1 || explode2 || explode3) ? .963 : .848;

b.vx += (b.tx - b.x) * spring;
      b.vy += (b.ty - b.y) * spring;

if(explode1 || explode2 || explode3){
        b.vx += rand(-.7,.7);
        b.vy += rand(-.7,.7);
      }

b.vx *= friction;
      b.vy *= friction;
      b.x += b.vx;
      b.y += b.vy;
      b.rot += b.vr * .07;

const dx = b.x - CX;
      const dy = b.y - CY;
      const zx = CX + dx * zoomScale;
      const zy = CY + dy * zoomScale;

let fill = '#00e5ff';
      let glow = 'rgba(0,229,255,.44)';
      if(b.hue === 'violet'){ fill = '#7855ff'; glow = 'rgba(120,85,255,.38)'; }
      if(b.hue === 'pink'){ fill = '#ff2bd6'; glow = 'rgba(255,43,214,.35)'; }

const pulse = .84 + Math.sin(t*.005 + dx*.03 + dy*.03) * .24;

c.save();
      c.translate(zx, zy);
      c.rotate(b.rot + Math.sin(t*.002 + dx*.02) * .12 * b.jitter);
      c.globalAlpha = b.alpha * pulse * fadeOut;
      c.fillStyle = fill;
      c.shadowBlur = 18;
      c.shadowColor = glow;
      c.fillRect(-b.size*.5, -b.size*.5, b.size, b.size);
      c.strokeStyle = 'rgba(255,255,255,.14)';
      c.lineWidth = 1;
      c.strokeRect(-b.size*.5, -b.size*.5, b.size, b.size);
      c.restore();
    }

drawFractals(t);
  }

/* LAYER 10 — FOLD */
  function drawFold(t,p){
    const c = ctx['cv-fold'];
    c.clearRect(0,0,W,H);

const foldAmt = Math.max(0, Math.sin(p * TAU - 1.14)) * 1.04;
    if(foldAmt < .02) return;

for(let i=0;i<9;i++){
      const y = H * (i / 9) + Math.sin(t * .0018 + i) * 20;
      c.beginPath();
      for(let x=-20; x<=W+20; x+=10){
        const yy = y + Math.sin(x * .012 + t * .003 + i) * 18 * foldAmt;
        if(x === -20) c.moveTo(x, yy);
        else c.lineTo(x, yy);
      }
      c.strokeStyle = i % 2
        ? `rgba(0,229,255,${.08 * foldAmt})`
        : `rgba(255,43,214,${.08 * foldAmt})`;
      c.lineWidth = 1.2;
      c.shadowBlur = 12;
      c.shadowColor = i % 2 ? 'rgba(0,229,255,.35)' : 'rgba(255,43,214,.35)';
      c.stroke();
      c.shadowBlur = 0;
    }
  }

/* HUD */
  function drawHud(t,p){
    const c = ctx['cv-hud'];
    c.clearRect(0,0,W,H);

const cX = CX + (ptr.x - CX) * .10;
    const cY = CY + (ptr.y - CY) * .07;
    const r = 156 + Math.sin(t*.0018) * 8;

c.strokeStyle = 'rgba(0,229,255,.14)';
    c.lineWidth = 1;
    c.beginPath(); c.arc(cX,cY,r,0,TAU); c.stroke();

c.strokeStyle = 'rgba(120,85,255,.10)';
    c.beginPath(); c.arc(cX,cY,r*1.46,0,TAU); c.stroke();

c.strokeStyle = 'rgba(0,229,255,.20)';
    const gap = 118, arm = 76;
    c.beginPath();
    c.moveTo(cX-gap-arm,cY); c.lineTo(cX-gap,cY);
    c.moveTo(cX+gap,cY); c.lineTo(cX+gap+arm,cY);
    c.moveTo(cX,cY-gap-arm); c.lineTo(cX,cY-gap);
    c.moveTo(cX,cY+gap); c.lineTo(cX,cY+gap+arm);
    c.stroke();

const scanA = t * .0014;
    c.strokeStyle = 'rgba(0,229,255,.48)';
    c.shadowBlur = 13;
    c.shadowColor = '#00e5ff';
    c.lineWidth = 1.7;
    c.beginPath();
    c.arc(cX,cY,r,scanA,scanA+.62);
    c.stroke();
    c.shadowBlur = 0;

const markerText = p < .30 ? '404 SIGNAL FRACTURE'
      : p < .56 ? 'QUESTION STATE FORMING'
      : p < .80 ? 'NAV COMPASS FORMING'
      : p < .93 ? 'BUILD STATE FORMING'
      : 'NULL COLLAPSE';

c.fillStyle = 'rgba(150,183,228,.58)';
    c.font = '11px ui-monospace, SFMono-Regular, Menlo, monospace';
    c.textAlign = 'center';
    c.fillText(markerText, cX, cY + r + 28);
  }

function syncDom(p){
    const code = document.getElementById('code404');
    if(!code) return;

code.style.transform = `scale(${scale})`;
    code.style.opacity = opacity.toFixed(3);
    code.style.filter = `blur(${blur}px)`;
  }

function crossed(prev,curr,t){ return prev < t && curr >= t; }

function init(){
    buildStorms();
    rebuildDigitStreams();
    buildFractals();
    buildTargets();
    resetBlocks();
  }

function frame(t){
    const p = (t % LOOP_MS) / LOOP_MS;

if(crossed(prevPhase,p,.22)) explodeBlocks(1.1);
    if(crossed(prevPhase,p,.48)) explodeBlocks(.92);
    if(crossed(prevPhase,p,.72)) explodeBlocks(1.0);
    if(crossed(prevPhase,p,.93)) explodeBlocks(1.45);

drawGrid(t,p);
    drawNebula(t);
    drawStorm(t);
    drawNodes();
    drawRadar(t);
    drawWave(t);
    drawDigits();
    drawShardField(t,p);
    drawFold(t,p);
    drawHud(t,p);
    syncDom(p);

prevPhase = p;
    requestAnimationFrame(frame);
  }

init();
  requestAnimationFrame(frame);
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump