-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (188 loc) · 10 KB
/
Copy pathindex.html
File metadata and controls
205 lines (188 loc) · 10 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>Globo Interativo — Visualização Planetária em Tempo Real</title>
<meta name="description" content="Explore a Terra em 3D: fronteiras, fusos horários, trópicos, cabos submarinos, estatísticas ao vivo e dossiês de países. Ferramenta digital gratuita para geografia, cidadania e educação alinhada à BNCC." />
<meta name="author" content="Diego Duenhas" />
<meta name="theme-color" content="#03060a" />
<link rel="canonical" href="https://globo.educar.workers.dev/" />
<!-- Open Graph / WhatsApp / redes sociais -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://globo.educar.workers.dev/" />
<meta property="og:site_name" content="Globo Interativo" />
<meta property="og:title" content="Globo Interativo — Conheça o Planeta em Tempo Real" />
<meta property="og:description" content="Visualização 3D interativa da Terra com camadas geográficas, dados ao vivo e dossiês de países. Ideal para sala de aula, autodidatismo e formação cidadã." />
<meta property="og:image" content="https://globo.educar.workers.dev/og-image.webp?v=3" />
<meta property="og:image:type" content="image/webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Globo Interativo — visualização planetária 3D em interface high-tech" />
<meta property="og:locale" content="pt_BR" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Globo Interativo — Conheça o Planeta em Tempo Real" />
<meta name="twitter:description" content="Visualização 3D interativa da Terra com camadas geográficas, dados ao vivo e dossiês de países." />
<meta name="twitter:image" content="https://globo.educar.workers.dev/og-image.webp?v=3" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@500;700;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Tela / bezel do monitor -->
<div class="monitor">
<div class="bezel-label bezel-label--top">GLOBO INTERATIVO · GEO-VISUALIZAÇÃO PLANETÁRIA · MODEL GX-9</div>
<div class="bezel-label bezel-label--bottom">PWR ▮▮▮▮▮▮▮▯▯ · SIGNAL 98.4% · ENC AES-256</div>
<footer class="site-footer">
Desenvolvido por <a href="https://diegoduenhas.com.br" target="_blank" rel="noopener noreferrer">Diego Duenhas</a>
· Licença <a href="https://github.com/dduenhas/globo-interativo/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">MIT</a>
· <a href="https://github.com/dduenhas/globo-interativo" target="_blank" rel="noopener noreferrer">Código no GitHub</a>
</footer>
<div class="screen" id="screen">
<!-- Render do globo -->
<div id="globeViz"></div>
<!-- Camadas de efeito -->
<div class="fx fx-grid"></div>
<div class="fx fx-scanlines"></div>
<div class="fx fx-vignette"></div>
<div class="fx fx-flicker"></div>
<div class="fx fx-noise"></div>
<!-- HUD -->
<div class="hud">
<!-- Cantos -->
<span class="corner corner--tl"></span>
<span class="corner corner--tr"></span>
<span class="corner corner--bl"></span>
<span class="corner corner--br"></span>
<!-- Barra superior -->
<header class="topbar">
<div class="topbar__left">
<span class="logo">◢◤ GLOBO INTERATIVO</span>
<span class="divider">/</span>
<span class="subtitle">VISUALIZAÇÃO PLANETÁRIA EM TEMPO REAL</span>
</div>
<div class="topbar__right">
<span class="stat"><i class="dot dot--ok"></i> LINK ESTÁVEL</span>
<span class="stat" id="utcClock">--:--:-- UTC</span>
<span class="stat"><i class="dot dot--warn"></i> TRK <span id="trackCount">000</span></span>
</div>
</header>
<!-- Busca de países -->
<search class="search-dock" id="globeSearchWrap" role="search" autocomplete="off">
<div class="search-dock__box">
<input
type="search"
id="globeSearchInput"
name="globe-q"
class="search-dock__input"
placeholder="Buscar país…"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
enterkeyhint="search"
role="searchbox"
aria-label="Buscar país no globo"
data-1p-ignore
data-lpignore="true"
data-bwignore
data-form-type="other"
data-protonpass-ignore
readonly
/>
<span class="search-dock__icon" aria-hidden="true">⌕</span>
</div>
<div class="search-dock__drop" id="globeSearchDrop" hidden>
<div class="search-dock__list" id="globeSearchList"></div>
</div>
</search>
<!-- Painel esquerdo: stream de código / logs -->
<aside class="panel panel--left" id="telemetryPanel">
<div class="panel__head">
<span>SYS://telemetry.log</span>
<span class="blink">▍</span>
</div>
<div class="panel__body code-stream" id="codeStream"></div>
</aside>
<!-- Painel direito: dados em tempo real / país -->
<aside class="panel panel--right" id="infoPanel">
<div class="panel__head">
<span id="infoTitle">PLANETA TERRA // TEMPO REAL</span>
<div class="panel__head-actions">
<button type="button" class="panel__toggle" id="infoPanelToggle" aria-expanded="true" aria-controls="infoBody" aria-label="Recolher painel de informações">▾</button>
<span class="blink panel__live">●</span>
</div>
</div>
<div class="panel__body info" id="infoBody"></div>
</aside>
<!-- Mira central -->
<div class="crosshair">
<span class="crosshair__ring"></span>
<span class="crosshair__tick crosshair__tick--n"></span>
<span class="crosshair__tick crosshair__tick--s"></span>
<span class="crosshair__tick crosshair__tick--e"></span>
<span class="crosshair__tick crosshair__tick--w"></span>
</div>
<!-- Barra inferior -->
<footer class="bottombar">
<div class="readbar readbar--coords" id="coordReadout">LAT +00.000 LON +000.000</div>
<div class="toggles-wrap" id="togglesDesktopMount">
<div class="toggles" id="toggles">
<button class="tgl tgl--master" data-f="master"><i></i>⏻ SISTEMAS</button>
<button class="tgl active" data-f="telemetry"><i></i>▤ TELEMETRIA</button>
<button class="tgl" data-f="night"><i></i>☾ NOITE</button>
<button class="tgl" data-f="daynight"><i></i>◐ DIA/NOITE</button>
<button class="tgl active" data-f="rotate"><i></i>⟳ ROTAÇÃO</button>
<button class="tgl" data-f="borders"><i></i>▢ FRONTEIRAS</button>
<button class="tgl" data-f="labels"><i></i>⬡ NOMES</button>
<button class="tgl" data-f="oceans"><i></i>∿ OCEANOS</button>
<button class="tgl" data-f="sats"><i></i>✦ SATÉLITES</button>
<button class="tgl" data-f="arcs"><i></i>⤳ ARCOS</button>
<button class="tgl" data-f="cables"><i></i>≋ CABOS</button>
<button class="tgl" data-f="tz"><i></i>⌚ FUSOS</button>
<button class="tgl" data-f="tropics"><i></i>≡ TRÓPICOS</button>
<button class="tgl tgl--action" data-f="reset"><i></i>⊙ RECENTRAR</button>
</div>
</div>
<div class="readbar readbar--meta">ALT <span id="altReadout">12 450 km</span> · ZOOM <span id="zoomReadout">1.0x</span></div>
<div class="zoom-pill" id="zoomPill">
<button type="button" class="zoom-pill__btn" id="zoomOutBtn" aria-label="Afastar globo">⌕−</button>
<button type="button" class="zoom-pill__btn" id="zoomInBtn" aria-label="Aproximar globo">⌕+</button>
</div>
<button type="button" class="sys-drawer-fab" id="sysDrawerFab" aria-expanded="false" aria-controls="sysDrawerPanel" aria-label="Abrir menu de camadas e sistemas">⏻ CAMADAS</button>
</footer>
<!-- Tooltip flutuante das camadas -->
<div class="layer-tip" id="layerTip" aria-hidden="true"></div>
</div>
<!-- Tela de boot -->
<div class="boot" id="boot">
<pre id="bootText"></pre>
</div>
</div>
<!-- Drawer mobile (fora de .screen para não ser cortado por overflow) -->
<div class="sys-drawer" id="sysDrawer" aria-hidden="true">
<div class="sys-drawer__backdrop" id="sysDrawerBackdrop"></div>
<div class="sys-drawer__panel" id="sysDrawerPanel">
<div class="sys-drawer__head">
<span>CAMADAS & SISTEMAS</span>
<button type="button" class="sys-drawer__close" id="sysDrawerClose" aria-label="Fechar menu">✕</button>
</div>
<div class="sys-drawer__body" id="togglesMobileMount"></div>
</div>
</div>
</div>
<script type="importmap">
{
"imports": {
"solar-calculator": "https://esm.sh/solar-calculator@0.3.0"
}
}
</script>
<!-- Three.js global ANTES do globe.gl (mesma instância para shader dia/noite) -->
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://unpkg.com/globe.gl@2.34.4/dist/globe.gl.min.js"></script>
<script type="module" src="app.js?v=oceans-v1"></script>
</body>
</html>