Hugging Face's logo

Spaces:
AtomicLSD
/
anycoder-274697de
Running

App Files Community
AtomicLSD commited on
Commit
3c56760
·
verified ·
1 Parent(s): a3a8e1e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +837 -19
index.html CHANGED
@@ -1,19 +1,837 @@
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>Worldview - Earth Data Visualization</title>
7
+ <!-- Import FontAwesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+
10
+ <style>
11
+ :root {
12
+ --bg-dark: #262b31;
13
+ --bg-panel: #2c3238;
14
+ --bg-header: #1a1d21;
15
+ --text-main: #e0e0e0;
16
+ --text-muted: #a0a0a0;
17
+ --accent-color: #007bff;
18
+ --accent-hover: #0056b3;
19
+ --border-color: #444;
20
+ --toolbar-height: 60px;
21
+ --sidebar-width: 320px;
22
+ --timeline-height: 80px;
23
+ --transition-speed: 0.3s;
24
+ }
25
+
26
+ * {
27
+ box-sizing: border-box;
28
+ margin: 0;
29
+ padding: 0;
30
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
31
+ }
32
+
33
+ body {
34
+ background-color: #000;
35
+ color: var(--text-main);
36
+ overflow: hidden;
37
+ height: 100vh;
38
+ width: 100vw;
39
+ display: flex;
40
+ flex-direction: column;
41
+ }
42
+
43
+ /* --- Header / Toolbar --- */
44
+ header {
45
+ height: var(--toolbar-height);
46
+ background-color: var(--bg-header);
47
+ display: flex;
48
+ align-items: center;
49
+ padding: 0 10px;
50
+ z-index: 100;
51
+ box-shadow: 0 2px 10px rgba(0,0,0,0.5);
52
+ border-bottom: 1px solid var(--border-color);
53
+ }
54
+
55
+ .wv-toolbar {
56
+ display: flex;
57
+ gap: 5px;
58
+ margin-left: auto;
59
+ }
60
+
61
+ .wv-toolbar-button {
62
+ background: var(--bg-panel);
63
+ border: 1px solid var(--border-color);
64
+ color: var(--text-main);
65
+ width: 44px;
66
+ height: 44px;
67
+ border-radius: 4px;
68
+ cursor: pointer;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ transition: all 0.2s;
73
+ position: relative;
74
+ }
75
+
76
+ .wv-toolbar-button:hover {
77
+ background-color: var(--accent-color);
78
+ border-color: var(--accent-color);
79
+ }
80
+
81
+ .wv-toolbar-button svg {
82
+ font-size: 18px;
83
+ }
84
+
85
+ .anycoder-credit {
86
+ margin-right: 20px;
87
+ font-size: 0.85rem;
88
+ color: var(--text-muted);
89
+ text-decoration: none;
90
+ border: 1px solid var(--border-color);
91
+ padding: 5px 10px;
92
+ border-radius: 4px;
93
+ transition: 0.2s;
94
+ }
95
+
96
+ .anycoder-credit:hover {
97
+ color: #fff;
98
+ border-color: #fff;
99
+ }
100
+
101
+ /* --- Main Layout --- */
102
+ #app {
103
+ position: relative;
104
+ flex: 1;
105
+ display: flex;
106
+ overflow: hidden;
107
+ }
108
+
109
+ /* --- Map Area --- */
110
+ #wv-map {
111
+ flex: 1;
112
+ position: relative;
113
+ background: #0f1114;
114
+ background-image:
115
+ radial-gradient(circle at 50% 50%, rgba(20, 30, 48, 0.5) 0%, rgba(0,0,0,1) 100%),
116
+ linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
117
+ linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
118
+ background-size: 100% 100%, 50px 50px, 50px 50px;
119
+ overflow: hidden;
120
+ }
121
+
122
+ /* Abstract Globe Representation */
123
+ .globe-placeholder {
124
+ position: absolute;
125
+ top: 50%;
126
+ left: 50%;
127
+ transform: translate(-50%, -50%);
128
+ width: 600px;
129
+ height: 600px;
130
+ border-radius: 50%;
131
+ background: radial-gradient(circle at 30% 30%, #2a5298, #1e3c72);
132
+ box-shadow: 0 0 50px rgba(0,0,0,0.8), inset -20px -20px 50px rgba(0,0,0,0.5);
133
+ opacity: 0.8;
134
+ animation: pulse 10s infinite alternate;
135
+ }
136
+
137
+ @keyframes pulse {
138
+ 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
139
+ 100% { transform: translate(-50%, -50%) scale(1.02); opacity: 0.9; }
140
+ }
141
+
142
+ /* --- Sidebar --- */
143
+ #wv-sidebar {
144
+ position: absolute;
145
+ top: 0;
146
+ left: 0;
147
+ height: 100%;
148
+ width: var(--sidebar-width);
149
+ background-color: var(--bg-dark);
150
+ border-right: 1px solid var(--border-color);
151
+ z-index: 50;
152
+ display: flex;
153
+ flex-direction: column;
154
+ transition: transform var(--transition-speed) ease;
155
+ }
156
+
157
+ #wv-sidebar.collapsed {
158
+ transform: translateX(-100%);
159
+ }
160
+
161
+ .sidebar-header {
162
+ height: 60px;
163
+ display: flex;
164
+ align-items: center;
165
+ justify-content: space-between;
166
+ padding: 0 15px;
167
+ background-color: var(--bg-header);
168
+ border-bottom: 1px solid var(--border-color);
169
+ }
170
+
171
+ #wv-logo {
172
+ width: 36px;
173
+ height: 36px;
174
+ background-color: #333;
175
+ border-radius: 4px;
176
+ display: flex;
177
+ align-items: center;
178
+ justify-content: center;
179
+ color: white;
180
+ font-weight: bold;
181
+ font-size: 10px;
182
+ text-align: center;
183
+ }
184
+
185
+ .sidebar-collapse {
186
+ background: none;
187
+ border: none;
188
+ color: var(--text-main);
189
+ cursor: pointer;
190
+ font-size: 1.2rem;
191
+ }
192
+
193
+ /* Sidebar Tabs */
194
+ .nav-tabs {
195
+ display: flex;
196
+ list-style: none;
197
+ border-bottom: 1px solid var(--border-color);
198
+ }
199
+
200
+ .nav-item {
201
+ flex: 1;
202
+ text-align: center;
203
+ }
204
+
205
+ .sidebar-tab {
206
+ display: block;
207
+ padding: 12px;
208
+ color: var(--text-muted);
209
+ text-decoration: none;
210
+ font-size: 0.9rem;
211
+ cursor: pointer;
212
+ border-bottom: 2px solid transparent;
213
+ transition: 0.2s;
214
+ }
215
+
216
+ .sidebar-tab.active {
217
+ color: var(--accent-color);
218
+ border-bottom: 2px solid var(--accent-color);
219
+ background: rgba(0, 123, 255, 0.05);
220
+ }
221
+
222
+ .sidebar-tab:hover {
223
+ color: #fff;
224
+ }
225
+
226
+ /* Layer List */
227
+ #layers-scroll-container {
228
+ flex: 1;
229
+ overflow-y: auto;
230
+ padding: 10px;
231
+ }
232
+
233
+ /* Custom Scrollbar */
234
+ #layers-scroll-container::-webkit-scrollbar {
235
+ width: 6px;
236
+ }
237
+ #layers-scroll-container::-webkit-scrollbar-thumb {
238
+ background: #555;
239
+ border-radius: 3px;
240
+ }
241
+
242
+ /* Layer Groups */
243
+ .layer-group-case {
244
+ margin-bottom: 10px;
245
+ background: var(--bg-panel);
246
+ border-radius: 4px;
247
+ overflow: hidden;
248
+ }
249
+
250
+ .layer-group-header {
251
+ padding: 10px;
252
+ background: rgba(255,255,255,0.05);
253
+ display: flex;
254
+ justify-content: space-between;
255
+ align-items: center;
256
+ cursor: pointer;
257
+ user-select: none;
258
+ }
259
+
260
+ .layer-group-title {
261
+ font-size: 0.95rem;
262
+ font-weight: 600;
263
+ }
264
+
265
+ .category {
266
+ list-style: none;
267
+ padding: 0;
268
+ display: block; /* Expanded by default */
269
+ }
270
+
271
+ .category.hidden {
272
+ display: none;
273
+ }
274
+
275
+ .layer-item {
276
+ display: flex;
277
+ align-items: center;
278
+ padding: 8px 10px;
279
+ border-bottom: 1px solid rgba(255,255,255,0.05);
280
+ transition: background 0.2s;
281
+ cursor: pointer;
282
+ }
283
+
284
+ .layer-item:hover {
285
+ background: rgba(255,255,255,0.05);
286
+ }
287
+
288
+ .visibility {
289
+ color: var(--text-muted);
290
+ margin-right: 10px;
291
+ cursor: pointer;
292
+ width: 20px;
293
+ text-align: center;
294
+ }
295
+
296
+ .visibility.active {
297
+ color: #fff;
298
+ }
299
+
300
+ .layer-main h4 {
301
+ font-size: 0.9rem;
302
+ font-weight: normal;
303
+ color: var(--text-main);
304
+ }
305
+
306
+ .instrument-collection {
307
+ font-size: 0.75rem;
308
+ color: var(--text-muted);
309
+ margin-top: 2px;
310
+ }
311
+
312
+ /* Mobile Toggler */
313
+ .sidebar-expand {
314
+ position: absolute;
315
+ top: 10px;
316
+ left: 10px;
317
+ z-index: 60;
318
+ }
319
+
320
+ .sidebar-anchor {
321
+ background: var(--bg-panel);
322
+ color: white;
323
+ padding: 8px 12px;
324
+ border-radius: 4px;
325
+ border: 1px solid var(--border-color);
326
+ display: flex;
327
+ align-items: center;
328
+ gap: 8px;
329
+ cursor: pointer;
330
+ text-decoration: none;
331
+ font-size: 0.9rem;
332
+ }
333
+
334
+ /* --- Timeline --- */
335
+ .timeline-container {
336
+ position: absolute;
337
+ bottom: 0;
338
+ left: 0;
339
+ width: 100%;
340
+ height: var(--timeline-height);
341
+ background: var(--bg-panel);
342
+ border-top: 1px solid var(--border-color);
343
+ display: flex;
344
+ align-items: center;
345
+ justify-content: space-between;
346
+ padding: 0 20px;
347
+ z-index: 90;
348
+ }
349
+
350
+ .timeline-date {
351
+ font-size: 1.1rem;
352
+ font-weight: bold;
353
+ color: #fff;
354
+ }
355
+
356
+ .timeline-controls {
357
+ display: flex;
358
+ gap: 10px;
359
+ }
360
+
361
+ .control-btn {
362
+ background: rgba(255,255,255,0.1);
363
+ border: none;
364
+ color: white;
365
+ width: 36px;
366
+ height: 36px;
367
+ border-radius: 50%;
368
+ cursor: pointer;
369
+ display: flex;
370
+ align-items: center;
371
+ justify-content: center;
372
+ transition: 0.2s;
373
+ }
374
+
375
+ .control-btn:hover {
376
+ background: var(--accent-color);
377
+ }
378
+
379
+ /* --- Floating Buttons (Zoom/Measure) --- */
380
+ .floating-controls {
381
+ position: absolute;
382
+ bottom: 100px;
383
+ right: 20px;
384
+ display: flex;
385
+ flex-direction: column;
386
+ gap: 10px;
387
+ z-index: 80;
388
+ }
389
+
390
+ .floating-btn {
391
+ width: 44px;
392
+ height: 44px;
393
+ background: var(--bg-panel);
394
+ border: 1px solid var(--border-color);
395
+ border-radius: 4px;
396
+ color: white;
397
+ cursor: pointer;
398
+ display: flex;
399
+ align-items: center;
400
+ justify-content: center;
401
+ box-shadow: 0 4px 6px rgba(0,0,0,0.3);
402
+ transition: 0.2s;
403
+ }
404
+
405
+ .floating-btn:hover {
406
+ background: var(--accent-color);
407
+ }
408
+
409
+ /* --- Toast Notification --- */
410
+ #toast-container {
411
+ position: fixed;
412
+ top: 80px;
413
+ right: 20px;
414
+ z-index: 200;
415
+ display: flex;
416
+ flex-direction: column;
417
+ gap: 10px;
418
+ }
419
+
420
+ .toast {
421
+ background: rgba(30, 30, 30, 0.95);
422
+ color: white;
423
+ padding: 12px 20px;
424
+ border-radius: 4px;
425
+ border-left: 4px solid var(--accent-color);
426
+ box-shadow: 0 5px 15px rgba(0,0,0,0.5);
427
+ animation: slideIn 0.3s ease-out;
428
+ max-width: 300px;
429
+ font-size: 0.9rem;
430
+ }
431
+
432
+ @keyframes slideIn {
433
+ from { transform: translateX(100%); opacity: 0; }
434
+ to { transform: translateX(0); opacity: 1; }
435
+ }
436
+
437
+ /* --- Responsive --- */
438
+ @media (max-width: 768px) {
439
+ .anycoder-credit {
440
+ display: none;
441
+ }
442
+ .wv-toolbar-button {
443
+ width: 38px;
444
+ height: 38px;
445
+ }
446
+ .wv-toolbar-button span {
447
+ display: none;
448
+ }
449
+ #wv-sidebar {
450
+ width: 280px;
451
+ }
452
+ }
453
+ </style>
454
+ </head>
455
+ <body>
456
+
457
+ <!-- Header Toolbar -->
458
+ <header>
459
+ <div class="header-left">
460
+ <!-- Built with anycoder link -->
461
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-credit">
462
+ Built with anycoder
463
+ </a>
464
+ </div>
465
+
466
+ <div class="wv-toolbar">
467
+ <button type="button" id="wv-location-search-button" class="wv-toolbar-button" aria-label="Search places by location">
468
+ <i class="fa-solid fa-magnifying-glass-location"></i>
469
+ </button>
470
+ <button type="button" id="wv-share-button" class="wv-toolbar-button" aria-label="Share this map">
471
+ <i class="fa-solid fa-share-from-square"></i>
472
+ </button>
473
+ <button type="button" id="wv-proj-button" class="wv-toolbar-button" aria-label="Switch projection">
474
+ <i class="fa-solid fa-earth-asia"></i>
475
+ </button>
476
+ <button type="button" id="wv-info-button" class="wv-toolbar-button" aria-label="Information">
477
+ <i class="fa-solid fa-circle-info"></i>
478
+ </button>
479
+ </div>
480
+ </header>
481
+
482
+ <div id="app">
483
+ <!-- Mobile Sidebar Toggle -->
484
+ <div class="sidebar-expand mobile">
485
+ <a id="accordion-toggler-button" class="sidebar-anchor" aria-label="Expand sidebar">
486
+ <i class="fa-solid fa-layer-group layer-icon"></i>
487
+ <span class="layer-count mobile">9</span>
488
+ </a>
489
+ </div>
490
+
491
+ <!-- Sidebar -->
492
+ <section id="wv-sidebar">
493
+ <div class="sidebar-header">
494
+ <div id="wv-logo" title="Worldview">WV</div>
495
+ <button id="sidebar-close" class="sidebar-collapse" aria-label="Hide sidebar">
496
+ <i class="fa-solid fa-xmark"></i>
497
+ </button>
498
+ </div>
499
+
500
+ <ul class="nav-tabs">
501
+ <li class="nav-item">
502
+ <a id="layers-sidebar-tab" class="sidebar-tab first-tab active">
503
+ <i class="fa-solid fa-layer-group"></i> Layers
504
+ </a>
505
+ </li>
506
+ <li class="nav-item">
507
+ <a id="events-sidebar-tab" class="sidebar-tab second-tab">
508
+ <i class="fa-solid fa-volcano"></i> Events
509
+ </a>
510
+ </li>
511
+ </ul>
512
+
513
+ <div class="tab-content">
514
+ <div id="layers-scroll-container">
515
+
516
+ <!-- Reference Layers Group -->
517
+ <div class="layer-group-case">
518
+ <div class="layer-group-header" onclick="toggleGroup(this)">
519
+ <h3 class="layer-group-title">Reference</h3>
520
+ <i class="fa-solid fa-caret-down"></i>
521
+ </div>
522
+ <ul class="category">
523
+ <li class="layer-item">
524
+ <div class="visibility" onclick="toggleVisibility(this)">
525
+ <i class="fa-solid fa-eye-slash"></i>
526
+ </div>
527
+ <div class="layer-main">
528
+ <h4>Place Labels</h4>
529
+ <div class="instrument-collection">Sources: Esri, TomTom, Garmin...</div>
530
+ </div>
531
+ </li>
532
+ <li class="layer-item">
533
+ <div class="visibility" onclick="toggleVisibility(this)">
534
+ <i class="fa-solid fa-eye-slash"></i>
535
+ </div>
536
+ <div class="layer-main">
537
+ <h4>Coastlines / Borders</h4>
538
+ <div class="instrument-collection">© OpenStreetMap</div>
539
+ </div>
540
+ </li>
541
+ <li class="layer-item">
542
+ <div class="visibility active" onclick="toggleVisibility(this)">
543
+ <i class="fa-solid fa-eye"></i>
544
+ </div>
545
+ <div class="layer-main">
546
+ <h4>Coastlines</h4>
547
+ <div class="instrument-collection">© OpenStreetMap</div>
548
+ </div>
549
+ </li>
550
+ </ul>
551
+ </div>
552
+
553
+ <!-- Base Layers Group -->
554
+ <div class="layer-group-case">
555
+ <div class="layer-group-header" onclick="toggleGroup(this)">
556
+ <h3 class="layer-group-title">Base Layers</h3>
557
+ <div class="layer-group-icons">
558
+ <i class="fa-solid fa-caret-down"></i>
559
+ </div>
560
+ </div>
561
+ <ul class="category">
562
+ <li class="layer-item">
563
+ <div class="visibility" onclick="toggleVisibility(this)">
564
+ <i class="fa-solid fa-eye-slash"></i>
565
+ </div>
566
+ <div class="layer-main">
567
+ <h4>Corrected Reflectance (True Color)</h4>
568
+ <div class="instrument-collection">PACE / OCI</div>
569
+ </div>
570
+ </li>
571
+ <li class="layer-item">
572
+ <div class="visibility" onclick="toggleVisibility(this)">
573
+ <i class="fa-solid fa-eye-slash"></i>
574
+ </div>
575
+ <div class="layer-main">
576
+ <h4>Corrected Reflectance (True Color)</h4>
577
+ <div class="instrument-collection">NOAA-21 / VIIRS</div>
578
+ </div>
579
+ </li>
580
+ <li class="layer-item">
581
+ <div class="visibility" onclick="toggleVisibility(this)">
582
+ <i class="fa-solid fa-eye-slash"></i>
583
+ </div>
584
+ <div class="layer-main">
585
+ <h4>Corrected Reflectance (True Color)</h4>
586
+ <div class="instrument-collection">NOAA-20 / VIIRS</div>
587
+ </div>
588
+ </li>
589
+ <li class="layer-item">
590
+ <div class="visibility active" onclick="toggleVisibility(this)">
591
+ <i class="fa-solid fa-eye"></i>
592
+ </div>
593
+ <div class="layer-main">
594
+ <h4>Corrected Reflectance (True Color)</h4>
595
+ <div class="instrument-collection">Terra / MODIS</div>
596
+ <div class="badge rounded-pill bg-secondary">v6.1 NRT</div>
597
+ </div>
598
+ </li>
599
+ </ul>
600
+ </div>
601
+
602
+ <div class="product-buttons">
603
+ <button type="button" class="wv-button layers-add">
604
+ <span class="button-text"><i class="fa-solid fa-plus"></i> Add Layers</span>
605
+ </button>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </section>
610
+
611
+ <!-- Map Area -->
612
+ <div id="wv-map">
613
+ <div class="globe-placeholder"></div>
614
+ <!-- Map Overlay UI -->
615
+ <div id="ol-coords-case" class="wv-coords-container" style="position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); padding: 5px; border-radius: 4px; font-family: monospace; font-size: 12px; pointer-events: none;">
616
+ <span class="map-coord">26.2589°, -63.2973°</span> | <span class="map-coord">EPSG:4326</span>
617
+ </div>
618
+ </div>
619
+
620
+ <!-- Floating Controls -->
621
+ <div class="floating-controls">
622
+ <button id="wv-measure-button" class="floating-btn" aria-label="Measure distances & areas">
623
+ <i class="fa-solid fa-ruler"></i>
624
+ </button>
625
+ <div class="wv-zoom-buttons-mobile" style="display: flex; flex-direction: column; gap: 5px;">
626
+ <button class="floating-btn wv-map-zoom-in"><i class="fa-solid fa-plus"></i></button>
627
+ <button class="floating-btn wv-map-zoom-out"><i class="fa-solid fa-minus"></i></button>
628
+ </div>
629
+ </div>
630
+
631
+ <!-- Timeline Footer -->
632
+ <div class="timeline-container">
633
+ <div class="timeline-header-mobile">
634
+ <div class="timeline-date">2026 JAN 29</div>
635
+ </div>
636
+
637
+ <div class="timeline-controls">
638
+ <button class="control-btn" id="prev-day" aria-label="Previous Day">
639
+ <i class="fa-solid fa-chevron-left"></i>
640
+ </button>
641
+ <button class="control-btn" id="now-btn" aria-label="Go to Now">
642
+ <span style="font-size: 16px; font-weight: bold;">NOW</span>
643
+ </button>
644
+ <button class="control-btn" id="next-day" aria-label="Next Day" disabled style="opacity: 0.5;">
645
+ <i class="fa-solid fa-chevron-right"></i>
646
+ </button>
647
+ </div>
648
+
649
+ <div class="animate-button">
650
+ <button class="control-btn" id="animate-toggle" aria-label="Set up animation" style="background: var(--accent-color);">
651
+ <i class="fa-solid fa-video"></i>
652
+ </button>
653
+ </div>
654
+ </div>
655
+
656
+ </div>
657
+
658
+ <!-- Toast Container -->
659
+ <div id="toast-container"></div>
660
+
661
+ <script>
662
+ document.addEventListener('DOMContentLoaded', () => {
663
+
664
+ // --- Sidebar Logic ---
665
+ const sidebar = document.getElementById('wv-sidebar');
666
+ const toggleBtn = document.getElementById('accordion-toggler-button');
667
+ const closeBtn = document.getElementById('sidebar-close');
668
+ const layersTab = document.getElementById('layers-sidebar-tab');
669
+ const eventsTab = document.getElementById('events-sidebar-tab');
670
+
671
+ // Open Sidebar
672
+ toggleBtn.addEventListener('click', (e) => {
673
+ e.preventDefault();
674
+ // Check if we are on mobile, if so, just toggle class
675
+ sidebar.classList.remove('collapsed');
676
+ });
677
+
678
+ // Close Sidebar
679
+ closeBtn.addEventListener('click', () => {
680
+ sidebar.classList.add('collapsed');
681
+ });
682
+
683
+ // Tab Switching (Visual only)
684
+ layersTab.addEventListener('click', () => {
685
+ layersTab.classList.add('active');
686
+ eventsTab.classList.remove('active');
687
+ showToast("Switched to Layers Tab");
688
+ });
689
+
690
+ eventsTab.addEventListener('click', () => {
691
+ eventsTab.classList.add('active');
692
+ layersTab.classList.remove('active');
693
+ showToast("Switched to Events Tab (Mock)");
694
+ });
695
+
696
+ // --- Layer Interactions ---
697
+
698
+ // Toggle Layer Visibility
699
+ window.toggleVisibility = function(element) {
700
+ const icon = element.querySelector('i');
701
+ const parentLi = element.closest('.layer-item');
702
+
703
+ if (element.classList.contains('active')) {
704
+ element.classList.remove('active');
705
+ icon.classList.remove('fa-eye');
706
+ icon.classList.add('fa-eye-slash');
707
+ parentLi.style.opacity = '0.6';
708
+ } else {
709
+ element.classList.add('active');
710
+ icon.classList.remove('fa-eye-slash');
711
+ icon.classList.add('fa-eye');
712
+ parentLi.style.opacity = '1';
713
+ }
714
+ };
715
+
716
+ // Toggle Group Accordion
717
+ window.toggleGroup = function(header) {
718
+ const list = header.nextElementSibling;
719
+ const icon = header.querySelector('.fa-caret-down, .fa-caret-right');
720
+
721
+ if (list.classList.contains('hidden')) {
722
+ list.classList.remove('hidden');
723
+ if(icon) {
724
+ icon.classList.remove('fa-caret-right');
725
+ icon.classList.add('fa-caret-down');
726
+ }
727
+ } else {
728
+ list.classList.add('hidden');
729
+ if(icon) {
730
+ icon.classList.remove('fa-caret-down');
731
+ icon.classList.add('fa-caret-right');
732
+ }
733
+ }
734
+ };
735
+
736
+ // --- Toolbar Buttons ---
737
+ document.getElementById('wv-location-search-button').addEventListener('click', () => {
738
+ showToast("Search Location clicked");
739
+ });
740
+
741
+ document.getElementById('wv-share-button').addEventListener('click', () => {
742
+ const url = window.location.href;
743
+ navigator.clipboard.writeText(url).then(() => {
744
+ showToast("Link copied to clipboard!");
745
+ }).catch(() => {
746
+ showToast("Share functionality initialized.");
747
+ });
748
+ });
749
+
750
+ document.getElementById('wv-proj-button').addEventListener('click', () => {
751
+ showToast("Projection Switcher (Arctic/Antarctic/Geographic)");
752
+ });
753
+
754
+ document.getElementById('wv-info-button').addEventListener('click', () => {
755
+ showToast("Worldview Information v8.3");
756
+ });
757
+
758
+ document.getElementById('wv-measure-button').addEventListener('click', () => {
759
+ showToast("Measure Tool Activated");
760
+ });
761
+
762
+ // --- Timeline Logic ---
763
+ const prevBtn = document.getElementById('prev-day');
764
+ const nextBtn = document.getElementById('next-day');
765
+ const dateDisplay = document.querySelector('.timeline-date');
766
+ const nowBtn = document.getElementById('now-btn');
767
+ const animBtn = document.getElementById('animate-toggle');
768
+
769
+ let currentDate = new Date("2026-01-29");
770
+
771
+ function updateDateDisplay() {
772
+ const options = { year: 'numeric', month: 'short', day: 'numeric' };
773
+ dateDisplay.textContent = currentDate.toLocaleDateString('en-US', options).toUpperCase();
774
+ }
775
+
776
+ prevBtn.addEventListener('click', () => {
777
+ currentDate.setDate(currentDate.getDate() - 1);
778
+ updateDateDisplay();
779
+ showToast("Going back one day...");
780
+ });
781
+
782
+ nextBtn.addEventListener('click', () => {
783
+ // Simulating limit
784
+ showToast("Future data not available");
785
+ });
786
+
787
+ nowBtn.addEventListener('click', () => {
788
+ currentDate = new Date();
789
+ updateDateDisplay();
790
+ showToast("Moved to current date");
791
+ });
792
+
793
+ animBtn.addEventListener('click', () => {
794
+ animBtn.style.background = animBtn.style.background === 'var(--accent-color)' ? '#d32f2f' : 'var(--accent-color)';
795
+ if(animBtn.style.background === '#d32f2f') {
796
+ showToast("Animation Paused");
797
+ } else {
798
+ showToast("Animation Started");
799
+ }
800
+ });
801
+
802
+ // --- Helper: Toast Notification ---
803
+ function showToast(message) {
804
+ const container = document.getElementById('toast-container');
805
+ const toast = document.createElement('div');
806
+ toast.className = 'toast';
807
+ toast.textContent = message;
808
+
809
+ container.appendChild(toast);
810
+
811
+ // Remove after 3 seconds
812
+ setTimeout(() => {
813
+ toast.style.opacity = '0';
814
+ toast.style.transform = 'translateX(100%)';
815
+ toast.style.transition = 'all 0.3s ease-in';
816
+ setTimeout(() => toast.remove(), 300);
817
+ }, 3000);
818
+ }
819
+
820
+ // Initialize state
821
+ updateDateDisplay();
822
+
823
+ // Handle Resize logic for sidebar
824
+ const handleResize = () => {
825
+ if (window.innerWidth < 768) {
826
+ sidebar.classList.add('collapsed');
827
+ } else {
828
+ sidebar.classList.remove('collapsed');
829
+ }
830
+ };
831
+
832
+ window.addEventListener('resize', handleResize);
833
+ handleResize(); // Init
834
+ });
835
+ </script>
836
+ </body>
837
+ </html>