ecostat_dashboard_technicien_pollution

Fiche Descriptive Complète : EcoStat Dashboard

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template ecostat_dashboard_technicien_pollution.html

Version 1.0.0

Date de création 18/03/2026

Auteur / Designer Refoia Jeremy Tech

Type de page Dashboard Technique (Surveillance Environnementale)

Objectif principal Monitorer en temps réel la qualité de l’air et générer des rapports d’analyse.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose une interface de pilotage pour les techniciens environnementaux. Il permet de visualiser rapidement les indicateurs clés de performance (KPI) liés à la pollution (PM2.5, CO2) d’un secteur spécifique. Il inclut une barre latérale de navigation, des cartes de statistiques avec codes couleur d’alerte, et une zone de visualisation graphique dynamique.

📌 Public cible (Persona)

👤 Techniciens de terrain : Pour un check-in rapide des capteurs actifs.

👤 Analystes en environnement : Pour surveiller les seuils critiques de gaz.

👤 Responsables municipaux : Pour extraire des rapports PDF sur la qualité de l’air.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 (Sémantique)

Framework CSS : Tailwind CSS (via CDN)

Framework JS : Vanilla JS (Logique de date et transitions)

Responsive : ✅ Oui (Sidebar escamotable sur mobile, grille adaptative)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 sector_name str ✅ Oui Nom de la zone géographique (ex: « Secteur Bel Air »)

2 last_update date ✅ Oui Date de la dernière remontée de données

3 pm25_value float ✅ Oui Valeur actuelle des particules fines

4 co2_level int ✅ Oui Taux de CO2 en ppm

5 sensor_status bool ✅ Oui État du capteur (Actif/Inactif)

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

✅ Clic sur « Générer Rapport PDF » → Déclenche la fonction d’exportation des données.

✅ Hover sur les Cards KPI → Changement de la couleur de bordure selon le niveau de danger.

✅ Menu Hamburger (Mobile) → Toggle de la visibilité de la sidebar via JS.

✅ Animation « Pulse » → Indicateur visuel du flux de données en temps réel sur le graphique.

📂 Formulaires / Envois

Exportation : Bouton d’action pour le téléchargement de document.

Navigation : Liens internes pour basculer entre le tableau de bord et les analyses détaillées.

🧱 STRUCTURE DU FICHIER — DOM

ecostat_dashboard_technicien_pollution.html

📌 : Meta charset/viewport, titre, Google Fonts, Tailwind config & styles personnalisés (keyframes pulse).

📌

🏗️ Navigation Mobile : Header visible uniquement sur petits écrans avec bouton menu.

🏗️