Hugging Face's logo

Spaces:
PeterAdel
/
agent-zone
Running

App Files Community
PeterAdel commited on
Commit
228174d
·
verified ·
1 Parent(s): 4bb86bb

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +495 -337
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,14 +3,14 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>XKEYSCORE SURVEILLANCE DASHBOARD</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
11
 
12
  body {
13
- font-family: 'Share Tech Mono', monospace;
14
  background-color: #0a0a0a;
15
  color: #00ff41;
16
  overflow-x: hidden;
@@ -24,32 +24,15 @@
24
  text-shadow: 0 0 5px #ff0033, 0 0 10px #ff0033;
25
  }
26
 
27
- .terminal-border {
28
  border: 1px solid #00ff41;
29
- box-shadow: 0 0 10px #00ff41, inset 0 0 10px #00ff41;
 
30
  }
31
 
32
- .alert-border {
33
  border: 1px solid #ff0033;
34
- box-shadow: 0 0 10px #ff0033, inset 0 0 10px #ff0033;
35
- }
36
-
37
- .data-line {
38
- position: absolute;
39
- height: 1px;
40
- background: linear-gradient(90deg, transparent, #00ff41, transparent);
41
- transform-origin: left;
42
- z-index: 0;
43
- }
44
-
45
- .pulse {
46
- animation: pulse 2s infinite;
47
- }
48
-
49
- @keyframes pulse {
50
- 0% { opacity: 0.5; }
51
- 50% { opacity: 1; }
52
- 100% { opacity: 0.5; }
53
  }
54
 
55
  .scanline {
@@ -59,7 +42,7 @@
59
  width: 100%;
60
  height: 100%;
61
  background: linear-gradient(to bottom,
62
- rgba(0, 255, 65, 0.1) 0%,
63
  rgba(0, 255, 65, 0) 10%);
64
  background-size: 100% 8px;
65
  pointer-events: none;
@@ -71,380 +54,556 @@
71
  100% { background-position: 0 100%; }
72
  }
73
 
74
- .matrix-bg {
 
 
 
 
 
75
  position: absolute;
76
  top: 0;
77
  left: 0;
78
  width: 100%;
79
  height: 100%;
80
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="1" height="1" x="10" y="10" fill="%2300ff41" fill-opacity="0.1"/></svg>');
81
- background-size: 10px 10px;
82
- opacity: 0.3;
83
- z-index: 0;
84
  }
85
 
86
- .flicker {
87
- animation: flicker 0.01s infinite alternate;
 
 
 
88
  }
89
 
90
- @keyframes flicker {
91
- 0% { opacity: 0.95; }
92
- 100% { opacity: 1; }
 
 
93
  }
94
 
95
- .profile-shadow {
96
- filter: drop-shadow(0 0 5px #00ff41)
97
- drop-shadow(0 0 10px #00ff41)
98
- drop-shadow(0 0 15px #00ff41);
 
 
 
99
  }
100
 
101
- .connection-line {
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  position: absolute;
103
- background: linear-gradient(to right, transparent, #00ff41, transparent);
104
  height: 1px;
 
105
  transform-origin: left;
106
- z-index: -1;
107
  }
108
 
109
- .code-rain {
 
 
 
 
 
 
 
 
 
 
110
  position: absolute;
111
- color: #00ff41;
112
- opacity: 0.1;
113
- z-index: 0;
 
 
114
  }
115
 
116
- .digital-face {
117
- position: relative;
118
- filter: grayscale(100%) contrast(150%) brightness(0.8);
119
- background: linear-gradient(45deg, #0a0a0a 25%, #00ff41 25%, #00ff41 50%, #0a0a0a 50%, #0a0a0a 75%, #00ff41 75%);
120
- background-size: 4px 4px;
 
 
 
 
121
  }
122
 
123
  .data-point {
124
  position: absolute;
125
- width: 4px;
126
- height: 4px;
127
  background-color: #00ff41;
128
  border-radius: 50%;
129
  z-index: 1;
130
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
131
  </style>
132
  </head>
133
  <body class="relative">
134
- <div class="matrix-bg"></div>
135
  <div class="scanline"></div>
136
 
137
- <!-- Code rain effect -->
138
- <div id="code-rain-container"></div>
139
-
140
  <!-- Header -->
141
- <header class="border-b border-green-500 border-opacity-30 py-4 px-6 flex justify-between items-center relative z-10">
142
  <div class="flex items-center">
143
  <div class="w-3 h-3 rounded-full bg-red-500 mr-2 pulse"></div>
144
- <h1 class="text-xl glow">XKEYSCORE v4.2.7</h1>
145
  </div>
146
  <div class="text-sm">
147
- <span class="mr-4">[SECURITY CLEARANCE: TOP SECRET]</span>
148
- <span class="text-red-400 red-glow">[CONNECTION ENCRYPTED]</span>
149
  </div>
150
  <div class="text-xs">
151
- <span class="mr-2">USER: OPERATOR_████</span>
152
  <span>SESSION: <span id="session-time">00:00:00</span></span>
153
  </div>
154
  </header>
155
 
156
- <main class="container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6 relative z-10">
157
- <!-- Target Profile Section -->
158
- <div class="lg:col-span-1 terminal-border p-4 relative overflow-hidden flicker">
159
- <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
160
- <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
161
- <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
162
- <div class="w-2 h-2 rounded-full bg-green-500"></div>
163
- </div>
164
-
165
- <h2 class="text-lg mb-4 mt-6 glow">TARGET PROFILE</h2>
166
-
167
- <div class="flex flex-col items-center mb-6">
168
- <div class="w-32 h-32 rounded-full overflow-hidden mb-4 profile-shadow digital-face relative">
169
- <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=128&q=80"
170
- alt="Target"
171
- class="w-full h-full object-cover">
172
- <div class="absolute inset-0 border border-green-500 opacity-30 rounded-full"></div>
173
- </div>
174
- <h3 class="text-xl glow">JASON ███████</h3>
175
- <p class="text-xs text-green-300">ALIAS: "NEON_SHADOW"</p>
176
- <div class="w-full h-px bg-green-500 bg-opacity-30 my-2"></div>
177
- <p class="text-xs text-red-400 red-glow">THREAT LEVEL: HIGH</p>
178
- </div>
179
-
180
- <div class="grid grid-cols-1 gap-4">
181
- <div>
182
- <h4 class="text-sm text-green-300 mb-1 flex items-center">
183
- <i class="fas fa-id-card mr-2"></i> PERSONAL DETAILS
184
- </h4>
185
- <p class="text-xs">DOB: 1989-04-15</p>
186
- <p class="text-xs">POB: SAN FRANCISCO, CA</p>
187
- <p class="text-xs">SSN: ███-██-████</p>
188
- <p class="text-xs">HEIGHT: 5'11" | WEIGHT: 180lbs</p>
189
- </div>
190
-
191
- <div>
192
- <h4 class="text-sm text-green-300 mb-1 flex items-center">
193
- <i class="fas fa-map-marker-alt mr-2"></i> KNOWN ADDRESSES
194
- </h4>
195
- <p class="text-xs">PRIMARY: 1815 █████ ST, APT ██, SF, CA</p>
196
- <p class="text-xs">SECONDARY: 890 █████ AVE, PORTLAND, OR</p>
197
- <p class="text-xs">WORK: ███████ TECH, 455 █████ BLVD, SF</p>
198
- </div>
199
-
200
- <div>
201
- <h4 class="text-sm text-green-300 mb-1 flex items-center">
202
- <i class="fas fa-users mr-2"></i> FAMILY CONNECTIONS
203
- </h4>
204
- <p class="text-xs">SPOUSE: EMMA ███████ (b. 1991)</p>
205
- <p class="text-xs">SIBLING: MICHAEL ███████ (b. 1986)</p>
206
- <p class="text-xs">FATHER: ROBERT ███████ (b. 1958)</p>
207
- <p class="text-xs">MOTHER: LISA ███████ (b. 1960)</p>
208
  </div>
209
 
210
- <div>
211
- <h4 class="text-sm text-green-300 mb-1 flex items-center">
212
- <i class="fas fa-network-wired mr-2"></i> DIGITAL FOOTPRINT
213
- </h4>
214
- <div class="flex space-x-4 mt-2">
215
- <a href="#" class="text-green-400 hover:text-green-200" title="Twitter"><i class="fab fa-twitter"></i></a>
216
- <a href="#" class="text-green-400 hover:text-green-200" title="Facebook"><i class="fab fa-facebook"></i></a>
217
- <a href="#" class="text-green-400 hover:text-green-200" title="Instagram"><i class="fab fa-instagram"></i></a>
218
- <a href="#" class="text-green-400 hover:text-green-200" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
219
- <a href="#" class="text-green-400 hover:text-green-200" title="GitHub"><i class="fab fa-github"></i></a>
220
- <a href="#" class="text-green-400 hover:text-green-200" title="Signal"><i class="fas fa-comment"></i></a>
221
- </div>
222
- <p class="text-xs mt-2">ONLINE HANDLES: @neonshadow, @jasonx89</p>
223
- <p class="text-xs">EMAILS: j.██████@protonmail.com, jasonx@██████.com</p>
224
- <p class="text-xs">PHONE: ███-███-████ (burner: ███-███-████)</p>
225
- </div>
226
- </div>
227
- </div>
228
-
229
- <!-- Main Surveillance Section -->
230
- <div class="lg:col-span-2 grid grid-cols-1 gap-6">
231
- <!-- Activity Log -->
232
- <div class="terminal-border p-4 relative flicker">
233
- <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
234
- <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
235
- <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
236
- <div class="w-2 h-2 rounded-full bg-green-500"></div>
237
  </div>
238
 
239
- <h2 class="text-lg mb-4 mt-6 glow">ACTIVITY LOG <span class="text-xs text-green-300">(LAST 72 HOURS)</span></h2>
240
-
241
- <div class="overflow-y-auto max-h-64">
242
- <div class="grid grid-cols-12 gap-2 text-xs mb-2 border-b border-green-500 border-opacity-30 pb-1">
243
- <div class="col-span-2">TIMESTAMP</div>
244
- <div class="col-span-3">LOCATION</div>
245
- <div class="col-span-4">ACTIVITY</div>
246
- <div class="col-span-3">DEVICE</div>
247
  </div>
248
-
249
- <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
250
- <div class="col-span-2 text-green-300">2023-07-15 14:32</div>
251
- <div class="col-span-3">CAFE █████ (SF)</div>
252
- <div class="col-span-4">Accessed ███████.onion via TOR</div>
253
- <div class="col-span-3">iPhone 13 Pro</div>
254
  </div>
255
-
256
- <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
257
- <div class="col-span-2 text-green-300">2023-07-15 12:18</div>
258
- <div class="col-span-3">HOME (WIFI)</div>
259
- <div class="col-span-4">Sent encrypted email to ██████@protonmail.com</div>
260
- <div class="col-span-3">MacBook Pro</div>
261
  </div>
262
-
263
- <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
264
- <div class="col-span-2 text-green-300">2023-07-15 09:45</div>
265
- <div class="col-span-3">COWORKING ████</div>
266
- <div class="col-span-4">Video call with 3 participants (TOR)</div>
267
- <div class="col-span-3">Linux Desktop</div>
268
  </div>
269
-
270
- <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
271
- <div class="col-span-2 text-green-300">2023-07-14 22:15</div>
272
- <div class="col-span-3">HOME (WIFI)</div>
273
- <div class="col-span-4">Posted on Twitter: "███████████████"</div>
274
- <div class="col-span-3">iPhone 13 Pro</div>
 
 
 
 
 
275
  </div>
276
-
277
- <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
278
- <div class="col-span-2 text-green-300">2023-07-14 19:30</div>
279
- <div class="col-span-3">GYM ███████</div>
280
- <div class="col-span-4">Received call from ███-███-████ (burner)</div>
281
- <div class="col-span-3">iPhone 13 Pro</div>
 
 
282
  </div>
283
 
284
- <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
285
- <div class="col-span-2 text-green-300">2023-07-14 16:42</div>
286
- <div class="col-span-3">COFFEE █████</div>
287
- <div class="col-span-4">Accessed GitHub: pushed to ███████ repo</div>
288
- <div class="col-span-3">MacBook Pro</div>
289
- </div>
290
 
291
- <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
292
- <div class="col-span-2 text-green-300">2023-07-14 11:05</div>
293
- <div class="col-span-3">TRANSIT (BART)</div>
294
- <div class="col-span-4">Sent encrypted message via Signal</div>
295
- <div class="col-span-3">iPhone 13 Pro</div>
296
  </div>
297
 
298
- <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
299
- <div class="col-span-2 text-green-300">2023-07-13 23:30</div>
300
- <div class="col-span-3">HOME (WIFI)</div>
301
- <div class="col-span-4">Accessed ████████.onion wallet</div>
302
- <div class="col-span-3">Linux Desktop</div>
 
 
303
  </div>
304
  </div>
305
  </div>
306
 
307
- <!-- Data Visualization -->
308
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
309
- <!-- Network Graph -->
310
- <div class="terminal-border p-4 relative flicker">
311
- <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
312
  <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
313
  <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
314
  <div class="w-2 h-2 rounded-full bg-green-500"></div>
315
  </div>
 
 
 
 
 
 
 
 
316
 
317
- <h2 class="text-lg mb-4 mt-6 glow">SOCIAL NETWORK MAP</h2>
318
 
319
- <div class="flex justify-center items-center h-48">
320
- <div class="relative w-full h-full" id="network-graph">
321
- <!-- Center node (target) -->
322
- <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">
323
- T
324
- </div>
325
-
326
- <!-- Connection lines will be added by JS -->
327
- </div>
328
  </div>
329
 
330
- <div class="grid grid-cols-3 gap-2 text-xs mt-4">
331
- <div class="flex items-center">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
332
  <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
333
- <span>TARGET</span>
 
334
  </div>
335
- <div class="flex items-center">
336
- <div class="w-2 h-2 rounded-full bg-blue-500 mr-1"></div>
337
- <span>CONTACTS</span>
338
- </div>
339
- <div class="flex items-center">
340
- <div class="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
341
- <span>ALERTS</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
342
  </div>
 
343
  </div>
344
  </div>
345
 
346
- <!-- Threat Assessment -->
347
- <div class="terminal-border p-4 relative flicker">
348
- <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
349
- <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
350
- <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
351
- <div class="w-2 h-2 rounded-full bg-green-500"></div>
 
 
 
352
  </div>
353
 
354
- <h2 class="text-lg mb-4 mt-6 glow">THREAT ASSESSMENT</h2>
355
-
356
- <div class="space-y-4">
357
  <div>
358
- <div class="flex justify-between text-xs mb-1">
359
- <span>ENCRYPTION USAGE</span>
360
- <span>87%</span>
361
- </div>
362
- <div class="w-full bg-gray-800 rounded-full h-2">
363
- <div class="bg-red-500 h-2 rounded-full" style="width: 87%"></div>
364
- </div>
365
  </div>
366
 
 
 
367
  <div>
368
- <div class="flex justify-between text-xs mb-1">
369
- <span>DARK WEB ACTIVITY</span>
370
- <span>64%</span>
371
- </div>
372
- <div class="w-full bg-gray-800 rounded-full h-2">
373
- <div class="bg-yellow-500 h-2 rounded-full" style="width: 64%"></div>
374
- </div>
375
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
376
 
377
- <div>
378
- <div class="flex justify-between text-xs mb-1">
379
- <span>SUSPICIOUS CONTACTS</span>
380
- <span>42%</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
381
  </div>
382
- <div class="w-full bg-gray-800 rounded-full h-2">
383
- <div class="bg-green-500 h-2 rounded-full" style="width: 42%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
384
  </div>
385
  </div>
386
-
387
- <div>
388
- <div class="flex justify-between text-xs mb-1">
389
- <span>OVERALL THREAT LEVEL</span>
390
- <span class="text-red-400 red-glow">HIGH</span>
 
 
 
 
 
 
 
 
391
  </div>
392
- <div class="w-full bg-gray-800 rounded-full h-2">
393
- <div class="bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 h-2 rounded-full" style="width: 78%"></div>
 
 
 
 
 
 
394
  </div>
395
  </div>
396
  </div>
397
 
398
- <div class="mt-4 p-2 alert-border">
399
- <h3 class="text-sm text-red-400 red-glow mb-1 flex items-center">
400
- <i class="fas fa-exclamation-triangle mr-2"></i> SECURITY ALERT
 
401
  </h3>
402
- <p class="text-xs">Target has accessed TOR network 3 times in last 24 hours. Possible coordination with known entities of interest.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
403
  </div>
404
  </div>
405
  </div>
406
 
407
- <!-- Data Analysis -->
408
- <div class="terminal-border p-4 relative flicker">
409
- <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
410
- <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
411
- <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
412
- <div class="w-2 h-2 rounded-full bg-green-500"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
413
  </div>
414
 
415
- <h2 class="text-lg mb-4 mt-6 glow">COMMUNICATION ANALYSIS</h2>
416
-
417
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
418
- <div class="text-center">
419
- <div class="text-2xl glow">73%</div>
420
- <div class="text-xs text-green-300">ENCRYPTED TRAFFIC</div>
 
 
 
421
  </div>
422
- <div class="text-center">
423
- <div class="text-2xl glow">12</div>
424
- <div class="text-xs text-green-300">SUSPICIOUS CONTACTS</div>
425
  </div>
426
- <div class="text-center">
427
- <div class="text-2xl glow">8</div>
428
- <div class="text-xs text-green-300">TOR SESSIONS (7D)</div>
 
 
 
 
 
 
 
 
429
  </div>
430
  </div>
431
 
432
- <div class="mt-4 h-32 relative" id="data-graph">
433
- <!-- Data visualization will be added by JS -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
434
  </div>
435
  </div>
436
  </div>
437
  </main>
438
 
439
  <!-- Footer -->
440
- <footer class="border-t border-green-500 border-opacity-30 py-4 px-6 text-xs text-center relative z-10">
441
  <div class="flex justify-center space-x-6 mb-2">
442
- <span>SYSTEM STATUS: <span class="text-green-400">OPERATIONAL</span></span>
443
- <span>DATA SOURCES: <span class="text-green-400">12 ACTIVE</span></span>
444
  <span>LAST UPDATE: <span class="text-green-400" id="last-update">00:00:00</span></span>
445
  </div>
446
  <div>
447
- <span class="text-gray-500">XKEYSCORE SURVEILLANCE SYSTEM - TOP SECRET//COMINT//NOFORN</span>
448
  </div>
449
  </footer>
450
 
@@ -461,43 +620,17 @@
461
  document.getElementById('last-update').textContent = new Date().toLocaleTimeString();
462
  }, 1000);
463
 
464
- // Code rain effect
465
- const chars = "01!@#$%^&*()_+-=[]{}|;':,./<>?";
466
- const container = document.getElementById('code-rain-container');
467
-
468
- function createCodeRain() {
469
- const code = document.createElement('div');
470
- code.className = 'code-rain';
471
- code.style.left = Math.random() * 100 + 'vw';
472
- code.style.top = -20 + 'px';
473
- code.style.fontSize = Math.random() * 10 + 10 + 'px';
474
- code.style.animationDuration = Math.random() * 3 + 2 + 's';
475
-
476
- let content = '';
477
- const length = Math.floor(Math.random() * 10) + 5;
478
- for (let i = 0; i < length; i++) {
479
- content += chars[Math.floor(Math.random() * chars.length)] + '<br>';
480
- }
481
-
482
- code.innerHTML = content;
483
- container.appendChild(code);
484
-
485
- setTimeout(() => {
486
- code.remove();
487
- }, 5000);
488
- }
489
-
490
- setInterval(createCodeRain, 100);
491
-
492
  // Network graph connections
493
  const networkGraph = document.getElementById('network-graph');
494
  const nodes = [
495
- { id: 1, x: 30, y: 20, color: 'blue' },
496
- { id: 2, x: 70, y: 20, color: 'blue' },
497
- { id: 3, x: 20, y: 50, color: 'blue' },
498
- { id: 4, x: 80, y: 50, color: 'green' },
499
- { id: 5, x: 30, y: 80, color: 'blue' },
500
- { id: 6, x: 70, y: 80, color: 'blue' }
 
 
501
  ];
502
 
503
  // Create nodes
@@ -512,7 +645,7 @@
512
 
513
  // Create connection lines to center
514
  const line = document.createElement('div');
515
- line.className = 'connection-line';
516
  line.style.width = Math.sqrt(Math.pow(50 - node.x, 2) + Math.pow(50 - node.y, 2)) + '%';
517
  line.style.left = '50%';
518
  line.style.top = '50%';
@@ -520,32 +653,57 @@
520
  networkGraph.appendChild(line);
521
  });
522
 
523
- // Data graph visualization
524
- const dataGraph = document.getElementById('data-graph');
525
- for (let i = 0; i < 50; i++) {
526
- const point = document.createElement('div');
527
- point.className = 'data-point';
528
- point.style.left = Math.random() * 100 + '%';
529
- point.style.top = Math.random() * 100 + '%';
530
- point.style.opacity = Math.random() * 0.5 + 0.3;
531
- dataGraph.appendChild(point);
532
- }
533
-
534
  // Animate connection lines
535
- const connectionLines = document.querySelectorAll('.connection-line');
536
  connectionLines.forEach(line => {
537
  setInterval(() => {
538
  line.style.opacity = Math.random() * 0.5 + 0.5;
539
  }, Math.random() * 2000 + 1000);
540
  });
541
 
542
- // Terminal flicker effect
543
- const terminals = document.querySelectorAll('.terminal-border');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
544
  setInterval(() => {
545
- terminals.forEach(term => {
546
- term.style.boxShadow = `0 0 ${Math.random() * 5 + 5}px #00ff41, inset 0 0 ${Math.random() * 5 + 5}px #00ff41`;
 
 
 
 
 
 
547
  });
548
- }, 100);
549
  </script>
550
  <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>
551
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GLOBAL SURVEILLANCE DASHBOARD</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');
11
 
12
  body {
13
+ font-family: 'Ubuntu Mono', monospace;
14
  background-color: #0a0a0a;
15
  color: #00ff41;
16
  overflow-x: hidden;
 
24
  text-shadow: 0 0 5px #ff0033, 0 0 10px #ff0033;
25
  }
26
 
27
+ .panel {
28
  border: 1px solid #00ff41;
29
+ box-shadow: 0 0 10px rgba(0, 255, 65, 0.3), inset 0 0 10px rgba(0, 255, 65, 0.2);
30
+ background: rgba(10, 20, 15, 0.5);
31
  }
32
 
33
+ .alert-panel {
34
  border: 1px solid #ff0033;
35
+ box-shadow: 0 0 10px rgba(255, 0, 51, 0.3), inset 0 0 10px rgba(255, 0, 51, 0.2);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
 
38
  .scanline {
 
42
  width: 100%;
43
  height: 100%;
44
  background: linear-gradient(to bottom,
45
+ rgba(0, 255, 65, 0.05) 0%,
46
  rgba(0, 255, 65, 0) 10%);
47
  background-size: 100% 8px;
48
  pointer-events: none;
 
54
  100% { background-position: 0 100%; }
55
  }
56
 
57
+ .glitch-effect {
58
+ position: relative;
59
+ }
60
+
61
+ .glitch-effect::before, .glitch-effect::after {
62
+ content: attr(data-text);
63
  position: absolute;
64
  top: 0;
65
  left: 0;
66
  width: 100%;
67
  height: 100%;
68
+ background: rgba(10, 20, 15, 0.7);
 
 
 
69
  }
70
 
71
+ .glitch-effect::before {
72
+ left: 2px;
73
+ text-shadow: -2px 0 #ff0033;
74
+ clip: rect(44px, 450px, 56px, 0);
75
+ animation: glitch-anim-1 2s infinite linear alternate-reverse;
76
  }
77
 
78
+ .glitch-effect::after {
79
+ left: -2px;
80
+ text-shadow: -2px 0 #00f7ff;
81
+ clip: rect(44px, 450px, 56px, 0);
82
+ animation: glitch-anim-2 2s infinite linear alternate-reverse;
83
  }
84
 
85
+ @keyframes glitch-anim-1 {
86
+ 0% { clip: rect(32px, 9999px, 78px, 0); }
87
+ 20% { clip: rect(68px, 9999px, 88px, 0); }
88
+ 40% { clip: rect(42px, 9999px, 23px, 0); }
89
+ 60% { clip: rect(28px, 9999px, 87px, 0); }
90
+ 80% { clip: rect(55px, 9999px, 97px, 0); }
91
+ 100% { clip: rect(62px, 9999px, 52px, 0); }
92
  }
93
 
94
+ @keyframes glitch-anim-2 {
95
+ 0% { clip: rect(91px, 9999px, 13px, 0); }
96
+ 20% { clip: rect(12px, 9999px, 29px, 0); }
97
+ 40% { clip: rect(75px, 9999px, 63px, 0); }
98
+ 60% { clip: rect(38px, 9999px, 17px, 0); }
99
+ 80% { clip: rect(49px, 9999px, 94px, 0); }
100
+ 100% { clip: rect(82px, 9999px, 31px, 0); }
101
+ }
102
+
103
+ .pixelate {
104
+ 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");
105
+ }
106
+
107
+ .data-line {
108
  position: absolute;
 
109
  height: 1px;
110
+ background: linear-gradient(90deg, transparent, #00ff41, transparent);
111
  transform-origin: left;
112
+ z-index: 0;
113
  }
114
 
115
+ .pulse {
116
+ animation: pulse 2s infinite;
117
+ }
118
+
119
+ @keyframes pulse {
120
+ 0% { opacity: 0.5; }
121
+ 50% { opacity: 1; }
122
+ 100% { opacity: 0.5; }
123
+ }
124
+
125
+ .connection-path {
126
  position: absolute;
127
+ stroke: #00ff41;
128
+ stroke-width: 1;
129
+ fill: none;
130
+ stroke-dasharray: 5;
131
+ animation: dash 30s linear infinite;
132
  }
133
 
134
+ @keyframes dash {
135
+ to {
136
+ stroke-dashoffset: -1000;
137
+ }
138
+ }
139
+
140
+ .terminal-header {
141
+ border-bottom: 1px solid #00ff41;
142
+ background: linear-gradient(to bottom, rgba(0, 255, 65, 0.1), transparent);
143
  }
144
 
145
  .data-point {
146
  position: absolute;
147
+ width: 6px;
148
+ height: 6px;
149
  background-color: #00ff41;
150
  border-radius: 50%;
151
  z-index: 1;
152
  }
153
+
154
+ .digital-face {
155
+ position: relative;
156
+ filter: contrast(150%) brightness(0.8);
157
+ background: linear-gradient(45deg, #0a0a0a 25%, #00ff41 25%, #00ff41 50%, #0a0a0a 50%, #0a0a0a 75%, #00ff41 75%);
158
+ background-size: 4px 4px;
159
+ }
160
+
161
+ .flicker {
162
+ animation: flicker 0.01s infinite alternate;
163
+ }
164
+
165
+ @keyframes flicker {
166
+ 0% { opacity: 0.95; }
167
+ 100% { opacity: 1; }
168
+ }
169
  </style>
170
  </head>
171
  <body class="relative">
 
172
  <div class="scanline"></div>
173
 
 
 
 
174
  <!-- Header -->
175
+ <header class="border-b border-green-500 border-opacity-30 py-3 px-6 flex justify-between items-center relative z-10">
176
  <div class="flex items-center">
177
  <div class="w-3 h-3 rounded-full bg-red-500 mr-2 pulse"></div>
178
+ <h1 class="text-xl glow">GLOBAL SURVEILLANCE NETWORK</h1>
179
  </div>
180
  <div class="text-sm">
181
+ <span class="mr-4">[CLEARANCE: BLACK]</span>
182
+ <span class="text-red-400 red-glow">[LIVE FEED]</span>
183
  </div>
184
  <div class="text-xs">
185
+ <span class="mr-2">OPERATOR: <span class="glow">ANALYST_7</span></span>
186
  <span>SESSION: <span id="session-time">00:00:00</span></span>
187
  </div>
188
  </header>
189
 
190
+ <main class="container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-4 gap-4 relative z-10">
191
+ <!-- Target Profile Column -->
192
+ <div class="lg:col-span-1 space-y-4">
193
+ <!-- Target Identification -->
194
+ <div class="panel p-4 relative">
195
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
196
+ <h2 class="text-lg glow">TARGET IDENTIFICATION</h2>
197
+ <div class="flex">
198
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
199
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
200
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
201
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  </div>
203
 
204
+ <div class="flex flex-col items-center mb-4">
205
+ <div class="w-32 h-32 rounded-full overflow-hidden mb-4 digital-face relative">
206
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=128&q=80"
207
+ alt="Target"
208
+ class="w-full h-full object-cover pixelate">
209
+ <div class="absolute inset-0 border border-green-500 opacity-30 rounded-full"></div>
210
+ </div>
211
+ <h3 class="text-xl glow">JASON ███████</h3>
212
+ <p class="text-xs text-green-300">PRIMARY ALIAS: "NEON_SHADOW"</p>
213
+ <div class="w-full h-px bg-green-500 bg-opacity-30 my-2"></div>
214
+ <p class="text-xs text-red-400 red-glow">THREAT LEVEL: <span class="glitch-effect" data-text="HIGH">HIGH</span></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  </div>
216
 
217
+ <div class="grid grid-cols-2 gap-2 text-xs">
218
+ <div>
219
+ <p class="text-green-300">DOB:</p>
220
+ <p>1989-04-15</p>
 
 
 
 
221
  </div>
222
+ <div>
223
+ <p class="text-green-300">POB:</p>
224
+ <p>SF, CA</p>
 
 
 
225
  </div>
226
+ <div>
227
+ <p class="text-green-300">SSN:</p>
228
+ <p>███-██-████</p>
 
 
 
229
  </div>
230
+ <div>
231
+ <p class="text-green-300">PHYSICAL:</p>
232
+ <p>5'11" | 180lbs</p>
 
 
 
233
  </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Known Addresses -->
238
+ <div class="panel p-4">
239
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
240
+ <h2 class="text-lg glow">KNOWN ADDRESSES</h2>
241
+ <div class="flex">
242
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
243
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
244
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
245
  </div>
246
+ </div>
247
+
248
+ <div class="space-y-3 text-xs">
249
+ <div>
250
+ <p class="text-green-300">PRIMARY RESIDENCE:</p>
251
+ <p>1815 █████ ST, APT ██</p>
252
+ <p>SAN FRANCISCO, CA</p>
253
+ <p class="text-green-300">LAST SEEN: 2023-07-15</p>
254
  </div>
255
 
256
+ <div class="h-px bg-green-500 bg-opacity-30"></div>
 
 
 
 
 
257
 
258
+ <div>
259
+ <p class="text-green-300">SECONDARY RESIDENCE:</p>
260
+ <p>890 █████ AVE</p>
261
+ <p>PORTLAND, OR</p>
262
+ <p class="text-green-300">LAST SEEN: 2023-06-28</p>
263
  </div>
264
 
265
+ <div class="h-px bg-green-500 bg-opacity-30"></div>
266
+
267
+ <div>
268
+ <p class="text-green-300">WORK LOCATION:</p>
269
+ <p>███████ TECH</p>
270
+ <p>455 █████ BLVD, SF</p>
271
+ <p class="text-green-300">LAST SEEN: 2023-07-14</p>
272
  </div>
273
  </div>
274
  </div>
275
 
276
+ <!-- Digital Footprint -->
277
+ <div class="panel p-4">
278
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
279
+ <h2 class="text-lg glow">DIGITAL FOOTPRINT</h2>
280
+ <div class="flex">
281
  <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
282
  <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
283
  <div class="w-2 h-2 rounded-full bg-green-500"></div>
284
  </div>
285
+ </div>
286
+
287
+ <div class="space-y-3 text-xs">
288
+ <div>
289
+ <p class="text-green-300">ONLINE HANDLES:</p>
290
+ <p>@neonshadow (primary)</p>
291
+ <p>@jasonx89 (secondary)</p>
292
+ </div>
293
 
294
+ <div class="h-px bg-green-500 bg-opacity-30"></div>
295
 
296
+ <div>
297
+ <p class="text-green-300">EMAIL ACCOUNTS:</p>
298
+ <p>j.██████@protonmail.com</p>
299
+ <p>jasonx@██████.com</p>
 
 
 
 
 
300
  </div>
301
 
302
+ <div class="h-px bg-green-500 bg-opacity-30"></div>
303
+
304
+ <div>
305
+ <p class="text-green-300">PHONE NUMBERS:</p>
306
+ <p>███-███-████ (primary)</p>
307
+ <p>███-███-████ (burner)</p>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Main Surveillance Column -->
314
+ <div class="lg:col-span-3 space-y-4">
315
+ <!-- Threat Assessment Row -->
316
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
317
+ <!-- AI Risk Score -->
318
+ <div class="panel p-4">
319
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
320
+ <h2 class="text-lg glow">AI RISK SCORE</h2>
321
+ <div class="flex">
322
  <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
323
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
324
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
325
  </div>
326
+ </div>
327
+
328
+ <div class="flex flex-col items-center">
329
+ <div class="relative w-32 h-32 mb-3">
330
+ <svg viewBox="0 0 36 36" class="circular-chart">
331
+ <path class="circle-bg"
332
+ d="M18 2.0845
333
+ a 15.9155 15.9155 0 0 1 0 31.831
334
+ a 15.9155 15.9155 0 0 1 0 -31.831"
335
+ fill="none"
336
+ stroke="#333"
337
+ stroke-width="3"/>
338
+ <path class="circle"
339
+ stroke-dasharray="87, 100"
340
+ d="M18 2.0845
341
+ a 15.9155 15.9155 0 0 1 0 31.831
342
+ a 15.9155 15.9155 0 0 1 0 -31.831"
343
+ fill="none"
344
+ stroke="#ff0033"
345
+ stroke-width="3"
346
+ stroke-linecap="round"/>
347
+ <text x="18" y="20.5" class="percentage" text-anchor="middle" fill="#00ff41" font-size="8">87%</text>
348
+ </svg>
349
  </div>
350
+ <p class="text-xs text-center">HIGH PROBABILITY OF MALICIOUS ACTIVITY</p>
351
  </div>
352
  </div>
353
 
354
+ <!-- Behavioral Prediction -->
355
+ <div class="panel p-4">
356
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
357
+ <h2 class="text-lg glow">BEHAVIORAL PREDICTION</h2>
358
+ <div class="flex">
359
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
360
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
361
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
362
+ </div>
363
  </div>
364
 
365
+ <div class="space-y-3 text-xs">
 
 
366
  <div>
367
+ <p class="text-green-300">NEXT LOCATION:</p>
368
+ <p>90% SF AREA</p>
369
+ <p>8% PORTLAND</p>
370
+ <p>2% OTHER</p>
 
 
 
371
  </div>
372
 
373
+ <div class="h-px bg-green-500 bg-opacity-30"></div>
374
+
375
  <div>
376
+ <p class="text-green-300">ACTIVITY PATTERN:</p>
377
+ <p>TOR USAGE INCREASING</p>
378
+ <p>ENCRYPTED COMMS RISING</p>
 
 
 
 
379
  </div>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Alert Panel -->
384
+ <div class="alert-panel p-4">
385
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
386
+ <h2 class="text-lg red-glow">SECURITY ALERT</h2>
387
+ <div class="flex">
388
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
389
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
390
+ <div class="w-2 h-2 rounded-full bg-red-500"></div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="text-xs">
395
+ <p class="mb-2">TARGET HAS INCREASED USE OF:</p>
396
+ <ul class="list-disc list-inside space-y-1">
397
+ <li>TOR NETWORK (3x IN 24H)</li>
398
+ <li>ENCRYPTED EMAIL (87% TRAFFIC)</li>
399
+ <li>SIGNAL MESSAGING (12 CONTACTS)</li>
400
+ </ul>
401
 
402
+ <div class="h-px bg-red-500 bg-opacity-30 my-2"></div>
403
+
404
+ <p>POTENTIAL COORDINATION WITH KNOWN ENTITIES OF INTEREST</p>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Communication Monitoring -->
410
+ <div class="panel p-4">
411
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
412
+ <h2 class="text-lg glow">COMMUNICATION MONITORING</h2>
413
+ <div class="flex">
414
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
415
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
416
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
421
+ <!-- Social Media Activity -->
422
+ <div>
423
+ <h3 class="text-sm text-green-300 mb-2 flex items-center">
424
+ <i class="fas fa-hashtag mr-2"></i> SOCIAL MEDIA
425
+ </h3>
426
+ <div class="space-y-3 text-xs">
427
+ <div class="flex items-start">
428
+ <div class="w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center mr-2 mt-1">
429
+ <i class="fab fa-twitter text-blue-400"></i>
430
+ </div>
431
+ <div>
432
+ <p>@neonshadow - 14:32</p>
433
+ <p class="text-green-300">"███████████████████"</p>
434
+ </div>
435
  </div>
436
+
437
+ <div class="flex items-start">
438
+ <div class="w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center mr-2 mt-1">
439
+ <i class="fab fa-facebook text-blue-600"></i>
440
+ </div>
441
+ <div>
442
+ <p>Jason ███████ - 12:18</p>
443
+ <p class="text-green-300">"Meeting with █████ at ██████ cafe"</p>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="flex items-start">
448
+ <div class="w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center mr-2 mt-1">
449
+ <i class="fab fa-instagram text-purple-400"></i>
450
+ </div>
451
+ <div>
452
+ <p>@jasonx89 - 09:45</p>
453
+ <p class="text-green-300">Posted photo at ███████ location</p>
454
+ </div>
455
  </div>
456
  </div>
457
+ </div>
458
+
459
+ <!-- Email Metadata -->
460
+ <div>
461
+ <h3 class="text-sm text-green-300 mb-2 flex items-center">
462
+ <i class="fas fa-envelope mr-2"></i> EMAIL METADATA
463
+ </h3>
464
+ <div class="space-y-3 text-xs">
465
+ <div>
466
+ <p>FROM: j.██████@protonmail.com</p>
467
+ <p>TO: ██████@██████.com</p>
468
+ <p class="text-green-300">SUBJECT: "Project ██████ update"</p>
469
+ <p>14:05 | ENCRYPTED</p>
470
  </div>
471
+
472
+ <div class="h-px bg-green-500 bg-opacity-30"></div>
473
+
474
+ <div>
475
+ <p>FROM: jasonx@██████.com</p>
476
+ <p>TO: 3 RECIPIENTS</p>
477
+ <p class="text-green-300">SUBJECT: "Meeting notes"</p>
478
+ <p>11:32 | ENCRYPTED</p>
479
  </div>
480
  </div>
481
  </div>
482
 
483
+ <!-- Call Logs -->
484
+ <div>
485
+ <h3 class="text-sm text-green-300 mb-2 flex items-center">
486
+ <i class="fas fa-phone mr-2"></i> CALL LOGS
487
  </h3>
488
+ <div class="space-y-3 text-xs">
489
+ <div>
490
+ <p>INCOMING: ███-███-████</p>
491
+ <p class="text-green-300">DURATION: 2:45</p>
492
+ <p>14:32 | ENCRYPTED</p>
493
+ </div>
494
+
495
+ <div class="h-px bg-green-500 bg-opacity-30"></div>
496
+
497
+ <div>
498
+ <p>OUTGOING: ███-███-████</p>
499
+ <p class="text-green-300">DURATION: 1:18</p>
500
+ <p>12:18 | BURNER PHONE</p>
501
+ </div>
502
+
503
+ <div class="h-px bg-green-500 bg-opacity-30"></div>
504
+
505
+ <div>
506
+ <p>MISSED: ███-███-████</p>
507
+ <p class="text-green-300">CONTACT: "E. ███████"</p>
508
+ <p>09:45 | PRIMARY PHONE</p>
509
+ </div>
510
+ </div>
511
  </div>
512
  </div>
513
  </div>
514
 
515
+ <!-- Data Visualization Row -->
516
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
517
+ <!-- Network Map -->
518
+ <div class="panel p-4 h-64 relative">
519
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
520
+ <h2 class="text-lg glow">SOCIAL NETWORK MAP</h2>
521
+ <div class="flex">
522
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
523
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
524
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="relative w-full h-48" id="network-graph">
529
+ <!-- Center node (target) -->
530
+ <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">
531
+ T
532
+ </div>
533
+
534
+ <!-- Connection lines will be added by JS -->
535
+ </div>
536
  </div>
537
 
538
+ <!-- Activity Timeline -->
539
+ <div class="panel p-4 h-64">
540
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
541
+ <h2 class="text-lg glow">ACTIVITY TIMELINE</h2>
542
+ <div class="flex">
543
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
544
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
545
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
546
+ </div>
547
  </div>
548
+
549
+ <div class="relative w-full h-48" id="timeline-graph">
550
+ <!-- Timeline visualization will be added by JS -->
551
  </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Search History -->
556
+ <div class="panel p-4">
557
+ <div class="terminal-header flex items-center justify-between pb-2 mb-3">
558
+ <h2 class="text-lg glow">SEARCH HISTORY ANALYSIS</h2>
559
+ <div class="flex">
560
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
561
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
562
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
563
  </div>
564
  </div>
565
 
566
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
567
+ <div>
568
+ <h3 class="text-sm text-green-300 mb-2">CLEARNET SEARCHES</h3>
569
+ <ul class="list-disc list-inside space-y-1">
570
+ <li>"How to detect surveillance"</li>
571
+ <li>"Best encrypted email 2023"</li>
572
+ <li>"███████ protest dates"</li>
573
+ </ul>
574
+ </div>
575
+
576
+ <div>
577
+ <h3 class="text-sm text-green-300 mb-2">TOR SEARCHES</h3>
578
+ <ul class="list-disc list-inside space-y-1">
579
+ <li>"███████ marketplace"</li>
580
+ <li>"Secure drop locations SF"</li>
581
+ <li>"███████ documents"</li>
582
+ </ul>
583
+ </div>
584
+
585
+ <div>
586
+ <h3 class="text-sm text-green-300 mb-2">DARK WEB ACTIVITY</h3>
587
+ <ul class="list-disc list-inside space-y-1">
588
+ <li>Accessed ███████.onion</li>
589
+ <li>Posted on ███████ forum</li>
590
+ <li>Downloaded ███████ files</li>
591
+ </ul>
592
+ </div>
593
  </div>
594
  </div>
595
  </div>
596
  </main>
597
 
598
  <!-- Footer -->
599
+ <footer class="border-t border-green-500 border-opacity-30 py-3 px-6 text-xs text-center relative z-10">
600
  <div class="flex justify-center space-x-6 mb-2">
601
+ <span>SYSTEM STATUS: <span class="text-green-400">ACTIVE</span></span>
602
+ <span>DATA SOURCES: <span class="text-green-400">18/22 ONLINE</span></span>
603
  <span>LAST UPDATE: <span class="text-green-400" id="last-update">00:00:00</span></span>
604
  </div>
605
  <div>
606
+ <span class="text-gray-500">GLOBAL SURVEILLANCE NETWORK - TOP SECRET//COMINT//NOFORN</span>
607
  </div>
608
  </footer>
609
 
 
620
  document.getElementById('last-update').textContent = new Date().toLocaleTimeString();
621
  }, 1000);
622
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
623
  // Network graph connections
624
  const networkGraph = document.getElementById('network-graph');
625
  const nodes = [
626
+ { id: 1, x: 20, y: 20, color: 'blue' },
627
+ { id: 2, x: 80, y: 20, color: 'blue' },
628
+ { id: 3, x: 15, y: 50, color: 'blue' },
629
+ { id: 4, x: 85, y: 50, color: 'green' },
630
+ { id: 5, x: 20, y: 80, color: 'blue' },
631
+ { id: 6, x: 80, y: 80, color: 'blue' },
632
+ { id: 7, x: 40, y: 30, color: 'blue' },
633
+ { id: 8, x: 60, y: 70, color: 'blue' }
634
  ];
635
 
636
  // Create nodes
 
645
 
646
  // Create connection lines to center
647
  const line = document.createElement('div');
648
+ line.className = 'data-line';
649
  line.style.width = Math.sqrt(Math.pow(50 - node.x, 2) + Math.pow(50 - node.y, 2)) + '%';
650
  line.style.left = '50%';
651
  line.style.top = '50%';
 
653
  networkGraph.appendChild(line);
654
  });
655
 
 
 
 
 
 
 
 
 
 
 
 
656
  // Animate connection lines
657
+ const connectionLines = document.querySelectorAll('.data-line');
658
  connectionLines.forEach(line => {
659
  setInterval(() => {
660
  line.style.opacity = Math.random() * 0.5 + 0.5;
661
  }, Math.random() * 2000 + 1000);
662
  });
663
 
664
+ // Create timeline visualization
665
+ const timelineGraph = document.getElementById('timeline-graph');
666
+ for (let i = 0; i < 24; i++) {
667
+ const bar = document.createElement('div');
668
+ bar.className = 'absolute bottom-0 bg-green-500';
669
+ bar.style.left = (i * 4) + '%';
670
+ bar.style.width = '3%';
671
+ bar.style.height = (Math.random() * 80 + 10) + '%';
672
+ bar.style.opacity = 0.7;
673
+ timelineGraph.appendChild(bar);
674
+
675
+ // Add time labels for every 6 hours
676
+ if (i % 6 === 0) {
677
+ const label = document.createElement('div');
678
+ label.className = 'absolute text-xs';
679
+ label.style.left = (i * 4) + '%';
680
+ label.style.bottom = '-15px';
681
+ label.textContent = i + ':00';
682
+ timelineGraph.appendChild(label);
683
+ }
684
+ }
685
+
686
+ // Add data points to timeline
687
+ for (let i = 0; i < 10; i++) {
688
+ const point = document.createElement('div');
689
+ point.className = 'data-point';
690
+ point.style.left = (Math.random() * 90 + 5) + '%';
691
+ point.style.top = (Math.random() * 80 + 10) + '%';
692
+ timelineGraph.appendChild(point);
693
+ }
694
+
695
+ // Random glitch effect on headers
696
  setInterval(() => {
697
+ const headers = document.querySelectorAll('.glow');
698
+ headers.forEach(header => {
699
+ if (Math.random() > 0.9) {
700
+ header.classList.add('glitch-effect');
701
+ setTimeout(() => {
702
+ header.classList.remove('glitch-effect');
703
+ }, 200);
704
+ }
705
  });
706
+ }, 3000);
707
  </script>
708
  <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>
709
  </html>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  intretuce your sef
2
  "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."
3
- 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.
 
 
1
  intretuce your sef
2
  "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."
3
+ 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.
4
+ "A realistic and high-tech surveillance dashboard, inspired by global intelligence systems like XKeyscore. The interface should have a dark, cyberpunk aesthetic with neon green and red highlights over a black background. Display a central profile of a targeted individual: a semi-pixelated photo, full name, known aliases, multiple current and past addresses, family relationships, and linked digital identities. Include panels showing real-time social media activity (icons for platforms with brief messages), email metadata, phone call logs, and online searches. Use clean data lines and animated UI widgets to show how information is interconnected. Add small sections with AI risk score, threat level, and behavioral prediction based on digital footprint. The overall design should feel like a live intelligence feed being viewed by an elite cybersecurity analyst. Include slight glitches or scanline effects to enhance the hacking/espionage atmosphere."