Fiche Descriptive Complète : EcoMaintain AI
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template ecomaintain_ai_dashboard_technicien.html
Version 1.0.0
Date de création 16/03/2026
Auteur / Designer EcoMaintain Dev Team / Refoia Jeremy Tech
Type de page Dashboard Opérationnel (Technicien)
Objectif principal Monitorer la santé des machines et prioriser les interventions de maintenance préventive via l’IA.
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template propose une interface de gestion de maintenance industrielle orientée écologie et efficacité. Il utilise des formes organiques (non-rectangulaires) pour refléter une approche « naturelle » de la technologie. Le tableau de bord affiche l’impact carbone économisé, l’état global du parc machine et une liste d’alertes prédictives générées par une IA.
📌 Public cible (Persona)
👤 Technicien de maintenance (ex: Marc L.) : Pour visualiser ses tâches quotidiennes et les urgences machines.
👤 Responsable RSE : Pour suivre l’impact écologique des opérations de maintenance.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Standard HTML : HTML5 sémantique.
Framework CSS : Tailwind CSS (via CDN).
Typographie : Font « Outfit » (Google Fonts) pour un aspect moderne et épuré.
Design Paradigm : « Organic UI » avec l’usage de border-radius asymétriques et de gradients naturels.
📦 Dépendances / Assets
Tailwind CSS :
Google Fonts : Famille Outfit (Poids 300, 400, 600).
Heroicons (SVG) : Utilisés pour les icônes de foudre (énergie), graphiques et recyclage.
📥 ENTRÉES — CONTENU DYNAMIQUE
# Nom de la variable Type Description
1 user_name str Nom du technicien (ex: « Marc L. »)
2 eco_score_value int Pourcentage de réduction de CO2.
3 machine_health_pct int Score global de santé (utilisé pour la largeur de la progress bar).
4 intervention_list array Liste des alertes IA (Titre, anomalie, probabilité de panne).
🧱 STRUCTURE DU FICHIER — DOM
ecomaintain_ai_dashboard_technicien.html
Header : Logo « EcoMaintain AI » + Profil utilisateur et localisation usine.
Main (Grid 3 cols) :
Sidebar (Col 1) :
Card Eco-Score (Impact CO2).
Card Santé Parc Machine (Progress bar).
Content (Col 2-3) :
Section Interventions Prioritaires : Cards dynamiques avec badges de probabilité de panne et boutons d’action.
Section Historique/Succès : Confirmation de maintenance avec gain de points RSE.
Footer : Versioning du framework et mention légale.
🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM
🎨 Palette de Couleurs (Nature-Centric)
–nature-dark : #2d3a27 (Texte principal / Profondeur)
–nature-green : #4f772d (Actions primaires / Succès)
–nature-leaf : #90a955 (Accents / État optimal)
–nature-earth : #7a5c4d (Texte secondaire / Terre)
–nature-cream : #f4f7f0 (Fond de page doux)
📐 Spécificités Visuelles
Organic Cards : Rayons de bordure asymétriques (60px 15px 50px 20px).
Effet Neumorphisme Soft : Ombres portées diffuses pour décoller les éléments du fond crème.
🧪 TESTS & VALIDATION (Checklist)
[ ] Responsive : Vérifier que la grille passe de 3 colonnes à 1 colonne sur mobile.
[ ] Animations : Le point d’état orange doit pulser (animate-pulse).
[ ] Hover States : Les cartes doivent s’agrandir légèrement (scale-102) au survol.
[ ] Accessibilité : Vérifier le contraste du texte #7a5c4d sur le fond crème.
📌 INSTRUCTIONS SPÉCIALES
Sémantique : Bien que le template utilise beaucoup de div pour le style organique, veiller à conserver les balises
Avis
Il n’y a pas encore d’avis.