<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>SHAPOR BAYAT</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
color: #00ff88;
font-family: "Courier New", monospace;
}
canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: #000;
}
#fx {
position: fixed;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 3px,
rgba(0, 255, 150, 0.035) 4px,
transparent 5px
);
mix-blend-mode: screen;
}
#scan {
position: fixed;
left: 0;
top: -8%;
width: 100%;
height: 2px;
background: #00ffff;
box-shadow:
0 0 12px #00ffff,
0 0 35px #00ff88;
opacity: 0.75;
animation: scan 3.2s linear infinite;
}
#vignette {
position: fixed;
inset: 0;
pointer-events: none;
background: radial-gradient(circle, transparent 38%, rgba(0, 0, 0, 0.35) 72%, #000 100%);
}
#panel {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(900px, 92vw);
height: min(560px, 76vh);
border: 1px solid rgba(0, 255, 136, 0.5);
box-shadow:
0 0 20px rgba(0, 255, 136, 0.12),
inset 0 0 40px rgba(0, 255, 136, 0.035);
background: rgba(0, 5, 4, 0.52);
backdrop-filter: blur(2px);
padding: 18px;
overflow: hidden;
}
#corner {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
#00ffff 0 70px,
transparent 70px calc(100% - 70px),
#00ffff calc(100% - 70px)
),
linear-gradient(
#00ffff 0 40px,
transparent 40px calc(100% - 40px),
#00ffff calc(100% - 40px)
);
opacity: 0.2;
}
#top {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 11px;
letter-spacing: 2px;
color: #66ffd0;
border-bottom: 1px solid rgba(0, 255, 136, 0.18);
padding-bottom: 10px;
}
#code {
height: calc(100% - 105px);
margin-top: 12px;
overflow: hidden;
font-size: 12px;
line-height: 1.5;
text-shadow: 0 0 7px rgba(0, 255, 136, 0.65);
white-space: pre;
}
.line {
opacity: 0.85;
}
#hud {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
font-size: 10px;
letter-spacing: 1px;
color: #8affd9;
}
#bar {
height: 4px;
margin-top: 8px;
background: rgba(0, 255, 136, 0.1);
overflow: hidden;
border: 1px solid rgba(0, 255, 136, 0.18);
}
#fill {
height: 100%;
width: 0;
background: linear-gradient(90deg, #00ff88, #00ffff);
box-shadow: 0 0 10px #00ff88;
}
#final {
position: fixed;
inset: 0;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
text-align: center;
background: radial-gradient(circle at center, rgba(0, 255, 170, 0.11), #000 55%);
overflow: hidden;
}
#flash {
position: absolute;
inset: 0;
background: #fff;
opacity: 0;
pointer-events: none;
}
#identity {
font-size: clamp(10px, 2vw, 16px);
letter-spacing: 5px;
color: #00ffff;
text-shadow: 0 0 15px #00ffff;
margin-bottom: 20px;
animation: pulse 1.4s infinite alternate;
}
#name {
position: relative;
font-family: Arial, sans-serif;
font-weight: 900;
font-size: clamp(38px, 10vw, 110px);
letter-spacing: clamp(3px, 1vw, 12px);
color: #eaffff;
text-shadow:
0 0 8px #00ffff,
0 0 28px #00ffff,
0 0 60px #00ff88;
animation: glitch 1.8s infinite;
}
#name:before,
#name:after {
content: "SHAPOR BAYAT";
position: absolute;
inset: 0;
opacity: 0.65;
pointer-events: none;
}
#name:before {
color: #ff164c;
transform: translate(2px, 0);
clip-path: inset(0 0 62% 0);
animation: g1 1.1s infinite;
}
#name:after {
color: #00ffff;
transform: translate(-2px, 0);
clip-path: inset(60% 0 0 0);
animation: g2 0.9s infinite;
}
#sig {
margin-top: 22px;
font-size: 11px;
letter-spacing: 4px;
color: #6affca;
opacity: 0.8;
}
@keyframes scan {
to {
top: 108%;
}
}
@keyframes pulse {
from {
opacity: 0.55;
}
to {
opacity: 1;
}
}
@keyframes glitch {
0%,
92%,
100% {
transform: none;
}
94% {
transform: skewX(3deg);
}
96% {
transform: skewX(-4deg);
}
}
@keyframes g1 {
0%,
100% {
transform: translate(2px, 0);
}
50% {
transform: translate(-5px, 1px);
}
}
@keyframes g2 {
0%,
100% {
transform: translate(-2px, 0);
}
50% {
transform: translate(5px, -1px);
}
}
@media (max-width: 600px) {
#panel {
height: 70vh;
padding: 12px;
}
#code {
font-size: 10px;
}
#hud {
left: 12px;
right: 12px;
bottom: 12px;
}
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<div id="fx"></div>
<div id="scan"></div>
<div id="vignette"></div>
<section id="panel">
<div id="corner"></div>
<div id="top">
<span>0x53 0x42 // 0x4F 0x4C</span><span id="status">10101001 01100101</span>
</div>
<div id="code"></div>
<div id="hud">
<div>
<span id="hex">0x00000000</span> <span id="bin">10101010 01010101</span> <span
id="pct"
>00%</span
>
</div>
<div id="bar"><div id="fill"></div></div>
</div>
</section>
<div id="final">
<div id="flash"></div>
<div>
<div id="identity">
01001001 01000100 01000101 01001110 01010100 01001001 01000110 01001001 01000101 01000100
</div>
<div id="name">SHAPOR BAYAT</div>
<div id="sig">01010011 01000010 // 0x5342</div>
</div>
</div>
<script>
const canvas = document.getElementById("matrix"),
ctx = canvas.getContext("2d");
let W,
H,
drops = [];
function resize() {
W = canvas.width = innerWidth;
H = canvas.height = innerHeight;
drops = Array.from({ length: Math.ceil(W / 18) }, () => (Math.random() * H) / 18);
}
addEventListener("resize", resize);
resize();
const chars = "01ABCDEF0123456789";
function matrix() {
ctx.fillStyle = "rgba(0,0,0,.075)";
ctx.fillRect(0, 0, W, H);
ctx.font = "14px monospace";
for (let i = 0; i < drops.length; i++) {
let x = i * 18,
y = drops[i] * 18,
c = chars[(Math.random() * chars.length) | 0];
ctx.fillStyle = Math.random() < 0.12 ? "#00ffff" : "#00ff88";
ctx.globalAlpha = 0.18 + Math.random() * 0.65;
ctx.fillText(c, x, y);
ctx.globalAlpha = 1;
if (y > H && Math.random() > 0.975) drops[i] = 0;
else drops[i] += 0.45 + Math.random() * 0.7;
}
requestAnimationFrame(matrix);
}
matrix();
const code = document.getElementById("code"),
hex = document.getElementById("hex"),
bin = document.getElementById("bin"),
pct = document.getElementById("pct"),
fill = document.getElementById("fill"),
status = document.getElementById("status");
const hx = () =>
Math.floor(Math.random() * 0xffffffff)
.toString(16)
.padStart(8, "0")
.toUpperCase();
const bn = () => Array.from({ length: 8 }, () => (Math.random() > 0.5 ? "1" : "0")).join("");
let audioCtx;
function unlockAudio() {
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
if (audioCtx.state === "suspended") audioCtx.resume();
}
addEventListener("pointerdown", unlockAudio, { once: true });
function warningSound() {
try {
unlockAudio();
const now = audioCtx.currentTime;
const o = audioCtx.createOscillator(),
g = audioCtx.createGain();
o.type = "square";
o.frequency.setValueAtTime(880, now);
o.frequency.exponentialRampToValueAtTime(440, now + 0.18);
g.gain.setValueAtTime(0.001, now);
g.gain.exponentialRampToValueAtTime(0.25, now + 0.02);
g.gain.exponentialRampToValueAtTime(0.001, now + 0.28);
o.connect(g);
g.connect(audioCtx.destination);
o.start(now);
o.stop(now + 0.3);
} catch (e) {}
}
let progress = 0;
const codeTimer = setInterval(() => {
let s = "";
for (let j = 0; j < 3; j++)
s += "0x" + hx() + " " + bn() + " " + bn() + " " + bn() + " " + bn() + "\n";
const d = document.createElement("div");
d.className = "line";
d.textContent = s;
code.appendChild(d);
while (code.children.length > 28) code.removeChild(code.firstChild);
hex.textContent = "0x" + hx();
bin.textContent = bn() + " " + bn();
status.textContent = bn() + " " + bn();
}, 115);
setTimeout(() => {
clearInterval(codeTimer);
const progressTimer = setInterval(() => {
progress++;
pct.textContent = String(progress).padStart(2, "0") + "%";
fill.style.width = progress + "%";
hex.textContent = "0x" + hx();
bin.textContent = bn() + " " + bn();
if (progress >= 100) {
clearInterval(progressTimer);
setTimeout(reveal, 550);
}
}, 90);
}, 10700);
function reveal() {
document.getElementById("final").style.display = "flex";
warningSound();
setTimeout(() => {
document.getElementById("flash").style.opacity = ".75";
setTimeout(() => (document.getElementById("flash").style.opacity = "0"), 90);
}, 120);
}
</script>
</body>
</html>