Hugging Face's logo

Spaces:
privateuserh
/
privateuserh-uaphe-vbeta1-04
Running

App Files Community
privateuserh commited on
Commit
cf4865e
·
verified ·
1 Parent(s): d1153a5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1681 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privateuserh Uaphe Vbeta1 04
3
- emoji: 🐨
4
- colorFrom: red
5
- colorTo: green
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: privateuserh-uaphe-vbeta1-04
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
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,1681 @@
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>UAP Pulse - Advanced Atmospheric Tracking</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
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Space Grotesk', sans-serif;
18
+ background-color: #0f172a;
19
+ color: #e2e8f0;
20
+ }
21
+
22
+ .post-card {
23
+ background: linear-gradient(145deg, #1e293b, #0f172a);
24
+ border-left: 3px solid #3b82f6;
25
+ transition: transform 0.2s;
26
+ }
27
+
28
+ .post-card:hover {
29
+ transform: translateY(-2px);
30
+ }
31
+
32
+ .nav-item {
33
+ position: relative;
34
+ }
35
+
36
+ .nav-item::after {
37
+ content: '';
38
+ position: absolute;
39
+ width: 0;
40
+ height: 2px;
41
+ bottom: 0;
42
+ left: 0;
43
+ background-color: #3b82f6;
44
+ transition: width 0.3s;
45
+ }
46
+
47
+ .nav-item:hover::after {
48
+ width: 100%;
49
+ }
50
+
51
+ .typewriter {
52
+ overflow: hidden;
53
+ border-right: 2px solid #3b82f6;
54
+ white-space: nowrap;
55
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
56
+ }
57
+
58
+ @keyframes typing {
59
+ from { width: 0 }
60
+ to { width: 100% }
61
+ }
62
+
63
+ @keyframes blink-caret {
64
+ from, to { border-color: transparent }
65
+ 50% { border-color: #3b82f6 }
66
+ }
67
+
68
+ .glow {
69
+ text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
70
+ }
71
+
72
+ /* UAP Scanner Window */
73
+ .scanner-window {
74
+ position: relative;
75
+ width: 100%;
76
+ height: 400px;
77
+ background-color: #000;
78
+ border: 2px solid #3b82f6;
79
+ border-radius: 8px;
80
+ overflow: hidden;
81
+ margin-bottom: 20px;
82
+ }
83
+
84
+ .scanner-overlay {
85
+ position: absolute;
86
+ top: 0;
87
+ left: 0;
88
+ width: 100%;
89
+ height: 100%;
90
+ background: linear-gradient(transparent 70%, rgba(59, 130, 246, 0.1) 100%);
91
+ pointer-events: none;
92
+ }
93
+
94
+ .scanner-grid {
95
+ position: absolute;
96
+ top: 0;
97
+ left: 0;
98
+ width: 100%;
99
+ height: 100%;
100
+ background-image:
101
+ linear-gradient(rgba(59, 130, 246, 0.3) 1px, transparent 1px),
102
+ linear-gradient(90deg, rgba(59, 130, 246, 0.3) 1px, transparent 1px);
103
+ background-size: 20px 20px;
104
+ opacity: 0.5;
105
+ }
106
+
107
+ .scanner-crosshair {
108
+ position: absolute;
109
+ top: 50%;
110
+ left: 50%;
111
+ transform: translate(-50%, -50%);
112
+ width: 30px;
113
+ height: 30px;
114
+ border: 2px solid rgba(255, 0, 0, 0.7);
115
+ border-radius: 50%;
116
+ }
117
+
118
+ .scanner-crosshair::before, .scanner-crosshair::after {
119
+ content: '';
120
+ position: absolute;
121
+ background-color: rgba(255, 0, 0, 0.7);
122
+ }
123
+
124
+ .scanner-crosshair::before {
125
+ width: 2px;
126
+ height: 10px;
127
+ top: -12px;
128
+ left: 50%;
129
+ transform: translateX(-50%);
130
+ }
131
+
132
+ .scanner-crosshair::after {
133
+ width: 10px;
134
+ height: 2px;
135
+ top: 50%;
136
+ left: -12px;
137
+ transform: translateY(-50%);
138
+ }
139
+
140
+ .scanner-coordinates {
141
+ position: absolute;
142
+ bottom: 10px;
143
+ left: 10px;
144
+ background-color: rgba(0, 0, 0, 0.7);
145
+ padding: 5px 10px;
146
+ border-radius: 4px;
147
+ font-family: monospace;
148
+ color: #3b82f6;
149
+ }
150
+
151
+ .scanner-controls {
152
+ position: absolute;
153
+ bottom: 10px;
154
+ right: 10px;
155
+ display: flex;
156
+ gap: 10px;
157
+ }
158
+
159
+ .scanner-btn {
160
+ background-color: rgba(59, 130, 246, 0.7);
161
+ color: white;
162
+ border: none;
163
+ border-radius: 50%;
164
+ width: 40px;
165
+ height: 40px;
166
+ display: flex;
167
+ align-items: center;
168
+ justify-content: center;
169
+ cursor: pointer;
170
+ transition: all 0.2s;
171
+ }
172
+
173
+ .scanner-btn:hover {
174
+ background-color: rgba(59, 130, 246, 1);
175
+ transform: scale(1.1);
176
+ }
177
+
178
+ .scanner-btn.active {
179
+ background-color: rgba(239, 68, 68, 0.7);
180
+ }
181
+
182
+ .scanner-btn.active:hover {
183
+ background-color: rgba(239, 68, 68, 1);
184
+ }
185
+
186
+ .uap-marker {
187
+ position: absolute;
188
+ width: 10px;
189
+ height: 10px;
190
+ background-color: red;
191
+ border-radius: 50%;
192
+ transform: translate(-50%, -50%);
193
+ box-shadow: 0 0 10px red;
194
+ animation: pulse 1.5s infinite;
195
+ }
196
+
197
+ @keyframes pulse {
198
+ 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
199
+ 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.7; }
200
+ 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
201
+ }
202
+
203
+ .uap-info {
204
+ position: absolute;
205
+ background-color: rgba(0, 0, 0, 0.8);
206
+ border: 1px solid #3b82f6;
207
+ border-radius: 4px;
208
+ padding: 5px;
209
+ color: white;
210
+ font-size: 12px;
211
+ pointer-events: none;
212
+ transform: translate(15px, -50%);
213
+ min-width: 120px;
214
+ display: none;
215
+ }
216
+
217
+ .uap-info::before {
218
+ content: '';
219
+ position: absolute;
220
+ left: -10px;
221
+ top: 50%;
222
+ transform: translateY(-50%);
223
+ border-width: 5px;
224
+ border-style: solid;
225
+ border-color: transparent #3b82f6 transparent transparent;
226
+ }
227
+
228
+ /* 3D Viewer */
229
+ .viewer-3d {
230
+ width: 100%;
231
+ height: 400px;
232
+ background-color: #000;
233
+ border: 2px solid #3b82f6;
234
+ border-radius: 8px;
235
+ margin-top: 20px;
236
+ position: relative;
237
+ }
238
+
239
+ .viewer-controls {
240
+ position: absolute;
241
+ bottom: 10px;
242
+ left: 10px;
243
+ z-index: 100;
244
+ display: flex;
245
+ gap: 10px;
246
+ }
247
+
248
+ .atmosphere-levels {
249
+ position: absolute;
250
+ right: 10px;
251
+ top: 10px;
252
+ background-color: rgba(0, 0, 0, 0.7);
253
+ padding: 10px;
254
+ border-radius: 4px;
255
+ color: white;
256
+ font-size: 12px;
257
+ z-index: 100;
258
+ }
259
+
260
+ .atmosphere-level {
261
+ margin-bottom: 5px;
262
+ padding-left: 15px;
263
+ position: relative;
264
+ }
265
+
266
+ .atmosphere-level::before {
267
+ content: '';
268
+ position: absolute;
269
+ left: 0;
270
+ top: 50%;
271
+ transform: translateY(-50%);
272
+ width: 10px;
273
+ height: 10px;
274
+ border-radius: 50%;
275
+ }
276
+
277
+ .troposphere::before { background-color: #3b82f6; }
278
+ .stratosphere::before { background-color: #10b981; }
279
+ .mesosphere::before { background-color: #f59e0b; }
280
+ .thermosphere::before { background-color: #ef4444; }
281
+ .exosphere::before { background-color: #8b5cf6; }
282
+
283
+ /* Shape icons */
284
+ .shape-icon {
285
+ width: 40px;
286
+ height: 40px;
287
+ display: flex;
288
+ align-items: center;
289
+ justify-content: center;
290
+ margin: 0 auto;
291
+ }
292
+
293
+ .triangle {
294
+ width: 0;
295
+ height: 0;
296
+ border-left: 20px solid transparent;
297
+ border-right: 20px solid transparent;
298
+ border-bottom: 35px solid transparent;
299
+ position: relative;
300
+ }
301
+
302
+ .triangle::before {
303
+ content: '';
304
+ position: absolute;
305
+ top: 5px;
306
+ left: -20px;
307
+ width: 0;
308
+ height: 0;
309
+ border-left: 20px solid transparent;
310
+ border-right: 20px solid transparent;
311
+ border-bottom: 35px solid white;
312
+ filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
313
+ }
314
+
315
+ .triangle::after {
316
+ content: '';
317
+ position: absolute;
318
+ top: 6px;
319
+ left: -18px;
320
+ width: 0;
321
+ height: 0;
322
+ border-left: 18px solid transparent;
323
+ border-right: 18px solid transparent;
324
+ border-bottom: 32px solid #1e293b;
325
+ }
326
+
327
+ /* Measurement Band */
328
+ .measurement-band {
329
+ position: absolute;
330
+ top: 0;
331
+ left: 0;
332
+ width: 100%;
333
+ height: 100%;
334
+ pointer-events: none;
335
+ }
336
+
337
+ .measurement-line {
338
+ position: absolute;
339
+ background-color: rgba(59, 130, 246, 0.5);
340
+ width: 2px;
341
+ transform-origin: bottom center;
342
+ }
343
+
344
+ .measurement-label {
345
+ position: absolute;
346
+ color: white;
347
+ font-size: 10px;
348
+ background-color: rgba(0, 0, 0, 0.7);
349
+ padding: 2px 4px;
350
+ border-radius: 3px;
351
+ white-space: nowrap;
352
+ }
353
+
354
+ /* Advanced Controls Panel */
355
+ .controls-panel {
356
+ background-color: rgba(15, 23, 42, 0.9);
357
+ border: 1px solid #3b82f6;
358
+ border-radius: 8px;
359
+ padding: 15px;
360
+ margin-top: 20px;
361
+ }
362
+
363
+ .controls-title {
364
+ font-size: 18px;
365
+ font-weight: 600;
366
+ color: #3b82f6;
367
+ margin-bottom: 15px;
368
+ display: flex;
369
+ align-items: center;
370
+ }
371
+
372
+ .control-group {
373
+ margin-bottom: 15px;
374
+ }
375
+
376
+ .control-label {
377
+ display: block;
378
+ margin-bottom: 5px;
379
+ font-size: 14px;
380
+ color: #e2e8f0;
381
+ }
382
+
383
+ .control-input {
384
+ width: 100%;
385
+ background-color: #1e293b;
386
+ border: 1px solid #334155;
387
+ border-radius: 4px;
388
+ padding: 8px 12px;
389
+ color: white;
390
+ }
391
+
392
+ .control-select {
393
+ width: 100%;
394
+ background-color: #1e293b;
395
+ border: 1px solid #334155;
396
+ border-radius: 4px;
397
+ padding: 8px 12px;
398
+ color: white;
399
+ }
400
+
401
+ .control-btn {
402
+ background-color: #3b82f6;
403
+ color: white;
404
+ border: none;
405
+ border-radius: 4px;
406
+ padding: 8px 15px;
407
+ cursor: pointer;
408
+ transition: background-color 0.2s;
409
+ }
410
+
411
+ .control-btn:hover {
412
+ background-color: #2563eb;
413
+ }
414
+
415
+ .slider-container {
416
+ display: flex;
417
+ align-items: center;
418
+ gap: 10px;
419
+ }
420
+
421
+ .slider-value {
422
+ min-width: 40px;
423
+ text-align: center;
424
+ }
425
+
426
+ /* Data Visualization */
427
+ .data-visualization {
428
+ background-color: rgba(15, 23, 42, 0.9);
429
+ border: 1px solid #3b82f6;
430
+ border-radius: 8px;
431
+ padding: 15px;
432
+ margin-top: 20px;
433
+ }
434
+
435
+ .data-title {
436
+ font-size: 18px;
437
+ font-weight: 600;
438
+ color: #3b82f6;
439
+ margin-bottom: 15px;
440
+ display: flex;
441
+ align-items: center;
442
+ }
443
+
444
+ .data-value {
445
+ font-family: monospace;
446
+ color: white;
447
+ margin-bottom: 5px;
448
+ }
449
+
450
+ .data-label {
451
+ color: #94a3b8;
452
+ font-size: 14px;
453
+ }
454
+
455
+ /* Radar Visualization */
456
+ .radar-visualization {
457
+ width: 100%;
458
+ height: 200px;
459
+ position: relative;
460
+ margin-top: 15px;
461
+ }
462
+
463
+ .radar-circle {
464
+ position: absolute;
465
+ border: 1px solid rgba(59, 130, 246, 0.3);
466
+ border-radius: 50%;
467
+ transform: translate(-50%, -50%);
468
+ }
469
+
470
+ .radar-sweep {
471
+ position: absolute;
472
+ width: 100%;
473
+ height: 100%;
474
+ clip-path: polygon(50% 50%, 50% 0, 50% 0);
475
+ background-color: rgba(59, 130, 246, 0.1);
476
+ transform-origin: 50% 50%;
477
+ animation: radarSweep 4s linear infinite;
478
+ }
479
+
480
+ @keyframes radarSweep {
481
+ 0% { transform: rotate(0deg); }
482
+ 100% { transform: rotate(360deg); }
483
+ }
484
+
485
+ .radar-target {
486
+ position: absolute;
487
+ width: 8px;
488
+ height: 8px;
489
+ background-color: red;
490
+ border-radius: 50%;
491
+ transform: translate(-50%, -50%);
492
+ box-shadow: 0 0 5px red;
493
+ }
494
+ </style>
495
+ </head>
496
+ <body class="min-h-screen">
497
+ <!-- Header -->
498
+ <header class="bg-gradient-to-r from-blue-900 to-slate-900 shadow-lg">
499
+ <div class="container mx-auto px-4 py-6">
500
+ <div class="flex flex-col md:flex-row justify-between items-center">
501
+ <div class="flex items-center mb-4 md:mb-0">
502
+ <i class="fas fa-ufo text-3xl text-blue-400 mr-3"></i>
503
+ <h1 class="text-2xl md:text-3xl font-bold text-white">
504
+ <span class="typewriter glow">UAP PULSE</span>
505
+ </h1>
506
+ </div>
507
+ <nav class="flex space-x-6">
508
+ <a href="#" class="nav-item text-blue-300 hover:text-white py-2">Latest</a>
509
+ <a href="#" class="nav-item text-blue-300 hover:text-white py-2">Reports</a>
510
+ <a href="#" class="nav-item text-blue-300 hover:text-white py-2">Analysis</a>
511
+ <a href="#" class="nav-item text-blue-300 hover:text-white py-2">Resources</a>
512
+ </nav>
513
+ </div>
514
+ </div>
515
+ </header>
516
+
517
+ <!-- Main Content -->
518
+ <main class="container mx-auto px-4 py-8">
519
+ <!-- UAP Scanner Section -->
520
+ <section class="mb-12">
521
+ <h2 class="text-xl font-semibold text-white mb-4 flex items-center">
522
+ <i class="fas fa-satellite-dish text-blue-400 mr-2"></i> Advanced UAP Tracking System
523
+ </h2>
524
+
525
+ <div class="scanner-window" id="scannerWindow">
526
+ <div class="scanner-grid"></div>
527
+ <div class="scanner-overlay"></div>
528
+ <div class="scanner-crosshair"></div>
529
+ <div class="measurement-band" id="measurementBand"></div>
530
+
531
+ <!-- UAP markers will be added here dynamically -->
532
+
533
+ <div class="scanner-coordinates" id="scannerCoords">
534
+ Lat: 34.5362° | Long: -117.2928° | Alt: 831m | Victorville, CA
535
+ </div>
536
+
537
+ <div class="scanner-controls">
538
+ <button class="scanner-btn" id="startScanner" title="Start Scanner">
539
+ <i class="fas fa-play"></i>
540
+ </button>
541
+ <button class="scanner-btn" id="stopScanner" title="Stop Scanner">
542
+ <i class="fas fa-stop"></i>
543
+ </button>
544
+ <button class="scanner-btn" id="captureUAP" title="Capture UAP">
545
+ <i class="fas fa-camera"></i>
546
+ </button>
547
+ <button class="scanner-btn" id="toggleMeasurement" title="Toggle Measurement Band">
548
+ <i class="fas fa-ruler-combined"></i>
549
+ </button>
550
+ </div>
551
+
552
+ <video id="scannerVideo" autoplay muted playsinline style="display: none;"></video>
553
+ <canvas id="scannerCanvas" style="display: none;"></canvas>
554
+ </div>
555
+
556
+ <!-- Advanced Controls Panel -->
557
+ <div class="controls-panel">
558
+ <h3 class="controls-title">
559
+ <i class="fas fa-sliders-h mr-2"></i> Tracking Parameters
560
+ </h3>
561
+
562
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
563
+ <div class="control-group">
564
+ <label class="control-label">Reference Satellite</label>
565
+ <select class="control-select" id="satelliteSelect">
566
+ <option value="ISS">International Space Station (ISS)</option>
567
+ <option value="HST">Hubble Space Telescope (HST)</option>
568
+ <option value="GPS">GPS Satellite</option>
569
+ <option value="STARLINK">Starlink Satellite</option>
570
+ </select>
571
+ </div>
572
+
573
+ <div class="control-group">
574
+ <label class="control-label">Measurement Technique</label>
575
+ <select class="control-select" id="techniqueSelect">
576
+ <option value="triangulation">Triangulation</option>
577
+ <option value="ranging">LIDAR Ranging</option>
578
+ <option value="radar">Radar Tracking</option>
579
+ <option value="stereo">Stereoscopic Imaging</option>
580
+ </select>
581
+ </div>
582
+
583
+ <div class="control-group">
584
+ <label class="control-label">Atmospheric Correction</label>
585
+ <select class="control-select" id="atmosphereSelect">
586
+ <option value="standard">Standard Atmosphere</option>
587
+ <option value="current">Current Conditions</option>
588
+ <option value="none">None</option>
589
+ </select>
590
+ </div>
591
+ </div>
592
+
593
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
594
+ <div class="control-group">
595
+ <label class="control-label">Elevation Angle (°)</label>
596
+ <div class="slider-container">
597
+ <input type="range" min="0" max="90" value="45" class="w-full" id="elevationSlider">
598
+ <span class="slider-value" id="elevationValue">45</span>
599
+ </div>
600
+ </div>
601
+
602
+ <div class="control-group">
603
+ <label class="control-label">Azimuth Angle (°)</label>
604
+ <div class="slider-container">
605
+ <input type="range" min="0" max="360" value="180" class="w-full" id="azimuthSlider">
606
+ <span class="slider-value" id="azimuthValue">180</span>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="flex justify-end mt-4">
612
+ <button class="control-btn" id="calculateBtn">
613
+ <i class="fas fa-calculator mr-2"></i> Calculate Position
614
+ </button>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Data Visualization Panel -->
619
+ <div class="data-visualization">
620
+ <h3 class="data-title">
621
+ <i class="fas fa-chart-line mr-2"></i> Tracking Data
622
+ </h3>
623
+
624
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
625
+ <div>
626
+ <div class="data-label">Object Coordinates</div>
627
+ <div class="data-value" id="objCoords">34.5362° N, -117.2928° W</div>
628
+ <div class="data-value" id="objAltitude">0.0 km</div>
629
+ </div>
630
+
631
+ <div>
632
+ <div class="data-label">Reference Satellite</div>
633
+ <div class="data-value" id="satelliteName">ISS</div>
634
+ <div class="data-value" id="satelliteDistance">400.0 km</div>
635
+ </div>
636
+
637
+ <div>
638
+ <div class="data-label">Measurement Data</div>
639
+ <div class="data-value" id="measurementType">Triangulation</div>
640
+ <div class="data-value" id="measurementAccuracy">±50 m</div>
641
+ </div>
642
+ </div>
643
+
644
+ <!-- Radar Visualization -->
645
+ <div class="radar-visualization" id="radarVisualization">
646
+ <div class="radar-circle" style="width: 40%; height: 40%; top: 50%; left: 50%;"></div>
647
+ <div class="radar-circle" style="width: 70%; height: 70%; top: 50%; left: 50%;"></div>
648
+ <div class="radar-circle" style="width: 100%; height: 100%; top: 50%; left: 50%;"></div>
649
+ <div class="radar-sweep"></div>
650
+ <div class="radar-target" style="top: 30%; left: 40%;"></div>
651
+ <div class="radar-target" style="top: 60%; left: 70%;"></div>
652
+ </div>
653
+ </div>
654
+
655
+ <!-- 3D Viewer -->
656
+ <div class="viewer-3d" id="viewer3d">
657
+ <div class="viewer-controls">
658
+ <button class="scanner-btn" id="resetView" title="Reset View">
659
+ <i class="fas fa-crosshairs"></i>
660
+ </button>
661
+ <button class="scanner-btn" id="toggleOrbit" title="Toggle Orbit Controls">
662
+ <i class="fas fa-globe"></i>
663
+ </button>
664
+ <button class="scanner-btn" id="toggleAtmosphere" title="Toggle Atmosphere Layers">
665
+ <i class="fas fa-layer-group"></i>
666
+ </button>
667
+ </div>
668
+
669
+ <div class="atmosphere-levels">
670
+ <div class="atmosphere-level troposphere">Troposphere (0-12km)</div>
671
+ <div class="atmosphere-level stratosphere">Stratosphere (12-50km)</div>
672
+ <div class="atmosphere-level mesosphere">Mesosphere (50-85km)</div>
673
+ <div class="atmosphere-level thermosphere">Thermosphere (85-600km)</div>
674
+ <div class="atmosphere-level exosphere">Exosphere (600km+)</div>
675
+ </div>
676
+ </div>
677
+
678
+ <!-- Detected UAPs List -->
679
+ <div class="mt-6 bg-slate-800/50 rounded-lg p-4 border border-slate-700">
680
+ <h3 class="font-medium text-white mb-3 flex items-center">
681
+ <i class="fas fa-list-ul text-blue-400 mr-2"></i> Tracked Objects
682
+ </h3>
683
+ <div class="overflow-x-auto">
684
+ <table class="min-w-full divide-y divide-slate-700">
685
+ <thead>
686
+ <tr>
687
+ <th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">ID</th>
688
+ <th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Type</th>
689
+ <th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Coordinates</th>
690
+ <th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Altitude</th>
691
+ <th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Layer</th>
692
+ <th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Velocity</th>
693
+ <th class="px-4 py-2 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Actions</th>
694
+ </tr>
695
+ </thead>
696
+ <tbody id="uapTableBody" class="divide-y divide-slate-700">
697
+ <!-- UAP entries will be added here dynamically -->
698
+ </tbody>
699
+ </table>
700
+ </div>
701
+ </div>
702
+ </section>
703
+
704
+ <!-- Featured Post -->
705
+ <section class="mb-12">
706
+ <div class="bg-gradient-to-br from-blue-900/50 to-slate-900/50 rounded-xl p-6 shadow-xl border border-blue-800/30">
707
+ <div class="flex items-center mb-4">
708
+ <span class="bg-blue-500 text-white text-xs font-semibold px-2.5 py-0.5 rounded">BREAKING</span>
709
+ <span class="text-blue-300 text-sm ml-2">June 2024</span>
710
+ </div>
711
+ <h2 class="text-xl md:text-2xl font-bold text-white mb-3">New Atmospheric Tracking System Deployed in Victorville</h2>
712
+ <p class="text-blue-100 mb-4">"The advanced measurement system combines satellite triangulation with ground-based sensors to precisely track unidentified aerial phenomena across all atmospheric layers" - Project Lead Dr. Elena Vasquez.</p>
713
+ <div class="flex justify-between items-center">
714
+ <span class="text-xs text-blue-300">Source: UAP Research Initiative</span>
715
+ <button class="text-blue-400 hover:text-blue-200 text-sm flex items-center" onclick="generateQR('New Atmospheric Tracking System Deployed in Victorville', 'https://uap-pulse.example.com/posts/2024-victorville-tracking')">
716
+ <i class="fas fa-qrcode mr-1"></i> QR Code
717
+ </button>
718
+ </div>
719
+ </div>
720
+ </section>
721
+ </main>
722
+
723
+ <!-- Footer -->
724
+ <footer class="bg-slate-900 mt-16 py-8 border-t border-slate-800">
725
+ <div class="container mx-auto px-4">
726
+ <div class="flex flex-col md:flex-row justify-between items-center">
727
+ <div class="mb-4 md:mb-0">
728
+ <div class="flex items-center">
729
+ <i class="fas fa-ufo text-2xl text-blue-400 mr-2"></i>
730
+ <span class="text-xl font-bold text-white">UAP PULSE</span>
731
+ </div>
732
+ <p class="text-slate-400 text-sm mt-1">Advanced atmospheric tracking and UAP research</p>
733
+ </div>
734
+
735
+ <div class="flex space-x-6">
736
+ <a href="#" class="text-slate-400 hover:text-blue-300">
737
+ <i class="fab fa-twitter"></i>
738
+ </a>
739
+ <a href="#" class="text-slate-400 hover:text-blue-300">
740
+ <i class="fab fa-facebook"></i>
741
+ </a>
742
+ <a href="#" class="text-slate-400 hover:text-blue-300">
743
+ <i class="fab fa-reddit"></i>
744
+ </a>
745
+ <a href="#" class="text-slate-400 hover:text-blue-300">
746
+ <i class="fas fa-rss"></i>
747
+ </a>
748
+ </div>
749
+ </div>
750
+
751
+ <div class="border-t border-slate-800 mt-6 pt-6 flex flex-col md:flex-row justify-between items-center">
752
+ <p class="text-slate-500 text-sm mb-4 md:mb-0">© 2025 UAP Pulse. All rights reserved. Sponsored by SM+</p>
753
+ <div class="flex space-x-4">
754
+ <a href="#" class="text-slate-400 hover:text-blue-300 text-sm">Privacy</a>
755
+ <a href="#" class="text-slate-400 hover:text-blue-300 text-sm">Terms</a>
756
+ <a href="#" class="text-slate-400 hover:text-blue-300 text-sm">Contact</a>
757
+ <a href="#" class="text-slate-400 hover:text-blue-300 text-sm">Submit Report</a>
758
+ </div>
759
+ </div>
760
+ </div>
761
+ </footer>
762
+
763
+ <script>
764
+ // UAP Scanner and 3D Viewer functionality
765
+ document.addEventListener('DOMContentLoaded', function() {
766
+ // Scanner variables
767
+ const scannerWindow = document.getElementById('scannerWindow');
768
+ const scannerVideo = document.getElementById('scannerVideo');
769
+ const scannerCanvas = document.getElementById('scannerCanvas');
770
+ const scannerCoords = document.getElementById('scannerCoords');
771
+ const startScannerBtn = document.getElementById('startScanner');
772
+ const stopScannerBtn = document.getElementById('stopScanner');
773
+ const captureUAPBtn = document.getElementById('captureUAP');
774
+ const toggleMeasurementBtn = document.getElementById('toggleMeasurement');
775
+ const uapTableBody = document.getElementById('uapTableBody');
776
+ const measurementBand = document.getElementById('measurementBand');
777
+
778
+ // 3D Viewer variables
779
+ const viewer3d = document.getElementById('viewer3d');
780
+ const resetViewBtn = document.getElementById('resetView');
781
+ const toggleOrbitBtn = document.getElementById('toggleOrbit');
782
+ const toggleAtmosphereBtn = document.getElementById('toggleAtmosphere');
783
+
784
+ // Control panel variables
785
+ const satelliteSelect = document.getElementById('satelliteSelect');
786
+ const techniqueSelect = document.getElementById('techniqueSelect');
787
+ const atmosphereSelect = document.getElementById('atmosphereSelect');
788
+ const elevationSlider = document.getElementById('elevationSlider');
789
+ const elevationValue = document.getElementById('elevationValue');
790
+ const azimuthSlider = document.getElementById('azimuthSlider');
791
+ const azimuthValue = document.getElementById('azimuthValue');
792
+ const calculateBtn = document.getElementById('calculateBtn');
793
+
794
+ // Data visualization variables
795
+ const objCoords = document.getElementById('objCoords');
796
+ const objAltitude = document.getElementById('objAltitude');
797
+ const satelliteName = document.getElementById('satelliteName');
798
+ const satelliteDistance = document.getElementById('satelliteDistance');
799
+ const measurementType = document.getElementById('measurementType');
800
+ const measurementAccuracy = document.getElementById('measurementAccuracy');
801
+
802
+ // Three.js variables
803
+ let scene, camera, renderer, controls;
804
+ let uapObjects = [];
805
+ let orbitEnabled = true;
806
+ let atmosphereLayersVisible = true;
807
+
808
+ // UAP detection variables
809
+ let detectedUAPs = [];
810
+ let scannerActive = false;
811
+ let scanInterval;
812
+ let frameCount = 0;
813
+ let measurementVisible = false;
814
+
815
+ // Victorville, CA coordinates (default location)
816
+ const viewerLocation = {
817
+ lat: 34.5362,
818
+ long: -117.2928,
819
+ alt: 831 // meters
820
+ };
821
+
822
+ // Satellite data
823
+ const satellites = {
824
+ ISS: { name: "International Space Station", altitude: 408, color: 0x3b82f6 },
825
+ HST: { name: "Hubble Space Telescope", altitude: 540, color: 0x10b981 },
826
+ GPS: { name: "GPS Satellite", altitude: 20200, color: 0xf59e0b },
827
+ STARLINK: { name: "Starlink Satellite", altitude: 550, color: 0x8b5cf6 }
828
+ };
829
+
830
+ // Measurement techniques
831
+ const techniques = {
832
+ triangulation: { name: "Triangulation", accuracy: "±50 m" },
833
+ ranging: { name: "LIDAR Ranging", accuracy: "±5 m" },
834
+ radar: { name: "Radar Tracking", accuracy: "±100 m" },
835
+ stereo: { name: "Stereoscopic", accuracy: "±20 m" }
836
+ };
837
+
838
+ // Initialize measurement band
839
+ function initMeasurementBand() {
840
+ // Clear existing measurement lines
841
+ measurementBand.innerHTML = '';
842
+
843
+ if (!measurementVisible) return;
844
+
845
+ // Create measurement lines at different angles
846
+ const angles = [0, 15, 30, 45, 60, 75, 90];
847
+ const distances = [10, 20, 50, 100, 200, 500]; // km
848
+
849
+ // Create distance circles
850
+ distances.forEach(distance => {
851
+ const line = document.createElement('div');
852
+ line.className = 'measurement-line';
853
+ line.style.height = `${distance / 5}%`;
854
+ line.style.left = '50%';
855
+ line.style.bottom = '50%';
856
+ line.style.transform = 'translateX(-50%) rotate(0deg)';
857
+ line.style.opacity = '0.3';
858
+ measurementBand.appendChild(line);
859
+
860
+ const label = document.createElement('div');
861
+ label.className = 'measurement-label';
862
+ label.textContent = `${distance} km`;
863
+ label.style.left = '50%';
864
+ label.style.bottom = `${50 - distance / 10}%`;
865
+ label.style.transform = 'translateX(-50%)';
866
+ measurementBand.appendChild(label);
867
+ });
868
+
869
+ // Create angle lines
870
+ angles.forEach(angle => {
871
+ const line = document.createElement('div');
872
+ line.className = 'measurement-line';
873
+ line.style.height = '40%';
874
+ line.style.left = '50%';
875
+ line.style.bottom = '50%';
876
+ line.style.transform = `translateX(-50%) rotate(${angle}deg)`;
877
+ measurementBand.appendChild(line);
878
+
879
+ const label = document.createElement('div');
880
+ label.className = 'measurement-label';
881
+ label.textContent = `${angle}°`;
882
+ label.style.left = `${50 + Math.sin(angle * Math.PI / 180) * 20}%`;
883
+ label.style.bottom = `${50 - Math.cos(angle * Math.PI / 180) * 20}%`;
884
+ measurementBand.appendChild(label);
885
+ });
886
+ }
887
+
888
+ // Update measurement visualization
889
+ function updateMeasurement() {
890
+ const elevation = parseFloat(elevationSlider.value);
891
+ const azimuth = parseFloat(azimuthSlider.value);
892
+
893
+ // Update data display
894
+ objAltitude.textContent = `${(elevation * 10).toFixed(1)} km`;
895
+
896
+ // Calculate "detected" position (simulated)
897
+ const lat = viewerLocation.lat + (Math.random() * 0.2 - 0.1);
898
+ const long = viewerLocation.long + (Math.random() * 0.2 - 0.1);
899
+ objCoords.textContent = `${lat.toFixed(4)}° N, ${long.toFixed(4)}° W`;
900
+
901
+ // Update satellite info
902
+ const selectedSatellite = satelliteSelect.value;
903
+ satelliteName.textContent = satellites[selectedSatellite].name;
904
+ satelliteDistance.textContent = `${satellites[selectedSatellite].altitude} km`;
905
+
906
+ // Update technique info
907
+ const selectedTechnique = techniqueSelect.value;
908
+ measurementType.textContent = techniques[selectedTechnique].name;
909
+ measurementAccuracy.textContent = techniques[selectedTechnique].accuracy;
910
+ }
911
+
912
+ // Initialize 3D viewer
913
+ function init3DViewer() {
914
+ // Create scene
915
+ scene = new THREE.Scene();
916
+ scene.background = new THREE.Color(0x000000);
917
+
918
+ // Create camera
919
+ camera = new THREE.PerspectiveCamera(75, viewer3d.clientWidth / viewer3d.clientHeight, 0.1, 10000);
920
+ camera.position.z = 50;
921
+
922
+ // Create renderer
923
+ renderer = new THREE.WebGLRenderer({ antialias: true });
924
+ renderer.setSize(viewer3d.clientWidth, viewer3d.clientHeight);
925
+ viewer3d.appendChild(renderer.domElement);
926
+
927
+ // Add controls
928
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
929
+ controls.enableDamping = true;
930
+ controls.dampingFactor = 0.25;
931
+
932
+ // Add ambient light
933
+ const ambientLight = new THREE.AmbientLight(0x404040);
934
+ scene.add(ambientLight);
935
+
936
+ // Add directional light
937
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
938
+ directionalLight.position.set(1, 1, 1);
939
+ scene.add(directionalLight);
940
+
941
+ // Add Earth sphere
942
+ const geometry = new THREE.SphereGeometry(15, 32, 32);
943
+ const material = new THREE.MeshPhongMaterial({
944
+ color: 0x3b82f6,
945
+ specular: 0x111111,
946
+ shininess: 30
947
+ });
948
+ const earth = new THREE.Mesh(geometry, material);
949
+ scene.add(earth);
950
+
951
+ // Add atmosphere levels as transparent spheres
952
+ const addAtmosphereLayer = (radius, color, opacity) => {
953
+ const layerGeometry = new THREE.SphereGeometry(radius, 32, 32);
954
+ const layerMaterial = new THREE.MeshBasicMaterial({
955
+ color: color,
956
+ side: THREE.BackSide,
957
+ transparent: true,
958
+ opacity: opacity
959
+ });
960
+ const layer = new THREE.Mesh(layerGeometry, layerMaterial);
961
+ layer.userData.isAtmosphere = true;
962
+ scene.add(layer);
963
+ return layer;
964
+ };
965
+
966
+ // Add atmosphere layers (scaled down for visualization)
967
+ const troposphere = addAtmosphereLayer(15.5, 0x3b82f6, 0.2); // Troposphere
968
+ const stratosphere = addAtmosphereLayer(16, 0x10b981, 0.15); // Stratosphere
969
+ const mesosphere = addAtmosphereLayer(16.5, 0xf59e0b, 0.1); // Mesosphere
970
+ const thermosphere = addAtmosphereLayer(17.5, 0xef4444, 0.08); // Thermosphere
971
+ const exosphere = addAtmosphereLayer(20, 0x8b5cf6, 0.05); // Exosphere
972
+
973
+ // Add viewer location marker
974
+ const viewerMarkerGeometry = new THREE.SphereGeometry(0.3, 16, 16);
975
+ const viewerMarkerMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
976
+ const viewerMarker = new THREE.Mesh(viewerMarkerGeometry, viewerMarkerMaterial);
977
+
978
+ // Convert lat/long to 3D position
979
+ const phi = (90 - viewerLocation.lat) * (Math.PI / 180);
980
+ const theta = (viewerLocation.long + 180) * (Math.PI / 180);
981
+ const radius = 15 + viewerLocation.alt / 100000; // Very small offset for surface
982
+
983
+ viewerMarker.position.set(
984
+ radius * Math.sin(phi) * Math.cos(theta),
985
+ radius * Math.cos(phi),
986
+ radius * Math.sin(phi) * Math.sin(theta)
987
+ );
988
+ scene.add(viewerMarker);
989
+
990
+ // Add satellite
991
+ function addSatellite(satelliteType) {
992
+ // Remove existing satellite
993
+ scene.children.forEach(child => {
994
+ if (child.userData.isSatellite) {
995
+ scene.remove(child);
996
+ }
997
+ });
998
+
999
+ const sat = satellites[satelliteType];
1000
+ const satGeometry = new THREE.BoxGeometry(1, 1, 1);
1001
+ const satMaterial = new THREE.MeshPhongMaterial({ color: sat.color });
1002
+ const satellite = new THREE.Mesh(satGeometry, satMaterial);
1003
+ satellite.userData.isSatellite = true;
1004
+
1005
+ // Position satellite in orbit (simplified)
1006
+ const satRadius = 15 + sat.altitude / 100;
1007
+ satellite.position.set(satRadius, 0, 0);
1008
+ satellite.lookAt(0, 0, 0);
1009
+
1010
+ scene.add(satellite);
1011
+ }
1012
+
1013
+ // Initial satellite
1014
+ addSatellite('ISS');
1015
+
1016
+ // Handle window resize
1017
+ window.addEventListener('resize', () => {
1018
+ camera.aspect = viewer3d.clientWidth / viewer3d.clientHeight;
1019
+ camera.updateProjectionMatrix();
1020
+ renderer.setSize(viewer3d.clientWidth, viewer3d.clientHeight);
1021
+ });
1022
+
1023
+ // Animation loop
1024
+ function animate() {
1025
+ requestAnimationFrame(animate);
1026
+
1027
+ if (orbitEnabled) {
1028
+ controls.update();
1029
+ }
1030
+
1031
+ // Rotate satellites
1032
+ scene.children.forEach(child => {
1033
+ if (child.userData.isSatellite) {
1034
+ child.rotation.y += 0.001;
1035
+ }
1036
+ });
1037
+
1038
+ renderer.render(scene, camera);
1039
+ }
1040
+
1041
+ animate();
1042
+
1043
+ // Return functions to control the viewer
1044
+ return {
1045
+ addSatellite: addSatellite,
1046
+ toggleAtmosphere: function(visible) {
1047
+ scene.children.forEach(child => {
1048
+ if (child.userData.isAtmosphere) {
1049
+ child.visible = visible;
1050
+ }
1051
+ });
1052
+ }
1053
+ };
1054
+ }
1055
+
1056
+ // Initialize scanner
1057
+ function initScanner() {
1058
+ // Set up scanner buttons
1059
+ startScannerBtn.addEventListener('click', startScanner);
1060
+ stopScannerBtn.addEventListener('click', stopScanner);
1061
+ captureUAPBtn.addEventListener('click', captureUAP);
1062
+ toggleMeasurementBtn.addEventListener('click', toggleMeasurement);
1063
+
1064
+ // Set up 3D viewer buttons
1065
+ resetViewBtn.addEventListener('click', resetView);
1066
+ toggleOrbitBtn.addEventListener('click', toggleOrbitControls);
1067
+ toggleAtmosphereBtn.addEventListener('click', toggleAtmosphereLayers);
1068
+
1069
+ // Set up control panel
1070
+ elevationSlider.addEventListener('input', function() {
1071
+ elevationValue.textContent = this.value;
1072
+ updateMeasurement();
1073
+ });
1074
+
1075
+ azimuthSlider.addEventListener('input', function() {
1076
+ azimuthValue.textContent = this.value;
1077
+ updateMeasurement();
1078
+ });
1079
+
1080
+ satelliteSelect.addEventListener('change', function() {
1081
+ viewer3DControls.addSatellite(this.value);
1082
+ updateMeasurement();
1083
+ });
1084
+
1085
+ techniqueSelect.addEventListener('change', updateMeasurement);
1086
+ atmosphereSelect.addEventListener('change', updateMeasurement);
1087
+
1088
+ calculateBtn.addEventListener('click', calculatePosition);
1089
+
1090
+ // Initialize measurement band
1091
+ initMeasurementBand();
1092
+
1093
+ // Initialize 3D viewer
1094
+ viewer3DControls = init3DViewer();
1095
+
1096
+ // Simulate initial detection
1097
+ setTimeout(() => {
1098
+ simulateInitialDetection();
1099
+ }, 1000);
1100
+ }
1101
+
1102
+ // Toggle measurement band visibility
1103
+ function toggleMeasurement() {
1104
+ measurementVisible = !measurementVisible;
1105
+ toggleMeasurementBtn.classList.toggle('active');
1106
+ initMeasurementBand();
1107
+ }
1108
+
1109
+ // Toggle atmosphere layers visibility
1110
+ function toggleAtmosphereLayers() {
1111
+ atmosphereLayersVisible = !atmosphereLayersVisible;
1112
+ toggleAtmosphereBtn.classList.toggle('active');
1113
+ viewer3DControls.toggleAtmosphere(atmosphereLayersVisible);
1114
+ }
1115
+
1116
+ // Calculate position (simulated)
1117
+ function calculatePosition() {
1118
+ const elevation = parseFloat(elevationSlider.value);
1119
+ const azimuth = parseFloat(azimuthSlider.value);
1120
+ const technique = techniqueSelect.value;
1121
+ const atmosphere = atmosphereSelect.value;
1122
+
1123
+ // Show loading state
1124
+ calculateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Calculating...';
1125
+ calculateBtn.disabled = true;
1126
+
1127
+ // Simulate calculation delay
1128
+ setTimeout(() => {
1129
+ // Generate random UAP detection
1130
+ const uapId = 'UAP-' + Date.now().toString().slice(-4);
1131
+ const shapes = ['triangle', 'circle', 'square', 'cylinder', 'chevron', 'tictac'];
1132
+ const shape = shapes[Math.floor(Math.random() * shapes.length)];
1133
+
1134
+ // Calculate position based on inputs (simplified)
1135
+ const lat = viewerLocation.lat + (Math.random() * 0.2 - 0.1);
1136
+ const long = viewerLocation.long + (Math.random() * 0.2 - 0.1);
1137
+ const altitude = elevation * 10 + (Math.random() * 20 - 10);
1138
+
1139
+ // Determine atmosphere layer
1140
+ let atmosphereLayer, atmosphereColor;
1141
+ if (altitude < 12) {
1142
+ atmosphereLayer = 'Troposphere';
1143
+ atmosphereColor = '#3b82f6';
1144
+ } else if (altitude < 50) {
1145
+ atmosphereLayer = 'Stratosphere';
1146
+ atmosphereColor = '#10b981';
1147
+ } else if (altitude < 85) {
1148
+ atmosphereLayer = 'Mesosphere';
1149
+ atmosphereColor = '#f59e0b';
1150
+ } else if (altitude < 600) {
1151
+ atmosphereLayer = 'Thermosphere';
1152
+ atmosphereColor = '#ef4444';
1153
+ } else {
1154
+ atmosphereLayer = 'Exosphere';
1155
+ atmosphereColor = '#8b5cf6';
1156
+ }
1157
+
1158
+ // Create UAP object
1159
+ const uap = {
1160
+ id: uapId,
1161
+ shape: shape,
1162
+ lat: lat,
1163
+ long: long,
1164
+ altitude: altitude.toFixed(2),
1165
+ atmosphere: atmosphereLayer,
1166
+ atmosphereColor: atmosphereColor,
1167
+ velocity: (Math.random() * 5000 + 500).toFixed(0) + ' km/h',
1168
+ timestamp: new Date().toLocaleTimeString(),
1169
+ technique: technique,
1170
+ satellite: satelliteSelect.value
1171
+ };
1172
+
1173
+ detectedUAPs.push(uap);
1174
+ addUAPToTable(uap);
1175
+ addUAPTo3DViewer(uap);
1176
+
1177
+ // Reset button
1178
+ calculateBtn.innerHTML = '<i class="fas fa-calculator mr-2"></i> Calculate Position';
1179
+ calculateBtn.disabled = false;
1180
+
1181
+ // Show success message
1182
+ alert(`Successfully tracked object ${uapId} at ${altitude.toFixed(2)} km in the ${atmosphereLayer}`);
1183
+ }, 1500);
1184
+ }
1185
+
1186
+ // Simulate initial detections
1187
+ function simulateInitialDetection() {
1188
+ const initialUAPs = [
1189
+ {
1190
+ id: 'UAP-1001',
1191
+ shape: 'triangle',
1192
+ lat: 34.5362 + 0.05,
1193
+ long: -117.2928 - 0.03,
1194
+ altitude: '8.5',
1195
+ atmosphere: 'Troposphere',
1196
+ atmosphereColor: '#3b82f6',
1197
+ velocity: '1200 km/h',
1198
+ timestamp: new Date().toLocaleTimeString(),
1199
+ technique: 'radar',
1200
+ satellite: 'ISS'
1201
+ },
1202
+ {
1203
+ id: 'UAP-1002',
1204
+ shape: 'tictac',
1205
+ lat: 34.5362 - 0.12,
1206
+ long: -117.2928 + 0.08,
1207
+ altitude: '65.2',
1208
+ atmosphere: 'Mesosphere',
1209
+ atmosphereColor: '#f59e0b',
1210
+ velocity: '3500 km/h',
1211
+ timestamp: new Date().toLocaleTimeString(),
1212
+ technique: 'triangulation',
1213
+ satellite: 'ISS'
1214
+ },
1215
+ {
1216
+ id: 'UAP-1003',
1217
+ shape: 'circle',
1218
+ lat: 34.5362 + 0.18,
1219
+ long: -117.2928 + 0.15,
1220
+ altitude: '450.0',
1221
+ atmosphere: 'Thermosphere',
1222
+ atmosphereColor: '#ef4444',
1223
+ velocity: '28000 km/h',
1224
+ timestamp: new Date().toLocaleTimeString(),
1225
+ technique: 'ranging',
1226
+ satellite: 'HST'
1227
+ }
1228
+ ];
1229
+
1230
+ initialUAPs.forEach(uap => {
1231
+ detectedUAPs.push(uap);
1232
+ addUAPToTable(uap);
1233
+ addUAPTo3DViewer(uap);
1234
+ });
1235
+ }
1236
+
1237
+ // Start scanner
1238
+ function startScanner() {
1239
+ if (scannerActive) return;
1240
+
1241
+ // Request camera access
1242
+ navigator.mediaDevices.getUserMedia({ video: true })
1243
+ .then(function(stream) {
1244
+ scannerVideo.srcObject = stream;
1245
+ scannerVideo.style.display = 'block';
1246
+ scannerActive = true;
1247
+ startScannerBtn.classList.add('active');
1248
+
1249
+ // Start detection loop
1250
+ scanInterval = setInterval(detectUAPs, 100);
1251
+ })
1252
+ .catch(function(err) {
1253
+ console.error("Error accessing camera: ", err);
1254
+ alert("Could not access camera. Please ensure you've granted camera permissions.");
1255
+ });
1256
+ }
1257
+
1258
+ // Stop scanner
1259
+ function stopScanner() {
1260
+ if (!scannerActive) return;
1261
+
1262
+ clearInterval(scanInterval);
1263
+ const stream = scannerVideo.srcObject;
1264
+ const tracks = stream.getTracks();
1265
+
1266
+ tracks.forEach(function(track) {
1267
+ track.stop();
1268
+ });
1269
+
1270
+ scannerVideo.srcObject = null;
1271
+ scannerVideo.style.display = 'none';
1272
+ scannerActive = false;
1273
+ startScannerBtn.classList.remove('active');
1274
+
1275
+ // Clear any existing UAP markers
1276
+ clearUAPMarkers();
1277
+ }
1278
+
1279
+ // Detect UAPs in video feed (simulated)
1280
+ function detectUAPs() {
1281
+ if (!scannerActive) return;
1282
+
1283
+ frameCount++;
1284
+
1285
+ // Simulate UAP detection (in a real app, this would use computer vision)
1286
+ if (frameCount % 30 === 0) {
1287
+ // Random chance to detect a UAP
1288
+ if (Math.random() > 0.7) {
1289
+ const uapId = 'UAP-' + Date.now().toString().slice(-4);
1290
+ const shapes = ['triangle', 'circle', 'square', 'cylinder', 'chevron', 'tictac'];
1291
+ const shape = shapes[Math.floor(Math.random() * shapes.length)];
1292
+
1293
+ // Random position in scanner window
1294
+ const x = Math.random() * 80 + 10; // 10-90%
1295
+ const y = Math.random() * 80 + 10; // 10-90%
1296
+
1297
+ // Random altitude (0-1000km)
1298
+ const altitude = Math.random() * 1000;
1299
+
1300
+ // Determine atmosphere layer
1301
+ let atmosphere, atmosphereColor;
1302
+ if (altitude < 12) {
1303
+ atmosphere = 'Troposphere';
1304
+ atmosphereColor = '#3b82f6';
1305
+ } else if (altitude < 50) {
1306
+ atmosphere = 'Stratosphere';
1307
+ atmosphereColor = '#10b981';
1308
+ } else if (altitude < 85) {
1309
+ atmosphere = 'Mesosphere';
1310
+ atmosphereColor = '#f59e0b';
1311
+ } else if (altitude < 600) {
1312
+ atmosphere = 'Thermosphere';
1313
+ atmosphereColor = '#ef4444';
1314
+ } else {
1315
+ atmosphere = 'Exosphere';
1316
+ atmosphereColor = '#8b5cf6';
1317
+ }
1318
+
1319
+ // Generate random coordinates near user's location (simulated)
1320
+ const lat = viewerLocation.lat + (Math.random() * 0.2 - 0.1);
1321
+ const long = viewerLocation.long + (Math.random() * 0.2 - 0.1);
1322
+
1323
+ // Create UAP object
1324
+ const uap = {
1325
+ id: uapId,
1326
+ shape: shape,
1327
+ x: x,
1328
+ y: y,
1329
+ lat: lat,
1330
+ long: long,
1331
+ altitude: altitude.toFixed(2),
1332
+ atmosphere: atmosphere,
1333
+ atmosphereColor: atmosphereColor,
1334
+ velocity: (Math.random() * 5000 + 500).toFixed(0) + ' km/h',
1335
+ timestamp: new Date().toLocaleTimeString(),
1336
+ technique: techniqueSelect.value,
1337
+ satellite: satelliteSelect.value
1338
+ };
1339
+
1340
+ detectedUAPs.push(uap);
1341
+ addUAPMarker(uap);
1342
+ addUAPToTable(uap);
1343
+ addUAPTo3DViewer(uap);
1344
+
1345
+ // Update coordinates display
1346
+ scannerCoords.textContent = `Lat: ${lat.toFixed(4)}° | Long: ${long.toFixed(4)}° | Alt: ${altitude.toFixed(2)}km | ${atmosphere}`;
1347
+ }
1348
+ }
1349
+
1350
+ // Simulate movement of existing UAPs
1351
+ detectedUAPs.forEach(uap => {
1352
+ // Small random movement
1353
+ uap.x += (Math.random() - 0.5) * 0.5;
1354
+ uap.y += (Math.random() - 0.5) * 0.5;
1355
+
1356
+ // Update marker position
1357
+ const marker = document.querySelector(`.uap-marker[data-id="${uap.id}"]`);
1358
+ if (marker) {
1359
+ marker.style.left = `${uap.x}%`;
1360
+ marker.style.top = `${uap.y}%`;
1361
+ }
1362
+
1363
+ // Update 3D position
1364
+ updateUAPIn3DViewer(uap);
1365
+ });
1366
+ }
1367
+
1368
+ // Add UAP marker to scanner view
1369
+ function addUAPMarker(uap) {
1370
+ const marker = document.createElement('div');
1371
+ marker.className = 'uap-marker';
1372
+ marker.dataset.id = uap.id;
1373
+ marker.style.left = `${uap.x}%`;
1374
+ marker.style.top = `${uap.y}%`;
1375
+ marker.style.backgroundColor = uap.atmosphereColor;
1376
+ marker.style.boxShadow = `0 0 10px ${uap.atmosphereColor}`;
1377
+
1378
+ // Add info tooltip
1379
+ const info = document.createElement('div');
1380
+ info.className = 'uap-info';
1381
+ info.innerHTML = `
1382
+ <strong>${uap.id}</strong><br>
1383
+ Shape: ${uap.shape}<br>
1384
+ Alt: ${uap.altitude}km<br>
1385
+ ${uap.atmosphere}
1386
+ `;
1387
+ marker.appendChild(info);
1388
+
1389
+ // Show info on hover
1390
+ marker.addEventListener('mouseenter', () => {
1391
+ info.style.display = 'block';
1392
+ });
1393
+
1394
+ marker.addEventListener('mouseleave', () => {
1395
+ info.style.display = 'none';
1396
+ });
1397
+
1398
+ scannerWindow.appendChild(marker);
1399
+ }
1400
+
1401
+ // Clear all UAP markers
1402
+ function clearUAPMarkers() {
1403
+ document.querySelectorAll('.uap-marker').forEach(marker => {
1404
+ marker.remove();
1405
+ });
1406
+ }
1407
+
1408
+ // Add UAP to table
1409
+ function addUAPToTable(uap) {
1410
+ const row = document.createElement('tr');
1411
+ row.className = 'hover:bg-slate-700/50';
1412
+ row.innerHTML = `
1413
+ <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-white">${uap.id}</td>
1414
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">${uap.shape}</td>
1415
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">${uap.lat.toFixed(4)}°, ${uap.long.toFixed(4)}°</td>
1416
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">${uap.altitude}km</td>
1417
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">
1418
+ <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: ${uap.atmosphereColor}"></span>
1419
+ ${uap.atmosphere}
1420
+ </td>
1421
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">${uap.velocity}</td>
1422
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-slate-300">
1423
+ <button class="text-blue-400 hover:text-blue-200 mr-2" onclick="focusUAP('${uap.id}')">
1424
+ <i class="fas fa-search"></i>
1425
+ </button>
1426
+ <button class="text-red-400 hover:text-red-200" onclick="removeUAP('${uap.id}')">
1427
+ <i class="fas fa-trash"></i>
1428
+ </button>
1429
+ </td>
1430
+ `;
1431
+ uapTableBody.appendChild(row);
1432
+ }
1433
+
1434
+ // Add UAP to 3D viewer
1435
+ function addUAPTo3DViewer(uap) {
1436
+ // Scale down altitude for visualization (Earth radius = 15 units)
1437
+ const scaledAltitude = parseFloat(uap.altitude) / 1000 * 15 + 15;
1438
+
1439
+ // Convert lat/long to 3D position
1440
+ const phi = (90 - uap.lat) * (Math.PI / 180);
1441
+ const theta = (uap.long + 180) * (Math.PI / 180);
1442
+
1443
+ const x = scaledAltitude * Math.sin(phi) * Math.cos(theta);
1444
+ const y = scaledAltitude * Math.cos(phi);
1445
+ const z = scaledAltitude * Math.sin(phi) * Math.sin(theta);
1446
+
1447
+ // Create UAP object based on shape
1448
+ let geometry, material;
1449
+
1450
+ switch(uap.shape) {
1451
+ case 'triangle':
1452
+ geometry = new THREE.ConeGeometry(0.5, 1, 3);
1453
+ break;
1454
+ case 'circle':
1455
+ geometry = new THREE.SphereGeometry(0.5);
1456
+ break;
1457
+ case 'square':
1458
+ geometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
1459
+ break;
1460
+ case 'cylinder':
1461
+ geometry = new THREE.CylinderGeometry(0.4, 0.4, 1, 32);
1462
+ break;
1463
+ case 'chevron':
1464
+ // Create a chevron shape using a custom geometry
1465
+ const chevronShape = new THREE.Shape();
1466
+ chevronShape.moveTo(-0.5, 0.5);
1467
+ chevronShape.lineTo(0, -0.5);
1468
+ chevronShape.lineTo(0.5, 0.5);
1469
+ geometry = new THREE.ExtrudeGeometry(chevronShape, {
1470
+ depth: 0.2,
1471
+ bevelEnabled: false
1472
+ });
1473
+ break;
1474
+ case 'tictac':
1475
+ geometry = new THREE.CapsuleGeometry(0.3, 1, 4, 8);
1476
+ break;
1477
+ default:
1478
+ geometry = new THREE.SphereGeometry(0.5);
1479
+ }
1480
+
1481
+ material = new THREE.MeshPhongMaterial({
1482
+ color: new THREE.Color(uap.atmosphereColor),
1483
+ emissive: new THREE.Color(uap.atmosphereColor),
1484
+ emissiveIntensity: 0.5,
1485
+ specular: 0x111111,
1486
+ shininess: 30
1487
+ });
1488
+
1489
+ const uapObject = new THREE.Mesh(geometry, material);
1490
+ uapObject.position.set(x, y, z);
1491
+ uapObject.userData.uapId = uap.id;
1492
+
1493
+ // Rotate to face outward from Earth
1494
+ uapObject.lookAt(0, 0, 0);
1495
+
1496
+ // Add to scene
1497
+ scene.add(uapObject);
1498
+
1499
+ // Store reference
1500
+ uapObjects.push({
1501
+ id: uap.id,
1502
+ object: uapObject
1503
+ });
1504
+ }
1505
+
1506
+ // Update UAP position in 3D viewer
1507
+ function updateUAPIn3DViewer(uap) {
1508
+ const uapObj = uapObjects.find(obj => obj.id === uap.id);
1509
+ if (!uapObj) return;
1510
+
1511
+ // Scale down altitude for visualization
1512
+ const scaledAltitude = parseFloat(uap.altitude) / 1000 * 15 + 15;
1513
+
1514
+ // Convert lat/long to 3D position
1515
+ const phi = (90 - uap.lat) * (Math.PI / 180);
1516
+ const theta = (uap.long + 180) * (Math.PI / 180);
1517
+
1518
+ const x = scaledAltitude * Math.sin(phi) * Math.cos(theta);
1519
+ const y = scaledAltitude * Math.cos(phi);
1520
+ const z = scaledAltitude * Math.sin(phi) * Math.sin(theta);
1521
+
1522
+ // Update position
1523
+ uapObj.object.position.set(x, y, z);
1524
+
1525
+ // Rotate to face outward from Earth
1526
+ uapObj.object.lookAt(0, 0, 0);
1527
+ }
1528
+
1529
+ // Capture UAP (take screenshot)
1530
+ function captureUAP() {
1531
+ if (!scannerActive || detectedUAPs.length === 0) {
1532
+ alert("No UAPs detected to capture!");
1533
+ return;
1534
+ }
1535
+
1536
+ // Get the latest UAP
1537
+ const uap = detectedUAPs[detectedUAPs.length - 1];
1538
+
1539
+ // In a real app, this would capture the actual video frame
1540
+ // For demo, we'll just show an alert
1541
+ alert(`Captured UAP ${uap.id}\nShape: ${uap.shape}\nCoordinates: ${uap.lat.toFixed(4)}°, ${uap.long.toFixed(4)}°\nAltitude: ${uap.altitude}km (${uap.atmosphere})`);
1542
+
1543
+ // Highlight the UAP in the table
1544
+ const rows = uapTableBody.querySelectorAll('tr');
1545
+ rows[rows.length - 1].classList.add('bg-blue-900/30');
1546
+ setTimeout(() => {
1547
+ rows[rows.length - 1].classList.remove('bg-blue-900/30');
1548
+ }, 2000);
1549
+ }
1550
+
1551
+ // Reset 3D view
1552
+ function resetView() {
1553
+ camera.position.set(0, 0, 50);
1554
+ camera.lookAt(0, 0, 0);
1555
+ controls.target.set(0, 0, 0);
1556
+ }
1557
+
1558
+ // Toggle orbit controls
1559
+ function toggleOrbitControls() {
1560
+ orbitEnabled = !orbitEnabled;
1561
+ controls.enabled = orbitEnabled;
1562
+ toggleOrbitBtn.classList.toggle('active');
1563
+ }
1564
+
1565
+ // Focus on a specific UAP in 3D view
1566
+ window.focusUAP = function(uapId) {
1567
+ const uap = detectedUAPs.find(u => u.id === uapId);
1568
+ if (!uap) return;
1569
+
1570
+ const uapObj = uapObjects.find(obj => obj.id === uapId);
1571
+ if (!uapObj) return;
1572
+
1573
+ // Move camera to view the UAP
1574
+ const targetPosition = uapObj.object.position.clone();
1575
+ const cameraPosition = targetPosition.clone().multiplyScalar(1.5);
1576
+
1577
+ // Animate camera
1578
+ gsap.to(camera.position, {
1579
+ x: cameraPosition.x,
1580
+ y: cameraPosition.y,
1581
+ z: cameraPosition.z,
1582
+ duration: 1,
1583
+ ease: "power2.inOut"
1584
+ });
1585
+
1586
+ gsap.to(controls.target, {
1587
+ x: targetPosition.x,
1588
+ y: targetPosition.y,
1589
+ z: targetPosition.z,
1590
+ duration: 1,
1591
+ ease: "power2.inOut"
1592
+ });
1593
+
1594
+ // Highlight the UAP in the table
1595
+ const rows = uapTableBody.querySelectorAll('tr');
1596
+ rows.forEach(row => {
1597
+ if (row.querySelector('td:first-child').textContent === uapId) {
1598
+ row.classList.add('bg-blue-900/30');
1599
+ setTimeout(() => {
1600
+ row.classList.remove('bg-blue-900/30');
1601
+ }, 2000);
1602
+ }
1603
+ });
1604
+ };
1605
+
1606
+ // Remove a UAP
1607
+ window.removeUAP = function(uapId) {
1608
+ // Remove from detected UAPs array
1609
+ detectedUAPs = detectedUAPs.filter(u => u.id !== uapId);
1610
+
1611
+ // Remove from 3D scene
1612
+ const uapObjIndex = uapObjects.findIndex(obj => obj.id === uapId);
1613
+ if (uapObjIndex !== -1) {
1614
+ scene.remove(uapObjects[uapObjIndex].object);
1615
+ uapObjects.splice(uapObjIndex, 1);
1616
+ }
1617
+
1618
+ // Remove from table
1619
+ const rows = uapTableBody.querySelectorAll('tr');
1620
+ rows.forEach(row => {
1621
+ if (row.querySelector('td:first-child').textContent === uapId) {
1622
+ row.remove();
1623
+ }
1624
+ });
1625
+
1626
+ // Remove marker
1627
+ const marker = document.querySelector(`.uap-marker[data-id="${uapId}"]`);
1628
+ if (marker) marker.remove();
1629
+ };
1630
+
1631
+ // Generate QR code
1632
+ function generateQR(title, url) {
1633
+ const qr = qrcode(0, 'L');
1634
+ qr.addData(url);
1635
+ qr.make();
1636
+
1637
+ const qrSize = 200;
1638
+ const qrContainer = document.createElement('div');
1639
+ qrContainer.style.position = 'fixed';
1640
+ qrContainer.style.top = '50%';
1641
+ qrContainer.style.left = '50%';
1642
+ qrContainer.style.transform = 'translate(-50%, -50%)';
1643
+ qrContainer.style.backgroundColor = 'white';
1644
+ qrContainer.style.padding = '20px';
1645
+ qrContainer.style.borderRadius = '8px';
1646
+ qrContainer.style.zIndex = '1000';
1647
+ qrContainer.style.boxShadow = '0 0 20px rgba(0,0,0,0.5)';
1648
+
1649
+ const qrTitle = document.createElement('h3');
1650
+ qrTitle.textContent = title;
1651
+ qrTitle.style.marginBottom = '10px';
1652
+ qrTitle.style.textAlign = 'center';
1653
+ qrContainer.appendChild(qrTitle);
1654
+
1655
+ const qrCanvas = qr.createImgTag(4, 0);
1656
+ qrContainer.innerHTML += qrCanvas;
1657
+
1658
+ const closeBtn = document.createElement('button');
1659
+ closeBtn.textContent = 'Close';
1660
+ closeBtn.style.display = 'block';
1661
+ closeBtn.style.margin = '10px auto 0';
1662
+ closeBtn.style.padding = '5px 15px';
1663
+ closeBtn.style.backgroundColor = '#3b82f6';
1664
+ closeBtn.style.color = 'white';
1665
+ closeBtn.style.border = 'none';
1666
+ closeBtn.style.borderRadius = '4px';
1667
+ closeBtn.style.cursor = 'pointer';
1668
+ closeBtn.addEventListener('click', () => {
1669
+ document.body.removeChild(qrContainer);
1670
+ });
1671
+ qrContainer.appendChild(closeBtn);
1672
+
1673
+ document.body.appendChild(qrContainer);
1674
+ }
1675
+
1676
+ // Initialize the scanner
1677
+ initScanner();
1678
+ });
1679
+ </script>
1680
+ <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=privateuserh/privateuserh-uaphe-vbeta1-04" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1681
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Update measurement band to determine object coordinates using Measuring the depth and distance of an object's height in the atmosphere from a viewer's perspective, spanning the range from the troposphere to the exosphere, involves a variety of techniques and considerations due to the changing nature of the atmosphere and the scale of distances involved. A fundamental starting point for any such measurement is establishing the viewer's coordinates (latitude, longitude, and altitude). This provides a crucial reference point for all subsequent calculations. Here's a breakdown of how this is approached across different atmospheric layers: 1. Troposphere (0 to ~12 km): In the lowest layer of the atmosphere, where most weather occurs and human activity is concentrated, relatively straightforward methods can be employed for nearby objects. Trigonometry: For objects at a known horizontal distance, the height can be determined using basic trigonometry if the angle of elevation from the viewer to the object's top and base is measured. This requires a stable platform for angle measurement (like a theodolite) and a method to determine the horizontal distance (like ground-based measurements, GPS, or laser rangefinders). Stereoscopy: For objects captured in multiple images from different viewpoints, stereoscopy can be used to determine distance and height by analyzing the apparent shift of the object against the background. Lidar (Light Detection and Ranging): Ground-based or airborne lidar systems can emit laser pulses and measure the time it takes for them to return after reflecting off the object. Knowing the speed of light, the distance can be calculated precisely. By scanning the object, its height can also be determined. Radar: Similar to lidar, radar uses radio waves to determine the distance and velocity of objects. This is commonly used for tracking aircraft and weather phenomena. Challenges in the Troposphere: Atmospheric Refraction: Variations in temperature, pressure, and humidity can cause light or radio waves to bend as they pass through the air, affecting the apparent position and distance of the object. This effect is more significant for objects farther away and closer to the horizon. Corrections based on atmospheric models or local measurements are often necessary. Obstructions: Terrain, buildings, and weather can block the line of sight. 2. Stratosphere (~12 to ~50 km): As we move into the stratosphere, the air becomes much thinner, and the effects of atmospheric refraction are less pronounced but still present. Objects in this region might include high-altitude balloons or some types of aircraft. Tracking Systems: Radar and other tracking systems designed for higher altitudes are employed. GPS: Objects equipped with GPS receivers can report their altitude and position. Balloon-borne Instruments (Radiosondes): These instruments carried by balloons measure atmospheric parameters and can also track the balloon's altitude via GPS or radar. Challenges in the Stratosphere: Increased Distance: Objects are generally farther away, requiring more powerful sensors and more sophisticated tracking algorithms. Limited Visual Reference: Without features like clouds, determining height visually becomes more difficult. 3. Mesosphere (~50 to ~80 km): This layer is characterized by decreasing temperatures. Objects here could include meteors or some research rockets. Radar: Specialized atmospheric radars can detect and track objects in the mesosphere. Optical Observations: Observing phenomena like noctilucent clouds or meteor trails from the ground can provide some information about this layer, but precise height and distance measurements of specific objects are more challenging without active tracking. Challenges in the Mesosphere: Very Low Atmospheric Density: Conventional aerodynamic measurements are not possible. Transient Objects: Many phenomena are short-lived. 4. Thermosphere (~80 to ~700 km): The thermosphere is characterized by rapidly increasing temperatures due to the absorption of solar radiation. This is where the International Space Station orbits and where auroras occur. Satellite Tracking: Objects in orbit are tracked using ground-based radar, telescopes, and laser ranging. Their altitude is determined relative to the Earth's surface. Telemetry: Spacecraft in the thermosphere transmit telemetry data that includes orbital parameters and altitude information. Challenges in the Thermosphere: Defining "Height": The concept of height within a dense atmosphere is less relevant here. Altitude is measured as the distance from the Earth's surface or center. High Orbital Speeds: Objects move at very high velocities, requiring sophisticated tracking and prediction. 5. Exosphere (~700 to ~10,000+ km): The outermost layer gradually merges with outer space. It contains very sparse particles. Satellites in higher orbits reside here. Satellite Tracking: Similar to the thermosphere, tracking is done using ground-based systems and onboard navigation. Space-Based Sensors: Other satellites can be used to track objects in the exosphere. Challenges in the Exosphere: Extremely Low Density: The atmosphere is negligible for measurement purposes. Vast Distances: Objects can be very far from the viewer on Earth. General Considerations and Techniques: Earth's Curvature: For any significant horizontal distance, the curvature of the Earth must be taken into account when calculating height and distance from a ground-based viewer. Atmospheric Models: Standard atmospheric models provide average profiles of temperature, pressure, and density with altitude, which are used to estimate refractive effects. However, real-time local atmospheric data can improve accuracy. Multiple Observation Points: Using observations from multiple locations (triangulation) can significantly improve the accuracy of distance and height measurements, especially for objects without active tracking or altitude reporting. Active vs. Passive Measurement: Active methods (like radar and lidar) emit signals to probe the object, while passive methods (like optical observation and relying on onboard GPS) rely on receiving existing signals or light. In summary, measuring the depth and distance of an object's height in the atmosphere from a viewer's point of view requires a tailored approach depending on the object's altitude. Starting with basic trigonometric and optical methods in the lower troposphere, the techniques evolve to utilize radar, satellite tracking, and specialized atmospheric measurements as the altitude increases towards the exosphere. Accounting for the viewer's precise location and the effects of atmospheric conditions and Earth's curvature are critical for obtaining accurate measurements across all layers. Maybe a measurement band starting from the ISS location at users location reference point coordinates to the viewers coordinates. If the ISS orbits at a certain height maybe an extrapolation can happen Show thinking Okay, let's consider the idea of using the International Space Station (ISS) as a reference point to measure the depth and distance of objects within the Earth's atmosphere from your location. First, it's important to understand the typical orbital altitude of the ISS. The ISS orbits the Earth at an average altitude of approximately 400 kilometers (about 250 miles) within the Thermosphere layer of the atmosphere. Its precise altitude fluctuates due to various factors, including atmospheric drag (even at that altitude, there's some thin atmosphere) and reboost maneuvers. Calculating the Distance to the ISS from Your Location: To determine the distance between your location (viewer's coordinates: latitude, longitude, altitude) and the ISS at a given moment, you would need the precise current coordinates of the ISS. Satellite tracking data provides this information. The calculation involves spherical geometry or vector math, taking into account the curvature of the Earth. Essentially, you are calculating the distance between two points in 3D space: your location on or near the Earth's surface and the ISS at its specific altitude and geographic coordinates. This is more complex than a simple straight-line distance on a flat plane. Online ISS trackers and astronomical software perform these complex calculations for you, providing the current distance and direction to the station from any given point on Earth. Using the ISS as a "Measurement Band" - The Challenge: While the ISS's altitude provides a known reference point in space, using it as a direct "measurement band" for extrapolating the height and distance of objects within the lower layers of the atmosphere (troposphere, stratosphere, mesosphere) from your viewing location is not a standard or practical method for atmospheric measurement. Here's why: Vast Difference in Scale: The ISS orbits far above the altitudes where most atmospheric phenomena occur (weather, clouds, typical aircraft). The physical principles and measurement techniques applicable at 400 km are vastly different from those used to measure objects at, say, 10 km or 50 km altitude. Indirect Relationship: The distance and angle to the ISS from your location are primarily determined by its orbital path and your position on Earth, not by the presence or height of objects within the atmosphere below its orbit. Atmospheric Effects: As discussed previously, measurements within the atmosphere are significantly affected by factors like atmospheric refraction and the Earth's curvature, which vary with altitude and atmospheric conditions. The light or radio waves from an object in the troposphere or stratosphere reaching your eye or sensor are subject to these effects in a way that is not directly linked to the simultaneous path of light or signals to the much higher orbiting ISS. Lack of Direct Reference for Lower Objects: Observing the ISS tells you its position, but it doesn't provide a direct geometric or physical reference that simplifies measuring the height or distance of an unrelated object at a much lower altitude. How Known Altitudes are Used as References (but not typically like this): Known altitudes and positions are indeed crucial in atmospheric and aerospace measurements, but they are used in different ways: Calibration: Instruments like altimeters are calibrated based on standard atmospheric models or known ground points. Triangulation and Ranging: As mentioned earlier, measuring angles or distances from multiple known locations to an object allows for the calculation of its position and height. Satellite Tracking: The known orbital parameters and ground station locations are used to precisely track satellites like the ISS. In essence, while you can calculate the distance from your location to the ISS at any given time, this distance doesn't provide a practical baseline or reference for directly extrapolating the height and distance of objects within the Earth's atmosphere from your viewpoint. Measuring atmospheric object height and distance relies on techniques specifically designed for those altitudes and the atmospheric conditions present. Use calibration triangulation ranging and current commercial satellite tracking to determine the equation Show thinking Based on your request to combine calibration, triangulation, ranging, and current commercial satellite tracking to determine an equation for the depth and distance of an object's height in the atmosphere from a viewer's location in Victorville, California, it's important to clarify how these concepts are typically applied. A single, overarching equation that directly incorporates commercial satellite tracking data (like the position of an orbiting satellite) as a variable to geometrically determine the height and distance of a lower atmospheric object from a ground viewer's perspective using triangulation or ranging is not a standard method in atmospheric measurements. Here's a breakdown of how these concepts are used, and why a simple combined equation as you might envision isn't practical: Calibration: Calibration is a fundamental prerequisite for any accurate measurement, regardless of the technique used. It involves ensuring that the instruments used for triangulation (theodolites, cameras), ranging (laser rangefinders, radar), or tracking are providing accurate readings against known standards. Calibration factors are applied to instrument data before it is used in geometric calculations. It's not a variable within the geometric equation itself.   Triangulation: This technique determines the position of an object by measuring angles from two or more points with known locations. If you have two observation points on the ground (Viewer Location 1 and Viewer Location 2) with known coordinates (x 1 ,y 1 ,z 1 ) and (x 2 ,y 2 ,z 2 ), and you measure the angles of elevation (θ 1 , θ 2 ) and the horizontal angles (bearings) to the object (O) from both points, you can form triangles.   Let the object's coordinates be (x o ,y o ,z o ). The horizontal distance from each viewer to the point directly below the object can be calculated using the law of sines based on the triangle formed by the two viewer locations and the point directly below the object. Once the horizontal distance to the object from one viewer is known (let's call it d 1 ), the object's height (h) above the viewer's altitude can be found using basic trigonometry: h=d 1 tan(θ 1 ) The object's altitude above sea level would then be z 1 +h. The distance to the object from Viewer 1 is the hypotenuse of the right triangle formed by the height and the horizontal distance: d 1 2 +h 2 . This requires precise synchronization of measurements and accurate knowledge of the viewer locations. Earth's curvature and atmospheric refraction need to be accounted for, especially over longer distances. Ranging: This technique determines the distance to an object by measuring the time it takes for a signal (like a laser pulse or radio wave) to travel to the object and return. If the distance (R) to the object from a known location (viewer or a ground station) is measured, and the angle of elevation (θ) to the object is also measured, the height above the viewer's altitude can be estimated: h=Rsin(θ) Again, Earth's curvature and atmospheric refraction influence these measurements. Current Commercial Satellite Tracking: Commercial satellites, like the ISS, are in orbit far above the atmosphere where most atmospheric objects of interest are located. Tracking these satellites involves determining their precise orbital parameters and current position using networks of ground stations that receive signals from the satellites or use radar.