DOC

 Documentação Técnica e Arquitetura doSistema
Projeto: Clima (Portal Tá Pense)
Versão do Core: 1.0 (Beta / Stable)
Arquitetura: Client-Side Rendering (CSR)
1. Visão Geral da Arquitetura (O "Motor")
O ClimaMeteo opera sob uma arquitetura Serverless Frontend. O sistema não depende de
um banco de dados proprietário para processar a meteorologia. Em vez disso, ele atua
como um Orquestrador de APIs, realizando requisições assíncronas em tempo real para
múltiplos provedores de dados científicos ao redor do globo.
Quando o usuário acessa a aplicação, o código JavaScript proprietário do ClimaMeteo entra
em ação para:
1. Triangular a posição geográfica do usuário.
2. Consultar 5 endpoints de dados diferentes simultaneamente.
3. Processar a resposta bruta (JSON).
4. Renderizar a interface visual (UI) com tratamento de erros e fallback automático.

2. Integrações de Backend (APIs e Dados)
O "cérebro" do sistema é alimentado pelas seguintes interfaces de programação (APIs), às
quais damos os devidos créditos técnicos e de licença:
A. Meteorologia e Modelos Numéricos (Core)
● Provedor: Open-Meteo
● Modelos Utilizados: Integração híbrida dos modelos NOAA GFS (Global), ECMWF
(Europa) e DWD ICON (Alemanha).
● Endpoints Consumidos:
○ v1/forecast: Temperatura, precipitação, vento (10m/80m/120m/180m),
radiação solar e umidade do solo.
○ v1/marine: Altura de ondas, direção do swell e ondas de vento.
○ v1/air-quality: Material particulado (PM2.5), NO2, Ozônio e contagem
de pólen.
○ v1/flood: Vazão hidrológica e descarga de rios.
● Licença: Dados utilizados sob licença CC BY 4.0.

B. Geolocalização e Geocodificação
● Provedor Primário: OpenStreetMap (Nominatim)
○ Função: Geocodificação Reversa (Converter coordenadas GPS em "Nome
da Cidade, Estado").
○ Licença: Dados © OpenStreetMap contributors, licenciados sob ODbL.
● Provedor Secundário (Fallback): Ipapi
○ Função: Triangulação aproximada via endereço IP quando o GPS é negado
pelo usuário.

3. Bibliotecas e Recursos de Frontend
Para transformar dados numéricos em uma experiência visual rica, utilizamos as seguintes
bibliotecas e recursos de terceiros:
A. Renderização de Mapas
● Provedor: Windy.com
● Implementação: API de Embed interativo para visualização de camadas de radar,
chuva e temperatura em tempo real.
B. Iconografia Dinâmica
● Biblioteca: Weather Icons (Bas Milius)
● Tecnologia: SVG Animado.
● Crédito: O set de ícones animados que reagem às condições (chuva caindo, sol
girando) é baseado no trabalho open-source de Bas Milius e contribuidores.
● Ícones Estáticos: Flaticon (Atribuição aos autores diversos conforme licença de uso
gratuito).
C. Funcionalidades de Compartilhamento
● Biblioteca: html2canvas
● Função: Motor de renderização que permite ao usuário "tirar uma foto" do card de
previsão para compartilhar no Instagram/WhatsApp, convertendo o DOM HTML em
um Canvas Bitmap.
D. Efeitos Sonoros
● Fonte: SoundJay
● Uso: Alerta sonoro ("bip") disparado apenas em condições de severidade crítica
(Defesa Civil).

4. Estrutura de Código
● Plataforma Host: Google Blogger (XML Theme Engine).

● Linguagem: Vanilla JavaScript (ES6+) otimizado para performance.
● Estilização: CSS3 com implementação de Glassmorphism (efeito de vidro) e Design
Responsivo (Mobile-First).
● Armazenamento: LocalStorage (Navegador) para persistência de configurações do
usuário (GDPR/LGPD Compliant).

5. Nota Técnica de Disponibilidade
O ClimaMeteo monitora o uptime (tempo de atividade) das APIs parceiras. No entanto,
como uma aplicação client-side, a velocidade de carregamento depende da conexão de
internet do usuário final e da resposta dos servidores da Open-Meteo e OpenStreetMap.

Desenvolvimento e Integração: Equipe de Tecnologia - Portal Tá Pense.

Documentação de Interface (UI/UX)
Módulo: Navegação e Ferramentas de Controle
Componente: Global Toolbar (Cabeçalho Persistente)
1. A Barra de Ferramentas (Toolbar)
A Toolbar do ClimaMeteo foi projetada como o centro de comando da aplicação. Ela utiliza
posicionamento sticky (fixo), garantindo que as ferramentas de controle permaneçam
acessíveis mesmo durante a rolagem da página (scroll) para leitura dos dados inferiores.
Visualmente, adota o conceito de Glassmorphism (Efeito de Vidro Fosco), com fundos
translúcidos e bordas sutis, garantindo legibilidade tanto no Modo Claro quanto no Modo
Escuro (Dark Mode).

2. Elementos Funcionais da Toolbar
Abaixo, detalhamos a lógica de programação e a função de cada componente interativo
presente no cabeçalho:
A. Identificador Dinâmico (Branding & Status)
● Elemento: Logotipo "CLIMA METEO" / Nome da Cidade.
● Comportamento: Este elemento é polimórfico.
1. Estado Inicial: Exibe a marca do portal.

2. Pós-Carregamento: Assim que a geolocalização é confirmada, o script injeta
via DOM (Document Object Model) o Nome da Cidade e a Temperatura
Atual diretamente no cabeçalho.

● Objetivo: Fornecer confirmação visual imediata de que os dados carregados
correspondem ao local correto do usuário.
B. Motor de Busca (A Lupa 🔍)
● Função: Acesso ao Modal de Pesquisa Global.
● Tecnologia: Integração com a API de Geocodificação (Nominatim/Open-Meteo).
● Lógica de Autocomplete:
1. O sistema aguarda o usuário digitar 3 caracteres para economizar
requisições.
2. Realiza uma busca assíncrona no banco de dados global de coordenadas.
3. Retorna uma lista suspensa com sugestões de cidades em tempo real.
4. Ao clicar, o sistema "reseta" a dashboard e carrega os dados da nova
latitude/longitude sem recarregar a página (Single Page Application
behavior).

C. Central de Configurações (A Engrenagem ⚙️)
Este botão abre o Painel de Preferências do Usuário. Diferente de sites comuns, o
ClimaMeteo permite que o usuário "construa" sua própria experiência. As configurações
definidas aqui são salvas na memória do navegador (LocalStorage) e persistem para visitas
futuras.
Ferramentas Internas do Menu:
1. Conversor de Unidades (Física em Tempo Real):
○ Temperatura: Alternância instantânea entre Celsius (°C) e Fahrenheit (°F). O
script recalcula todos os números da tela sem nova requisição à API.
○ Velocidade: Alternância entre Métrico (km/h) e Imperial (mph) para ventos e
rajadas.

2. Gestão de Tema (Dark Mode):
○ Switch On/Off: Alterna a classe body.dark-mode.
○ Lógica: Inverte as paletas de cores de fundo, texto e gráficos SVG para
reduzir a emissão de luz azul e economizar bateria em dispositivos OLED.

3. Personalização de Ícones:
○ O usuário escolhe entre renderização leve (Emojis Nativos) ou visualização
rica (Animações SVG).
○ Nota: O modo "Animado" carrega vetores gráficos externos que simulam
chuva caindo ou sol girando.
4. Controle de Publicidade:
○ Botão toggle que permite ao usuário ocultar ou exibir banners de anúncios,
dando empoderamento e transparência à navegação.

5. Instalador PWA (App):
○ Botão inteligente que detecta se o navegador suporta a instalação. Se
positivo, dispara o prompt nativo para adicionar o ClimaMeteo à tela inicial do
celular como um Aplicativo Nativo.

6. Gerador de Compartilhamento (Social Share):
○ Ferramenta que captura o estado atual da tela, renderiza uma imagem (PNG)
com os dados climáticos, alertas vigentes e a marca do portal, pronta para
ser postada no Instagram Stories ou WhatsApp Status.

3. Botões de Acesso Rápido (Quick Actions)
Ao lado da engrenagem, a toolbar pode exibir atalhos diretos para as funções mais
utilizadas, dependendo do tamanho da tela (Responsividade):
● Botão °C: Atalho rápido para conversão de temperatura.
● Botão KM: Atalho rápido para conversão de vento.
● Botão 🌓: Atalho rápido para troca de tema Dia/Noite.
Módulo: Navegação Temporal e Motor de Compartilhamento Social
Componente: Climate Stories & Canvas Rendering Engine
1. Navegação Visual "Climate Stories"
Rompendo com a tradicional lista vertical de dias, o ClimaMeteo implementa o conceito de
UX (Experiência do Usuário) conhecido como "Stories". Localizado logo abaixo do
cabeçalho, este carrossel horizontal oferece uma visão rápida da previsão para os próximos
dias.
A. Lógica do Design Circular
Cada círculo representa um dia de previsão (Hoje + 15 dias). O design foi pensado para
familiaridade imediata, mimetizando a interface de redes sociais (Instagram/WhatsApp
Status), o que reduz a curva de aprendizado do usuário.
● Conteúdo do Anel: Exibe o ícone meteorológico dominante do dia.
● Rodapé do Anel: Exibe o dia da semana e a data.
B. O Código de Cores (Algoritmo de Severidade)
As bordas coloridas dos círculos não são aleatórias. Elas são geradas por um algoritmo de
triagem de risco (getAlertClassForDay) que analisa rajadas de vento, volume de chuva
acumulada e pressão atmosférica para cada dia específico.
A paleta de cores segue o padrão internacional de gestão de riscos (ISO/Defesa Civil):
1. 🟢 Verde (Normalidade): Sem riscos previstos. Condições estáveis.
2. 🟡 Amarelo (Atenção): Chuvas moderadas ou ventos acima de 40km/h. Requer
observação.
3. 🟠 Laranja (Alerta): Temporais, ventos fortes (>60km/h) ou chuva volumosa.
Potencial para transtornos.

4. 🔴 Vermelho (Perigo): Eventos severos. Rajadas destrutivas (>80km/h), granizo ou
alagamentos.
5. 🟣 Roxo (Emergência Extrema): Eventos raros e críticos, como Ciclones
Explosivos, Tornados ou Enchentes massivas.
Objetivo Técnico: Permitir que o usuário faça uma "varredura visual" de 3 segundos e
identifique qual dia da semana apresenta perigo, sem precisar ler números.

2. Motor de Interatividade e Exportação (O "Gerador de Card")
Ao clicar em qualquer "Story", o sistema não apenas abre os dados do dia, mas aciona o
Motor de Renderização de Compartilhamento.
A. Tecnologia de Renderização (Client-Side)
Utilizamos a biblioteca html2canvas para converter a estrutura HTML/CSS do card de
previsão em uma imagem bitmap (PNG) de alta resolução.
● Privacidade: Todo o processo ocorre na memória RAM do dispositivo do usuário.
Nenhuma imagem é enviada ou processada em servidores externos.
B. Personalização do Infográfico
Antes de baixar a imagem, o usuário tem acesso a um "Painel de Estúdio" onde pode
personalizar a estética do alerta que será compartilhado nas redes sociais. As opções de
background (fundo) disponíveis são:
● 🎨 Modo Dinâmico (Padrão): O fundo assume a cor da severidade do dia (ex:
Fundo Vermelho se houver alerta de temporal). Isso garante que a imagem
compartilhada já carregue o aviso visual de perigo.
● ⚪ Modo Minimalista (Claro): Fundo branco, ideal para impressão ou documentos
formais.
● ⚫ Modo Dark (Escuro): Fundo preto/cinza, ideal para telas OLED e economia de
bateria.
● 🔵 Modo Institucional (Azul): Fundo com a identidade visual padrão da marca
"ClimaMeteo".
C. Dados Injetados no Card
O sistema compila automaticamente no card gerado:
1. Nome da Cidade e Data.
2. Temperatura Atual/Máxima/Mínima.
3. Ícone e Descrição do Tempo.
4. Dados complementares: Vento, Umidade, Chuva e Índice UV.
5. Texto do Alerta: Se houver um risco (ex: "VENDAVAL"), o texto explicativo da
Defesa Civil é inserido automaticamente na imagem.

Módulo: Sistema de Monitoramento Crítico e Alertas
Componente: Risk Assessment Engine (Motor de Avaliação de Risco)
1. Dinâmica dos Alertas em Tempo Real
O ClimaMeteo opera um sistema de vigilância ativa. Assim que os dados meteorológicos
são recebidos, um algoritmo proprietário analisa 24 pontos de dados futuros (hora a hora)
para identificar padrões que fujam da normalidade.
Este sistema não depende de aviso humano; é matemático e automático. Se os números
ultrapassarem os "limiares de segurança" (Thresholds) predefinidos no código, o site altera
sua interface visual imediatamente para alertar o usuário.

2. Escalas de Severidade Cadastradas
O sistema possui quatro "Super Escalas" de monitoramento, calibradas para a realidade
climática brasileira (especialmente Sul do Brasil). Abaixo, detalhamos os gatilhos
matemáticos que disparam os alertas visuais:
A. Escala de Precipitação (Chuva e Alagamentos)
O sistema monitora o volume acumulado de água.
● Nível de Observação (10mm - 25mm): Aciona avisos de "Garoa Forte" a "Chuva
Intensa". Alerta para pistas molhadas.
● Nível de Alerta (30mm - 60mm): Classificação de "Chuva Pesada" a "Flash Flood"
(Alagamento repentino).
● Nível de Perigo (80mm - 150mm): "Perigo Urbano" a "Perigo Mortal". Risco alto de
transbordamento de bueiros e arroios.
● Nível Catastrófico (>200mm): Dispara avisos de "Emergência Máxima" e "Dilúvio",
indicando risco geológico e necessidade de evacuação.
B. Escala de Ventos (Destruição e Energia)
Monitora a velocidade constante e as rajadas (vento de pico).
● Brisa Forte (35km/h - 55km/h): Avisos para mar agitado e dificuldade ao caminhar.
● Vendaval (60km/h - 85km/h): Alerta para queda de galhos, interrupção de energia e
perigo para motociclistas.
● Destrutivo (90km/h - 110km/h): Classificação de "Vendaval Violento" a
"Emergência". Risco de destelhamento e queda de árvores inteiras.
● Ciclônico/Furacão (>120km/h): Dispara alertas de "Furacão Categoria 1+" com
aviso de dano estrutural total.
C. Escala Térmica (Calor Extremo)
Focada na saúde humana e risco de insolação.

● Atenção (30°C - 34°C): Aviso de desconforto térmico.
● Perigo (36°C - 40°C): "Muito Quente" a "Calor Muito Forte". Risco de desidratação.
● Emergência (>42°C): "Onda de Calor Crítica" a "Risco Biológico". O sistema emite
avisos de perigo de morte térmica se a temperatura ultrapassar os limites fisiológicos
humanos (acima de 50°C nos modelos matemáticos).
D. Fenômenos Especiais e Combinados
O algoritmo cruza dados diferentes para identificar fenômenos complexos:
1. Detector de Ciclones: Monitora a Pressão Atmosférica. Se cair abaixo de 1002 hPa
(Instabilidade) ou 995 hPa (Ciclone), um alerta roxo é gerado instantaneamente.
2. Detector de Geada: Se a temperatura for ≤ 3°C E o vento for fraco (<15km/h), o
sistema alerta para risco à agricultura.
3. Detector de Nevoeiro: Se a visibilidade cair abaixo de 1000 metros (1km), emite
alerta de perigo para motoristas.
4. Umidade Crítica (Deserto): Se a umidade relativa cair abaixo de 12%, emite alerta
de emergência respiratória e risco extremo de incêndios.

3. Hierarquia Visual (Cores de Defesa Civil)
Para garantir que a população entenda a gravidade sem ler termos técnicos, o sistema
adota o padrão cromático internacional em seus cartões de alerta:
● 🟢 Normalidade: Parâmetros dentro da média.
● 🟡 Observação: Fenômenos leves que exigem atenção.
● 🟠 Atenção: Situação de risco moderado (temporal comum).
● 🔴 Alerta Vermelho: Situação severa com danos prováveis.
● 🟣 Perigo Extremo (Roxo): Eventos raros e destrutivos (Ciclones explosivos,
Enchentes massivas).
Módulo: Interpretação de Dados e Assistência ao Usuário
Componente: Heuristic Engine "Dica de Ouro"
1. O Conceito: Inteligência Biometeorológica
A Dica de Ouro é o recurso de maior sofisticação lógica do ClimaMeteo. Trata-se de um
algoritmo proprietário de Processamento de Linguagem Natural Baseado em Regras
(Rule-Based NLP).
Diferente de previsões estáticas, este motor analisa centenas de combinações de dados
simultaneamente (temperatura, umidade, vento, pressão, chuva, UV e histórico) para gerar
um relatório textual humanizado. O objetivo é traduzir a frieza dos números em conselhos
práticos de saúde, segurança e planejamento.

2. Dimensões de Análise
O algoritmo varre cinco dimensões críticas antes de exibir o texto na tela:
A. Biometeorologia (Impacto na Saúde Humana)
O sistema possui uma base de dados médica cadastrada que correlaciona a Sensação
Térmica com a fisiologia humana, cobrindo o espectro de -50°C a +50°C.
● Termorregulação: O texto muda conforme a capacidade do corpo de manter a
homeostase.
○ Exemplo (>40°C): Alerta para "Risco de Colapso Térmico" e falência de
órgãos.
○ Exemplo (<10°C): Alerta para vasoconstrição e risco cardíaco em idosos.
● Grupos de Risco: Gera avisos específicos para bebês (imaturidade térmica) e
idosos (menor percepção de sede).
B. Saúde Respiratória (Higrometria)
Analisa a Umidade Relativa do Ar não apenas como "seco" ou "úmido", mas descrevendo o
impacto nas mucosas.
● Ar Desértico (<12%): Alerta de emergência respiratória e risco de sangramento
nasal.
● Saturação (>95%): Alerta para ineficiência do suor e proliferação de
fungos/bactérias.
C. Integridade Estrutural (Ventos e Destruição)
O motor converte a velocidade do vento em cenários de impacto urbano, baseados na
Escala Beaufort e Escala Fujita (Tornados).
● Alerta de Infraestrutura: O texto avisa explicitamente sobre riscos de
destelhamento, queda de árvores sobre carros, colapso de redes elétricas e perigo
para motociclistas.
D. Fenômenos Complexos
O algoritmo cruza variáveis para identificar eventos que números isolados não mostram:
● Rio Atmosférico: Detecta corredores de umidade massiva (Vento Norte constante +
Chuva volumosa).
● Choque Térmico: Compara a temperatura de "Hoje" com "Amanhã". Se a diferença
for brusca (>10°C), emite alerta preventivo de saúde.
● Ciclogenética: Monitora a queda rápida de pressão barométrica (<1000hPa) para
prever a formação de ciclones antes mesmo da chuva começar.

3. Capacidade Preditiva ("O Radar")

Além de analisar o "Agora", a Dica de Ouro atua como um estrategista de agenda para o
usuário:
1. Radar do Amanhã: Analisa a tendência imediata. O texto informa se o tempo vai
"deteriorar", "melhorar" ou "estabilizar", permitindo planejamento de curto prazo.
2. Scanner Semanal: O algoritmo varre os próximos 7 dias em milissegundos para
encontrar o "Pior Dia da Semana". Se houver uma quarta-feira com tempestade
severa, o sistema avisa hoje: "Atenção máxima para quarta-feira...".
3. Projeção de Fim de Semana: Se o usuário acessar o site durante a semana, o
sistema já antecipa se o sábado e domingo serão de "Churrasco/Praia" ou "Filme em
Casa", baseado na probabilidade de chuva e conforto térmico.

4. Aplicação Prática
Esta tecnologia transforma o ClimaMeteo em um consultor pessoal. Não entregamos
apenas "vai chover"; entregamos "vai chover, a rua pode alagar, o vento pode derrubar
energia e a temperatura vai cair bruscamente, afetando sua rinite".
Isso cria valor real e utilidade pública para a comunidade de Tapes e região.
Módulo: Fontes de Dados e Simulação
Componente: Numerical Weather Prediction Switcher (Seletor de Modelos)
1. O Conceito: Por que existem múltiplos "Previsores"?
A previsão do tempo é o resultado de equações físicas complexas rodadas em
supercomputadores que simulam a atmosfera da Terra. Diferentes agências espaciais e
governos possuem seus próprios supercomputadores e seus próprios métodos de cálculo.
O ClimaMeteo adota uma postura de transparência científica. Não impomos uma única
"verdade"; oferecemos ao usuário o acesso às maiores autoridades meteorológicas do
planeta. Os botões no topo da interface permitem alternar, em tempo real, qual "cérebro"
está calculando a previsão para a sua cidade.

2. O Modo Inteligente
🤖 AUTO (Best Match)
● O Padrão do Sistema: É a opção ativada automaticamente ao abrir o site.
● A Lógica: O algoritmo não escolhe um modelo aleatoriamente. Ele cruza a sua
localização geográfica com a resolução de cada modelo disponível e entrega a
melhor combinação possível.
○ Exemplo: Se você está na Europa, ele prioriza o modelo francês ou alemão.
Se está no Brasil, ele compila dados do GFS (Americano) e ECMWF

(Europeu) para máxima precisão local. É a fusão da melhor tecnologia
disponível para o seu GPS.

3. Os Modelos Globais Disponíveis
Abaixo, detalhamos as características técnicas de cada fonte que o usuário pode selecionar
manualmente para fins comparativos:
ECMWF (European Centre for Medium-Range Weather Forecasts)
● Origem: União Europeia.
● Reputação: Considerado mundialmente como o "Padrão Ouro" da meteorologia.
● Diferencial: Possui a maior precisão estatística global, sendo a referência para
grandes eventos climáticos e previsões comerciais. É o modelo mais confiável para
temperatura e tendências de médio prazo (3 a 10 dias).
GFS (Global Forecast System)
● Origem: NOAA (National Oceanic and Atmospheric Administration) - Estados
Unidos.
● Reputação: O modelo mais famoso e utilizado do mundo.
● Diferencial: Excelente para identificar tendências de longo prazo. Embora às vezes
tenha menor resolução de terreno que o ECMWF, é extremamente robusto para
detectar frentes frias e sistemas de tempestade com grande antecedência.
ICON (Icosahedral Nonhydrostatic)
● Origem: DWD (Deutscher Wetterdienst) - Alemanha.
● Diferencial: Famoso pela sua física de nuvens detalhada e precisão em curto prazo.
Utiliza uma malha matemática triangular (icosaédrica) que permite cálculos muito
eficientes sobre a dinâmica de fluidos da atmosfera.
Météo-France
● Origem: França.
● Diferencial: Um dos modelos mais sofisticados para resolução fina. Excelente em
prever nevoeiros, nuvens baixas e variações térmicas sutis, especialmente útil para
aviação e agricultura.
GEM (Global Environmental Multiscale)
● Origem: CMC (Canadian Meteorological Centre) - Canadá.
● Diferencial: Especialista em climas extremos e frentes polares. Para o Sul do Brasil,
este modelo costuma ser muito eficaz em prever a chegada de massas de ar frio
intensas e geadas, dada a expertise canadense com o frio.
JMA (Japan Meteorological Agency)

● Origem: Japão.
● Diferencial: Alta fidelidade em previsões de precipitação e sistemas de baixa
pressão (ciclones). O Japão, por ser uma ilha sujeita a tufões, desenvolveu um
modelo extremamente sensível a mudanças bruscas de pressão e vento.
MET Norway
● Origem: Instituto Meteorológico da Noruega.
● Diferencial: É a base do famoso site Yr.no. Reconhecido pela sua precisão
"cirúrgica" em terrenos complexos (montanhas, vales e costas) e pela assertividade
na previsão de chuva hora a hora.

4. A Estratégia de Comparação (Ensemble)
Por que permitimos que o usuário troque de modelo? Para aplicar o conceito profissional de
Convergência de Modelos.
1. Alta Certeza: Se você clica no GFS, depois no ECMWF e no ICON, e todos
mostram chuva forte para amanhã às 15h, a probabilidade do evento ocorrer é
altíssima.
2. Incerteza: Se o modelo Americano diz "Sol" e o Europeu diz "Chuva", isso indica
uma atmosfera instável e de difícil previsão. Nesse caso, o usuário sabe que deve
ficar atento às atualizações.
O ClimaMeteo não apenas entrega o dado; entrega a ferramenta para que o usuário seja o
analista do seu próprio tempo.
Módulo: Monitoramento de Crise e Alertas Oficiais
Componente: Dynamic Hazard Alert System (Card de Defesa Civil)
1. O Conceito: Varredura de 24 Horas
Logo abaixo do nome da cidade, o ClimaMeteo exibe um Card Dinâmico de Alerta. Este
painel é o resultado de um algoritmo de segurança que analisa, milissegundo a
milissegundo, a previsão das próximas 24 horas.
O sistema busca pelo "Pior Cenário Possível" (Worst Case Scenario) dentro desse período.
● Exemplo: Se agora está sol (Verde), mas a previsão indica um tornado para daqui a
6 horas, o card ficará Roxo imediatamente, avisando: "Válido das 14:00 às 18:00".

2. Níveis de Severidade e Gatilhos (Thresholds)
O sistema classifica o risco em 5 níveis de cores, seguindo padrões internacionais de
Defesa Civil e Meteorologia. Abaixo, detalhamos os critérios matemáticos e códigos WMO
(World Meteorological Organization) que acionam cada nível no código-fonte:

🟣 Nível 4: PERIGO EXTREMO (Roxo)
● O que representa: Emergência climática com risco iminente à vida e destruição
total de infraestrutura.
● Gatilhos Matemáticos:
○ Vento ou Rajada: $\ge$ 100 km/h (Furacão/Tornado).
○ Chuva Acumulada (24h): $\ge$ 100mm (Colapso hidrológico).
○ Pressão Atmosférica: < 992 hPa (Indicativo de Ciclone Explosivo).
● Códigos WMO Monitorados:
○ 99: Tempestade severa com granizo pesado.

🔴 Nível 3: ALERTA VERMELHO (Vermelho)
● O que representa: Situação muito severa. Danos estruturais (destelhamentos),
queda de árvores e alagamentos rápidos são prováveis.
● Gatilhos Matemáticos:
○ Vento ou Rajada: $\ge$ 80 km/h.
○ Chuva Acumulada (24h): $\ge$ 60mm.
● Códigos WMO Monitorados:
○ 96: Tempestade com granizo leve/moderado.
○ 65: Chuva forte contínua.
○ 82: Pancadas de chuva violentas.
○ 75: Neve forte (para regiões serranas).
○ 86: Pancadas de neve forte.
○ 67: Chuva congelante forte.
○ 57: Garoa congelante densa.
🟠 Nível 2: ALERTA LARANJA (Laranja)
● O que representa: Situação de perigo. Temporais típicos de verão, mas com
potencial para transtornos, corte de energia e galhos caídos.
● Gatilhos Matemáticos:
○ Vento ou Rajada: $\ge$ 60 km/h.
○ Chuva Acumulada (24h): $\ge$ 30mm.
● Códigos WMO Monitorados:
○ 95: Tempestade elétrica (Raios e Trovões).
○ 63: Chuva moderada constante.
○ 81: Pancadas de chuva moderada.
○ 55: Garoa densa.
○ 73: Neve moderada.
○ 66: Chuva congelante leve.
○ 56: Garoa congelante leve.

🟡 Nível 1: OBSERVAÇÃO / ATENÇÃO (Amarelo)
● O que representa: Estado de atenção. Mudança no tempo, chuva que pode molhar
pistas ou ventos que incomodam, mas sem risco destrutivo imediato.
● Gatilhos Matemáticos:
○ Vento: $\ge$ 40 km/h.
○ Chuva Acumulada (24h): $\ge$ 10mm.
● Códigos WMO Monitorados:
○ 51, 53: Garoa leve a moderada.

○ 61: Chuva leve.
○ 80: Pancadas de chuva leve.
○ 71: Neve leve.
○ 85: Pancadas de neve leve.
🟢 Nível 0: NORMALIDADE (Verde)
● O que representa: Condições estáveis. O tempo pode estar nublado ou ensolarado,
mas os parâmetros de segurança (vento, chuva, pressão) estão dentro da margem
segura.
● Critério: Acionado automaticamente quando nenhum dos gatilhos acima é
detectado nas próximas 24 horas.

3. Funcionalidade de Vigência Inteligente
Diferente de alertas estáticos, o algoritmo do ClimaMeteo calcula o Intervalo de Duração
do evento.
● Detecção de Início e Fim: O código identifica a primeira hora (startHour) e a última
hora (endHour) em que os critérios de risco são atendidos.
● Display Dinâmico:
○ Se o perigo for o dia todo: exibe "Vigência: 24h".
○ Se for um temporal passageiro: exibe "Válido das 14:00 às 16:59".
○ Se o perigo já passou: exibe "Alerta expirado às [hora]".

Módulo: Inteligência Preditiva de Longo Prazo
Componente: Special Hazard Radar (Radar de Ameaças Específicas)
1. O Conceito: Identificação de Fenômenos
Localizado estrategicamente abaixo do alerta de 24h, este painel dinâmico tem uma função
diferente: dar nome aos bois. Enquanto a previsão comum diz "vai chover", este radar diz
"é um Ciclone" ou "é um Rio Atmosférico".
O algoritmo varre a base de dados dos próximos 16 dias em busca de combinações de
dados que formam a "assinatura digital" de eventos climáticos complexos.

2. Os Detectores Ativos
O sistema possui três "motores de busca" que rodam simultaneamente a cada
carregamento de página:
A. Detector de Ciclogênese (Sistemas de Baixa Pressão) 🌀
Este é um recurso vital para regiões costeiras (como Tapes/RS). O algoritmo não espera o
ciclone se formar para avisar; ele identifica os sinais precursores na modelagem numérica.

● O que ele exibe: "Sistema Ciclônico" ou "Potencial Ciclone Extratropical".
● Lógica de Detecção: O card é ativado se, em qualquer dia dos próximos 16 dias,
ocorrer uma das condições:
1. Queda Barométrica: A pressão atmosférica projetada (nível do mar) cair
abaixo de 995 hPa.
2. Vento Destrutivo: A previsão de rajada de vento ultrapassar 80 km/h
(independente da chuva).

B. Detector de Rios Atmosféricos (Corredores de Umidade) ️
Um recurso exclusivo do ClimaMeteo. Identifica quando a chuva é causada pelo transporte
massivo de umidade (geralmente da Amazônia para o Sul), o que costuma gerar enchentes
persistentes.
● O que ele exibe: "Rio Atmosférico" e a direção do vento.
● Lógica de Detecção (Triangulação): O alerta só aparece se três condições forem
atendidas simultaneamente:
1. Volume: Chuva acumulada no dia > 40mm.
2. Força: Vento constante > 30km/h.
3. Vetor (Direção): O vento deve vir do Quadrante Norte/Noroeste (entre 300°
e 45° na bússola), caracterizando o transporte de calor e umidade tropical.

C. Detector de Tempestades Elétricas e Granizo ⚡
Focado na segurança pessoal e proteção de bens (carros/telhados).
● O que ele exibe: "Raios Extremos", "Tempestade Elétrica Severa" ou "Granizo
Pesado".
● Lógica de Detecção: Monitora os códigos WMO de instabilidade severa:
○ 95: Tempestade com descargas elétricas frequentes.
○ 96: Tempestade com granizo leve.
○ 99: Tempestade severa com granizo pesado.

3. Design Visual de Impacto
Diferente do restante do site (que usa vidro/branco/transparência), estes cards utilizam uma
identidade visual de "Alta Voltagem":
● Fundo: Grafite Escuro (linear-gradient #1e1e1e).
● Borda: Neon Amarelo/Verde (#ccff00).
● Animação: Efeito slideDown (deslizar para baixo) ao carregar, chamando a
atenção do usuário imediatamente para o risco específico.
Módulo: Dashboard de Telemetria (Full Grid)
Total de Pontos de Monitoramento: 43 Módulos Ativos

1. Módulo de Temperatura e Sensação (Termodinâmica)
1.1. Card: Temperatura Atual
● ID no DOM: map-ov-temp
● Fonte de Dados: Open-Meteo Forecast (current.temperature_2m).
● Lógica: Exibe o valor bruto do sensor virtual a 2 metros do solo.
● Comportamento: Atualiza a cada nova requisição GPS. É o dado "âncora" que
valida se a localização está correta.
1.2. Card: Extremos do Dia
● ID no DOM: card-extremos
● Fonte de Dados: Open-Meteo Daily (temperature_2m_max, temperature_2m_min).
● Lógica: Define a amplitude térmica das 00:00 às 23:59 do dia selecionado.
● Interatividade: Ao clicar, abre o modal openHourlyTempModal, exibindo o gráfico de
barras hora a hora.
● Visual Dinâmico: O fundo do card muda de cor via gradiente CSS (linear-gradient)
baseado na temperatura Máxima (topo esquerdo) e Mínima (canto direito), criando
um efeito visual de "calor para frio".
1.3. Card: Sensação Térmica
● ID no DOM: val-sensacao
● Fonte de Dados: current.apparent_temperature ou Cálculo Proprietário.
● Algoritmo Híbrido: O código verifica a temperatura real:
○ Se $T > 26.7^\circ C$: Aplica fórmula de Índice de Calor (Heat Index),
considerando a umidade relativa.
○ Se $T < 10^\circ C$: Aplica fórmula de Wind Chill (Resfriamento pelo Vento),
considerando a velocidade do vento.
○ Neutro: Usa a temperatura aparente padrão da API.

2. Módulo de Monitoramento de Risco ("Smart Peaks")
2.1. Card: Risco Tempestade
● ID no DOM: card-storm-smart
● Fonte de Dados: Open-Meteo Hourly (weather_code).
● Algoritmo de Varredura: O script analyzeSmartPeaks percorre as próximas 24
horas do array de dados.
● Gatilho: Se encontrar códigos WMO 95, 96 ou 99 (Tempestades Elétricas/Granizo),
o card muda de status "Estável" para "Risco de Raios" e exibe o horário exato do
evento.
● Alerta Visual: A borda do card brilha em Roxo, Vermelho ou Laranja dependendo
da severidade do código WMO.
2.2. Card: Projeção Max de Calor
● ID no DOM: card-heat-smart
● Fonte de Dados: Open-Meteo Hourly (temperature_2m).
● Algoritmo: Varredura de 24h para encontrar o valor numérico mais alto ($max()$).
● Função: Exibe não só a temperatura, mas o horário exato do pico (ex: "15h").
Ajuda a evitar insolação.

2.3. Card: Projeção Min de Frio
● ID no DOM: card-cold-smart
● Fonte de Dados: Open-Meteo Hourly (temperature_2m).
● Algoritmo: Varredura de 24h para encontrar o valor numérico mais baixo ($min()$).
● Função: Indica o momento mais frio (geralmente madrugada ou amanhecer),
auxiliando no planejamento de proteção térmica.
2.4. Card: Projeção Max de Vento
● ID no DOM: card-wind-smart
● Fonte de Dados: Open-Meteo Hourly (wind_speed_10m).
● Algoritmo: Identifica a velocidade média de vento mais alta prevista para as
próximas 24h e o horário de ocorrência.
2.5. Card: Risco de Vendaval (Rajada)
● ID no DOM: card-gust-smart
● Fonte de Dados: Open-Meteo Hourly (wind_gusts_10m).
● Diferencial Técnico: Rajada é um pico de vento de 3 segundos. Este card alerta se
a rajada for significativamente maior que o vento constante, indicando turbulência
perigosa.
● Alerta Visual: Se a rajada passar de 60km/h, a borda do card muda para Laranja;
se passar de 90km/h, para Vermelho.

3. Módulo Aerodinâmico (Ventos)
3.1. Card: Vento Atual
● ID no DOM: val-vento / val-dir-vento
● Fonte de Dados: current.wind_speed_10m e current.wind_direction_10m.
● Processamento: Converte os graus da bússola ($0^\circ-360^\circ$) em texto
cardeal (N, NE, L, SE, S, SO, O, NO) através da função getWindDir.
3.2. Card: Vento a 80m (Drone/Edifícios)
● ID no DOM: val-wind-80m-curr
● Fonte de Dados: hourly.wind_speed_80m.
● Utilidade: Segurança para operação de Drones e guindastes em construção civil. O
vento nesta altura é livre de atrito e geralmente mais forte que no solo.
3.3. Card: Vento a 120m
● ID no DOM: val-wind-120m-curr
● Fonte de Dados: hourly.wind_speed_120m.
● Utilidade: Monitoramento para turbinas eólicas de médio porte e aviação leve.
3.4. Card: Vento a 180m
● ID no DOM: val-wind-180m-curr
● Fonte de Dados: hourly.wind_speed_180m.
● Utilidade: Perfil de vento para grandes turbinas eólicas e camadas de cisalhamento
para aviação.

4. Módulo Hidrológico (Água)
4.1. Card: Chuva Hoje
● ID no DOM: val-chuva-mm
● Fonte de Dados: daily.precipitation_sum e daily.precipitation_probability_max.
● Lógica: Exibe o volume total previsto (mm) e a probabilidade máxima (%) de chover.
● Interatividade: Clique abre modal com gráfico de chuva hora a hora.
4.2. Card: Acumulado Total
● ID no DOM: val-chuva-7d, val-chuva-16d.
● Algoritmo de Soma: O script executa um loop (for) somando os valores de
precipitation_sum do dia 0 ao dia 6 (7 dias) e do dia 0 ao dia 15 (16 dias).
● Função: Alerta estratégico para saturação do solo e risco de enchentes lentas.
4.3. Card: Umidade do Solo
● ID no DOM: val-soil
● Fonte de Dados: hourly.soil_moisture_0_to_7cm.
● Lógica Híbrida (Fallback):
1. Tenta ler o sensor de satélite.
2. Se o valor for nulo (comum em áreas urbanas/asfalto) E houver registro de
chuva recente, o algoritmo calcula uma estimativa baseada na precipitação
acumulada (1mm de chuva $\approx$ +4% umidade).

4.4. Card: Vazão de Rios
● ID no DOM: val-flood
● Fonte de Dados: Flood API (river_discharge).
● Lógica de Cores:
○ Verde: < 50 $m^3/s$
○ Amarelo: 50-100 $m^3/s$
○ Laranja: 100-200 $m^3/s$
○ Vermelho: > 200 $m^3/s$ (Risco de Enchente).

4.5. Card: Mar / Ondas
● ID no DOM: val-waves
● Fonte de Dados: Marine API (wave_height, swell_wave_height, wind_wave_height).
● Fallback: Se não houver dados marinhos (cidade sem litoral), o sistema oculta ou
estima marolas baseadas no vento local para lagoas.

5. Módulo de Atmosfera e Física
5.1. Card: Pressão Atmosférica
● ID no DOM: val-pressao
● Fonte de Dados: pressure_msl (Nível médio do mar).
● Interpretação:
○ Baixa (<1000hPa): Instabilidade, chuva, ciclones.
○ Alta (>1013hPa): Tempo firme, anticiclone.

5.2. Card: Visibilidade
● ID no DOM: val-vis
● Fonte de Dados: visibility (em metros).
● Lógica: Converte para km. Se < 1km, exibe alerta de Nevoeiro/Neblina.
5.3. Card: Isoterma Zero
● ID no DOM: val-iso0
● Fonte de Dados: freezing_level_height.
● Função: Indica a altitude onde a temperatura atinge 0°C. Fundamental para prever
neve (se altitude < 1200m) ou granizo.
5.4. Card: Instabilidade (CAPE)
● ID no DOM: val-cape
● Fonte de Dados: hourly.cape.
● Conceito: Energia Potencial Convectiva Disponível. Mede o "combustível" para
tempestades.
○ $> 2000$ J/kg: Risco de tempestades severas/tornados.

5.5. Card: Estrutura de Nuvens
● ID no DOM: val-clouds-struct
● Fonte de Dados: cloud_cover_low, cloud_cover_mid, cloud_cover_high.
● Exibição: Mostra a porcentagem de cobertura em cada camada da atmosfera,
permitindo saber se é apenas um "céu branco" (nuvens altas) ou "tempo fechado"
(nuvens baixas e médias).

6. Módulo de Saúde e Ambiente
6.1. Card: Qualidade do Ar (AQI)
● ID no DOM: val-aqi
● Fonte de Dados: Air Quality API (european_aqi).
● Escala: 0-20 (Bom) a 100+ (Péssimo).
6.2. Card: Fumaça (PM2.5)
● ID no DOM: val-pm25
● Fonte de Dados: pm2_5.
● Importância: Partículas finas inaláveis. Principal indicador de fumaça de queimadas
ou poluição industrial.
6.3. Card: Monitor de Poluentes (Grid)
● ID no DOM: Grid interno com val-no2, val-so2, val-o3, val-co.
● Lógica: Exibe valores individuais de Dióxido de Nitrogênio, Enxofre, Ozônio e
Monóxido de Carbono, classificando cada um com uma cor de risco (Verde a Roxo).
6.4. Card: Pólen e Alergias
● ID no DOM: val-pollen
● Fonte de Dados: Soma de alder_pollen, birch_pollen, grass_pollen,
ragweed_pollen.

● Função: Alerta para portadores de rinite alérgica e asma.
6.5. Card: Índice UV
● ID no DOM: val-uv
● Fonte de Dados: uv_index_max.
● Função: Alerta de risco de queimadura solar.

7. Módulo de Energia e Agronomia
7.1. Card: Potência Solar
● ID no DOM: val-watts
● Fonte de Dados: shortwave_radiation.
● Função: Mede a irradiação em W/m2. Usado para monitorar eficiência de painéis
solares fotovoltaicos.
7.2. Card: Evaporação do Solo (ET0)
● ID no DOM: val-et0
● Fonte de Dados: et0_fao_evapotranspiration.
● Função: Calcula quantos milímetros de água o solo perdeu. Indica a necessidade
exata de irrigação para lavouras e jardins.
7.3. Card: Temperaturas de Superfície (Estimativa)
● ID no DOM: Grid com temp-asfalto, temp-areia, etc.
● Lógica Física: O algoritmo pega a temperatura do ar e a radiação solar e aplica
coeficientes de absorção térmica para estimar a temperatura no chão:
○ Asfalto: Absorve muito calor (Coeficiente alto).
○ Grama: Absorve pouco (Coeficiente baixo).
● Uso: Segurança para passear com pets (patas queimadas) e pneus.
7.4. Card: Índice de Abafamento (Orvalho)
● ID no DOM: val-dew
● Fonte de Dados: dew_point_2m.
● Interpretação: Quanto maior o ponto de orvalho, mais difícil é para o suor evaporar,
gerando sensação de "ar pesado" e sufocamento.

8. Módulo Astronômico (Cronobiologia)
8.1. Card: Nascer do Sol
● ID no DOM: astro-sunrise
● Fonte: daily.sunrise.
8.2. Card: Pôr do Sol
● ID no DOM: astro-sunset
● Fonte: daily.sunset.
8.3. Card: Duração do Dia
● ID no DOM: astro-duration

● Fonte: daily.sunshine_duration.
● Cálculo: Diferença matemática entre Pôr e Nascer do sol.
8.4. Card: Restante de Luz
● ID no DOM: val-sun-countdown
● Lógica: Um timer JavaScript (setInterval) que desconta o horário atual do horário do
pôr do sol, exibindo uma contagem regressiva em tempo real.
8.5. Card: Fase da Lua
● ID no DOM: astro-moon-phase
● Algoritmo: Cálculo astronômico baseado na Data Juliana (Julian Date) para
determinar o ciclo lunar exato (0 a 1) e converter em texto/ícone.
8.6. Card: Estação Atual
● ID no DOM: card-estacao
● Lógica: Algoritmo que verifica a Latitude (Hemisfério Norte vs Sul) e a Data Atual
para determinar se é Verão, Outono, Inverno ou Primavera.

9. Módulo de Planejamento (Médio Prazo)
9.1. Card: Dia + Quente
● ID no DOM: peak-temp-val
● Lógica: Loop nos próximos 16 dias para encontrar a maior máxima.
9.2. Card: Dia + Frio
● ID no DOM: peak-cold-val
● Lógica: Loop nos próximos 16 dias para encontrar a menor mínima.
9.3. Card: Dia + Chuvoso
● ID no DOM: peak-rain-val
● Lógica: Loop nos próximos 16 dias para encontrar o maior volume acumulado.
9.4. Card: Dia + Ventoso
● ID no DOM: peak-wind-val
● Lógica: Loop nos próximos 16 dias para encontrar a rajada mais forte.
Módulo: Contextualização Térmica e Escalas
Componente: Dynamic Message Card & Global Thermal Gauge
1. Card de Mensagem Dinâmica (alert-card)
"O Tradutor de Sensações"
Logo acima dos gráficos, o usuário encontra um card largo que exibe uma mensagem curta
e direta (ex: "9°C: ️🐾: Clima agradável"). Este não é um texto aleatório; é o resultado de
uma Matriz de Decisão Heurística pré-programada.
A. Lógica do Dicionário Térmico (tempMessages)

O sistema possui um banco de dados interno (um objeto JSON) que mapeia cada grau
inteiro, de -50°C a +50°C, a uma frase específica.
● Granularidade Fina: Diferente de sites que usam apenas "Frio/Quente", o
ClimaMeteo possui 100 mensagens distintas.
○ Exemplo Lógico:
■ 8°C: "Frio constante."
■ 9°C: "Clima agradável." (Início do conforto para atividades com
agasalho leve).
■ 10°C: "Frio intenso para atividades externas."

● Humanização: As mensagens incluem emojis (🐾, ️, 🥶) para comunicação visual
rápida e dicas práticas (ex: "Hidrate-se", "Acolha animais").
B. Renderização Cromática (Background)
O fundo deste card não é estático. Ele utiliza a função getRGBForTemp para gerar um
Gradiente Linear que corresponde à temperatura exata.
● O Código: O sistema interpola cores. Se estiver 9°C, ele mistura o Azul do frio com
um leve toque de Verde/Amarelo do conforto, criando uma cor única para aquele
momento.

2. A Régua Térmica Global (temp-legend-container)
"O Espectro de Possibilidades"
Abaixo do card de mensagem, existe uma barra horizontal graduada de -50°C a +50°C.
Este componente serve para dar Perspectiva ao usuário.
A. Conceito Visual
A barra representa o espectro total de temperaturas habitáveis (e extremas) da Terra.
● Extremo Esquerdo (-50°C): Roxo/Azul Escuro (Congelamento).
● Centro (0°C - 15°C): Azul Claro/Verde (Frio/Fresco).
● Extremo Direito (+50°C): Vermelho/Preto (Calor Letal).
B. O Marcador Deslizante (thermometer-marker)
● Funcionamento: Um ponteiro branco se move sobre a régua para indicar onde a
temperatura atual se encaixa no "grande esquema das coisas".
● Cálculo Matemático:
O sistema normaliza a temperatura atual dentro de uma escala de 0 a 100%.
$$Posição (\%) = \frac{(TempAtual - (-50))}{100} \times 100$$
○ Exemplo Prático: Se faz 9°C:
$9 - (-50) = 59$.
O marcador se posiciona em 59% da largura da barra (do frio para o calor).

C. Utilidade para o Usuário
Isso ajuda o usuário a entender a severidade visualmente.

● Se o marcador está no meio (verde), ele sabe que está seguro.
● Se o marcador encosta nas pontas (Roxo ou Vermelho Escuro), ele entende
visualmente que a situação é extrema, sem precisar interpretar o número.

Enquanto o Card de Mensagem diz como você se sente (subjetivo), a Régua mostra onde
você está na escala física (objetivo). Juntos, eles formam o módulo de Consciência Térmica
do site.

Módulo: Planejamento Temporal e Navegação Cronológica
Componentes: 16-Day Forecast Scroll & 24-Hour Precision Strip
1. Projeção Estendida de 16 Dias (daily-container)
"O Calendário Inteligente"
Localizado na parte inferior da dashboard, este carrossel horizontal oferece uma visão
estratégica de longo prazo. Não é apenas uma lista de datas; é um menu de seleção que
controla todo o site.
A. Estrutura de Dados do Card Diário
Cada card vertical (daily-item) processa e exibe 5 pontos de dados fundamentais para o
planejamento do usuário:
1. Dia da Semana: Abreviado (SEG, TER, QUA) para rápida localização mental.
2. Data Numérica: (Ex: 30/12) para precisão de agenda.
3. Ícone Dominante: O sistema escolhe o código WMO mais severo ou representativo
do dia (se vai chover à tarde, o ícone será de chuva, mesmo que faça sol de
manhã).
4. Descrição Textual: Tradução do código (Ex: "Pancadas de Chuva").
5. Amplitude Térmica: Exibe a Máxima (em destaque/negrito) e a Mínima (mais
discreta), permitindo entender a variação do dia.
B. Interatividade ("Time Travel Logic")
Ao clicar em qualquer card deste carrossel:
● O site não recarrega.
● O JavaScript (updateTopCards(i)) captura o índice do dia clicado.
● Todos os 43 cards da dashboard superior (Vento, Ondas, UV, Alertas) são
recalculados instantaneamente para exibir a previsão daquele dia futuro específico.

2. Detalhamento de Precisão 24 Horas (hourly-container)

"A Visão Tática"
Logo acima da lista de dias, existe a fita de previsão horária. Este é o componente de maior
granularidade do sistema.
A. Sincronia Dinâmica
Este módulo muda conforme o dia selecionado.
● Se o usuário clica em "Hoje", a lista mostra das 00h às 23h de hoje.
● Se o usuário clica em "Sábado", a lista muda para mostrar das 00h às 23h de
Sábado.
B. Dados por Hora
Cada micro-card (hourly-item) exibe:
1. Hora: (Ex: 14:00, 15:00).
2. Ícone Pontual: Mostra a condição exata daquele momento (pode estar chovendo às
14h e sol às 15h).
3. Temperatura Exata: A previsão termométrica para aquela hora específica.

3. A Lógica das Cores (Gradiente Térmico Automático)
Aqui reside um dos maiores diferenciais de UX do ClimaMeteo. Os cards (tanto diários
quanto horários) não têm cor fixa. Eles são pintados em tempo real pela temperatura que
exibem.
O sistema utiliza a função applyGradientBg que consulta uma tabela de espectro de
cores RGB (getRGBForTemp):
Como Funciona:
● Frio (< 10°C): O card assume tons de Azul Ciano e Verde Água.
● Conforto (15°C - 24°C): O card transita para tons de Verde Limão e Amarelo
Suave.
● Calor (> 25°C): O card começa a ficar Laranja.
● Calor Extremo (> 35°C): O card torna-se Vermelho ou Roxo.
Objetivo Visual:
Isso cria um Mapa de Calor Intuitivo. O usuário não precisa ler o número "35°C". Ao bater
o olho na lista horária, se ele vir uma sequência de cards vermelhos entre 12h e 16h, ele
entende instantaneamente que aquele é o período mais quente do dia. Se a noite estiver
azul, ele sabe que vai esfriar.

O ClimaMeteo transforma números em cores e contextos, permitindo que o usuário
planeje desde a roupa que vai usar nas próximas horas até a viagem do próximo final de
semana com apenas alguns cliques.

Módulo: Inteligência Aplicada e Consultoria de Rotina
Componente: Lifestyle Intelligence Grid (Matriz de Estilo de Vida)
1. O Motor de Pontuação (The Scoring Engine)
Cada card abaixo opera sob um algoritmo de pontuação de 1 a 10. Esta nota não vem da
API; ela é calculada em tempo real pelo navegador do usuário, cruzando múltiplas variáveis
(Vento + Chuva + Temperatura + UV + Umidade).
A Escala de Cores e Significado:
● 🔴 1 a 3 (Ruim/Péssimo/Perigo): Condições adversas ou perigosas. A atividade é
contraindicada.
● 🟠 4 a 6 (Regular/Atenção): Viável, mas exige adaptação (capa de chuva, casaco,
hidratação).
● 🟢 7 a 9 (Bom/Muito Bom): Condições favoráveis.
● 🔵 10 (Ideal/Perfeito): O cenário meteorológico perfeito para a atividade.

2. Detalhamento dos Cards e Lógica de Cálculo
A. Categoria: Gestão Doméstica e Comparativo
⚖️ Comparativo Diário
● Lógica: Diferencial Matemático ($\Delta T$).
● Cálculo: Subtrai a temperatura máxima de hoje pela de ontem.
● Output: Informa se o dia "Esquenta" ou "Esfria" e a diferença exata (ex: "-3°C").
Essencial para o usuário saber se precisa de mais ou menos roupa que ontem.
🔋 Energia Solar
● Variáveis: Cobertura de Nuvens (Cloud Cover) e Índice UV.
● Lógica:
○ Nuvens > 80%: Nota baixa (Geração ineficiente).
○ Céu Limpo + UV Alto: Nota 10 (Máxima eficiência dos painéis).

👕 Secar Roupa
● Variáveis: Umidade Relativa, Vento, Chuva e Temperatura.
● Lógica:
○ Chuva > 0.5mm: Nota 1 (Impossível secar fora).
○ Umidade > 80%: Nota baixa (Roupa não seca, fica com cheiro).
○ Vento Forte + Ar Seco: Nota 10 (Secagem rápida).

🍖 Churrasco / Lazer
● Variáveis: Precipitação e Vento.
● Lógica: A chuva é o fator bloqueante (Zera a nota). Vento acima de 30km/h reduz a
nota (fumaça voltando, desconforto). Temperatura amena (20-25°C) é o ideal.
🌻 Jardinagem
● Variáveis: Umidade do Solo (Precipitação recente) e Temperatura.
● Lógica:
○ Chuva Recente: Nota baixa com aviso "Terra Molhada" (Não precisa
regar/Difícil de cavar).
○ Seco + Calor: Nota média com aviso "Regar Cedo".
○ Ameno + Solo Úmido: Nota 10 (Ideal para plantio).

🔥 Risco de Incêndio
● Variáveis: Umidade do Ar (Invertida), Vento e Temperatura.
● Lógica Inversa: Quanto menor a umidade (<30%) e maior o vento (>30km/h), maior
o risco.
● Visualização: Aqui a nota alta indica PERIGO. (Ex: Nota 1 = Baixo Risco / Nota 10 =
Risco Extremo).

3. Categoria: Esportes e Performance
⚽ Esportes Gerais
● Variáveis: Chuva Intensa e Calor Extremo.
● Lógica: Chuva leve não impede, mas reduz a nota para "Regular". Calor acima de
32°C ou tempestades derrubam a nota para "Ruim".
🥶 Corrida (Running)
● Variáveis: Sensação Térmica (Heat Index).
● Lógica Fisiológica: O corpo gera muito calor correndo.
○ Frio (5°C - 15°C): Nota 10 (Ideal para performance, o corpo não
superaquece).
○ Calor (> 28°C): Nota cai drasticamente (Risco de exaustão).

🚴 Ciclismo
● Variáveis: Vento (Fator Crítico) e Chuva.
● Lógica:
○ Vento > 20km/h: Começa a penalizar a nota (arrasto aerodinâmico).
○ Vento > 40km/h: Nota Péssima (Perigo de desequilíbrio lateral).
○ Chuva: Risco de pista lisa.

🎣 Pescaria

● Variáveis: Vento (Ondulação) e Pressão Atmosférica.
● Lógica: Vento forte (>20km/h) agita a água e dificulta a pesca embarcada ou de
barranco. Chuva forte atrapalha a visibilidade.
🚶 Caminhada
● Variáveis: Conforto Térmico e Chuva.
● Lógica: Similar à corrida, mas com maior tolerância ao calor. Chuva leve exige
guarda-chuva (Nota Regular). Tempo firme = Nota 10.

4. Categoria: Saúde e Vulnerabilidade (Biometeorologia)
Este grupo utiliza critérios de segurança mais rígidos.
👶 Bebês
● Sensibilidade: Extrema.
● Lógica:
○ Temp < 10°C: ⛔ PERIGO (Risco de Hipotermia rápida).
○ Temp > 30°C: ⛔ PERIGO (Risco de Desidratação/Insolação).
○ Intervalo Seguro: 20°C - 25°C.

👶 Cuidados Crianças
● Sensibilidade: Alta.
● Lógica: Mais resilientes que bebês, mas exigem "Casacos pesados" no frio ou
"Muita água" no calor. A nota reflete a facilidade de brincar ao ar livre.
👴 Idosos (60+)
● Sensibilidade: Alta (Circulação e Hidratação).
● Lógica:
○ Frio: Alerta para "Dores Articulares/Risco Cardíaco" (Vasoconstrição).
○ Calor: Alerta para pressão baixa e desidratação silenciosa.

🧢 Adultos & 🎧 Jovens
● Sensibilidade: Normal/Baixa.
● Lógica: São os grupos mais resistentes. Podem receber nota "Ideal" mesmo em
dias mais frios ou quentes, desde que não sejam extremos letais. O card "Jovens"
tende a ser o mais otimista ("Tudo liberado").

5. Categoria: Natureza e Pets
🐕 Cuidados com Cães
● Variáveis: Temperatura do Solo (Estimada) e Chuva.
● Lógica:
○ Calor > 30°C: Alerta de "Asfalto Quente" (Queimadura de patas).

○ Chuva: "Passeio curto" ou "Ficar em casa".

🐈 Cuidados com Gatos
● Variáveis: Frio e Umidade.
● Lógica: Gatos buscam calor. Dias frios e úmidos recebem notas menores para
saídas, incentivando manter o animal em casa (Conforto térmico).
🐦 Cuidados com Pássaros
● Variáveis: Vento e Brusca variação térmica.
● Lógica: Ventos fortes (>40km/h) impedem o voo seguro e afetam ninhos. Frio
extremo exige proteção de viveiros.

6. Categoria: Transporte e Lazer
️ Praia e Piscina
● Variáveis: Temperatura, Nuvens e Vento.
● Lógica: Exige a combinação tripla: Calor (>25°C) + Sol (Nuvens <40%) + Vento
Fraco. Se um falhar (ex: Chuva/Nublado), a nota cai para "Ruim".
🚌 Ônibus/Trem (Transporte Público)
● Variáveis: Chuva e Calor.
● Lógica: Avalia o conforto da espera no ponto e da viagem. Chuva forte (molhar-se
esperando) ou Calor extremo (ônibus lotado sem ar) reduzem a nota.
🚗 Carro (Interno)
● Variáveis: Efeito Estufa (Radiação Solar).
● Lógica: Calcula a temperatura interna estimada do veículo estacionado ao sol.
○ Se externo 30°C -> Interno pode chegar a 60°C (Nota Péssima/Perigo).
○ Se externo 11°C -> Interno agradável (Nota Ideal).

️ Moto
● Variáveis: Chuva e Vento Lateral.
● Lógica:
○ Chuva: Risco de "Pista Lisa/Aquaplanagem" (Nota Ruim).
○ Vento Lateral: Perigo de estabilidade.

🌊 Marítimo
● Variáveis: Altura das Ondas e Vento.
● Lógica:
○ Mar Calmo (<0.5m): Nota 10 (Almirante).
○ Mar Agitado (>1.5m): Nota Baixa (Perigo para pequenas embarcações).

O sistema não "adivinha" o estilo de vida. Ele aplica coeficientes de conforto, segurança e
física (ex: atrito, termodinâmica) sobre os dados brutos da Open-Meteo para gerar uma
consultoria personalizada para cada perfil de usuário.

Módulo: Visualização de Dados Avançada
Componente: SVG Hybrid Meteogram (Detalhamento 24h Visual)
1. O Conceito: Meteograma Vetorial
O "Detalhamento 24h" é um gráfico do tipo Meteograma. Diferente de listas verticais (que
exigem leitura linha a linha), este componente oferece uma Timeline Cronológica
Horizontal.
Ele foi projetado para permitir a leitura de "Tendências" e "Cruzamento de Dados" em uma
única passada de olhos (scan visual). Ele utiliza tecnologia SVG (Scalable Vector
Graphics), garantindo que as linhas e ícones permaneçam nítidos em qualquer resolução
de tela (do celular ao monitor 4K).

2. Camadas de Informação (O que ele exibe?)
O gráfico é composto por 4 Camadas de Dados Sobrepostas, sincronizadas na mesma
linha do tempo:
A. A Curva Térmica (Linha da Temperatura)
● Visual: Uma linha contínua que sobe e desce, desenhando o perfil térmico do dia.
● O que exibe: A temperatura exata (°C ou °F) a cada hora.
● Utilidade: Permite identificar visualmente a "inércia térmica" (quão rápido esquenta
de manhã e quão rápido esfria à noite).
B. Barras de Precipitação (Volume de Chuva)
● Visual: Colunas azuis translúcidas que crescem da base do gráfico.
● Dados: Volume de chuva interpolado (rain_interp).
● Utilidade: Mostra a Intensidade e Duração.
○ Barra Alta e Estreita: Pancada forte e passageira.
○ Barras Médias e Largas: Chuva contínua e persistente.
○ Sem Barras: Janela de tempo seco (ideal para sair).

C. Ícones Contextuais (Weather Codes)
● Visual: Ícones (Sóis, Nuvens, Raios) posicionados sobre a linha de temperatura.
● Lógica: A cada ponto horário, o sistema plota o ícone correspondente ao código
WMO.
● Utilidade: Cruza a temperatura com a condição.

○ Exemplo: Se a linha de temperatura cai bruscamente e o ícone muda de
"Sol" para "Raio", o usuário visualiza a chegada de uma frente fria.

D. Telemetria de Base (Umidade e Vento)
● Visual: Dados numéricos no rodapé do gráfico, alinhados verticalmente com a hora.
● Exibe:
○ 💧 Umidade (%): Para monitorar sensação de abafamento.
○ 💨 Vento (km/h): Para identificar rajadas em horários específicos.

3. Utilidade Prática (Para que serve?)
Este gráfico resolve a pergunta: "Como o dia vai evoluir?"
1. Planejamento de Janelas Secas: O usuário consegue ver visualmente os
"buracos" entre as barras de chuva. "Posso ir ao mercado às 14h porque as barras
azuis param, e voltam só às 16h".
2. Identificação do Pico Térmico: Em vez de apenas ler "Máxima de 30°C", o usuário
vê a curva atingindo o topo às 15:00, permitindo evitar exposição solar nesse horário
exato.
3. Correlação Vento/Frio: Ao ver a linha de temperatura cair à noite e o número do
vento aumentar na base do gráfico, o usuário entende que a sensação térmica será
muito menor do que o termômetro marca.

4. Engenharia de Navegação (Scroll Infinito)
● Scroll Horizontal: Como 24 horas de dados detalhados não cabem em uma tela de
celular vertical, o componente possui um contêiner de rolagem suave
(detailed-chart-scroll).
● Largura Fixa: O gráfico é renderizado com uma largura mínima de 1200 pixels
virtuais, garantindo que os dados não fiquem espremidos e ilegíveis, obrigando a
navegação lateral para explorar o dia.
Módulo: Ferramenta de Análise Comparativa (Benchmarking)
Componente: Multi-City Temperature Plotter (Gráfico de Linhas Comparativo)
1. O Conceito: Sobreposição de Dados (Data Overlay)
O Gráfico Comparativo 24h é uma ferramenta analítica que permite ao usuário cruzar dados
meteorológicos de diferentes locais geográficos em um único plano cartesiano.
O Problema que resolve: Elimina a necessidade de "trocar de página" ou abrir múltiplas
abas para comparar o clima entre a origem e o destino de uma viagem, ou entre filiais de
uma empresa.

2. Engenharia de Funcionamento
A. Geocodificação Sob Demanda (On-Demand Fetch)
Diferente dos outros cards que carregam automaticamente, este módulo é Ativo.
1. Input: O usuário digita o nome de uma cidade (ex: "Gramado").
2. Processamento: O script (addCityToGraph) pausa a renderização, consulta a API
de Geocodificação para obter as coordenadas (Lat/Lon) dessa nova cidade e, em
seguida, busca a previsão de temperatura para ela.
3. Plotagem: A nova cidade é adicionada ao array de dados e uma nova linha
("Polyline") é desenhada no gráfico instantaneamente.
B. Renderização Vetorial (SVG)
O gráfico é desenhado matematicamente utilizando vetores:
● Eixo X (Tempo): Normalizado para as próximas 24 horas.
● Eixo Y (Temperatura): Dinâmico. O sistema calcula a temperatura mais alta e a
mais baixa entre todas as cidades adicionadas para ajustar a escala vertical
automaticamente, garantindo que nenhuma linha saia do quadro.
C. Sistema de Cores e Legenda
● Identidade Visual: Cada cidade adicionada recebe automaticamente uma cor
distinta (Ciano, Vermelho, Verde, Laranja, Roxo) seguindo o array graphColors.
● Legenda Interativa: O usuário pode remover cidades individuais clicando no "X" da
etiqueta, o que força o gráfico a se redesenhar em milissegundos sem a linha
excluída.

3. Interatividade: O "Cursor Sincronizado" (Tooltip)
O recurso mais avançado deste gráfico é o sistema de Hover-Sync
(updateChartTooltip).
● O que faz: Ao passar o mouse sobre qualquer ponto do gráfico, uma linha vertical
(Guia) aparece.
● Leitura Simultânea: Um pop-up flutuante exibe a temperatura de todas as cidades
plotadas para aquela hora específica.
● Exemplo de Uso: O usuário passa o mouse às 14:00 e vê:
○ Tapes: 28°C
○ Porto Alegre: 31°C
○ Gramado: 22°C
○ Conclusão Imediata: "Gramado está 9 graus mais fresco que a capital
agora."

4. Casos de Uso (Utility)
1. Planejamento de Viagem: Comparar a cidade de origem com o destino para decidir
a roupa.
2. Logística e Transporte: Monitorar rotas comerciais (ex: saber se vai estar mais
quente no porto ou na serra).
3. Curiosidade Climática: Comparar a sua cidade com extremos globais (ex: "Como
está o Alasca agora em comparação com Tapes?").

Conclusão da Documentação Técnica V1.0
"Esta página destina-se a desenvolvedores, parceiros comerciais e usuários avançados que
desejam compreender a arquitetura de dados, a lógica algorítmica e os protocolos de
segurança utilizados no ClimaMeteo. "