⚠ SYSTEM BREACH
:root{
–bg:#040404;
–green:#6fffc1;
–muted:#0b0b0b;
–red:#ff3b3b;
}
html,body{height:100%;margin:0;background:var(–bg);font-family: “SF Mono”, “Courier New”, monospace;}
.wrap{
height:100%;
display:flex;
align-items:flex-start;
justify-content:center;
padding:48px;
box-sizing:border-box;
overflow:hidden;
position:relative;
}
.terminal{
width:min(1100px,94vw);
height:min(720px,84vh);
background:linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.92));
border-radius:12px;
box-shadow:0 20px 50px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.6) inset;
padding:30px;
color:var(–green);
font-size:18px;
line-height:1.45;
position:relative;
overflow:hidden;
border:1px solid rgba(140,255,190,0.06);
}
/* scanline */
.terminal::after{
content:””;
position:absolute;left:0;top:0;right:0;bottom:0;
background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.04) 50%, rgba(0,0,0,0));
background-size:100% 3px;
pointer-events:none;
mix-blend-mode:overlay;
}
.cursor { display:inline-block; width:12px; height:20px; background:var(–green); margin-left:6px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; transform:translateY(-1px);} }
.glow { text-shadow:0 0 6px rgba(111,255,193,0.12), 0 0 20px rgba(111,255,193,0.03);}
/* flicker */
.flicker{ animation:flick 3.2s infinite; }
@keyframes flick { 0% { opacity:1 } 8%{opacity:.6} 10%{opacity:1} 32%{opacity:.85} 60%{opacity:1} 100%{opacity:1} }
/* logs pane */
.left { width:65%; float:left; padding-right:24px; box-sizing:border-box; }
.right { width:35%; float:right; border-left:1px dashed rgba(255,255,255,0.03); padding-left:24px; box-sizing:border-box; height:100%; overflow:hidden; }
.big { font-weight:700; font-size:20px; color:var(–green); margin-bottom:14px; }
.muted { color:rgba(110,255,190,0.16); font-weight:600; }
.log { font-family:inherit; white-space:pre-wrap; max-height:56vh; overflow:auto; padding-right:4px; }
.red-alert {
position:absolute; left:0; right:0; top:0; bottom:0;
background:linear-gradient(180deg, rgba(255,59,59,0.04), rgba(255,59,59,0.02));
mix-blend-mode:overlay;
pointer-events:none;
opacity:0; transition:opacity .45s ease;
}
.red-alert.active{ opacity:1; }
.warning {
color:var(–red); font-weight:800; letter-spacing:0.06em;
background:rgba(255,59,59,0.04); padding:6px 12px; border-radius:6px; display:inline-block;
}
.notice { color:#9af2cc; font-weight:700; margin-bottom:8px; }
.progress{
background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
border-radius:6px; height:12px; overflow:hidden; margin:10px 0 20px;
}
.progress > i { display:block; height:100%; width:0%; background:linear-gradient(90deg, rgba(111,255,193,0.18), rgba(111,255,193,0.32)); box-shadow:0 0 18px rgba(111,255,193,0.06) inset; transition:width .6s linear; }
.fake-ip { color:rgba(110,255,190,0.9); font-weight:700; font-size:13px; margin-bottom:8px; display:block; }
/* glitch text effect */
.glitch {
position:relative;
display:inline-block;
transform:translateZ(0);
}
.glitch::before, .glitch::after{
content:attr(data-text);
position:absolute; left:0; top:0; width:100%;
opacity:0.85;
clip-path:var(–clip, inset(0));
}
.glitch::before{ color:#00ffd1; transform:translate(2px,-1px); mix-blend-mode:screen; opacity:.7; filter:blur(.4px); }
.glitch::after{ color:#7cffb5; transform:translate(-1px,2px); mix-blend-mode:overlay; opacity:.6; filter:blur(.6px); }
/* small footer */
.foot { position:absolute; left:20px; bottom:14px; color:rgba(110,255,190,0.06); font-size:12px; }
> HELLO.
Boot sequence: initializing
SYSTEM
IP: 0.0.0.0
ACCESS: RESTRICTED
> MESSAGE: SITE COMPROMISED
(function(){
const logs = document.getElementById(‘logs’);
const boot = document.getElementById(‘boot’);
const ipEl = document.getElementById(‘ip’);
const access = document.getElementById(‘access’);
const bar = document.getElementById(‘bar’);
const pct = document.getElementById(‘percent’);
const events = document.getElementById(‘events’);
const red = document.getElementById(‘red’);
// fake data
const lines = [
“[00:00:12] /usr/bin/ssh: connection established”,
“[00:00:13] /root/patch: injecting payload.elf”,
“[00:00:14] /kernel: permission escalated -> root”,
“[00:00:15] /io: writing sectors [■■■■■■■■■■■■■■■■■]”,
“[00:00:17] /auth: token stolen: 0x6f2d…b9a”,
“[00:00:18] /db: exfiltrate -> remote://198.51.100.14:443”,
“[00:00:20] /svc: service ‘web’ disabled”,
“[00:00:22] /watchdog: restart scheduled”,
“[00:00:25] /cleanup: shred logs (partial)”,
“>>> root@system: welcome back, operator.”,
“>>> ALERT: INTEGRITY CHECK FAILED”
];
const eventList = [
“kernel panic patched”,
“credentials leaked”,
“firewall bypassed”,
“persistence established”,
“backup encrypted”,
“guest session dropped”
];
// generate a random fake IP
function rndIp(){ return [198,51,100,Math.floor(Math.random()*255)].join(‘.’); }
ipEl.textContent = ‘IP: ‘ + rndIp();
// typing & push logs
let i=0;
function pushLine(){
if(i >= lines.length) {
// loop with random noise
const jitter = Math.random();
if(jitter > 0.7) {
logs.innerText += “\n” + lines[Math.floor(Math.random()*lines.length)];
}
// small scroll
logs.scrollTop = logs.scrollHeight;
setTimeout(pushLine, 700 + Math.random()*900);
return;
}
logs.innerText += lines[i] + “\\n”;
logs.scrollTop = logs.scrollHeight;
i++;
setTimeout(pushLine, 600 + Math.random()*900);
}
pushLine();
// boot sequence
const boots = [“initializing”,”loading modules”,”authing…”,”kernel patching”,”compromised”,”locked”];
let b=0;
(function bseq(){
boot.textContent = boots[b % boots.length];
b++;
setTimeout(bseq, 1200 + Math.random()*1200);
})();
// progress bar simulation
let p = 2;
function prog(){
if(p 99) p=99;
bar.style.width = p + “%”;
pct.textContent = p + “%”;
setTimeout(prog, 600 + Math.random()*700);
} else {
bar.style.width = “100%”;
pct.textContent = “100%”;
// trigger red alert
red.classList.add(‘active’);
access.textContent = “ACCESS: BREACHED”;
access.style.color = “var(–red)”;
// add final scary lines
logs.innerText += “\\n[00:01:05] /system: all nodes compromised.\\n[00:01:06] /msg: planting banner…\\n”;
}
}
setTimeout(prog, 1000);
// event ticker
setInterval(()=>{
events.textContent = eventList[Math.floor(Math.random()*eventList.length)];
}, 2000);
// occasional glitch flicker (tighter)
setInterval(()=> {
const t = document.getElementById(‘term’);
t.style.transform = `translate(${(Math.random()-0.5)*2}px, ${(Math.random()-0.5)*2}px)`;
setTimeout(()=> t.style.transform = “”, 120);
}, 1600 + Math.random()*2000);
// tiny beep (optional) – will be blocked unless user interacted in some browsers
function beep(){
try {
const ctx = new (window.AudioContext || window.webkitAudioContext)();
const o = ctx.createOscillator();
const g = ctx.createGain();
o.type = “sawtooth”;
o.frequency.value = 260 + Math.random()*180;
g.gain.value = 0.02;
o.connect(g); g.connect(ctx.destination);
o.start();
setTimeout(()=>{ o.stop(); ctx.close(); }, 120);
} catch(e){}
}
// beep occasionally after interactions
document.addEventListener(‘click’, ()=> { beep(); });
setTimeout(()=> beep(), 1800);
// add random events to logs every now and then
setInterval(()=>{
logs.innerText += “\\n” + “[99:” + Math.floor(Math.random()*99).toString().padStart(2,’0′) + “] ” +
(Math.random()>0.5?”/intruder/”:”[sys] “) + [“payload executed”,”bridge open”,”data stream started”,”snapshot taken”][Math.floor(Math.random()*4)];
logs.scrollTop = logs.scrollHeight;
}, 2400 + Math.random()*2600);
// prevent accidental selection for more cinematic feel
document.onselectstart = () => false;
})();
otardemu.com 