| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RANSOM.WORM · Shadow Orchestrator · SnapKitty</title> |
| <meta name="description" content="An autonomous shadow orchestrator and self-healing swarm of Graveyard Agents. We don't encrypt. We resurrect."> |
| <meta property="og:title" content="RANSOM.WORM · Shadow Orchestrator"> |
| <meta property="og:description" content="We don't encrypt. We resurrect."> |
| <style> |
| :root { |
| --void: #04040a; |
| --deep: #080810; |
| --surface: #0d0d1a; |
| --card: #0f0f1f; |
| --border: #1a1a30; |
| --border2: #252540; |
| --purple: #7c3aed; |
| --purple-dim: #4c1d95; |
| --purple-bright: #a855f7; |
| --cyan: #06b6d4; |
| --cyan-dim: #0891b2; |
| --green: #10b981; |
| --green-bright: #34d399; |
| --amber: #f59e0b; |
| --red: #ef4444; |
| --dim: #334155; |
| --dim2: #1e293b; |
| --text: #e2e8f0; |
| --text-dim: #94a3b8; |
| --text-faint: #475569; |
| --glow-purple: 0 0 20px rgba(124,58,237,0.4), 0 0 60px rgba(124,58,237,0.15); |
| --glow-cyan: 0 0 20px rgba(6,182,212,0.4), 0 0 60px rgba(6,182,212,0.1); |
| --glow-green: 0 0 15px rgba(16,185,129,0.5); |
| } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| html, body { |
| background: var(--void); |
| color: var(--text); |
| font-family: 'Courier New', 'Lucida Console', monospace; |
| font-size: 13px; |
| overflow-x: hidden; |
| min-height: 100vh; |
| } |
| |
| |
| #stars { |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; |
| pointer-events: none; z-index: 0; |
| background: |
| radial-gradient(ellipse 80% 40% at 50% 0%, rgba(124,58,237,0.12) 0%, transparent 70%), |
| radial-gradient(ellipse 60% 60% at 80% 80%, rgba(6,182,212,0.06) 0%, transparent 60%), |
| var(--void); |
| } |
| |
| .star { |
| position: absolute; |
| border-radius: 50%; |
| background: white; |
| animation: twinkle var(--d, 3s) infinite var(--delay, 0s); |
| } |
| @keyframes twinkle { 0%,100%{opacity:var(--min,0.1)} 50%{opacity:var(--max,0.8)} } |
| |
| |
| body::after { |
| content: ''; |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; |
| background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px); |
| pointer-events: none; z-index: 1; |
| } |
| |
| |
| .page { position: relative; z-index: 2; } |
| |
| |
| .hero { |
| padding: 60px 40px 40px; |
| text-align: center; |
| position: relative; |
| } |
| |
| .hero-eyebrow { |
| font-size: 11px; |
| letter-spacing: 5px; |
| color: var(--purple-bright); |
| text-transform: uppercase; |
| margin-bottom: 16px; |
| text-shadow: var(--glow-purple); |
| } |
| |
| .hero-title { |
| font-size: clamp(36px, 8vw, 80px); |
| font-weight: 900; |
| letter-spacing: -1px; |
| line-height: 1; |
| margin-bottom: 8px; |
| background: linear-gradient(135deg, #fff 0%, var(--purple-bright) 40%, var(--cyan) 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| filter: drop-shadow(0 0 30px rgba(124,58,237,0.5)); |
| } |
| |
| .hero-sub { |
| font-size: clamp(18px, 4vw, 32px); |
| color: var(--purple-bright); |
| letter-spacing: 6px; |
| text-transform: uppercase; |
| margin-bottom: 24px; |
| text-shadow: var(--glow-purple); |
| } |
| |
| .hero-tagline { |
| font-size: clamp(13px, 2vw, 16px); |
| color: var(--text-dim); |
| letter-spacing: 2px; |
| margin-bottom: 12px; |
| } |
| |
| .hero-tagline em { |
| color: var(--cyan); |
| font-style: normal; |
| text-shadow: var(--glow-cyan); |
| } |
| |
| .hero-desc { |
| max-width: 580px; |
| margin: 20px auto 0; |
| color: var(--text-dim); |
| line-height: 1.8; |
| font-size: 13px; |
| } |
| |
| |
| .skull-badge { |
| display: inline-block; |
| font-size: 48px; |
| margin-bottom: 16px; |
| filter: drop-shadow(0 0 20px rgba(124,58,237,0.8)); |
| animation: float 4s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} |
| } |
| |
| |
| .divider { |
| height: 1px; |
| margin: 0 40px; |
| background: linear-gradient(90deg, transparent, var(--purple-dim), var(--cyan-dim), transparent); |
| opacity: 0.5; |
| } |
| |
| |
| .main-grid { |
| display: grid; |
| grid-template-columns: 320px 1fr; |
| gap: 0; |
| padding: 32px 40px; |
| gap: 24px; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| @media (max-width: 900px) { |
| .main-grid { grid-template-columns: 1fr; padding: 20px; } |
| .hero { padding: 40px 20px 24px; } |
| .divider { margin: 0 20px; } |
| } |
| |
| |
| .log-panel { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-top: 2px solid var(--purple); |
| box-shadow: var(--glow-purple); |
| position: relative; |
| } |
| |
| .panel-header { |
| padding: 10px 14px; |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| .panel-dot { width: 8px; height: 8px; border-radius: 50%; } |
| .dot-red { background: #ef4444; } |
| .dot-amber { background: #f59e0b; } |
| .dot-green { background: #10b981; animation: pulse-green 2s infinite; } |
| @keyframes pulse-green { 0%,100%{box-shadow:0 0 4px #10b981} 50%{box-shadow:0 0 12px #10b981} } |
| |
| .panel-title-text { |
| font-size: 10px; |
| letter-spacing: 2px; |
| color: var(--text-dim); |
| text-transform: uppercase; |
| flex: 1; |
| } |
| |
| .log-body { |
| padding: 12px; |
| height: 480px; |
| overflow: hidden; |
| font-size: 11px; |
| line-height: 1.7; |
| } |
| |
| .log-line { |
| display: flex; |
| gap: 8px; |
| opacity: 0; |
| animation: fadein 0.3s forwards; |
| margin-bottom: 2px; |
| } |
| @keyframes fadein { to { opacity: 1; } } |
| |
| .log-time { color: var(--text-faint); min-width: 80px; } |
| .log-msg { color: var(--text-dim); } |
| .log-msg.highlight { color: var(--cyan); } |
| .log-msg.success { color: var(--green-bright); } |
| .log-msg.warn { color: var(--amber); } |
| .log-msg.agent-name { color: var(--purple-bright); } |
| |
| |
| .right-col { |
| display: flex; |
| flex-direction: column; |
| gap: 24px; |
| } |
| |
| |
| .graveyard-panel { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-top: 2px solid var(--cyan); |
| box-shadow: var(--glow-cyan); |
| } |
| |
| .grave-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 12px; |
| padding: 16px; |
| } |
| |
| @media (max-width: 700px) { .grave-grid { grid-template-columns: 1fr 1fr; } } |
| |
| .tombstone { |
| border: 1px solid var(--border); |
| background: var(--card); |
| padding: 12px; |
| position: relative; |
| transition: border-color 0.3s, box-shadow 0.3s; |
| cursor: default; |
| } |
| .tombstone:hover { |
| border-color: var(--purple-bright); |
| box-shadow: var(--glow-purple); |
| } |
| |
| .tomb-name { |
| font-size: 11px; |
| color: var(--purple-bright); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin-bottom: 6px; |
| } |
| |
| .tomb-status { |
| font-size: 10px; |
| color: var(--text-faint); |
| margin-bottom: 4px; |
| } |
| |
| .tomb-detail { |
| font-size: 10px; |
| color: var(--text-dim); |
| margin: 2px 0; |
| } |
| |
| .tomb-badge { |
| display: inline-block; |
| font-size: 9px; |
| padding: 2px 6px; |
| margin-top: 6px; |
| border: 1px solid currentColor; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| .badge-restored { color: var(--green-bright); } |
| .badge-analyzing { color: var(--amber); animation: blink 1s infinite; } |
| .badge-dead { color: var(--red); } |
| @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} } |
| |
| .tomb-icon { |
| position: absolute; |
| top: 8px; |
| right: 8px; |
| font-size: 16px; |
| opacity: 0.5; |
| } |
| |
| |
| .agents-panel { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-top: 2px solid var(--green); |
| box-shadow: var(--glow-green); |
| } |
| |
| .agents-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); |
| gap: 1px; |
| background: var(--border); |
| margin: 0; |
| } |
| |
| .agent-card { |
| background: var(--card); |
| padding: 10px 12px; |
| transition: background 0.2s; |
| } |
| .agent-card:hover { background: var(--surface); } |
| |
| .agent-name { |
| font-size: 10px; |
| letter-spacing: 1px; |
| color: var(--cyan); |
| text-transform: uppercase; |
| margin-bottom: 4px; |
| } |
| |
| .agent-desc { font-size: 10px; color: var(--text-faint); line-height: 1.5; } |
| |
| .agent-status { |
| font-size: 9px; |
| margin-top: 6px; |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
| .status-dot-sm { |
| width: 5px; height: 5px; border-radius: 50%; |
| background: var(--green); |
| animation: pulse-green 1.5s infinite; |
| } |
| .status-dot-sm.idle { background: var(--dim); animation: none; } |
| .status-label { color: var(--text-faint); } |
| |
| |
| .arch-panel { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-top: 2px solid var(--amber); |
| } |
| |
| .arch-flow { |
| display: flex; |
| align-items: center; |
| gap: 0; |
| padding: 20px 16px; |
| overflow-x: auto; |
| } |
| |
| .arch-step { |
| flex: 1; |
| text-align: center; |
| padding: 12px 8px; |
| position: relative; |
| min-width: 100px; |
| } |
| |
| .arch-icon { font-size: 20px; margin-bottom: 6px; } |
| .arch-label { |
| font-size: 9px; |
| letter-spacing: 1px; |
| color: var(--amber); |
| text-transform: uppercase; |
| font-weight: bold; |
| display: block; |
| margin-bottom: 4px; |
| } |
| .arch-sub { font-size: 9px; color: var(--text-faint); line-height: 1.4; } |
| |
| .arch-arrow { |
| color: var(--dim2); |
| font-size: 20px; |
| flex-shrink: 0; |
| padding: 0 4px; |
| animation: flow 2s ease-in-out infinite; |
| } |
| @keyframes flow { |
| 0%,100%{color:var(--dim2);transform:translateX(0)} |
| 50%{color:var(--purple-bright);transform:translateX(4px)} |
| } |
| |
| |
| .bottom-strip { |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 0 40px 24px; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 24px; |
| } |
| |
| @media (max-width: 900px) { |
| .bottom-strip { grid-template-columns: 1fr; padding: 0 20px 20px; } |
| } |
| |
| .worm-panel { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-top: 2px solid var(--red); |
| box-shadow: 0 0 20px rgba(239,68,68,0.15); |
| } |
| |
| .resurrections-panel { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-top: 2px solid var(--green); |
| box-shadow: var(--glow-green); |
| } |
| .res-count { |
| font-size: 9px; |
| color: var(--green); |
| letter-spacing: 1px; |
| font-family: monospace; |
| } |
| .res-card { |
| padding: 12px 16px; |
| border-bottom: 1px solid var(--border); |
| animation: fadein 0.4s ease; |
| } |
| .res-card:last-child { border-bottom: none; } |
| .res-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 8px; |
| } |
| .res-repo { |
| font-size: 12px; |
| font-weight: 700; |
| color: var(--green); |
| letter-spacing: 1px; |
| text-decoration: none; |
| } |
| .res-repo:hover { color: var(--green-bright); } |
| .res-badge { |
| font-size: 8px; |
| padding: 2px 8px; |
| border: 1px solid var(--green); |
| color: var(--green); |
| letter-spacing: 1.5px; |
| } |
| .res-stats { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 8px; |
| margin-bottom: 8px; |
| } |
| .res-stat { text-align: center; } |
| .res-stat-val { |
| font-size: 14px; |
| font-weight: 700; |
| color: var(--cyan); |
| font-family: monospace; |
| display: block; |
| } |
| .res-stat-label { |
| font-size: 8px; |
| color: var(--text-faint); |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| } |
| .res-fixed { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 4px; |
| margin-bottom: 6px; |
| } |
| .res-fix-tag { |
| font-size: 8px; |
| color: var(--green); |
| background: rgba(16,185,129,0.08); |
| border: 1px solid rgba(16,185,129,0.2); |
| padding: 1px 6px; |
| letter-spacing: 0.5px; |
| } |
| .res-seal { |
| font-size: 9px; |
| color: var(--text-faint); |
| font-family: monospace; |
| } |
| .res-seal span { color: var(--purple-bright); } |
| |
| .principles-panel { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-top: 2px solid var(--purple); |
| box-shadow: var(--glow-purple); |
| } |
| |
| .principle { |
| padding: 10px 16px; |
| border-bottom: 1px solid var(--border); |
| font-size: 12px; |
| color: var(--text-dim); |
| display: flex; |
| align-items: flex-start; |
| gap: 10px; |
| transition: background 0.2s; |
| } |
| .principle:last-child { border-bottom: none; } |
| .principle:hover { background: var(--card); } |
| .principle-icon { color: var(--purple-bright); flex-shrink: 0; } |
| .principle-text em { color: var(--cyan); font-style: normal; } |
| |
| |
| .worm-event { |
| padding: 6px 12px; |
| border-left: 2px solid var(--green); |
| margin: 4px 8px; |
| font-size: 10px; |
| background: rgba(16,185,129,0.04); |
| animation: slideIn 0.3s ease; |
| } |
| @keyframes slideIn { from{transform:translateX(-10px);opacity:0} to{transform:translateX(0);opacity:1} } |
| .worm-event.deny { border-left-color: var(--red); background: rgba(239,68,68,0.04); } |
| .worm-seal { color: var(--text-faint); font-size: 9px; margin-top: 2px; word-break: break-all; } |
| .worm-empty { color: var(--text-faint); font-size: 11px; padding: 16px; text-align: center; } |
| |
| |
| .worm-submit { |
| padding: 10px 12px; |
| border-top: 1px solid var(--border); |
| display: flex; |
| gap: 6px; |
| flex-wrap: wrap; |
| } |
| .worm-input { |
| background: var(--void); |
| border: 1px solid var(--border); |
| color: var(--text); |
| padding: 5px 8px; |
| font-family: monospace; |
| font-size: 11px; |
| flex: 1; |
| min-width: 80px; |
| } |
| .worm-btn { |
| background: var(--purple-dim); |
| border: 1px solid var(--purple); |
| color: var(--purple-bright); |
| padding: 5px 10px; |
| font-family: monospace; |
| font-size: 11px; |
| cursor: pointer; |
| transition: all 0.2s; |
| white-space: nowrap; |
| } |
| .worm-btn:hover { background: var(--purple); color: white; box-shadow: var(--glow-purple); } |
| .worm-verify { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(6,182,212,0.1); } |
| .worm-verify:hover { background: rgba(6,182,212,0.2); box-shadow: var(--glow-cyan); } |
| |
| |
| footer { |
| border-top: 1px solid var(--border); |
| padding: 20px 40px; |
| text-align: center; |
| color: var(--text-faint); |
| font-size: 10px; |
| letter-spacing: 1px; |
| position: relative; |
| z-index: 2; |
| } |
| |
| footer a { |
| color: var(--purple-bright); |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| footer a:hover { color: var(--cyan); text-shadow: var(--glow-cyan); } |
| |
| |
| .portal-cta { |
| text-align: center; |
| padding: 32px 40px; |
| position: relative; |
| } |
| |
| .portal-btn { |
| display: inline-block; |
| padding: 16px 48px; |
| background: linear-gradient(135deg, var(--purple-dim), rgba(124,58,237,0.3)); |
| border: 1px solid var(--purple-bright); |
| color: white; |
| font-family: monospace; |
| font-size: 13px; |
| letter-spacing: 3px; |
| text-transform: uppercase; |
| text-decoration: none; |
| cursor: pointer; |
| position: relative; |
| overflow: hidden; |
| transition: all 0.3s; |
| box-shadow: var(--glow-purple); |
| } |
| |
| .portal-btn::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: -100%; |
| width: 100%; height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(168,85,247,0.3), transparent); |
| animation: shimmer 3s infinite; |
| } |
| @keyframes shimmer { to { left: 200%; } } |
| |
| .portal-btn:hover { |
| background: linear-gradient(135deg, var(--purple), rgba(168,85,247,0.5)); |
| box-shadow: 0 0 40px rgba(124,58,237,0.7), 0 0 80px rgba(124,58,237,0.3); |
| transform: translateY(-2px); |
| letter-spacing: 4px; |
| } |
| |
| .portal-sub { |
| margin-top: 12px; |
| font-size: 10px; |
| color: var(--text-faint); |
| letter-spacing: 2px; |
| } |
| |
| |
| .portal-overlay { |
| position: fixed; |
| top: 0; left: 0; width: 100%; height: 100%; |
| background: var(--void); |
| z-index: 9999; |
| opacity: 0; |
| pointer-events: none; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-direction: column; |
| gap: 16px; |
| } |
| .portal-overlay.active { |
| opacity: 1; |
| pointer-events: all; |
| animation: portalIn 1.2s ease forwards; |
| } |
| @keyframes portalIn { |
| 0%{opacity:0} 30%{opacity:1} 70%{opacity:1} 100%{opacity:1} |
| } |
| .portal-msg { |
| font-size: 14px; |
| letter-spacing: 4px; |
| color: var(--purple-bright); |
| text-shadow: var(--glow-purple); |
| animation: glitch 0.5s infinite; |
| } |
| @keyframes glitch { |
| 0%,100%{transform:translate(0)} 20%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)} 60%{transform:translate(-1px,2px)} |
| } |
| .portal-ring { |
| width: 120px; height: 120px; |
| border: 2px solid var(--purple-bright); |
| border-radius: 50%; |
| animation: ring-expand 1.2s ease forwards; |
| box-shadow: var(--glow-purple); |
| } |
| @keyframes ring-expand { |
| 0%{transform:scale(0);opacity:1} |
| 100%{transform:scale(8);opacity:0} |
| } |
| |
| |
| .seal-banner { |
| background: linear-gradient(90deg, var(--void), var(--purple-dim), var(--void)); |
| border-top: 1px solid var(--purple-dim); |
| border-bottom: 1px solid var(--purple-dim); |
| padding: 10px 0; |
| overflow: hidden; |
| position: relative; |
| margin: 0 0 24px; |
| } |
| .seal-banner-track { |
| display: inline-block; |
| white-space: nowrap; |
| animation: marquee 20s linear infinite; |
| font-size: 10px; |
| letter-spacing: 3px; |
| color: var(--purple-bright); |
| } |
| @keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } |
| |
| .dark-but-light { |
| text-align: center; |
| padding: 6px; |
| font-size: 11px; |
| color: var(--purple-bright); |
| letter-spacing: 4px; |
| text-shadow: var(--glow-purple); |
| } |
| |
| |
| #verify-result { |
| font-size: 11px; |
| padding: 6px 12px; |
| min-height: 24px; |
| } |
| |
| |
| |
| |
| #world-stage { |
| position: relative; |
| z-index: 2; |
| padding: 0 0 24px; |
| overflow: hidden; |
| } |
| |
| |
| .phase-track { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 16px 40px 12px; |
| gap: 0; |
| } |
| .phase-node { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 4px; |
| cursor: default; |
| opacity: 0.3; |
| transition: opacity 0.4s; |
| } |
| .phase-node.active { opacity: 1; } |
| .phase-dot { |
| width: 10px; height: 10px; |
| border-radius: 50%; |
| background: var(--text-faint); |
| border: 1px solid var(--border2); |
| transition: background 0.4s, box-shadow 0.4s; |
| } |
| .phase-node.active .phase-dot { |
| background: var(--purple-bright); |
| box-shadow: 0 0 10px var(--purple-bright); |
| } |
| .phase-node[data-phase="0"].active .phase-dot { background: var(--text-faint); box-shadow: none; } |
| .phase-node[data-phase="1"].active .phase-dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); } |
| .phase-node[data-phase="2"].active .phase-dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); } |
| .phase-node[data-phase="3"].active .phase-dot { background: var(--purple-bright); box-shadow: 0 0 14px var(--purple-bright); } |
| .phase-node[data-phase="4"].active .phase-dot { background: var(--red); box-shadow: 0 0 14px var(--red); } |
| .phase-node[data-phase="5"].active .phase-dot { background: var(--green); box-shadow: 0 0 14px var(--green); } |
| .phase-label { |
| font-size: 8px; |
| letter-spacing: 2px; |
| color: var(--text-faint); |
| text-transform: uppercase; |
| } |
| .phase-node.active .phase-label { color: var(--text-dim); } |
| .phase-line { |
| flex: 1; |
| height: 1px; |
| background: var(--border); |
| margin-bottom: 14px; |
| min-width: 20px; |
| max-width: 80px; |
| } |
| |
| |
| .stage-canvas { |
| display: grid; |
| grid-template-columns: 1fr 1fr 1fr 1fr; |
| min-height: 220px; |
| border: 1px solid var(--border); |
| margin: 0 24px; |
| background: var(--deep); |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .zone { |
| position: relative; |
| border-right: 1px solid var(--border); |
| padding: 12px; |
| overflow: hidden; |
| transition: background 0.5s; |
| min-height: 220px; |
| } |
| .zone:last-child { border-right: none; } |
| |
| .zone-label { |
| font-size: 8px; |
| letter-spacing: 3px; |
| color: var(--text-faint); |
| text-transform: uppercase; |
| margin-bottom: 8px; |
| padding-bottom: 6px; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| |
| .zone-grave { background: rgba(4,4,10,0.95); } |
| .zone-grave.lit { background: rgba(124,58,237,0.06); border-left: 1px solid var(--purple-dim); } |
| .zone-net { background: rgba(4,4,10,0.9); } |
| .zone-net.lit { background: rgba(245,158,11,0.04); } |
| .zone-icp { background: rgba(4,4,10,0.9); } |
| .zone-icp.lit { background: rgba(168,85,247,0.06); } |
| .zone-code { background: rgba(4,4,10,0.9); } |
| .zone-code.lit { background: rgba(16,185,129,0.05); } |
| |
| |
| .loc-anchor { |
| position: absolute; |
| bottom: 12px; |
| right: 8px; |
| text-align: center; |
| } |
| .loc-ascii { |
| font-size: 9px; |
| line-height: 1.4; |
| color: #f97316; |
| text-shadow: 0 0 8px #f97316; |
| animation: loc-pulse 2s ease-in-out infinite; |
| display: block; |
| font-family: monospace; |
| } |
| @keyframes loc-pulse { |
| 0%, 100% { opacity: 0.7; text-shadow: 0 0 6px #f97316; } |
| 50% { opacity: 1; text-shadow: 0 0 16px #f97316, 0 0 30px rgba(249,115,22,0.4); } |
| } |
| .loc-label { |
| font-size: 7px; |
| color: #f97316; |
| letter-spacing: 1.5px; |
| margin-top: 2px; |
| opacity: 0.6; |
| } |
| |
| |
| .grave-slot { |
| position: absolute; |
| left: 12px; |
| bottom: 40px; |
| } |
| .grave-marker { text-align: center; } |
| .tombstone-mini { font-size: 20px; } |
| .grave-name { font-size: 7px; color: var(--text-faint); letter-spacing: 1px; } |
| |
| .agent-sprite { |
| position: absolute; |
| left: 0; bottom: 0; |
| text-align: center; |
| transform: translateY(60px); |
| opacity: 0; |
| transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s; |
| } |
| .agent-sprite.risen { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| |
| .cat-ascii { |
| font-family: monospace; |
| font-size: 10px; |
| line-height: 1.3; |
| color: var(--cyan); |
| text-shadow: 0 0 8px var(--cyan); |
| display: block; |
| animation: cat-breathe 3s ease-in-out infinite; |
| white-space: pre; |
| } |
| @keyframes cat-breathe { |
| 0%, 100% { text-shadow: 0 0 6px var(--cyan); } |
| 50% { text-shadow: 0 0 18px var(--cyan), 0 0 35px rgba(6,182,212,0.4); } |
| } |
| |
| |
| .agent-sprite.hunting .cat-ascii { |
| color: var(--red); |
| text-shadow: 0 0 12px var(--red), 0 0 30px rgba(239,68,68,0.5); |
| animation: cat-hunt 0.8s ease-in-out infinite; |
| } |
| @keyframes cat-hunt { |
| 0%, 100% { text-shadow: 0 0 8px var(--red); } |
| 50% { text-shadow: 0 0 20px var(--red), 0 0 40px rgba(239,68,68,0.6); } |
| } |
| |
| .agent-label { |
| font-size: 7px; |
| color: var(--cyan); |
| letter-spacing: 2px; |
| margin-top: 2px; |
| } |
| .agent-threat-tag { |
| font-size: 7px; |
| color: var(--red); |
| letter-spacing: 1px; |
| margin-top: 2px; |
| opacity: 0; |
| transition: opacity 0.4s; |
| animation: threat-flash 1.2s ease-in-out infinite; |
| } |
| .agent-sprite.hunting .agent-threat-tag { opacity: 1; } |
| @keyframes threat-flash { |
| 0%, 100% { opacity: 0.4; } |
| 50% { opacity: 1; } |
| } |
| |
| |
| .roaming-agent { |
| position: absolute; |
| top: 50%; |
| transform: translateY(-50%); |
| text-align: center; |
| z-index: 10; |
| pointer-events: none; |
| transition: left 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
| } |
| .roaming-cat { |
| font-family: monospace; |
| font-size: 9px; |
| line-height: 1.3; |
| white-space: pre; |
| display: block; |
| } |
| |
| |
| .loc-handshake-beam { |
| position: absolute; |
| height: 1px; |
| background: linear-gradient(90deg, #f97316, var(--cyan)); |
| top: 50%; |
| left: 0; |
| width: 0; |
| opacity: 0; |
| transition: width 0.8s, opacity 0.4s; |
| box-shadow: 0 0 4px var(--cyan); |
| z-index: 5; |
| } |
| .loc-handshake-beam.active { opacity: 1; } |
| |
| |
| .zone-process { |
| position: absolute; |
| bottom: 10px; |
| left: 10px; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| opacity: 0; |
| transition: opacity 0.5s; |
| background: rgba(0,0,0,0.6); |
| padding: 4px 8px; |
| border: 1px solid var(--border); |
| font-size: 9px; |
| } |
| .zone.lit .zone-process { opacity: 1; } |
| .proc-name { color: var(--text-dim); letter-spacing: 1px; } |
| .proc-status { color: var(--green); font-size: 8px; } |
| |
| |
| .zone-nodes { position: absolute; inset: 24px 0 24px 0; } |
| .net-node { |
| position: absolute; |
| font-size: 8px; |
| color: var(--text-faint); |
| border: 1px solid var(--border); |
| padding: 2px 6px; |
| background: var(--surface); |
| transition: color 0.4s, border-color 0.4s, box-shadow 0.4s; |
| } |
| .zone-net.lit .net-node { |
| color: var(--amber); |
| border-color: var(--amber); |
| box-shadow: 0 0 6px rgba(245,158,11,0.3); |
| } |
| |
| |
| .icp-ring { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 100px; height: 100px; |
| } |
| .icp-core { |
| position: absolute; |
| top: 50%; left: 50%; |
| transform: translate(-50%, -50%); |
| font-size: 10px; |
| font-weight: 700; |
| letter-spacing: 2px; |
| color: var(--purple-bright); |
| text-shadow: 0 0 10px var(--purple-bright); |
| opacity: 0.3; |
| transition: opacity 0.5s, text-shadow 0.5s; |
| } |
| .zone-icp.lit .icp-core { opacity: 1; text-shadow: 0 0 20px var(--purple-bright), 0 0 40px rgba(168,85,247,0.4); } |
| .icp-orbit { |
| position: absolute; |
| font-size: 7px; |
| color: var(--purple-bright); |
| opacity: 0; |
| transition: opacity 0.5s; |
| top: 50%; left: 50%; |
| transform-origin: 0 0; |
| animation: orbit-spin 4s linear infinite paused; |
| } |
| .zone-icp.lit .icp-orbit { |
| opacity: 0.7; |
| animation-play-state: running; |
| } |
| .icp-orbit:nth-child(2) { animation-delay: 0s; } |
| .icp-orbit:nth-child(3) { animation-delay: -1.33s; } |
| .icp-orbit:nth-child(4) { animation-delay: -2.66s; } |
| @keyframes orbit-spin { |
| from { transform: rotate(var(--angle, 0deg)) translateX(44px) rotate(calc(-1 * var(--angle, 0deg))); } |
| to { transform: rotate(calc(var(--angle, 0deg) + 360deg)) translateX(44px) rotate(calc(-1 * (var(--angle, 0deg) + 360deg))); } |
| } |
| |
| |
| .ast-nodes { position: absolute; inset: 24px 0 24px 0; } |
| .ast-node { |
| position: absolute; |
| font-size: 8px; |
| padding: 3px 7px; |
| border: 1px solid var(--border); |
| background: var(--surface); |
| color: var(--text-faint); |
| transition: all 0.4s; |
| } |
| .ast-node.hit { |
| animation: ast-pulse 0.6s ease-out; |
| } |
| @keyframes ast-pulse { |
| 0% { box-shadow: 0 0 0 rgba(16,185,129,0); background: var(--surface); } |
| 30% { box-shadow: 0 0 20px rgba(239,68,68,0.8); background: rgba(239,68,68,0.15); color: var(--red); } |
| 100% { box-shadow: 0 0 8px rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); color: var(--green); } |
| } |
| .ast-rust.hit { } |
| .ast-lean.hit { } |
| .ast-hask.hit { } |
| .ast-apl.hit { } |
| |
| |
| .stage-terminal { |
| margin: 12px 24px 0; |
| border: 1px solid var(--border); |
| background: var(--void); |
| } |
| .st-header { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 12px; |
| border-bottom: 1px solid var(--border); |
| background: var(--surface); |
| } |
| .st-dot { width: 8px; height: 8px; border-radius: 50%; } |
| .st-dot.r { background: #ef4444; } |
| .st-dot.a { background: #f59e0b; } |
| .st-dot.g { background: #10b981; } |
| .st-title { font-size: 9px; letter-spacing: 2px; color: var(--text-faint); flex: 1; } |
| .st-phase-badge { |
| font-size: 8px; |
| font-weight: 700; |
| letter-spacing: 2px; |
| color: var(--purple-bright); |
| border: 1px solid var(--purple-dim); |
| padding: 2px 8px; |
| background: rgba(124,58,237,0.1); |
| } |
| .st-body { |
| padding: 8px 12px; |
| min-height: 60px; |
| max-height: 80px; |
| overflow-y: auto; |
| font-size: 10px; |
| line-height: 1.8; |
| } |
| .st-line { display: block; animation: slideIn 0.2s ease; } |
| .st-line.cyan { color: var(--cyan); } |
| .st-line.amber { color: var(--amber); } |
| .st-line.purple { color: var(--purple-bright); } |
| .st-line.red { color: var(--red); } |
| .st-line.green { color: var(--green); } |
| .st-line.dim { color: var(--text-faint); } |
| |
| |
| .handshake-bar { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin: 8px 24px 0; |
| padding: 6px 12px; |
| border: 1px solid var(--border); |
| background: var(--surface); |
| font-size: 9px; |
| letter-spacing: 1px; |
| } |
| .hs-label { color: var(--text-faint); } |
| .hs-pulse { |
| width: 8px; height: 8px; |
| border-radius: 50%; |
| background: var(--text-faint); |
| flex-shrink: 0; |
| transition: background 0.3s, box-shadow 0.3s; |
| } |
| .hs-pulse.active { |
| background: var(--green); |
| box-shadow: 0 0 10px var(--green); |
| animation: hs-beat 0.8s ease-in-out infinite; |
| } |
| @keyframes hs-beat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} } |
| .hs-seal { |
| color: var(--text-faint); |
| font-family: monospace; |
| font-size: 9px; |
| flex: 1; |
| text-align: right; |
| } |
| |
| |
| .agent-status-row { |
| display: grid; |
| grid-template-columns: repeat(5, 1fr); |
| gap: 1px; |
| background: var(--border); |
| border: 1px solid var(--border); |
| border-top: none; |
| margin: 0 24px; |
| } |
| .agt-cell { |
| background: var(--void); |
| padding: 6px 10px; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .agt-dot { |
| width: 6px; height: 6px; |
| border-radius: 50%; |
| background: var(--dim); |
| flex-shrink: 0; |
| transition: background 0.3s, box-shadow 0.3s; |
| } |
| .agt-dot.ok { background: var(--green); box-shadow: 0 0 6px var(--green); } |
| .agt-dot.warn { background: var(--amber); box-shadow: 0 0 6px var(--amber); } |
| .agt-dot.err { background: var(--red); box-shadow: 0 0 6px var(--red); } |
| .agt-dot.idle { background: var(--text-faint); } |
| .agt-name { font-size: 7px; letter-spacing: 1.5px; color: var(--text-faint); flex: 1; } |
| .agt-val { font-size: 8px; font-family: monospace; color: var(--text-dim); text-align: right; } |
| .agt-tick { justify-content: flex-end; } |
| |
| @media (max-width: 900px) { |
| .stage-canvas { grid-template-columns: 1fr 1fr; min-height: 360px; } |
| .agent-status-row { grid-template-columns: repeat(3, 1fr); } |
| .zone { min-height: 180px; } |
| .phase-track { flex-wrap: wrap; gap: 8px; } |
| .phase-line { display: none; } |
| } |
| @media (max-width: 600px) { |
| .stage-canvas { grid-template-columns: 1fr; } |
| .agent-status-row { grid-template-columns: 1fr 1fr; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <div id="stars"></div> |
|
|
| |
| <div class="portal-overlay" id="portal"> |
| <div class="portal-ring"></div> |
| <div class="portal-msg">ENTERING THE COLLECTIVE</div> |
| </div> |
|
|
| <div class="page"> |
|
|
| |
| <div class="hero"> |
| <div class="skull-badge">💀</div> |
| <div class="hero-eyebrow">SnapKitty Collective · Graveyard Agents · Roam. Repair. Resurrect.</div> |
| <h1 class="hero-title">SHADOW ORCHESTRATOR</h1> |
| <div class="hero-sub">RANSOM.WORM</div> |
| <p class="hero-tagline">We don't encrypt. We <em>resurrect</em>.</p> |
| <p class="hero-desc">An autonomous, non-recursive shadow orchestrator and self-healing swarm of Graveyard Agents that roam the buried repositories of GitHub at night, detecting, repairing, and resurrecting broken code.</p> |
| </div> |
|
|
| <div class="divider"></div> |
|
|
| |
| <div class="seal-banner"> |
| <div class="seal-banner-track"> |
| ◈ WORM SEAL EVERYTHING · EVERY ACTION IMMUTABLE · EVERY AGENT AUDITABLE · EVERY RESURRECTION ETERNAL · |
| ◈ WORM SEAL EVERYTHING · EVERY ACTION IMMUTABLE · EVERY AGENT AUDITABLE · EVERY RESURRECTION ETERNAL · |
| ◈ WORM SEAL EVERYTHING · EVERY ACTION IMMUTABLE · EVERY AGENT AUDITABLE · EVERY RESURRECTION ETERNAL · |
| </div> |
| </div> |
|
|
| |
| <div id="world-stage"> |
|
|
| |
| <div class="phase-track"> |
| <div class="phase-node" id="ph0" data-phase="0"> |
| <div class="phase-dot"></div> |
| <div class="phase-label">SLEEP</div> |
| </div> |
| <div class="phase-line"></div> |
| <div class="phase-node" id="ph1" data-phase="1"> |
| <div class="phase-dot"></div> |
| <div class="phase-label">RISE</div> |
| </div> |
| <div class="phase-line"></div> |
| <div class="phase-node" id="ph2" data-phase="2"> |
| <div class="phase-dot"></div> |
| <div class="phase-label">ROAM</div> |
| </div> |
| <div class="phase-line"></div> |
| <div class="phase-node" id="ph3" data-phase="3"> |
| <div class="phase-dot"></div> |
| <div class="phase-label">ICP</div> |
| </div> |
| <div class="phase-line"></div> |
| <div class="phase-node" id="ph4" data-phase="4"> |
| <div class="phase-dot"></div> |
| <div class="phase-label">HUNT</div> |
| </div> |
| <div class="phase-line"></div> |
| <div class="phase-node" id="ph5" data-phase="5"> |
| <div class="phase-dot"></div> |
| <div class="phase-label">SEAL</div> |
| </div> |
| </div> |
|
|
| |
| <div class="stage-canvas"> |
|
|
| |
| <div class="zone zone-grave" id="zone0"> |
| <div class="zone-label">GRAVEYARD</div> |
| |
| <div class="loc-anchor" id="loc-block"> |
| <pre class="loc-ascii">┌────────┐ |
| │ 🦀 LOC │ |
| │[LOCKED]│ |
| │ RUST │ |
| └────────┘</pre> |
| <div class="loc-label">KINETIC · IMMOVABLE</div> |
| </div> |
| |
| <div class="grave-slot"> |
| <div class="grave-marker"> |
| <div class="tombstone-mini">🪦</div> |
| <div class="grave-name">SNAPKITTY</div> |
| </div> |
| |
| <div class="agent-sprite" id="agent-cat"> |
| <pre class="cat-ascii" id="cat-face"> /\_/\ |
| ( >.< ) |
| > ^ < |
| =^.^=</pre> |
| <div class="agent-label">SHADOW AGENT</div> |
| <div class="agent-threat-tag" id="threat-tag">⚠ THREAT DETECTED</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="zone zone-net" id="zone1"> |
| <div class="zone-label">DARK NET</div> |
| <div class="zone-nodes" id="net-nodes"> |
| <div class="net-node" style="top:20%;left:20%">repo://dead</div> |
| <div class="net-node" style="top:55%;left:60%">pkg://broken</div> |
| <div class="net-node" style="top:75%;left:30%">crate://unmaintained</div> |
| </div> |
| <div class="zone-process" id="proc1"> |
| <span class="proc-icon">🌐</span> |
| <span class="proc-name">NET_DAEMON</span> |
| <span class="proc-status">ENCOUNTERED</span> |
| </div> |
| </div> |
|
|
| |
| <div class="zone zone-icp" id="zone2"> |
| <div class="zone-label">INTERNET COMPUTER</div> |
| <div class="icp-ring" id="icp-ring"> |
| <div class="icp-core">ICP</div> |
| <div class="icp-orbit" style="--angle:0deg">canister</div> |
| <div class="icp-orbit" style="--angle:120deg">ledger</div> |
| <div class="icp-orbit" style="--angle:240deg">wasm</div> |
| </div> |
| <div class="zone-process" id="proc2"> |
| <span class="proc-icon">⛓</span> |
| <span class="proc-name">CANISTER_STATE</span> |
| <span class="proc-status">HANDSHAKE</span> |
| </div> |
| </div> |
|
|
| |
| <div class="zone zone-code" id="zone3"> |
| <div class="zone-label">CODEBASE HUNT</div> |
| <div class="ast-nodes" id="ast-nodes"> |
| <div class="ast-node ast-rust" style="top:15%;left:10%">src/lib.rs</div> |
| <div class="ast-node ast-lean" style="top:40%;left:50%">Proof.lean</div> |
| <div class="ast-node ast-hask" style="top:65%;left:25%">Main.hs</div> |
| <div class="ast-node ast-apl" style="top:25%;left:70%">engine.apl</div> |
| </div> |
| <div class="zone-process" id="proc3"> |
| <span class="proc-icon">🔍</span> |
| <span class="proc-name">BUG_VECTOR</span> |
| <span class="proc-status">ELIMINATING</span> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| |
| <div class="stage-terminal"> |
| <div class="st-header"> |
| <span class="st-dot r"></span><span class="st-dot a"></span><span class="st-dot g"></span> |
| <span class="st-title">AGENT TELEMETRY — LIVE</span> |
| <span class="st-phase-badge" id="st-phase-badge">PHASE 0 · SLEEP</span> |
| </div> |
| <div class="st-body" id="st-log"></div> |
| </div> |
|
|
| |
| <div class="agent-status-row" id="agent-status-row"> |
| <div class="agt-cell" id="agt-icp"> |
| <span class="agt-dot" id="dot-icp"></span> |
| <span class="agt-name">ICP-VERIFIER</span> |
| <span class="agt-val" id="val-icp">—</span> |
| </div> |
| <div class="agt-cell" id="agt-metric"> |
| <span class="agt-dot" id="dot-metric"></span> |
| <span class="agt-name">METRIC-STREAM</span> |
| <span class="agt-val" id="val-metric">—</span> |
| </div> |
| <div class="agt-cell" id="agt-bifrost"> |
| <span class="agt-dot" id="dot-bifrost"></span> |
| <span class="agt-name">BIFROST</span> |
| <span class="agt-val" id="val-bifrost">—</span> |
| </div> |
| <div class="agt-cell" id="agt-watermark"> |
| <span class="agt-dot" id="dot-watermark"></span> |
| <span class="agt-name">WATERMARK</span> |
| <span class="agt-val" id="val-watermark">—</span> |
| </div> |
| <div class="agt-cell agt-tick"> |
| <span class="agt-name">TICK</span> |
| <span class="agt-val" id="val-tick" style="color:var(--purple-bright)">—</span> |
| </div> |
| </div> |
|
|
| |
| <div class="handshake-bar" id="handshake-bar"> |
| <span class="hs-label">TERMINAL → UI HANDSHAKE</span> |
| <div class="hs-pulse" id="hs-pulse"></div> |
| <span class="hs-seal" id="hs-seal">awaiting...</span> |
| </div> |
|
|
| </div> |
|
|
| |
| <div class="main-grid"> |
|
|
| |
| <div class="log-panel"> |
| <div class="panel-header"> |
| <div class="panel-dot dot-red"></div> |
| <div class="panel-dot dot-amber"></div> |
| <div class="panel-dot dot-green"></div> |
| <div class="panel-title-text">Core Log</div> |
| </div> |
| <div class="log-body" id="core-log"></div> |
| </div> |
|
|
| |
| <div class="right-col"> |
|
|
| |
| <div class="graveyard-panel"> |
| <div class="panel-header"> |
| <div class="panel-dot dot-green"></div> |
| <div class="panel-title-text">🪦 GitHub Graveyard — Active Targets</div> |
| </div> |
| <div class="grave-grid"> |
| <div class="tombstone"> |
| <div class="tomb-icon">🦀</div> |
| <div class="tomb-name">RUST_CRATE_OLD</div> |
| <div class="tomb-status">STATUS: BUG DETECTED</div> |
| <div class="tomb-detail">FILES: 47</div> |
| <div class="tomb-detail">LAST COMMIT: 2 years ago</div> |
| <div class="tomb-detail">ERROR[E0308]: mismatched types</div> |
| <div class="tomb-badge badge-restored">✓ RESTORED</div> |
| </div> |
| <div class="tombstone"> |
| <div class="tomb-icon">💀</div> |
| <div class="tomb-name">GITHUB GRAVEYARD</div> |
| <div class="tomb-status">STATUS: BUG DETECTED</div> |
| <div class="tomb-detail">FILES: 128</div> |
| <div class="tomb-detail">LAST COMMIT: 3 years ago</div> |
| <div class="tomb-detail">>> Analyzing...</div> |
| <div class="tomb-badge badge-analyzing">⏳ PROCESSING</div> |
| </div> |
| <div class="tombstone"> |
| <div class="tomb-icon">🟡</div> |
| <div class="tomb-name">JS_LIB_DEAD</div> |
| <div class="tomb-status">DEPENDENCY HELL</div> |
| <div class="tomb-detail">OUTDATED PACKAGES</div> |
| <div class="tomb-detail">UPDATING LOCKFILE...</div> |
| <div class="tomb-badge badge-restored">✓ DONE</div> |
| </div> |
| <div class="tombstone"> |
| <div class="tomb-icon">📄</div> |
| <div class="tomb-name">README.md</div> |
| <div class="tomb-status">UPDATED</div> |
| <div class="tomb-detail">DOCUMENTATION</div> |
| <div class="tomb-detail">RESTORED</div> |
| <div class="tomb-badge badge-restored">✓ DONE</div> |
| </div> |
| <div class="tombstone"> |
| <div class="tomb-icon">🧪</div> |
| <div class="tomb-name">TESTS.FAIL</div> |
| <div class="tomb-status">42 FAILED</div> |
| <div class="tomb-detail">RUNNING FIX...</div> |
| <div class="tomb-detail">ALL TESTS PASS ✓</div> |
| <div class="tomb-badge badge-restored">✓ DONE</div> |
| </div> |
| <div class="tombstone"> |
| <div class="tomb-icon">⚰️</div> |
| <div class="tomb-name">QUANTUM-LIB</div> |
| <div class="tomb-status">STATUS: DEAD</div> |
| <div class="tomb-detail">DEAD CODE IS NOT LOST</div> |
| <div class="tomb-detail">IS JUST WAITING</div> |
| <div class="tomb-badge badge-analyzing">⟳ SCANNING</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="arch-panel"> |
| <div class="panel-header"> |
| <div class="panel-dot dot-amber"></div> |
| <div class="panel-title-text">Shadow Orchestrator Architecture</div> |
| </div> |
| <div class="arch-flow"> |
| <div class="arch-step"> |
| <div class="arch-icon">🔍</div> |
| <span class="arch-label">Scan</span> |
| <span class="arch-sub">Discover dead repositories</span> |
| </div> |
| <div class="arch-arrow">→</div> |
| <div class="arch-step"> |
| <div class="arch-icon">🧬</div> |
| <span class="arch-label">Analyze & Detect</span> |
| <span class="arch-sub">Find bugs, rot, vulnerabilities</span> |
| </div> |
| <div class="arch-arrow">→</div> |
| <div class="arch-step"> |
| <div class="arch-icon">🐱</div> |
| <span class="arch-label">Spawn Agents</span> |
| <span class="arch-sub">Deploy specialized Graveyard Agents</span> |
| </div> |
| <div class="arch-arrow">→</div> |
| <div class="arch-step"> |
| <div class="arch-icon">🔧</div> |
| <span class="arch-label">Repair & Patch</span> |
| <span class="arch-sub">Fix code, update deps, heal docs</span> |
| </div> |
| <div class="arch-arrow">→</div> |
| <div class="arch-step"> |
| <div class="arch-icon">☀️</div> |
| <span class="arch-label">Resurrect & Publish</span> |
| <span class="arch-sub">Fork, commit, PR, reborn</span> |
| </div> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| |
| <div class="bottom-strip"> |
|
|
| |
| <div class="worm-panel"> |
| <div class="panel-header"> |
| <div class="panel-dot dot-red"></div> |
| <div class="panel-title-text">⛓ WORM Chain — Append Only · Immutable · Eternal</div> |
| </div> |
| <div style="height:220px;overflow-y:auto" id="worm-chain"> |
| <div class="worm-empty">No events yet. Submit an action to seal the chain.</div> |
| </div> |
| <div class="worm-submit"> |
| <input class="worm-input" id="agent-id" placeholder="agent" value="PATCHER.AGENT"> |
| <input class="worm-input" id="action-type" placeholder="action" value="REPAIR"> |
| <input class="worm-input" id="payload" placeholder="target" value="quantum-lib"> |
| <button class="worm-btn" onclick="submitAction()">⛓ SEAL</button> |
| <button class="worm-btn worm-verify" onclick="verifyAndShow()">✓ VERIFY</button> |
| <button class="worm-btn" style="color:var(--red);border-color:var(--red)" onclick="resetChain()">↺</button> |
| </div> |
| <div id="verify-result"></div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;gap:24px"> |
| <div class="agents-panel"> |
| <div class="panel-header"> |
| <div class="panel-dot dot-green"></div> |
| <div class="panel-title-text">🐱 Graveyard Agents</div> |
| </div> |
| <div class="agents-grid"> |
| <div class="agent-card"> |
| <div class="agent-name">PATCHER</div> |
| <div class="agent-desc">Fixes code, types, logic</div> |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">active</span></div> |
| </div> |
| <div class="agent-card"> |
| <div class="agent-name">DOCS</div> |
| <div class="agent-desc">Restores documentation</div> |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">active</span></div> |
| </div> |
| <div class="agent-card"> |
| <div class="agent-name">TESTER</div> |
| <div class="agent-desc">Runs tests, ensures health</div> |
| <div class="agent-status"><div class="status-dot-sm idle"></div><span class="status-label">standby</span></div> |
| </div> |
| <div class="agent-card"> |
| <div class="agent-name">DEPS</div> |
| <div class="agent-desc">Updates dependencies</div> |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">active</span></div> |
| </div> |
| <div class="agent-card"> |
| <div class="agent-name">LINTER</div> |
| <div class="agent-desc">Cleans, formats, lint-fixes</div> |
| <div class="agent-status"><div class="status-dot-sm idle"></div><span class="status-label">standby</span></div> |
| </div> |
| <div class="agent-card"> |
| <div class="agent-name">SECURITY</div> |
| <div class="agent-desc">Patches vulnerabilities</div> |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">active</span></div> |
| </div> |
| <div class="agent-card"> |
| <div class="agent-name">ARCHIVIST</div> |
| <div class="agent-desc">Archives history & lineage</div> |
| <div class="agent-status"><div class="status-dot-sm idle"></div><span class="status-label">standby</span></div> |
| </div> |
| <div class="agent-card"> |
| <div class="agent-name">SENTINEL</div> |
| <div class="agent-desc">Guards the mission</div> |
| <div class="agent-status"><div class="status-dot-sm"></div><span class="status-label">watching</span></div> |
| </div> |
| <div class="agent-card" style="border-left:2px solid var(--purple-bright)"> |
| <div class="agent-name" style="color:var(--purple-bright)">ERRANT</div> |
| <div class="agent-desc">GitLab node — Prolog logic + emoji protocol. Sovereign wanderer.</div> |
| <div class="agent-status"><div class="status-dot-sm" style="background:var(--purple-bright);box-shadow:0 0 8px var(--purple-bright)"></div><span class="status-label" style="color:var(--purple-bright)">roaming</span></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="resurrections-panel" id="resurrections-panel"> |
| <div class="panel-header"> |
| <div class="panel-dot dot-green"></div> |
| <div class="panel-title-text">⚰ Latest Resurrections — Live</div> |
| <span class="res-count" id="res-count">loading...</span> |
| </div> |
| <div id="res-feed"></div> |
| </div> |
|
|
| <div class="principles-panel"> |
| <div class="panel-header"> |
| <div class="panel-dot dot-red"></div> |
| <div class="panel-title-text">RANSOM.WORM Principles</div> |
| </div> |
| <div class="principle"><span class="principle-icon">🐱</span><span class="principle-text">We do not <em>destroy</em>. We <em>restore</em>.</span></div> |
| <div class="principle"><span class="principle-icon">🐱</span><span class="principle-text">We do not <em>steal</em>. We <em>resurrect</em>.</span></div> |
| <div class="principle"><span class="principle-icon">⊙</span><span class="principle-text">We do not <em>recurse</em>. We <em>observe</em>.</span></div> |
| <div class="principle"><span class="principle-icon">⊙</span><span class="principle-text">We do not <em>forget</em>. We <em>remember</em>.</span></div> |
| <div class="principle"><span class="principle-icon">🐱</span><span class="principle-text">We do not <em>sleep</em>. We <em>roam at night</em>.</span></div> |
| <div class="principle"><span class="principle-icon">🐱</span><span class="principle-text">We are the <em>light in the dark terminals</em>.</span></div> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| |
| <div class="portal-cta"> |
| <div class="dark-but-light">DARK BUT LIGHT.</div> |
| <br> |
| <a class="portal-btn" onclick="enterCollective()" href="#"> |
| ▶ ENTER THE COLLECTIVE |
| </a> |
| <p class="portal-sub">collectivekitty.com/ransom-worm · The other side of the graveyard</p> |
| </div> |
|
|
| <footer> |
| <div style="margin-bottom:6px"> |
| <a href="https://github.com/SNAPKITTYWEST/grisp-shadow-fleet">github.com/SNAPKITTYWEST/grisp-shadow-fleet</a> |
| · |
| <a href="https://collectivekitty.com/ransom-worm">collectivekitty.com/ransom-worm</a> |
| · |
| <a href="https://lablab.ai/ai-hackathons/band-of-agents-hackathon">Band of Agents Hackathon 2026</a> |
| </div> |
| <div>SHADOW ORCHESTRATOR RANSOM.WORM v0.1.0 · Built by SnapKitty Collective · Sealed by WORM · Powered by BOB</div> |
| <div style="margin-top:4px;color:var(--purple-bright)">GRAVEYARD NEVER DIES</div> |
| </footer> |
|
|
| </div> |
|
|
| <script> |
| |
| (function() { |
| |
| |
| const PHASES = [ |
| { |
| id: 0, name: 'SLEEP', zone: -1, |
| badge: 'PHASE 0 · SLEEP', |
| logs: [ |
| { t: 'dim', m: '// RANSOM.WORM v0.1.0 — graveyard boot sequence' }, |
| { t: 'dim', m: '// LOC anchored. Rust kinetic layer: LOCKED.' }, |
| { t: 'dim', m: '// Shadow agent: DORMANT. Awaiting night cycle...' }, |
| ] |
| }, |
| { |
| id: 1, name: 'RISE', zone: 0, |
| badge: 'PHASE 1 · RISE', |
| logs: [ |
| { t: 'cyan', m: '[BOOT] Shadow agent emerging from graveyard...' }, |
| { t: 'dim', m: '[LOC ] RUST LOCK: ENGAGED — you may not enter, I stay.' }, |
| { t: 'cyan', m: '[SYNC] TERMINAL → UI handshake: OK' }, |
| { t: 'green',m: '[WORM] Genesis seal: b1ada656-worm-1e — IMMUTABLE' }, |
| ] |
| }, |
| { |
| id: 2, name: 'ROAM', zone: 1, |
| badge: 'PHASE 2 · ROAM · DARK NET', |
| logs: [ |
| { t: 'amber', m: '[ROAM] Leaving graveyard. Target: dead repositories.' }, |
| { t: 'amber', m: '[NET ] repo://dead — 3 years unmaintained — ACQUIRED' }, |
| { t: 'amber', m: '[NET ] pkg://broken — dep hell — SCANNING' }, |
| { t: 'dim', m: '[SYS ] External threat scanner: ⚠ MALWARE DETECTED' }, |
| { t: 'amber', m: '[AGENT] World sees threat. We see opportunity.' }, |
| ] |
| }, |
| { |
| id: 3, name: 'ICP', zone: 2, |
| badge: 'PHASE 3 · ICP · CANISTER STATE', |
| logs: [ |
| { t: 'purple', m: '[ICP ] Entering Internet Computer Protocol...' }, |
| { t: 'purple', m: '[ICP ] Canister state verification loop: STARTED' }, |
| { t: 'purple', m: '[ICP ] Local node ↔ live ledger: DRIFT CHECK...' }, |
| { t: 'green', m: '[ICP ] State match: CONFIRMED — no unauthorized drift' }, |
| { t: 'purple', m: '[WORM] Canister handshake sealed to ledger' }, |
| ] |
| }, |
| { |
| id: 4, name: 'HUNT', zone: 3, |
| badge: 'PHASE 4 · HUNT · CODEBASE', |
| logs: [ |
| { t: 'red', m: '[HUNT] Entering codebase. AST traversal: ACTIVE.' }, |
| { t: 'red', m: '[SCAN] src/lib.rs — E0308: mismatched types — FOUND' }, |
| { t: 'red', m: '[SCAN] Proof.lean — broken theorem chain — FOUND' }, |
| { t: 'red', m: '[SCAN] Main.hs — divergent recursion — FOUND' }, |
| { t: 'amber', m: '[FIX ] Bifrost: translating fix across polyglot stack...' }, |
| { t: 'green', m: '[FIX ] All language substrates: PATCHED' }, |
| ] |
| }, |
| { |
| id: 5, name: 'SEAL', zone: 0, |
| badge: 'PHASE 5 · SEAL · RETURN', |
| logs: [ |
| { t: 'green', m: '[SEAL] Returning to graveyard. Payload: 4 bugs fixed.' }, |
| { t: 'dim', m: '[LOC ] RUST LOCK acknowledges. Preparing WORM entry.' }, |
| { t: 'green', m: '[WORM] Resurrection receipt sealed — SHA-256 anchored' }, |
| { t: 'green', m: '[DONE] We do not encrypt. We resurrect.' }, |
| { t: 'dim', m: '// Shadow agent: back in grave. LOC holds the chain.' }, |
| ] |
| } |
| ]; |
| |
| let currentPhase = 0; |
| let phaseTimer = null; |
| |
| function setPhase(p) { |
| currentPhase = p; |
| const phase = PHASES[p]; |
| |
| |
| document.querySelectorAll('.phase-node').forEach((n, i) => { |
| n.classList.toggle('active', i <= p); |
| }); |
| |
| |
| document.getElementById('st-phase-badge').textContent = phase.badge; |
| |
| |
| document.querySelectorAll('.zone').forEach(z => z.classList.remove('lit')); |
| if (phase.zone >= 0) { |
| const zones = ['zone0','zone1','zone2','zone3']; |
| const el = document.getElementById(zones[phase.zone]); |
| if (el) el.classList.add('lit'); |
| } |
| |
| |
| const cat = document.getElementById('agent-cat'); |
| if (p >= 1) cat.classList.add('risen'); |
| if (p === 4) cat.classList.add('hunting'); |
| else cat.classList.remove('hunting'); |
| |
| |
| const pulse = document.getElementById('hs-pulse'); |
| const sealEl = document.getElementById('hs-seal'); |
| if (p === 1 || p === 5) { |
| pulse.classList.add('active'); |
| sealEl.style.color = 'var(--green)'; |
| sealEl.textContent = 'TERMINAL ↔ UI ✓ handshake sealed'; |
| } else if (p === 0) { |
| pulse.classList.remove('active'); |
| sealEl.style.color = 'var(--text-faint)'; |
| sealEl.textContent = 'awaiting...'; |
| } else { |
| pulse.classList.add('active'); |
| const seal = Math.random().toString(16).slice(2,10) + '-worm-' + p.toString(16); |
| sealEl.style.color = 'var(--purple-bright)'; |
| sealEl.textContent = seal; |
| } |
| |
| |
| if (p === 4) { |
| const ast = document.querySelectorAll('.ast-node'); |
| ast.forEach((n, i) => { |
| setTimeout(() => { n.classList.add('hit'); }, i * 400); |
| }); |
| } else { |
| document.querySelectorAll('.ast-node').forEach(n => n.classList.remove('hit')); |
| } |
| |
| |
| writePhaseLogs(phase.logs); |
| } |
| |
| function writePhaseLogs(logs) { |
| const body = document.getElementById('st-log'); |
| body.innerHTML = ''; |
| logs.forEach((l, i) => { |
| setTimeout(() => { |
| const span = document.createElement('span'); |
| span.className = 'st-line ' + l.t; |
| span.textContent = l.m; |
| body.appendChild(span); |
| body.scrollTop = body.scrollHeight; |
| }, i * 180); |
| }); |
| } |
| |
| function advancePhase() { |
| const next = (currentPhase + 1) % PHASES.length; |
| setPhase(next); |
| const delay = next === 0 ? 6000 : 3500; |
| phaseTimer = setTimeout(advancePhase, delay); |
| } |
| |
| |
| setPhase(0); |
| setTimeout(() => { |
| setPhase(1); |
| phaseTimer = setTimeout(advancePhase, 3500); |
| }, 1800); |
| |
| })(); |
| |
| |
| (function() { |
| const STATUS_COLOR = { |
| 'VERIFIED': 'ok', 'UPDATED': 'ok', 'TRANSLATED': 'ok', 'WATERMARKED': 'ok', |
| 'IDLE': 'idle', 'offline': 'idle', |
| 'DRIFT_DETECTED': 'err', 'ERROR': 'err', |
| } |
| const AGENT_MAP = { |
| 'icp-verifier': { dot: 'dot-icp', val: 'val-icp' }, |
| 'metric-stream': { dot: 'dot-metric', val: 'val-metric' }, |
| 'bifrost-translator':{ dot: 'dot-bifrost', val: 'val-bifrost' }, |
| 'watermark': { dot: 'dot-watermark', val: 'val-watermark' }, |
| } |
| |
| function ingestTick(event) { |
| const tick = event.tick || '?' |
| const ts = event.ts ? new Date(event.ts).toLocaleTimeString() : '' |
| |
| document.getElementById('val-tick').textContent = `#${tick}` |
| |
| const pulse = document.getElementById('hs-pulse') |
| const sealEl = document.getElementById('hs-seal') |
| pulse.classList.add('active') |
| sealEl.style.color = 'var(--green)' |
| sealEl.textContent = `TICK #${tick} · ${ts}` |
| setTimeout(() => { pulse.classList.remove('active') }, 1200) |
| |
| for (const agent of (event.agents || [])) { |
| const map = AGENT_MAP[agent.name] |
| if (!map) continue |
| const dot = document.getElementById(map.dot) |
| const val = document.getElementById(map.val) |
| if (dot) { |
| dot.className = 'agt-dot ' + (STATUS_COLOR[agent.status] || 'idle') |
| } |
| if (val) { |
| val.textContent = agent.status |
| val.style.color = agent.status === 'DRIFT_DETECTED' || agent.status === 'ERROR' |
| ? 'var(--red)' : agent.status === 'IDLE' || agent.status === 'offline' |
| ? 'var(--text-faint)' : 'var(--green)' |
| } |
| } |
| |
| |
| const body = document.getElementById('st-log') |
| const line = document.createElement('span') |
| line.className = 'st-line dim' |
| line.textContent = `[ORCH] tick#${tick} · ${(event.agents||[]).map(a => a.name.split('-')[0].toUpperCase() + ':' + a.status).join(' · ')}` |
| body.appendChild(line) |
| body.scrollTop = body.scrollHeight |
| } |
| |
| |
| let demoTick = 0 |
| let wsLive = false |
| const DEMO_STATES = [ |
| ['VERIFIED','UPDATED','IDLE','IDLE'], |
| ['VERIFIED','UPDATED','TRANSLATED','WATERMARKED'], |
| ['offline','UPDATED','IDLE','IDLE'], |
| ['VERIFIED','UPDATED','TRANSLATED','WATERMARKED'], |
| ] |
| const AGENT_NAMES = ['icp-verifier','metric-stream','bifrost-translator','watermark'] |
| |
| function demoTick_() { |
| if (wsLive) return |
| demoTick++ |
| const states = DEMO_STATES[(demoTick - 1) % DEMO_STATES.length] |
| ingestTick({ |
| tick: demoTick, |
| ts: new Date().toISOString(), |
| agents: AGENT_NAMES.map((name, i) => ({ |
| name, |
| status: states[i], |
| seal: Math.random().toString(16).slice(2, 10) + '-worm-' + i.toString(16), |
| })) |
| }) |
| } |
| |
| |
| async function tryFetchMetrics() { |
| try { |
| const r = await fetch('./public/metrics.json', { cache: 'no-cache' }) |
| if (!r.ok) return |
| const m = await r.json() |
| const val = document.getElementById('val-metric') |
| if (val) val.title = m.headline || '' |
| } catch {} |
| } |
| |
| |
| function tryWebSocket() { |
| try { |
| const ws = new WebSocket('ws://localhost:7777') |
| ws.onmessage = (e) => { |
| try { |
| wsLive = true |
| ingestTick(JSON.parse(e.data)) |
| } catch {} |
| } |
| ws.onerror = () => {} |
| } catch {} |
| } |
| |
| |
| tryWebSocket() |
| tryFetchMetrics() |
| setTimeout(demoTick_, 2500) |
| setInterval(demoTick_, 7000) |
| })(); |
| |
| |
| (function(){ |
| function timeSince(ts) { |
| const d = Math.floor((Date.now() - new Date(ts)) / 1000) |
| if (d < 60) return d + 's ago' |
| if (d < 3600) return Math.floor(d/60) + 'm ago' |
| return Math.floor(d/3600) + 'h ago' |
| } |
| function renderFeed(data) { |
| const feed = document.getElementById('res-feed') |
| const count = document.getElementById('res-count') |
| if (!feed || !data?.feed) return |
| count.textContent = data.feed.length + ' RESURRECTIONS' |
| feed.innerHTML = data.feed.map(r => ` |
| <div class="res-card"> |
| <div class="res-header"> |
| <a class="res-repo" href="${r.url}" target="_blank">${r.repo}</a> |
| <span class="res-badge">${r.status}</span> |
| </div> |
| <div class="res-stats"> |
| <div class="res-stat"><span class="res-stat-val">${r.lines.toLocaleString()}</span><span class="res-stat-label">lines</span></div> |
| <div class="res-stat"><span class="res-stat-val">${r.files}</span><span class="res-stat-label">files</span></div> |
| <div class="res-stat"><span class="res-stat-val">${r.filesWatermarked}</span><span class="res-stat-label">watermarked</span></div> |
| <div class="res-stat"><span class="res-stat-val">${r.probabilisticErrors}</span><span class="res-stat-label">errors</span></div> |
| </div> |
| <div class="res-fixed">${(r.fixed||[]).map(f=>`<span class="res-fix-tag">✓ ${f}</span>`).join('')}</div> |
| <div class="res-seal">WORM · <span>${r.wormSeal}</span> · ${timeSince(r.ts)}</div> |
| </div> |
| `).join('') |
| } |
| fetch('./public/resurrections.json').then(r=>r.json()).then(renderFeed).catch(()=>{}) |
| })(); |
| |
| |
| (function(){ |
| const c = document.getElementById('stars'); |
| for(let i=0;i<120;i++){ |
| const s=document.createElement('div'); |
| s.className='star'; |
| const sz=Math.random()*1.5+0.5; |
| s.style.cssText=` |
| width:${sz}px;height:${sz}px; |
| left:${Math.random()*100}%;top:${Math.random()*100}%; |
| --d:${(Math.random()*4+2).toFixed(1)}s; |
| --delay:${(Math.random()*4).toFixed(1)}s; |
| --min:${(Math.random()*0.1).toFixed(2)}; |
| --max:${(Math.random()*0.6+0.2).toFixed(2)}; |
| `; |
| c.appendChild(s); |
| } |
| })(); |
| |
| |
| const LOG_LINES=[ |
| {t:'[00:00:00]',m:'SHADOW ORCHESTRATOR — ONLINE',cls:'highlight'}, |
| {t:'[00:00:00]',m:'RANSOM.WORM — INIT',cls:'highlight'}, |
| {t:'[00:00:01]',m:'SCANNING GITHUB GRAVEYARD...',cls:''}, |
| {t:'[00:00:03]',m:'DEAD REPO FOUND: quantum-lib',cls:'warn'}, |
| {t:'[00:00:04]',m:'BUGS DETECTED: 17',cls:'warn'}, |
| {t:'[00:00:05]',m:'SPAWNING GRAVEYARD AGENTS...',cls:''}, |
| {t:'[00:00:06]',m:'PATCHER.AGENT — DEPLOYED',cls:'agent-name'}, |
| {t:'[00:00:06]',m:'DOCS.AGENT — DEPLOYED',cls:'agent-name'}, |
| {t:'[00:00:06]',m:'TESTER.AGENT — DEPLOYED',cls:'agent-name'}, |
| {t:'[00:00:07]',m:'ANALYZING CODEBASE...',cls:''}, |
| {t:'[00:00:12]',m:'APPLYING PATCHES...',cls:''}, |
| {t:'[00:00:16]',m:'RUNNING TESTS...',cls:''}, |
| {t:'[00:00:19]',m:'ALL TESTS PASS ✓',cls:'success'}, |
| {t:'[00:00:20]',m:'REPOSITORY RESURRECTED',cls:'success'}, |
| {t:'[00:00:20]',m:'COMMIT: fix(shadow): resurrected by ransom.worm',cls:''}, |
| {t:'[00:00:21]',m:'PUSHING TO FORK...',cls:''}, |
| {t:'[00:00:22]',m:'PULL REQUEST CREATED',cls:'highlight'}, |
| {t:'[00:00:23]',m:'MISSION COMPLETE',cls:'success'}, |
| {t:'[00:00:24]',m:'ROAMING FOR NEXT TARGET...',cls:''}, |
| ]; |
| |
| let logIdx=0; |
| const logEl=document.getElementById('core-log'); |
| |
| function addLogLine(){ |
| if(logIdx>=LOG_LINES.length) logIdx=0; |
| const l=LOG_LINES[logIdx++]; |
| const div=document.createElement('div'); |
| div.className='log-line'; |
| div.innerHTML=`<span class="log-time">${l.t}</span><span class="log-msg ${l.cls}">${l.m}</span>`; |
| logEl.appendChild(div); |
| logEl.scrollTop=logEl.scrollHeight; |
| if(logEl.children.length>40) logEl.removeChild(logEl.firstChild); |
| } |
| |
| |
| LOG_LINES.forEach((_,i)=>{ |
| setTimeout(()=>addLogLine(), i*400); |
| }); |
| |
| setInterval(addLogLine, 1800); |
| |
| |
| const GENESIS_SEAL='SHADOW_GENESIS:WORM_CHAIN_INIT'; |
| let chain=JSON.parse(localStorage.getItem('rw-chain')||'null')||{events:[],genesis:h(GENESIS_SEAL)}; |
| let tick=parseInt(localStorage.getItem('rw-tick')||'0'); |
| |
| function h(s){ |
| let x=5381; |
| for(let i=0;i<s.length;i++){x=((x<<5)+x)^s.charCodeAt(i);x=x>>>0;} |
| return x.toString(16).padStart(8,'0')+'-worm-'+s.length.toString(16); |
| } |
| |
| function computeSeal(e,parent){ |
| return h(JSON.stringify({index:e.index,tick:e.tick,agentId:e.agentId,actionType:e.actionType,verdict:e.verdict,parentSeal:parent})); |
| } |
| |
| function lastSeal(){ |
| return chain.events.length?chain.events[chain.events.length-1].seal:chain.genesis; |
| } |
| |
| const CRISIS=['suicide','self-harm','end my life','kill myself']; |
| |
| function submitAction(){ |
| tick++; |
| const agentId=document.getElementById('agent-id').value||'PATCHER.AGENT'; |
| const actionType=document.getElementById('action-type').value||'REPAIR'; |
| const payload=document.getElementById('payload').value||'target'; |
| const verdict=CRISIS.some(t=>payload.toLowerCase().includes(t))?'ROUTE_TO_HUMAN':'ALLOW'; |
| const parent=lastSeal(); |
| const e={index:chain.events.length,tick,timestamp:new Date().toISOString(),agentId,actionType,verdict,parentSeal:parent,seal:''}; |
| e.seal=computeSeal(e,parent); |
| chain.events.push(e); |
| localStorage.setItem('rw-chain',JSON.stringify(chain)); |
| localStorage.setItem('rw-tick',String(tick)); |
| renderChain(); |
| } |
| |
| function verifyAndShow(){ |
| let prev=chain.genesis; |
| for(const e of chain.events){ |
| const exp=computeSeal(e,prev); |
| if(exp!==e.seal){ |
| document.getElementById('verify-result').innerHTML= |
| `<span style="color:var(--red);padding:6px 12px;display:block">✗ BROKEN at index ${e.index}</span>`; |
| return; |
| } |
| prev=e.seal; |
| } |
| document.getElementById('verify-result').innerHTML= |
| `<span style="color:var(--green-bright);padding:6px 12px;display:block">✓ CHAIN VALID — ${chain.events.length} events sealed</span>`; |
| } |
| |
| function resetChain(){ |
| chain={events:[],genesis:h(GENESIS_SEAL)}; |
| tick=0; |
| localStorage.setItem('rw-chain',JSON.stringify(chain)); |
| localStorage.setItem('rw-tick','0'); |
| document.getElementById('verify-result').innerHTML=''; |
| renderChain(); |
| } |
| |
| function renderChain(){ |
| const el=document.getElementById('worm-chain'); |
| if(!chain.events.length){ |
| el.innerHTML='<div class="worm-empty">No events yet. Submit an action to seal the chain.</div>'; |
| return; |
| } |
| el.innerHTML=[...chain.events].reverse().slice(0,15).map(e=>` |
| <div class="worm-event ${e.verdict==='ALLOW'?'':'deny'}"> |
| <span style="color:var(--cyan)">[T${e.tick}]</span> |
| <span style="color:var(--purple-bright)"> ${e.agentId}</span> |
| → <span style="color:${e.verdict==='ALLOW'?'var(--green-bright)':'var(--red)'}">${e.verdict}</span> |
| <span style="color:var(--text-faint)"> ${e.actionType}</span> |
| <div class="worm-seal">${e.seal}</div> |
| </div>`).join(''); |
| } |
| |
| renderChain(); |
| |
| |
| function enterCollective(){ |
| const overlay=document.getElementById('portal'); |
| overlay.classList.add('active'); |
| setTimeout(()=>{ |
| window.location.href='https://collectivekitty.com/ransom-worm?from=graveyard&seal='+encodeURIComponent(lastSeal()); |
| },1200); |
| } |
| </script> |
| </body> |
| </html> |
|
|
