<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="VOID_TAPE">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>S.I.G.N.A.L_L.O.S.T</title>
<style>
body { background: #000; color: #fff; font-family: 'Courier New', monospace; margin: 0; overflow: hidden; touch-action: manipulation; }
#main-container { width: 96vw; height: 96vh; margin: 2vh auto; border: 2px solid #222; display: flex; flex-direction: column; background: #000; position: relative; overflow: hidden; }
#header { padding: 12px; border-bottom: 1px solid #222; font-size: 10px; display: flex; justify-content: space-between; color: #444; background: #050505; }
#viewport { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #222; }
.static-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://upload.wikimedia.org/wikipedia/commons/5/5a/Static_noise.gif'); background-size: cover; opacity: 0.1; z-index: 1; }
#monster { position: absolute; width: 160px; height: 260px; background: #000; border-radius: 50%; filter: blur(45px); z-index: 2; display: none; }
#text-log { height: 80px; background: #000; padding: 10px 20px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; line-height: 1.4; color: #ccc; border-bottom: 1px solid #222; z-index: 10; position: relative; }
#guide { position: absolute; width: 85%; background: rgba(0,0,0,0.98); border: 1px solid #333; padding: 20px; font-size: 11px; z-index: 30; color: #666; text-align: center; }
#blink-wrapper { width: 100%; height: 6px; background: #111; }
#blink-bar { width: 0%; height: 100%; background: #fff; }
.btn-zone { display: grid; grid-template-columns: 1fr 1fr; background: #000; }
.btn { padding: 25px; background: #000; color: #fff; border: none; font-family: 'Courier New'; text-transform: uppercase; font-size: 14px; }
.btn:active:not(:disabled) { background: #111; }
.btn:disabled { color: #222; }
#jumpscare, #win-screen { position: absolute; top:0; left:0; width:100%; height:100%; background: #000; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; }
</style>
</head>
<body>
<div id="main-container">
<div id="header">
<div>REC: ROOM_<span id="score">000</span></div>
<div id="map-container">MAP: <span id="map-view">[||||||||||]</span></div>
</div>
<div id="blink-wrapper"><div id="blink-bar"></div></div>
<div id="viewport">
<div class="static-bg"></div>
<div id="monster"></div>
<div id="guide">
<b style="color:#fff;">[ HEADPHONE WARNING ]</b><br><br>
- ADVANCE: Move to Level 100.<br>
- BLINK: Reset top bar (manual disabled during encounters).<br>
- LOCKDOWN: Distortion disables all controls.<br><br>
<span style="color:#aaa;">PRESS ADVANCE TO START ESCAPE</span>
</div>
<div id="jumpscare"><h1 style="color:red; letter-spacing: 5px;">SIGNAL LOST</h1><button onclick="location.reload()" style="background:none; color:white; border:1px solid white; padding:10px;">RE-SYNC</button></div>
<div id="win-screen"><h1 style="color:#0f0;">ESCAPE SUCCESSFUL</h1><p>YOU ARE OUTSIDE THE OFFICE.</p><button onclick="location.reload()" style="background:none; color:white; border:1px solid white; padding:10px;">REPLAY</button></div>
</div>
<div id="text-log">DATA LINK IDLE...</div>
<div class="btn-zone">
<button class="btn" id="moveBtn" onclick="move()">Advance</button>
<button class="btn" style="border-left: 1px solid #222;" id="blinkBtn" onclick="manualBlink()">Blink</button>
</div>
</div>
<script>
let score = 0, monsterActive = false, blinkUrge = 0, gameStarted = false, roomsSinceLastMonster = 0;
const descriptions = ["Empty cubicles...", "Fluorescent lights flickering.", "Server room humming.", "Water cooler gurgling.", "Stale coffee smell.", "Filing cabinets line the wall.", "Printer jammed on loop.", "Quiet hallway stretches out.", "Shadows under the doors.", "Dust in the static."];
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const mainGain = audioCtx.createGain(); mainGain.gain.setValueAtTime(0.12, audioCtx.currentTime); mainGain.connect(audioCtx.destination);
function playGlitch(duration) {
const osc = audioCtx.createOscillator(), gain = audioCtx.createGain(), lfo = audioCtx.createOscillator(), lfoG = audioCtx.createGain();
osc.type = 'square'; osc.frequency.setValueAtTime(40, audioCtx.currentTime);
lfo.type = 'square'; lfo.frequency.setValueAtTime(14, audioCtx.currentTime);
lfoG.gain.setValueAtTime(1, audioCtx.currentTime); lfo.connect(lfoG); lfoG.connect(gain.gain);
gain.gain.setValueAtTime(0.5, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);
osc.connect(gain); gain.connect(mainGain); osc.start(); lfo.start();
osc.stop(audioCtx.currentTime + duration); lfo.stop(audioCtx.currentTime + duration);
}
function move() {
if(!gameStarted) { gameStarted = true; audioCtx.resume(); document.getElementById('guide').style.display = 'none'; }
if(monsterActive) return;
score++; roomsSinceLastMonster++;
document.getElementById('score').innerText = score.toString().padStart(3, '0');
updateMap(false);
if(score >= 100) { win(); return; }
let spawnChance = (score < 6) ? 0 : 0.08;
if(score >= 90) spawnChance = 0.25;
if(roomsSinceLastMonster > 13) spawnChance = 0.7;
if (Math.random() < spawnChance) { triggerMonster(); roomsSinceLastMonster = 0; }
else {
let msg = descriptions[Math.floor(Math.random()*descriptions.length)];
if(score === 50) msg = "<b>HALFWAY THERE. SENSORS INDICATE AGGRESSION.</b>";
if(score === 90) msg = "<b>EXIT LIGHTS DETECTED. DON'T STOP.</b>";
document.getElementById('text-log').innerHTML = msg;
}
}
function updateMap(isAlert) {
let mapIdx = score % 10, mapStr = "[";
for(let i=0; i<10; i++) mapStr += (i===mapIdx) ? "■" : "|";
document.getElementById('map-view').innerText = mapStr + "]";
document.getElementById('map-container').style.color = isAlert ? "red" : "#444";
}
setInterval(() => {
if(!gameStarted) return;
let speed = monsterActive ? 2.0 : (score >= 50 ? 1.1 : 0.8);
blinkUrge += speed;
document.getElementById('blink-bar').style.width = Math.min(blinkUrge, 100) + "%";
if(blinkUrge >= 100) processBlink(true);
}, 100);
function manualBlink() { if(!gameStarted || monsterActive) return; processBlink(false); }
function processBlink(isForced) {
if(monsterActive && isForced) { playGlitch(0.5); die(); return; }
if(monsterActive) return;
blinkUrge = 0; const view = document.getElementById('viewport');
view.style.opacity = "0"; setTimeout(() => { if(gameStarted) view.style.opacity = "1"; }, 120);
}
function triggerMonster() {
monsterActive = true; document.getElementById('moveBtn').disabled = true; document.getElementById('blinkBtn').disabled = true;
document.getElementById('monster').style.display = "block"; document.getElementById('text-log').innerHTML = "<span style='color:red'>!! DISTORTION DETECTED !!</span>";
updateMap(true); playGlitch(3);
setTimeout(() => {
if(gameStarted && score < 100) {
monsterActive = false; document.getElementById('monster').style.display = "none";
document.getElementById('moveBtn').disabled = false; document.getElementById('blinkBtn').disabled = false;
document.getElementById('text-log').innerText = "SIGNAL STABILIZED."; updateMap(false);
}
}, 3000);
}
function die() { gameStarted = false; document.getElementById('jumpscare').style.display = "flex"; }
function win() { gameStarted = false; document.getElementById('win-screen').style.display = "flex"; }
</script>
</body>
</html>