Hugging Face's logo

Spaces:
tomiinek
/
apollo-defend
Running

App Files Community
tomiinek commited on
Commit
775e079
·
verified ·
1 Parent(s): 2ce0df2

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +475 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Apollo Defend
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: apollo-defend
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,475 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Apollo Defend | Cybersecurity Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Rajdhani', sans-serif;
14
+ background-color: #0a0a1a;
15
+ color: #e0e0ff;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ h1, h2, h3, h4 {
20
+ font-family: 'Orbitron', sans-serif;
21
+ }
22
+
23
+ .neon-text {
24
+ text-shadow: 0 0 5px #00f7ff, 0 0 10px #00a2ff, 0 0 15px #0062ff;
25
+ }
26
+
27
+ .neon-border {
28
+ box-shadow: 0 0 10px #00f7ff, 0 0 20px #00a2ff, 0 0 30px #0062ff;
29
+ border: 1px solid #00f7ff;
30
+ }
31
+
32
+ .wave-bg {
33
+ position: fixed;
34
+ bottom: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ z-index: -1;
39
+ opacity: 0.15;
40
+ }
41
+
42
+ .wave {
43
+ position: absolute;
44
+ bottom: 0;
45
+ left: 0;
46
+ width: 200%;
47
+ height: 100%;
48
+ background-repeat: repeat no-repeat;
49
+ background-position: 0 bottom;
50
+ transform-origin: center bottom;
51
+ animation: wave 15s linear infinite;
52
+ }
53
+
54
+ .wave-top {
55
+ background-size: 50% 100px;
56
+ background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%2300f7ff" opacity=".25"/></svg>');
57
+ }
58
+
59
+ .wave-middle {
60
+ background-size: 50% 120px;
61
+ background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23ff00e6" opacity=".25"/></svg>');
62
+ animation-delay: -5s;
63
+ }
64
+
65
+ .wave-bottom {
66
+ background-size: 50% 100px;
67
+ background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23f700ff" opacity=".25"/></svg>');
68
+ animation-delay: -10s;
69
+ }
70
+
71
+ @keyframes wave {
72
+ 0% { transform: translateX(0) translateZ(0) scaleY(1); }
73
+ 50% { transform: translateX(-25%) translateZ(0) scaleY(0.8); }
74
+ 100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
75
+ }
76
+
77
+ .glow-box {
78
+ transition: all 0.3s ease;
79
+ }
80
+
81
+ .glow-box:hover {
82
+ transform: translateY(-5px);
83
+ box-shadow: 0 10px 20px rgba(0, 247, 255, 0.3), 0 0 15px rgba(0, 247, 255, 0.5);
84
+ }
85
+
86
+ .pulse {
87
+ animation: pulse 2s infinite;
88
+ }
89
+
90
+ @keyframes pulse {
91
+ 0% { box-shadow: 0 0 0 0 rgba(0, 247, 255, 0.7); }
92
+ 70% { box-shadow: 0 0 0 10px rgba(0, 247, 255, 0); }
93
+ 100% { box-shadow: 0 0 0 0 rgba(0, 247, 255, 0); }
94
+ }
95
+
96
+ .terminal {
97
+ background: rgba(10, 10, 30, 0.8);
98
+ border: 1px solid #00f7ff;
99
+ border-radius: 5px;
100
+ font-family: 'Courier New', monospace;
101
+ color: #00ffaa;
102
+ text-shadow: 0 0 5px #00ffaa;
103
+ }
104
+
105
+ .terminal-header {
106
+ background: rgba(0, 10, 20, 0.8);
107
+ border-bottom: 1px solid #00f7ff;
108
+ padding: 5px 10px;
109
+ }
110
+
111
+ .terminal-body {
112
+ padding: 15px;
113
+ height: 200px;
114
+ overflow-y: auto;
115
+ }
116
+
117
+ .blink {
118
+ animation: blink 1s step-end infinite;
119
+ }
120
+
121
+ @keyframes blink {
122
+ from, to { opacity: 1; }
123
+ 50% { opacity: 0; }
124
+ }
125
+ </style>
126
+ </head>
127
+ <body>
128
+ <!-- Wave Background -->
129
+ <div class="wave-bg">
130
+ <div class="wave wave-top"></div>
131
+ <div class="wave wave-middle"></div>
132
+ <div class="wave wave-bottom"></div>
133
+ </div>
134
+
135
+ <!-- Navigation -->
136
+ <nav class="fixed w-full bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg z-50">
137
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
138
+ <div class="flex items-center justify-between h-16">
139
+ <div class="flex items-center">
140
+ <div class="flex-shrink-0">
141
+ <div class="flex items-center">
142
+ <i class="fas fa-shield-alt text-2xl text-blue-400 mr-2"></i>
143
+ <span class="text-xl font-bold neon-text">APOLLO DEFEND</span>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ <div class="hidden md:block">
148
+ <div class="ml-10 flex items-baseline space-x-4">
149
+ <a href="#home" class="px-3 py-2 rounded-md text-sm font-medium text-blue-300 hover:text-white hover:bg-blue-900 hover:bg-opacity-50 transition duration-300">Home</a>
150
+ <a href="#features" class="px-3 py-2 rounded-md text-sm font-medium text-blue-300 hover:text-white hover:bg-blue-900 hover:bg-opacity-50 transition duration-300">Features</a>
151
+ <a href="#technology" class="px-3 py-2 rounded-md text-sm font-medium text-blue-300 hover:text-white hover:bg-blue-900 hover:bg-opacity-50 transition duration-300">Technology</a>
152
+ <a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium text-blue-300 hover:text-white hover:bg-blue-900 hover:bg-opacity-50 transition duration-300">Contact</a>
153
+ </div>
154
+ </div>
155
+ <div class="md:hidden">
156
+ <button class="text-blue-300 hover:text-white focus:outline-none">
157
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
158
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
159
+ </svg>
160
+ </button>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </nav>
165
+
166
+ <!-- Hero Section -->
167
+ <section id="home" class="min-h-screen flex items-center justify-center pt-16">
168
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
169
+ <h1 class="text-5xl md:text-7xl font-extrabold mb-6 neon-text">APOLLO DEFEND</h1>
170
+ <h2 class="text-2xl md:text-3xl font-semibold mb-8 text-blue-300">Next-Generation Cybersecurity Solutions</h2>
171
+ <p class="text-lg md:text-xl max-w-3xl mx-auto mb-10 text-blue-100">
172
+ Harnessing quantum-resistant encryption and AI-driven threat detection to protect your digital assets in an increasingly hostile cyber landscape.
173
+ </p>
174
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
175
+ <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full transition duration-300 transform hover:scale-105 neon-border">
176
+ Request Demo
177
+ </button>
178
+ <button class="px-8 py-3 bg-transparent border-2 border-blue-400 hover:bg-blue-900 hover:bg-opacity-30 text-blue-300 font-bold rounded-full transition duration-300 transform hover:scale-105">
179
+ Learn More
180
+ </button>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- Features Section -->
186
+ <section id="features" class="py-20 bg-black bg-opacity-50">
187
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
188
+ <div class="text-center mb-16">
189
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text">OUR DEFENSE SYSTEMS</h2>
190
+ <div class="w-24 h-1 bg-blue-400 mx-auto mb-6"></div>
191
+ <p class="text-xl text-blue-100 max-w-3xl mx-auto">
192
+ Apollo Defend provides comprehensive protection against evolving cyber threats with cutting-edge technology.
193
+ </p>
194
+ </div>
195
+
196
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
197
+ <!-- Feature 1 -->
198
+ <div class="glow-box bg-gray-900 bg-opacity-70 p-8 rounded-xl border border-gray-800 hover:border-blue-400 transition duration-300">
199
+ <div class="text-blue-400 text-4xl mb-4">
200
+ <i class="fas fa-brain"></i>
201
+ </div>
202
+ <h3 class="text-xl font-bold mb-3 text-white">AI Threat Detection</h3>
203
+ <p class="text-blue-100">
204
+ Our neural networks analyze behavior patterns to detect and neutralize zero-day threats before they can cause damage.
205
+ </p>
206
+ </div>
207
+
208
+ <!-- Feature 2 -->
209
+ <div class="glow-box bg-gray-900 bg-opacity-70 p-8 rounded-xl border border-gray-800 hover:border-purple-400 transition duration-300">
210
+ <div class="text-purple-400 text-4xl mb-4">
211
+ <i class="fas fa-lock"></i>
212
+ </div>
213
+ <h3 class="text-xl font-bold mb-3 text-white">Quantum Encryption</h3>
214
+ <p class="text-blue-100">
215
+ Post-quantum cryptographic algorithms ensure your data remains secure even against future quantum computing attacks.
216
+ </p>
217
+ </div>
218
+
219
+ <!-- Feature 3 -->
220
+ <div class="glow-box bg-gray-900 bg-opacity-70 p-8 rounded-xl border border-gray-800 hover:border-cyan-400 transition duration-300">
221
+ <div class="text-cyan-400 text-4xl mb-4">
222
+ <i class="fas fa-shield-virus"></i>
223
+ </div>
224
+ <h3 class="text-xl font-bold mb-3 text-white">Adaptive Firewall</h3>
225
+ <p class="text-blue-100">
226
+ Dynamically evolving firewall rules that learn from attack patterns to provide increasingly robust protection.
227
+ </p>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Technology Section -->
234
+ <section id="technology" class="py-20">
235
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
236
+ <div class="flex flex-col lg:flex-row items-center gap-12">
237
+ <div class="lg:w-1/2">
238
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text">TECHNOLOGY BEHIND THE SHIELD</h2>
239
+ <p class="text-lg text-blue-100 mb-8">
240
+ Apollo Defend combines multiple advanced technologies to create an impenetrable security ecosystem:
241
+ </p>
242
+ <ul class="space-y-4">
243
+ <li class="flex items-start">
244
+ <div class="flex-shrink-0 mt-1">
245
+ <div class="h-5 w-5 rounded-full bg-blue-500 pulse"></div>
246
+ </div>
247
+ <p class="ml-3 text-blue-100">
248
+ <span class="font-bold text-white">Neural Network Analysis:</span> Deep learning models trained on petabytes of attack data
249
+ </p>
250
+ </li>
251
+ <li class="flex items-start">
252
+ <div class="flex-shrink-0 mt-1">
253
+ <div class="h-5 w-5 rounded-full bg-purple-500 pulse"></div>
254
+ </div>
255
+ <p class="ml-3 text-blue-100">
256
+ <span class="font-bold text-white">Blockchain Verification:</span> Immutable logs of all security events
257
+ </p>
258
+ </li>
259
+ <li class="flex items-start">
260
+ <div class="flex-shrink-0 mt-1">
261
+ <div class="h-5 w-5 rounded-full bg-cyan-500 pulse"></div>
262
+ </div>
263
+ <p class="ml-3 text-blue-100">
264
+ <span class="font-bold text-white">Quantum Key Distribution:</span> Unhackable communication channels
265
+ </p>
266
+ </li>
267
+ </ul>
268
+ </div>
269
+ <div class="lg:w-1/2 mt-10 lg:mt-0">
270
+ <div class="terminal">
271
+ <div class="terminal-header flex items-center">
272
+ <div class="flex space-x-2 mr-4">
273
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
274
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
275
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
276
+ </div>
277
+ <div class="text-sm">apollo_defend_console</div>
278
+ </div>
279
+ <div class="terminal-body">
280
+ <div class="mb-2">> Initializing Apollo Defend v4.2.1</div>
281
+ <div class="mb-2 text-green-400">✓ Quantum encryption module loaded</div>
282
+ <div class="mb-2 text-green-400">✓ Neural threat detection active</div>
283
+ <div class="mb-2 text-green-400">✓ Adaptive firewall engaged</div>
284
+ <div class="mb-2">> Scanning network endpoints...</div>
285
+ <div class="mb-2 text-yellow-400">! Detected suspicious activity from 192.168.1.105</div>
286
+ <div class="mb-2 text-green-400">✓ Contained potential threat (Signature: APT-2023-4472)</div>
287
+ <div class="mb-2">> System status: <span class="text-green-400">SECURE</span></div>
288
+ <div class="mb-2">> Last updated: <span id="datetime" class="text-blue-300"></span></div>
289
+ <div>> <span class="blink">█</span></div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </section>
296
+
297
+ <!-- Stats Section -->
298
+ <section class="py-16 bg-black bg-opacity-70">
299
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
300
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
301
+ <div class="p-6">
302
+ <div class="text-4xl md:text-5xl font-bold text-blue-400 mb-2" id="stat1">0</div>
303
+ <div class="text-sm uppercase tracking-wider text-blue-200">Threats Neutralized</div>
304
+ </div>
305
+ <div class="p-6">
306
+ <div class="text-4xl md:text-5xl font-bold text-purple-400 mb-2" id="stat2">0</div>
307
+ <div class="text-sm uppercase tracking-wider text-blue-200">Zero-Day Detections</div>
308
+ </div>
309
+ <div class="p-6">
310
+ <div class="text-4xl md:text-5xl font-bold text-cyan-400 mb-2" id="stat3">0</div>
311
+ <div class="text-sm uppercase tracking-wider text-blue-200">Protected Systems</div>
312
+ </div>
313
+ <div class="p-6">
314
+ <div class="text-4xl md:text-5xl font-bold text-green-400 mb-2" id="stat4">0</div>
315
+ <div class="text-sm uppercase tracking-wider text-blue-200">Uptime %</div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </section>
320
+
321
+ <!-- Contact Section -->
322
+ <section id="contact" class="py-20">
323
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
324
+ <div class="text-center mb-16">
325
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 neon-text">JOIN THE DEFENSE NETWORK</h2>
326
+ <div class="w-24 h-1 bg-blue-400 mx-auto mb-6"></div>
327
+ <p class="text-xl text-blue-100 max-w-3xl mx-auto">
328
+ Ready to secure your digital assets with military-grade protection? Contact our team today.
329
+ </p>
330
+ </div>
331
+
332
+ <div class="max-w-3xl mx-auto bg-gray-900 bg-opacity-70 rounded-xl p-8 neon-border">
333
+ <form>
334
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
335
+ <div>
336
+ <label for="name" class="block text-sm font-medium text-blue-200 mb-1">Name</label>
337
+ <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
338
+ </div>
339
+ <div>
340
+ <label for="email" class="block text-sm font-medium text-blue-200 mb-1">Email</label>
341
+ <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
342
+ </div>
343
+ <div class="md:col-span-2">
344
+ <label for="company" class="block text-sm font-medium text-blue-200 mb-1">Company</label>
345
+ <input type="text" id="company" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
346
+ </div>
347
+ <div class="md:col-span-2">
348
+ <label for="message" class="block text-sm font-medium text-blue-200 mb-1">Message</label>
349
+ <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-white"></textarea>
350
+ </div>
351
+ </div>
352
+ <div class="mt-8">
353
+ <button type="submit" class="w-full px-6 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold rounded-lg transition duration-300 transform hover:scale-105">
354
+ SEND MESSAGE
355
+ </button>
356
+ </div>
357
+ </form>
358
+ </div>
359
+ </div>
360
+ </section>
361
+
362
+ <!-- Footer -->
363
+ <footer class="bg-black bg-opacity-90 py-12">
364
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
365
+ <div class="flex flex-col md:flex-row justify-between items-center">
366
+ <div class="flex items-center mb-6 md:mb-0">
367
+ <i class="fas fa-shield-alt text-2xl text-blue-400 mr-2"></i>
368
+ <span class="text-xl font-bold neon-text">APOLLO DEFEND</span>
369
+ </div>
370
+ <div class="flex space-x-6 mb-6 md:mb-0">
371
+ <a href="#" class="text-blue-300 hover:text-white transition duration-300">
372
+ <i class="fab fa-twitter text-xl"></i>
373
+ </a>
374
+ <a href="#" class="text-blue-300 hover:text-white transition duration-300">
375
+ <i class="fab fa-linkedin text-xl"></i>
376
+ </a>
377
+ <a href="#" class="text-blue-300 hover:text-white transition duration-300">
378
+ <i class="fab fa-github text-xl"></i>
379
+ </a>
380
+ </div>
381
+ <div class="text-sm text-blue-300">
382
+ &copy; 2023 Apollo Defend. All rights reserved.
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </footer>
387
+
388
+ <script>
389
+ // Animate stats counting up
390
+ function animateStats() {
391
+ const stat1 = document.getElementById('stat1');
392
+ const stat2 = document.getElementById('stat2');
393
+ const stat3 = document.getElementById('stat3');
394
+ const stat4 = document.getElementById('stat4');
395
+
396
+ const target1 = 12876;
397
+ const target2 = 342;
398
+ const target3 = 587;
399
+ const target4 = 99.99;
400
+
401
+ let count1 = 0;
402
+ let count2 = 0;
403
+ let count3 = 0;
404
+ let count4 = 0;
405
+
406
+ const interval = setInterval(() => {
407
+ count1 += Math.ceil(target1 / 50);
408
+ count2 += Math.ceil(target2 / 50);
409
+ count3 += Math.ceil(target3 / 50);
410
+ count4 += (target4 / 50);
411
+
412
+ if (count1 >= target1) count1 = target1;
413
+ if (count2 >= target2) count2 = target2;
414
+ if (count3 >= target3) count3 = target3;
415
+ if (count4 >= target4) count4 = target4;
416
+
417
+ stat1.textContent = count1.toLocaleString();
418
+ stat2.textContent = count2.toLocaleString();
419
+ stat3.textContent = count3.toLocaleString();
420
+ stat4.textContent = count4.toFixed(2);
421
+
422
+ if (count1 === target1 && count2 === target2 && count3 === target3 && count4 === target4) {
423
+ clearInterval(interval);
424
+ }
425
+ }, 20);
426
+ }
427
+
428
+ // Update terminal datetime
429
+ function updateDateTime() {
430
+ const now = new Date();
431
+ const datetimeElement = document.getElementById('datetime');
432
+ datetimeElement.textContent = now.toLocaleString();
433
+ }
434
+
435
+ // Initialize animations when page loads
436
+ window.addEventListener('load', () => {
437
+ // Start stats animation when stats section is in view
438
+ const observer = new IntersectionObserver((entries) => {
439
+ entries.forEach(entry => {
440
+ if (entry.isIntersecting) {
441
+ animateStats();
442
+ observer.unobserve(entry.target);
443
+ }
444
+ });
445
+ }, { threshold: 0.5 });
446
+
447
+ const statsSection = document.querySelector('.bg-black.bg-opacity-70');
448
+ if (statsSection) {
449
+ observer.observe(statsSection);
450
+ }
451
+
452
+ // Update terminal time
453
+ updateDateTime();
454
+ setInterval(updateDateTime, 1000);
455
+
456
+ // Smooth scrolling for navigation
457
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
458
+ anchor.addEventListener('click', function (e) {
459
+ e.preventDefault();
460
+
461
+ const targetId = this.getAttribute('href');
462
+ if (targetId === '#') return;
463
+
464
+ const targetElement = document.querySelector(targetId);
465
+ if (targetElement) {
466
+ targetElement.scrollIntoView({
467
+ behavior: 'smooth'
468
+ });
469
+ }
470
+ });
471
+ });
472
+ });
473
+ </script>
474
+ <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=tomiinek/apollo-defend" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
475
+ </html>