donnees_copiees_20260313_152808

📋 Fiche Descriptive : EcoMaintain AI

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template donnees_copiees_20260313_152808.html

Version 1.1.0 (Eco-Friendly Edition)

Auteur / Designer Refoia Jeremy Tech (Inspiré par l’industrie 5.0)

Type de page Dashboard de Maintenance Prédictive & Écologique

Objectif principal Monitorer l’état des machines tout en optimisant l’empreinte carbone.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce dashboard permet à un technicien (ex: Jean-Baptiste) de suivre en temps réel la santé d’un parc machine. Sa particularité réside dans l’intégration de GreenPredict™, une couche d’IA qui suggère des actions de maintenance basées non seulement sur l’usure, mais aussi sur l’économie de CO2​.

📌 Public cible (Persona)

👤 Techniciens de maintenance : Pour le suivi opérationnel.

👤 Responsables RSE : Pour monitorer la réduction de l’empreinte carbone industrielle.

👤 Gestionnaires d’usine : Pour la planification optimisée des arrêts machines.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Framework CSS : Tailwind CSS (via CDN).

Typographie : Plus Jakarta Sans (via Google Fonts).

Design Style : « Organic UI » (Blobs, bordures asymétriques, flou de mouvement/backdrop-filter).

Responsive : Grid system natif (1 col sur mobile / 3 cols sur desktop).

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Variable Type Obligatoire Description

1 user_name str ✅ Oui Nom du technicien (ex: Jean-Baptiste).

2 co2_reduction int ✅ Oui Pourcentage de réduction CO2​ (ex: 14).

3 machine_list array ✅ Oui Liste des machines avec statut et niveau d’alerte.

4 ai_suggestion str ✅ Oui Texte généré par l’IA pour l’optimisation verte.

🧱 STRUCTURE DU FICHIER — DOM

header : Contient le branding « EcoMaintain AI », le profil utilisateur et la barre de progression de l’empreinte carbone.

main (Grid) :

Card État de Santé : Utilise des formes organiques (.organic-shape) et des animations de « respiration » (.ai-pulse) pour indiquer les machines actives.

Card GreenPredict™ : Focus sur une action spécifique d’optimisation avec un bouton CTA distinctif.

Section Traçabilité : Tableau listant les composants, leur potentiel de recyclage et les liens vers le reconditionnement.

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs

Fond : #F9FBF9 (Blanc cassé terreux).

Primaire : #2D5A27 (Vert forêt profond).

Accent (IA) : #C8E6C9 (Vert menthe clair).

Alerte : #EA580C (Orange vibrant pour les vibrations anormales).

📐 Éléments Signature

Blobs Organiques : border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Bouton Organic : Forme irrégulière asymétrique pour casser la rigidité industrielle classique.

Animation @keyframes breathe : Animation de mise à l’échelle douce (1.0 à 1.05) pour simuler la vie des machines saines.

🧪 TESTS & VALIDATION

[ ] Test d’Animation : Vérifier que .ai-pulse ne consomme pas trop de CPU sur mobile.

[ ] Accessibilité : Vérifier le contraste du texte vert sur fond vert clair (WCAG).

[ ] Dark Mode : Non implémenté (Le template repose sur une esthétique « Light & Nature »).