Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GLOBAL SURVEILLANCE DASHBOARD</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=Ubuntu+Mono:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Ubuntu Mono', monospace; | |
| background-color: #0a0a0a; | |
| color: #00ff41; | |
| overflow-x: hidden; | |
| } | |
| .glow { | |
| text-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41; | |
| } | |
| .red-glow { | |
| text-shadow: 0 0 5px #ff0033, 0 0 10px #ff0033; | |
| } | |
| .panel { | |
| border: 1px solid #00ff41; | |
| box-shadow: 0 0 10px rgba(0, 255, 65, 0.3), inset 0 0 10px rgba(0, 255, 65, 0.2); | |
| background: rgba(10, 20, 15, 0.5); | |
| } | |
| .alert-panel { | |
| border: 1px solid #ff0033; | |
| box-shadow: 0 0 10px rgba(255, 0, 51, 0.3), inset 0 0 10px rgba(255, 0, 51, 0.2); | |
| } | |
| .scanline { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, | |
| rgba(0, 255, 65, 0.05) 0%, | |
| rgba(0, 255, 65, 0) 10%); | |
| background-size: 100% 8px; | |
| pointer-events: none; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 0 100%; } | |
| } | |
| .glitch-effect { | |
| position: relative; | |
| } | |
| .glitch-effect::before, .glitch-effect::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(10, 20, 15, 0.7); | |
| } | |
| .glitch-effect::before { | |
| left: 2px; | |
| text-shadow: -2px 0 #ff0033; | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim-1 2s infinite linear alternate-reverse; | |
| } | |
| .glitch-effect::after { | |
| left: -2px; | |
| text-shadow: -2px 0 #00f7ff; | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim-2 2s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim-1 { | |
| 0% { clip: rect(32px, 9999px, 78px, 0); } | |
| 20% { clip: rect(68px, 9999px, 88px, 0); } | |
| 40% { clip: rect(42px, 9999px, 23px, 0); } | |
| 60% { clip: rect(28px, 9999px, 87px, 0); } | |
| 80% { clip: rect(55px, 9999px, 97px, 0); } | |
| 100% { clip: rect(62px, 9999px, 52px, 0); } | |
| } | |
| @keyframes glitch-anim-2 { | |
| 0% { clip: rect(91px, 9999px, 13px, 0); } | |
| 20% { clip: rect(12px, 9999px, 29px, 0); } | |
| 40% { clip: rect(75px, 9999px, 63px, 0); } | |
| 60% { clip: rect(38px, 9999px, 17px, 0); } | |
| 80% { clip: rect(49px, 9999px, 94px, 0); } | |
| 100% { clip: rect(82px, 9999px, 31px, 0); } | |
| } | |
| .pixelate { | |
| filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeFlood width='2' height='2' result='p1'/%3E%3CfeFlood width='4' height='4' result='p2'/%3E%3CfeComposite in='p1' in2='p2' operator='in' result='comp'/%3E%3CfeComposite in='SourceGraphic' in2='comp' operator='over'/%3E%3C/filter%3E%3C/svg%3E#a"); | |
| } | |
| .data-line { | |
| position: absolute; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #00ff41, transparent); | |
| transform-origin: left; | |
| z-index: 0; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.5; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.5; } | |
| } | |
| .connection-path { | |
| position: absolute; | |
| stroke: #00ff41; | |
| stroke-width: 1; | |
| fill: none; | |
| stroke-dasharray: 5; | |
| animation: dash 30s linear infinite; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: -1000; | |
| } | |
| } | |
| .terminal-header { | |
| border-bottom: 1px solid #00ff41; | |
| background: linear-gradient(to bottom, rgba(0, 255, 65, 0.1), transparent); | |
| } | |
| .data-point { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| background-color: #00ff41; | |
| border-radius: 50%; | |
| z-index: 1; | |
| } | |
| .digital-face { | |
| position: relative; | |
| filter: 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; | |
| } | |
| .flicker { | |
| animation: flicker 0.01s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0% { opacity: 0.95; } | |
| 100% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <div class="scanline"></div> | |
| <!-- Header --> | |
| <header class="border-b border-green-500 border-opacity-30 py-3 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">GLOBAL SURVEILLANCE NETWORK</h1> | |
| </div> | |
| <div class="text-sm"> | |
| <span class="mr-4">[CLEARANCE: BLACK]</span> | |
| <span class="text-red-400 red-glow">[LIVE FEED]</span> | |
| </div> | |
| <div class="text-xs"> | |
| <span class="mr-2">OPERATOR: <span class="glow">ANALYST_7</span></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-4 gap-4 relative z-10"> | |
| <!-- Target Profile Column --> | |
| <div class="lg:col-span-1 space-y-4"> | |
| <!-- Target Identification --> | |
| <div class="panel p-4 relative"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">TARGET IDENTIFICATION</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="flex flex-col items-center mb-4"> | |
| <div class="w-32 h-32 rounded-full overflow-hidden mb-4 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 pixelate"> | |
| <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">PRIMARY 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: <span class="glitch-effect" data-text="HIGH">HIGH</span></p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2 text-xs"> | |
| <div> | |
| <p class="text-green-300">DOB:</p> | |
| <p>1989-04-15</p> | |
| </div> | |
| <div> | |
| <p class="text-green-300">POB:</p> | |
| <p>SF, CA</p> | |
| </div> | |
| <div> | |
| <p class="text-green-300">SSN:</p> | |
| <p>███-██-████</p> | |
| </div> | |
| <div> | |
| <p class="text-green-300">PHYSICAL:</p> | |
| <p>5'11" | 180lbs</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Known Addresses --> | |
| <div class="panel p-4"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">KNOWN ADDRESSES</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="space-y-3 text-xs"> | |
| <div> | |
| <p class="text-green-300">PRIMARY RESIDENCE:</p> | |
| <p>1815 █████ ST, APT ██</p> | |
| <p>SAN FRANCISCO, CA</p> | |
| <p class="text-green-300">LAST SEEN: 2023-07-15</p> | |
| </div> | |
| <div class="h-px bg-green-500 bg-opacity-30"></div> | |
| <div> | |
| <p class="text-green-300">SECONDARY RESIDENCE:</p> | |
| <p>890 █████ AVE</p> | |
| <p>PORTLAND, OR</p> | |
| <p class="text-green-300">LAST SEEN: 2023-06-28</p> | |
| </div> | |
| <div class="h-px bg-green-500 bg-opacity-30"></div> | |
| <div> | |
| <p class="text-green-300">WORK LOCATION:</p> | |
| <p>███████ TECH</p> | |
| <p>455 █████ BLVD, SF</p> | |
| <p class="text-green-300">LAST SEEN: 2023-07-14</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Digital Footprint --> | |
| <div class="panel p-4"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">DIGITAL FOOTPRINT</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="space-y-3 text-xs"> | |
| <div> | |
| <p class="text-green-300">ONLINE HANDLES:</p> | |
| <p>@neonshadow (primary)</p> | |
| <p>@jasonx89 (secondary)</p> | |
| </div> | |
| <div class="h-px bg-green-500 bg-opacity-30"></div> | |
| <div> | |
| <p class="text-green-300">EMAIL ACCOUNTS:</p> | |
| <p>j.██████@protonmail.com</p> | |
| <p>jasonx@██████.com</p> | |
| </div> | |
| <div class="h-px bg-green-500 bg-opacity-30"></div> | |
| <div> | |
| <p class="text-green-300">PHONE NUMBERS:</p> | |
| <p>███-███-████ (primary)</p> | |
| <p>███-███-████ (burner)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Surveillance Column --> | |
| <div class="lg:col-span-3 space-y-4"> | |
| <!-- Threat Assessment Row --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- AI Risk Score --> | |
| <div class="panel p-4"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">AI RISK SCORE</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative w-32 h-32 mb-3"> | |
| <svg viewBox="0 0 36 36" class="circular-chart"> | |
| <path class="circle-bg" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#333" | |
| stroke-width="3"/> | |
| <path class="circle" | |
| stroke-dasharray="87, 100" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#ff0033" | |
| stroke-width="3" | |
| stroke-linecap="round"/> | |
| <text x="18" y="20.5" class="percentage" text-anchor="middle" fill="#00ff41" font-size="8">87%</text> | |
| </svg> | |
| </div> | |
| <p class="text-xs text-center">HIGH PROBABILITY OF MALICIOUS ACTIVITY</p> | |
| </div> | |
| </div> | |
| <!-- Behavioral Prediction --> | |
| <div class="panel p-4"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">BEHAVIORAL PREDICTION</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="space-y-3 text-xs"> | |
| <div> | |
| <p class="text-green-300">NEXT LOCATION:</p> | |
| <p>90% SF AREA</p> | |
| <p>8% PORTLAND</p> | |
| <p>2% OTHER</p> | |
| </div> | |
| <div class="h-px bg-green-500 bg-opacity-30"></div> | |
| <div> | |
| <p class="text-green-300">ACTIVITY PATTERN:</p> | |
| <p>TOR USAGE INCREASING</p> | |
| <p>ENCRYPTED COMMS RISING</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alert Panel --> | |
| <div class="alert-panel p-4"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg red-glow">SECURITY ALERT</h2> | |
| <div class="flex"> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div> | |
| <div class="w-2 h-2 rounded-full bg-red-500"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs"> | |
| <p class="mb-2">TARGET HAS INCREASED USE OF:</p> | |
| <ul class="list-disc list-inside space-y-1"> | |
| <li>TOR NETWORK (3x IN 24H)</li> | |
| <li>ENCRYPTED EMAIL (87% TRAFFIC)</li> | |
| <li>SIGNAL MESSAGING (12 CONTACTS)</li> | |
| </ul> | |
| <div class="h-px bg-red-500 bg-opacity-30 my-2"></div> | |
| <p>POTENTIAL COORDINATION WITH KNOWN ENTITIES OF INTEREST</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Communication Monitoring --> | |
| <div class="panel p-4"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">COMMUNICATION MONITORING</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Social Media Activity --> | |
| <div> | |
| <h3 class="text-sm text-green-300 mb-2 flex items-center"> | |
| <i class="fas fa-hashtag mr-2"></i> SOCIAL MEDIA | |
| </h3> | |
| <div class="space-y-3 text-xs"> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center mr-2 mt-1"> | |
| <i class="fab fa-twitter text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p>@neonshadow - 14:32</p> | |
| <p class="text-green-300">"███████████████████"</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center mr-2 mt-1"> | |
| <i class="fab fa-facebook text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p>Jason ███████ - 12:18</p> | |
| <p class="text-green-300">"Meeting with █████ at ██████ cafe"</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center mr-2 mt-1"> | |
| <i class="fab fa-instagram text-purple-400"></i> | |
| </div> | |
| <div> | |
| <p>@jasonx89 - 09:45</p> | |
| <p class="text-green-300">Posted photo at ███████ location</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Metadata --> | |
| <div> | |
| <h3 class="text-sm text-green-300 mb-2 flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> EMAIL METADATA | |
| </h3> | |
| <div class="space-y-3 text-xs"> | |
| <div> | |
| <p>FROM: j.██████@protonmail.com</p> | |
| <p>TO: ██████@██████.com</p> | |
| <p class="text-green-300">SUBJECT: "Project ██████ update"</p> | |
| <p>14:05 | ENCRYPTED</p> | |
| </div> | |
| <div class="h-px bg-green-500 bg-opacity-30"></div> | |
| <div> | |
| <p>FROM: jasonx@██████.com</p> | |
| <p>TO: 3 RECIPIENTS</p> | |
| <p class="text-green-300">SUBJECT: "Meeting notes"</p> | |
| <p>11:32 | ENCRYPTED</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call Logs --> | |
| <div> | |
| <h3 class="text-sm text-green-300 mb-2 flex items-center"> | |
| <i class="fas fa-phone mr-2"></i> CALL LOGS | |
| </h3> | |
| <div class="space-y-3 text-xs"> | |
| <div> | |
| <p>INCOMING: ███-███-████</p> | |
| <p class="text-green-300">DURATION: 2:45</p> | |
| <p>14:32 | ENCRYPTED</p> | |
| </div> | |
| <div class="h-px bg-green-500 bg-opacity-30"></div> | |
| <div> | |
| <p>OUTGOING: ███-███-████</p> | |
| <p class="text-green-300">DURATION: 1:18</p> | |
| <p>12:18 | BURNER PHONE</p> | |
| </div> | |
| <div class="h-px bg-green-500 bg-opacity-30"></div> | |
| <div> | |
| <p>MISSED: ███-███-████</p> | |
| <p class="text-green-300">CONTACT: "E. ███████"</p> | |
| <p>09:45 | PRIMARY PHONE</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Visualization Row --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Network Map --> | |
| <div class="panel p-4 h-64 relative"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">SOCIAL NETWORK MAP</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="relative w-full h-48" 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> | |
| <!-- Activity Timeline --> | |
| <div class="panel p-4 h-64"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">ACTIVITY TIMELINE</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="relative w-full h-48" id="timeline-graph"> | |
| <!-- Timeline visualization will be added by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search History --> | |
| <div class="panel p-4"> | |
| <div class="terminal-header flex items-center justify-between pb-2 mb-3"> | |
| <h2 class="text-lg glow">SEARCH HISTORY ANALYSIS</h2> | |
| <div class="flex"> | |
| <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> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs"> | |
| <div> | |
| <h3 class="text-sm text-green-300 mb-2">CLEARNET SEARCHES</h3> | |
| <ul class="list-disc list-inside space-y-1"> | |
| <li>"How to detect surveillance"</li> | |
| <li>"Best encrypted email 2023"</li> | |
| <li>"███████ protest dates"</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm text-green-300 mb-2">TOR SEARCHES</h3> | |
| <ul class="list-disc list-inside space-y-1"> | |
| <li>"███████ marketplace"</li> | |
| <li>"Secure drop locations SF"</li> | |
| <li>"███████ documents"</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm text-green-300 mb-2">DARK WEB ACTIVITY</h3> | |
| <ul class="list-disc list-inside space-y-1"> | |
| <li>Accessed ███████.onion</li> | |
| <li>Posted on ███████ forum</li> | |
| <li>Downloaded ███████ files</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-green-500 border-opacity-30 py-3 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">ACTIVE</span></span> | |
| <span>DATA SOURCES: <span class="text-green-400">18/22 ONLINE</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">GLOBAL SURVEILLANCE NETWORK - 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); | |
| // Network graph connections | |
| const networkGraph = document.getElementById('network-graph'); | |
| const nodes = [ | |
| { id: 1, x: 20, y: 20, color: 'blue' }, | |
| { id: 2, x: 80, y: 20, color: 'blue' }, | |
| { id: 3, x: 15, y: 50, color: 'blue' }, | |
| { id: 4, x: 85, y: 50, color: 'green' }, | |
| { id: 5, x: 20, y: 80, color: 'blue' }, | |
| { id: 6, x: 80, y: 80, color: 'blue' }, | |
| { id: 7, x: 40, y: 30, color: 'blue' }, | |
| { id: 8, x: 60, y: 70, 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 = 'data-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); | |
| }); | |
| // Animate connection lines | |
| const connectionLines = document.querySelectorAll('.data-line'); | |
| connectionLines.forEach(line => { | |
| setInterval(() => { | |
| line.style.opacity = Math.random() * 0.5 + 0.5; | |
| }, Math.random() * 2000 + 1000); | |
| }); | |
| // Create timeline visualization | |
| const timelineGraph = document.getElementById('timeline-graph'); | |
| for (let i = 0; i < 24; i++) { | |
| const bar = document.createElement('div'); | |
| bar.className = 'absolute bottom-0 bg-green-500'; | |
| bar.style.left = (i * 4) + '%'; | |
| bar.style.width = '3%'; | |
| bar.style.height = (Math.random() * 80 + 10) + '%'; | |
| bar.style.opacity = 0.7; | |
| timelineGraph.appendChild(bar); | |
| // Add time labels for every 6 hours | |
| if (i % 6 === 0) { | |
| const label = document.createElement('div'); | |
| label.className = 'absolute text-xs'; | |
| label.style.left = (i * 4) + '%'; | |
| label.style.bottom = '-15px'; | |
| label.textContent = i + ':00'; | |
| timelineGraph.appendChild(label); | |
| } | |
| } | |
| // Add data points to timeline | |
| for (let i = 0; i < 10; i++) { | |
| const point = document.createElement('div'); | |
| point.className = 'data-point'; | |
| point.style.left = (Math.random() * 90 + 5) + '%'; | |
| point.style.top = (Math.random() * 80 + 10) + '%'; | |
| timelineGraph.appendChild(point); | |
| } | |
| // Random glitch effect on headers | |
| setInterval(() => { | |
| const headers = document.querySelectorAll('.glow'); | |
| headers.forEach(header => { | |
| if (Math.random() > 0.9) { | |
| header.classList.add('glitch-effect'); | |
| setTimeout(() => { | |
| header.classList.remove('glitch-effect'); | |
| }, 200); | |
| } | |
| }); | |
| }, 3000); | |
| </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=PeterAdel/agent-zone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |