Hugging Face's logo

Spaces:
AtomicLSD
/
anycoder-b84ce37d
Running

App Files Community
AtomicLSD commited on
Commit
558f7ea
·
verified ·
1 Parent(s): 12ed758

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1467 -19
index.html CHANGED
@@ -1,19 +1,1467 @@
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>NASA Worldview</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
9
+ <style>
10
+ /* CSS Reset & Base */
11
+ *, *::before, *::after {
12
+ box-sizing: border-box;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ :root {
18
+ --color-primary: #4eccc4;
19
+ --color-primary-dark: #3db8b0;
20
+ --color-bg-dark: #1a1d21;
21
+ --color-bg-panel: #262b31;
22
+ --color-bg-panel-hover: #2f353d;
23
+ --color-border: #444;
24
+ --color-text: #eee;
25
+ --color-text-muted: #888;
26
+ --color-text-secondary: #aaa;
27
+ --color-accent-red: #b71c1c;
28
+ --color-accent-red-hover: #d32f2f;
29
+ --sidebar-width: 320px;
30
+ --toolbar-height: 56px;
31
+ --timeline-height: 64px;
32
+ --radius-sm: 4px;
33
+ --radius-md: 8px;
34
+ --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
35
+ --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
36
+ --transition-fast: 0.15s ease;
37
+ --transition-normal: 0.3s ease;
38
+ }
39
+
40
+ body, html {
41
+ width: 100%;
42
+ height: 100%;
43
+ overflow: hidden;
44
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
45
+ background: var(--color-bg-dark);
46
+ color: var(--color-text);
47
+ font-size: 14px;
48
+ }
49
+
50
+ /* App Container */
51
+ #app {
52
+ position: relative;
53
+ width: 100vw;
54
+ height: 100vh;
55
+ display: flex;
56
+ }
57
+
58
+ /* Built with anycoder link */
59
+ .anycoder-link {
60
+ position: fixed;
61
+ top: 8px;
62
+ left: 50%;
63
+ transform: translateX(-50%);
64
+ z-index: 10000;
65
+ background: rgba(78, 204, 196, 0.15);
66
+ border: 1px solid var(--color-primary);
67
+ padding: 6px 16px;
68
+ border-radius: 20px;
69
+ font-size: 12px;
70
+ color: var(--color-primary);
71
+ text-decoration: none;
72
+ backdrop-filter: blur(8px);
73
+ transition: all var(--transition-fast);
74
+ }
75
+
76
+ .anycoder-link:hover {
77
+ background: var(--color-primary);
78
+ color: var(--color-bg-dark);
79
+ }
80
+
81
+ /* Sidebar */
82
+ #wvSidebarEl {
83
+ position: absolute;
84
+ top: 0;
85
+ left: 0;
86
+ bottom: var(--timeline-height);
87
+ width: var(--sidebar-width);
88
+ background: var(--color-bg-panel);
89
+ z-index: 1000;
90
+ display: flex;
91
+ flex-direction: column;
92
+ transition: transform var(--transition-normal);
93
+ box-shadow: var(--shadow-md);
94
+ }
95
+
96
+ #wvSidebarEl.collapsed {
97
+ transform: translateX(-100%);
98
+ }
99
+
100
+ /* Sidebar Header */
101
+ .sidebar-header {
102
+ padding: 12px 16px;
103
+ border-bottom: 1px solid var(--color-border);
104
+ display: flex;
105
+ align-items: center;
106
+ justify-content: space-between;
107
+ background: var(--color-bg-dark);
108
+ }
109
+
110
+ #wv-logo {
111
+ width: 36px;
112
+ height: 36px;
113
+ background: var(--color-primary);
114
+ border-radius: var(--radius-sm);
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ font-weight: 800;
119
+ color: var(--color-bg-dark);
120
+ font-size: 13px;
121
+ letter-spacing: -0.5px;
122
+ cursor: pointer;
123
+ transition: transform var(--transition-fast);
124
+ }
125
+
126
+ #wv-logo:hover {
127
+ transform: scale(1.05);
128
+ }
129
+
130
+ .sidebar-toggle-btn {
131
+ background: none;
132
+ border: none;
133
+ color: var(--color-text);
134
+ cursor: pointer;
135
+ font-size: 16px;
136
+ width: 32px;
137
+ height: 32px;
138
+ display: flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ border-radius: var(--radius-sm);
142
+ transition: all var(--transition-fast);
143
+ }
144
+
145
+ .sidebar-toggle-btn:hover {
146
+ background: var(--color-bg-panel-hover);
147
+ color: var(--color-primary);
148
+ }
149
+
150
+ /* Navigation Tabs */
151
+ .nav-tabs {
152
+ display: flex;
153
+ border-bottom: 1px solid var(--color-border);
154
+ background: var(--color-bg-dark);
155
+ }
156
+
157
+ .nav-item {
158
+ flex: 1;
159
+ text-align: center;
160
+ padding: 14px 0;
161
+ cursor: pointer;
162
+ color: var(--color-text-muted);
163
+ font-size: 13px;
164
+ font-weight: 500;
165
+ text-transform: uppercase;
166
+ letter-spacing: 0.5px;
167
+ position: relative;
168
+ transition: all var(--transition-fast);
169
+ border: none;
170
+ background: none;
171
+ }
172
+
173
+ .nav-item:hover {
174
+ color: var(--color-text);
175
+ background: var(--color-bg-panel-hover);
176
+ }
177
+
178
+ .nav-item.active {
179
+ color: var(--color-primary);
180
+ }
181
+
182
+ .nav-item.active::after {
183
+ content: '';
184
+ position: absolute;
185
+ bottom: 0;
186
+ left: 0;
187
+ right: 0;
188
+ height: 2px;
189
+ background: var(--color-primary);
190
+ }
191
+
192
+ /* Tab Content */
193
+ .tab-content {
194
+ flex: 1;
195
+ overflow: hidden;
196
+ position: relative;
197
+ }
198
+
199
+ .tab-pane {
200
+ position: absolute;
201
+ inset: 0;
202
+ overflow-y: auto;
203
+ opacity: 0;
204
+ visibility: hidden;
205
+ transition: opacity var(--transition-fast);
206
+ }
207
+
208
+ .tab-pane.active {
209
+ opacity: 1;
210
+ visibility: visible;
211
+ }
212
+
213
+ /* Scroll Container */
214
+ #layers-scroll-container, #events-scroll-container {
215
+ padding: 12px;
216
+ }
217
+
218
+ /* Layer Groups */
219
+ .layer-group {
220
+ margin-bottom: 16px;
221
+ background: var(--color-bg-dark);
222
+ border-radius: var(--radius-md);
223
+ overflow: hidden;
224
+ }
225
+
226
+ .layer-group-header {
227
+ padding: 12px 14px;
228
+ font-weight: 600;
229
+ color: var(--color-text);
230
+ font-size: 12px;
231
+ text-transform: uppercase;
232
+ letter-spacing: 0.8px;
233
+ cursor: pointer;
234
+ display: flex;
235
+ justify-content: space-between;
236
+ align-items: center;
237
+ background: var(--color-bg-panel-hover);
238
+ transition: background var(--transition-fast);
239
+ user-select: none;
240
+ }
241
+
242
+ .layer-group-header:hover {
243
+ background: #3a424b;
244
+ }
245
+
246
+ .layer-group-header i {
247
+ transition: transform var(--transition-fast);
248
+ color: var(--color-text-muted);
249
+ font-size: 12px;
250
+ }
251
+
252
+ .layer-group-header.collapsed i {
253
+ transform: rotate(-90deg);
254
+ }
255
+
256
+ .group-content {
257
+ padding: 8px 0;
258
+ }
259
+
260
+ .group-content.collapsed {
261
+ display: none;
262
+ }
263
+
264
+ /* Layer Items */
265
+ .layer-item {
266
+ display: flex;
267
+ align-items: flex-start;
268
+ padding: 10px 14px;
269
+ cursor: pointer;
270
+ user-select: none;
271
+ transition: all var(--transition-fast);
272
+ position: relative;
273
+ }
274
+
275
+ .layer-item:hover {
276
+ background: rgba(78, 204, 196, 0.05);
277
+ }
278
+
279
+ .layer-item.active {
280
+ background: rgba(78, 204, 196, 0.1);
281
+ }
282
+
283
+ .layer-item.active::before {
284
+ content: '';
285
+ position: absolute;
286
+ left: 0;
287
+ top: 0;
288
+ bottom: 0;
289
+ width: 3px;
290
+ background: var(--color-primary);
291
+ }
292
+
293
+ .layer-visibility {
294
+ width: 32px;
295
+ height: 32px;
296
+ display: flex;
297
+ align-items: center;
298
+ justify-content: center;
299
+ margin-right: 12px;
300
+ color: var(--color-text-muted);
301
+ transition: color var(--transition-fast);
302
+ flex-shrink: 0;
303
+ }
304
+
305
+ .layer-visibility.visible {
306
+ color: var(--color-primary);
307
+ }
308
+
309
+ .layer-visibility i {
310
+ font-size: 16px;
311
+ }
312
+
313
+ .layer-info {
314
+ flex: 1;
315
+ min-width: 0;
316
+ }
317
+
318
+ .layer-title {
319
+ font-size: 13px;
320
+ color: var(--color-text);
321
+ font-weight: 500;
322
+ line-height: 1.4;
323
+ margin-bottom: 2px;
324
+ }
325
+
326
+ .layer-subtitle {
327
+ font-size: 11px;
328
+ color: var(--color-text-muted);
329
+ display: flex;
330
+ align-items: center;
331
+ gap: 6px;
332
+ flex-wrap: wrap;
333
+ }
334
+
335
+ .layer-badge {
336
+ background: var(--color-bg-panel-hover);
337
+ padding: 2px 8px;
338
+ border-radius: 12px;
339
+ font-size: 10px;
340
+ color: var(--color-text-secondary);
341
+ }
342
+
343
+ .layer-notice {
344
+ position: absolute;
345
+ right: 12px;
346
+ top: 50%;
347
+ transform: translateY(-50%);
348
+ width: 18px;
349
+ height: 18px;
350
+ background: #ff9800;
351
+ border-radius: 50%;
352
+ display: flex;
353
+ align-items: center;
354
+ justify-content: center;
355
+ font-size: 11px;
356
+ font-weight: bold;
357
+ color: #000;
358
+ }
359
+
360
+ /* Base Layer Items (radio style) */
361
+ .base-layer-item {
362
+ padding: 12px 14px;
363
+ cursor: pointer;
364
+ transition: all var(--transition-fast);
365
+ border-left: 3px solid transparent;
366
+ }
367
+
368
+ .base-layer-item:hover {
369
+ background: rgba(78, 204, 196, 0.05);
370
+ }
371
+
372
+ .base-layer-item.active {
373
+ background: rgba(78, 204, 196, 0.1);
374
+ border-left-color: var(--color-primary);
375
+ }
376
+
377
+ .base-layer-title {
378
+ font-size: 13px;
379
+ color: var(--color-text);
380
+ font-weight: 500;
381
+ margin-bottom: 4px;
382
+ }
383
+
384
+ .base-layer-title span {
385
+ font-weight: 400;
386
+ color: var(--color-text-muted);
387
+ font-size: 11px;
388
+ }
389
+
390
+ .base-layer-source {
391
+ font-size: 11px;
392
+ color: var(--color-text-muted);
393
+ padding-left: 16px;
394
+ position: relative;
395
+ }
396
+
397
+ .base-layer-source::before {
398
+ content: '';
399
+ position: absolute;
400
+ left: 4px;
401
+ top: 6px;
402
+ width: 6px;
403
+ height: 6px;
404
+ background: var(--color-primary);
405
+ border-radius: 50%;
406
+ opacity: 0;
407
+ transition: opacity var(--transition-fast);
408
+ }
409
+
410
+ .base-layer-item.active .base-layer-source::before {
411
+ opacity: 1;
412
+ }
413
+
414
+ /* Add Layers Button */
415
+ .add-layers-container {
416
+ padding: 16px;
417
+ border-top: 1px solid var(--color-border);
418
+ }
419
+
420
+ .add-layers-btn {
421
+ width: 100%;
422
+ height: 40px;
423
+ background: var(--color-accent-red);
424
+ border: none;
425
+ border-radius: var(--radius-sm);
426
+ color: #fff;
427
+ font-size: 13px;
428
+ font-weight: 500;
429
+ cursor: pointer;
430
+ display: flex;
431
+ align-items: center;
432
+ justify-content: center;
433
+ gap: 8px;
434
+ transition: all var(--transition-fast);
435
+ }
436
+
437
+ .add-layers-btn:hover {
438
+ background: var(--color-accent-red-hover);
439
+ }
440
+
441
+ .add-layers-btn i {
442
+ font-size: 12px;
443
+ }
444
+
445
+ /* Events Tab */
446
+ .event-item {
447
+ padding: 14px;
448
+ border-bottom: 1px solid var(--color-border);
449
+ cursor: pointer;
450
+ transition: background var(--transition-fast);
451
+ }
452
+
453
+ .event-item:hover {
454
+ background: var(--color-bg-panel-hover);
455
+ }
456
+
457
+ .event-category {
458
+ display: inline-flex;
459
+ align-items: center;
460
+ gap: 6px;
461
+ font-size: 11px;
462
+ text-transform: uppercase;
463
+ font-weight: 600;
464
+ margin-bottom: 8px;
465
+ }
466
+
467
+ .event-category.wildfire { color: #ff5722; }
468
+ .event-category.storm { color: #2196f3; }
469
+ .event-category.volcano { color: #795548; }
470
+ .event-category.flood { color: #03a9f4; }
471
+
472
+ .event-title {
473
+ font-size: 13px;
474
+ color: var(--color-text);
475
+ font-weight: 500;
476
+ margin-bottom: 6px;
477
+ line-height: 1.4;
478
+ }
479
+
480
+ .event-meta {
481
+ font-size: 11px;
482
+ color: var(--color-text-muted);
483
+ display: flex;
484
+ gap: 16px;
485
+ }
486
+
487
+ /* Main Map Area */
488
+ #wv-map {
489
+ flex: 1;
490
+ position: relative;
491
+ background: #0a0a0a;
492
+ }
493
+
494
+ #mapCanvas {
495
+ width: 100%;
496
+ height: 100%;
497
+ }
498
+
499
+ /* Toolbar */
500
+ #wvToolbarEl {
501
+ position: absolute;
502
+ top: 12px;
503
+ left: calc(var(--sidebar-width) + 12px);
504
+ right: 12px;
505
+ height: var(--toolbar-height);
506
+ display: flex;
507
+ justify-content: space-between;
508
+ align-items: center;
509
+ pointer-events: none;
510
+ z-index: 999;
511
+ transition: left var(--transition-normal);
512
+ }
513
+
514
+ #wvToolbarEl.full-width {
515
+ left: 12px;
516
+ }
517
+
518
+ .toolbar-left, .toolbar-right {
519
+ display: flex;
520
+ align-items: center;
521
+ gap: 8px;
522
+ pointer-events: auto;
523
+ }
524
+
525
+ .toolbar-brand {
526
+ background: var(--color-bg-panel);
527
+ padding: 10px 16px;
528
+ border-radius: var(--radius-md);
529
+ border: 1px solid var(--color-border);
530
+ display: flex;
531
+ align-items: center;
532
+ gap: 12px;
533
+ }
534
+
535
+ .toolbar-brand-title {
536
+ font-size: 15px;
537
+ font-weight: 600;
538
+ color: #fff;
539
+ }
540
+
541
+ .toolbar-brand-subtitle {
542
+ font-size: 11px;
543
+ color: var(--color-text-muted);
544
+ }
545
+
546
+ .wv-toolbar-button {
547
+ width: 44px;
548
+ height: 44px;
549
+ background: var(--color-bg-panel);
550
+ border: 1px solid var(--color-border);
551
+ border-radius: var(--radius-md);
552
+ color: var(--color-text);
553
+ cursor: pointer;
554
+ display: flex;
555
+ align-items: center;
556
+ justify-content: center;
557
+ transition: all var(--transition-fast);
558
+ position: relative;
559
+ }
560
+
561
+ .wv-toolbar-button:hover {
562
+ background: var(--color-bg-panel-hover);
563
+ border-color: #666;
564
+ color: var(--color-primary);
565
+ }
566
+
567
+ .wv-toolbar-button:active {
568
+ background: #1e2226;
569
+ }
570
+
571
+ .wv-toolbar-button i {
572
+ font-size: 18px;
573
+ }
574
+
575
+ .wv-toolbar-button .badge {
576
+ position: absolute;
577
+ top: -4px;
578
+ right: -4px;
579
+ width: 18px;
580
+ height: 18px;
581
+ background: var(--color-accent-red);
582
+ border-radius: 50%;
583
+ font-size: 10px;
584
+ font-weight: 600;
585
+ display: flex;
586
+ align-items: center;
587
+ justify-content: center;
588
+ color: #fff;
589
+ }
590
+
591
+ /* Search Overlay */
592
+ .search-overlay {
593
+ position: absolute;
594
+ top: 0;
595
+ left: 0;
596
+ right: 0;
597
+ padding: 16px;
598
+ background: var(--color-bg-panel);
599
+ border-bottom: 1px solid var(--color-border);
600
+ transform: translateY(-100%);
601
+ transition: transform var(--transition-normal);
602
+ z-index: 1001;
603
+ }
604
+
605
+ .search-overlay.active {
606
+ transform: translateY(0);
607
+ }
608
+
609
+ .search-input-container {
610
+ display: flex;
611
+ gap: 12px;
612
+ align-items: center;
613
+ }
614
+
615
+ .search-input {
616
+ flex: 1;
617
+ height: 44px;
618
+ background: var(--color-bg-dark);
619
+ border: 1px solid var(--color-border);
620
+ border-radius: var(--radius-md);
621
+ padding: 0 16px;
622
+ color: var(--color-text);
623
+ font-size: 14px;
624
+ }
625
+
626
+ .search-input:focus {
627
+ outline: none;
628
+ border-color: var(--color-primary);
629
+ }
630
+
631
+ .search-close {
632
+ width: 44px;
633
+ height: 44px;
634
+ background: none;
635
+ border: none;
636
+ color: var(--color-text);
637
+ cursor: pointer;
638
+ font-size: 18px;
639
+ }
640
+
641
+ /* Timeline */
642
+ #timeline-container {
643
+ position: absolute;
644
+ bottom: 0;
645
+ left: 0;
646
+ right: 0;
647
+ height: var(--timeline-height);
648
+ background: var(--color-bg-panel);
649
+ border-top: 1px solid var(--color-border);
650
+ display: flex;
651
+ align-items: center;
652
+ justify-content: space-between;
653
+ padding: 0 20px;
654
+ z-index: 1000;
655
+ gap: 20px;
656
+ }
657
+
658
+ .timeline-left, .timeline-right {
659
+ display: flex;
660
+ align-items: center;
661
+ gap: 12px;
662
+ }
663
+
664
+ .timeline-btn {
665
+ width: 40px;
666
+ height: 40px;
667
+ background: none;
668
+ border: none;
669
+ color: var(--color-text-muted);
670
+ cursor: pointer;
671
+ border-radius: var(--radius-sm);
672
+ display: flex;
673
+ align-items: center;
674
+ justify-content: center;
675
+ transition: all var(--transition-fast);
676
+ }
677
+
678
+ .timeline-btn:hover {
679
+ color: var(--color-text);
680
+ background: var(--color-bg-panel-hover);
681
+ }
682
+
683
+ .timeline-btn i {
684
+ font-size: 16px;
685
+ }
686
+
687
+ .timeline-btn.now-btn {
688
+ width: auto;
689
+ padding: 0 16px;
690
+ font-size: 12px;
691
+ font-weight: 600;
692
+ letter-spacing: 0.5px;
693
+ color: var(--color-text);
694
+ }
695
+
696
+ .timeline-date-container {
697
+ flex: 1;
698
+ display: flex;
699
+ align-items: center;
700
+ justify-content: center;
701
+ }
702
+
703
+ .timeline-date {
704
+ font-size: 18px;
705
+ font-weight: 700;
706
+ color: #fff;
707
+ letter-spacing: 1px;
708
+ font-family: 'SF Mono', Monaco, monospace;
709
+ cursor: pointer;
710
+ padding: 10px 20px;
711
+ border-radius: var(--radius-sm);
712
+ transition: all var(--transition-fast);
713
+ display: flex;
714
+ align-items: center;
715
+ gap: 12px;
716
+ }
717
+
718
+ .timeline-date:hover {
719
+ background: var(--color-bg-panel-hover);
720
+ }
721
+
722
+ .timeline-date i {
723
+ font-size: 14px;
724
+ color: var(--color-primary);
725
+ }
726
+
727
+ .animate-btn {
728
+ color: var(--color-primary) !important;
729
+ background: rgba(78, 204, 196, 0.1) !important;
730
+ }
731
+
732
+ .animate-btn:hover {
733
+ background: rgba(78, 204, 196, 0.2) !important;
734
+ }
735
+
736
+ .animate-btn.playing {
737
+ animation: pulse 1.5s ease-in-out infinite;
738
+ }
739
+
740
+ @keyframes pulse {
741
+ 0%, 100% { opacity: 1; }
742
+ 50% { opacity: 0.7; }
743
+ }
744
+
745
+ /* Date Picker Modal */
746
+ .datepicker-modal {
747
+ position: fixed;
748
+ inset: 0;
749
+ background: rgba(0,0,0,0.7);
750
+ z-index: 10000;
751
+ display: none;
752
+ align-items: center;
753
+ justify-content: center;
754
+ backdrop-filter: blur(4px);
755
+ }
756
+
757
+ .datepicker-modal.active {
758
+ display: flex;
759
+ }
760
+
761
+ .datepicker {
762
+ background: var(--color-bg-panel);
763
+ border-radius: var(--radius-md);
764
+ padding: 24px;
765
+ min-width: 320px;
766
+ box-shadow: var(--shadow-md);
767
+ }
768
+
769
+ .datepicker-header {
770
+ text-align: center;
771
+ font-size: 18px;
772
+ font-weight: 600;
773
+ margin-bottom: 20px;
774
+ color: var(--color-primary);
775
+ }
776
+
777
+ .datepicker-inputs {
778
+ display: flex;
779
+ gap: 12px;
780
+ margin-bottom: 20px;
781
+ }
782
+
783
+ .datepicker-inputs select, .datepicker-inputs input {
784
+ flex: 1;
785
+ height: 44px;
786
+ background: var(--color-bg-dark);
787
+ border: 1px solid var(--color-border);
788
+ border-radius: var(--radius-sm);
789
+ padding: 0 12px;
790
+ color: var(--color-text);
791
+ font-size: 14px;
792
+ }
793
+
794
+ .datepicker-actions {
795
+ display: flex;
796
+ gap: 12px;
797
+ }
798
+
799
+ .datepicker-actions button {
800
+ flex: 1;
801
+ height: 44px;
802
+ border-radius: var(--radius-sm);
803
+ border: none;
804
+ cursor: pointer;
805
+ font-size: 14px;
806
+ font-weight: 500;
807
+ transition: all var(--transition-fast);
808
+ }
809
+
810
+ .datepicker-ok {
811
+ background: var(--color-primary);
812
+ color: var(--color-bg-dark);
813
+ }
814
+
815
+ .datepicker-ok:hover {
816
+ background: var(--color-primary-dark);
817
+ }
818
+
819
+ .datepicker-cancel {
820
+ background: var(--color-bg-dark);
821
+ color: var(--color-text);
822
+ }
823
+
824
+ .datepicker-cancel:hover {
825
+ background: var(--color-bg-panel-hover);
826
+ }
827
+
828
+ /* Mobile Zoom Buttons */
829
+ .mobile-zoom {
830
+ position: absolute;
831
+ bottom: 80px;
832
+ right: 16px;
833
+ display: flex;
834
+ flex-direction: column;
835
+ gap: 8px;
836
+ z-index: 998;
837
+ }
838
+
839
+ .mobile-zoom button {
840
+ width: 48px;
841
+ height: 48px;
842
+ background: var(--color-bg-panel);
843
+ border: 1px solid var(--color-border);
844
+ border-radius: var(--radius-md);
845
+ color: var(--color-text);
846
+ cursor: pointer;
847
+ display: flex;
848
+ align-items: center;
849
+ justify-content: center;
850
+ font-size: 20px;
851
+ transition: all var(--transition-fast);
852
+ }
853
+
854
+ .mobile-zoom button:hover {
855
+ background: var(--color-bg-panel-hover);
856
+ color: var(--color-primary);
857
+ }
858
+
859
+ /* Coordinates Display */
860
+ .coords-display {
861
+ position: absolute;
862
+ bottom: 80px;
863
+ left: 16px;
864
+ background: var(--color-bg-panel);
865
+ padding: 10px 16px;
866
+ border-radius: var(--radius-md);
867
+ border: 1px solid var(--color-border);
868
+ font-size: 12px;
869
+ color: var(--color-text-muted);
870
+ font-family: 'SF Mono', Monaco, monospace;
871
+ z-index: 998;
872
+ display: none;
873
+ }
874
+
875
+ .coords-display.active {
876
+ display: block;
877
+ }
878
+
879
+ /* Alert Dropdown */
880
+ .alert-dropdown {
881
+ position: absolute;
882
+ top: 72px;
883
+ right: 16px;
884
+ background: var(--color-bg-panel);
885
+ border-radius: var(--radius-md);
886
+ border: 1px solid var(--color-border);
887
+ box-shadow: var(--shadow-md);
888
+ z-index: 999;
889
+ min-width: 280px;
890
+ display: none;
891
+ }
892
+
893
+ .alert-dropdown.active {
894
+ display: block;
895
+ }
896
+
897
+ .alert-header {
898
+ padding: 14px 16px;
899
+ border-bottom: 1px solid var(--color-border);
900
+ display: flex;
901
+ align-items: center;
902
+ gap: 10px;
903
+ font-size: 13px;
904
+ font-weight: 500;
905
+ }
906
+
907
+ .alert-header i {
908
+ color: #ff9800;
909
+ }
910
+
911
+ .alert-item {
912
+ padding: 12px 16px;
913
+ border-bottom: 1px solid var(--color-border);
914
+ font-size: 12px;
915
+ color: var(--color-text-secondary);
916
+ cursor: pointer;
917
+ transition: background var(--transition-fast);
918
+ }
919
+
920
+ .alert-item:hover {
921
+ background: var(--color-bg-panel-hover);
922
+ }
923
+
924
+ .alert-item:last-child {
925
+ border-bottom: none;
926
+ }
927
+
928
+ /* Comparison Mode Bar */
929
+ .comparison-bar {
930
+ position: absolute;
931
+ top: 72px;
932
+ left: 50%;
933
+ transform: translateX(-50%) translateY(-100%);
934
+ background: var(--color-bg-panel);
935
+ padding: 12px 20px;
936
+ border-radius: var(--radius-md);
937
+ border: 1px solid var(--color-border);
938
+ display: flex;
939
+ align-items: center;
940
+ gap: 20px;
941
+ z-index: 998;
942
+ transition: transform var(--transition-normal);
943
+ }
944
+
945
+ .comparison-bar.active {
946
+ transform: translateX(-50%) translateY(0);
947
+ }
948
+
949
+ .comparison-title {
950
+ font-size: 13px;
951
+ font-weight: 600;
952
+ }
953
+
954
+ .comparison-modes {
955
+ display: flex;
956
+ gap: 8px;
957
+ }
958
+
959
+ .comparison-mode {
960
+ padding: 8px 16px;
961
+ background: var(--color-bg-dark);
962
+ border: 1px solid var(--color-border);
963
+ border-radius: var(--radius-sm);
964
+ color: var(--color-text-muted);
965
+ font-size: 12px;
966
+ cursor: pointer;
967
+ transition: all var(--transition-fast);
968
+ }
969
+
970
+ .comparison-mode:hover, .comparison-mode.active {
971
+ color: var(--color-primary);
972
+ border-color: var(--color-primary);
973
+ }
974
+
975
+ /* Loading Spinner */
976
+ .map-loading {
977
+ position: absolute;
978
+ inset: 0;
979
+ background: var(--color-bg-dark);
980
+ display: flex;
981
+ align-items: center;
982
+ justify-content: center;
983
+ z-index: 997;
984
+ transition: opacity var(--transition-normal);
985
+ }
986
+
987
+ .map-loading.hidden {
988
+ opacity: 0;
989
+ pointer-events: none;
990
+ }
991
+
992
+ .spinner {
993
+ width: 48px;
994
+ height: 48px;
995
+ border: 3px solid var(--color-border);
996
+ border-top-color: var(--color-primary);
997
+ border-radius: 50%;
998
+ animation: spin 1s linear infinite;
999
+ }
1000
+
1001
+ @keyframes spin {
1002
+ to { transform: rotate(360deg); }
1003
+ }
1004
+
1005
+ /* Toast Notification */
1006
+ .toast {
1007
+ position: fixed;
1008
+ bottom: 100px;
1009
+ left: 50%;
1010
+ transform: translateX(-50%) translateY(100px);
1011
+ background: var(--color-bg-panel);
1012
+ padding: 14px 24px;
1013
+ border-radius: var(--radius-md);
1014
+ border: 1px solid var(--color-primary);
1015
+ color: var(--color-text);
1016
+ font-size: 13px;
1017
+ z-index: 10001;
1018
+ transition: transform var(--transition-normal);
1019
+ display: flex;
1020
+ align-items: center;
1021
+ gap: 12px;
1022
+ }
1023
+
1024
+ .toast.active {
1025
+ transform: translateX(-50%) translateY(0);
1026
+ }
1027
+
1028
+ .toast i {
1029
+ color: var(--color-primary);
1030
+ }
1031
+
1032
+ /* Responsive */
1033
+ @media (max-width: 768px) {
1034
+ :root {
1035
+ --sidebar-width: 100%;
1036
+ }
1037
+
1038
+ #wvSidebarEl {
1039
+ bottom: 0;
1040
+ transform: translateX(-100%);
1041
+ }
1042
+
1043
+ #wvSidebarEl.mobile-open {
1044
+ transform: translateX(0);
1045
+ }
1046
+
1047
+ #wvSidebarEl.collapsed {
1048
+ transform: translateX(-100%);
1049
+ }
1050
+
1051
+ #wvToolbarEl {
1052
+ left: 12px !important;
1053
+ }
1054
+
1055
+ .toolbar-brand {
1056
+ display: none;
1057
+ }
1058
+
1059
+ .mobile-only {
1060
+ display: flex !important;
1061
+ }
1062
+
1063
+ #timeline-container {
1064
+ padding: 0 12px;
1065
+ }
1066
+
1067
+ .timeline-date {
1068
+ font-size: 14px;
1069
+ padding: 8px 12px;
1070
+ }
1071
+ }
1072
+
1073
+ @media (min-width: 769px) {
1074
+ .mobile-only {
1075
+ display: none !important;
1076
+ }
1077
+ }
1078
+
1079
+ /* Utility */
1080
+ .sr-only {
1081
+ position: absolute;
1082
+ width: 1px;
1083
+ height: 1px;
1084
+ padding: 0;
1085
+ margin: -1px;
1086
+ overflow: hidden;
1087
+ clip: rect(0, 0, 0, 0);
1088
+ white-space: nowrap;
1089
+ border: 0;
1090
+ }
1091
+
1092
+ /* Custom Scrollbar */
1093
+ ::-webkit-scrollbar {
1094
+ width: 8px;
1095
+ height: 8px;
1096
+ }
1097
+
1098
+ ::-webkit-scrollbar-track {
1099
+ background: var(--color-bg-dark);
1100
+ }
1101
+
1102
+ ::-webkit-scrollbar-thumb {
1103
+ background: var(--color-border);
1104
+ border-radius: 4px;
1105
+ }
1106
+
1107
+ ::-webkit-scrollbar-thumb:hover {
1108
+ background: #555;
1109
+ }
1110
+
1111
+ /* Leaflet Customization */
1112
+ .leaflet-control-attribution {
1113
+ background: var(--color-bg-panel) !important;
1114
+ color: var(--color-text-muted) !important;
1115
+ font-size: 10px !important;
1116
+ padding: 4px 8px !important;
1117
+ border-radius: var(--radius-sm) 0 0 0 !important;
1118
+ }
1119
+
1120
+ .leaflet-control-attribution a {
1121
+ color: var(--color-primary) !important;
1122
+ }
1123
+
1124
+ /* Projection Toggle Modal */
1125
+ .projection-modal {
1126
+ position: fixed;
1127
+ inset: 0;
1128
+ background: rgba(0,0,0,0.7);
1129
+ z-index: 10000;
1130
+ display: none;
1131
+ align-items: center;
1132
+ justify-content: center;
1133
+ }
1134
+
1135
+ .projection-modal.active {
1136
+ display: flex;
1137
+ }
1138
+
1139
+ .projection-grid {
1140
+ display: grid;
1141
+ grid-template-columns: repeat(3, 1fr);
1142
+ gap: 16px;
1143
+ background: var(--color-bg-panel);
1144
+ padding: 24px;
1145
+ border-radius: var(--radius-md);
1146
+ }
1147
+
1148
+ .projection-option {
1149
+ width: 120px;
1150
+ height: 120px;
1151
+ background: var(--color-bg-dark);
1152
+ border: 2px solid var(--color-border);
1153
+ border-radius: var(--radius-md);
1154
+ cursor: pointer;
1155
+ display: flex;
1156
+ flex-direction: column;
1157
+ align-items: center;
1158
+ justify-content: center;
1159
+ gap: 12px;
1160
+ transition: all var(--transition-fast);
1161
+ }
1162
+
1163
+ .projection-option:hover, .projection-option.active {
1164
+ border-color: var(--color-primary);
1165
+ }
1166
+
1167
+ .projection-option i {
1168
+ font-size: 40px;
1169
+ color: var(--color-text-muted);
1170
+ }
1171
+
1172
+ .projection-option.active i {
1173
+ color: var(--color-primary);
1174
+ }
1175
+
1176
+ .projection-option span {
1177
+ font-size: 12px;
1178
+ color: var(--color-text);
1179
+ }
1180
+
1181
+ /* Measure Tool */
1182
+ .measure-tooltip {
1183
+ background: var(--color-bg-panel);
1184
+ border: 1px solid var(--color-primary);
1185
+ color: var(--color-text);
1186
+ padding: 8px 12px;
1187
+ border-radius: var(--radius-sm);
1188
+ font-size: 12px;
1189
+ white-space: nowrap;
1190
+ }
1191
+ </style>
1192
+ </head>
1193
+ <body>
1194
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
1195
+
1196
+ <div id="app">
1197
+ <!-- Sidebar -->
1198
+ <section id="wvSidebarEl">
1199
+ <div class="sidebar-header">
1200
+ <div id="wv-logo" title="Reset to Defaults">WV</div>
1201
+ <button class="sidebar-toggle-btn" id="collapseSidebarBtn" aria-label="Toggle Sidebar">
1202
+ <i class="fa-solid fa-chevron-left"></i>
1203
+ </button>
1204
+ </div>
1205
+
1206
+ <div class="nav-tabs">
1207
+ <button class="nav-item active" data-tab="layers">Layers</button>
1208
+ <button class="nav-item" data-tab="events">Events</button>
1209
+ </div>
1210
+
1211
+ <div class="tab-content">
1212
+ <!-- Layers Tab -->
1213
+ <div class="tab-pane active" id="layers-tab">
1214
+ <div id="layers-scroll-container">
1215
+ <!-- Reference Layers -->
1216
+ <div class="layer-group">
1217
+ <div class="layer-group-header" onclick="toggleGroup(this)">
1218
+ <span>Reference</span>
1219
+ <i class="fa-solid fa-chevron-down"></i>
1220
+ </div>
1221
+ <div class="group-content">
1222
+ <div class="layer-item" data-layer="labels" onclick="toggleOverlay('labels', this)">
1223
+ <div class="layer-visibility" id="labels-visibility">
1224
+ <i class="fa-solid fa-eye-slash"></i>
1225
+ </div>
1226
+ <div class="layer-info">
1227
+ <div class="layer-title">Place Labels</div>
1228
+ <div class="layer-subtitle">Esri, TomTom, OpenStreetMap</div>
1229
+ </div>
1230
+ </div>
1231
+ <div class="layer-item" data-layer="features" onclick="toggleOverlay('features', this)">
1232
+ <div class="layer-visibility" id="features-visibility">
1233
+ <i class="fa-solid fa-eye-slash"></i>
1234
+ </div>
1235
+ <div class="layer-info">
1236
+ <div class="layer-title">Coastlines / Borders / Roads</div>
1237
+ <div class="layer-subtitle">© OpenStreetMap contributors</div>
1238
+ </div>
1239
+ </div>
1240
+ <div class="layer-item active" data-layer="coastlines" onclick="toggleOverlay('coastlines', this)">
1241
+ <div class="layer-visibility visible" id="coastlines-visibility">
1242
+ <i class="fa-solid fa-eye"></i>
1243
+ </div>
1244
+ <div class="layer-info">
1245
+ <div class="layer-title">Coastlines</div>
1246
+ <div class="layer-subtitle">© OpenStreetMap contributors</div>
1247
+ </div>
1248
+ </div>
1249
+ </div>
1250
+ </div>
1251
+
1252
+ <!-- Base Layers -->
1253
+ <div class="layer-group">
1254
+ <div class="layer-group-header" onclick="toggleGroup(this)">
1255
+ <span>Base Layers</span>
1256
+ <i class="fa-solid fa-chevron-down"></i>
1257
+ </div>
1258
+ <div class="group-content">
1259
+ <div class="base-layer-item" data-base="pace" onclick="setBaseLayer('pace', this)">
1260
+ <div class="base-layer-title">Corrected Reflectance (True Color) <span>PACE / OCI</span></div>
1261
+ <div class="base-layer-source">Ocean Color Instrument</div>
1262
+ </div>
1263
+ <div class="base-layer-item" data-base="noaa21" onclick="setBaseLayer('noaa21', this)">
1264
+ <div class="base-layer-title">Corrected Reflectance (True Color) <span>NOAA-21 / VIIRS</span></div>
1265
+ <div class="base-layer-source">Visible Infrared Imaging Radiometer Suite</div>
1266
+ <div class="layer-notice">!</div>
1267
+ </div>
1268
+ <div class="base-layer-item" data-base="noaa20" onclick="setBaseLayer('noaa20', this)">
1269
+ <div class="base-layer-title">Corrected Reflectance (True Color) <span>NOAA-20 / VIIRS</span></div>
1270
+ <div class="base-layer-source">Visible Infrared Imaging Radiometer Suite</div>
1271
+ </div>
1272
+ <div class="base-layer-item" data-base="snpp" onclick="setBaseLayer('snpp', this)">
1273
+ <div class="base-layer-title">Corrected Reflectance (True Color) <span>Suomi NPP / VIIRS</span></div>
1274
+ <div class="base-layer-source">Visible Infrared Imaging Radiometer Suite</div>
1275
+ </div>
1276
+ <div class="base-layer-item" data-base="aqua" onclick="setBaseLayer('aqua', this)">
1277
+ <div class="base-layer-title">Corrected Reflectance (True Color) <span>Aqua / MODIS</span></div>
1278
+ <div class="base-layer-source">Moderate Resolution Imaging Spectroradiometer</div>
1279
+ </div>
1280
+ <div class="base-layer-item active" data-base="terra" onclick="setBaseLayer('terra', this)">
1281
+ <div class="base-layer-title">Corrected Reflectance (True Color) <span>Terra / MODIS</span></div>
1282
+ <div class="base-layer-source">Moderate Resolution Imaging Spectroradiometer <span class="layer-badge">v6.1 NRT</span></div>
1283
+ </div>
1284
+ </div>
1285
+ </div>
1286
+ </div>
1287
+
1288
+ <div class="add-layers-container">
1289
+ <button class="add-layers-btn" onclick="showAddLayers()">
1290
+ <i class="fa-solid fa-plus"></i>
1291
+ Add Layers
1292
+ </button>
1293
+ </div>
1294
+ </div>
1295
+
1296
+ <!-- Events Tab -->
1297
+ <div class="tab-pane" id="events-tab">
1298
+ <div id="events-scroll-container">
1299
+ <div class="event-item" onclick="flyToEvent(-34.6037, -58.3816, 'Wildfire in Argentina')">
1300
+ <div class="event-category wildfire">
1301
+ <i class="fa-solid fa-fire"></i>
1302
+ Wildfire
1303
+ </div>
1304
+ <div class="event-title">Wildfire in Buenos Aires Province</div>
1305
+ <div class="event-meta">
1306
+ <span><i class="fa-regular fa-clock"></i> 2 hours ago</span>
1307
+ <span><i class="fa-solid fa-location-dot"></i> Argentina</span>
1308
+ </div>
1309
+ </div>
1310
+ <div class="event-item" onclick="flyToEvent(35.6762, 139.6503, 'Typhoon approaching Japan')">
1311
+ <div class="event-category storm">
1312
+ <i class="fa-solid fa-hurricane"></i>
1313
+ Severe Storm
1314
+ </div>
1315
+ <div class="event-title">Typhoon Khanun approaching Honshu</div>
1316
+ <div class="event-meta">
1317
+ <span><i class="fa-regular fa-clock"></i> 5 hours ago</span>
1318
+ <span><i class="fa-solid fa-location-dot"></i> Japan</span>
1319
+ </div>
1320
+ </div>
1321
+ <div class="event-item" onclick="flyToEvent(64.9631, -19.0208, 'Volcanic eruption in Iceland')">
1322
+ <div class="event-category volcano">
1323
+ <i class="fa-solid fa-volcano"></i>
1324
+ Volcano
1325
+ </div>
1326
+ <div class="event-title">Fagradalsfjall eruption continues</div>
1327
+ <div class="event-meta">
1328
+ <span><i class="fa-regular fa-clock"></i> 1 day ago</span>
1329
+ <span><i class="fa-solid fa-location-dot"></i> Iceland</span>
1330
+ </div>
1331
+ </div>
1332
+ <div class="event-item" onclick="flyToEvent(23.8103, 90.4125, 'Flooding in Bangladesh')">
1333
+ <div class="event-category flood">
1334
+ <i class="fa-solid fa-water"></i>
1335
+ Flood
1336
+ </div>
1337
+ <div class="event-title">Monsoon flooding in Dhaka region</div>
1338
+ <div class="event-meta">
1339
+ <span><i class="fa-regular fa-clock"></i> 2 days ago</span>
1340
+ <span><i class="fa-solid fa-location-dot"></i> Bangladesh</span>
1341
+ </div>
1342
+ </div>
1343
+ </div>
1344
+ </div>
1345
+ </div>
1346
+ </section>
1347
+
1348
+ <!-- Mobile Sidebar Toggle -->
1349
+ <button class="mobile-only wv-toolbar-button" style="position: fixed; top: 12px; left: 12px; z-index: 1001;" onclick="toggleMobileSidebar()">
1350
+ <i class="fa-solid fa-layer-group"></i>
1351
+ <span class="badge">9</span>
1352
+ </button>
1353
+
1354
+ <!-- Toolbar -->
1355
+ <div id="wvToolbarEl">
1356
+ <div class="toolbar-left">
1357
+ <div class="toolbar-brand">
1358
+ <div>
1359
+ <div class="toolbar-brand-title">NASA Worldview</div>
1360
+ <div class="toolbar-brand-subtitle">Earth Science Data System</div>
1361
+ </div>
1362
+ </div>
1363
+ </div>
1364
+
1365
+ <div class="toolbar-right">
1366
+ <button class="wv-toolbar-button" title="Location Search" onclick="toggleSearch()">
1367
+ <i class="fa-solid fa-magnifying-glass-location"></i>
1368
+ </button>
1369
+ <button class="wv-toolbar-button" title="Share" onclick="shareMap()">
1370
+ <i class="fa-solid fa-share-from-square"></i>
1371
+ </button>
1372
+ <button class="wv-toolbar-button" title="Switch Projection" onclick="toggleProjectionModal()">
1373
+ <i class="fa-solid fa-earth-asia"></i>
1374
+ </button>
1375
+ <button class="wv-toolbar-button" title="Take Snapshot" onclick="takeSnapshot()">
1376
+ <i class="fa-solid fa-camera"></i>
1377
+ </button>
1378
+ <button class="wv-toolbar-button" title="Information" onclick="showInfo()">
1379
+ <i class="fa-solid fa-circle-info"></i>
1380
+ <span class="badge">2</span>
1381
+ </button>
1382
+ </div>
1383
+ </div>
1384
+
1385
+ <!-- Search Overlay -->
1386
+ <div class="search-overlay" id="searchOverlay">
1387
+ <div class="search-input-container">
1388
+ <input type="text" class="search-input" id="searchInput" placeholder="Search for places, coordinates, or features..." onkeypress="handleSearchKey(event)">
1389
+ <button class="search-close" onclick="toggleSearch()">
1390
+ <i class="fa-solid fa-xmark"></i>
1391
+ </button>
1392
+ </div>
1393
+ </div>
1394
+
1395
+ <!-- Map -->
1396
+ <div id="wv-map">
1397
+ <div id="mapCanvas"></div>
1398
+ <div class="map-loading" id="mapLoading">
1399
+ <div class="spinner"></div>
1400
+ </div>
1401
+ </div>
1402
+
1403
+ <!-- Mobile Zoom Controls -->
1404
+ <div class="mobile-zoom">
1405
+ <button onclick="map.zoomIn()" title="Zoom In">
1406
+ <i class="fa-solid fa-plus"></i>
1407
+ </button>
1408
+ <button onclick="map.zoomOut()" title="Zoom Out">
1409
+ <i class="fa-solid fa-minus"></i>
1410
+ </button>
1411
+ </div>
1412
+
1413
+ <!-- Coordinates Display -->
1414
+ <div class="coords-display" id="coordsDisplay">
1415
+ <span id="coordsText">0.0000°, 0.0000°</span>
1416
+ </div>
1417
+
1418
+ <!-- Alert Dropdown -->
1419
+ <div class="alert-dropdown" id="alertDropdown">
1420
+ <div class="alert-header">
1421
+ <i class="fa-solid fa-triangle-exclamation"></i>
1422
+ <span>Layer Notifications</span>
1423
+ </div>
1424
+ <div class="alert-item" onclick="showAlertDetail('noaa21')">
1425
+ <strong>NOAA-21 VIIRS</strong> - Data availability delayed by 2 hours
1426
+ </div>
1427
+ <div class="alert-item" onclick="showAlertDetail('terra')">
1428
+ <strong>Terra MODIS</strong> - Orbital maintenance scheduled
1429
+ </div>
1430
+ </div>
1431
+
1432
+ <!-- Comparison Mode Bar -->
1433
+ <div class="comparison-bar" id="comparisonBar">
1434
+ <span class="comparison-title">Comparison Mode</span>
1435
+ <div class="comparison-modes">
1436
+ <button class="comparison-mode active" onclick="setComparisonMode('swipe')">Swipe</button>
1437
+ <button class="comparison-mode" onclick="setComparisonMode('opacity')">Opacity</button>
1438
+ <button class="comparison-mode" onclick="setComparisonMode('spy')">Spy</button>
1439
+ </div>
1440
+ <button class="wv-toolbar-button" style="width: 32px; height: 32px;" onclick="toggleComparison()">
1441
+ <i class="fa-solid fa-xmark"></i>
1442
+ </button>
1443
+ </div>
1444
+
1445
+ <!-- Timeline -->
1446
+ <div id="timeline-container">
1447
+ <div class="timeline-left">
1448
+ <button class="timeline-btn" title="Previous Day" onclick="changeDate(-1)">
1449
+ <i class="fa-solid fa-arrow-left"></i>
1450
+ </button>
1451
+ <button class="timeline-btn now-btn" title="Go to Today" onclick="goToToday()">
1452
+ NOW
1453
+ </button>
1454
+ <button class="timeline-btn" title="Next Day" onclick="changeDate(1)">
1455
+ <i class="fa-solid fa-arrow-right"></i>
1456
+ </button>
1457
+ </div>
1458
+
1459
+ <div class="timeline-date-container">
1460
+ <div class="timeline-date" onclick="openDatePicker()">
1461
+ <span id="dateDisplay">2026 JAN 29</span>
1462
+ <i class="fa-solid fa-calendar"></i>
1463
+ </div>
1464
+ </div>
1465
+
1466
+ <div class="timeline-right">
1467
+ <button class