App mobile de clima minimalista, feito em HTML/CSS/JS puro — sem frameworks, sem dependências, zero build step.
- Localização automática via Geolocation API do navegador
- Dados em tempo real via OpenWeatherMap (API gratuita)
- Modo demo automático quando nenhuma API key está configurada — padrão: São Paulo, BR
- Temperatura atual, sensação térmica, mín/máx do dia
- Umidade, velocidade do vento e visibilidade
- Cobertura de nuvens com barra de progresso animada
- Pressão atmosférica e precipitação da última hora
- Horários de nascer e pôr do sol com arco solar animado em SVG
- Tratamento de erros com mensagens específicas (permissão negada, timeout, API key inválida)
- Botão de atualização com animação de spin
- Fundo escuro
#0a0f1ecom aurora animada em gradiente - Cards com glassmorphism (backdrop-filter blur)
- Temperatura em tipografia display grande com gradiente
- Ícone do clima animado com float suave
- Fontes: IBM Plex Sans (display) + Public Sans (corpo)
clima_simples/
├── clima.html # Markup e estrutura da interface
├── clima.js # Lógica, chamadas de API e renderização
└── clima.css # Estilos, animações e variáveis de tema
Abra clima.html diretamente no navegador. O app exibirá dados simulados de São Paulo automaticamente.
- Crie uma conta gratuita em openweathermap.org
- Gere uma API key (plano Current Weather é suficiente)
- Edite
clima.htmle insira sua chave na linha:
const API_KEY = ""; // substitua pelo seu token- Abra o arquivo no navegador e permita o acesso à localização quando solicitado
Nota: A API key do OpenWeatherMap pode levar alguns minutos para ativar após o cadastro.
Funciona em qualquer navegador moderno com suporte a:
- Geolocation API
backdrop-filter(blur)- CSS custom properties
Otimizado para mobile (viewport fixo, safe-area-inset, 100svh). Funciona igualmente bem no desktop.
MIT — use, modifique e distribua à vontade.