<!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,.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:.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,.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,.5);box-shadow:0 0 20px rgba(0,255,136,.12),inset 0 0 40px rgba(0,255,136,.035);background:rgba(0,5,4,.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:.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,.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,.65);white-space:pre}
.line{opacity:.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,.1);overflow:hidden;border:1px solid rgba(0,255,136,.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,.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:.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 .9s infinite}
#sig{margin-top:22px;font-size:11px;letter-spacing:4px;color:#6affca;opacity:.8}
@keyframes scan{to{top:108%}}
@keyframes pulse{from{opacity:.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()<.12?"#00ffff":"#00ff88";ctx.globalAlpha=.18+Math.random()*.65;ctx.fillText(c,x,y);ctx.globalAlpha=1;
if(y>H&&Math.random()>.975)drops[i]=0;else drops[i]+=.45+Math.random()*.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()>.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+.18);
g.gain.setValueAtTime(.001,now);
g.gain.exponentialRampToValueAtTime(.25,now+.02);
g.gain.exponentialRampToValueAtTime(.001,now+.28);
o.connect(g);g.connect(audioCtx.destination);o.start(now);o.stop(now+.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>