Spaces:

Soda5601
/

zb

Running

App Files Files Community

Soda5601 commited on Aug 9, 2025

Commit

88a14a4

verified ·

1 Parent(s): cf1b2f9

imgur isnot working - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +634 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Zb
-emoji: 🌖
-colorFrom: blue
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: zb
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,634 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anti-Zombie Venter - Threat Department</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes flicker {
+            0% { opacity: 1; }
+            25% { opacity: 0.8; }
+            50% { opacity: 0.6; }
+            75% { opacity: 0.8; }
+            100% { opacity: 1; }
+        }
+        .flicker {
+            animation: flicker 2s infinite;
+        }
+        .camera-feed {
+            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2048&q=80');
+            background-size: cover;
+            background-position: center;
+        }
+        .jumpscare {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: black;
+            z-index: 100;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.1s;
+        }
+        .jumpscare img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .mutant-presence {
+            position: absolute;
+            transition: all 0.5s;
+            opacity: 0;
+        }
+        .mutant-presence.visible {
+            opacity: 1;
+        }
+        .power-bar {
+            transition: width 0.5s;
+        }
+        .serum-progress {
+            transition: width 1s;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white font-mono overflow-hidden">
+    <!-- Jumpscare Screen -->
+    <div class="jumpscare" id="jumpscare">
+        <img src="" alt="Jumpscare" id="jumpscare-image">
+    </div>
+    <!-- Main Game Container -->
+    <div class="container mx-auto px-4 py-8 relative" id="game-container">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-6 border-b border-red-700 pb-4">
+            <h1 class="text-3xl font-bold text-red-500 flicker">THREAT DEPARTMENT</h1>
+            <div class="text-right">
+                <p class="text-yellow-400">NIGHT <span id="night-number">1</span></p>
+                <p class="text-sm text-gray-400">Anti-Zombie Venter System</p>
+            </div>
+        </header>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Camera Select Section -->
+            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700">
+                <h2 class="text-xl font-bold text-red-400 mb-4 border-b border-gray-700 pb-2">CAM SELECT</h2>
+                <div class="grid grid-cols-2 gap-3">
+                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="1">CAM 1: Main Hall</button>
+                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="2">CAM 2: East Corridor</button>
+                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="3">CAM 3: West Corridor</button>
+                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="4">CAM 4: Storage Room</button>
+                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="5">CAM 5: Lab Entrance</button>
+                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="6">CAM 6: Ventilation</button>
+                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="7">CAM 7: Serum Storage</button>
+                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="8">CAM 8: Office Hall</button>
+                </div>
+            </div>
+            <!-- Camera Feed Section -->
+            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 lg:col-span-2">
+                <div class="flex justify-between items-center mb-4 border-b border-gray-700 pb-2">
+                    <h2 class="text-xl font-bold text-red-400">CAM FEED</h2>
+                    <div class="text-sm text-yellow-400" id="current-cam">CAM 1: Main Hall</div>
+                </div>
+                <div class="camera-feed h-64 md:h-96 rounded-lg relative overflow-hidden" id="camera-feed">
+                    <!-- Mutants will appear here -->
+                    <div class="mutant-presence" id="mutant-1">
+                        <img src="https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317034_640.png" alt="Mutant 1" class="h-24 absolute bottom-0 right-4">
+                    </div>
+                    <div class="mutant-presence" id="mutant-2">
+                        <img src="https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317035_640.png" alt="Mutant 2" class="h-24 absolute bottom-0 left-4">
+                    </div>
+                    <div class="mutant-presence" id="mutant-3">
+                        <img src="https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317036_640.png" alt="Mutant 3" class="h-24 absolute bottom-0 right-10">
+                    </div>
+                    <div class="mutant-presence" id="mutant-4">
+                        <img src="https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317037_640.png" alt="Mutant 4" class="h-24 absolute bottom-0 left-10">
+                    </div>
+                </div>
+                <div class="mt-4 flex justify-between items-center">
+                    <button class="bg-red-700 hover:bg-red-600 py-2 px-4 rounded flex items-center" id="serum-btn">
+                        <i class="fas fa-syringe mr-2"></i> DELIVER SERUM (<span id="serum-count">3</span>)
+                    </button>
+                    <div class="text-xs text-gray-400">Serum progress: <span id="serum-percent">0</span>%</div>
+                </div>
+                <div class="w-full bg-gray-700 h-2 mt-2 rounded">
+                    <div class="bg-green-500 h-2 rounded serum-progress" id="serum-progress" style="width: 0%"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Office Controls Section -->
+        <div class="mt-6 bg-gray-800 p-4 rounded-lg border border-gray-700">
+            <h2 class="text-xl font-bold text-red-400 mb-4 border-b border-gray-700 pb-2">OFFICE CONTROLS</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div>
+                    <h3 class="text-lg font-bold text-yellow-400 mb-2">DOOR CONTROLS</h3>
+                    <div class="flex space-x-4">
+                        <div>
+                            <button class="door-btn bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded flex items-center mb-2" data-door="left">
+                                <i class="fas fa-door-closed mr-2" id="left-door-icon"></i> LEFT DOOR
+                            </button>
+                            <div class="text-xs text-center">Power: <span id="left-door-power">100</span>%</div>
+                        </div>
+                        <div>
+                            <button class="door-btn bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded flex items-center mb-2" data-door="right">
+                                <i class="fas fa-door-closed mr-2" id="right-door-icon"></i> RIGHT DOOR
+                            </button>
+                            <div class="text-xs text-center">Power: <span id="right-door-power">100</span>%</div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold text-yellow-400 mb-2">VENT CONTROLS</h3>
+                    <div class="flex space-x-4">
+                        <div>
+                            <button class="vent-btn bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded flex items-center mb-2" data-vent="left">
+                                <i class="fas fa-fan mr-2" id="left-vent-icon"></i> LEFT VENT
+                            </button>
+                            <div class="text-xs text-center">Power: <span id="left-vent-power">100</span>%</div>
+                        </div>
+                        <div>
+                            <button class="vent-btn bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded flex items-center mb-2" data-vent="right">
+                                <i class="fas fa-fan mr-2" id="right-vent-icon"></i> RIGHT VENT
+                            </button>
+                            <div class="text-xs text-center">Power: <span id="right-vent-power">100</span>%</div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold text-yellow-400 mb-2">SYSTEM STATUS</h3>
+                    <div class="mb-2">
+                        <div class="flex justify-between text-sm mb-1">
+                            <span>POWER</span>
+                            <span id="power-percent">100%</span>
+                        </div>
+                        <div class="w-full bg-gray-700 h-4 rounded">
+                            <div class="bg-blue-500 h-4 rounded power-bar" id="power-bar" style="width: 100%"></div>
+                        </div>
+                    </div>
+                    <div class="text-sm">
+                        <div class="flex justify-between">
+                            <span>Time:</span>
+                            <span id="game-time">12:00 AM</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span>Serum:</span>
+                            <span id="serum-status">Ready</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span>Threat Level:</span>
+                            <span id="threat-level">Low</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Audio elements -->
+        <audio id="camera-sound" src="https://www.soundjay.com/mechanical/sounds/camera-shutter-click-01.mp3" preload="auto"></audio>
+        <audio id="door-sound" src="https://www.soundjay.com/mechanical/sounds/door-creak-1.mp3" preload="auto"></audio>
+        <audio id="vent-sound" src="https://www.soundjay.com/mechanical/sounds/fan-01.mp3" preload="auto"></audio>
+        <audio id="serum-sound" src="https://www.soundjay.com/mechanical/sounds/beep-07.mp3" preload="auto"></audio>
+        <audio id="jumpscare-sound" src="https://www.soundjay.com/human/sounds/scream-06.mp3" preload="auto"></audio>
+        <audio id="static-sound" src="https://www.soundjay.com/communication/sounds/radio-static-1.mp3" preload="auto" loop></audio>
+    </div>
+    <script>
+        // Game State
+        const gameState = {
+            currentCam: 1,
+            power: 100,
+            leftDoor: true,
+            rightDoor: true,
+            leftVent: false,
+            rightVent: false,
+            serumCount: 3,
+            serumProgress: 0,
+            night: 1,
+            time: 0, // 0-6 hours (0-360 minutes)
+            gameOver: false,
+            mutants: {
+                1: { name: "Necro", location: 8, aggression: 1, fakeMoves: 0 },
+                2: { name: "Venom", location: 8, aggression: 2, fakeMoves: 0 },
+                3: { name: "Fester", location: 8, aggression: 3, fakeMoves: 0 },
+                4: { name: "Rot", location: 8, aggression: 4, fakeMoves: 0 }
+            },
+            mutantLocations: {
+                1: "Main Hall",
+                2: "East Corridor",
+                3: "West Corridor",
+                4: "Storage Room",
+                5: "Lab Entrance",
+                6: "Ventilation",
+                7: "Serum Storage",
+                8: "Office Hall"
+            }
+        };
+        // DOM Elements
+        const elements = {
+            gameContainer: document.getElementById('game-container'),
+            jumpscare: document.getElementById('jumpscare'),
+            jumpscareImage: document.getElementById('jumpscare-image'),
+            currentCamDisplay: document.getElementById('current-cam'),
+            cameraFeed: document.getElementById('camera-feed'),
+            powerBar: document.getElementById('power-bar'),
+            powerPercent: document.getElementById('power-percent'),
+            leftDoorIcon: document.getElementById('left-door-icon'),
+            rightDoorIcon: document.getElementById('right-door-icon'),
+            leftVentIcon: document.getElementById('left-vent-icon'),
+            rightVentIcon: document.getElementById('right-vent-icon'),
+            leftDoorPower: document.getElementById('left-door-power'),
+            rightDoorPower: document.getElementById('right-door-power'),
+            leftVentPower: document.getElementById('left-vent-power'),
+            rightVentPower: document.getElementById('right-vent-power'),
+            serumCount: document.getElementById('serum-count'),
+            serumProgress: document.getElementById('serum-progress'),
+            serumPercent: document.getElementById('serum-percent'),
+            serumStatus: document.getElementById('serum-status'),
+            gameTime: document.getElementById('game-time'),
+            threatLevel: document.getElementById('threat-level'),
+            nightNumber: document.getElementById('night-number'),
+            // Audio elements
+            cameraSound: document.getElementById('camera-sound'),
+            doorSound: document.getElementById('door-sound'),
+            ventSound: document.getElementById('vent-sound'),
+            serumSound: document.getElementById('serum-sound'),
+            jumpscareSound: document.getElementById('jumpscare-sound'),
+            staticSound: document.getElementById('static-sound')
+        };
+        // Initialize game
+        function initGame() {
+            // Set up event listeners
+            document.querySelectorAll('.cam-btn').forEach(btn => {
+                btn.addEventListener('click', () => switchCamera(parseInt(btn.dataset.cam)));
+            });
+            document.querySelectorAll('.door-btn').forEach(btn => {
+                btn.addEventListener('click', () => toggleDoor(btn.dataset.door));
+            });
+            document.querySelectorAll('.vent-btn').forEach(btn => {
+                btn.addEventListener('click', () => toggleVent(btn.dataset.vent));
+            });
+            document.getElementById('serum-btn').addEventListener('click', deliverSerum);
+            // Start game loop
+            setInterval(gameLoop, 1000);
+            setInterval(cameraStatic, 5000);
+            setInterval(updatePower, 30000);
+        }
+        // Game loop
+        function gameLoop() {
+            if (gameState.gameOver) return;
+            // Update time
+            gameState.time += 1;
+            updateTimeDisplay();
+            // Check for mutants in office
+            checkForAttack();
+            // Update UI
+            updatePowerDisplay();
+            updateMutantVisibility();
+            updateThreatLevel();
+        }
+        // Camera static effect
+        function cameraStatic() {
+            if (Math.random() < 0.3) { // 30% chance of static
+                elements.cameraFeed.style.backgroundImage = 'none';
+                elements.cameraFeed.style.backgroundColor = 'black';
+                elements.staticSound.currentTime = 0;
+                elements.staticSound.play();
+                setTimeout(() => {
+                    elements.cameraFeed.style.backgroundImage = 'linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2048&q=80")';
+                }, 500);
+            }
+        }
+        // Switch camera view
+        function switchCamera(camNumber) {
+            if (gameState.gameOver) return;
+            gameState.currentCam = camNumber;
+            elements.currentCamDisplay.textContent = `CAM ${camNumber}: ${gameState.mutantLocations[camNumber]}`;
+            // Play camera sound
+            elements.cameraSound.currentTime = 0;
+            elements.cameraSound.play();
+            // Use a bit of power
+            gameState.power -= 0.2;
+            if (gameState.power < 0) gameState.power = 0;
+            updatePowerDisplay();
+        }
+        // Toggle door
+        function toggleDoor(doorSide) {
+            if (gameState.gameOver) return;
+            // Play door sound
+            elements.doorSound.currentTime = 0;
+            elements.doorSound.play();
+            if (doorSide === 'left') {
+                gameState.leftDoor = !gameState.leftDoor;
+                elements.leftDoorIcon.className = gameState.leftDoor ? 'fas fa-door-open mr-2' : 'fas fa-door-closed mr-2';
+            } else {
+                gameState.rightDoor = !gameState.rightDoor;
+                elements.rightDoorIcon.className = gameState.rightDoor ? 'fas fa-door-open mr-2' : 'fas fa-door-closed mr-2';
+            }
+        }
+        // Toggle vent
+        function toggleVent(ventSide) {
+            if (gameState.gameOver) return;
+            // Play vent sound
+            elements.ventSound.currentTime = 0;
+            elements.ventSound.play();
+            if (ventSide === 'left') {
+                gameState.leftVent = !gameState.leftVent;
+                elements.leftVentIcon.className = gameState.leftVent ? 'fas fa-fan mr-2 text-green-500' : 'fas fa-fan mr-2';
+            } else {
+                gameState.rightVent = !gameState.rightVent;
+                elements.rightVentIcon.className = gameState.rightVent ? 'fas fa-fan mr-2 text-green-500' : 'fas fa-fan mr-2';
+            }
+        }
+        // Deliver serum
+        function deliverSerum() {
+            if (gameState.gameOver || gameState.serumCount <= 0 || gameState.serumProgress >= 100) return;
+            // Play serum sound
+            elements.serumSound.currentTime = 0;
+            elements.serumSound.play();
+            gameState.serumCount--;
+            gameState.serumProgress += 33;
+            if (gameState.serumProgress >= 99) {
+                gameState.serumProgress = 99;
+                elements.serumStatus.textContent = "Complete";
+                // Win condition
+                setTimeout(() => {
+                    alert(`Congratulations! You survived Night ${gameState.night}!`);
+                    gameState.night++;
+                    elements.nightNumber.textContent = gameState.night;
+                    resetNight();
+                }, 1000);
+            }
+            updateSerumDisplay();
+        }
+        // Check for mutant attack
+        function checkForAttack() {
+            Object.keys(gameState.mutants).forEach(mutantId => {
+                const mutant = gameState.mutants[mutantId];
+                if (mutant.location === 8) { // Office Hall
+                    // Check if door is closed
+                    if ((mutantId % 2 === 0 && !gameState.rightDoor) || (mutantId % 2 !== 0 && !gameState.leftDoor)) {
+                        // Attack!
+                        triggerJumpscare(mutantId);
+                    }
+                }
+            });
+        }
+        // Trigger jumpscare
+        function triggerJumpscare(mutantId) {
+            gameState.gameOver = true;
+            // Set jumpscare image based on mutant
+            const mutantImages = {
+                1: "https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317034_640.png",
+                2: "https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317035_640.png",
+                3: "https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317036_640.png",
+                4: "https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317037_640.png"
+            };
+            elements.jumpscareImage.src = mutantImages[mutantId];
+            // Play sounds
+            elements.jumpscareSound.currentTime = 0;
+            elements.jumpscareSound.play();
+            elements.staticSound.currentTime = 0;
+            elements.staticSound.play();
+            // Show jumpscare
+            elements.jumpscare.style.opacity = "1";
+            // Game over
+            setTimeout(() => {
+                alert(`Game Over! You were caught by ${gameState.mutants[mutantId].name} on Night ${gameState.night}.`);
+                resetNight();
+            }, 2000);
+        }
+        // Update power display
+        function updatePowerDisplay() {
+            elements.powerBar.style.width = `${gameState.power}%`;
+            elements.powerPercent.textContent = `${Math.floor(gameState.power)}%`;
+            // Low power effects
+            if (gameState.power < 20) {
+                elements.powerBar.classList.add('bg-red-500');
+                elements.powerBar.classList.remove('bg-blue-500');
+                // Random flickering
+                if (Math.random() < 0.3) {
+                    elements.gameContainer.classList.add('opacity-50');
+                    setTimeout(() => {
+                        elements.gameContainer.classList.remove('opacity-50');
+                    }, 200);
+                }
+            } else {
+                elements.powerBar.classList.remove('bg-red-500');
+                elements.powerBar.classList.add('bg-blue-500');
+            }
+            // Power outage
+            if (gameState.power <= 0) {
+                gameState.power = 0;
+                triggerPowerOutage();
+            }
+        }
+        // Update time display
+        function updateTimeDisplay() {
+            const hours = Math.floor(gameState.time / 60);
+            const minutes = gameState.time % 60;
+            const ampm = hours >= 6 ? 'PM' : 'AM';
+            const displayHours = hours % 12 || 12;
+            elements.gameTime.textContent = `${displayHours}:${minutes < 10 ? '0' + minutes : minutes} ${ampm}`;
+            // Night completion
+            if (gameState.time >= 360) {
+                alert(`Congratulations! You survived Night ${gameState.night}!`);
+                gameState.night++;
+                elements.nightNumber.textContent = gameState.night;
+                resetNight();
+            }
+        }
+        // Update mutant visibility
+        function updateMutantVisibility() {
+            // Hide all mutants first
+            document.querySelectorAll('.mutant-presence').forEach(el => {
+                el.classList.remove('visible');
+            });
+            // Show mutants in current camera view
+            Object.keys(gameState.mutants).forEach(mutantId => {
+                const mutant = gameState.mutants[mutantId];
+                if (mutant.location === gameState.currentCam) {
+                    const mutantEl = document.getElementById(`mutant-${mutantId}`);
+                    mutantEl.classList.add('visible');
+                    // Show fake movements
+                    if (mutant.fakeMoves > 0) {
+                        mutantEl.style.transform = `translateX(${Math.random() * 20 - 10}px)`;
+                    }
+                }
+            });
+        }
+        // Update threat level
+        function updateThreatLevel() {
+            let threatScore = 0;
+            Object.keys(gameState.mutants).forEach(mutantId => {
+                const mutant = gameState.mutants[mutantId];
+                threatScore += mutant.location * mutant.aggression;
+            });
+            threatScore = threatScore / 10 + (gameState.time / 60);
+            if (threatScore < 5) {
+                elements.threatLevel.textContent = "Low";
+                elements.threatLevel.className = "text-green-500";
+            } else if (threatScore < 10) {
+                elements.threatLevel.textContent = "Medium";
+                elements.threatLevel.className = "text-yellow-500";
+            } else if (threatScore < 20) {
+                elements.threatLevel.textContent = "High";
+                elements.threatLevel.className = "text-orange-500";
+            } else {
+                elements.threatLevel.textContent = "Extreme";
+                elements.threatLevel.className = "text-red-500";
+            }
+        }
+        // Update serum display
+        function updateSerumDisplay() {
+            elements.serumCount.textContent = gameState.serumCount;
+            elements.serumProgress.style.width = `${gameState.serumProgress}%`;
+            elements.serumPercent.textContent = Math.floor(gameState.serumProgress);
+            if (gameState.serumProgress >= 100) {
+                elements.serumStatus.textContent = "Complete";
+                elements.serumStatus.className = "text-green-500";
+            } else if (gameState.serumCount <= 0) {
+                elements.serumStatus.textContent = "Depleted";
+                elements.serumStatus.className = "text-red-500";
+            } else {
+                elements.serumStatus.textContent = "Ready";
+                elements.serumStatus.className = "text-yellow-500";
+            }
+        }
+        // Update power consumption
+        function updatePower() {
+            // Base power drain
+            gameState.power -= 2;
+            // Base power drain only
+            if (gameState.power < 0) gameState.power = 0;
+            updatePowerDisplay();
+        }
+        // Trigger power outage
+        function triggerPowerOutage() {
+            elements.staticSound.currentTime = 0;
+            elements.staticSound.play();
+            // Disable all systems
+            gameState.leftDoor = false;
+            gameState.rightDoor = false;
+            gameState.leftVent = false;
+            gameState.rightVent = false;
+            // Update UI
+            elements.leftDoorIcon.className = 'fas fa-door-open mr-2';
+            elements.rightDoorIcon.className = 'fas fa-door-open mr-2';
+            elements.leftVentIcon.className = 'fas fa-fan mr-2';
+            elements.rightVentIcon.className = 'fas fa-fan mr-2';
+            // Game over soon if mutants are nearby
+            setTimeout(() => {
+                if (!gameState.gameOver) {
+                    triggerJumpscare(Math.floor(Math.random() * 4) + 1);
+                }
+            }, 5000);
+        }
+        // Reset for new night
+        function resetNight() {
+            gameState.power = 100;
+            gameState.leftDoor = false;
+            gameState.rightDoor = false;
+            gameState.leftVent = false;
+            gameState.rightVent = false;
+            gameState.serumCount = 3;
+            gameState.serumProgress = 0;
+            gameState.time = 0;
+            gameState.gameOver = false;
+            // Reset mutants
+            Object.keys(gameState.mutants).forEach(mutantId => {
+                gameState.mutants[mutantId].location = 1;
+                gameState.mutants[mutantId].fakeMoves = 0;
+            });
+            // Reset UI
+            elements.jumpscare.style.opacity = "0";
+            elements.staticSound.pause();
+            elements.leftDoorIcon.className = 'fas fa-door-open mr-2';
+            elements.rightDoorIcon.className = 'fas fa-door-open mr-2';
+            elements.leftVentIcon.className = 'fas fa-fan mr-2';
+            elements.rightVentIcon.className = 'fas fa-fan mr-2';
+            elements.currentCamDisplay.textContent = 'CAM 1: Main Hall';
+            gameState.currentCam = 1;
+            updatePowerDisplay();
+            updateSerumDisplay();
+            updateTimeDisplay();
+            updateMutantVisibility();
+        }
+        // Initialize game when page loads
+        window.onload = initGame;
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Soda5601/zb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>