meteo-brazzaville - GitLite

KO | EN

gitlite — search

#react-native #privacy #agents #docker #pdf #postgresql #ai-agents #awesome #cloud-native #android

meteo-brazzaville

(★ 11)

Application météo locale immersive et responsive pour quatre villes du Congo

파일 탐색기

ZIP 다운로드

- - animations.css
  - developer.css
  - foundation.css
  - layout.css
  - main.css
  - responsive.css
  - scene.css
  - sky.css
  - weather.css
- - app.js
  - bootstrap.js
  - config.js
  - developer.js
  - scene.js
  - weather.js
.gitattributes
.nojekyll
index.html
README.md
robots.txt
site.webmanifest
sitemap.xml

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Météo Brazza est une expérience météo locale réalisée en HTML, CSS et JavaScript natif. Elle présente les conditions actuelles et les prochaines heures à Brazzaville, Pointe-Noire, Dolisie et Ouesso dans une interface immersive qui évolue entre le jour et la nuit.

![Aperçu de Météo Brazza sur ordinateur](https://raw.githubusercontent.com/Osiris-Balonga/meteo-brazzaville/main/assets/images/previews/readme-preview-desktop.png)

<p align="center">
  <img src="assets/images/previews/readme-preview-mobile.png" alt="Aperçu de Météo Brazza de nuit sur mobile" width="240" />
</p>

## Démo

- GitHub Pages : https://osiris-balonga.github.io/meteo-brazzaville/
- Repository : https://github.com/Osiris-Balonga/meteo-brazzaville

## Fonctionnalités

- Consulter la météo actuelle depuis l'API publique Open-Meteo
- Afficher la température, le ressenti, l'humidité, le vent et sa direction
- Parcourir les prévisions illustrées des neuf prochaines heures
- Choisir entre Brazzaville, Pointe-Noire, Dolisie et Ouesso
- Utiliser un dropdown sur ordinateur et un panneau bas sur mobile
- Adapter automatiquement le ciel, les couleurs et les surfaces au jour ou à la nuit
- Afficher une composition animée propre à chaque condition météo
- Suivre le soleil ou la nuit sur une trajectoire en pointillés
- Prévisualiser tous les états depuis un laboratoire développeur
- Gérer le chargement, les erreurs réseau et la relance de la requête
- Respecter la navigation clavier et `prefers-reduced-motion`

## Expérience responsive

Le contenu reste identique sur toutes les tailles d'écran. Seule sa disposition évolue : la ville, la composition météo, la température, les indicateurs, les prévisions horaires et la trajectoire solaire conservent le même ordre logique.

Sur ordinateur, les informations principales se répartissent sur trois zones et le sélecteur de ville s'ouvre sous son déclencheur. Sur mobile, la composition et la température se rapprochent, les prévisions deviennent défilables horizontalement et le sélecteur de ville prend la forme d'un panneau bas accessible au pouce.

La page occupe le viewport sans cadre extérieur ni défilement vertical du document. Le ciel reste en pleine largeur, tandis que les quatre zones de contenu sont centrées et limitées à 1280 px sur les grands écrans. La barre de défilement des prévisions reste masquée, tandis que la carte de l'heure actuelle utilise une surface discrète sans bordure.

## Ambiances et météo

La composition centrale dépend du code météo retourné par Open-Meteo :

- ciel dégagé : soleil le jour ou lune la nuit
- éclaircies : astre partiellement couvert par les nuages
- ciel couvert : nuages sans astre
- brouillard : nuages et nappes de brume
- bruine, pluie et averses : nuages et gouttes animées
- neige : nuages et flocons
- orage : nuage sombre, pluie et éclair visible uniquement pendant l'impact

Le jour utilise un ciel cyan lumineux sans étoiles. La nuit adopte une palette indigo avec scintillement et étoiles filantes. Les dropdowns, panneaux bas et surfaces du laboratoire suivent également l'ambiance active.

## Mode développeur

Le laboratoire permet de tester chaque météo, les thèmes jour et nuit, l'éclair et l'étoile filante sur l'interface réelle.

- Ajouter `?dev=1` à l'URL
- Ou utiliser <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd>
- Sélectionner « Revenir aux données réelles » pour restaurer la réponse de l'API

## Lancer le projet

Ouvrir directement `index.html` dans un navigateur moderne ou démarrer un serveur statique :

```bash
python -m http.server 8000
```

Puis visiter `http://localhost:8000`.

Les scripts sont chargés dans leur ordre de dépendance avec `defer`. Aucun outil de compilation ni aucune dépendance JavaScript n'est nécessaire.

## Organisation du code

```text
meteo-brazzaville/
|-- assets/
|   |-- css/
|   |   |-- animations.css
|   |   |-- developer.css
|   |   |-- foundation.css
|   |   |-- layout.css
|   |   |-- main.css
|   |   |-- responsive.css
|   |   |-- scene.css
|   |   |-- sky.css
|   |   `-- weather.css
|   |-- images/
|   |   |-- previews/
|   |   `-- weather/
|   `-- js/
|       |-- app.js
|       |-- bootstrap.js
|       |-- config.js
|       |-- developer.js
|       |-- scene.js
|       `-- weather.js
|-- .nojekyll
|-- index.html
|-- robots.txt
|-- site.webmanifest
`-- sitemap.xml
```

`config.js` regroupe les villes et les familles de codes météo. `weather.js` construit la requête et normalise les données. `scene.js` pilote le ciel et la progression solaire. `developer.js` gère le laboratoire de prévisualisation. `app.js` orchestre les interactions et le rendu.

## Déploiement GitHub Pages

Le site est publié depuis la branche `main` et le dossier racine. `.nojekyll` désactive le traitement Jekyll, tandis que `robots.txt`, `sitemap.xml`, le manifeste et les métadonnées sociales référencent l'URL de production.

## Technologies

- HTML5 sémantique
- CSS avec Grid, Flexbox, propriétés personnalisées et animations
- JavaScript natif
- Fetch API
- API publique [Open-Meteo](https://open-meteo.com/en/docs)
- HugeIcons Stroke Rounded pour les icônes d'interface

## Auteur

Projet réalisé par [Osiris Balonga](https://github.com/Osiris-Balonga) dans le cadre de l'Akieni Academy.