Download index.html from Snapkitty/sovereign-temporal-root: direct link, hf CLI and curl.
- Browser
- Download file 54.3 kB
-
https://huggingface.co/Snapkitty/sovereign-temporal-root/resolve/main/index.html
- Command line
-
hf download hf://Snapkitty/sovereign-temporal-root/index.html
-
curl -L -o index.html https://huggingface.co/Snapkitty/sovereign-temporal-root/resolve/main/index.html
54.3 kB
| <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 ; } | |
| @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">> NTP sync: <span id="client-time">—</span></div> | |
| <div style="opacity:0.6">> epoch = <span id="client-epoch">—</span></div> | |
| <div>> 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">> accept() • re-derive</div> | |
| <div style="opacity:0.6">> epoch = <span id="server-epoch">—</span></div> | |
| <div>> 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 & 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> | |