Loading repository data…

SkyCast-Atmos

O SkyCast Atmos é um projeto de aplicativo web de clima imersiva e moderna, desenvolvida com HTML5, CSS3 e JavaScript. O projeto utiliza a API OpenWeather para fornecer dados em tempo real com uma interface "Glassmorphism" que altera dinamicamente o tema e os efeitos visuais baseando-se nas condições meteorológicas e no horário da cidade consultada

README preview

☁️ SkyCast Atmos

O SkyCast Atmos é um dashboard de previsão do tempo imersivo. Diferente de apps de clima convencionais, ele foca na experiência visual do usuário, alterando cores, gradientes e animações de partículas no fundo (Canvas) para refletir o clima real do local pesquisado.

Clique aqui para acessar o site.

🚀 Funcionalidades

Busca em Tempo Real: Pesquisa de clima por nome da cidade.
Geolocalização: Botão para detectar automaticamente a cidade do usuário.
Temas Dinâmicos: O fundo muda conforme o clima (Céu limpo, nublado, chuva, tempestade, neve ou calor extremo).
Ciclo Dia/Noite: Detecção de horário local da cidade para alternar entre temas claros e escuros.
Motor de Partículas (Canvas): Animação de chuva gerada via código quando a probabilidade de precipitação é alta.
Previsão por Hora: Listagem das próximas horas do dia.
Métricas Detalhadas: Umidade, vento, pressão e sensação térmica.

🛠️ Tecnologias Utilizadas

HTML5 & CSS3: Estrutura e estilização avançada com variáveis CSS e Glassmorphism.
JavaScript (Vanilla): Lógica de manipulação de DOM, consumo de API e motor de animação.
OpenWeather API: Fonte de dados meteorológicos (Current Weather e 5-Day Forecast).
Canvas API: Utilizada para renderizar efeitos climáticos performáticos em segundo plano.

📂 Estrutura do Código

O código está organizado em três pilares principais dentro do script:

CONFIG: Centraliza a chave da API e os seletores de elementos do DOM para facilitar a manutenção.
CanvasEngine: O motor gráfico. Ele redimensiona o fundo e desenha as partículas de chuva usando requestAnimationFrame para garantir fluidez.
UI: Controla toda a interface. É responsável por injetar os dados da API no HTML, aplicar as classes de tema (CSS) e gerenciar os estados de "skeleton" (carregamento).
App: O cérebro da aplicação. Gerencia as requisições fetch (assíncronas) e os eventos de clique e teclado.

📝 Licença

Este projeto está sob a licença MIT. Sinta-se livre para usar, modificar e distribuir.