Hugging Face's logo

Spaces:
Freefall
/
wont-orbit
Running

App Files Community
Freefall commited on
Commit
bd11e17
·
verified ·
1 Parent(s): 6c14e95

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +428 -46
index.html CHANGED
@@ -30,6 +30,12 @@
30
  background: rgba(30, 41, 59, 0.5);
31
  backdrop-filter: blur(10px);
32
  border: 1px solid rgba(255, 255, 255, 0.1);
 
 
 
 
 
 
33
  }
34
 
35
  .pulse {
@@ -78,10 +84,39 @@
78
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
79
  to { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
80
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  </style>
82
  </head>
83
  <body class="min-h-screen gradient-bg">
84
  <div class="container mx-auto px-4 py-8">
 
 
 
85
  <!-- Header -->
86
  <header class="flex justify-between items-center mb-10">
87
  <div class="flex items-center space-x-3">
@@ -93,9 +128,9 @@
93
  </h1>
94
  </div>
95
  <div class="flex items-center space-x-4">
96
- <button class="relative p-2 rounded-full hover:bg-slate-700 transition">
97
  <i class="fas fa-bell text-slate-300"></i>
98
- <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
99
  </button>
100
  <div class="flex items-center space-x-2">
101
  <div class="w-10 h-10 rounded-full bg-slate-600 flex items-center justify-center">
@@ -120,23 +155,23 @@
120
  <div class="flex items-center justify-between">
121
  <span class="text-slate-300">Fuel Level</span>
122
  <div class="w-24 bg-slate-700 rounded-full h-2">
123
- <div class="bg-emerald-400 h-2 rounded-full" style="width: 85%"></div>
124
  </div>
125
  </div>
126
  <div class="flex items-center justify-between">
127
  <span class="text-slate-300">Oxygen Supply</span>
128
  <div class="w-24 bg-slate-700 rounded-full h-2">
129
- <div class="bg-blue-400 h-2 rounded-full" style="width: 72%"></div>
130
  </div>
131
  </div>
132
  <div class="flex items-center justify-between">
133
  <span class="text-slate-300">Power Output</span>
134
  <div class="w-24 bg-slate-700 rounded-full h-2">
135
- <div class="bg-purple-400 h-2 rounded-full" style="width: 93%"></div>
136
  </div>
137
  </div>
138
  </div>
139
- <button class="mt-6 w-full py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition flex items-center justify-center space-x-2">
140
  <i class="fas fa-play"></i>
141
  <span>Launch Sequence</span>
142
  </button>
@@ -149,7 +184,7 @@
149
  Recent Discoveries
150
  </h2>
151
  <div class="space-y-3">
152
- <div class="flex items-start space-x-3">
153
  <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
154
  <i class="fas fa-atom text-purple-400"></i>
155
  </div>
@@ -158,7 +193,7 @@
158
  <p class="text-sm text-slate-400">Located in Andromeda sector</p>
159
  </div>
160
  </div>
161
- <div class="flex items-start space-x-3">
162
  <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
163
  <i class="fas fa-meteor text-orange-400"></i>
164
  </div>
@@ -167,7 +202,7 @@
167
  <p class="text-sm text-slate-400">Rich in rare minerals</p>
168
  </div>
169
  </div>
170
- <div class="flex items-start space-x-3">
171
  <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
172
  <i class="fas fa-water text-blue-400"></i>
173
  </div>
@@ -190,8 +225,8 @@
190
  Current Orbit
191
  </h2>
192
  <div class="flex space-x-2">
193
- <button class="px-3 py-1 bg-slate-700 rounded-lg text-sm">Zoom In</button>
194
- <button class="px-3 py-1 bg-slate-700 rounded-lg text-sm">Zoom Out</button>
195
  </div>
196
  </div>
197
  <div class="flex flex-col items-center">
@@ -202,15 +237,15 @@
202
  <div class="w-full bg-slate-800 rounded-lg p-4">
203
  <div class="flex justify-between text-sm mb-2">
204
  <span>Orbital Velocity</span>
205
- <span class="font-mono">7.8 km/s</span>
206
  </div>
207
  <div class="flex justify-between text-sm mb-2">
208
  <span>Altitude</span>
209
- <span class="font-mono">402 km</span>
210
  </div>
211
  <div class="flex justify-between text-sm">
212
  <span>Inclination</span>
213
- <span class="font-mono">51.6°</span>
214
  </div>
215
  </div>
216
  </div>
@@ -227,28 +262,28 @@
227
  <div>
228
  <div class="flex justify-between text-sm mb-1">
229
  <span>External</span>
230
- <span>-120°C</span>
231
  </div>
232
  <div class="w-full bg-slate-800 rounded-full h-2">
233
- <div class="bg-blue-400 h-2 rounded-full" style="width: 15%"></div>
234
  </div>
235
  </div>
236
  <div>
237
  <div class="flex justify-between text-sm mb-1">
238
  <span>Internal</span>
239
- <span>22°C</span>
240
  </div>
241
  <div class="w-full bg-slate-800 rounded-full h-2">
242
- <div class="bg-green-400 h-2 rounded-full" style="width: 65%"></div>
243
  </div>
244
  </div>
245
  <div>
246
  <div class="flex justify-between text-sm mb-1">
247
  <span>Engine</span>
248
- <span>320°C</span>
249
  </div>
250
  <div class="w-full bg-slate-800 rounded-full h-2">
251
- <div class="bg-red-400 h-2 rounded-full" style="width: 80%"></div>
252
  </div>
253
  </div>
254
  </div>
@@ -262,19 +297,19 @@
262
  <div class="grid grid-cols-2 gap-4">
263
  <div class="bg-slate-800 p-3 rounded-lg">
264
  <div class="text-xs text-slate-400 mb-1">Latitude</div>
265
- <div class="font-mono">28.5° N</div>
266
  </div>
267
  <div class="bg-slate-800 p-3 rounded-lg">
268
  <div class="text-xs text-slate-400 mb-1">Longitude</div>
269
- <div class="font-mono">80.6° W</div>
270
  </div>
271
  <div class="bg-slate-800 p-3 rounded-lg">
272
  <div class="text-xs text-slate-400 mb-1">Speed</div>
273
- <div class="font-mono">7.66 km/s</div>
274
  </div>
275
  <div class="bg-slate-800 p-3 rounded-lg">
276
  <div class="text-xs text-slate-400 mb-1">Altitude</div>
277
- <div class="font-mono">402 km</div>
278
  </div>
279
  </div>
280
  </div>
@@ -292,19 +327,19 @@
292
  <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center">
293
  <i class="fas fa-satellite text-blue-300"></i>
294
  </div>
295
- <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full border-2 border-slate-800"></div>
296
  </div>
297
  <div>
298
  <h3 class="font-medium">Signal Strength</h3>
299
- <p class="text-sm text-slate-400">Connected to Deep Space Network</p>
300
  </div>
301
  </div>
302
  <div class="flex space-x-3">
303
- <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center space-x-2">
304
  <i class="fas fa-microphone"></i>
305
  <span>Transmit</span>
306
  </button>
307
- <button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg flex items-center space-x-2">
308
  <i class="fas fa-headphones"></i>
309
  <span>Receive</span>
310
  </button>
@@ -314,6 +349,23 @@
314
  </div>
315
  </main>
316
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
317
  <!-- Footer -->
318
  <footer class="mt-12 pt-6 border-t border-slate-800 text-center text-slate-500 text-sm">
319
  <p>Cosmic Explorer Dashboard v1.0 • Mission Control: Houston</p>
@@ -322,33 +374,363 @@
322
  </div>
323
 
324
  <script>
325
- // Simple animation for the dashboard
326
  document.addEventListener('DOMContentLoaded', function() {
327
- // Pulse animation for important elements
328
- const pulseElements = document.querySelectorAll('.pulse');
329
- pulseElements.forEach(el => {
330
- el.addEventListener('mouseenter', () => {
331
- el.style.animation = 'pulse 1s infinite';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
332
  });
333
- el.addEventListener('mouseleave', () => {
334
- el.style.animation = 'pulse 2s infinite';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  });
336
  });
337
 
338
- // Simulate data updates
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  setInterval(() => {
340
- const randomTemp = Math.floor(Math.random() * 10) + 18;
341
- document.querySelectorAll('.font-mono')[2].textContent = `${randomTemp}.${Math.floor(Math.random() * 10)}° N`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
342
 
343
- const randomSpeed = (Math.random() * 0.2 + 7.6).toFixed(2);
344
- document.querySelectorAll('.font-mono')[4].textContent = `${randomSpeed} km/s`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
345
  }, 3000);
346
 
347
- // Launch sequence button
348
- const launchBtn = document.querySelector('button:contains("Launch Sequence")');
349
- launchBtn.addEventListener('click', () => {
350
- alert('🚀 Launch sequence initiated! Preparing for takeoff in T-10 seconds...');
351
- });
352
  });
353
  </script>
354
  <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=Freefall/wont-orbit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
30
  background: rgba(30, 41, 59, 0.5);
31
  backdrop-filter: blur(10px);
32
  border: 1px solid rgba(255, 255, 255, 0.1);
33
+ transition: all 0.3s ease;
34
+ }
35
+
36
+ .card-glass:hover {
37
+ transform: translateY(-2px);
38
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
39
  }
40
 
41
  .pulse {
 
84
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
85
  to { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
86
  }
87
+
88
+ .progress-ring {
89
+ transform: rotate(-90deg);
90
+ }
91
+
92
+ .progress-ring__circle {
93
+ transition: stroke-dashoffset 0.5s;
94
+ }
95
+
96
+ .notification {
97
+ animation: slideIn 0.5s forwards;
98
+ }
99
+
100
+ @keyframes slideIn {
101
+ from { transform: translateX(100%); opacity: 0; }
102
+ to { transform: translateX(0); opacity: 1; }
103
+ }
104
+
105
+ .notification.hide {
106
+ animation: slideOut 0.5s forwards;
107
+ }
108
+
109
+ @keyframes slideOut {
110
+ from { transform: translateX(0); opacity: 1; }
111
+ to { transform: translateX(100%); opacity: 0; }
112
+ }
113
  </style>
114
  </head>
115
  <body class="min-h-screen gradient-bg">
116
  <div class="container mx-auto px-4 py-8">
117
+ <!-- Notification Area -->
118
+ <div id="notificationArea" class="fixed top-4 right-4 z-50 w-80"></div>
119
+
120
  <!-- Header -->
121
  <header class="flex justify-between items-center mb-10">
122
  <div class="flex items-center space-x-3">
 
128
  </h1>
129
  </div>
130
  <div class="flex items-center space-x-4">
131
+ <button id="notificationBtn" class="relative p-2 rounded-full hover:bg-slate-700 transition">
132
  <i class="fas fa-bell text-slate-300"></i>
133
+ <span id="notificationBadge" class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full hidden"></span>
134
  </button>
135
  <div class="flex items-center space-x-2">
136
  <div class="w-10 h-10 rounded-full bg-slate-600 flex items-center justify-center">
 
155
  <div class="flex items-center justify-between">
156
  <span class="text-slate-300">Fuel Level</span>
157
  <div class="w-24 bg-slate-700 rounded-full h-2">
158
+ <div id="fuelLevel" class="bg-emerald-400 h-2 rounded-full" style="width: 85%"></div>
159
  </div>
160
  </div>
161
  <div class="flex items-center justify-between">
162
  <span class="text-slate-300">Oxygen Supply</span>
163
  <div class="w-24 bg-slate-700 rounded-full h-2">
164
+ <div id="oxygenLevel" class="bg-blue-400 h-2 rounded-full" style="width: 72%"></div>
165
  </div>
166
  </div>
167
  <div class="flex items-center justify-between">
168
  <span class="text-slate-300">Power Output</span>
169
  <div class="w-24 bg-slate-700 rounded-full h-2">
170
+ <div id="powerLevel" class="bg-purple-400 h-2 rounded-full" style="width: 93%"></div>
171
  </div>
172
  </div>
173
  </div>
174
+ <button id="launchBtn" class="mt-6 w-full py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition flex items-center justify-center space-x-2">
175
  <i class="fas fa-play"></i>
176
  <span>Launch Sequence</span>
177
  </button>
 
184
  Recent Discoveries
185
  </h2>
186
  <div class="space-y-3">
187
+ <div class="discovery-item flex items-start space-x-3 p-2 rounded-lg hover:bg-slate-700 cursor-pointer transition" data-info="Quantum Nebula located in Andromeda sector. Contains high concentrations of exotic matter.">
188
  <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
189
  <i class="fas fa-atom text-purple-400"></i>
190
  </div>
 
193
  <p class="text-sm text-slate-400">Located in Andromeda sector</p>
194
  </div>
195
  </div>
196
+ <div class="discovery-item flex items-start space-x-3 p-2 rounded-lg hover:bg-slate-700 cursor-pointer transition" data-info="Crystalline Asteroid rich in rare minerals. Preliminary scans show 78% purity of unobtanium.">
197
  <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
198
  <i class="fas fa-meteor text-orange-400"></i>
199
  </div>
 
202
  <p class="text-sm text-slate-400">Rich in rare minerals</p>
203
  </div>
204
  </div>
205
+ <div class="discovery-item flex items-start space-x-3 p-2 rounded-lg hover:bg-slate-700 cursor-pointer transition" data-info="Aqua Planet with 94% surface water coverage. Atmospheric composition suggests potential for microbial life.">
206
  <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
207
  <i class="fas fa-water text-blue-400"></i>
208
  </div>
 
225
  Current Orbit
226
  </h2>
227
  <div class="flex space-x-2">
228
+ <button id="zoomInBtn" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition">Zoom In</button>
229
+ <button id="zoomOutBtn" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition">Zoom Out</button>
230
  </div>
231
  </div>
232
  <div class="flex flex-col items-center">
 
237
  <div class="w-full bg-slate-800 rounded-lg p-4">
238
  <div class="flex justify-between text-sm mb-2">
239
  <span>Orbital Velocity</span>
240
+ <span id="orbitalVelocity" class="font-mono">7.8 km/s</span>
241
  </div>
242
  <div class="flex justify-between text-sm mb-2">
243
  <span>Altitude</span>
244
+ <span id="altitude" class="font-mono">402 km</span>
245
  </div>
246
  <div class="flex justify-between text-sm">
247
  <span>Inclination</span>
248
+ <span id="inclination" class="font-mono">51.6°</span>
249
  </div>
250
  </div>
251
  </div>
 
262
  <div>
263
  <div class="flex justify-between text-sm mb-1">
264
  <span>External</span>
265
+ <span id="externalTemp">-120°C</span>
266
  </div>
267
  <div class="w-full bg-slate-800 rounded-full h-2">
268
+ <div id="externalTempBar" class="bg-blue-400 h-2 rounded-full" style="width: 15%"></div>
269
  </div>
270
  </div>
271
  <div>
272
  <div class="flex justify-between text-sm mb-1">
273
  <span>Internal</span>
274
+ <span id="internalTemp">22°C</span>
275
  </div>
276
  <div class="w-full bg-slate-800 rounded-full h-2">
277
+ <div id="internalTempBar" class="bg-green-400 h-2 rounded-full" style="width: 65%"></div>
278
  </div>
279
  </div>
280
  <div>
281
  <div class="flex justify-between text-sm mb-1">
282
  <span>Engine</span>
283
+ <span id="engineTemp">320°C</span>
284
  </div>
285
  <div class="w-full bg-slate-800 rounded-full h-2">
286
+ <div id="engineTempBar" class="bg-red-400 h-2 rounded-full" style="width: 80%"></div>
287
  </div>
288
  </div>
289
  </div>
 
297
  <div class="grid grid-cols-2 gap-4">
298
  <div class="bg-slate-800 p-3 rounded-lg">
299
  <div class="text-xs text-slate-400 mb-1">Latitude</div>
300
+ <div id="latitude" class="font-mono">28.5° N</div>
301
  </div>
302
  <div class="bg-slate-800 p-3 rounded-lg">
303
  <div class="text-xs text-slate-400 mb-1">Longitude</div>
304
+ <div id="longitude" class="font-mono">80.6° W</div>
305
  </div>
306
  <div class="bg-slate-800 p-3 rounded-lg">
307
  <div class="text-xs text-slate-400 mb-1">Speed</div>
308
+ <div id="speed" class="font-mono">7.66 km/s</div>
309
  </div>
310
  <div class="bg-slate-800 p-3 rounded-lg">
311
  <div class="text-xs text-slate-400 mb-1">Altitude</div>
312
+ <div id="navAltitude" class="font-mono">402 km</div>
313
  </div>
314
  </div>
315
  </div>
 
327
  <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center">
328
  <i class="fas fa-satellite text-blue-300"></i>
329
  </div>
330
+ <div id="signalStatus" class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full border-2 border-slate-800"></div>
331
  </div>
332
  <div>
333
  <h3 class="font-medium">Signal Strength</h3>
334
+ <p id="connectionStatus" class="text-sm text-slate-400">Connected to Deep Space Network</p>
335
  </div>
336
  </div>
337
  <div class="flex space-x-3">
338
+ <button id="transmitBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center space-x-2 transition">
339
  <i class="fas fa-microphone"></i>
340
  <span>Transmit</span>
341
  </button>
342
+ <button id="receiveBtn" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg flex items-center space-x-2 transition">
343
  <i class="fas fa-headphones"></i>
344
  <span>Receive</span>
345
  </button>
 
349
  </div>
350
  </main>
351
 
352
+ <!-- Discovery Modal -->
353
+ <div id="discoveryModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
354
+ <div class="card-glass rounded-xl p-6 max-w-md w-full mx-4">
355
+ <div class="flex justify-between items-center mb-4">
356
+ <h3 id="modalTitle" class="text-xl font-bold"></h3>
357
+ <button id="closeModalBtn" class="text-slate-400 hover:text-white">
358
+ <i class="fas fa-times"></i>
359
+ </button>
360
+ </div>
361
+ <p id="modalContent" class="text-slate-300 mb-4"></p>
362
+ <button id="scanBtn" class="w-full py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition flex items-center justify-center space-x-2">
363
+ <i class="fas fa-search"></i>
364
+ <span>Initiate Deep Scan</span>
365
+ </button>
366
+ </div>
367
+ </div>
368
+
369
  <!-- Footer -->
370
  <footer class="mt-12 pt-6 border-t border-slate-800 text-center text-slate-500 text-sm">
371
  <p>Cosmic Explorer Dashboard v1.0 • Mission Control: Houston</p>
 
374
  </div>
375
 
376
  <script>
 
377
  document.addEventListener('DOMContentLoaded', function() {
378
+ // Notification system
379
+ const notificationBtn = document.getElementById('notificationBtn');
380
+ const notificationBadge = document.getElementById('notificationBadge');
381
+ const notificationArea = document.getElementById('notificationArea');
382
+
383
+ let notificationCount = 0;
384
+
385
+ function showNotification(message, type = 'info') {
386
+ notificationCount++;
387
+ notificationBadge.classList.remove('hidden');
388
+
389
+ const colors = {
390
+ info: 'bg-blue-600',
391
+ warning: 'bg-yellow-600',
392
+ danger: 'bg-red-600',
393
+ success: 'bg-green-600'
394
+ };
395
+
396
+ const icon = {
397
+ info: 'fa-info-circle',
398
+ warning: 'fa-exclamation-triangle',
399
+ danger: 'fa-exclamation-circle',
400
+ success: 'fa-check-circle'
401
+ };
402
+
403
+ const notification = document.createElement('div');
404
+ notification.className = `notification mb-2 p-3 rounded-lg ${colors[type]} text-white flex items-start`;
405
+ notification.innerHTML = `
406
+ <i class="fas ${icon[type]} mr-2 mt-1"></i>
407
+ <div>
408
+ <p class="text-sm">${message}</p>
409
+ <p class="text-xs opacity-80 mt-1">Just now</p>
410
+ </div>
411
+ <button class="ml-auto text-white opacity-70 hover:opacity-100">
412
+ <i class="fas fa-times"></i>
413
+ </button>
414
+ `;
415
+
416
+ const closeBtn = notification.querySelector('button');
417
+ closeBtn.addEventListener('click', () => {
418
+ notification.classList.add('hide');
419
+ setTimeout(() => {
420
+ notification.remove();
421
+ notificationCount--;
422
+ if (notificationCount === 0) {
423
+ notificationBadge.classList.add('hidden');
424
+ }
425
+ }, 500);
426
  });
427
+
428
+ notificationArea.appendChild(notification);
429
+
430
+ // Auto-remove after 5 seconds
431
+ setTimeout(() => {
432
+ if (notification.parentNode) {
433
+ notification.classList.add('hide');
434
+ setTimeout(() => {
435
+ notification.remove();
436
+ notificationCount--;
437
+ if (notificationCount === 0) {
438
+ notificationBadge.classList.add('hidden');
439
+ }
440
+ }, 500);
441
+ }
442
+ }, 5000);
443
+ }
444
+
445
+ // Simulate random notifications
446
+ setInterval(() => {
447
+ const messages = [
448
+ "New cosmic anomaly detected in sector 7G",
449
+ "Solar flare activity increasing",
450
+ "Communication relay established with Mars colony",
451
+ "Fuel consumption within expected parameters",
452
+ "Navigation systems recalibrated"
453
+ ];
454
+
455
+ const types = ['info', 'warning', 'success'];
456
+
457
+ if (Math.random() > 0.7) {
458
+ showNotification(
459
+ messages[Math.floor(Math.random() * messages.length)],
460
+ types[Math.floor(Math.random() * types.length)]
461
+ );
462
+ }
463
+ }, 10000);
464
+
465
+ // Launch sequence button
466
+ const launchBtn = document.getElementById('launchBtn');
467
+ let launchSequence = false;
468
+
469
+ launchBtn.addEventListener('click', function() {
470
+ if (!launchSequence) {
471
+ launchSequence = true;
472
+ this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Launching...</span>';
473
+ this.classList.remove('bg-purple-600', 'hover:bg-purple-700');
474
+ this.classList.add('bg-red-600', 'hover:bg-red-700');
475
+
476
+ // Simulate countdown
477
+ let count = 5;
478
+ const countdown = setInterval(() => {
479
+ if (count > 0) {
480
+ showNotification(`T-${count} seconds to launch`, 'danger');
481
+ count--;
482
+ } else {
483
+ clearInterval(countdown);
484
+ showNotification('🚀 Launch successful!', 'success');
485
+ this.innerHTML = '<i class="fas fa-check"></i><span>Launch Complete</span>';
486
+
487
+ // Update mission status
488
+ updateFuelLevel(-15);
489
+ updatePowerLevel(-10);
490
+
491
+ // Update orbit data
492
+ updateOrbitData();
493
+ }
494
+ }, 1000);
495
+ }
496
+ });
497
+
498
+ // Discovery items
499
+ const discoveryItems = document.querySelectorAll('.discovery-item');
500
+ const discoveryModal = document.getElementById('discoveryModal');
501
+ const modalTitle = document.getElementById('modalTitle');
502
+ const modalContent = document.getElementById('modalContent');
503
+ const closeModalBtn = document.getElementById('closeModalBtn');
504
+ const scanBtn = document.getElementById('scanBtn');
505
+
506
+ discoveryItems.forEach(item => {
507
+ item.addEventListener('click', function() {
508
+ const title = this.querySelector('h3').textContent;
509
+ const info = this.getAttribute('data-info');
510
+
511
+ modalTitle.textContent = title;
512
+ modalContent.textContent = info;
513
+ discoveryModal.classList.remove('hidden');
514
  });
515
  });
516
 
517
+ closeModalBtn.addEventListener('click', function() {
518
+ discoveryModal.classList.add('hidden');
519
+ });
520
+
521
+ scanBtn.addEventListener('click', function() {
522
+ showNotification('Deep scan initiated for ' + modalTitle.textContent, 'info');
523
+ discoveryModal.classList.add('hidden');
524
+
525
+ // Simulate scan results after delay
526
+ setTimeout(() => {
527
+ showNotification('Scan complete! Data available for analysis.', 'success');
528
+ }, 3000);
529
+ });
530
+
531
+ // Zoom buttons
532
+ const zoomInBtn = document.getElementById('zoomInBtn');
533
+ const zoomOutBtn = document.getElementById('zoomOutBtn');
534
+ const orbit = document.querySelector('.orbit');
535
+ let zoomLevel = 1;
536
+
537
+ zoomInBtn.addEventListener('click', function() {
538
+ if (zoomLevel < 2) {
539
+ zoomLevel += 0.2;
540
+ orbit.style.transform = `scale(${zoomLevel})`;
541
+ }
542
+ });
543
+
544
+ zoomOutBtn.addEventListener('click', function() {
545
+ if (zoomLevel > 0.6) {
546
+ zoomLevel -= 0.2;
547
+ orbit.style.transform = `scale(${zoomLevel})`;
548
+ }
549
+ });
550
+
551
+ // Communication buttons
552
+ const transmitBtn = document.getElementById('transmitBtn');
553
+ const receiveBtn = document.getElementById('receiveBtn');
554
+ const signalStatus = document.getElementById('signalStatus');
555
+ const connectionStatus = document.getElementById('connectionStatus');
556
+
557
+ transmitBtn.addEventListener('click', function() {
558
+ showNotification('Transmitting message to Mission Control...', 'info');
559
+ signalStatus.classList.remove('bg-green-500');
560
+ signalStatus.classList.add('bg-yellow-500');
561
+
562
+ setTimeout(() => {
563
+ signalStatus.classList.remove('bg-yellow-500');
564
+ signalStatus.classList.add('bg-green-500');
565
+ showNotification('Transmission complete. Message received by Mission Control.', 'success');
566
+ }, 2000);
567
+ });
568
+
569
+ receiveBtn.addEventListener('click', function() {
570
+ showNotification('Checking for incoming messages...', 'info');
571
+ signalStatus.classList.remove('bg-green-500');
572
+ signalStatus.classList.add('bg-yellow-500');
573
+
574
+ setTimeout(() => {
575
+ signalStatus.classList.remove('bg-yellow-500');
576
+ signalStatus.classList.add('bg-green-500');
577
+
578
+ const messages = [
579
+ "Weather systems nominal",
580
+ "Course correction required in 3 hours",
581
+ "New mission parameters uploaded",
582
+ "All systems functioning within parameters"
583
+ ];
584
+
585
+ showNotification('New message: ' + messages[Math.floor(Math.random() * messages.length)], 'info');
586
+ }, 2000);
587
+ });
588
+
589
+ // Simulate signal fluctuations
590
  setInterval(() => {
591
+ if (Math.random() > 0.8) {
592
+ signalStatus.classList.remove('bg-green-500');
593
+ signalStatus.classList.add('bg-red-500');
594
+ connectionStatus.textContent = "Signal lost - attempting to reconnect";
595
+
596
+ setTimeout(() => {
597
+ signalStatus.classList.remove('bg-red-500');
598
+ signalStatus.classList.add('bg-green-500');
599
+ connectionStatus.textContent = "Connected to Deep Space Network";
600
+ showNotification('Signal reestablished', 'success');
601
+ }, 3000);
602
+ }
603
+ }, 15000);
604
+
605
+ // Mission status functions
606
+ function updateFuelLevel(change) {
607
+ const fuelLevel = document.getElementById('fuelLevel');
608
+ let current = parseInt(fuelLevel.style.width);
609
+ current = Math.max(0, Math.min(100, current + change));
610
+ fuelLevel.style.width = current + '%';
611
+
612
+ if (current < 20) {
613
+ showNotification('Warning: Fuel level critical!', 'danger');
614
+ }
615
+ }
616
+
617
+ function updateOxygenLevel(change) {
618
+ const oxygenLevel = document.getElementById('oxygenLevel');
619
+ let current = parseInt(oxygenLevel.style.width);
620
+ current = Math.max(0, Math.min(100, current + change));
621
+ oxygenLevel.style.width = current + '%';
622
+
623
+ if (current < 30) {
624
+ showNotification('Warning: Oxygen supply low!', 'danger');
625
+ }
626
+ }
627
+
628
+ function updatePowerLevel(change) {
629
+ const powerLevel = document.getElementById('powerLevel');
630
+ let current = parseInt(powerLevel.style.width);
631
+ current = Math.max(0, Math.min(100, current + change));
632
+ powerLevel.style.width = current + '%';
633
 
634
+ if (current < 40) {
635
+ showNotification('Warning: Power output below optimal levels!', 'warning');
636
+ }
637
+ }
638
+
639
+ // Orbit data functions
640
+ function updateOrbitData() {
641
+ const orbitalVelocity = document.getElementById('orbitalVelocity');
642
+ const altitude = document.getElementById('altitude');
643
+ const inclination = document.getElementById('inclination');
644
+ const navAltitude = document.getElementById('navAltitude');
645
+
646
+ const newVelocity = (7.5 + Math.random() * 0.6).toFixed(2);
647
+ const newAltitude = Math.floor(380 + Math.random() * 50);
648
+ const newInclination = (50 + Math.random() * 3).toFixed(1);
649
+
650
+ orbitalVelocity.textContent = newVelocity + ' km/s';
651
+ altitude.textContent = newAltitude + ' km';
652
+ navAltitude.textContent = newAltitude + ' km';
653
+ inclination.textContent = newInclination + '°';
654
+ }
655
+
656
+ // Temperature functions
657
+ function updateTemperatures() {
658
+ const externalTemp = document.getElementById('externalTemp');
659
+ const internalTemp = document.getElementById('internalTemp');
660
+ const engineTemp = document.getElementById('engineTemp');
661
+ const externalTempBar = document.getElementById('externalTempBar');
662
+ const internalTempBar = document.getElementById('internalTempBar');
663
+ const engineTempBar = document.getElementById('engineTempBar');
664
+
665
+ // External temp (-100 to -150°C)
666
+ const newExternal = Math.floor(-100 - Math.random() * 50);
667
+ externalTemp.textContent = newExternal + '°C';
668
+ externalTempBar.style.width = Math.abs(newExternal) / 1.5 + '%';
669
+
670
+ // Internal temp (20-25°C)
671
+ const newInternal = (20 + Math.random() * 5).toFixed(1);
672
+ internalTemp.textContent = newInternal + '°C';
673
+ internalTempBar.style.width = (newInternal * 3) + '%';
674
+
675
+ // Engine temp (300-350°C)
676
+ const newEngine = Math.floor(300 + Math.random() * 50);
677
+ engineTemp.textContent = newEngine + '°C';
678
+ engineTempBar.style.width = (newEngine / 4) + '%';
679
+
680
+ // Check for critical temperatures
681
+ if (newInternal > 24) {
682
+ showNotification('Warning: Internal temperature rising!', 'warning');
683
+ }
684
+
685
+ if (newEngine > 340) {
686
+ showNotification('Danger: Engine temperature critical!', 'danger');
687
+ }
688
+ }
689
+
690
+ // Navigation data functions
691
+ function updateNavigationData() {
692
+ const latitude = document.getElementById('latitude');
693
+ const longitude = document.getElementById('longitude');
694
+ const speed = document.getElementById('speed');
695
+
696
+ const newLatitude = (28 + Math.random() * 1).toFixed(1);
697
+ const newLongitude = (80 + Math.random() * 1).toFixed(1);
698
+ const newSpeed = (7.6 + Math.random() * 0.2).toFixed(2);
699
+
700
+ latitude.textContent = newLatitude + '° N';
701
+ longitude.textContent = newLongitude + '° W';
702
+ speed.textContent = newSpeed + ' km/s';
703
+ }
704
+
705
+ // Simulate mission systems
706
+ setInterval(() => {
707
+ // Randomly update mission status
708
+ if (Math.random() > 0.5) {
709
+ updateFuelLevel(-0.5);
710
+ }
711
+
712
+ if (Math.random() > 0.6) {
713
+ updateOxygenLevel(-0.3);
714
+ }
715
+
716
+ if (Math.random() > 0.7) {
717
+ updatePowerLevel(-0.2);
718
+ }
719
+
720
+ // Update orbit data
721
+ updateOrbitData();
722
+
723
+ // Update temperatures
724
+ updateTemperatures();
725
+
726
+ // Update navigation data
727
+ updateNavigationData();
728
  }, 3000);
729
 
730
+ // Initial notification
731
+ setTimeout(() => {
732
+ showNotification('Welcome back, Commander. All systems nominal.', 'info');
733
+ }, 1000);
 
734
  });
735
  </script>
736
  <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=Freefall/wont-orbit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>