132 lines
5.5 KiB
HTML
132 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>Boot Sequence — Incoming message…</title>
|
|
<style>
|
|
:root { --bg:#000; --green:#33ff66; }
|
|
* { box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
margin: 0; background: var(--bg); color: var(--green);
|
|
font: clamp(14px, 2.2vw, 16px)/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
#viewport { position: fixed; inset: 0; padding: 24px 16px; }
|
|
#screen { width:100%; height:100%; overflow:auto; white-space:pre-wrap;
|
|
text-shadow: 0 0 10px rgba(51,255,102,.4), 0 0 20px rgba(51,255,102,.2), 0 0 2px rgba(51,255,102,.6);
|
|
}
|
|
body.crt::before, body.crt::after { content:""; position: fixed; left:0; right:0; pointer-events:none; }
|
|
body.crt::before { top:0; bottom:0; background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,255,120,0.05) 50%); background-size:100% 4px; mix-blend-mode: overlay; }
|
|
body.crt::after { top:-2px; bottom:-2px; background: radial-gradient(circle at 50% 20%, rgba(0,255,153,0.12), rgba(0,0,0,0) 35%), linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(255,255,255,0.02)); }
|
|
|
|
body.crt { animation: crt-flicker 8s infinite steps(1); }
|
|
@keyframes crt-flicker {
|
|
0%,100% { filter:none; }
|
|
2% { filter: brightness(1.2) contrast(1.05) saturate(1.1); }
|
|
4% { filter: brightness(.9) contrast(1.1); }
|
|
6% { filter: brightness(1.1); }
|
|
}
|
|
.glitch { animation: glitch-burst .18s steps(1) 2; }
|
|
@keyframes glitch-burst {
|
|
0% { transform: translateY(0); filter: contrast(1.2) brightness(1.2); }
|
|
50% { transform: translateY(1px); filter: contrast(1.5) brightness(0.8); }
|
|
100% { transform: translateY(0); filter:none; }
|
|
}
|
|
|
|
.cursor { display:inline-block; width:.7ch; height:1.05em; vertical-align:-0.15em; margin-left:2px; background: currentColor; animation: blink 1s steps(1) infinite; }
|
|
.cursor.flash { animation: blink-fast .3s steps(1) infinite; }
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
@keyframes blink-fast { 50% { opacity: 0; } }
|
|
</style>
|
|
</head>
|
|
<body class="crt">
|
|
<div id="viewport">
|
|
<div id="screen" role="log" aria-live="polite" aria-atomic="false"></div>
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
const screen = document.getElementById('screen');
|
|
|
|
function randomHex(len=32){ return [...crypto.getRandomValues(new Uint8Array(Math.ceil(len/2)))].map(b=>b.toString(16).padStart(2,'0')).join('').slice(0,len); }
|
|
function newline(){ screen.append(document.createElement('br')); screen.scrollTop = screen.scrollHeight; }
|
|
function append(text=''){ screen.append(document.createTextNode(text)); newline(); }
|
|
function sleep(ms){ return new Promise(r => setTimeout(r, ms)); }
|
|
function bodyGlitch(){ document.body.classList.add('glitch'); setTimeout(()=> document.body.classList.remove('glitch'), 180); }
|
|
|
|
const bootLines = [
|
|
'Phoenix BIOS v4.0 Release 6.0',
|
|
'Copyright (C) 1985-2025 Phoenix Technologies Ltd.',
|
|
'CPU: ZION-9 3.60GHz (4 CPUs) ~3.6GHz',
|
|
'Memory Test: 65536K OK',
|
|
'Detecting IDE Drives ...',
|
|
'Primary Master: ST3250820AS 250GB',
|
|
'Primary Slave : TSSTcorp CDDVDW SH-222',
|
|
'S.M.A.R.T. Status: OK',
|
|
'Initializing USB Controllers ... Done.',
|
|
'Enabling Shadow RAM ... Done.',
|
|
'Booting from device: /dev/ttyS0',
|
|
'',
|
|
'Loading kernel v0.1.37 ....................... OK',
|
|
'Mounting / (ext4) read-only .................. OK',
|
|
'Starting init ',
|
|
'[ OK ] Started udev kernel device manager.',
|
|
'[ OK ] Reached target Local File Systems.',
|
|
'[ OK ] Reached target Network (online).',
|
|
'[ OK ] Started OpenSSH Daemon.',
|
|
'[ OK ] Started Matrix Link.',
|
|
'[WARN] entropy pool low, seeding...',
|
|
'[ OK ] Decrypting payload...',
|
|
'',
|
|
];
|
|
|
|
// Only 5 noise lines before establishing link
|
|
const noiseLines = Array.from({length: 5}, () => `0x${randomHex(16)} ${randomHex(32)} ${randomHex(8)}`);
|
|
|
|
const lines = [...bootLines, ...noiseLines, '', '>>> establishing link…', ''];
|
|
|
|
let speed = 1;
|
|
let aborted = false;
|
|
|
|
async function typeLine(line){
|
|
for (let i=0; i<line.length; i++){
|
|
if (aborted) return;
|
|
screen.append(document.createTextNode(line[i]));
|
|
screen.scrollTop = screen.scrollHeight;
|
|
await sleep(speed>1 ? 3 : 12 + Math.random()*30);
|
|
}
|
|
newline();
|
|
if (line.startsWith('[WARN]')) bodyGlitch();
|
|
}
|
|
|
|
document.addEventListener('click', () => { speed = 3; });
|
|
|
|
(async function run(){
|
|
await sleep(200);
|
|
for (const line of lines){
|
|
if (aborted) return;
|
|
if (Math.random() < 0.15) { append(line); await sleep(60/speed); }
|
|
else { await typeLine(line); }
|
|
if (Math.random() < 0.07) bodyGlitch();
|
|
}
|
|
await sleep(300);
|
|
|
|
const final = 'Incoming message... Andy is a cock.';
|
|
const span = document.createElement('span');
|
|
screen.append(span);
|
|
for (let i=0; i<final.length; i++){
|
|
span.textContent += final[i];
|
|
screen.scrollTop = screen.scrollHeight;
|
|
await sleep(110 / speed);
|
|
}
|
|
const cursor = document.createElement('span');
|
|
cursor.className = 'cursor flash';
|
|
screen.append(cursor);
|
|
screen.scrollTop = screen.scrollHeight;
|
|
})();
|
|
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |