snapkitty
compilers
python
SNAPKITTYWEST's picture
push from SNAPKITTYWEST/sovereign-temporal-root
34a9b26 verified
Raw History Blame Contribute Delete
54.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sovereign Temporal Root — Ahmad Ali Parr</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--green: #00FF88;
--yellow: #FFD60A;
--red: #FF3B30;
--bg: #050507;
--bg2: #0a0a0c;
--text: #E6E6E6;
}
body {
background: var(--bg);
color: var(--text);
font-family: 'Space Grotesk', system-ui, sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
.mono { font-family: 'JetBrains Mono', monospace !important; }
@keyframes pulse-green {
0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(0,255,136,0.6); }
50% { opacity:0.8; box-shadow:0 0 0 8px rgba(0,255,136,0); }
}
@keyframes spin-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes spin-rev { from { transform:rotate(360deg); } to { transform:rotate(0deg); } }
@keyframes scanline { 0% { left:-100%; } 100% { left:200%; } }
@keyframes ping { 75%,to { transform:scale(2); opacity:0; } }
.pulse { animation: pulse-green 2s infinite; }
.spin { animation: spin-slow 22s linear infinite; }
.spin-slow { animation: spin-slow 40s linear infinite; }
.spin-rev { animation: spin-rev 18s linear infinite; }
/* NAV */
nav {
position: sticky; top: 0; z-index: 40;
backdrop-filter: blur(24px);
background: rgba(5,5,7,0.8);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner {
max-width: 1440px; margin: 0 auto;
padding: 0 2.5rem;
height: 56px;
display: flex; align-items: center; justify-content: space-between;
}
.nav-left { display: flex; align-items: center; gap: 1rem; }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.nav-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.14em; font-size: 12px; }
.nav-right { display: flex; align-items: center; gap: 1.25rem; }
.nav-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.7; display: flex; gap: 1rem; }
.btn-primary {
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
background: var(--green); color: black; border: none; padding: 0 1.25rem; height: 32px; cursor: pointer;
transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }
/* STATUS BAR */
.status-bar {
position: sticky; top: 56px; z-index: 30;
background: var(--bg2); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.status-inner {
max-width: 1440px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) { .status-inner { grid-template-columns: repeat(2,1fr); } }
.status-cell {
padding: 0.75rem 2rem;
border-right: 1px solid rgba(255,255,255,0.06);
display: flex; flex-direction: column; gap: 4px;
}
.status-cell:last-child { border-right: none; }
.status-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; opacity: 0.4; }
.status-value { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px; }
.badge { font-size: 8px; letter-spacing: 0.1em; padding: 2px 8px; border: 1px solid; }
.badge-green { background: rgba(0,255,136,0.15); color: var(--green); border-color: rgba(0,255,136,0.2); }
.badge-yellow { background: rgba(255,214,10,0.15); color: var(--yellow); border-color: rgba(255,214,10,0.2); }
.badge-pulse { animation: pulse-green 2s infinite; }
/* HERO */
.hero {
max-width: 1440px; margin: 0 auto;
padding: 5rem 2.5rem 4rem;
display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem;
position: relative;
}
@media (max-width: 1024px) { .hero { grid-template-columns: 1fr; } }
.grid-bg {
position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px);
background-size: 48px 48px;
}
.hero-tag {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em;
border: 1px solid rgba(0,255,136,0.2); background: rgba(0,255,136,0.05);
padding: 4px 12px; margin-bottom: 2rem;
}
.hero-tag-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
h1 {
font-size: clamp(40px, 7vw, 78px); font-weight: 900; line-height: 0.9;
letter-spacing: -0.04em; text-transform: uppercase;
}
h1 span { color: var(--green); }
.hero-sub { margin-top: 1.5rem; font-size: 18px; line-height: 1.4; opacity: 0.8; max-width: 560px; font-weight: 500; }
.feature-grid { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 620px; }
.feature-card { border: 1px solid rgba(255,255,255,0.1); background: var(--bg2); padding: 1.25rem; }
.feature-card-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; opacity: 0.4; margin-bottom: 0.75rem; }
.feature-card p { font-size: 13px; line-height: 1.6; opacity: 0.7; font-family: 'JetBrains Mono', monospace; }
.feature-card p span { color: white; }
/* ORBIT DIAGRAM */
.orbit-wrap { display: flex; align-items: center; justify-content: center; }
.orbit {
position: relative; width: min(460px, 100%); aspect-ratio: 1;
}
.orbit-glow {
position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle, rgba(0,255,136,0.1) 0%, transparent 70%);
}
.orbit-ring {
position: absolute; border-radius: 50%;
top: 50%; left: 50%; transform-origin: 0 0;
}
.orbit-ring-outer {
width: 92%; height: 92%;
margin-top: -46%; margin-left: -46%;
border: 1px dashed rgba(255,255,255,0.15);
}
.orbit-ring-mid {
width: 92%; height: 92%;
margin-top: -46%; margin-left: -46%;
border: 2px solid rgba(0,255,136,0.2);
}
.orbit-dot-green {
position: absolute; top: -4px; left: 50%; margin-left: -4px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--green); box-shadow: 0 0 10px var(--green);
}
.orbit-ring-inner {
width: 68%; height: 68%;
margin-top: -34%; margin-left: -34%;
border: 1px solid rgba(255,255,255,0.1);
}
.orbit-dot-yellow {
position: absolute; top: 50%; right: -4px; margin-top: -4px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--yellow); box-shadow: 0 0 8px var(--yellow);
}
.orbit-center {
position: absolute; top: 50%; left: 50%;
width: 44%; height: 44%; transform: translate(-50%, -50%);
border-radius: 50%; background: var(--bg2); border: 1px solid rgba(255,255,255,0.1);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
}
.orbit-center-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.6; letter-spacing: 0.2em; }
.orbit-center-epoch { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; letter-spacing: 0.1em; }
.orbit-center-win { font-family: 'JetBrains Mono', monospace; font-size: 8px; opacity: 0.4; }
/* SECTIONS */
.section { max-width: 1440px; margin: 0 auto; padding: 4rem 2.5rem; border-top: 1px solid rgba(255,255,255,0.06); }
.section-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.28em; opacity: 0.6; margin-bottom: 2.5rem; }
.section-sublabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.3; }
/* HOW IT WORKS */
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 768px) { .how-grid { grid-template-columns: 1fr; } }
.how-card { background: var(--bg2); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.how-card-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; display: flex; align-items: center; gap: 8px; }
.how-card-line { width: 20px; height: 1px; }
.how-card-line-green { background: var(--green); }
.how-card-line-yellow { background: var(--yellow); }
.how-card-line-white { background: rgba(255,255,255,0.4); }
.how-card-desc { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.6; opacity: 0.6; }
.how-card-desc span { color: white; }
.how-card-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 1.5rem; }
.tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; padding: 4px 8px; border: 1px solid; }
.tag-green { background: rgba(0,255,136,0.1); border-color: rgba(0,255,136,0.2); color: var(--green); }
.tag-yellow { background: rgba(255,214,10,0.1); border-color: rgba(255,214,10,0.2); color: var(--yellow); }
.tag-white { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
/* STEP VIZ */
.step-viz { border: 1px solid rgba(255,255,255,0.1); background: var(--bg); padding: 1rem; height: 180px; position: relative; overflow: hidden; }
.step-svg { width: 100%; height: 100%; }
/* ARCH CARDS */
.arch-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 1024px) { .arch-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .arch-grid { grid-template-columns: 1fr; } }
.arch-card { background: var(--bg2); padding: 2rem; position: relative; overflow: hidden; cursor: default; transition: background 0.15s; }
.arch-card:hover { background: #0f0f10; }
.arch-card-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; opacity: 0.4; margin-bottom: 1rem; }
.arch-card-title { font-size: 20px; font-weight: 900; letter-spacing: -0.025em; margin-bottom: 0.75rem; }
.arch-card-desc { font-size: 13px; line-height: 1.6; opacity: 0.7; }
.arch-card-detail { font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.5; opacity: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.06); transition: opacity 0.3s; }
.arch-card:hover .arch-card-detail { opacity: 0.6; }
.arch-card-arrow { position: absolute; bottom: 1.5rem; right: 1.5rem; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.1); display: grid; place-items: center; font-size: 12px; opacity: 0.2; transition: opacity 0.15s; }
.arch-card:hover .arch-card-arrow { opacity: 1; }
/* GHOST PORT SECTION */
.ghost-section { background: var(--bg2); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ghost-inner { max-width: 1440px; margin: 0 auto; padding: 5rem 2.5rem; }
.ghost-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; }
.ghost-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.3em; color: var(--red); display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
.ghost-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
h2.ghost-h2 { font-size: clamp(40px,6vw,72px); font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; text-transform: uppercase; }
h2.ghost-h2 span { color: var(--red); }
.ghost-p { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.6; opacity: 0.6; max-width: 420px; }
.ghost-p span { color: white; }
/* EPOCH TIMELINE */
.epoch-timeline { border: 1px solid rgba(255,255,255,0.1); background: var(--bg); padding: 1rem 1.5rem; overflow-x: auto; }
.epoch-cells { display: flex; gap: 1px; min-width: 700px; }
.epoch-cell { flex: 1; padding: 1rem 0.75rem; background: var(--bg2); position: relative; }
.epoch-cell.active { outline: 1px solid rgba(0,255,136,0.5); z-index: 1; }
.epoch-cell.active::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--green); }
.epoch-cell-num { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.4; letter-spacing: 0.2em; margin-bottom: 6px; }
.epoch-cell-key { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.epoch-cell-key.expired { text-decoration: line-through; opacity: 0.3; }
.epoch-cell-key.future { filter: blur(4px); opacity: 0.4; }
.epoch-cell-key.active { color: var(--green); }
.epoch-badge { display: inline-block; margin-top: 0.75rem; font-family: 'JetBrains Mono', monospace; font-size: 8px; padding: 2px 8px; border: 1px solid; }
.epoch-badge.expired { background: rgba(255,59,48,0.15); color: var(--red); border-color: rgba(255,59,48,0.2); }
.epoch-badge.active-badge { background: rgba(0,255,136,0.15); color: var(--green); border-color: rgba(0,255,136,0.2); }
.epoch-badge.future { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.1); }
.epoch-bar { margin-top: 1rem; height: 2px; background: rgba(255,255,255,0.1); position: relative; }
.epoch-bar-fill { position: absolute; inset-y-0; left: 0; height: 100%; }
.epoch-bar-fill.expired { width: 100%; background: rgba(255,59,48,0.5); }
.epoch-bar-fill.future { width: 0; }
/* DRIFT TOGGLE */
.drift-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; border: 1px solid rgba(255,255,255,0.1); background: var(--bg); padding: 1.25rem; margin-top: 2rem; }
.drift-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; opacity: 0.6; }
.toggle-btn {
position: relative; width: 56px; height: 28px; border-radius: 9999px;
border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05);
cursor: pointer; transition: all 0.15s;
}
.toggle-btn.on { background: rgba(0,255,136,0.2); border-color: rgba(0,255,136,0.5); }
.toggle-knob {
position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
border-radius: 50%; background: rgba(255,255,255,0.6); transition: all 0.15s;
}
.toggle-btn.on .toggle-knob { left: 30px; background: var(--green); }
.drift-desc { font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.5; opacity: 0.6; flex: 1; min-width: 200px; }
.drift-desc .on-text { color: var(--green); }
.drift-desc .off-text { color: var(--red); }
/* PLAYGROUND */
.playground-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 1024px) { .playground-grid { grid-template-columns: 1fr; } }
.code-pane { background: var(--bg2); }
.code-toolbar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); background: var(--bg); }
.traffic-lights { display: flex; gap: 8px; }
.tl { width: 12px; height: 12px; border-radius: 50%; }
.tl-r { background: var(--red); }
.tl-y { background: var(--yellow); }
.tl-g { background: var(--green); }
.code-file { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.6; letter-spacing: 0.2em; }
.code-version { font-family: 'JetBrains Mono', monospace; font-size: 9px; padding: 2px 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
pre.code { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.7; padding: 1.5rem; overflow-x: auto; opacity: 0.8; white-space: pre; }
.derive-pane { background: var(--bg); }
.derive-inner { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.derive-section-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.4; letter-spacing: 0.2em; margin-bottom: 4px; }
.derive-value { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.7; word-break: break-all; line-height: 1.4; }
.derive-box { border: 1px solid rgba(255,255,255,0.1); background: var(--bg2); padding: 0.75rem; }
.derive-box-green { border-color: rgba(0,255,136,0.2); background: rgba(0,255,136,0.04); }
.derive-hash { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(0,255,136,0.8); word-break: break-all; line-height: 1.4; }
.derive-key { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; word-break: break-all; }
.derive-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.range-wrap { display: flex; flex-direction: column; gap: 8px; }
.range-row { display: flex; justify-content: space-between; }
.range-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.6; }
.range-val { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--yellow); }
input[type=range] { width: 100%; height: 4px; accent-color: var(--yellow); cursor: pointer; }
.range-hint { display: flex; justify-content: space-between; }
.range-hint span { font-family: 'JetBrains Mono', monospace; font-size: 8px; opacity: 0.3; }
.sim-btn {
width: 100%; height: 48px; border: none; cursor: pointer;
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; font-weight: 700;
background: white; color: black; transition: all 0.15s;
}
.sim-btn.matched { background: var(--green); color: black; }
.sim-btn:disabled { cursor: not-allowed; opacity: 0.8; }
.match-result { border: 1px solid rgba(0,255,136,0.3); background: rgba(0,255,136,0.05); padding: 0.75rem; font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.5; }
.match-result .ok { color: var(--green); }
.match-result .sub { opacity: 0.6; margin-top: 4px; }
.reset-link { font-size: 9px; text-decoration: underline; opacity: 0.6; cursor: pointer; background: none; border: none; color: inherit; margin-top: 8px; }
.reset-link:hover { opacity: 1; }
.derive-note { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.3; line-height: 1.5; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.05); }
.derive-note span { color: white; }
/* CTA */
.cta-section { background: var(--bg2); border-top: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.cta-inner { max-width: 1440px; margin: 0 auto; padding: 5rem 2.5rem; }
.cta-grid { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-end; justify-content: space-between; }
h2.cta-h2 { font-size: clamp(40px,5vw,64px); font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; text-transform: uppercase; }
h2.cta-h2 span { color: var(--green); }
.cta-right { display: flex; flex-direction: column; gap: 1.5rem; max-width: 520px; }
.cta-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); }
.cta-spec { background: var(--bg); padding: 1.25rem; }
.cta-spec-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.4; margin-bottom: 6px; }
.cta-spec-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; line-height: 1.4; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-outline { height: 52px; padding: 0 2rem; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: white; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.btn-outline:hover { background: rgba(255,255,255,0.05); }
.btn-lg { height: 52px; padding: 0 2rem; background: var(--green); color: black; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; font-weight: 700; border: none; cursor: pointer; transition: opacity 0.15s; }
.btn-lg:hover { opacity: 0.9; }
.cta-notice { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.3; line-height: 1.6; }
/* FOOTER */
footer { max-width: 1440px; margin: 0 auto; padding: 2rem 2.5rem; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
footer span { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; opacity: 0.3; }
/* SCANLINE OVERLAY */
.scanlines {
pointer-events: none; position: fixed; inset: 0; z-index: 50; opacity: 0.04;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, #00FF88 2px, transparent 3px);
}
</style>
</head>
<body>
<div class="scanlines"></div>
<!-- NAV -->
<nav>
<div class="nav-inner">
<div class="nav-left">
<div class="nav-dot pulse"></div>
<span class="nav-title mono">SOVEREIGN™ // TEMPORAL ROOT v2026</span>
<span class="mono" style="font-size:10px;opacity:0.4;letter-spacing:0.2em;margin-left:1.5rem;padding-left:1.5rem;border-left:1px solid rgba(255,255,255,0.1)">CLASSIFICATION: // ORTHOGONAL-LOCK</span>
</div>
<div class="nav-right">
<div class="nav-meta" id="nav-meta">
<span>SYSTEM: <span style="color:var(--green)">ACTIVE</span></span>
<span>•</span>
<span>PORT: 0.0.0.0:4433</span>
<span>•</span>
<span>EPOCH: <span id="nav-epoch" style="background:rgba(255,255,255,0.1);padding:2px 6px">—</span></span>
</div>
<button class="btn-primary">ACCESS PROTOCOL →</button>
</div>
</div>
</nav>
<!-- STATUS BAR -->
<div class="status-bar">
<div class="status-inner">
<div class="status-cell">
<div class="status-label">CURRENT_EPOCH</div>
<div class="status-value" id="epoch-display">—</div>
</div>
<div class="status-cell">
<div class="status-label">NEXT_ROTATION_IN</div>
<div class="status-value" style="color:var(--yellow)" id="countdown-display">—:—:—</div>
</div>
<div class="status-cell">
<div class="status-label">HARDWARE_ROOT</div>
<div class="status-value" style="font-size:11px;opacity:0.8">
<span id="hw-bars" style="display:flex;gap:2px;align-items:flex-end"></span>
<span class="mono" style="font-size:11px">4C4C4544-0059...</span>
</div>
</div>
<div class="status-cell" style="position:relative;overflow:hidden">
<div id="key-flash" style="position:absolute;inset:0;background:rgba(0,255,136,0.1);opacity:0;pointer-events:none;transition:opacity 0.3s"></div>
<div class="status-label">SOVEREIGN_KEY • 256-BIT</div>
<div class="status-value" style="font-size:13px" id="key-display">DERIVING...</div>
</div>
</div>
</div>
<!-- HERO -->
<div style="position:relative">
<div class="hero">
<div class="grid-bg"></div>
<div style="position:relative;z-index:1">
<div class="hero-tag">
<div class="hero-tag-dot pulse"></div>
TEMPORAL-HARDWARE BINDING • CHA-CHA20 • SHA-512 KDF
</div>
<h1>A Cryptographically<br><span>Gated Wormhole.</span></h1>
<p class="hero-sub">It only exists for a specific machine, at a specific time, with a specific key.</p>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-card-label">01 / TEMPORAL BINDING</div>
<p>Key = <span>SHA-512(Salt + HW_UUID + CPU_ID + Epoch)</span> → 256-bit ChaCha20. Epoch increments every 86,400s. No handshake. No SNI. No certificates.</p>
</div>
<div class="feature-card">
<div class="feature-card-label">02 / ZERO-COORDINATION</div>
<p>Client and server derive identical keys via NTP-synced epoch. Orthogonal TX/RX nonces prevent two-time pad. Thread-safe re-derivation at <span>accept()</span>.</p>
</div>
</div>
<div style="margin-top:2.5rem;display:flex;align-items:center;gap:1rem;font-family:'JetBrains Mono',monospace;font-size:10px">
<div style="display:flex;gap:-8px">
<div style="width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);display:grid;place-items:center">◐</div>
<div style="width:28px;height:28px;border-radius:50%;background:rgba(0,255,136,0.2);border:1px solid rgba(0,255,136,0.3);display:grid;place-items:center;color:var(--green);margin-left:-8px">⬢</div>
<div style="width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);display:grid;place-items:center;margin-left:-8px">◑</div>
</div>
<span style="opacity:0.6">BUILT FOR CONTESTED ENVIRONMENTS • ANDURIL-GRADE</span>
</div>
</div>
<div class="orbit-wrap" style="position:relative;z-index:1">
<div class="orbit">
<div class="orbit-glow"></div>
<div style="position:absolute;inset:0">
<!-- rings -->
<div class="orbit-ring orbit-ring-outer spin-slow"></div>
<div class="orbit-ring orbit-ring-mid spin" id="orbit-mid">
<div class="orbit-dot-green pulse"></div>
</div>
<div class="orbit-ring orbit-ring-inner spin-rev">
<div class="orbit-dot-yellow"></div>
</div>
<!-- labels -->
<div style="position:absolute;top:6%;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.3em;color:var(--green);background:var(--bg);padding:0 8px">HARDWARE • 4C4C4544-0059...</div>
<div style="position:absolute;top:20%;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:0.3em;color:var(--yellow);background:var(--bg);padding:0 8px">SALT • SOVEREIGN_SALT_2026</div>
<!-- center -->
<div class="orbit-center">
<div class="orbit-center-label">EPOCH</div>
<div class="orbit-center-epoch" id="orbit-epoch">—</div>
<div class="orbit-center-win">WINDOW 86400s</div>
</div>
<!-- tick marks -->
<svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 460 460">
<g transform="translate(230,230)">
<script>/* tick marks rendered via JS */</script>
</g>
</svg>
</div>
<!-- side labels -->
<div style="position:absolute;left:-20px;top:2rem;font-family:'JetBrains Mono',monospace;font-size:9px;line-height:1.2;opacity:0.6;border-left:2px solid rgba(0,255,136,0.5);padding-left:8px">
TX_NONCE<br><span style="color:var(--green)" id="nonce-tx">0x00000000</span><br><br>
RX_NONCE<br><span style="color:var(--green)" id="nonce-rx">0x10000000</span>
</div>
<div style="position:absolute;right:-20px;bottom:2rem;font-family:'JetBrains Mono',monospace;font-size:9px;line-height:1.2;opacity:0.6;border-right:2px solid rgba(255,214,10,0.5);padding-right:8px;text-align:right">
KDF: SHA-512<br><span style="color:var(--yellow)">256-BIT CHACHA20</span><br><br>THREAD: SAFE
</div>
</div>
</div>
</div>
</div>
<!-- HOW IT WORKS -->
<div class="section">
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2.5rem">
<div class="section-label">03 / HOW IT WORKS — TEMPORAL-HARDWARE BINDING</div>
<div class="section-sublabel">EPOCH = floor(unix / window) • ZERO COORDINATION • NTP SYNC</div>
</div>
<div class="how-grid">
<div class="how-card">
<div class="how-card-label"><span class="how-card-line how-card-line-green"></span>STEP FUNCTION • 86400s WINDOW</div>
<div class="step-viz">
<svg class="step-svg" viewBox="0 0 320 120">
<line x1="20" y1="100" x2="300" y2="100" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
<line x1="20" y1="10" x2="20" y2="100" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
<path d="M20 80 L110 80 L110 60 L200 60 L200 30 L300 30" fill="none" stroke="#00FF88" stroke-width="2" stroke-dasharray="4 4"/>
<circle cx="70" cy="80" r="3" fill="#00FF88"/>
<circle cx="155" cy="60" r="3" fill="#00FF88"/>
<circle id="orbit-dot-svg" cx="250" cy="30" r="4" fill="white" stroke="#00FF88" stroke-width="1.5"/>
<text x="22" y="108" font-family="JetBrains Mono" font-size="7" fill="rgba(255,255,255,0.3)">time →</text>
<text x="3" y="18" font-family="JetBrains Mono" font-size="7" fill="rgba(255,255,255,0.3)" transform="rotate(-90,10,60)">epoch</text>
</svg>
</div>
<p class="how-card-desc"><span>math.floor(time.time() / window)</span> creates a step. For 86,400 consecutive seconds the epoch is identical. At 86,401 the SHA-512 output avalanches completely.</p>
<div class="how-card-tags">
<span class="tag tag-green">FLAT = STABLE KEY</span>
<span class="tag tag-yellow">STEP = ROTATION</span>
</div>
</div>
<div class="how-card">
<div class="how-card-label"><span class="how-card-line how-card-line-yellow"></span>KDF FLOW • SHA-512 → 32B</div>
<div style="border:1px solid rgba(255,255,255,0.1);background:var(--bg);padding:1rem;height:180px;display:flex;flex-direction:column;justify-content:center;gap:0.75rem">
<div style="display:flex;align-items:center;gap:8px">
<span class="mono" style="font-size:8px;padding:4px 8px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.1)">SALT</span>
<div style="flex:1;height:1px;background:linear-gradient(to right,rgba(255,255,255,0.2),rgba(0,255,136,0.5));position:relative;overflow:hidden">
<div style="position:absolute;width:20px;height:100%;background:var(--green);filter:blur(2px);animation:scanline 1.2s linear infinite"></div>
</div>
<div style="width:8px;height:8px;border-radius:50%;background:var(--green)" class="pulse"></div>
</div>
<div style="display:flex;align-items:center;gap:8px">
<span class="mono" style="font-size:8px;padding:4px 8px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.1)">HW_COMPOSITE</span>
<div style="flex:1;height:1px;background:linear-gradient(to right,rgba(255,255,255,0.2),rgba(0,255,136,0.5))"></div>
<div style="width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse-green 2s 0.3s infinite"></div>
</div>
<div style="display:flex;align-items:center;gap:8px">
<span class="mono" id="kdf-epoch-badge" style="font-size:8px;padding:4px 8px;background:rgba(255,214,10,0.2);border:1px solid rgba(255,214,10,0.3);color:var(--yellow)">EPOCH:—</span>
<div style="flex:1;height:1px;background:linear-gradient(to right,rgba(255,214,10,0.3),rgba(0,255,136,0.5))"></div>
<div style="width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:pulse-green 2s 0.6s infinite"></div>
</div>
<div style="margin-top:4px;border:1px solid rgba(0,255,136,0.3);background:rgba(0,255,136,0.05);padding:8px;display:flex;align-items:center;justify-content:space-between">
<span class="mono" style="font-size:9px;color:var(--green)">SHA-512(Salt || HW || Epoch)</span>
<span class="mono" style="font-size:8px;opacity:0.6">→</span>
<span class="mono" style="font-size:9px;background:black;padding:4px 8px;border:1px solid rgba(0,255,136,0.3)">32-BYTE KEY</span>
</div>
</div>
<p class="how-card-desc">One hash, one key. Full 64-byte SHA-512 truncated to first 32 bytes. Deterministic, hardware-bound, temporal.</p>
<div class="how-card-tags">
<span class="tag tag-white mono" style="font-size:8px">digest = sha512(salt+composite+epoch)[:32]</span>
</div>
</div>
<div class="how-card">
<div class="how-card-label"><span class="how-card-line how-card-line-white"></span>ZERO-COORDINATION • NO HANDSHAKE</div>
<div style="border:1px solid rgba(255,255,255,0.1);background:var(--bg);padding:0.75rem;height:180px;display:grid;grid-template-columns:1fr 1fr;gap:0.75rem">
<div style="border:1px solid rgba(255,255,255,0.1);background:black;padding:0.75rem;font-family:'JetBrains Mono',monospace;font-size:8px;line-height:1.4">
<div style="color:var(--green);margin-bottom:4px">$ sovereign client</div>
<div style="opacity:0.6">&gt; NTP sync: <span id="client-time">—</span></div>
<div style="opacity:0.6">&gt; epoch = <span id="client-epoch">—</span></div>
<div>&gt; key = SHA512(...)</div>
<div style="margin-top:8px;color:var(--green)">✓ DERIVED LOCALLY</div>
</div>
<div style="border:1px solid rgba(255,255,255,0.1);background:black;padding:0.75rem;font-family:'JetBrains Mono',monospace;font-size:8px;line-height:1.4">
<div style="color:var(--yellow);margin-bottom:4px">$ sovereign server:4433</div>
<div style="opacity:0.6">&gt; accept() • re-derive</div>
<div style="opacity:0.6">&gt; epoch = <span id="server-epoch">—</span></div>
<div>&gt; key = SHA512(...)</div>
<div style="margin-top:8px;color:var(--green)">✓ KEYS MATCH • NO SNI</div>
</div>
<div style="grid-column:span 2;display:flex;align-items:center;gap:8px">
<div style="flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(0,255,136,0.5))"></div>
<span class="mono" style="font-size:8px;padding:2px 8px;background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.2);color:var(--green)">SAME EPOCH • SAME KEY • NO EXCHANGE</span>
<div style="flex:1;height:1px;background:linear-gradient(to left,transparent,rgba(0,255,136,0.5))"></div>
</div>
</div>
<p class="how-card-desc">Client and server never talk about rotation. Clock sync is the only coordination. Orthogonal nonces ensure TX/RX streams never reuse keystream.</p>
<div class="how-card-tags">
<span class="tag tag-green">STEALTH: NO CERTS</span>
<span class="tag tag-white">ORTHOGONAL NONCES</span>
</div>
</div>
</div>
</div>
<!-- ARCH PROPERTIES -->
<div class="section" style="border-top:1px solid rgba(255,255,255,0.06)">
<div class="section-label" style="margin-bottom:2rem">04 / ARCHITECTURE STATE — FINAL FORM</div>
<div class="arch-grid">
<div class="arch-card">
<div class="arch-card-num">01 / STEALTH</div>
<div class="arch-card-title" style="color:#E6E6E6">STEALTH</div>
<div class="arch-card-desc">No handshake, no SNI, no certificates. Ghost port on 0.0.0.0:4433. Looks like closed TCP to scanners.</div>
<div class="arch-card-detail mono">Raw TCP accept → ChaCha20 decrypt attempt. No TLS. No banner. Failures are silent drops.</div>
<div class="arch-card-arrow">↗</div>
</div>
<div class="arch-card">
<div class="arch-card-num">02 / HARDWARE-BOUND</div>
<div class="arch-card-title" style="color:var(--green)">HARDWARE-BOUND</div>
<div class="arch-card-desc">Bound to silicon: MB UUID + CPUID + Machine ID. Copy the binary, it fails elsewhere.</div>
<div class="arch-card-detail mono">Composite = MB_UUID|CPU_ID|MACHINE_ID. KDF salted with SOVEREIGN_SALT_2026. Non-exportable.</div>
<div class="arch-card-arrow">↗</div>
</div>
<div class="arch-card">
<div class="arch-card-num">03 / TEMPORAL-BOUND</div>
<div class="arch-card-title" style="color:var(--yellow)">TEMPORAL-BOUND</div>
<div class="arch-card-desc">Key rotates every 24h via epoch step. Capture today, useless tomorrow.</div>
<div class="arch-card-detail mono" id="arch-temporal-detail">Epoch = floor(unix / 86400). Rotation at UTC midnight.</div>
<div class="arch-card-arrow">↗</div>
</div>
<div class="arch-card">
<div class="arch-card-num">04 / ORTHOGONAL</div>
<div class="arch-card-title" style="color:var(--green)">ORTHOGONAL</div>
<div class="arch-card-desc">TX and RX use separate nonces. No two-time pad. Full duplex wormhole.</div>
<div class="arch-card-detail mono">Nonce_TX = 0||packet_counter, Nonce_RX = 1||packet_counter. 96-bit ChaCha20 nonces, never reused.</div>
<div class="arch-card-arrow">↗</div>
</div>
</div>
</div>
<!-- GHOST PORT / EPOCH TIMELINE -->
<div class="ghost-section">
<div class="ghost-inner">
<div class="ghost-header">
<div>
<div class="ghost-eyebrow"><div class="ghost-eyebrow-dot pulse"></div> KILLER FEATURE • GHOST PORT EFFECT</div>
<h2 class="ghost-h2">Captured Keys<br>Are <span>Dead Assets.</span></h2>
</div>
<p class="ghost-p">If an attacker captures a key today, that key is a <span>dead asset</span> tomorrow. Server has already moved to next temporal epoch. No revocation needed. Time kills it.</p>
</div>
<div class="epoch-timeline">
<div class="epoch-cells" id="epoch-cells">
<!-- rendered by JS -->
</div>
</div>
<div class="drift-row">
<span class="drift-label">DRIFT BUFFER</span>
<button class="toggle-btn" id="drift-toggle" onclick="toggleDrift()"><div class="toggle-knob"></div></button>
<div class="drift-desc" id="drift-desc">
<span class="off-text">STRICT:</span> only current epoch valid. Connections at 23:59:59.999 fail at 00:00:00.000. Zero clock tolerance.
</div>
</div>
</div>
</div>
<!-- PLAYGROUND -->
<div class="section">
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2rem">
<div class="section-label" style="margin-bottom:0">05 / LIVE DERIVATION PLAYGROUND — SHA-512 KDF</div>
<div style="display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:9px;opacity:0.4">
<div style="width:8px;height:8px;border-radius:50%;background:var(--green)" class="pulse"></div>
LIVE WEB CRYPTO SHA-512 • NO MOCK
</div>
</div>
<div class="playground-grid">
<div class="code-pane">
<div class="code-toolbar">
<div style="display:flex;align-items:center;gap:1rem">
<div class="traffic-lights"><div class="tl tl-r"></div><div class="tl tl-y"></div><div class="tl tl-g"></div></div>
<span class="code-file">sovereign_temporal_root.py — 86 LOC</span>
</div>
<span class="code-version">PYTHON 3.11 • PRODUCTION</span>
</div>
<pre class="code">import hashlib, time, math, socket, threading
class SovereignTemporalRoot:
@staticmethod
def get_current_epoch(window_seconds=86400):
return math.floor(time.time() / window_seconds)
@classmethod
def derive_temporal_key(cls, salt=b"SOVEREIGN_SALT_2026"):
composite = (
cls.get_motherboard_uuid() + "|" +
cls.get_cpu_id() + "|" +
cls.get_machine_id()
).encode()
epoch = str(cls.get_current_epoch()).encode()
hasher = hashlib.sha512()
hasher.update(salt)
hasher.update(composite)
hasher.update(epoch)
return hasher.digest()[:32] # 256-bit ChaCha20 key
class RotatingBitLockerPort:
def start(self):
server = socket.socket()
server.bind(("0.0.0.0", 4433))
server.listen(5)
print(f"[*] Rotating Port active — epoch {epoch}")
while True:
client, _ = server.accept()
key = SovereignTemporalRoot.derive_temporal_key()
threading.Thread(
target=self.handle_with_key,
args=(client, key)
).start()
# key re-derived per connection
# clock drift: check epoch and epoch-1</pre>
</div>
<div class="derive-pane">
<div class="code-toolbar">
<span class="code-file">LIVE JS DERIVATION • WEB CRYPTO API</span>
<div style="display:flex;gap:6px">
<span class="badge badge-green" id="pg-epoch-badge">EPOCH —</span>
<span class="badge" style="background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.7)" id="pg-window-badge">— WINDOW</span>
</div>
</div>
<div class="derive-inner">
<!-- window slider -->
<div class="range-wrap">
<div class="range-row">
<span class="range-lbl">WINDOW_SECONDS</span>
<span class="range-val" id="window-val">86400s • 24h</span>
</div>
<input type="range" min="3600" max="86400" step="3600" value="86400" id="window-slider" oninput="onWindowChange(this.value)">
<div class="range-hint"><span>1H • AGGRESSIVE</span><span>24H • SOVEREIGN DEFAULT</span></div>
</div>
<!-- composite input -->
<div class="derive-box">
<div class="derive-section-label">COMPOSITE INPUT (SALT | HW | EPOCH)</div>
<div class="derive-value" id="pg-composite">SOVEREIGN_SALT_2026|4C4C4544-0059...|—</div>
</div>
<!-- hash output -->
<div class="derive-box derive-box-green">
<div class="derive-section-label" style="color:rgba(0,255,136,0.6)">SHA-512 FULL (128 hex chars) → 512-bit</div>
<div class="derive-hash" id="pg-hash">hashing...</div>
</div>
<!-- key + b64 -->
<div class="derive-row">
<div class="derive-box">
<div class="derive-section-label">SOVEREIGN_KEY • 256-BIT • HEX[:32]</div>
<div class="derive-key" id="pg-key">—</div>
</div>
<div class="derive-box">
<div class="derive-section-label">BASE64 • CHACHA20 KEY</div>
<div class="derive-value" id="pg-b64">—</div>
</div>
</div>
<!-- simulate -->
<button class="sim-btn" id="sim-btn" onclick="simulate()">
[SIMULATE CLIENT CONNECTION] → DERIVE &amp; MATCH
</button>
<div id="match-result" style="display:none" class="match-result">
<div class="ok">✓ KEYS MATCH • WORMHOLE OPEN</div>
<div class="sub" id="match-detail"></div>
<button class="reset-link" onclick="resetSim()">RESET SIMULATION</button>
</div>
<div class="derive-note">
Implements real <span>crypto.subtle.digest('SHA-512')</span>. Same output as Python hashlib.sha512.
Thread-safe re-derivation at accept() ensures server always uses current epoch.
</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="cta-section">
<div class="cta-inner">
<div class="cta-grid">
<div>
<div class="mono" style="font-size:10px;letter-spacing:0.3em;opacity:0.4;margin-bottom:1.5rem">FINAL ARCHITECTURE STATE • 2026</div>
<h2 class="cta-h2">This is no<br>longer a<br><span>proxy.</span></h2>
<p class="mono" style="font-size:13px;line-height:1.6;opacity:0.6;max-width:420px;margin-top:2rem">It is a cryptographically gated wormhole that only exists for a specific machine, at a specific time, with a specific key. Stealth, hardware-bound, temporal-bound, orthogonal.</p>
</div>
<div class="cta-right">
<div class="cta-spec-grid">
<div class="cta-spec">
<div class="cta-spec-lbl">STACK</div>
<div class="cta-spec-val">ChaCha20 • SHA-512 KDF • 256-bit • Thread-safe re-derivation at accept()</div>
</div>
<div class="cta-spec">
<div class="cta-spec-lbl">DEPLOYMENT</div>
<div class="cta-spec-val">0.0.0.0:4433 • No SNI • No Certs • Drift buffer optional • Ghost port effect</div>
</div>
</div>
<div class="cta-btns">
<button class="btn-lg">DEPLOY ROTATING PORT →</button>
<button class="btn-outline">READ WHITE PAPER ↗</button>
</div>
<p class="cta-notice">SECURITY NOTICE: This is a weapon, not a SaaS. Hardware root is non-exportable. Keys are ephemeral. Past epochs are cryptographically dead. Use only on sovereign hardware with NTP sync.</p>
</div>
</div>
</div>
</div>
<footer>
<span>© 2026 BEL ESPRIT D'ACCORD IRREVOCABLE TRUST • AHMAD ALI PARR • PATENT PENDING</span>
<span id="footer-status">EPOCH — • WINDOW 86400s • PORT 4433 • SYSTEM ACTIVE</span>
</footer>
<script>
const SALT = "SOVEREIGN_SALT_2026";
const HW_COMPOSITE = "4C4C4544-0059-4E10-8031-B6C04F4E5133|BFEBFBFF000906E9|a3f1c2d4-e5f6-7890-abcd-ef1234567890";
const HW_DISPLAY = "4C4C4544-0059...";
let windowSec = 86400;
let currentHash = "";
let simState = "idle";
let driftOn = false;
let prevEpoch = null;
async function sha512hex(input) {
try {
const buf = new TextEncoder().encode(input);
const digest = await crypto.subtle.digest("SHA-512", buf);
return Array.from(new Uint8Array(digest)).map(b => b.toString(16).padStart(2,"0")).join("");
} catch {
let n = 0;
for (let i = 0; i < input.length; i++) n = Math.imul(31, n) + input.charCodeAt(i) | 0;
return Math.abs(n).toString(16).padEnd(128,"0").slice(0,128);
}
}
function hexToB64(hex) {
try {
const bytes = hex.match(/.{2}/g).map(h => parseInt(h,16));
return btoa(String.fromCharCode(...bytes)).slice(0,44) + "...";
} catch { return "..."; }
}
function fmtCountdown(ms) {
if (ms < 0) ms = 0;
const s = Math.floor(ms / 1000);
const h = Math.floor(s / 3600).toString().padStart(2,"0");
const m = Math.floor((s % 3600) / 60).toString().padStart(2,"0");
const ss = (s % 60).toString().padStart(2,"0");
return `${h}:${m}:${ss}`;
}
function getEpoch(ws) { return Math.floor(Date.now() / 1000 / ws); }
function epochKey(epoch) {
const h = Math.abs((epoch * 0x9e3779b9) & 0xFFFFFFFF).toString(16).padStart(8,"0");
return (h + h).slice(0,16).toUpperCase();
}
function renderEpochCells(epoch) {
const container = document.getElementById("epoch-cells");
if (!container) return;
container.innerHTML = "";
const progress = (Date.now()/1000 % windowSec) / windowSec;
for (let i = -3; i <= 3; i++) {
const e = epoch + i;
const cell = document.createElement("div");
cell.className = "epoch-cell" + (i === 0 ? " active" : "");
const key = epochKey(e);
let keyClass = i < 0 ? "expired" : i > 0 ? "future" : "active";
let badgeClass = i < 0 ? "expired" : i > 0 ? "future" : "active-badge";
let badgeText = i < 0 ? "EXPIRED • USELESS" : i > 0 ? "FUTURE • UNKNOWN" : "ACTIVE • VALID";
let timeText = i < 0 ? `${Math.abs(i)*24}h ago` : i > 0 ? `in ${i*24}h` : `${Math.floor((1-progress)*24)}h left`;
cell.innerHTML = `
<div class="epoch-cell-num">EPOCH ${e}</div>
<div class="epoch-cell-key ${keyClass}">${key}</div>
<div><span class="epoch-badge ${badgeClass}">${badgeText}</span></div>
<div class="epoch-bar"><div class="epoch-bar-fill ${i < 0 ? 'expired' : i > 0 ? 'future' : ''}" style="${i===0?`width:${Math.round(progress*100)}%;background:var(--green)`:''}"></div></div>
<div class="mono" style="font-size:8px;opacity:0.3;margin-top:4px">${timeText}</div>
`;
container.appendChild(cell);
}
}
async function deriveAndUpdate() {
const epoch = getEpoch(windowSec);
const input = `${SALT}|${HW_COMPOSITE}|${epoch}`;
const hash = await sha512hex(input);
currentHash = hash;
const key = hash.slice(0,64).toUpperCase();
const keyShort = hash.slice(0,16).toUpperCase();
const b64 = hexToB64(hash.slice(0,64));
// update status bar
const epochEl = document.getElementById("epoch-display");
const keyEl = document.getElementById("key-display");
const navEpochEl = document.getElementById("nav-epoch");
const orbitEpochEl = document.getElementById("orbit-epoch");
const kdfBadge = document.getElementById("kdf-epoch-badge");
if (epochEl) epochEl.textContent = epoch;
if (navEpochEl) navEpochEl.textContent = epoch;
if (orbitEpochEl) orbitEpochEl.textContent = epoch;
if (kdfBadge) kdfBadge.textContent = `EPOCH:${epoch}`;
if (keyEl) {
keyEl.innerHTML = `${keyShort} <span class="badge badge-green badge-pulse">VALID FOR 24H</span>`;
}
// flash on rotation
if (prevEpoch !== null && prevEpoch !== epoch) {
const flash = document.getElementById("key-flash");
if (flash) { flash.style.opacity = "1"; setTimeout(()=>{ flash.style.opacity="0"; }, 600); }
}
prevEpoch = epoch;
// countdown
const nextMs = (epoch + 1) * windowSec * 1000 - Date.now();
const cntEl = document.getElementById("countdown-display");
if (cntEl) cntEl.textContent = fmtCountdown(nextMs);
// playground
const pgEpochBadge = document.getElementById("pg-epoch-badge");
const pgWinBadge = document.getElementById("pg-window-badge");
const pgComposite = document.getElementById("pg-composite");
const pgHash = document.getElementById("pg-hash");
const pgKey = document.getElementById("pg-key");
const pgB64 = document.getElementById("pg-b64");
const clientTime = document.getElementById("client-time");
const clientEpoch = document.getElementById("client-epoch");
const serverEpoch = document.getElementById("server-epoch");
const footer = document.getElementById("footer-status");
const archDetail = document.getElementById("arch-temporal-detail");
if (pgEpochBadge) pgEpochBadge.textContent = `EPOCH ${epoch}`;
if (pgWinBadge) pgWinBadge.textContent = `${windowSec}s WINDOW`;
if (pgComposite) pgComposite.textContent = `${SALT}|${HW_COMPOSITE.slice(0,48)}...|${epoch}`;
if (pgHash) pgHash.textContent = hash;
if (pgKey) pgKey.textContent = key;
if (pgB64) pgB64.textContent = b64;
if (clientTime) clientTime.textContent = new Date().toISOString().slice(11,19) + "Z";
if (clientEpoch) clientEpoch.textContent = epoch;
if (serverEpoch) serverEpoch.textContent = epoch;
if (footer) footer.textContent = `EPOCH ${epoch} • WINDOW ${windowSec}s • KEY ${keyShort} • PORT 4433 • SYSTEM ACTIVE`;
if (archDetail) archDetail.textContent = `Epoch = floor(unix / ${windowSec}). Rotation at UTC midnight. Drift buffer: check epoch-1 for skew tolerance.`;
// nonces
const nonceTx = document.getElementById("nonce-tx");
const nonceRx = document.getElementById("nonce-rx");
if (nonceTx) nonceTx.textContent = "0x" + hash.slice(0,8).toUpperCase();
if (nonceRx) nonceRx.textContent = "0x" + "1" + hash.slice(1,8).toUpperCase();
renderEpochCells(epoch);
}
function onWindowChange(val) {
windowSec = parseInt(val);
const wv = document.getElementById("window-val");
if (wv) wv.textContent = `${val}s • ${val/3600}h`;
deriveAndUpdate();
}
async function simulate() {
const btn = document.getElementById("sim-btn");
const result = document.getElementById("match-result");
const detail = document.getElementById("match-detail");
if (!btn) return;
btn.disabled = true;
btn.textContent = "DERIVING... NTP SYNC → EPOCH CALC → SHA-512...";
await new Promise(r => setTimeout(r, 1200));
btn.className = "sim-btn matched";
btn.textContent = "✓ KEYS MATCH • WORMHOLE OPEN • TX/RX ORTHOGONAL NONCES ACTIVE";
if (result) result.style.display = "block";
const k = currentHash.slice(0,16).toUpperCase();
if (detail) detail.textContent = `→ CLIENT key=${k}... == SERVER key=${k}... TRUE\n→ ChaCha20(plaintext, key, nonce_tx=0||ctr) • ChaCha20(plaintext, key, nonce_rx=1||ctr)`;
simState = "matched";
}
function resetSim() {
simState = "idle";
const btn = document.getElementById("sim-btn");
const result = document.getElementById("match-result");
if (btn) { btn.disabled = false; btn.className = "sim-btn"; btn.textContent = "[SIMULATE CLIENT CONNECTION] → DERIVE & MATCH"; }
if (result) result.style.display = "none";
}
function toggleDrift() {
driftOn = !driftOn;
const toggle = document.getElementById("drift-toggle");
const desc = document.getElementById("drift-desc");
if (toggle) toggle.className = "toggle-btn" + (driftOn ? " on" : "");
if (desc) {
if (driftOn) {
desc.innerHTML = '<span class="on-text">TOLERANT:</span> server checks current_epoch AND previous_epoch (Epoch-1). Prevents drops during midnight NTP skew. Window overlap ~5min.';
} else {
desc.innerHTML = '<span class="off-text">STRICT:</span> only current epoch valid. Connections at 23:59:59.999 fail at 00:00:00.000. Zero clock tolerance.';
}
}
}
// HW viz bars
function renderHwBars() {
const bars = document.getElementById("hw-bars");
if (!bars) return;
bars.innerHTML = "";
for (let i = 0; i < 14; i++) {
const b = document.createElement("div");
b.style.cssText = `width:3px;background:rgba(0,255,136,0.7);height:${6+Math.sin(Date.now()/300+i)*6+6}px;opacity:${0.3+Math.sin(i)*0.35+0.35}`;
bars.appendChild(b);
}
}
// Main loop
async function tick() {
await deriveAndUpdate();
renderHwBars();
}
tick();
setInterval(tick, 1000);
// Animate SVG dot on step function viz
function animateDot() {
const dot = document.getElementById("orbit-dot-svg");
if (dot) {
const epoch = getEpoch(windowSec);
const progress = (Date.now()/1000 % windowSec) / windowSec;
const x = 20 + progress * 280;
const y = 80 - (epoch % 3) * 25;
dot.setAttribute("cx", x.toFixed(1));
dot.setAttribute("cy", y.toFixed(1));
}
requestAnimationFrame(animateDot);
}
animateDot();
</script>
</body>
</html>