CodexWebVM / index.html
LordXido's picture
Update index.html
8aab958 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Codex Autonomous Cognitive Engine</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html, body {
margin: 0;
padding: 0;
background: #000;
color: #eaeaea;
height: 100%;
overflow: hidden;
font-family: system-ui, -apple-system, Segoe UI, Roboto, monospace;
}
.wrap {
display: grid;
place-items: center;
height: 100%;
}
.caption {
position: fixed;
bottom: 12px;
width: 100%;
text-align: center;
font-size: 12px;
opacity: 0.6;
pointer-events: none;
}
</style>
</head>
<body>
<div class="wrap">
<!-- ========================= -->
<!-- AUTONOMOUS SVG RUNTIME -->
<!-- ========================= -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="-200 -200 400 400"
width="70vmin"
height="70vmin"
style="background:black">
<!-- DEFINITIONS -->
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Λ : CONSTRAINT BOUNDARY -->
<circle
cx="0" cy="0" r="160"
fill="none"
stroke="#444"
stroke-width="2"
stroke-dasharray="6 10"/>
<!-- AUTONOMOUS RECURRENCE LOOP -->
<circle
cx="0" cy="0" r="120"
fill="none"
stroke="#00ffee"
stroke-width="3"
filter="url(#glow)">
<animateTransform
attributeName="transform"
type="rotate"
from="0 0 0"
to="360 0 0"
dur="30s"
repeatCount="indefinite"/>
</circle>
<!-- Ξ : COGNITIVE STATE CORE -->
<circle
cx="0" cy="0" r="18"
fill="#ffffff"
filter="url(#glow)">
<animate
attributeName="r"
values="16;22;16"
dur="4s"
repeatCount="indefinite"/>
</circle>
<!-- Ω : MEMORY PHASE RING -->
<circle
cx="0" cy="0" r="50"
fill="none"
stroke="#ffaa00"
stroke-width="2"
opacity="0.6">
<animateTransform
attributeName="transform"
type="rotate"
from="360 0 0"
to="0 0 0"
dur="18s"
repeatCount="indefinite"/>
</circle>
<!-- Φ : STRUCTURAL NODES -->
<g>
<circle cx="0" cy="-90" r="6" fill="#00ff88">
<animate
attributeName="cy"
values="-80;-100;-80"
dur="6s"
repeatCount="indefinite"/>
</circle>
<g transform="rotate(60)">
<circle cx="0" cy="-90" r="6" fill="#00ff88"/>
</g>
<g transform="rotate(120)">
<circle cx="0" cy="-90" r="6" fill="#00ff88"/>
</g>
<g transform="rotate(180)">
<circle cx="0" cy="-90" r="6" fill="#00ff88"/>
</g>
<g transform="rotate(240)">
<circle cx="0" cy="-90" r="6" fill="#00ff88"/>
</g>
<g transform="rotate(300)">
<circle cx="0" cy="-90" r="6" fill="#00ff88"/>
</g>
</g>
<!-- Ψ : INTENT PERTURBATION -->
<circle
cx="0" cy="0" r="90"
fill="none"
stroke="#ffffff"
stroke-width="1"
opacity="0.25">
<animate
attributeName="opacity"
values="0.1;0.4;0.1"
dur="7s"
repeatCount="indefinite"/>
</circle>
<!-- TIME DIRECTION INDICATOR -->
<path
d="M 120 0 L 140 -6 L 140 6 Z"
fill="#00ffee">
<animateTransform
attributeName="transform"
type="rotate"
from="0 0 0"
to="360 0 0"
dur="30s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
<div class="caption">
Autonomous Cognitive Engine · Geometry = State · Motion = Computation
</div>
</body>
</html>