🕒 Widget de Hora e Clima ⛅

Um projeto de portfólio moderno que combina um relógio digital em tempo real com um sistema de previsão do tempo dinâmico. O design utiliza uma paleta de cores futurista com uma animação de fundo interativa baseada em Canvas.

🎨 Paleta de Cores & Design

O projeto foi construído seguindo uma estética "Cyber-Dark", utilizando os seguintes tokens de design:

• Fundos: Tons profundos de azul e roxo (#040014, #090024).
• Destaques: Amarelo vibrante para informações críticas (#ffdd00).
• Bordas/Tech: Azul neon para elementos de interface (#5752ff).

✨ Funcionalidades

• Relógio Digital: Atualização em tempo real com data completa em português.
• Previsão do Tempo: Integração com a API Open-Meteo (sem necessidade de chave API).
• Geocoding: Busca inteligente de cidades ao redor do mundo.
• Background Animado: Partículas quadradas geradas em Canvas com efeitos de glitch aleatórios.
• Design Responsivo: Adaptado para dispositivos móveis, tablets e desktops.

🛠️ Tecnologias Utilizadas

• HTML5: Estrutura semântica.
• CSS3: Variáveis customizadas, Flexbox e animações de interface.
• JavaScript (Vanilla): Lógica do relógio, manipulação de DOM e integração com APIs.
• Canvas API: Renderização da animação de fundo.
• Open-Meteo API: Dados meteorológicos e geolocalização.

📂 Estrutura de Arquivos

/
├── index.html      # Estrutura principal
├── style.css       # Estilização e Temas
├── script.js       # Lógica e Animação Canvas
├── README.md       # Documentação do projeto
└── img/            # Capturas de tela

⚙️ Como Executar o Projeto

1. Clone este repositório:

git clone [https://github.com/brunojsdev/api-clima-hora.git](https://github.com/brunojsdev/api-clima-hora.git)

2. Navegue até a pasta do projeto.

3. Abra o arquivo index.html em qualquer navegador moderno.

Espero que este README ajude a destacar o seu projeto no seu portfólio! Se precisar de qualquer ajuste no texto ou nas seções, estou à disposição.