-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
449 lines (385 loc) · 26 KB
/
index.html
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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS DA PÁGINA -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- BOOTSTRAP -->
<link href="https://cdn.egp.ce.gov.br/AulasWeb/extensoes/bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.egp.ce.gov.br/AulasWeb/extensoes/bootstrap/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.min.css"
integrity="sha512-b42SanD3pNHoihKwgABd18JUZ2g9j423/frxIP5/gtYgfBz/0nDHGdY/3hi+3JwhSckM3JLklQ/T6tJmV7mZEw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- WOW JS -->
<link rel="stylesheet" href="https://cdn.egp.ce.gov.br/AulasWeb/extensoes/wow/animate_4.1.1.min.css">
<script src="https://cdn.egp.ce.gov.br/AulasWeb/extensoes/wow/wow.min.js"></script>
<script>
new WOW().init();
</script>
<link rel="shortcut icon" href="assets/imgs/favicon.png" type="image/x-icon">
<title>EcoFuture</title>
</head>
<body>
<!-- PRE-LOADER -->
<div class="d-flex justify-content-center">
<div class="loading">
<img src="./assets/imgs/[email protected]" alt="Carregando..." width="100" height="100">
</div>
</div>
<div class="body">
<!-- BOTÃO SCROLL TO TOP -->
<button id="scrollToTopBtn" title="Voltar ao Topo">↑</button>
<!-- HEADER -->
<header id="header">
<nav class="topnav">
<a href="#"><img class="nav_logo" src="assets/imgs/logo.png" alt=""></a>
<div class="topnav-right">
<a href="#inicio">Início</a>
<a href="#intro">Introdução</a>
<a href="#noticia">Notícias</a>
<a href="#ajuda">Como posso ajudar?</a>
<a href="#tecnologia">Tecnologias</a>
</div>
<!-- MENU RESPONSIVO -->
<button class="btn responsive_menu" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"><i
class="fa-solid fa-bars"></i></button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop"
aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel"><img class="nav_logo_responsive"
src="assets/imgs/logo.png" alt=""></h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="topnav_responsive" id="topnav_responsive">
<a href="#inicio">Início</a>
<a href="#intro">Introdução</a>
<a href="#noticia">Notícias</a>
<a href="#ajuda">Como posso ajudar?</a>
<a href="#tecnologia">Tecnologias</a>
</div>
</div>
</div>
</nav>
</header>
<!-- IMAGEM DECORATIVA -->
<img class="folhas wow fadeInUp" data-wow-delay=".2s" src="assets/imgs/folhas.png" alt="">
<main class="main">
<!-- SEÇÃO DE INÍCIO -->
<section class="sec">
<div class="divisao">
<div class="texto_intro">
<div>
<h2 id="inicio" class="wow fadeInUp" data-wow-delay=".2s">Venha <span class="fw-bold"
style="color: #57cc99;">transformar</span> o futuro!</h2>
<p class="wow fadeInUp" data-wow-delay=".4s">Exploraremos diversas maneiras pelas quais a
Tecnologia da Informação pode ser aplicada para enfrentar as consequências das mudanças
climáticas, desde o monitoramento e a previsão do clima, até a adoção de práticas
sustentáveis em setores como agricultura, energia e transporte. Ao integrar inovação
tecnológica com estratégias de adaptação, podemos avançar em direção a um futuro mais
sustentável e resiliente para as gerações presentes e futuras.</p>
<button class="instagram wow fadeInUp" data-wow-delay="0.6s">
<a href="https://www.instagram.com/projeto_ecofuture/" target="_blank"
rel="noopener noreferrer">Confira nosso Instagram</a>
</button>
</div>
</div>
<div class="d-flex justify-content-center">
<img class="main_img wow fadeInUp" data-wow-delay=".5s" src="assets/imgs/main.jpg" alt="">
</div>
</div>
</section>
<!-- SEÇÃO DE INTRODUÇÃO -->
<section class="sec">
<h4 class="wow fadeInUp" data-wow-delay="0.2s" id="intro">Introdução</h4>
<h3 class="wow fadeInUp" data-wow-delay="0.4s">Mudanças Climáticas e a Tecnologia</h3>
<p class="text wow fadeInUp" data-wow-delay=".6s">À medida que as consequências das mudanças
climáticas trazem cada vez mais problemas
que
necessitam de urgência, a busca por soluções eficazes para amenizar esses impactos torna-se
indiscutível. A área de Tecnologia da Informação (T.I.) surge como uma ferramenta fundamental
nesse esforço, oferecendo um leque de possibilidades para monitorar, prever e responder aos
desafios ambientais que enfrentamos. Nesta era digital, onde a conectividade e a inovação
tecnológica moldam a forma como interagimos com o mundo, a T.I. desempenha um papel crucial na
busca por essas respostas. As mudanças climáticas têm sido associadas a uma série de eventos
extremos, incluindo enchentes, secas, incêndios florestais e tempestades mais intensas. Esses
desastres naturais não apenas representam uma ameaça imediata para comunidades em todo o mundo,
mas também destacam a urgência de ações para mitigar e adaptar-se às mudanças climáticas.</p>
<!-- TÓPICO DE CAUSAS -->
<h3 class="wow fadeInUp" data-wow-delay="0.4s" style="margin-bottom: 3rem;">Mudanças Climáticas e suas
causas</h3>
<div class="row">
<div class="col card_search">
<i class="bi bi-lightning-charge icon"></i>
<h4>Geração de energia</h4>
<p>A geração de eletricidade e calor pela queima de combustíveis fósseis é responsável por uma
boa parcela das emissões globais. A maior parte da eletricidade ainda é gerada pela queima
de carvão, petróleo ou gás, o que produz dióxido de carbono e óxido nitroso, poderosos gases
de efeito estufa que recobrem o planeta e retêm o calor do sol. No mundo todo, apenas cerca
de um quarto da eletricidade é gerada por vento, sol e outros recursos renováveis que, ao
contrário dos combustíveis fósseis, emitem pouco ou nenhum gás de efeito estufa ou poluentes
do ar.</p>
<p>Fonte: <a href="https://www.un.org/pt/climatechange/science/causes-effects-climate-change"
target="_blank" rel="noopener noreferrer">Nações Unidas</a></p>
</div>
<div class="col card_search">
<i class="bi bi-tree icon"></i>
<h4>Desmatamento florestal</h4>
<p>O desmatamento de florestas para criar fazendas ou pastos, ou por outros motivos, gera
emissões. Isso acontece porque, ao serem cortadas, as árvores liberam o carbono que estavam
armazenando. Cerca de 12 milhões de hectares de florestas são destruídos por ano. Como as
florestas absorvem o dióxido de carbono, a destruição delas também limita a capacidade da
natureza em manter as emissões fora da atmosfera. O desmatamento, assim como a agricultura e
outras mudanças no uso da terra, é responsável por cerca de um quarto das emissões globais
de gases do efeito estufa. </p>
<p>Fonte: <a href="https://www.un.org/pt/climatechange/science/causes-effects-climate-change"
target="_blank" rel="noopener noreferrer">Nações Unidas</a></p>
</div>
</div>
<div class="row">
<div class="col card_search">
<i class="bi bi-cart4 icon"></i>
<h4>Excesso de consumo</h4>
<p>Sua casa e seu uso de energia, a forma como você se locomove, o que você come e quanto lixo
você produz contribuem para as emissões de gases de efeito estufa. Além, é claro, do consumo
de produtos como roupas, eletrônicos e plásticos. Uma grande parte das emissões globais de
gases do efeito estufa está vinculada a residências particulares. Nossos estilos de vida têm
um profundo impacto no nosso planeta. Os mais ricos têm a maior responsabilidade: a parcela
1% mais rica da população global combinada responde por mais emissões de gases do efeito
estufa do que os 50% mais pobres.</p>
<p>Fonte: <a href="https://www.un.org/pt/climatechange/science/causes-effects-climate-change"
target="_blank" rel="noopener noreferrer">Nações Unidas</a></p>
</div>
<div class="col card_search">
<i class="bi bi-car-front icon"></i>
<h4>Uso de transporte</h4>
<p>A maioria dos carros, caminhões, navios e aviões funcionam com combustíveis fósseis. Isso faz
com que o transporte seja um dos grandes responsáveis pelos gases de efeito estufa,
especialmente emissões de dióxido de carbono. Os veículos rodoviários representam a maior
parte, devido à combustão de produtos derivados de petróleo, como a gasolina, em motores de
combustão interna. No entanto, as emissões de navios e aviões continuam a crescer. O
transporte é responsável por quase um quarto das emissões globais de dióxido de carbono
relacionadas à energia. E as tendências apontam para um aumento significativo no uso de
energia para o transporte nos próximos anos.</p>
<p>Fonte: <a href="https://www.un.org/pt/climatechange/science/causes-effects-climate-change"
target="_blank" rel="noopener noreferrer">Nações Unidas</a></p>
</div>
</div>
<!-- SEÇÃO DE NOTÍCIAS -->
<h4 class="wow fadeInUp" data-wow-delay="0.2s" id="noticia">Notícias</h4>
<h3 class="wow fadeInUp" data-wow-delay=".8s">Principais notícias relacionadas a desastres
ambientais</h3>
<div class="row">
<div class="col d-flex justify-content-center wow fadeInUp" data-wow-delay=".2s">
<div class="card_info">
<img src="assets/imgs/noticias/tagreuters.com2024binary_LYNXMPEK460K2-FILEDIMAGE.webp"
alt="">
<h5>Enchentes no RS são lembrete de efeitos caóticos da crise climática, diz ONU</h5>
<p class="desc">O secretário-geral da ONU, António Guterres, lamentou nesta quarta-feira
(8) a destruição e as mortes causadas pelas enchentes
no Rio Grande do Sul. Ele também afirmou que equipes da organização internacional
estão de prontidão para auxiliar o Brasil.</p>
<p>Fonte: <a
href="https://www.cnnbrasil.com.br/internacional/enchentes-no-rs-sao-lembrete-de-efeitos-caoticos-da-crise-climatica-diz-onu/"
target="_blank" rel="noopener noreferrer">CNN Brasil</a></p>
</div>
</div>
<div class="col d-flex justify-content-center wow fadeInUp" data-wow-delay=".4s">
<div class="card_info">
<img src="assets/imgs/noticias/GettyImages-2065998100-e1709930844112.webp" alt="">
<h5>Planeta sofre recorde de calor em abril; 2024 pode ser ainda mais quente</h5>
<p class="desc">Mês passado marca 11 meses consecutivos de temperaturas globais sem
precedentes,
segundo dados do Copernicus, o serviço de monitoramento climático da União Europeia
</p>
<p>Fonte: <a
href="https://www.cnnbrasil.com.br/internacional/planeta-sofre-recorde-de-calor-em-abril-2024-poder-ser-ainda-mais-quente/"
target="_blank" rel="noopener noreferrer">CNN Brasil</a></p>
</div>
</div>
<div class="col d-flex justify-content-center wow fadeInUp" data-wow-delay=".6s">
<div class="card_info">
<img src="assets/imgs/noticias/gopr0951-1.webp" alt="">
<h5>Calor nos oceanos gera branqueamento de corais; níveis podem ser os piores já
registrados</h5>
<p class="desc">Mais de 54% das áreas de recifes de corais do mundo sofreram
branqueamento no ano passado, afetando pelo menos 53 países</p>
<p>Fonte: <a
href="https://www.cnnbrasil.com.br/internacional/calor-nos-oceanos-gera-branqueamento-de-corais-niveis-podem-ser-os-piores-ja-registrados/"
target="_blank" rel="noopener noreferrer">CNN Brasil</a></p>
</div>
</div>
</div>
<!-- BOTÃO DE VER MAIS NOTÍCIAS -->
<a href="noticias.html" class="d-flex justify-content-center link_noticias">
<button class="btn_noticias">
Ver mais notícias
</button>
</a>
</section>
<!-- SEÇÃO DE MODOS DE AJUDAR -->
<section class="sec">
<h4 class="wow fadeInUp" data-wow-delay=".2s" id="ajuda">Como posso ajudar?</h4>
<h3 class="wow fadeInUp" data-wow-delay=".4s">Pontos de doação e trabalho voluntário</h3>
<p class="text wow fadeInUp" data-wow-delay=".6s">À medida que os impactos das mudanças climáticas se
intensificam, torna-se cada vez mais urgente unir esforços para apoiar comunidades afetadas por
desastres naturais. Seja enfrentando enchentes, incêndios florestais, secas ou furacões, a
solidariedade e o trabalho voluntário desempenham um papel fundamental na reconstrução e na
assistência aos necessitados. Ao doar dinheiro, tempo ou habilidades para essas organizações e
iniciativas, podemos fazer a diferença na vida das pessoas afetadas pelos desastres relacionados às
mudanças climáticas e contribuir para um futuro sustentável e resiliente.</p>
<div class="row">
<div class="col d-flex justify-content-center wow fadeInUp" data-wow-delay=".2s">
<div class="card_info">
<img src="assets/imgs/locais/RCLogo.svg.png" alt="">
<h5>Rotary - Assistência em casos de desastres</h5>
<p class="desc">Mais de 1,4 milhão de rotarianos estão a postos para entrar em ação e ajudar
comunidades afetadas a se recuperar após a ocorrência de desastres naturais</p>
<p>fonte: <a href="https://www.rotary.org/pt/our-causes/disaster-response" target="_blank"
rel="noopener noreferrer">Rotary</a></p>
</div>
</div>
<div class="col d-flex justify-content-center wow fadeInUp" data-wow-delay=".4s">
<div class="card_info">
<img src="assets/imgs/noticias/ACNUR2.webp" alt="">
<h5>ACNUR</h5>
<p class="desc">O ACNUR, Agência da ONU para Refugiados, está oferecendo auxílio financeiro,
suporte psicossocial e distribuição de itens essenciais em colaboração com o Governo
Estadual do Rio Grande do Sul e organizações parceiras. </p>
<p>fonte: <a
href="https://institutoar.org.br/?utm_source=google&utm_medium=pesquisa&utm_campaign=generalista&utm_id=lancamento&gad_source=1&gclid=CjwKCAjw9IayBhBJEiwAVuc3fsFX_AkedvPbLaX3kgKYwFbzx9BjsMmtzRm4EbJ47jOkCFu9XpibChoClHQQAvD_BwEhttps://doar.acnur.org/page/ACNURBR/doe/enchentes-no-sul-do-brasil?gad_source=1&gclid=CjwKCAjw9IayBhBJEiwAVuc3fm2VDgn4zDdlpgpnepfRnQiFbHYyxDLzSkE5jx8P3ROHsnopL9u74xoC5REQAvD_BwE&gclsrc=aw.ds"
target="_blank" rel="noopener noreferrer">ACNUR</a></p>
</div>
</div>
<div class="col d-flex justify-content-center wow fadeInUp" data-wow-delay=".6s">
<div class="card_info">
<img src="assets/imgs/noticias/download.png" alt="">
<h5>Greenpace</h5>
<p class="desc">O Greenpeace é uma organização ambiental que existe porque o planeta e seus
ecossistemas precisam de quem os defenda.
Estamos no Brasil há mais de 30 anos denunciando e confrontando governos, empresas e
projetos que incentivam a destruição da Amazônia e ameaçam o clima global.</p>
<p>fonte: <a href="https://www.greenpeace.org/brasil/" target="_blank"
rel="noopener noreferrer">Greenpace</a></p>
</div>
</div>
</div>
</section>
<!-- SEÇÃO COM A API -->
<section class="sec">
<h4 class="wow fadeInUp" data-wow-delay="0.2s" id="tecnologia">Tecnologias</h4>
<h3 class="wow fadeInUp" data-wow-delay="0.4s">Tecnologias que podem ajudar a enfrentar impactos
climáticos.</h3>
<p class="text wow fadeInUp" data-wow-delay=".6s">O uso de APIs climáticas é essencial para abordar as
mudanças climáticas, fornecendo acesso a dados meteorológicos em tempo real e históricos, modelos
climáticos avançados e previsões precisas. Essas APIs são fundamentais para monitorar padrões
climáticos, antecipar eventos extremos, apoiar a pesquisa científica e o desenvolvimento de soluções
inovadoras, emitir alertas precoces e promover a conscientização pública sobre os desafios
climáticos e a importância da adoção de comportamentos sustentáveis.</p>
<!-- INÍCIO DA API -->
<div class="container-api1">
<div class="container-api2">
<div class="form">
<h3>Confira o clima da sua cidade:</h3>
<div class="form-input-container">
<input type="text" placeholder="Digite o nome da cidade" id="city-input">
<button id="search">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</div>
<div id="weather-data" class="hide">
<h2><i class="fa-solid fa-location-dot"></i>
<span id="city"></span>
<img src="assets/imgs/map_854878.png" alt="Bandeira do país" id="country" />
</h2>
<p id="temperature"><span></span>°C</p>
<div id="description-container">
<p id="description"></p>
<img src="http://openweathermap.org/img/wn/[email protected]" alt="Condições do tempo"
id="weather-icon">
</div>
<div id="details-container">
<p id="humidity">
<i class="fa-solid fa-droplet"></i>
<span></span>
</p>
<p id="wind">
<i class="fa-solid fa-wind"></i>
<span></span>
</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer_main">
<div class="row">
<div class="col-sm-4">
<div class="d-flex justify-content-center">
<div>
<a><img class="footer_logo" src="assets/imgs/logo.png" alt=""></a>
<a href="https://www.instagram.com/projeto_ecofuture/" target="_blank"
rel="noopener noreferrer" class="btn_footer">
<p></p><span class="text_menor">Acesse o </span> <br>instagram do projeto</p>
</a>
<a class="btn_footer">
<p></p><span class="text_menor">Obter</span> <br>mais informações</p>
</a>
</div>
</div>
</div>
<div class="col-sm-4">
<h6>Participantes</h6>
<ul class="part_lista">
<li>Amanda Ambrosio</li>
<li>Ester Gurgel</li>
<li>Daniel Silva</li>
<li>Rafael Germano</li>
<li>José Airton</li>
<li>Jeferson Franco</li>
<li>Mateus de Sousa</li>
<li>Gabriel Keven</li>
<li>Bruno Fernandes</li>
<li>Otavio Ferreira</li>
</ul>
</div>
<div class="col-sm-4">
<h6>Informações</h6>
<ul class="part_lista">
<li>Instituição de Ensino:</li>
<li>Uniateneu</li>
<li>Professor Orientador:</li>
<li>José Ronildo Franceschinni</li>
<li>Imagens retiradas do banco de imagens gratuitas - Freepik</li>
</ul>
</div>
</div>
<div class="d-flex justify-content-center">
<p class="text_footer">© Desenvolvido pela equipe do desenvolvimento da EcoFuture - 2024</p>
</div>
</div>
</footer>
</div>
<!-- JS DA PÁGINA -->
<script src="assets/js/app.js"></script>
<!-- JS DO BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<!-- JS DA API -->
<script src="assets/js/api.js"></script>
</body>
</html>