<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no, viewport-fit=cover">
<title>GGLS - iPhone 17 Pro Edition</title>
<style>
:root {
--gg-green: #00ff41;
--gg-red: #ff0000;
}
body {
background-color: #050505;
color: var(--gg-green);
font-family: -apple-system, 'Courier New', sans-serif;
margin: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
/* Support for iPhone 17 Pro Dynamic Island and Home Bar */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
height: 100vh;
}
#ui-layer {
width: 100%;
padding: 10px 0;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 40, 0, 0.9);
border-bottom: 2px solid var(--gg-green);
z-index: 10;
}
.stat-box {
font-size: 16px;
font-weight: bold;
text-shadow: 0 0 5px var(--gg-green);
margin: 2px 0;
}
#money-display { color: #ffd700; display: none; }
/* Responsive Grid for Mobile/iPhone */
#grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns for narrow mobile screens */
gap: 12px;
padding: 15px;
width: 95vw;
box-sizing: border-box;
flex-grow: 1;
}
/* Adjust back to 4 columns for wider screens */
@media (min-width: 768px) {
#grid { grid-template-columns: repeat(4, 1fr); }
}
.cell {
position: relative;
background: #111;
border: 3px solid #333;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
-webkit-tap-highlight-color: transparent; /* Remove mobile flicker */
}
.door-label {
position: absolute;
top: 5px;
font-size: 9px;
color: #555;
text-align: center;
width: 100%;
}
.door {
width: 85%;
height: 70%;
background: #222;
border: 2px solid #444;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: var(--gg-green);
transition: transform 0.2s ease-in;
z-index: 2;
pointer-events: none;
font-size: 1.2em;
}
.[Link] .door { transform: translateX(100%); background: #300; }
.[Link]#cell-7 .door { background: #4a4a00; }
.entity-visual { position: absolute; font-size: 40px; z-index: 1; }
.timer-bar {
position: absolute;
bottom: 0; left: 0; height: 6px;
background: var(--gg-red); width: 0%; z-index: 3;
}
#overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
#blood-splatter {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: radial-gradient(circle, transparent 20%, rgba(139,0,0,0.7) 100%);
pointer-events: none;
display: none;
}
.coupon {
background: #fff;
color: #000;
padding: 15px;
border: 4px dashed #000;
margin: 15px;
font-weight: bold;
font-size: 0.9em;
}
.code-input {
background: #000;
border: 2px solid var(--gg-green);
color: var(--gg-green);
padding: 15px;
text-align: center;
margin-top: 10px;
font-size: 18px;
width: 80%;
border-radius: 8px;
}
.btn {
padding: 18px 30px;
background: var(--gg-green);
color: #000;
border: none;
font-weight: bold;
cursor: pointer;
margin-top: 15px;
border-radius: 10px;
font-size: 1.1em;
width: 80%;
}
</style>
</head>
<body id="game-body">
<div id="ui-layer">
<div class="stat-box">SECURED: <span id="score">0</span> / 122</div>
<div class="stat-box" id="money-display">GGUCC BALANCE: $<span
id="balance">0</span></div>
</div>
<div id="grid">
<script>
for(let i=0; i<8; i++) {
[Link](`
<div class="cell" id="cell-${i}" onclick="hitDoor(${i})">
<span class="door-label">C_${i+1} ${i===7 ? '!!' : ''}</span>
<div class="entity-visual" id="ev-${i}">?</div>
<div class="door" id="door-${i}">...</div>
<div class="timer-bar" id="bar-${i}"></div>
</div>
`);
}
</script>
</div>
<div id="overlay">
<div id="blood-splatter"></div>
<div id="win-screen" style="display:none;">
<h1 style="color:var(--gg-green)">STABILIZED</h1>
<div class="coupon">
GGUCC COUPON [cite: 5, 163]<br>
CODE: 88-GOOSE-FREE<br>
VALID AT ANY GGUCC OUTLET
</div>
<input type="number" id="secretCode" class="code-input" placeholder="CODE">
<button class="btn" onclick="checkCode()">REDEEM PAYROLL</button>
</div>
<div id="death-screen" style="display:none;">
<p style="color:var(--gg-red); font-size: 1.1em;">"Good thing this is just a game."</p>
<h1 id="death-title" style="color:var(--gg-red); font-size: 2.5em;">BREACH</h1>
<p id="death-desc" style="color:white; padding: 0 20px;"></p>
<button class="btn" onclick="[Link]()">REBOOT</button>
</div>
<div id="start-screen">
<h1 style="font-size: 1.8em;">GGLS SECURITY</h1>
<p style="font-size: 0.9em;">Click 4 times to secure.<br>Note: C_8 is blocked. Tap C_7 to
close it.</p>
<button class="btn" onclick="startGame()">INITIALIZE</button>
</div>
</div>
<script>
let score = 0;
let gameActive = false;
const entities = ["T.V. Entity", "Entity 0.001", "404 Entity", "Entity ERR0R", "???", "???", "???",
📺 🔢 🚫 ⚠️ ❓ ❓ ❓ ❓
"???"];
const icons = [" ", " ", " ", " ", " ", " ", " ", " "];
let cellStates = Array(8).fill(null).map(() => ({ open: false, clicks: 0, timer: 0 }));
let intervals = [];
function startGame() {
score = 0;
gameActive = true;
[Link]('score').innerText = score;
[Link]('overlay').[Link] = 'none';
[Link](setInterval(randomSpawn, 1600));
[Link](setInterval(updateTimers, 100));
}
function randomSpawn() {
if (!gameActive) return;
let id = [Link]([Link]() * 8);
if (!cellStates[id].open) openCell(id);
}
function openCell(id) {
cellStates[id] = { open: true, clicks: 4, timer: 0 };
[Link](`cell-${id}`).[Link]('open');
[Link](`ev-${id}`).innerText = icons[id];
[Link](`door-${id}`).innerText = id === 7 ? "TRAP" : "4";
}
function hitDoor(id) {
if (!gameActive) return;
// Logic for the 8th Door (Index 7) - The Trap
if (id === 7 && cellStates[7].open) {
gameOver("Try door 7 next time. This cell number has you on it's blocked contacts.");
return;
}
// Proxy logic for Door 8
if (id === 6 && cellStates[7].open) {
processClick(7);
return;
}
if (cellStates[id].open) processClick(id);
}
function processClick(id) {
cellStates[id].clicks--;
if (cellStates[id].clicks <= 0) {
score += 4;
[Link]('score').innerText = score;
resetCell(id);
checkWin();
} else {
if (id !== 7) [Link](`door-${id}`).innerText = cellStates[id].clicks;
}
}
function resetCell(id) {
cellStates[id] = { open: false, clicks: 0, timer: 0 };
[Link](`cell-${id}`).[Link]('open');
[Link](`door-${id}`).innerText = "SECURED";
[Link](`bar-${id}`).[Link] = '0%';
}
function updateTimers() {
if (!gameActive) return;
for (let i = 0; i < 8; i++) {
if (cellStates[i].open) {
cellStates[i].timer += 0.1;
[Link](`bar-${i}`).[Link] = (cellStates[i].timer / 15) * 100 + '%';
if (cellStates[i].timer >= 15) gameOver(entities[i] + " has got you.");
}
}
}
function checkWin() {
if (score >= 122) {
gameActive = false;
[Link](clearInterval);
[Link]('overlay').[Link] = 'flex';
[Link]('start-screen').[Link] = 'none';
[Link]('win-screen').[Link] = 'block';
}
}
function checkCode() {
const code = [Link]('secretCode').value;
if (code === "1234") {
[Link]('balance').innerText = "50,000";
[Link]('money-display').[Link] = 'block';
alert("PAYROLL DEPOSITED TO GGUCC ACCOUNT.");
}
}
function gameOver(msg) {
gameActive = false;
[Link](clearInterval);
[Link]('overlay').[Link] = 'flex';
[Link]('blood-splatter').[Link] = 'block';
[Link]('start-screen').[Link] = 'none';
[Link]('death-screen').[Link] = 'block';
let finalDesc = msg;
if ([Link]("T.V. Entity")) {
finalDesc = "Did you actually die to a TV? Go back to working a minimum wage job.
HA!";
}
[Link]('death-desc').innerText = finalDesc;
}
</script>
</body>
</html>