Spaces:

PeterAdel
/

agent-zone

Running

App Files Files Community

PeterAdel commited on May 5, 2025

Commit

4bb86bb

verified ·

1 Parent(s): 843add9

Add 2 files

Browse files

Files changed (2) hide show

index.html +200 -83
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -36,7 +36,7 @@
         .data-line {
             position: absolute;
-            height: 2px;
             background: linear-gradient(90deg, transparent, #00ff41, transparent);
             transform-origin: left;
             z-index: 0;
@@ -105,14 +105,40 @@
             transform-origin: left;
             z-index: -1;
         }
     </style>
 </head>
 <body class="relative">
     <div class="matrix-bg"></div>
     <div class="scanline"></div>
     <!-- Header -->
-    <header class="border-b border-green-500 border-opacity-30 py-4 px-6 flex justify-between items-center">
         <div class="flex items-center">
             <div class="w-3 h-3 rounded-full bg-red-500 mr-2 pulse"></div>
             <h1 class="text-xl glow">XKEYSCORE v4.2.7</h1>
@@ -123,13 +149,13 @@
         </div>
         <div class="text-xs">
             <span class="mr-2">USER: OPERATOR_████</span>
-            <span>SESSION: {new Date().toISOString()}</span>
         </div>
     </header>
-    <main class="container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6 relative">
         <!-- Target Profile Section -->
-        <div class="lg:col-span-1 terminal-border p-4 relative overflow-hidden">
             <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
                 <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                 <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
@@ -139,45 +165,63 @@
             <h2 class="text-lg mb-4 mt-6 glow">TARGET PROFILE</h2>
             <div class="flex flex-col items-center mb-6">
-                <div class="w-32 h-32 rounded-full overflow-hidden mb-4 profile-shadow">
                     <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=128&q=80"
                          alt="Target"
-                         class="w-full h-full object-cover grayscale contrast-125">
                 </div>
                 <h3 class="text-xl glow">JASON ███████</h3>
                 <p class="text-xs text-green-300">ALIAS: "NEON_SHADOW"</p>
             </div>
             <div class="grid grid-cols-1 gap-4">
                 <div>
-                    <h4 class="text-sm text-green-300 mb-1">PERSONAL DETAILS</h4>
                     <p class="text-xs">DOB: 1989-04-15</p>
                     <p class="text-xs">POB: SAN FRANCISCO, CA</p>
                     <p class="text-xs">SSN: ███-██-████</p>
                 </div>
                 <div>
-                    <h4 class="text-sm text-green-300 mb-1">KNOWN ADDRESSES</h4>
                     <p class="text-xs">PRIMARY: 1815 █████ ST, APT ██, SF, CA</p>
                     <p class="text-xs">SECONDARY: 890 █████ AVE, PORTLAND, OR</p>
                 </div>
                 <div>
-                    <h4 class="text-sm text-green-300 mb-1">FAMILY CONNECTIONS</h4>
                     <p class="text-xs">SPOUSE: EMMA ███████ (b. 1991)</p>
                     <p class="text-xs">SIBLING: MICHAEL ███████ (b. 1986)</p>
                 </div>
                 <div>
-                    <h4 class="text-sm text-green-300 mb-1">DIGITAL FOOTPRINT</h4>
                     <div class="flex space-x-4 mt-2">
-                        <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-facebook"></i></a>
-                        <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-instagram"></i></a>
-                        <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-linkedin"></i></a>
-                        <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-github"></i></a>
                     </div>
                     <p class="text-xs mt-2">ONLINE HANDLES: @neonshadow, @jasonx89</p>
                 </div>
             </div>
         </div>
@@ -185,14 +229,14 @@
         <!-- Main Surveillance Section -->
         <div class="lg:col-span-2 grid grid-cols-1 gap-6">
             <!-- Activity Log -->
-            <div class="terminal-border p-4 relative">
                 <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
                     <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                     <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
                     <div class="w-2 h-2 rounded-full bg-green-500"></div>
                 </div>
-                <h2 class="text-lg mb-4 mt-6 glow">ACTIVITY LOG</h2>
                 <div class="overflow-y-auto max-h-64">
                     <div class="grid grid-cols-12 gap-2 text-xs mb-2 border-b border-green-500 border-opacity-30 pb-1">
@@ -205,7 +249,7 @@
                     <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
                         <div class="col-span-2 text-green-300">2023-07-15 14:32</div>
                         <div class="col-span-3">CAFE █████ (SF)</div>
-                        <div class="col-span-4">Accessed ███████.onion</div>
                         <div class="col-span-3">iPhone 13 Pro</div>
                     </div>
@@ -233,7 +277,7 @@
                     <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
                         <div class="col-span-2 text-green-300">2023-07-14 19:30</div>
                         <div class="col-span-3">GYM ███████</div>
-                        <div class="col-span-4">Received call from ███-███-████</div>
                         <div class="col-span-3">iPhone 13 Pro</div>
                     </div>
@@ -243,55 +287,43 @@
                         <div class="col-span-4">Accessed GitHub: pushed to ███████ repo</div>
                         <div class="col-span-3">MacBook Pro</div>
                     </div>
                 </div>
             </div>
             <!-- Data Visualization -->
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <!-- Network Graph -->
-                <div class="terminal-border p-4 relative">
                     <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
                         <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                         <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
                         <div class="w-2 h-2 rounded-full bg-green-500"></div>
                     </div>
-                    <h2 class="text-lg mb-4 mt-6 glow">SOCIAL NETWORK</h2>
                     <div class="flex justify-center items-center h-48">
-                        <div class="relative w-full h-full">
                             <!-- Center node (target) -->
                             <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-xs glow">
                                 T
                             </div>
-                            <!-- Connection lines -->
-                            <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(30deg);"></div>
-                            <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(90deg);"></div>
-                            <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(150deg);"></div>
-                            <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(210deg);"></div>
-                            <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(270deg);"></div>
-                            <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(330deg);"></div>
-                            <!-- Connected nodes -->
-                            <div class="absolute top-1/4 left-1/4 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-xs glow">
-                                1
-                            </div>
-                            <div class="absolute top-1/4 right-1/4 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-xs glow">
-                                2
-                            </div>
-                            <div class="absolute bottom-1/4 left-1/4 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-xs glow">
-                                3
-                            </div>
-                            <div class="absolute bottom-1/4 right-1/4 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-xs glow">
-                                4
-                            </div>
-                            <div class="absolute top-3/4 left-1/2 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-xs glow">
-                                5
-                            </div>
-                            <div class="absolute bottom-3/4 left-1/2 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-xs glow">
-                                6
-                            </div>
                         </div>
                     </div>
@@ -312,7 +344,7 @@
                 </div>
                 <!-- Threat Assessment -->
-                <div class="terminal-border p-4 relative">
                     <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
                         <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                         <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
@@ -364,63 +396,148 @@
                     </div>
                     <div class="mt-4 p-2 alert-border">
-                        <h3 class="text-sm text-red-400 red-glow mb-1">SECURITY ALERT</h3>
                         <p class="text-xs">Target has accessed TOR network 3 times in last 24 hours. Possible coordination with known entities of interest.</p>
                     </div>
                 </div>
             </div>
         </div>
     </main>
     <!-- Footer -->
-    <footer class="border-t border-green-500 border-opacity-30 py-4 px-6 text-xs text-center">
         <div class="flex justify-center space-x-6 mb-2">
             <span>SYSTEM STATUS: <span class="text-green-400">OPERATIONAL</span></span>
             <span>DATA SOURCES: <span class="text-green-400">12 ACTIVE</span></span>
-            <span>LAST UPDATE: <span class="text-green-400">{new Date().toISOString()}</span></span>
         </div>
         <div>
             <span class="text-gray-500">XKEYSCORE SURVEILLANCE SYSTEM - TOP SECRET//COMINT//NOFORN</span>
         </div>
     </footer>
-    <!-- Connection lines animation -->
     <script>
-        // Animate connection lines
-        const connectionLines = document.querySelectorAll('.connection-line');
-        connectionLines.forEach(line => {
-            const duration = Math.random() * 2000 + 1000;
-            setInterval(() => {
-                line.style.opacity = Math.random() * 0.5 + 0.5;
-            }, duration);
-        });
-        // Random data line generation
-        function createDataLine() {
-            const line = document.createElement('div');
-            line.className = 'data-line';
-            const startX = Math.random() * window.innerWidth;
-            const startY = Math.random() * window.innerHeight;
-            const endX = Math.random() * window.innerWidth;
-            const endY = Math.random() * window.innerHeight;
-            const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
-            const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
-            line.style.width = `${length}px`;
-            line.style.left = `${startX}px`;
-            line.style.top = `${startY}px`;
-            line.style.transform = `rotate(${angle}deg)`;
-            document.body.appendChild(line);
             setTimeout(() => {
-                line.remove();
-            }, 2000);
         }
-        setInterval(createDataLine, 100);
         // Terminal flicker effect
         const terminals = document.querySelectorAll('.terminal-border');

         .data-line {
             position: absolute;
+            height: 1px;
             background: linear-gradient(90deg, transparent, #00ff41, transparent);
             transform-origin: left;
             z-index: 0;
             transform-origin: left;
             z-index: -1;
         }
+        .code-rain {
+            position: absolute;
+            color: #00ff41;
+            opacity: 0.1;
+            z-index: 0;
+        }
+        .digital-face {
+            position: relative;
+            filter: grayscale(100%) contrast(150%) brightness(0.8);
+            background: linear-gradient(45deg, #0a0a0a 25%, #00ff41 25%, #00ff41 50%, #0a0a0a 50%, #0a0a0a 75%, #00ff41 75%);
+            background-size: 4px 4px;
+        }
+        .data-point {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background-color: #00ff41;
+            border-radius: 50%;
+            z-index: 1;
+        }
     </style>
 </head>
 <body class="relative">
     <div class="matrix-bg"></div>
     <div class="scanline"></div>
+    <!-- Code rain effect -->
+    <div id="code-rain-container"></div>
     <!-- Header -->
+    <header class="border-b border-green-500 border-opacity-30 py-4 px-6 flex justify-between items-center relative z-10">
         <div class="flex items-center">
             <div class="w-3 h-3 rounded-full bg-red-500 mr-2 pulse"></div>
             <h1 class="text-xl glow">XKEYSCORE v4.2.7</h1>
         </div>
         <div class="text-xs">
             <span class="mr-2">USER: OPERATOR_████</span>
+            <span>SESSION: <span id="session-time">00:00:00</span></span>
         </div>
     </header>
+    <main class="container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6 relative z-10">
         <!-- Target Profile Section -->
+        <div class="lg:col-span-1 terminal-border p-4 relative overflow-hidden flicker">
             <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
                 <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                 <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
             <h2 class="text-lg mb-4 mt-6 glow">TARGET PROFILE</h2>
             <div class="flex flex-col items-center mb-6">
+                <div class="w-32 h-32 rounded-full overflow-hidden mb-4 profile-shadow digital-face relative">
                     <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=128&q=80"
                          alt="Target"
+                         class="w-full h-full object-cover">
+                    <div class="absolute inset-0 border border-green-500 opacity-30 rounded-full"></div>
                 </div>
                 <h3 class="text-xl glow">JASON ███████</h3>
                 <p class="text-xs text-green-300">ALIAS: "NEON_SHADOW"</p>
+                <div class="w-full h-px bg-green-500 bg-opacity-30 my-2"></div>
+                <p class="text-xs text-red-400 red-glow">THREAT LEVEL: HIGH</p>
             </div>
             <div class="grid grid-cols-1 gap-4">
                 <div>
+                    <h4 class="text-sm text-green-300 mb-1 flex items-center">
+                        <i class="fas fa-id-card mr-2"></i> PERSONAL DETAILS
+                    </h4>
                     <p class="text-xs">DOB: 1989-04-15</p>
                     <p class="text-xs">POB: SAN FRANCISCO, CA</p>
                     <p class="text-xs">SSN: ███-██-████</p>
+                    <p class="text-xs">HEIGHT: 5'11" | WEIGHT: 180lbs</p>
                 </div>
                 <div>
+                    <h4 class="text-sm text-green-300 mb-1 flex items-center">
+                        <i class="fas fa-map-marker-alt mr-2"></i> KNOWN ADDRESSES
+                    </h4>
                     <p class="text-xs">PRIMARY: 1815 █████ ST, APT ██, SF, CA</p>
                     <p class="text-xs">SECONDARY: 890 █████ AVE, PORTLAND, OR</p>
+                    <p class="text-xs">WORK: ███████ TECH, 455 █████ BLVD, SF</p>
                 </div>
                 <div>
+                    <h4 class="text-sm text-green-300 mb-1 flex items-center">
+                        <i class="fas fa-users mr-2"></i> FAMILY CONNECTIONS
+                    </h4>
                     <p class="text-xs">SPOUSE: EMMA ███████ (b. 1991)</p>
                     <p class="text-xs">SIBLING: MICHAEL ███████ (b. 1986)</p>
+                    <p class="text-xs">FATHER: ROBERT ███████ (b. 1958)</p>
+                    <p class="text-xs">MOTHER: LISA ███████ (b. 1960)</p>
                 </div>
                 <div>
+                    <h4 class="text-sm text-green-300 mb-1 flex items-center">
+                        <i class="fas fa-network-wired mr-2"></i> DIGITAL FOOTPRINT
+                    </h4>
                     <div class="flex space-x-4 mt-2">
+                        <a href="#" class="text-green-400 hover:text-green-200" title="Twitter"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-green-400 hover:text-green-200" title="Facebook"><i class="fab fa-facebook"></i></a>
+                        <a href="#" class="text-green-400 hover:text-green-200" title="Instagram"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-green-400 hover:text-green-200" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
+                        <a href="#" class="text-green-400 hover:text-green-200" title="GitHub"><i class="fab fa-github"></i></a>
+                        <a href="#" class="text-green-400 hover:text-green-200" title="Signal"><i class="fas fa-comment"></i></a>
                     </div>
                     <p class="text-xs mt-2">ONLINE HANDLES: @neonshadow, @jasonx89</p>
+                    <p class="text-xs">EMAILS: j.██████@protonmail.com, jasonx@██████.com</p>
+                    <p class="text-xs">PHONE: ███-███-████ (burner: ███-███-████)</p>
                 </div>
             </div>
         </div>
         <!-- Main Surveillance Section -->
         <div class="lg:col-span-2 grid grid-cols-1 gap-6">
             <!-- Activity Log -->
+            <div class="terminal-border p-4 relative flicker">
                 <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
                     <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                     <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
                     <div class="w-2 h-2 rounded-full bg-green-500"></div>
                 </div>
+                <h2 class="text-lg mb-4 mt-6 glow">ACTIVITY LOG <span class="text-xs text-green-300">(LAST 72 HOURS)</span></h2>
                 <div class="overflow-y-auto max-h-64">
                     <div class="grid grid-cols-12 gap-2 text-xs mb-2 border-b border-green-500 border-opacity-30 pb-1">
                     <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
                         <div class="col-span-2 text-green-300">2023-07-15 14:32</div>
                         <div class="col-span-3">CAFE █████ (SF)</div>
+                        <div class="col-span-4">Accessed ███████.onion via TOR</div>
                         <div class="col-span-3">iPhone 13 Pro</div>
                     </div>
                     <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
                         <div class="col-span-2 text-green-300">2023-07-14 19:30</div>
                         <div class="col-span-3">GYM ███████</div>
+                        <div class="col-span-4">Received call from ███-███-████ (burner)</div>
                         <div class="col-span-3">iPhone 13 Pro</div>
                     </div>
                         <div class="col-span-4">Accessed GitHub: pushed to ███████ repo</div>
                         <div class="col-span-3">MacBook Pro</div>
                     </div>
+                    <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
+                        <div class="col-span-2 text-green-300">2023-07-14 11:05</div>
+                        <div class="col-span-3">TRANSIT (BART)</div>
+                        <div class="col-span-4">Sent encrypted message via Signal</div>
+                        <div class="col-span-3">iPhone 13 Pro</div>
+                    </div>
+                    <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
+                        <div class="col-span-2 text-green-300">2023-07-13 23:30</div>
+                        <div class="col-span-3">HOME (WIFI)</div>
+                        <div class="col-span-4">Accessed ████████.onion wallet</div>
+                        <div class="col-span-3">Linux Desktop</div>
+                    </div>
                 </div>
             </div>
             <!-- Data Visualization -->
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <!-- Network Graph -->
+                <div class="terminal-border p-4 relative flicker">
                     <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
                         <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                         <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
                         <div class="w-2 h-2 rounded-full bg-green-500"></div>
                     </div>
+                    <h2 class="text-lg mb-4 mt-6 glow">SOCIAL NETWORK MAP</h2>
                     <div class="flex justify-center items-center h-48">
+                        <div class="relative w-full h-full" id="network-graph">
                             <!-- Center node (target) -->
                             <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-xs glow">
                                 T
                             </div>
+                            <!-- Connection lines will be added by JS -->
                         </div>
                     </div>
                 </div>
                 <!-- Threat Assessment -->
+                <div class="terminal-border p-4 relative flicker">
                     <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
                         <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                         <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
                     </div>
                     <div class="mt-4 p-2 alert-border">
+                        <h3 class="text-sm text-red-400 red-glow mb-1 flex items-center">
+                            <i class="fas fa-exclamation-triangle mr-2"></i> SECURITY ALERT
+                        </h3>
                         <p class="text-xs">Target has accessed TOR network 3 times in last 24 hours. Possible coordination with known entities of interest.</p>
                     </div>
                 </div>
             </div>
+            <!-- Data Analysis -->
+            <div class="terminal-border p-4 relative flicker">
+                <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
+                    <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
+                    <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
+                    <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                </div>
+                <h2 class="text-lg mb-4 mt-6 glow">COMMUNICATION ANALYSIS</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="text-center">
+                        <div class="text-2xl glow">73%</div>
+                        <div class="text-xs text-green-300">ENCRYPTED TRAFFIC</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-2xl glow">12</div>
+                        <div class="text-xs text-green-300">SUSPICIOUS CONTACTS</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-2xl glow">8</div>
+                        <div class="text-xs text-green-300">TOR SESSIONS (7D)</div>
+                    </div>
+                </div>
+                <div class="mt-4 h-32 relative" id="data-graph">
+                    <!-- Data visualization will be added by JS -->
+                </div>
+            </div>
         </div>
     </main>
     <!-- Footer -->
+    <footer class="border-t border-green-500 border-opacity-30 py-4 px-6 text-xs text-center relative z-10">
         <div class="flex justify-center space-x-6 mb-2">
             <span>SYSTEM STATUS: <span class="text-green-400">OPERATIONAL</span></span>
             <span>DATA SOURCES: <span class="text-green-400">12 ACTIVE</span></span>
+            <span>LAST UPDATE: <span class="text-green-400" id="last-update">00:00:00</span></span>
         </div>
         <div>
             <span class="text-gray-500">XKEYSCORE SURVEILLANCE SYSTEM - TOP SECRET//COMINT//NOFORN</span>
         </div>
     </footer>
+    <!-- JavaScript for dynamic effects -->
     <script>
+        // Session timer
+        let seconds = 0;
+        setInterval(() => {
+            seconds++;
+            const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
+            const mins = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
+            const secs = (seconds % 60).toString().padStart(2, '0');
+            document.getElementById('session-time').textContent = `${hours}:${mins}:${secs}`;
+            document.getElementById('last-update').textContent = new Date().toLocaleTimeString();
+        }, 1000);
+        // Code rain effect
+        const chars = "01!@#$%^&*()_+-=[]{}|;':,./<>?";
+        const container = document.getElementById('code-rain-container');
+        function createCodeRain() {
+            const code = document.createElement('div');
+            code.className = 'code-rain';
+            code.style.left = Math.random() * 100 + 'vw';
+            code.style.top = -20 + 'px';
+            code.style.fontSize = Math.random() * 10 + 10 + 'px';
+            code.style.animationDuration = Math.random() * 3 + 2 + 's';
+            let content = '';
+            const length = Math.floor(Math.random() * 10) + 5;
+            for (let i = 0; i < length; i++) {
+                content += chars[Math.floor(Math.random() * chars.length)] + '<br>';
+            }
+            code.innerHTML = content;
+            container.appendChild(code);
             setTimeout(() => {
+                code.remove();
+            }, 5000);
         }
+        setInterval(createCodeRain, 100);
+        // Network graph connections
+        const networkGraph = document.getElementById('network-graph');
+        const nodes = [
+            { id: 1, x: 30, y: 20, color: 'blue' },
+            { id: 2, x: 70, y: 20, color: 'blue' },
+            { id: 3, x: 20, y: 50, color: 'blue' },
+            { id: 4, x: 80, y: 50, color: 'green' },
+            { id: 5, x: 30, y: 80, color: 'blue' },
+            { id: 6, x: 70, y: 80, color: 'blue' }
+        ];
+        // Create nodes
+        nodes.forEach(node => {
+            const el = document.createElement('div');
+            el.className = 'absolute w-6 h-6 rounded-full flex items-center justify-center text-xs glow';
+            el.style.backgroundColor = node.color;
+            el.style.left = node.x + '%';
+            el.style.top = node.y + '%';
+            el.textContent = node.id;
+            networkGraph.appendChild(el);
+            // Create connection lines to center
+            const line = document.createElement('div');
+            line.className = 'connection-line';
+            line.style.width = Math.sqrt(Math.pow(50 - node.x, 2) + Math.pow(50 - node.y, 2)) + '%';
+            line.style.left = '50%';
+            line.style.top = '50%';
+            line.style.transform = `rotate(${Math.atan2(node.y - 50, node.x - 50) * 180 / Math.PI}deg)`;
+            networkGraph.appendChild(line);
+        });
+        // Data graph visualization
+        const dataGraph = document.getElementById('data-graph');
+        for (let i = 0; i < 50; i++) {
+            const point = document.createElement('div');
+            point.className = 'data-point';
+            point.style.left = Math.random() * 100 + '%';
+            point.style.top = Math.random() * 100 + '%';
+            point.style.opacity = Math.random() * 0.5 + 0.3;
+            dataGraph.appendChild(point);
+        }
+        // Animate connection lines
+        const connectionLines = document.querySelectorAll('.connection-line');
+        connectionLines.forEach(line => {
+            setInterval(() => {
+                line.style.opacity = Math.random() * 0.5 + 0.5;
+            }, Math.random() * 2000 + 1000);
+        });
         // Terminal flicker effect
         const terminals = document.querySelectorAll('.terminal-border');

prompts.txt CHANGED Viewed

@@ -1,2 +1,3 @@
 intretuce your sef
-      "Design a dark, high-tech hacking dashboard inspired by the US government program XKeyscore. The interface should feature a dark background with glowing green neon and red digital lines, resembling streams of code. In one section, display a clear image (or digital shadow) of a person's face. Next to the image, show detailed personal information including full name, addresses, nicknames, family details, and social media accounts, with corresponding icons. Incorporate connected data lines and dynamic graphical elements such as charts and tables to represent interactions and surveillance logs. The overall aesthetic should evoke a sense of digital espionage and high-level hacking, with a futuristic cyber-punk vibe."

 intretuce your sef
+      "Design a dark, high-tech hacking dashboard inspired by the US government program XKeyscore. The interface should feature a dark background with glowing green neon and red digital lines, resembling streams of code. In one section, display a clear image (or digital shadow) of a person's face. Next to the image, show detailed personal information including full name, addresses, nicknames, family details, and social media accounts, with corresponding icons. Incorporate connected data lines and dynamic graphical elements such as charts and tables to represent interactions and surveillance logs. The overall aesthetic should evoke a sense of digital espionage and high-level hacking, with a futuristic cyber-punk vibe."
+Design a dark, high-tech hacking dashboard inspired by the US government program XKeyscore. The interface should feature a dark background with glowing green neon and red digital lines, resembling streams of code. In one section, display a clear image (or digital shadow) of a person's face. Next to the image, show detailed personal information including full name, addresses, nicknames, family details, and social media accounts, with corresponding icons. Incorporate connected data lines and dynamic graphical elements such as charts and tables to represent interactions and surveillance logs. The overall aesthetic should evoke a sense of digital espionage and high-level hacking, with a futuristic cyber-punk vibe.