# 🎮 PROMPT TECHNIQUE : Reproduction de "The Operator" ## 🎯 DESCRIPTION DU JEU **The Operator** est un jeu vidéo indépendant français de réflexion où le joueur incarne un enquêteur posté derrière un ordinateur et chargé de venir en aide à des agents de terrain. **Univers** : Début des années 1990, le joueur incarne Evan Tanner au sein du Bureau fédéral des renseignements (FDI) ## 🚀 PROMPT POUR LLM ``` Créez une reproduction fidèle du jeu "The Operator" avec les spécifications suivantes : ### CONCEPT PRINCIPAL - Jeu d'enquête/thriller interactif en interface ordinateur rétro années 90 - Le joueur est un opérateur FDI assistant des agents de terrain via ordinateur - Gameplay basé sur l'analyse de preuves, résolution d'énigmes et déduction logique - Narration immersive avec éléments de conspiration et plot twists ### INTERFACE UTILISATEUR 🖥️ Design rétro authentique : - Interface façon terminal/DOS années 90 - Écrans CRT avec effet scanlines - Palette de couleurs verte/ambre sur fond noir - Fenêtres multiples superposées - Effets de bruit et de pixellisation ### MÉCANIQUES DE JEU CORE 🔍 Système d'enquête : - Analyse d'échantillons via logiciels fictifs (ChemScan, etc.) - Recoupement de données entre différentes sources - Visionnage et analyse de séquences vidéo - Communication radio avec agents terrain - Résolution d'énigmes techniques (désamorçage bombe, etc.) 🧩 Types de preuves à analyser : - Extraits vidéo de surveillance - Échantillons chimiques/biologiques - Documents suspects - Données informatiques - Témoignages audio ### STRUCTURE NARRATIVE 📖 Format épisodique : - 4 jours/chapitres principaux - Durée totale : 3-5 heures de gameplay - Révélations progressives d'une conspiration - Connexions entre différentes affaires - Antagoniste mystérieux : HAL (hacker) ### TECHNOLOGIES À UTILISER 🔧 Stack recommandée : - React avec TypeScript pour la logique - CSS3 avec animations pour l'effet rétro - Canvas HTML5 pour effets visuels spéciaux - Web Audio API pour ambiance sonore - Système de sauvegarde local (localStorage) ### FONCTIONNALITÉS TECHNIQUES SPÉCIFIQUES ⚡ Éléments d'automatisme industriel (adapté à votre expertise) : - Interfaces de contrôle-commande réalistes - Protocoles de communication simulés - Systèmes d'alarme et de monitoring - Logiques de sécurité industrielle ### AMBIANCE ET IMMERSION 🎭 Éléments atmosphériques : - Bruit de fond de bureau (claviers, ventilateurs) - Effets sonores de modem/transmission - Dialogues radio crépitants - Tension progressive via timing serré - Références aux séries X-Files et films thriller 90s ### GAMEPLAY DÉTAILLÉ 🎯 Mécaniques spécifiques : - Point & click sur éléments interactifs - Mini-jeux de décodage/analyse - Choix de dialogue influençant l'enquête - Système de déduction par élimination - Gestion du temps/urgence lors des crises ### ÉLÉMENTS DE DIFFICULTÉ 🧠 Challenges intellectuels : - Puzzles logiques variés et renouvelés - Connexions subtiles entre indices - Fausses pistes et red herrings - Pression temporelle lors d'événements critiques - Complexité croissante des analyses Créez un artifact complet et jouable qui capture l'essence unique de The Operator : l'immersion d'être "l'homme derrière l'écran" qui guide les héros depuis les coulisses ! ``` ## 🎪 ADAPTATION PERSONNALISÉE Vu votre expertise en **automatisme industriel** et **contrôle-commande**, le jeu pourrait intégrer : 🔧 **Éléments techniques réalistes** : - Interfaces SCADA authentiques - Protocoles de communication industriels - Systèmes de supervision avancés - Logiques de sécurité professionnelles ## 🌟 RÉSULTAT ATTENDU Le prompt générera une reproduction fidèle de The Operator avec : - ✅ Interface rétro immersive - ✅ Mécaniques d'enquête engageantes - ✅ Narration captivante avec twists - ✅ Ambiance thriller années 90 - ✅ Gameplay varié et intelligent **Prêt à plonger dans cette enquête passionnante ! 🕵️‍♂️** - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Operator
-emoji: 🏃
-colorFrom: indigo
+title: operator
+emoji: 🐳
+colorFrom: green
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,524 @@
-<!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>The Operator - FDI Terminal</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>
+        @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+        
+        body {
+            font-family: 'VT323', monospace;
+            background-color: #000;
+            color: #00ff00;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .crt::before {
+            content: " ";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
+            background-size: 100% 4px;
+            z-index: 100;
+            pointer-events: none;
+        }
+        
+        .crt::after {
+            content: " ";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background: rgba(0, 30, 0, 0.05);
+            z-index: 100;
+            pointer-events: none;
+        }
+        
+        .scanlines {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .scanlines::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: repeating-linear-gradient(
+                to bottom,
+                transparent 0%,
+                rgba(0, 255, 0, 0.05) 0.5%,
+                transparent 1%
+            );
+            animation: scanline 8s linear infinite;
+            z-index: 1001;
+            pointer-events: none;
+        }
+        
+        @keyframes scanline {
+            from { transform: translateY(0%); }
+            to { transform: translateY(-100%); }
+        }
+        
+        .glow {
+            text-shadow: 0 0 5px #00ff00;
+        }
+        
+        .window {
+            box-shadow: 0 0 10px #00ff00;
+            border: 1px solid #00ff00;
+        }
+        
+        .terminal-text {
+            animation: blink 1s step-end infinite;
+        }
+        
+        @keyframes blink {
+            from, to { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        
+        .pixelated {
+            image-rendering: pixelated;
+            image-rendering: -moz-crisp-edges;
+            image-rendering: crisp-edges;
+        }
+        
+        .noise {
+            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABOSURBVGhD7c4xEQAgDAAxhHSj+5+2jAgywL0kO7O7AwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP4zX14KZ3Z3B5QAAAAASUVORK5CYII=");
+            opacity: 0.05;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body class="crt scanlines h-screen w-screen overflow-hidden">
+    <div class="noise"></div>
+    
+    <!-- Main Container -->
+    <div class="container mx-auto h-full p-4 flex flex-col">
+        <!-- Header -->
+        <div class="flex justify-between items-center mb-2">
+            <div class="text-2xl glow">
+                <span class="text-amber-400">FDI</span> TERMINAL v3.1.4
+            </div>
+            <div class="text-sm">
+                <span class="text-amber-400">OPERATOR:</span> EVAN TANNER
+            </div>
+            <div class="text-sm">
+                <span class="text-amber-400">DATE:</span> <span id="current-date">05/12/1991</span>
+            </div>
+        </div>
+        
+        <!-- Main Content -->
+        <div class="flex flex-1 gap-4 overflow-hidden">
+            <!-- Left Panel -->
+            <div class="w-1/4 flex flex-col gap-4">
+                <!-- Case Info -->
+                <div class="window bg-black p-3 flex-1">
+                    <div class="border-b border-green-500 pb-1 mb-2 flex justify-between items-center">
+                        <span class="text-lg glow">CASE #X-2479</span>
+                        <span class="text-xs">CLASSIFIED</span>
+                    </div>
+                    <div class="text-sm space-y-2">
+                        <p><span class="text-amber-400">LOCATION:</span> BLACKWOOD FACILITY</p>
+                        <p><span class="text-amber-400">STATUS:</span> <span class="text-red-400">CRITICAL</span></p>
+                        <p><span class="text-amber-400">AGENT:</span> R. KOWALSKI</p>
+                        <p><span class="text-amber-400">LAST CONTACT:</span> 23:47</p>
+                    </div>
+                    <div class="mt-4 border-t border-green-500 pt-2">
+                        <p class="text-xs">SUSPECTED ACTIVITY:</p>
+                        <p class="text-red-400">UNAUTHORIZED ACCESS TO SCADA SYSTEMS</p>
+                        <p class="text-red-400">POTENTIAL SABOTAGE</p>
+                    </div>
+                </div>
+                
+                <!-- Tools -->
+                <div class="window bg-black p-3">
+                    <div class="border-b border-green-500 pb-1 mb-2">
+                        <span class="text-lg glow">TOOLS</span>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button class="bg-green-900 hover:bg-green-800 p-1 text-xs" onclick="openTool('chemScan')">CHEMSCAN</button>
+                        <button class="bg-green-900 hover:bg-green-800 p-1 text-xs" onclick="openTool('dataDecrypt')">DATA DECRYPT</button>
+                        <button class="bg-green-900 hover:bg-green-800 p-1 text-xs" onclick="openTool('videoAnalyzer')">VIDEO ANALYZER</button>
+                        <button class="bg-green-900 hover:bg-green-800 p-1 text-xs" onclick="openTool('comms')">COMMS LINK</button>
+                        <button class="bg-green-900 hover:bg-green-800 p-1 text-xs" onclick="openTool('scada')">SCADA ACCESS</button>
+                        <button class="bg-green-900 hover:bg-green-800 p-1 text-xs" onclick="openTool('logs')">SYSTEM LOGS</button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Center Panel -->
+            <div class="w-2/4 flex flex-col gap-4">
+                <!-- Main Terminal -->
+                <div class="window bg-black p-3 flex-1 relative">
+                    <div class="border-b border-green-500 pb-1 mb-2">
+                        <span class="text-lg glow">MAIN TERMINAL</span>
+                    </div>
+                    <div id="terminal-output" class="h-5/6 overflow-y-auto text-sm font-mono leading-snug">
+                        <p>> INITIALIZING FDI TERMINAL...</p>
+                        <p>> LOADING CASE FILES...</p>
+                        <p>> ESTABLISHING SECURE CONNECTION...</p>
+                        <p class="text-amber-400">> WARNING: UNAUTHORIZED ACCESS DETECTED IN SYSTEM 4B</p>
+                        <p>> LAST KNOWN AGENT STATUS: IN COMMUNICATION WITH SUSPECT</p>
+                        <p>> SCADA SYSTEMS SHOW ABNORMAL PRESSURE READINGS IN NORTH WING</p>
+                        <p class="text-red-400">> ALERT: FIRE SUPPRESSION SYSTEM DISABLED IN SECTOR D</p>
+                        <p>> ENTER COMMAND OR SELECT TOOL TO PROCEED<span class="terminal-text">_</span></p>
+                    </div>
+                    <div class="absolute bottom-3 left-3 right-3">
+                        <div class="flex">
+                            <span class="mr-2">></span>
+                            <input type="text" id="command-input" class="bg-black text-green-500 flex-1 outline-none font-mono" autofocus>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Evidence -->
+                <div class="window bg-black p-3">
+                    <div class="border-b border-green-500 pb-1 mb-2">
+                        <span class="text-lg glow">EVIDENCE</span>
+                    </div>
+                    <div class="flex gap-2 overflow-x-auto">
+                        <div class="border border-green-500 p-1 flex flex-col items-center" onclick="viewEvidence('video1')">
+                            <div class="w-16 h-16 bg-gray-800 flex items-center justify-center">
+                                <i class="fas fa-video text-green-500"></i>
+                            </div>
+                            <span class="text-xs mt-1">SURV_001.avi</span>
+                        </div>
+                        <div class="border border-green-500 p-1 flex flex-col items-center" onclick="viewEvidence('chem1')">
+                            <div class="w-16 h-16 bg-gray-800 flex items-center justify-center">
+                                <i class="fas fa-flask text-green-500"></i>
+                            </div>
+                            <span class="text-xs mt-1">CHEM_004.dat</span>
+                        </div>
+                        <div class="border border-green-500 p-1 flex flex-col items-center" onclick="viewEvidence('doc1')">
+                            <div class="w-16 h-16 bg-gray-800 flex items-center justify-center">
+                                <i class="fas fa-file-alt text-green-500"></i>
+                            </div>
+                            <span class="text-xs mt-1">MEMO_023.txt</span>
+                        </div>
+                        <div class="border border-green-500 p-1 flex flex-col items-center" onclick="viewEvidence('audio1')">
+                            <div class="w-16 h-16 bg-gray-800 flex items-center justify-center">
+                                <i class="fas fa-microphone text-green-500"></i>
+                            </div>
+                            <span class="text-xs mt-1">AUDIO_007.wav</span>
+                        </div>
+                        <div class="border border-green-500 p-1 flex flex-col items-center" onclick="viewEvidence('scada1')">
+                            <div class="w-16 h-16 bg-gray-800 flex items-center justify-center">
+                                <i class="fas fa-chart-line text-green-500"></i>
+                            </div>
+                            <span class="text-xs mt-1">SCADA_LOG.rdt</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Right Panel -->
+            <div class="w-1/4 flex flex-col gap-4">
+                <!-- Comms -->
+                <div class="window bg-black p-3 flex-1">
+                    <div class="border-b border-green-500 pb-1 mb-2">
+                        <span class="text-lg glow">COMMS CHANNEL</span>
+                    </div>
+                    <div id="comms-log" class="h-64 overflow-y-auto text-xs space-y-1">
+                        <p class="text-amber-400">[23:47] AGENT KOWALSKI: I'm in position. No visual on suspect yet.</p>
+                        <p class="text-amber-400">[23:49] AGENT KOWALSKI: Found something... security logs show unauthorized access.</p>
+                        <p class="text-amber-400">[23:52] AGENT KOWALSKI: There's a chemical spill in sector C. Doesn't look accidental.</p>
+                        <p class="text-red-400">[23:55] AGENT KOWALSKI: I see someone! They're tampering with the control panel!</p>
+                        <p class="text-red-400">[23:56] AGENT KOWALSKI: They're wearing an FDI badge but I don't recognize them.</p>
+                        <p class="text-red-400">[23:57] AGENT KOWALSKI: They've spotted me! I'm pursuing on foot!</p>
+                        <p class="text-red-400">[23:58] AGENT KOWALSKI: They're heading to the server room!</p>
+                        <p class="text-gray-500">[23:59] COMMS LOST...</p>
+                    </div>
+                    <div class="mt-2 border-t border-green-500 pt-2">
+                        <div class="flex">
+                            <input type="text" class="bg-black text-green-500 flex-1 outline-none text-xs" placeholder="TYPE MESSAGE...">
+                            <button class="bg-green-900 hover:bg-green-800 px-2 text-xs">SEND</button>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Alerts -->
+                <div class="window bg-black p-3">
+                    <div class="border-b border-green-500 pb-1 mb-2">
+                        <span class="text-lg glow">ALERTS</span>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="border border-red-500 p-2">
+                            <p class="text-xs text-red-400">SCADA ALERT: PRESSURE BUILDING IN NORTH WING</p>
+                            <p class="text-xs">Current: 4.7 MPa | Safe limit: 3.2 MPa</p>
+                        </div>
+                        <div class="border border-amber-500 p-2">
+                            <p class="text-xs text-amber-400">SECURITY ALERT: SERVER ROOM ACCESS</p>
+                            <p class="text-xs">Unauthorized user: ID 4473</p>
+                        </div>
+                        <div class="border border-green-500 p-2">
+                            <p class="text-xs">SYSTEM ALERT: BACKUP POWER ACTIVATED</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Status Bar -->
+        <div class="mt-2 text-xs flex justify-between">
+            <div>
+                <span class="text-amber-400">STATUS:</span> ACTIVE | <span class="text-amber-400">CONNECTION:</span> ENCRYPTED | <span class="text-amber-400">POWER:</span> 98%
+            </div>
+            <div>
+                <span class="text-amber-400">FDI HEADQUARTERS</span> - ALL RIGHTS RESERVED 1991
+            </div>
+        </div>
+    </div>
+    
+    <!-- Tool Windows (Hidden by default) -->
+    <div id="chemScan-window" class="window bg-black absolute top-1/4 left-1/4 w-1/2 h-1/2 p-3 hidden" style="transform: translate(-50%, -50%); z-index: 1000;">
+        <div class="flex justify-between items-center border-b border-green-500 pb-1 mb-2">
+            <span class="text-lg glow">CHEMSCAN v2.4</span>
+            <button onclick="closeTool('chemScan')" class="text-red-400 hover:text-red-300">X</button>
+        </div>
+        <div class="flex h-5/6">
+            <div class="w-1/3 border-r border-green-500 pr-2">
+                <p class="text-sm mb-2">SELECT SAMPLE:</p>
+                <div class="space-y-1">
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">CHEM_001.dat</button>
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">CHEM_002.dat</button>
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">CHEM_003.dat</button>
+                    <button class="w-full text-left p-1 bg-green-900 text-xs">CHEM_004.dat</button>
+                </div>
+            </div>
+            <div class="w-2/3 pl-2">
+                <p class="text-sm mb-2">ANALYSIS RESULTS:</p>
+                <div class="border border-green-500 p-2 h-4/5 overflow-y-auto text-xs">
+                    <p>> SAMPLE: CHEM_004.dat</p>
+                    <p>> SOURCE: NORTH WING, SECTOR C</p>
+                    <p>> COLLECTED: 05/12/1991 23:30</p>
+                    <p class="mt-2 text-amber-400">> COMPOSITION ANALYSIS:</p>
+                    <p>- 45% TRICHLOROETHYLENE</p>
+                    <p>- 30% METHYL ETHYL KETONE</p>
+                    <p>- 15% UNKNOWN COMPOUND</p>
+                    <p>- 10% WATER</p>
+                    <p class="mt-2 text-red-400">> WARNING: UNKNOWN COMPOUND MATCHES EXPERIMENTAL FORMULA X-247</p>
+                    <p class="text-red-400">> CAUTION: HIGHLY VOLATILE MIXTURE</p>
+                </div>
+                <button class="mt-2 bg-green-900 hover:bg-green-800 p-1 text-xs w-full">EXPORT REPORT</button>
+            </div>
+        </div>
+    </div>
+    
+    <div id="videoAnalyzer-window" class="window bg-black absolute top-1/4 left-1/4 w-1/2 h-1/2 p-3 hidden" style="transform: translate(-50%, -50%); z-index: 1000;">
+        <div class="flex justify-between items-center border-b border-green-500 pb-1 mb-2">
+            <span class="text-lg glow">VIDEO ANALYZER v1.7</span>
+            <button onclick="closeTool('videoAnalyzer')" class="text-red-400 hover:text-red-300">X</button>
+        </div>
+        <div class="flex h-5/6">
+            <div class="w-1/3 border-r border-green-500 pr-2">
+                <p class="text-sm mb-2">SELECT FILE:</p>
+                <div class="space-y-1">
+                    <button class="w-full text-left p-1 bg-green-900 text-xs">SURV_001.avi</button>
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">SURV_002.avi</button>
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">SURV_003.avi</button>
+                </div>
+                <div class="mt-4">
+                    <p class="text-sm mb-2">TOOLS:</p>
+                    <button class="w-full p-1 hover:bg-green-900 text-xs mb-1">ENHANCE</button>
+                    <button class="w-full p-1 hover:bg-green-900 text-xs mb-1">FRAME ANALYSIS</button>
+                    <button class="w-full p-1 hover:bg-green-900 text-xs">AUDIO ISOLATION</button>
+                </div>
+            </div>
+            <div class="w-2/3 pl-2 flex flex-col">
+                <div class="border border-green-500 h-48 mb-2 flex items-center justify-center bg-gray-900">
+                    <div class="text-center">
+                        <i class="fas fa-video text-green-500 text-4xl mb-2"></i>
+                        <p class="text-xs">VIDEO PLAYBACK</p>
+                    </div>
+                </div>
+                <div class="border border-green-500 p-2 flex-1 overflow-y-auto text-xs">
+                    <p>> FILE: SURV_001.avi</p>
+                    <p>> SOURCE: NORTH WING CAMERA 4B</p>
+                    <p>> TIMESTAMP: 05/12/1991 23:55:12</p>
+                    <p class="mt-2 text-amber-400">> ANALYSIS:</p>
+                    <p>- SINGLE SUBJECT VISIBLE</p>
+                    <p>- MALE, APPROX 180CM</p>
+                    <p>- WEARING FDI SECURITY UNIFORM</p>
+                    <p>- ID BADGE VISIBLE BUT BLURRED</p>
+                    <p class="text-red-400">- CARRYING UNKNOWN DEVICE</p>
+                    <p class="mt-2">> AUDIO TRANSCRIPT:</p>
+                    <p>"...just a few more minutes... systems will be offline... HAL will be pleased..."</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="scada-window" class="window bg-black absolute top-1/4 left-1/4 w-1/2 h-1/2 p-3 hidden" style="transform: translate(-50%, -50%); z-index: 1000;">
+        <div class="flex justify-between items-center border-b border-green-500 pb-1 mb-2">
+            <span class="text-lg glow">SCADA MONITOR v4.2</span>
+            <button onclick="closeTool('scada')" class="text-red-400 hover:text-red-300">X</button>
+        </div>
+        <div class="flex h-5/6">
+            <div class="w-1/3 border-r border-green-500 pr-2">
+                <p class="text-sm mb-2">SYSTEMS:</p>
+                <div class="space-y-1">
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">POWER DISTRIBUTION</button>
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">HVAC</button>
+                    <button class="w-full text-left p-1 bg-green-900 text-xs">PRESSURE SYSTEMS</button>
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">FIRE SUPPRESSION</button>
+                    <button class="w-full text-left p-1 hover:bg-green-900 text-xs">SECURITY</button>
+                </div>
+            </div>
+            <div class="w-2/3 pl-2">
+                <p class="text-sm mb-2">PRESSURE SYSTEMS STATUS:</p>
+                <div class="border border-green-500 p-2 h-4/5 overflow-y-auto text-xs">
+                    <div class="mb-4">
+                        <p class="text-amber-400">NORTH WING:</p>
+                        <div class="w-full bg-gray-800 h-4 mt-1">
+                            <div class="bg-red-500 h-full" style="width: 90%;"></div>
+                        </div>
+                        <p>4.7 MPa / 3.2 MPa MAX</p>
+                        <p class="text-red-400">CRITICAL OVERPRESSURE</p>
+                    </div>
+                    <div class="mb-4">
+                        <p class="text-amber-400">SOUTH WING:</p>
+                        <div class="w-full bg-gray-800 h-4 mt-1">
+                            <div class="bg-green-500 h-full" style="width: 45%;"></div>
+                        </div>
+                        <p>2.1 MPa / 3.2 MPa MAX</p>
+                        <p>NORMAL</p>
+                    </div>
+                    <div class="mb-4">
+                        <p class="text-amber-400">EAST WING:</p>
+                        <div class="w-full bg-gray-800 h-4 mt-1">
+                            <div class="bg-amber-500 h-full" style="width: 70%;"></div>
+                        </div>
+                        <p>3.0 MPa / 3.2 MPa MAX</p>
+                        <p class="text-amber-400">ELEVATED</p>
+                    </div>
+                    <div>
+                        <p class="text-amber-400">WEST WING:</p>
+                        <div class="w-full bg-gray-800 h-4 mt-1">
+                            <div class="bg-green-500 h-full" style="width: 30%;"></div>
+                        </div>
+                        <p>1.4 MPa / 3.2 MPa MAX</p>
+                        <p>NORMAL</p>
+                    </div>
+                </div>
+                <button class="mt-2 bg-green-900 hover:bg-green-800 p-1 text-xs w-full">OVERRIDE CONTROL</button>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        // Simulate terminal typing
+        function typeWriter(element, text, speed) {
+            let i = 0;
+            element.innerHTML = '';
+            function typing() {
+                if (i < text.length) {
+                    element.innerHTML += text.charAt(i);
+                    i++;
+                    setTimeout(typing, speed);
+                }
+            }
+            typing();
+        }
+        
+        // Handle command input
+        document.getElementById('command-input').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                const command = this.value;
+                this.value = '';
+                
+                const output = document.getElementById('terminal-output');
+                output.innerHTML += `<p>> ${command}</p>`;
+                
+                // Process command
+                if (command.toLowerCase() === 'help') {
+                    output.innerHTML += `<p>AVAILABLE COMMANDS: HELP, CHEMSCAN, VIDEO, SCADA, COMMS, LOGS, CLEAR</p>`;
+                } else if (command.toLowerCase() === 'clear') {
+                    output.innerHTML = '';
+                } else if (command.toLowerCase() === 'chemscan') {
+                    openTool('chemScan');
+                } else if (command.toLowerCase() === 'video') {
+                    openTool('videoAnalyzer');
+                } else if (command.toLowerCase() === 'scada') {
+                    openTool('scada');
+                } else {
+                    output.innerHTML += `<p>COMMAND NOT RECOGNIZED. TYPE HELP FOR AVAILABLE COMMANDS.</p>`;
+                }
+                
+                output.innerHTML += `<p>> ENTER COMMAND OR SELECT TOOL TO PROCEED<span class="terminal-text">_</span></p>`;
+                output.scrollTop = output.scrollHeight;
+            }
+        });
+        
+        // Tool functions
+        function openTool(tool) {
+            document.getElementById(`${tool}-window`).classList.remove('hidden');
+        }
+        
+        function closeTool(tool) {
+            document.getElementById(`${tool}-window`).classList.add('hidden');
+        }
+        
+        // Evidence viewer
+        function viewEvidence(type) {
+            const output = document.getElementById('terminal-output');
+            
+            if (type === 'video1') {
+                output.innerHTML += `<p>> OPENING SURVEILLANCE FOOTAGE: SURV_001.avi</p>`;
+                output.innerHTML += `<p>> TIMESTAMP: 23:55:12 | LOCATION: NORTH WING 4B</p>`;
+                output.innerHTML += `<p>> SUBJECT VISIBLE: MALE, 180CM, FDI UNIFORM</p>`;
+                output.innerHTML += `<p class="text-red-400">> WARNING: UNAUTHORIZED ACCESS DETECTED</p>`;
+            } else if (type === 'chem1') {
+                output.innerHTML += `<p>> ANALYZING CHEMICAL SAMPLE: CHEM_004.dat</p>`;
+                output.innerHTML += `<p>> COMPOSITION: TRICHLOROETHYLENE (45%), MEK (30%), UNKNOWN (15%), WATER (10%)</p>`;
+                output.innerHTML += `<p class="text-red-400">> WARNING: UNKNOWN COMPOUND MATCHES EXPERIMENTAL FORMULA X-247</p>`;
+            } else if (type === 'doc1') {
+                output.innerHTML += `<p>> VIEWING DOCUMENT: MEMO_023.txt</p>`;
+                output.innerHTML += `<p>> SUBJECT: SECURITY OVERRIDE PROCEDURES</p>`;
+                output.innerHTML += `<p>> NOTE: "HAL HAS ACCESS TO ALL SYSTEMS. DO NOT QUESTION."</p>`;
+            }
+            
+            output.innerHTML += `<p>> ENTER COMMAND OR SELECT TOOL TO PROCEED<span class="terminal-text">_</span></p>`;
+            output.scrollTop = output.scrollHeight;
+        }
+        
+        // Simulate real-time updates
+        setInterval(() => {
+            const commsLog = document.getElementById('comms-log');
+            const now = new Date();
+            const timeStr = `[${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}]`;
+            
+            // Random chance to add a new comms message
+            if (Math.random() > 0.9) {
+                const messages = [
+                    `${timeStr} SYSTEM ALERT: PRESSURE IN NORTH WING INCREASING`,
+                    `${timeStr} WARNING: TEMPERATURE SPIKE IN SERVER ROOM`,
+                    `${timeStr} SECURITY ALERT: MOTION DETECTED IN SECTOR D`,
+                    `${timeStr} AGENT KOWALSKI: *STATIC* ...need backup... *STATIC*`
+                ];
+                
+                commsLog.innerHTML += `<p class="text-red-400">${messages[Math.floor(Math.random() * messages.length)]}</p>`;
+                commsLog.scrollTop = commsLog.scrollHeight;
+            }
+        }, 10000);
+    </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=MGros/operator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>