diff --git a/data/index.html b/data/index.html index 4c0c47e..29cdfeb 100644 --- a/data/index.html +++ b/data/index.html @@ -148,6 +148,17 @@ color: white; } + .mode-btn.secondary { + background: #95a5a6; + border-color: #95a5a6; + color: white; + } + + .mode-btn.secondary:hover { + background: #7f8c8d; + border-color: #7f8c8d; + } + .data-card.solar { background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); } @@ -233,6 +244,92 @@ flex-wrap: wrap; margin-top: 20px; } + + .help-icon { + display: inline-block; + width: 24px; + height: 24px; + border-radius: 50%; + background: #667eea; + color: white; + text-align: center; + line-height: 24px; + cursor: pointer; + font-size: 16px; + font-weight: bold; + margin-left: 10px; + transition: background 0.3s; + } + + .help-icon:hover { + background: #764ba2; + } + + .help-modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); + z-index: 1000; + justify-content: center; + align-items: center; + } + + .help-modal.show { + display: flex; + } + + .help-content { + background: white; + padding: 30px; + border-radius: 10px; + max-width: 600px; + max-height: 80vh; + overflow-y: auto; + box-shadow: 0 10px 40px rgba(0,0,0,0.3); + } + + .help-content h3 { + color: #667eea; + margin-top: 0; + margin-bottom: 20px; + } + + .help-content .mode-item { + margin-bottom: 20px; + padding: 15px; + background: #f5f7fa; + border-radius: 5px; + border-left: 4px solid #667eea; + } + + .help-content .mode-title { + font-weight: bold; + font-size: 16px; + color: #333; + margin-bottom: 8px; + } + + .help-content .mode-desc { + color: #555; + line-height: 1.6; + } + + .close-help { + float: right; + font-size: 28px; + font-weight: bold; + color: #aaa; + cursor: pointer; + line-height: 20px; + } + + .close-help:hover { + color: #333; + } @@ -291,7 +388,7 @@ -

🎛️ Mode de Fonctionnement

+

🎛️ Mode de Fonctionnement ?

@@ -307,9 +404,92 @@
+ +
+
+ × +

📖 Guide des Modes de Chauffe

+ +
+
🟢 Mode ON
+
+ Le chauffe-eau fonctionne à pleine puissance en permanence, indépendamment de la production solaire. +
+
+ +
+
🔴 Mode OFF
+
+ Le chauffe-eau est complètement désactivé. Aucune chauffe n'est effectuée. +
+
+ +
+
🌙 Mode NUIT
+
+ Active le chauffage entre 0h - 4h pour atteindre + la température minimale configurée de 40°C.
(Ces valeurs peuvent être modifiées dans les paramètres) +
+
+ +
+
☀️ Mode SOLEIL
+
+ Utilise uniquement l'excédent de production solaire pour chauffer l'eau. La puissance de chauffe + s'ajuste automatiquement en fonction de la production solaire disponible. Optimise l'autoconsommation. +
+
+ +
+
☼ Mode JOUR
+
+ Chauffe intelligemment pendant les heures d'ensoleillement (lever à coucher du soleil) pour atteindre + la température maximale configurée de60°C à l'heure cible. La puissance est calculée en fonction du temps + restant et de l'écart de température. Le chauffage s'arrête automatiquement une fois la température + maximale atteinte jusqu'au lendemain. (Le bouton devient gris quand la température max est atteinte) +
+
+ +
+
🔄 Combinaisons
+
+ Vous pouvez combiner les modes NUIT, SOLEIL et JOUR pour une gestion optimale : +
    +
  • NUIT + SOLEIL : Maintien nocturne + optimisation solaire diurne
    • +
  • NUIT + JOUR : Maintien nocturne + chauffe intelligente diurne
    • +
  • SOLEIL + JOUR : Utilise l'excédent + planifie la chauffe
    • +
  • NUIT + SOLEIL + JOUR : Combinaison complète pour un fonctionnement 24h/24
    • +
+
+
+
+
+