Hugging Face's logo

Spaces:
PeterAdel
/
agent-zone
Running

App Files Community
PeterAdel commited on
Commit
53424e0
·
verified ·
1 Parent(s): f785ea5

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +351 -470
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,551 +3,432 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>My Personal Introduction</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
- /* Custom CSS for animations and effects */
11
- .floating {
12
- animation: floating 3s ease-in-out infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  }
14
 
15
- @keyframes floating {
16
- 0% { transform: translateY(0px); }
17
- 50% { transform: translateY(-15px); }
18
- 100% { transform: translateY(0px); }
19
  }
20
 
21
- .gradient-text {
22
- background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
23
- -webkit-background-clip: text;
24
- background-clip: text;
25
- color: transparent;
 
 
 
 
 
26
  }
27
 
28
- .card-hover:hover {
29
- transform: translateY(-5px);
30
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
31
  }
32
 
33
- .typewriter {
34
- overflow: hidden;
35
- border-right: .15em solid #3b82f6;
36
- white-space: nowrap;
37
- margin: 0 auto;
38
- letter-spacing: .15em;
39
- animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
40
  }
41
 
42
- @keyframes typing {
43
- from { width: 0 }
44
- to { width: 100% }
 
45
  }
46
 
47
- @keyframes blink-caret {
48
- from, to { border-color: transparent }
49
- 50% { border-color: #3b82f6; }
 
 
 
50
  }
51
  </style>
52
  </head>
53
- <body class="bg-gray-50 min-h-screen font-sans">
54
- <!-- Navigation -->
55
- <nav class="bg-white shadow-sm sticky top-0 z-50">
56
- <div class="max-w-6xl mx-auto px-4">
57
- <div class="flex justify-between h-16">
58
- <div class="flex items-center">
59
- <span class="text-xl font-bold gradient-text">MyPortfolio</span>
60
- </div>
61
- <div class="hidden md:flex items-center space-x-8">
62
- <a href="#about" class="text-gray-700 hover:text-blue-600 transition">About</a>
63
- <a href="#skills" class="text-gray-700 hover:text-blue-600 transition">Skills</a>
64
- <a href="#projects" class="text-gray-700 hover:text-blue-600 transition">Projects</a>
65
- <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a>
66
- </div>
67
- <div class="md:hidden flex items-center">
68
- <button id="menu-btn" class="text-gray-700">
69
- <i class="fas fa-bars text-2xl"></i>
70
- </button>
71
- </div>
72
- </div>
73
  </div>
74
- <!-- Mobile menu -->
75
- <div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4">
76
- <a href="#about" class="block py-2 text-gray-700 hover:text-blue-600 transition">About</a>
77
- <a href="#skills" class="block py-2 text-gray-700 hover:text-blue-600 transition">Skills</a>
78
- <a href="#projects" class="block py-2 text-gray-700 hover:text-blue-600 transition">Projects</a>
79
- <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-600 transition">Contact</a>
80
  </div>
81
- </nav>
82
-
83
- <!-- Hero Section -->
84
- <section class="py-20 px-4">
85
- <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
86
- <div class="md:w-1/2 mb-10 md:mb-0">
87
- <h1 class="text-4xl md:text-6xl font-bold mb-4">
88
- <span class="gradient-text">Hello, I'm</span>
89
- <div class="typewriter text-3xl md:text-5xl mt-2">Web Developer & Designer</div>
90
- </h1>
91
- <p class="text-gray-600 text-lg mb-8">
92
- I create beautiful, functional websites and applications with modern technologies.
93
- </p>
94
- <div class="flex space-x-4">
95
- <button id="cta-btn" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition shadow-lg">
96
- Contact Me
97
- </button>
98
- <button class="border border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition">
99
- View Projects
100
- </button>
101
- </div>
102
- </div>
103
- <div class="md:w-1/2 flex justify-center">
104
- <div class="relative w-64 h-64 md:w-80 md:h-80">
105
- <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full opacity-20 blur-xl"></div>
106
- <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
107
- alt="Profile"
108
- class="relative w-full h-full rounded-full object-cover border-4 border-white shadow-xl floating">
109
- </div>
110
- </div>
111
  </div>
112
- </section>
113
-
114
- <!-- About Section -->
115
- <section id="about" class="py-20 px-4 bg-white">
116
- <div class="max-w-6xl mx-auto">
117
- <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2>
118
- <div class="flex flex-col md:flex-row items-center">
119
- <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
120
- <div class="relative w-48 h-48 md:w-64 md:h-64">
121
- <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full opacity-20 blur-xl"></div>
122
- <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
123
- alt="Profile"
124
- class="relative w-full h-full rounded-full object-cover border-4 border-white shadow-lg">
125
- </div>
126
- </div>
127
- <div class="md:w-2/3 md:pl-12">
128
- <h3 class="text-2xl font-semibold mb-4">Who am I?</h3>
129
- <p class="text-gray-600 mb-6">
130
- I'm a passionate web developer with over 5 years of experience creating digital experiences.
131
- My journey in tech started when I was just 15 years old, and I've been in love with coding ever since.
132
- </p>
133
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
134
- <div class="flex items-start">
135
- <div class="bg-blue-100 p-3 rounded-full mr-4">
136
- <i class="fas fa-code text-blue-600"></i>
137
- </div>
138
- <div>
139
- <h4 class="font-medium">Web Development</h4>
140
- <p class="text-gray-500 text-sm">HTML, CSS, JavaScript, React, Node.js</p>
141
- </div>
142
- </div>
143
- <div class="flex items-start">
144
- <div class="bg-purple-100 p-3 rounded-full mr-4">
145
- <i class="fas fa-paint-brush text-purple-600"></i>
146
- </div>
147
- <div>
148
- <h4 class="font-medium">UI/UX Design</h4>
149
- <p class="text-gray-500 text-sm">Figma, Adobe XD, User Research</p>
150
- </div>
151
- </div>
152
- <div class="flex items-start">
153
- <div class="bg-green-100 p-3 rounded-full mr-4">
154
- <i class="fas fa-mobile-alt text-green-600"></i>
155
- </div>
156
- <div>
157
- <h4 class="font-medium">Mobile Apps</h4>
158
- <p class="text-gray-500 text-sm">React Native, Flutter</p>
159
- </div>
160
- </div>
161
- <div class="flex items-start">
162
- <div class="bg-yellow-100 p-3 rounded-full mr-4">
163
- <i class="fas fa-server text-yellow-600"></i>
164
- </div>
165
- <div>
166
- <h4 class="font-medium">Backend</h4>
167
- <p class="text-gray-500 text-sm">Node.js, Express, MongoDB</p>
168
- </div>
169
- </div>
170
- </div>
171
- <button class="border border-blue-500 text-blue-500 px-6 py-2 rounded-full font-medium hover:bg-blue-50 transition">
172
- Download CV
173
- </button>
174
  </div>
 
 
175
  </div>
176
- </div>
177
- </section>
178
-
179
- <!-- Skills Section -->
180
- <section id="skills" class="py-20 px-4 bg-gray-50">
181
- <div class="max-w-6xl mx-auto">
182
- <h2 class="text-3xl font-bold text-center mb-12 gradient-text">My Skills</h2>
183
- <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
184
- <!-- Skill cards -->
185
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
186
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
187
- <i class="fab fa-html5 text-blue-600 text-3xl"></i>
188
- </div>
189
- <h3 class="text-center font-semibold mb-2">HTML5</h3>
190
- <div class="w-full bg-gray-200 rounded-full h-2.5">
191
- <div class="bg-blue-600 h-2.5 rounded-full" style="width: 95%"></div>
192
- </div>
193
  </div>
194
 
195
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
196
- <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto">
197
- <i class="fab fa-css3-alt text-purple-600 text-3xl"></i>
198
- </div>
199
- <h3 class="text-center font-semibold mb-2">CSS3</h3>
200
- <div class="w-full bg-gray-200 rounded-full h-2.5">
201
- <div class="bg-purple-600 h-2.5 rounded-full" style="width: 90%"></div>
202
- </div>
203
  </div>
204
 
205
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
206
- <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4 mx-auto">
207
- <i class="fab fa-js text-yellow-600 text-3xl"></i>
208
- </div>
209
- <h3 class="text-center font-semibold mb-2">JavaScript</h3>
210
- <div class="w-full bg-gray-200 rounded-full h-2.5">
211
- <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 85%"></div>
212
- </div>
213
  </div>
214
 
215
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
216
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
217
- <i class="fab fa-react text-blue-400 text-3xl"></i>
218
- </div>
219
- <h3 class="text-center font-semibold mb-2">React</h3>
220
- <div class="w-full bg-gray-200 rounded-full h-2.5">
221
- <div class="bg-blue-400 h-2.5 rounded-full" style="width: 80%"></div>
 
222
  </div>
 
223
  </div>
224
-
225
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
226
- <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto">
227
- <i class="fab fa-node-js text-green-600 text-3xl"></i>
228
- </div>
229
- <h3 class="text-center font-semibold mb-2">Node.js</h3>
230
- <div class="w-full bg-gray-200 rounded-full h-2.5">
231
- <div class="bg-green-600 h-2.5 rounded-full" style="width: 75%"></div>
232
- </div>
 
 
233
  </div>
234
 
235
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
236
- <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-4 mx-auto">
237
- <i class="fas fa-database text-pink-600 text-3xl"></i>
 
 
 
 
 
238
  </div>
239
- <h3 class="text-center font-semibold mb-2">MongoDB</h3>
240
- <div class="w-full bg-gray-200 rounded-full h-2.5">
241
- <div class="bg-pink-600 h-2.5 rounded-full" style="width: 70%"></div>
 
 
 
242
  </div>
243
- </div>
244
-
245
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
246
- <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 mx-auto">
247
- <i class="fab fa-git-alt text-red-600 text-3xl"></i>
 
248
  </div>
249
- <h3 class="text-center font-semibold mb-2">Git</h3>
250
- <div class="w-full bg-gray-200 rounded-full h-2.5">
251
- <div class="bg-red-600 h-2.5 rounded-full" style="width: 85%"></div>
 
 
 
252
  </div>
253
- </div>
254
-
255
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
256
- <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
257
- <i class="fas fa-mobile-alt text-indigo-600 text-3xl"></i>
 
 
 
 
 
 
 
 
258
  </div>
259
- <h3 class="text-center font-semibold mb-2">React Native</h3>
260
- <div class="w-full bg-gray-200 rounded-full h-2.5">
261
- <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 65%"></div>
 
 
 
262
  </div>
263
  </div>
264
  </div>
265
- </div>
266
- </section>
267
-
268
- <!-- Projects Section -->
269
- <section id="projects" class="py-20 px-4 bg-white">
270
- <div class="max-w-6xl mx-auto">
271
- <h2 class="text-3xl font-bold text-center mb-12 gradient-text">My Projects</h2>
272
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
273
- <!-- Project 1 -->
274
- <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition card-hover">
275
- <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
276
- <i class="fas fa-laptop-code text-white text-6xl"></i>
277
  </div>
278
- <div class="p-6">
279
- <h3 class="text-xl font-semibold mb-2">E-commerce Platform</h3>
280
- <p class="text-gray-600 mb-4">A full-stack e-commerce solution with React, Node.js, and MongoDB.</p>
281
- <div class="flex flex-wrap gap-2 mb-4">
282
- <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React</span>
283
- <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Node.js</span>
284
- <span class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">MongoDB</span>
285
- </div>
286
- <div class="flex space-x-3">
287
- <a href="#" class="text-blue-500 hover:text-blue-700">
288
- <i class="fas fa-external-link-alt"></i> Live Demo
289
- </a>
290
- <a href="#" class="text-gray-500 hover:text-gray-700">
291
- <i class="fab fa-github"></i> Code
292
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
293
  </div>
294
  </div>
295
- </div>
296
-
297
- <!-- Project 2 -->
298
- <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition card-hover">
299
- <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
300
- <i class="fas fa-mobile-alt text-white text-6xl"></i>
301
- </div>
302
- <div class="p-6">
303
- <h3 class="text-xl font-semibold mb-2">Fitness Tracker App</h3>
304
- <p class="text-gray-600 mb-4">A mobile application to track workouts and nutrition using React Native.</p>
305
- <div class="flex flex-wrap gap-2 mb-4">
306
- <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React Native</span>
307
- <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">Firebase</span>
308
- <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Expo</span>
309
  </div>
310
- <div class="flex space-x-3">
311
- <a href="#" class="text-blue-500 hover:text-blue-700">
312
- <i class="fas fa-external-link-alt"></i> Live Demo
313
- </a>
314
- <a href="#" class="text-gray-500 hover:text-gray-700">
315
- <i class="fab fa-github"></i> Code
316
- </a>
317
  </div>
318
  </div>
319
  </div>
320
 
321
- <!-- Project 3 -->
322
- <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition card-hover">
323
- <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center">
324
- <i class="fas fa-chart-line text-white text-6xl"></i>
 
 
325
  </div>
326
- <div class="p-6">
327
- <h3 class="text-xl font-semibold mb-2">Data Visualization Dashboard</h3>
328
- <p class="text-gray-600 mb-4">Interactive dashboard for analyzing business metrics with D3.js.</p>
329
- <div class="flex flex-wrap gap-2 mb-4">
330
- <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">D3.js</span>
331
- <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Express</span>
332
- <span class="bg-orange-100 text-orange-800 text-xs px-3 py-1 rounded-full">Chart.js</span>
333
- </div>
334
- <div class="flex space-x-3">
335
- <a href="#" class="text-blue-500 hover:text-blue-700">
336
- <i class="fas fa-external-link-alt"></i> Live Demo
337
- </a>
338
- <a href="#" class="text-gray-500 hover:text-gray-700">
339
- <i class="fab fa-github"></i> Code
340
- </a>
341
  </div>
342
- </div>
343
- </div>
344
- </div>
345
- <div class="text-center mt-12">
346
- <button class="border border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition">
347
- View All Projects
348
- </button>
349
- </div>
350
- </div>
351
- </section>
352
-
353
- <!-- Contact Section -->
354
- <section id="contact" class="py-20 px-4 bg-gray-50">
355
- <div class="max-w-6xl mx-auto">
356
- <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Get In Touch</h2>
357
- <div class="flex flex-col md:flex-row">
358
- <div class="md:w-1/2 mb-10 md:mb-0">
359
- <h3 class="text-2xl font-semibold mb-4">Contact Information</h3>
360
- <p class="text-gray-600 mb-8">
361
- Feel free to reach out to me for any questions or opportunities. I'm always open to discussing new projects, creative ideas or opportunities to be part of your vision.
362
- </p>
363
- <div class="space-y-6">
364
- <div class="flex items-center">
365
- <div class="bg-blue-100 p-3 rounded-full mr-4">
366
- <i class="fas fa-envelope text-blue-600"></i>
367
  </div>
368
- <div>
369
- <h4 class="font-medium">Email</h4>
370
- <p class="text-gray-500">contact@example.com</p>
371
  </div>
372
  </div>
373
- <div class="flex items-center">
374
- <div class="bg-green-100 p-3 rounded-full mr-4">
375
- <i class="fas fa-phone-alt text-green-600"></i>
 
 
376
  </div>
377
- <div>
378
- <h4 class="font-medium">Phone</h4>
379
- <p class="text-gray-500">+1 (123) 456-7890</p>
380
  </div>
381
  </div>
382
- <div class="flex items-center">
383
- <div class="bg-purple-100 p-3 rounded-full mr-4">
384
- <i class="fas fa-map-marker-alt text-purple-600"></i>
 
 
385
  </div>
386
- <div>
387
- <h4 class="font-medium">Location</h4>
388
- <p class="text-gray-500">San Francisco, CA</p>
389
  </div>
390
  </div>
391
  </div>
392
- <div class="mt-8">
393
- <h4 class="font-medium mb-4">Follow Me</h4>
394
- <div class="flex space-x-4">
395
- <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 hover:text-blue-600 transition">
396
- <i class="fab fa-twitter"></i>
397
- </a>
398
- <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-600 hover:text-white transition">
399
- <i class="fab fa-linkedin-in"></i>
400
- </a>
401
- <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-gray-800 hover:text-white transition">
402
- <i class="fab fa-github"></i>
403
- </a>
404
- <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-pink-600 hover:text-white transition">
405
- <i class="fab fa-dribbble"></i>
406
- </a>
407
- </div>
408
  </div>
409
  </div>
410
- <div class="md:w-1/2 md:pl-12">
411
- <form class="bg-white p-8 rounded-xl shadow-sm">
412
- <div class="mb-6">
413
- <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
414
- <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
415
- </div>
416
- <div class="mb-6">
417
- <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
418
- <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
419
- </div>
420
- <div class="mb-6">
421
- <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
422
- <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
423
- </div>
424
- <div class="mb-6">
425
- <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
426
- <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
427
- </div>
428
- <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition shadow-lg">
429
- Send Message
430
- </button>
431
- </form>
432
- </div>
433
  </div>
434
  </div>
435
- </section>
436
-
437
  <!-- Footer -->
438
- <footer class="bg-gray-800 text-white py-12 px-4">
439
- <div class="max-w-6xl mx-auto">
440
- <div class="flex flex-col md:flex-row justify-between items-center">
441
- <div class="mb-6 md:mb-0">
442
- <span class="text-xl font-bold gradient-text">MyPortfolio</span>
443
- <p class="text-gray-400 mt-2">Creating digital experiences that matter.</p>
444
- </div>
445
- <div class="flex space-x-6">
446
- <a href="#" class="text-gray-400 hover:text-white transition">
447
- <i class="fab fa-twitter"></i>
448
- </a>
449
- <a href="#" class="text-gray-400 hover:text-white transition">
450
- <i class="fab fa-linkedin-in"></i>
451
- </a>
452
- <a href="#" class="text-gray-400 hover:text-white transition">
453
- <i class="fab fa-github"></i>
454
- </a>
455
- <a href="#" class="text-gray-400 hover:text-white transition">
456
- <i class="fab fa-codepen"></i>
457
- </a>
458
- </div>
459
- </div>
460
- <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
461
- <p>&copy; 2023 MyPortfolio. All rights reserved.</p>
462
- </div>
463
  </div>
464
  </footer>
465
-
466
- <!-- Back to top button -->
467
- <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
468
- <i class="fas fa-arrow-up"></i>
469
- </button>
470
-
471
- <!-- JavaScript -->
472
  <script>
473
- // Mobile menu toggle
474
- const menuBtn = document.getElementById('menu-btn');
475
- const mobileMenu = document.getElementById('mobile-menu');
476
-
477
- menuBtn.addEventListener('click', () => {
478
- mobileMenu.classList.toggle('hidden');
479
- });
480
-
481
- // Smooth scrolling for navigation links
482
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
483
- anchor.addEventListener('click', function (e) {
484
- e.preventDefault();
485
-
486
- const targetId = this.getAttribute('href');
487
- const targetElement = document.querySelector(targetId);
488
-
489
- window.scrollTo({
490
- top: targetElement.offsetTop - 80,
491
- behavior: 'smooth'
492
- });
493
-
494
- // Close mobile menu if open
495
- mobileMenu.classList.add('hidden');
496
- });
497
- });
498
-
499
- // Back to top button
500
- const backToTopBtn = document.getElementById('back-to-top');
501
-
502
- window.addEventListener('scroll', () => {
503
- if (window.pageYOffset > 300) {
504
- backToTopBtn.classList.remove('opacity-0', 'invisible');
505
- backToTopBtn.classList.add('opacity-100', 'visible');
506
- } else {
507
- backToTopBtn.classList.remove('opacity-100', 'visible');
508
- backToTopBtn.classList.add('opacity-0', 'invisible');
509
- }
510
- });
511
-
512
- backToTopBtn.addEventListener('click', () => {
513
- window.scrollTo({
514
- top: 0,
515
- behavior: 'smooth'
516
- });
517
- });
518
-
519
- // CTA button animation
520
- const ctaBtn = document.getElementById('cta-btn');
521
-
522
- ctaBtn.addEventListener('mouseenter', () => {
523
- ctaBtn.classList.add('animate-pulse');
524
- });
525
-
526
- ctaBtn.addEventListener('mouseleave', () => {
527
- ctaBtn.classList.remove('animate-pulse');
528
  });
529
 
530
- // Form submission
531
- const contactForm = document.querySelector('form');
532
-
533
- contactForm.addEventListener('submit', (e) => {
534
- e.preventDefault();
535
 
536
- // Get form values
537
- const name = document.getElementById('name').value;
538
- const email = document.getElementById('email').value;
539
- const subject = document.getElementById('subject').value;
540
- const message = document.getElementById('message').value;
541
 
542
- // Here you would typically send the data to a server
543
- console.log({ name, email, subject, message });
544
 
545
- // Show success message
546
- alert('Thank you for your message! I will get back to you soon.');
 
 
547
 
548
- // Reset form
549
- contactForm.reset();
550
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
551
  </script>
552
  <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>
553
  </html>
 
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;
17
+ }
18
+
19
+ .glow {
20
+ text-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41;
21
+ }
22
+
23
+ .red-glow {
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: 2px;
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 {
56
+ position: absolute;
57
+ top: 0;
58
+ left: 0;
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;
66
+ animation: scanline 8s linear infinite;
67
  }
68
 
69
+ @keyframes scanline {
70
+ 0% { background-position: 0 0; }
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
  </style>
109
  </head>
110
+ <body class="relative">
111
+ <div class="matrix-bg"></div>
112
+ <div class="scanline"></div>
113
+
114
+ <!-- Header -->
115
+ <header class="border-b border-green-500 border-opacity-30 py-4 px-6 flex justify-between items-center">
116
+ <div class="flex items-center">
117
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2 pulse"></div>
118
+ <h1 class="text-xl glow">XKEYSCORE v4.2.7</h1>
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
+ <div class="text-sm">
121
+ <span class="mr-4">[SECURITY CLEARANCE: TOP SECRET]</span>
122
+ <span class="text-red-400 red-glow">[CONNECTION ENCRYPTED]</span>
 
 
 
123
  </div>
124
+ <div class="text-xs">
125
+ <span class="mr-2">USER: OPERATOR_████</span>
126
+ <span>SESSION: {new Date().toISOString()}</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
127
  </div>
128
+ </header>
129
+
130
+ <main class="container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6 relative">
131
+ <!-- Target Profile Section -->
132
+ <div class="lg:col-span-1 terminal-border p-4 relative overflow-hidden">
133
+ <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
134
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
135
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
136
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
137
+ </div>
138
+
139
+ <h2 class="text-lg mb-4 mt-6 glow">TARGET PROFILE</h2>
140
+
141
+ <div class="flex flex-col items-center mb-6">
142
+ <div class="w-32 h-32 rounded-full overflow-hidden mb-4 profile-shadow">
143
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=128&q=80"
144
+ alt="Target"
145
+ class="w-full h-full object-cover grayscale contrast-125">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  </div>
147
+ <h3 class="text-xl glow">JASON ███████</h3>
148
+ <p class="text-xs text-green-300">ALIAS: "NEON_SHADOW"</p>
149
  </div>
150
+
151
+ <div class="grid grid-cols-1 gap-4">
152
+ <div>
153
+ <h4 class="text-sm text-green-300 mb-1">PERSONAL DETAILS</h4>
154
+ <p class="text-xs">DOB: 1989-04-15</p>
155
+ <p class="text-xs">POB: SAN FRANCISCO, CA</p>
156
+ <p class="text-xs">SSN: ███-██-████</p>
 
 
 
 
 
 
 
 
 
 
157
  </div>
158
 
159
+ <div>
160
+ <h4 class="text-sm text-green-300 mb-1">KNOWN ADDRESSES</h4>
161
+ <p class="text-xs">PRIMARY: 1815 █████ ST, APT ██, SF, CA</p>
162
+ <p class="text-xs">SECONDARY: 890 █████ AVE, PORTLAND, OR</p>
 
 
 
 
163
  </div>
164
 
165
+ <div>
166
+ <h4 class="text-sm text-green-300 mb-1">FAMILY CONNECTIONS</h4>
167
+ <p class="text-xs">SPOUSE: EMMA ███████ (b. 1991)</p>
168
+ <p class="text-xs">SIBLING: MICHAEL ███████ (b. 1986)</p>
 
 
 
 
169
  </div>
170
 
171
+ <div>
172
+ <h4 class="text-sm text-green-300 mb-1">DIGITAL FOOTPRINT</h4>
173
+ <div class="flex space-x-4 mt-2">
174
+ <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-twitter"></i></a>
175
+ <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-facebook"></i></a>
176
+ <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-instagram"></i></a>
177
+ <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-linkedin"></i></a>
178
+ <a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-github"></i></a>
179
  </div>
180
+ <p class="text-xs mt-2">ONLINE HANDLES: @neonshadow, @jasonx89</p>
181
  </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Main Surveillance Section -->
186
+ <div class="lg:col-span-2 grid grid-cols-1 gap-6">
187
+ <!-- Activity Log -->
188
+ <div class="terminal-border p-4 relative">
189
+ <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
190
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
191
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
192
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
193
  </div>
194
 
195
+ <h2 class="text-lg mb-4 mt-6 glow">ACTIVITY LOG</h2>
196
+
197
+ <div class="overflow-y-auto max-h-64">
198
+ <div class="grid grid-cols-12 gap-2 text-xs mb-2 border-b border-green-500 border-opacity-30 pb-1">
199
+ <div class="col-span-2">TIMESTAMP</div>
200
+ <div class="col-span-3">LOCATION</div>
201
+ <div class="col-span-4">ACTIVITY</div>
202
+ <div class="col-span-3">DEVICE</div>
203
  </div>
204
+
205
+ <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
206
+ <div class="col-span-2 text-green-300">2023-07-15 14:32</div>
207
+ <div class="col-span-3">CAFE █████ (SF)</div>
208
+ <div class="col-span-4">Accessed ███████.onion</div>
209
+ <div class="col-span-3">iPhone 13 Pro</div>
210
  </div>
211
+
212
+ <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
213
+ <div class="col-span-2 text-green-300">2023-07-15 12:18</div>
214
+ <div class="col-span-3">HOME (WIFI)</div>
215
+ <div class="col-span-4">Sent encrypted email to ██████@protonmail.com</div>
216
+ <div class="col-span-3">MacBook Pro</div>
217
  </div>
218
+
219
+ <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
220
+ <div class="col-span-2 text-green-300">2023-07-15 09:45</div>
221
+ <div class="col-span-3">COWORKING ████</div>
222
+ <div class="col-span-4">Video call with 3 participants (TOR)</div>
223
+ <div class="col-span-3">Linux Desktop</div>
224
  </div>
225
+
226
+ <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
227
+ <div class="col-span-2 text-green-300">2023-07-14 22:15</div>
228
+ <div class="col-span-3">HOME (WIFI)</div>
229
+ <div class="col-span-4">Posted on Twitter: "███████████████"</div>
230
+ <div class="col-span-3">iPhone 13 Pro</div>
231
+ </div>
232
+
233
+ <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
234
+ <div class="col-span-2 text-green-300">2023-07-14 19:30</div>
235
+ <div class="col-span-3">GYM ███████</div>
236
+ <div class="col-span-4">Received call from ███-███-████</div>
237
+ <div class="col-span-3">iPhone 13 Pro</div>
238
  </div>
239
+
240
+ <div class="grid grid-cols-12 gap-2 text-xs py-1 hover:bg-black hover:bg-opacity-30">
241
+ <div class="col-span-2 text-green-300">2023-07-14 16:42</div>
242
+ <div class="col-span-3">COFFEE █████</div>
243
+ <div class="col-span-4">Accessed GitHub: pushed to ███████ repo</div>
244
+ <div class="col-span-3">MacBook Pro</div>
245
  </div>
246
  </div>
247
  </div>
248
+
249
+ <!-- Data Visualization -->
250
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
251
+ <!-- Network Graph -->
252
+ <div class="terminal-border p-4 relative">
253
+ <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
254
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
255
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
256
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
 
 
 
257
  </div>
258
+
259
+ <h2 class="text-lg mb-4 mt-6 glow">SOCIAL NETWORK</h2>
260
+
261
+ <div class="flex justify-center items-center h-48">
262
+ <div class="relative w-full h-full">
263
+ <!-- Center node (target) -->
264
+ <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">
265
+ T
266
+ </div>
267
+
268
+ <!-- Connection lines -->
269
+ <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(30deg);"></div>
270
+ <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(90deg);"></div>
271
+ <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(150deg);"></div>
272
+ <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(210deg);"></div>
273
+ <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(270deg);"></div>
274
+ <div class="connection-line" style="width: 60px; top: 50%; left: 50%; transform: rotate(330deg);"></div>
275
+
276
+ <!-- Connected nodes -->
277
+ <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">
278
+ 1
279
+ </div>
280
+ <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">
281
+ 2
282
+ </div>
283
+ <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">
284
+ 3
285
+ </div>
286
+ <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">
287
+ 4
288
+ </div>
289
+ <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">
290
+ 5
291
+ </div>
292
+ <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">
293
+ 6
294
+ </div>
295
  </div>
296
  </div>
297
+
298
+ <div class="grid grid-cols-3 gap-2 text-xs mt-4">
299
+ <div class="flex items-center">
300
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
301
+ <span>TARGET</span>
302
+ </div>
303
+ <div class="flex items-center">
304
+ <div class="w-2 h-2 rounded-full bg-blue-500 mr-1"></div>
305
+ <span>CONTACTS</span>
 
 
 
 
 
306
  </div>
307
+ <div class="flex items-center">
308
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
309
+ <span>ALERTS</span>
 
 
 
 
310
  </div>
311
  </div>
312
  </div>
313
 
314
+ <!-- Threat Assessment -->
315
+ <div class="terminal-border p-4 relative">
316
+ <div class="absolute top-0 left-0 w-full h-4 bg-black bg-opacity-70 flex items-center px-2">
317
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
318
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
319
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
320
  </div>
321
+
322
+ <h2 class="text-lg mb-4 mt-6 glow">THREAT ASSESSMENT</h2>
323
+
324
+ <div class="space-y-4">
325
+ <div>
326
+ <div class="flex justify-between text-xs mb-1">
327
+ <span>ENCRYPTION USAGE</span>
328
+ <span>87%</span>
329
+ </div>
330
+ <div class="w-full bg-gray-800 rounded-full h-2">
331
+ <div class="bg-red-500 h-2 rounded-full" style="width: 87%"></div>
332
+ </div>
 
 
 
333
  </div>
334
+
335
+ <div>
336
+ <div class="flex justify-between text-xs mb-1">
337
+ <span>DARK WEB ACTIVITY</span>
338
+ <span>64%</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  </div>
340
+ <div class="w-full bg-gray-800 rounded-full h-2">
341
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 64%"></div>
 
342
  </div>
343
  </div>
344
+
345
+ <div>
346
+ <div class="flex justify-between text-xs mb-1">
347
+ <span>SUSPICIOUS CONTACTS</span>
348
+ <span>42%</span>
349
  </div>
350
+ <div class="w-full bg-gray-800 rounded-full h-2">
351
+ <div class="bg-green-500 h-2 rounded-full" style="width: 42%"></div>
 
352
  </div>
353
  </div>
354
+
355
+ <div>
356
+ <div class="flex justify-between text-xs mb-1">
357
+ <span>OVERALL THREAT LEVEL</span>
358
+ <span class="text-red-400 red-glow">HIGH</span>
359
  </div>
360
+ <div class="w-full bg-gray-800 rounded-full h-2">
361
+ <div class="bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 h-2 rounded-full" style="width: 78%"></div>
 
362
  </div>
363
  </div>
364
  </div>
365
+
366
+ <div class="mt-4 p-2 alert-border">
367
+ <h3 class="text-sm text-red-400 red-glow mb-1">SECURITY ALERT</h3>
368
+ <p class="text-xs">Target has accessed TOR network 3 times in last 24 hours. Possible coordination with known entities of interest.</p>
 
 
 
 
 
 
 
 
 
 
 
 
369
  </div>
370
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
371
  </div>
372
  </div>
373
+ </main>
374
+
375
  <!-- Footer -->
376
+ <footer class="border-t border-green-500 border-opacity-30 py-4 px-6 text-xs text-center">
377
+ <div class="flex justify-center space-x-6 mb-2">
378
+ <span>SYSTEM STATUS: <span class="text-green-400">OPERATIONAL</span></span>
379
+ <span>DATA SOURCES: <span class="text-green-400">12 ACTIVE</span></span>
380
+ <span>LAST UPDATE: <span class="text-green-400">{new Date().toISOString()}</span></span>
381
+ </div>
382
+ <div>
383
+ <span class="text-gray-500">XKEYSCORE SURVEILLANCE SYSTEM - TOP SECRET//COMINT//NOFORN</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
384
  </div>
385
  </footer>
386
+
387
+ <!-- Connection lines animation -->
 
 
 
 
 
388
  <script>
389
+ // Animate connection lines
390
+ const connectionLines = document.querySelectorAll('.connection-line');
391
+ connectionLines.forEach(line => {
392
+ const duration = Math.random() * 2000 + 1000;
393
+ setInterval(() => {
394
+ line.style.opacity = Math.random() * 0.5 + 0.5;
395
+ }, duration);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
396
  });
397
 
398
+ // Random data line generation
399
+ function createDataLine() {
400
+ const line = document.createElement('div');
401
+ line.className = 'data-line';
 
402
 
403
+ const startX = Math.random() * window.innerWidth;
404
+ const startY = Math.random() * window.innerHeight;
405
+ const endX = Math.random() * window.innerWidth;
406
+ const endY = Math.random() * window.innerHeight;
 
407
 
408
+ const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
409
+ const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
410
 
411
+ line.style.width = `${length}px`;
412
+ line.style.left = `${startX}px`;
413
+ line.style.top = `${startY}px`;
414
+ line.style.transform = `rotate(${angle}deg)`;
415
 
416
+ document.body.appendChild(line);
417
+
418
+ setTimeout(() => {
419
+ line.remove();
420
+ }, 2000);
421
+ }
422
+
423
+ setInterval(createDataLine, 100);
424
+
425
+ // Terminal flicker effect
426
+ const terminals = document.querySelectorAll('.terminal-border');
427
+ setInterval(() => {
428
+ terminals.forEach(term => {
429
+ term.style.boxShadow = `0 0 ${Math.random() * 5 + 5}px #00ff41, inset 0 0 ${Math.random() * 5 + 5}px #00ff41`;
430
+ });
431
+ }, 100);
432
  </script>
433
  <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>
434
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- intretuce your sef
 
 
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."