Supprimer le répertoire « .superpowers »
This commit is contained in:
@@ -1,50 +0,0 @@
|
||||
<h2>UI actuelle — Quel est le problème principal ?</h2>
|
||||
<p class="subtitle">L'écran BOX-3 fait 320×240 px (2.4"). Actuellement 6 onglets, font 14px uniquement.</p>
|
||||
|
||||
<div class="options" data-multiselect>
|
||||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Trop d'onglets</h3>
|
||||
<p>6 onglets sur 2.4" — difficile à naviguer, tab bar trop petite</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Infos critiques peu lisibles</h3>
|
||||
<p>Tensions et courants trop petits, pas assez de contraste, couleurs ternes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Fonctionnalités manquantes</h3>
|
||||
<p>Pas de climat AHT30, pas de status BLE/WiFi, pas de config runtime, courant toujours 0A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="d" onclick="toggleSelect(this)">
|
||||
<div class="letter">D</div>
|
||||
<div class="content">
|
||||
<h3>Look trop brut</h3>
|
||||
<p>Design technique/développeur, pas assez pro pour un produit terrain KXKM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="e" onclick="toggleSelect(this)">
|
||||
<div class="letter">E</div>
|
||||
<div class="content">
|
||||
<h3>Tout ça à la fois</h3>
|
||||
<p>Refonte complète : navigation, lisibilité, fonctionnalités, esthétique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Bugs critiques actuels</h3>
|
||||
<ul>
|
||||
<li>⚠️ Courant batterie toujours <strong>0.0A</strong> (INA237 pas intégré dans l'UI)</li>
|
||||
<li>⚠️ Navigation detail cassée (<code>s_nav_ref</code> jamais initialisé)</li>
|
||||
<li>⚠️ Pas de confirmation pour Switch ON/OFF (dangereux)</li>
|
||||
<li>⚠️ Plage chart hardcodée (20-32V) — échoue hors spec</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
<h2>Navigation — combien d'écrans ?</h2>
|
||||
<p class="subtitle">Actuellement 6 onglets. Avec le climat AHT30 et le status connexion, ça fait encore plus. Comment organiser ?</p>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>3 onglets principaux + sous-menus</h3>
|
||||
<p><strong>Batteries</strong> (grille + détail) | <strong>Système</strong> (WiFi, BLE, climat, solar, debug) | <strong>Config</strong> (seuils, device name)</p>
|
||||
<p style="color:#888">Moins de tabs = plus gros boutons, navigation plus claire</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>4 onglets (regroupement intelligent)</h3>
|
||||
<p><strong>⚡ Batt</strong> | <strong>📊 Sys</strong> (WiFi+BLE+climat+solar) | <strong>⚠ Alert</strong> | <strong>⚙ Config</strong></p>
|
||||
<p style="color:#888">Bon équilibre — debug/SOH intégrés dans les écrans existants</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Dashboard unique + swipe vertical</h3>
|
||||
<p>Un seul écran scrollable verticalement avec sections : batteries en haut, puis système, puis alertes</p>
|
||||
<p style="color:#888">Pas de tabs du tout — tout visible en scrollant. Plus moderne mais moins structuré</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,80 +0,0 @@
|
||||
<h2>Grille batteries — quel style ?</h2>
|
||||
<p class="subtitle">320×210px de contenu (240 - 30px tab bar). Jusqu'à 16 batteries, typiquement 4-8.</p>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup" data-choice="a" onclick="toggleSelect(this)" style="cursor:pointer">
|
||||
<div class="mockup-header">A — Grille compacte (actuel amélioré)</div>
|
||||
<div class="mockup-body" style="background:#1E1E1E; padding:8px; font-family:monospace; font-size:11px;">
|
||||
<div style="color:#4FC3F7; font-size:13px; margin-bottom:6px;">⚡ KXKM-BMU-kryole</div>
|
||||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:4px;">
|
||||
<div style="background:#2D2D2D; border-left:3px solid #00C853; padding:4px; border-radius:4px;">
|
||||
<div style="color:#888; font-size:9px;">B1</div>
|
||||
<div style="color:white; font-size:13px; font-weight:bold;">26.4V</div>
|
||||
<div style="color:#aaa; font-size:10px;">1.2A</div>
|
||||
</div>
|
||||
<div style="background:#2D2D2D; border-left:3px solid #00C853; padding:4px; border-radius:4px;">
|
||||
<div style="color:#888; font-size:9px;">B2</div>
|
||||
<div style="color:white; font-size:13px; font-weight:bold;">26.3V</div>
|
||||
<div style="color:#aaa; font-size:10px;">0.8A</div>
|
||||
</div>
|
||||
<div style="background:#2D2D2D; border-left:3px solid #FF1744; padding:4px; border-radius:4px;">
|
||||
<div style="color:#888; font-size:9px;">B3</div>
|
||||
<div style="color:#FF1744; font-size:13px; font-weight:bold;">0.0V</div>
|
||||
<div style="color:#aaa; font-size:10px;">OFF</div>
|
||||
</div>
|
||||
<div style="background:#2D2D2D; border-left:3px solid #00C853; padding:4px; border-radius:4px;">
|
||||
<div style="color:#888; font-size:9px;">B4</div>
|
||||
<div style="color:white; font-size:13px; font-weight:bold;">26.5V</div>
|
||||
<div style="color:#aaa; font-size:10px;">2.1A</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color:#666; font-size:10px; margin-top:6px; text-align:center;">4 batt · moy 26.4V · 4.1A total · 23°C 45%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup" data-choice="b" onclick="toggleSelect(this)" style="cursor:pointer">
|
||||
<div class="mockup-header">B — Liste avec barres de progression</div>
|
||||
<div class="mockup-body" style="background:#1E1E1E; padding:8px; font-family:monospace; font-size:11px;">
|
||||
<div style="color:#4FC3F7; font-size:13px; margin-bottom:6px;">⚡ KXKM-BMU-kryole</div>
|
||||
<div style="display:flex; flex-direction:column; gap:4px;">
|
||||
<div style="background:#2D2D2D; padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:8px;">
|
||||
<span style="color:#00C853; font-size:10px;">●</span>
|
||||
<span style="color:white; width:20px;">B1</span>
|
||||
<div style="flex:1; background:#333; height:8px; border-radius:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#00C853,#4CAF50); width:88%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="color:white; font-size:12px; font-weight:bold; width:45px; text-align:right;">26.4V</span>
|
||||
<span style="color:#aaa; font-size:10px; width:35px; text-align:right;">1.2A</span>
|
||||
</div>
|
||||
<div style="background:#2D2D2D; padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:8px;">
|
||||
<span style="color:#00C853; font-size:10px;">●</span>
|
||||
<span style="color:white; width:20px;">B2</span>
|
||||
<div style="flex:1; background:#333; height:8px; border-radius:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#00C853,#4CAF50); width:87%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="color:white; font-size:12px; font-weight:bold; width:45px; text-align:right;">26.3V</span>
|
||||
<span style="color:#aaa; font-size:10px; width:35px; text-align:right;">0.8A</span>
|
||||
</div>
|
||||
<div style="background:#2D2D2D; padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:8px;">
|
||||
<span style="color:#FF1744; font-size:10px;">●</span>
|
||||
<span style="color:#888; width:20px;">B3</span>
|
||||
<div style="flex:1; background:#333; height:8px; border-radius:4px;"></div>
|
||||
<span style="color:#FF1744; font-size:12px; font-weight:bold; width:45px; text-align:right;">OFF</span>
|
||||
<span style="color:#666; font-size:10px; width:35px; text-align:right;">—</span>
|
||||
</div>
|
||||
<div style="background:#2D2D2D; padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:8px;">
|
||||
<span style="color:#00C853; font-size:10px;">●</span>
|
||||
<span style="color:white; width:20px;">B4</span>
|
||||
<div style="flex:1; background:#333; height:8px; border-radius:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#00C853,#4CAF50); width:88%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="color:white; font-size:12px; font-weight:bold; width:45px; text-align:right;">26.5V</span>
|
||||
<span style="color:#aaa; font-size:10px; width:35px; text-align:right;">2.1A</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color:#666; font-size:10px; margin-top:6px; text-align:center;">moy 26.4V · 4.1A total · 🌡23°C 💧45%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:16px;">La grille (A) montre plus de batteries d'un coup. La liste (B) est plus lisible avec les barres visuelles. Tap sur une batterie → écran détail dans les deux cas.</p>
|
||||
@@ -1,89 +0,0 @@
|
||||
<h2>Écran Système — quelles infos regrouper ?</h2>
|
||||
<p class="subtitle">Cet onglet fusionne : WiFi, BLE, climat AHT30, solar VE.Direct, debug I2C. Quel layout ?</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Proposition — Écran Sys avec sections pliables</div>
|
||||
<div class="mockup-body" style="background:#1E1E1E; padding:8px; font-family:monospace; font-size:11px;">
|
||||
<div style="color:#4FC3F7; font-size:13px; margin-bottom:8px;">📊 Système</div>
|
||||
|
||||
<!-- Connexion -->
|
||||
<div style="background:#252525; border-radius:4px; padding:6px; margin-bottom:4px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<span style="color:#aaa; font-size:10px;">CONNEXION</span>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<span style="color:#00C853; font-size:10px;">● BLE</span>
|
||||
<span style="color:#00C853; font-size:10px;">● WiFi 192.168.0.250</span>
|
||||
<span style="color:#FF9100; font-size:10px;">○ MQTT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Climat -->
|
||||
<div style="background:#252525; border-radius:4px; padding:6px; margin-bottom:4px;">
|
||||
<div style="display:flex; justify-content:space-between;">
|
||||
<span style="color:#aaa; font-size:10px;">CLIMAT</span>
|
||||
<div style="display:flex; gap:12px;">
|
||||
<span style="color:white;">🌡 <strong>23.5°C</strong></span>
|
||||
<span style="color:white;">💧 <strong>45%</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solar -->
|
||||
<div style="background:#252525; border-radius:4px; padding:6px; margin-bottom:4px;">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:2px;">
|
||||
<span style="color:#aaa; font-size:10px;">SOLAIRE</span>
|
||||
<span style="color:#FFD600; font-size:10px;">☀ Float</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:12px; font-size:11px;">
|
||||
<span style="color:white;">PV <strong>35.2V</strong></span>
|
||||
<span style="color:white;"><strong>120W</strong></span>
|
||||
<span style="color:white;">Bat <strong>26.8V</strong></span>
|
||||
<span style="color:#aaa;">Jour <strong>450Wh</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Firmware -->
|
||||
<div style="background:#252525; border-radius:4px; padding:6px; margin-bottom:4px;">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:2px;">
|
||||
<span style="color:#aaa; font-size:10px;">FIRMWARE</span>
|
||||
<span style="color:#888; font-size:10px;">v0.5.0</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:12px; font-size:10px; color:#888;">
|
||||
<span>Heap 16.1MB</span>
|
||||
<span>Up 2h34m</span>
|
||||
<span>INA:4 TCA:1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- I2C Debug (compact) -->
|
||||
<div style="background:#252525; border-radius:4px; padding:6px;">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:2px;">
|
||||
<span style="color:#aaa; font-size:10px;">I2C BUS</span>
|
||||
<span style="color:#888; font-size:10px;">5 devices · 0 err</span>
|
||||
</div>
|
||||
<div style="font-size:9px; color:#666; max-height:40px; overflow:hidden;">
|
||||
20:15:42 AHT30 read OK<br>
|
||||
20:15:41 INA237 scan OK<br>
|
||||
20:15:40 TCA9535 init OK
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options" style="margin-top:16px;">
|
||||
<div class="option" data-choice="ok" onclick="toggleSelect(this)">
|
||||
<div class="letter">✓</div>
|
||||
<div class="content">
|
||||
<h3>Ce layout me va</h3>
|
||||
<p>Sections compactes, toutes les infos en un écran sans scroll</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="more" onclick="toggleSelect(this)">
|
||||
<div class="letter">+</div>
|
||||
<div class="content">
|
||||
<h3>J'aimerais des modifications</h3>
|
||||
<p>Dis-moi quoi changer dans le terminal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,56 +0,0 @@
|
||||
<h2>Palette de couleurs — quel style ?</h2>
|
||||
<p class="subtitle">L'écran est petit (2.4") et souvent en plein soleil sur les événements KXKM. Le contraste est critique.</p>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup" data-choice="a" onclick="toggleSelect(this)" style="cursor:pointer">
|
||||
<div class="mockup-header">A — Dark Pro (actuel amélioré)</div>
|
||||
<div class="mockup-body" style="background:#1E1E1E; padding:12px; font-family:monospace;">
|
||||
<div style="display:flex; gap:6px; margin-bottom:8px;">
|
||||
<span style="background:#00C853; color:black; padding:2px 8px; border-radius:10px; font-size:10px;">OK</span>
|
||||
<span style="background:#FF9100; color:black; padding:2px 8px; border-radius:10px; font-size:10px;">WARN</span>
|
||||
<span style="background:#FF1744; color:white; padding:2px 8px; border-radius:10px; font-size:10px;">ERR</span>
|
||||
<span style="background:#9E9E9E; color:white; padding:2px 8px; border-radius:10px; font-size:10px;">OFF</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:3px;">
|
||||
<div style="background:#2D2D2D; padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:8px;">
|
||||
<span style="color:#00C853;">●</span>
|
||||
<span style="color:white; font-weight:bold;">26.4V</span>
|
||||
<span style="color:#aaa;">1.2A</span>
|
||||
</div>
|
||||
<div style="background:#2D2D2D; padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:8px;">
|
||||
<span style="color:#FF1744;">●</span>
|
||||
<span style="color:#FF1744; font-weight:bold;">OFF</span>
|
||||
<span style="color:#666;">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color:#4FC3F7; font-size:10px; margin-top:8px;">Fond sombre, texte blanc, accents vifs</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup" data-choice="b" onclick="toggleSelect(this)" style="cursor:pointer">
|
||||
<div class="mockup-header">B — High Contrast (plein soleil)</div>
|
||||
<div class="mockup-body" style="background:#000000; padding:12px; font-family:monospace;">
|
||||
<div style="display:flex; gap:6px; margin-bottom:8px;">
|
||||
<span style="background:#00FF66; color:black; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:bold;">OK</span>
|
||||
<span style="background:#FFAA00; color:black; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:bold;">WARN</span>
|
||||
<span style="background:#FF0044; color:white; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:bold;">ERR</span>
|
||||
<span style="background:#666666; color:white; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:bold;">OFF</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:3px;">
|
||||
<div style="background:#111; border:1px solid #333; padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:8px;">
|
||||
<span style="color:#00FF66; font-size:14px;">●</span>
|
||||
<span style="color:#FFFFFF; font-weight:bold; font-size:14px;">26.4V</span>
|
||||
<span style="color:#CCCCCC; font-size:12px;">1.2A</span>
|
||||
</div>
|
||||
<div style="background:#1A0000; border:1px solid #440000; padding:4px 8px; border-radius:4px; display:flex; align-items:center; gap:8px;">
|
||||
<span style="color:#FF0044; font-size:14px;">●</span>
|
||||
<span style="color:#FF4466; font-weight:bold; font-size:14px;">OFF</span>
|
||||
<span style="color:#664444; font-size:12px;">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color:#00AAFF; font-size:10px; margin-top:8px;">Noir pur, couleurs saturées, gros texte</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:12px;">A = élégant en intérieur. B = lisible en plein soleil. Les deux sont dark mode.</p>
|
||||
@@ -1,3 +0,0 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Préparation du design final...</p>
|
||||
</div>
|
||||
@@ -1,142 +0,0 @@
|
||||
<h2>Dashboard avec icônes — quel style ?</h2>
|
||||
<p class="subtitle">Tu veux un dashboard type "home screen" avec des icônes au lieu de tabs ? Ou des icônes dans les tabs ?</p>
|
||||
|
||||
<div class="split">
|
||||
<div class="mockup" data-choice="a" onclick="toggleSelect(this)" style="cursor:pointer">
|
||||
<div class="mockup-header">A — Home Dashboard avec tuiles icônes</div>
|
||||
<div class="mockup-body" style="background:#000; padding:8px; font-family:sans-serif; font-size:11px;">
|
||||
<!-- Header -->
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
|
||||
<span style="color:#00AAFF; font-weight:bold; font-size:13px;">KXKM-BMU-kryole</span>
|
||||
<div style="display:flex; gap:4px;">
|
||||
<span style="color:#00FF66; font-size:9px;">● BLE</span>
|
||||
<span style="color:#00FF66; font-size:9px;">● WiFi</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tuiles 2x3 -->
|
||||
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:6px;">
|
||||
<!-- Batteries -->
|
||||
<div style="background:#111; border:1px solid #00FF66; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="font-size:28px;">⚡</div>
|
||||
<div style="color:white; font-weight:bold; font-size:14px;">4 / 4</div>
|
||||
<div style="color:#00FF66; font-size:9px;">BATTERIES</div>
|
||||
<div style="color:#aaa; font-size:9px;">moy 26.4V</div>
|
||||
</div>
|
||||
<!-- Climat -->
|
||||
<div style="background:#111; border:1px solid #444; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="font-size:28px;">🌡</div>
|
||||
<div style="color:white; font-weight:bold; font-size:14px;">23.5°C</div>
|
||||
<div style="color:#888; font-size:9px;">CLIMAT</div>
|
||||
<div style="color:#aaa; font-size:9px;">45% HR</div>
|
||||
</div>
|
||||
<!-- Solar -->
|
||||
<div style="background:#111; border:1px solid #FFD600; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="font-size:28px;">☀️</div>
|
||||
<div style="color:white; font-weight:bold; font-size:14px;">120W</div>
|
||||
<div style="color:#FFD600; font-size:9px;">SOLAIRE</div>
|
||||
<div style="color:#aaa; font-size:9px;">Float</div>
|
||||
</div>
|
||||
<!-- Courant total -->
|
||||
<div style="background:#111; border:1px solid #444; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="font-size:28px;">⚡</div>
|
||||
<div style="color:white; font-weight:bold; font-size:14px;">4.1A</div>
|
||||
<div style="color:#888; font-size:9px;">COURANT</div>
|
||||
<div style="color:#aaa; font-size:9px;">total</div>
|
||||
</div>
|
||||
<!-- Alertes -->
|
||||
<div style="background:#111; border:1px solid #FF0044; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="font-size:28px;">⚠️</div>
|
||||
<div style="color:#FF0044; font-weight:bold; font-size:14px;">2</div>
|
||||
<div style="color:#FF0044; font-size:9px;">ALERTES</div>
|
||||
<div style="color:#aaa; font-size:9px;">actives</div>
|
||||
</div>
|
||||
<!-- Config -->
|
||||
<div style="background:#111; border:1px solid #444; border-radius:8px; padding:8px; text-align:center;">
|
||||
<div style="font-size:28px;">⚙️</div>
|
||||
<div style="color:white; font-weight:bold; font-size:14px;">v0.5</div>
|
||||
<div style="color:#888; font-size:9px;">CONFIG</div>
|
||||
<div style="color:#aaa; font-size:9px;">2h34m up</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="color:#444; font-size:9px; text-align:center; margin-top:6px;">Tap une tuile pour ouvrir le détail</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup" data-choice="b" onclick="toggleSelect(this)" style="cursor:pointer">
|
||||
<div class="mockup-header">B — Dashboard compact + tabs icônes en bas</div>
|
||||
<div class="mockup-body" style="background:#000; padding:8px; font-family:sans-serif; font-size:11px; display:flex; flex-direction:column; min-height:260px;">
|
||||
<!-- Header stats -->
|
||||
<div style="display:flex; gap:4px; margin-bottom:6px;">
|
||||
<div style="flex:1; background:#111; border-radius:6px; padding:4px; text-align:center;">
|
||||
<div style="color:#00FF66; font-size:18px; font-weight:bold;">4/4</div>
|
||||
<div style="color:#666; font-size:8px;">BATT OK</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:6px; padding:4px; text-align:center;">
|
||||
<div style="color:white; font-size:18px; font-weight:bold;">26.4V</div>
|
||||
<div style="color:#666; font-size:8px;">MOY</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:6px; padding:4px; text-align:center;">
|
||||
<div style="color:white; font-size:18px; font-weight:bold;">4.1A</div>
|
||||
<div style="color:#666; font-size:8px;">TOTAL</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:6px; padding:4px; text-align:center;">
|
||||
<div style="color:#FFAA00; font-size:18px; font-weight:bold;">23°C</div>
|
||||
<div style="color:#666; font-size:8px;">TEMP</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Battery list -->
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:2px; overflow:hidden;">
|
||||
<div style="background:#111; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B1</span>
|
||||
<div style="flex:1; background:#222; height:6px; border-radius:3px;"><div style="background:#00FF66; width:88%; height:100%; border-radius:3px;"></div></div>
|
||||
<span style="color:white; font-size:11px; font-weight:bold; width:40px; text-align:right;">26.4V</span>
|
||||
<span style="color:#aaa; font-size:9px; width:30px; text-align:right;">1.2A</span>
|
||||
</div>
|
||||
<div style="background:#111; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B2</span>
|
||||
<div style="flex:1; background:#222; height:6px; border-radius:3px;"><div style="background:#00FF66; width:87%; height:100%; border-radius:3px;"></div></div>
|
||||
<span style="color:white; font-size:11px; font-weight:bold; width:40px; text-align:right;">26.3V</span>
|
||||
<span style="color:#aaa; font-size:9px; width:30px; text-align:right;">0.8A</span>
|
||||
</div>
|
||||
<div style="background:#0A0000; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px; border-left:3px solid #FF0044;">
|
||||
<span style="color:#664444; width:18px; font-size:10px;">B3</span>
|
||||
<div style="flex:1; background:#220000; height:6px; border-radius:3px;"></div>
|
||||
<span style="color:#FF4466; font-size:11px; font-weight:bold; width:40px; text-align:right;">OFF</span>
|
||||
<span style="color:#442222; font-size:9px; width:30px; text-align:right;">—</span>
|
||||
</div>
|
||||
<div style="background:#111; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B4</span>
|
||||
<div style="flex:1; background:#222; height:6px; border-radius:3px;"><div style="background:#00FF66; width:88%; height:100%; border-radius:3px;"></div></div>
|
||||
<span style="color:white; font-size:11px; font-weight:bold; width:40px; text-align:right;">26.5V</span>
|
||||
<span style="color:#aaa; font-size:9px; width:30px; text-align:right;">2.1A</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab bar -->
|
||||
<div style="display:flex; background:#0A0A0A; border-top:1px solid #222; margin:6px -8px -8px -8px; padding:4px 0;">
|
||||
<div style="flex:1; text-align:center; color:#00FF66;">
|
||||
<div style="font-size:16px;">⚡</div>
|
||||
<div style="font-size:7px;">BATT</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#666;">
|
||||
<div style="font-size:16px;">📊</div>
|
||||
<div style="font-size:7px;">SYS</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#FF0044; position:relative;">
|
||||
<div style="font-size:16px;">⚠️</div>
|
||||
<div style="font-size:7px;">ALERT</div>
|
||||
<div style="position:absolute; top:-2px; right:20%; background:#FF0044; color:white; font-size:7px; width:12px; height:12px; border-radius:6px; display:flex; align-items:center; justify-content:center;">2</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#666;">
|
||||
<div style="font-size:16px;">⚙️</div>
|
||||
<div style="font-size:7px;">CONFIG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:12px;">A = Home screen avec tuiles cliquables, chaque tuile ouvre un écran. B = Dashboard direct avec tabs icônes en bas et stats en haut.</p>
|
||||
@@ -1,138 +0,0 @@
|
||||
<h2>Dashboard B raffiné — top bar avec stats clés</h2>
|
||||
<p class="subtitle">Top bar : Vmoy, Itotal, Ah In, Ah Out, Climat. Puis liste batteries. Tab bar icônes en bas.</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Dashboard final — 320×240 High Contrast</div>
|
||||
<div class="mockup-body" style="background:#000; padding:0; font-family:sans-serif; font-size:11px; display:flex; flex-direction:column; height:300px; overflow:hidden;">
|
||||
|
||||
<!-- TOP BAR - Stats clés -->
|
||||
<div style="background:#0A0A0A; border-bottom:1px solid #222; padding:4px 6px;">
|
||||
<!-- Row 1: device name + connexion -->
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:3px;">
|
||||
<span style="color:#00AAFF; font-weight:bold; font-size:11px;">⚡ kryole</span>
|
||||
<div style="display:flex; gap:4px;">
|
||||
<span style="color:#00FF66; font-size:8px;">● BLE</span>
|
||||
<span style="color:#00FF66; font-size:8px;">● WiFi</span>
|
||||
<span style="color:#FF4444; font-size:8px;">○ MQTT</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 2: stats -->
|
||||
<div style="display:flex; gap:2px;">
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:#00FF66; font-size:14px; font-weight:bold; line-height:1.1;">26.4V</div>
|
||||
<div style="color:#555; font-size:7px;">V MOY</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:white; font-size:14px; font-weight:bold; line-height:1.1;">4.1A</div>
|
||||
<div style="color:#555; font-size:7px;">I TOTAL</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:#4FC3F7; font-size:14px; font-weight:bold; line-height:1.1;">12.3</div>
|
||||
<div style="color:#555; font-size:7px;">Ah IN</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:#FF9100; font-size:14px; font-weight:bold; line-height:1.1;">8.2</div>
|
||||
<div style="color:#555; font-size:7px;">Ah OUT</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:#FFAA00; font-size:12px; font-weight:bold; line-height:1.3;">23°C</div>
|
||||
<div style="color:#555; font-size:7px;">45% HR</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BATTERY LIST -->
|
||||
<div style="flex:1; padding:4px 6px; display:flex; flex-direction:column; gap:2px; overflow-y:auto;">
|
||||
<!-- B1 OK -->
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px; font-weight:bold;">B1</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:8px; border-radius:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#00CC44,#00FF66); width:88%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="color:#FFFFFF; font-size:12px; font-weight:bold; width:44px; text-align:right;">26.4V</span>
|
||||
<span style="color:#CCCCCC; font-size:10px; width:32px; text-align:right;">1.2A</span>
|
||||
</div>
|
||||
<!-- B2 OK -->
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px; font-weight:bold;">B2</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:8px; border-radius:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#00CC44,#00FF66); width:87%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="color:#FFFFFF; font-size:12px; font-weight:bold; width:44px; text-align:right;">26.3V</span>
|
||||
<span style="color:#CCCCCC; font-size:10px; width:32px; text-align:right;">0.8A</span>
|
||||
</div>
|
||||
<!-- B3 OFF -->
|
||||
<div style="background:#0A0000; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #FF0044;">
|
||||
<span style="color:#884444; width:18px; font-size:10px; font-weight:bold;">B3</span>
|
||||
<div style="flex:1; background:#1A0000; height:8px; border-radius:4px;"></div>
|
||||
<span style="color:#FF4466; font-size:12px; font-weight:bold; width:44px; text-align:right;">OFF</span>
|
||||
<span style="color:#553333; font-size:10px; width:32px; text-align:right;">—</span>
|
||||
</div>
|
||||
<!-- B4 OK -->
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px; font-weight:bold;">B4</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:8px; border-radius:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#00CC44,#00FF66); width:88%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="color:#FFFFFF; font-size:12px; font-weight:bold; width:44px; text-align:right;">26.5V</span>
|
||||
<span style="color:#CCCCCC; font-size:10px; width:32px; text-align:right;">2.1A</span>
|
||||
</div>
|
||||
<!-- B5 WARN -->
|
||||
<div style="background:#0A0800; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #FFAA00;">
|
||||
<span style="color:#AA8800; width:18px; font-size:10px; font-weight:bold;">B5</span>
|
||||
<div style="flex:1; background:#1A1800; height:8px; border-radius:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#FF8800,#FFAA00); width:82%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="color:#FFCC44; font-size:12px; font-weight:bold; width:44px; text-align:right;">24.8V</span>
|
||||
<span style="color:#AA9944; font-size:10px; width:32px; text-align:right;">0.3A</span>
|
||||
</div>
|
||||
<!-- B6 OK -->
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px; font-weight:bold;">B6</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:8px; border-radius:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#00CC44,#00FF66); width:86%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="color:#FFFFFF; font-size:12px; font-weight:bold; width:44px; text-align:right;">26.1V</span>
|
||||
<span style="color:#CCCCCC; font-size:10px; width:32px; text-align:right;">1.5A</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB BAR -->
|
||||
<div style="display:flex; background:#0A0A0A; border-top:1px solid #222; padding:4px 0; flex-shrink:0;">
|
||||
<div style="flex:1; text-align:center; color:#00FF66;">
|
||||
<div style="font-size:16px;">⚡</div>
|
||||
<div style="font-size:7px; font-weight:bold;">BATT</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#666;">
|
||||
<div style="font-size:16px;">📊</div>
|
||||
<div style="font-size:7px;">SYS</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#FF0044; position:relative;">
|
||||
<div style="font-size:16px;">⚠️</div>
|
||||
<div style="font-size:7px;">ALERT</div>
|
||||
<div style="position:absolute; top:-2px; right:22%; background:#FF0044; color:white; font-size:7px; width:12px; height:12px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:bold;">2</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#666;">
|
||||
<div style="font-size:16px;">⚙️</div>
|
||||
<div style="font-size:7px;">CONFIG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options" style="margin-top:16px;">
|
||||
<div class="option" data-choice="ok" onclick="toggleSelect(this)">
|
||||
<div class="letter">✓</div>
|
||||
<div class="content">
|
||||
<h3>C'est bon, on part là-dessus</h3>
|
||||
<p>Top bar stats + liste batteries + tab bar icônes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="change" onclick="toggleSelect(this)">
|
||||
<div class="letter">✎</div>
|
||||
<div class="content">
|
||||
<h3>Modifications à faire</h3>
|
||||
<p>Dis-moi quoi changer dans le terminal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,122 +0,0 @@
|
||||
<h2>5 onglets avec SOH IA — où le mettre ?</h2>
|
||||
<p class="subtitle">On ajoute l'onglet State of Health (prédiction IA TFLite). 5 onglets sur 320px = 64px par tab.</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Tab bar 5 onglets — 320px</div>
|
||||
<div class="mockup-body" style="background:#000; padding:0; font-family:sans-serif;">
|
||||
<!-- Spacer -->
|
||||
<div style="height:220px; display:flex; align-items:center; justify-content:center; color:#333;">
|
||||
(contenu écran)
|
||||
</div>
|
||||
<!-- Tab bar 5 -->
|
||||
<div style="display:flex; background:#0A0A0A; border-top:1px solid #222; padding:4px 0;">
|
||||
<div style="flex:1; text-align:center; color:#00FF66;">
|
||||
<div style="font-size:15px;">⚡</div>
|
||||
<div style="font-size:7px; font-weight:bold;">BATT</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#666;">
|
||||
<div style="font-size:15px;">🧠</div>
|
||||
<div style="font-size:7px;">SOH</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#666;">
|
||||
<div style="font-size:15px;">📊</div>
|
||||
<div style="font-size:7px;">SYS</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#FF0044; position:relative;">
|
||||
<div style="font-size:15px;">⚠️</div>
|
||||
<div style="font-size:7px;">ALERT</div>
|
||||
<div style="position:absolute; top:-2px; right:16%; background:#FF0044; color:white; font-size:7px; width:12px; height:12px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:bold;">2</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center; color:#666;">
|
||||
<div style="font-size:15px;">⚙️</div>
|
||||
<div style="font-size:7px;">CONFIG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top:20px;">Écran SOH — State of Health IA</h3>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">🧠 SOH — Prédiction santé batteries (TFLite)</div>
|
||||
<div class="mockup-body" style="background:#000; padding:8px; font-family:sans-serif; font-size:11px; display:flex; flex-direction:column; gap:4px;">
|
||||
<!-- Header -->
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
||||
<span style="color:#00FFCC; font-weight:bold; font-size:13px;">🧠 State of Health</span>
|
||||
<span style="color:#555; font-size:9px;">Dernière pred: il y a 10s</span>
|
||||
</div>
|
||||
|
||||
<!-- SOH Avg -->
|
||||
<div style="background:#0A1A1A; border:1px solid #00FFCC; border-radius:6px; padding:6px; text-align:center; margin-bottom:4px;">
|
||||
<div style="color:#00FFCC; font-size:9px;">SOH MOYEN</div>
|
||||
<div style="color:white; font-size:24px; font-weight:bold;">78%</div>
|
||||
<div style="background:#1A1A1A; height:8px; border-radius:4px; margin-top:4px; overflow:hidden;">
|
||||
<div style="background:linear-gradient(90deg,#00AA88,#00FFCC); width:78%; height:100%; border-radius:4px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Per battery -->
|
||||
<div style="display:flex; flex-direction:column; gap:2px;">
|
||||
<div style="background:#0A0A0A; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B1</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:6px; border-radius:3px; overflow:hidden;">
|
||||
<div style="background:#00FF66; width:92%; height:100%; border-radius:3px;"></div>
|
||||
</div>
|
||||
<span style="color:#00FF66; font-size:11px; font-weight:bold; width:32px; text-align:right;">92%</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B2</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:6px; border-radius:3px; overflow:hidden;">
|
||||
<div style="background:#00FF66; width:85%; height:100%; border-radius:3px;"></div>
|
||||
</div>
|
||||
<span style="color:#00FF66; font-size:11px; font-weight:bold; width:32px; text-align:right;">85%</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B3</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:6px; border-radius:3px; overflow:hidden;">
|
||||
<div style="background:#FFAA00; width:58%; height:100%; border-radius:3px;"></div>
|
||||
</div>
|
||||
<span style="color:#FFAA00; font-size:11px; font-weight:bold; width:32px; text-align:right;">58%</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B4</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:6px; border-radius:3px; overflow:hidden;">
|
||||
<div style="background:#00FF66; width:78%; height:100%; border-radius:3px;"></div>
|
||||
</div>
|
||||
<span style="color:#00FF66; font-size:11px; font-weight:bold; width:32px; text-align:right;">78%</span>
|
||||
</div>
|
||||
<div style="background:#0A0000; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#884444; width:18px; font-size:10px;">B5</span>
|
||||
<div style="flex:1; background:#1A0000; height:6px; border-radius:3px; overflow:hidden;">
|
||||
<div style="background:#FF3333; width:22%; height:100%; border-radius:3px;"></div>
|
||||
</div>
|
||||
<span style="color:#FF3333; font-size:11px; font-weight:bold; width:32px; text-align:right;">22%</span>
|
||||
<span style="color:#FF3333; font-size:8px;">⚠ REMPLACER</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div style="display:flex; gap:8px; justify-content:center; margin-top:4px;">
|
||||
<span style="color:#00FF66; font-size:8px;">● >70% OK</span>
|
||||
<span style="color:#FFAA00; font-size:8px;">● 40-70% USURE</span>
|
||||
<span style="color:#FF3333; font-size:8px;">● <40% REMPLACER</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options" style="margin-top:16px;">
|
||||
<div class="option" data-choice="ok" onclick="toggleSelect(this)">
|
||||
<div class="letter">✓</div>
|
||||
<div class="content">
|
||||
<h3>5 onglets c'est bon</h3>
|
||||
<p>⚡BATT | 🧠SOH | 📊SYS | ⚠ALERT | ⚙CONFIG</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" data-choice="change" onclick="toggleSelect(this)">
|
||||
<div class="letter">✎</div>
|
||||
<div class="content">
|
||||
<h3>Modifications</h3>
|
||||
<p>Dis-moi dans le terminal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,314 +0,0 @@
|
||||
<h2>Preview complète — 5 écrans LVGL refonte</h2>
|
||||
<p class="subtitle">320×240px · High Contrast · Noir pur · Font 14px</p>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<h3>⚡ Onglet 1 — BATT (Dashboard principal)</h3>
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">⚡ BATT — Top bar + Liste batteries</div>
|
||||
<div class="mockup-body" style="background:#000; padding:0; font-family:sans-serif; font-size:11px; display:flex; flex-direction:column; height:320px; overflow:hidden;">
|
||||
|
||||
<!-- TOP BAR -->
|
||||
<div style="background:#0A0A0A; border-bottom:1px solid #222; padding:4px 6px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:3px;">
|
||||
<span style="color:#00AAFF; font-weight:bold; font-size:11px;">⚡ kryole</span>
|
||||
<div style="display:flex; gap:4px;">
|
||||
<span style="color:#00FF66; font-size:8px;">● BLE</span>
|
||||
<span style="color:#00FF66; font-size:8px;">● WiFi</span>
|
||||
<span style="color:#FF4444; font-size:8px;">○ MQTT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:2px;">
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:#00FF66; font-size:14px; font-weight:bold; line-height:1.1;">26.4V</div>
|
||||
<div style="color:#555; font-size:7px;">V MOY</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:white; font-size:14px; font-weight:bold; line-height:1.1;">4.1A</div>
|
||||
<div style="color:#555; font-size:7px;">I TOTAL</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:#4FC3F7; font-size:14px; font-weight:bold; line-height:1.1;">12.3</div>
|
||||
<div style="color:#555; font-size:7px;">Ah IN</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:#FF9100; font-size:14px; font-weight:bold; line-height:1.1;">8.2</div>
|
||||
<div style="color:#555; font-size:7px;">Ah OUT</div>
|
||||
</div>
|
||||
<div style="flex:1; background:#111; border-radius:3px; padding:2px 4px; text-align:center;">
|
||||
<div style="color:#FFAA00; font-size:12px; font-weight:bold; line-height:1.3;">23°C</div>
|
||||
<div style="color:#555; font-size:7px;">45% HR</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BATTERY LIST -->
|
||||
<div style="flex:1; padding:4px 6px; display:flex; flex-direction:column; gap:2px; overflow-y:auto;">
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px; font-weight:bold;">B1</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:8px; border-radius:4px; overflow:hidden;"><div style="background:linear-gradient(90deg,#00CC44,#00FF66); width:88%; height:100%; border-radius:4px;"></div></div>
|
||||
<span style="color:#FFF; font-size:12px; font-weight:bold; width:44px; text-align:right;">26.4V</span>
|
||||
<span style="color:#CCC; font-size:10px; width:32px; text-align:right;">1.2A</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px; font-weight:bold;">B2</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:8px; border-radius:4px; overflow:hidden;"><div style="background:linear-gradient(90deg,#00CC44,#00FF66); width:87%; height:100%; border-radius:4px;"></div></div>
|
||||
<span style="color:#FFF; font-size:12px; font-weight:bold; width:44px; text-align:right;">26.3V</span>
|
||||
<span style="color:#CCC; font-size:10px; width:32px; text-align:right;">0.8A</span>
|
||||
</div>
|
||||
<div style="background:#0A0000; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #FF0044;">
|
||||
<span style="color:#884444; width:18px; font-size:10px; font-weight:bold;">B3</span>
|
||||
<div style="flex:1; background:#1A0000; height:8px; border-radius:4px;"></div>
|
||||
<span style="color:#FF4466; font-size:12px; font-weight:bold; width:44px; text-align:right;">OFF</span>
|
||||
<span style="color:#553333; font-size:10px; width:32px; text-align:right;">—</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px; font-weight:bold;">B4</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:8px; border-radius:4px; overflow:hidden;"><div style="background:linear-gradient(90deg,#00CC44,#00FF66); width:88%; height:100%; border-radius:4px;"></div></div>
|
||||
<span style="color:#FFF; font-size:12px; font-weight:bold; width:44px; text-align:right;">26.5V</span>
|
||||
<span style="color:#CCC; font-size:10px; width:32px; text-align:right;">2.1A</span>
|
||||
</div>
|
||||
<div style="background:#0A0800; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #FFAA00;">
|
||||
<span style="color:#AA8800; width:18px; font-size:10px; font-weight:bold;">B5</span>
|
||||
<div style="flex:1; background:#1A1800; height:8px; border-radius:4px; overflow:hidden;"><div style="background:linear-gradient(90deg,#FF8800,#FFAA00); width:82%; height:100%; border-radius:4px;"></div></div>
|
||||
<span style="color:#FFCC44; font-size:12px; font-weight:bold; width:44px; text-align:right;">24.8V</span>
|
||||
<span style="color:#AA9944; font-size:10px; width:32px; text-align:right;">0.3A</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:4px; display:flex; align-items:center; gap:6px; border-left:3px solid #00FF66;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px; font-weight:bold;">B6</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:8px; border-radius:4px; overflow:hidden;"><div style="background:linear-gradient(90deg,#00CC44,#00FF66); width:86%; height:100%; border-radius:4px;"></div></div>
|
||||
<span style="color:#FFF; font-size:12px; font-weight:bold; width:44px; text-align:right;">26.1V</span>
|
||||
<span style="color:#CCC; font-size:10px; width:32px; text-align:right;">1.5A</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB BAR -->
|
||||
<div style="display:flex; background:#0A0A0A; border-top:1px solid #222; padding:4px 0; flex-shrink:0;">
|
||||
<div style="flex:1; text-align:center; color:#00FF66;"><div style="font-size:15px;">⚡</div><div style="font-size:7px; font-weight:bold;">BATT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">🧠</div><div style="font-size:7px;">SOH</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">📊</div><div style="font-size:7px;">SYS</div></div>
|
||||
<div style="flex:1; text-align:center; color:#FF0044; position:relative;"><div style="font-size:15px;">⚠️</div><div style="font-size:7px;">ALERT</div><div style="position:absolute; top:-2px; right:16%; background:#FF0044; color:white; font-size:7px; width:12px; height:12px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:bold;">2</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚙️</div><div style="font-size:7px;">CONFIG</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<h3 style="margin-top:24px;">🧠 Onglet 2 — SOH (State of Health IA)</h3>
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">🧠 SOH — Prédiction santé batteries TFLite</div>
|
||||
<div class="mockup-body" style="background:#000; padding:8px; font-family:sans-serif; font-size:11px; display:flex; flex-direction:column; height:280px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
||||
<span style="color:#00FFCC; font-weight:bold; font-size:13px;">🧠 State of Health</span>
|
||||
<span style="color:#555; font-size:9px;">il y a 10s</span>
|
||||
</div>
|
||||
<div style="background:#0A1A1A; border:1px solid #00FFCC; border-radius:6px; padding:6px; text-align:center; margin-bottom:6px;">
|
||||
<div style="color:#00FFCC; font-size:9px;">SOH MOYEN</div>
|
||||
<div style="color:white; font-size:24px; font-weight:bold;">78%</div>
|
||||
<div style="background:#1A1A1A; height:8px; border-radius:4px; margin-top:4px; overflow:hidden;"><div style="background:linear-gradient(90deg,#00AA88,#00FFCC); width:78%; height:100%; border-radius:4px;"></div></div>
|
||||
</div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:3px; overflow-y:auto;">
|
||||
<div style="background:#0A0A0A; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B1</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:6px; border-radius:3px; overflow:hidden;"><div style="background:#00FF66; width:92%; height:100%;"></div></div>
|
||||
<span style="color:#00FF66; font-size:11px; font-weight:bold; width:32px; text-align:right;">92%</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B2</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:6px; border-radius:3px; overflow:hidden;"><div style="background:#00FF66; width:85%; height:100%;"></div></div>
|
||||
<span style="color:#00FF66; font-size:11px; font-weight:bold; width:32px; text-align:right;">85%</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B3</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:6px; border-radius:3px; overflow:hidden;"><div style="background:#FFAA00; width:58%; height:100%;"></div></div>
|
||||
<span style="color:#FFAA00; font-size:11px; font-weight:bold; width:32px; text-align:right;">58%</span>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#ccc; width:18px; font-size:10px;">B4</span>
|
||||
<div style="flex:1; background:#1A1A1A; height:6px; border-radius:3px; overflow:hidden;"><div style="background:#00FF66; width:78%; height:100%;"></div></div>
|
||||
<span style="color:#00FF66; font-size:11px; font-weight:bold; width:32px; text-align:right;">78%</span>
|
||||
</div>
|
||||
<div style="background:#0A0000; padding:3px 6px; border-radius:3px; display:flex; align-items:center; gap:6px;">
|
||||
<span style="color:#884444; width:18px; font-size:10px;">B5</span>
|
||||
<div style="flex:1; background:#1A0000; height:6px; border-radius:3px; overflow:hidden;"><div style="background:#FF3333; width:22%; height:100%;"></div></div>
|
||||
<span style="color:#FF3333; font-size:11px; font-weight:bold; width:32px; text-align:right;">22%</span>
|
||||
<span style="color:#FF3333; font-size:8px;">⚠</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:8px; justify-content:center; margin-top:4px;">
|
||||
<span style="color:#00FF66; font-size:8px;">● >70% OK</span>
|
||||
<span style="color:#FFAA00; font-size:8px;">● 40-70% USURE</span>
|
||||
<span style="color:#FF3333; font-size:8px;">● <40% REMPLACER</span>
|
||||
</div>
|
||||
<!-- Tab bar -->
|
||||
<div style="display:flex; background:#0A0A0A; border-top:1px solid #222; padding:4px 0; margin:6px -8px -8px -8px;">
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚡</div><div style="font-size:7px;">BATT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#00FFCC;"><div style="font-size:15px;">🧠</div><div style="font-size:7px; font-weight:bold;">SOH</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">📊</div><div style="font-size:7px;">SYS</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚠️</div><div style="font-size:7px;">ALERT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚙️</div><div style="font-size:7px;">CONFIG</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<h3 style="margin-top:24px;">📊 Onglet 3 — SYS (Système)</h3>
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">📊 SYS — Connexion, Climat, Solar, Firmware, I2C</div>
|
||||
<div class="mockup-body" style="background:#000; padding:8px; font-family:sans-serif; font-size:11px; display:flex; flex-direction:column; height:280px;">
|
||||
<div style="color:#00AAFF; font-size:13px; margin-bottom:6px; font-weight:bold;">📊 Système</div>
|
||||
<div style="background:#111; border-radius:4px; padding:5px; margin-bottom:3px;">
|
||||
<div style="display:flex; justify-content:space-between;"><span style="color:#666; font-size:9px;">CONNEXION</span><div style="display:flex; gap:6px;"><span style="color:#00FF66; font-size:9px;">● BLE</span><span style="color:#00FF66; font-size:9px;">● WiFi 192.168.0.250</span><span style="color:#FF4444; font-size:9px;">○ MQTT</span></div></div>
|
||||
</div>
|
||||
<div style="background:#111; border-radius:4px; padding:5px; margin-bottom:3px;">
|
||||
<div style="display:flex; justify-content:space-between;"><span style="color:#666; font-size:9px;">CLIMAT</span><div style="display:flex; gap:10px;"><span style="color:white;">🌡 <strong>23.5°C</strong></span><span style="color:white;">💧 <strong>45%</strong></span></div></div>
|
||||
</div>
|
||||
<div style="background:#111; border-radius:4px; padding:5px; margin-bottom:3px;">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:2px;"><span style="color:#666; font-size:9px;">SOLAIRE</span><span style="color:#FFD600; font-size:9px;">☀ Float</span></div>
|
||||
<div style="display:flex; gap:10px; font-size:10px;"><span style="color:white;">PV <strong>35.2V</strong></span><span style="color:white;"><strong>120W</strong></span><span style="color:white;">Bat <strong>26.8V</strong></span><span style="color:#888;">Jour <strong>450Wh</strong></span></div>
|
||||
</div>
|
||||
<div style="background:#111; border-radius:4px; padding:5px; margin-bottom:3px;">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:2px;"><span style="color:#666; font-size:9px;">FIRMWARE</span><span style="color:#888; font-size:9px;">v0.5.0</span></div>
|
||||
<div style="display:flex; gap:10px; font-size:9px; color:#888;"><span>Heap 16.1MB</span><span>Up 2h34m</span><span>INA:4 TCA:1</span></div>
|
||||
</div>
|
||||
<div style="background:#111; border-radius:4px; padding:5px;">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:2px;"><span style="color:#666; font-size:9px;">I2C BUS</span><span style="color:#888; font-size:9px;">5 dev · 0 err</span></div>
|
||||
<div style="font-size:8px; color:#555;">20:15:42 AHT30 OK · 20:15:41 INA scan · 20:15:40 TCA init</div>
|
||||
</div>
|
||||
<div style="flex:1;"></div>
|
||||
<!-- Tab bar -->
|
||||
<div style="display:flex; background:#0A0A0A; border-top:1px solid #222; padding:4px 0; margin:6px -8px -8px -8px;">
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚡</div><div style="font-size:7px;">BATT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">🧠</div><div style="font-size:7px;">SOH</div></div>
|
||||
<div style="flex:1; text-align:center; color:#00AAFF;"><div style="font-size:15px;">📊</div><div style="font-size:7px; font-weight:bold;">SYS</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚠️</div><div style="font-size:7px;">ALERT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚙️</div><div style="font-size:7px;">CONFIG</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<h3 style="margin-top:24px;">⚠ Onglet 4 — ALERT</h3>
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">⚠ ALERT — Journal chronologique</div>
|
||||
<div class="mockup-body" style="background:#000; padding:8px; font-family:sans-serif; font-size:11px; display:flex; flex-direction:column; height:280px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
|
||||
<span style="color:#FF0044; font-weight:bold; font-size:13px;">⚠ Alertes</span>
|
||||
<div style="background:#222; color:#888; padding:2px 10px; border-radius:10px; font-size:9px; cursor:pointer;">CLEAR</div>
|
||||
</div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:2px; overflow-y:auto;">
|
||||
<div style="background:#1A0000; padding:4px 6px; border-radius:3px; border-left:3px solid #FF0044;">
|
||||
<div style="display:flex; justify-content:space-between;"><span style="color:#FF4466; font-size:10px; font-weight:bold;">B3 Undervoltage</span><span style="color:#553333; font-size:9px;">20:14:32</span></div>
|
||||
<div style="color:#884444; font-size:9px;">V=23.2V < seuil 24.0V — batterie déconnectée</div>
|
||||
</div>
|
||||
<div style="background:#1A0800; padding:4px 6px; border-radius:3px; border-left:3px solid #FFAA00;">
|
||||
<div style="display:flex; justify-content:space-between;"><span style="color:#FFCC44; font-size:10px; font-weight:bold;">B5 Low voltage</span><span style="color:#665500; font-size:9px;">20:12:15</span></div>
|
||||
<div style="color:#AA8844; font-size:9px;">V=24.8V proche du seuil 24.0V</div>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:3px; border-left:3px solid #00FF66;">
|
||||
<div style="display:flex; justify-content:space-between;"><span style="color:#00FF66; font-size:10px;">WiFi connecté</span><span style="color:#555; font-size:9px;">20:10:03</span></div>
|
||||
<div style="color:#666; font-size:9px;">IP 192.168.0.250 — SSID "Les cils"</div>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:3px; border-left:3px solid #00FF66;">
|
||||
<div style="display:flex; justify-content:space-between;"><span style="color:#00FF66; font-size:10px;">BLE advertising</span><span style="color:#555; font-size:9px;">20:09:58</span></div>
|
||||
<div style="color:#666; font-size:9px;">KXKM-BMU-kryole — NimBLE OK</div>
|
||||
</div>
|
||||
<div style="background:#0A0A0A; padding:4px 6px; border-radius:3px; border-left:3px solid #00AAFF;">
|
||||
<div style="display:flex; justify-content:space-between;"><span style="color:#00AAFF; font-size:10px;">Boot</span><span style="color:#555; font-size:9px;">20:09:55</span></div>
|
||||
<div style="color:#666; font-size:9px;">KXKM BMU v0.5.0 — 4 INA, 1 TCA</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab bar -->
|
||||
<div style="display:flex; background:#0A0A0A; border-top:1px solid #222; padding:4px 0; margin:6px -8px -8px -8px;">
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚡</div><div style="font-size:7px;">BATT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">🧠</div><div style="font-size:7px;">SOH</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">📊</div><div style="font-size:7px;">SYS</div></div>
|
||||
<div style="flex:1; text-align:center; color:#FF0044;"><div style="font-size:15px;">⚠️</div><div style="font-size:7px; font-weight:bold;">ALERT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚙️</div><div style="font-size:7px;">CONFIG</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<h3 style="margin-top:24px;">⚙ Onglet 5 — CONFIG</h3>
|
||||
<!-- ═══════════════════════════════════════════════════════ -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">⚙ CONFIG — NVS runtime settings</div>
|
||||
<div class="mockup-body" style="background:#000; padding:8px; font-family:sans-serif; font-size:11px; display:flex; flex-direction:column; height:280px;">
|
||||
<div style="color:#888; font-weight:bold; font-size:13px; margin-bottom:6px;">⚙ Configuration</div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:3px; overflow-y:auto;">
|
||||
<!-- Device -->
|
||||
<div style="background:#111; border-radius:4px; padding:5px;">
|
||||
<div style="color:#666; font-size:9px; margin-bottom:2px;">NOM DEVICE</div>
|
||||
<div style="display:flex; gap:4px; align-items:center;">
|
||||
<div style="flex:1; background:#1A1A1A; border:1px solid #333; border-radius:3px; padding:2px 6px; color:white; font-size:11px;">kryole</div>
|
||||
<div style="background:#222; color:#888; padding:2px 8px; border-radius:3px; font-size:9px;">✎</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WiFi -->
|
||||
<div style="background:#111; border-radius:4px; padding:5px;">
|
||||
<div style="display:flex; justify-content:space-between;"><span style="color:#666; font-size:9px;">WIFI</span><span style="color:#00FF66; font-size:8px;">● Connecté</span></div>
|
||||
<div style="display:flex; gap:4px; margin-top:2px;">
|
||||
<div style="flex:1; background:#1A1A1A; border:1px solid #333; border-radius:3px; padding:2px 6px; color:white; font-size:10px;">Les cils</div>
|
||||
<div style="flex:1; background:#1A1A1A; border:1px solid #333; border-radius:3px; padding:2px 6px; color:#555; font-size:10px;">••••••••</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Seuils -->
|
||||
<div style="background:#111; border-radius:4px; padding:5px;">
|
||||
<div style="color:#666; font-size:9px; margin-bottom:2px;">SEUILS PROTECTION</div>
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3px;">
|
||||
<div style="display:flex; align-items:center; gap:4px;">
|
||||
<span style="color:#888; font-size:9px; width:36px;">V min</span>
|
||||
<div style="background:#222; color:#FFAA00; padding:1px 4px; border-radius:2px; font-size:9px; cursor:pointer;">−</div>
|
||||
<span style="color:white; font-size:10px; font-weight:bold;">24.0V</span>
|
||||
<div style="background:#222; color:#FFAA00; padding:1px 4px; border-radius:2px; font-size:9px; cursor:pointer;">+</div>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:4px;">
|
||||
<span style="color:#888; font-size:9px; width:36px;">V max</span>
|
||||
<div style="background:#222; color:#FFAA00; padding:1px 4px; border-radius:2px; font-size:9px;">−</div>
|
||||
<span style="color:white; font-size:10px; font-weight:bold;">30.0V</span>
|
||||
<div style="background:#222; color:#FFAA00; padding:1px 4px; border-radius:2px; font-size:9px;">+</div>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:4px;">
|
||||
<span style="color:#888; font-size:9px; width:36px;">I max</span>
|
||||
<div style="background:#222; color:#FFAA00; padding:1px 4px; border-radius:2px; font-size:9px;">−</div>
|
||||
<span style="color:white; font-size:10px; font-weight:bold;">10.0A</span>
|
||||
<div style="background:#222; color:#FFAA00; padding:1px 4px; border-radius:2px; font-size:9px;">+</div>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:4px;">
|
||||
<span style="color:#888; font-size:9px; width:36px;">V diff</span>
|
||||
<div style="background:#222; color:#FFAA00; padding:1px 4px; border-radius:2px; font-size:9px;">−</div>
|
||||
<span style="color:white; font-size:10px; font-weight:bold;">1.0V</span>
|
||||
<div style="background:#222; color:#FFAA00; padding:1px 4px; border-radius:2px; font-size:9px;">+</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Options -->
|
||||
<div style="background:#111; border-radius:4px; padding:5px;">
|
||||
<div style="color:#666; font-size:9px; margin-bottom:2px;">OPTIONS</div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:2px;">
|
||||
<span style="color:#ccc; font-size:10px;">BLE</span>
|
||||
<div style="width:36px; height:18px; background:#00FF66; border-radius:9px; position:relative;"><div style="width:14px; height:14px; background:white; border-radius:7px; position:absolute; right:2px; top:2px;"></div></div>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<span style="color:#ccc; font-size:10px;">Luminosité</span>
|
||||
<div style="width:120px; height:6px; background:#333; border-radius:3px; overflow:hidden;"><div style="width:70%; height:100%; background:#FFD600; border-radius:3px;"></div></div>
|
||||
<span style="color:#888; font-size:9px;">70%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Save button -->
|
||||
<div style="background:#00CC44; color:black; text-align:center; padding:6px; border-radius:6px; font-weight:bold; font-size:12px; margin-top:4px; cursor:pointer;">💾 SAUVEGARDER</div>
|
||||
<!-- Tab bar -->
|
||||
<div style="display:flex; background:#0A0A0A; border-top:1px solid #222; padding:4px 0; margin:6px -8px -8px -8px;">
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚡</div><div style="font-size:7px;">BATT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">🧠</div><div style="font-size:7px;">SOH</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">📊</div><div style="font-size:7px;">SYS</div></div>
|
||||
<div style="flex:1; text-align:center; color:#666;"><div style="font-size:15px;">⚠️</div><div style="font-size:7px;">ALERT</div></div>
|
||||
<div style="flex:1; text-align:center; color:#888;"><div style="font-size:15px;">⚙️</div><div style="font-size:7px; font-weight:bold;">CONFIG</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1 +0,0 @@
|
||||
{"reason":"owner process exited","timestamp":1775079179687}
|
||||
@@ -1,27 +0,0 @@
|
||||
{"type":"server-started","port":49322,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:49322","screen_dir":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content","state_dir":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/state"}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/01-current-issues.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/01-current-issues.html"}
|
||||
{"source":"user-event","type":"click","text":"C\n \n Fonctionnalités manquantes\n Pas de climat AHT30, pas de status BLE/WiFi, pas de config runtime, courant toujours 0A","choice":"c","id":null,"timestamp":1775076679371}
|
||||
{"source":"user-event","type":"click","text":"D\n \n Look trop brut\n Design technique/développeur, pas assez pro pour un produit terrain KXKM","choice":"d","id":null,"timestamp":1775076685508}
|
||||
{"source":"user-event","type":"click","text":"C\n \n Fonctionnalités manquantes\n Pas de climat AHT30, pas de status BLE/WiFi, pas de config runtime, courant toujours 0A","choice":"c","id":null,"timestamp":1775076702824}
|
||||
{"source":"user-event","type":"click","text":"C\n \n Fonctionnalités manquantes\n Pas de climat AHT30, pas de status BLE/WiFi, pas de config runtime, courant toujours 0A","choice":"c","id":null,"timestamp":1775076703036}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/02-navigation.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/02-navigation.html"}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/03-battery-grid.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/03-battery-grid.html"}
|
||||
{"source":"user-event","type":"click","text":"B — Liste avec barres de progression\n \n ⚡ KXKM-BMU-kryole\n \n \n ●\n B1\n \n \n \n 26.4V\n 1.2A\n \n \n ●\n B2\n \n \n \n 26.3V\n 0.8A\n \n \n ●\n B3\n \n OFF\n —\n \n \n ●\n B4\n \n \n \n 26.5V\n 2.1A\n \n \n moy 26.4V · 4.1A total · 🌡23°C 💧45%","choice":"b","id":null,"timestamp":1775076781666}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/04-system-screen.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/04-system-screen.html"}
|
||||
{"source":"user-event","type":"click","text":"✓\n \n Ce layout me va\n Sections compactes, toutes les infos en un écran sans scroll","choice":"ok","id":null,"timestamp":1775076871777}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/05-color-theme.html"}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/06-waiting.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/06-waiting.html"}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/07-dashboard-icons.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/07-dashboard-icons.html"}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/08-topbar-refined.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/08-topbar-refined.html"}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/09-tabs-with-soh.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/09-tabs-with-soh.html"}
|
||||
{"type":"screen-added","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/10-full-preview.html"}
|
||||
{"type":"screen-updated","file":"/Users/electron/Documents/Lelectron_rare/1-KXKM/KXKM_Batterie_Parallelator/.superpowers/brainstorm/41015-1775076599/content/10-full-preview.html"}
|
||||
{"type":"server-stopped","reason":"owner process exited"}
|
||||
@@ -1 +0,0 @@
|
||||
41024
|
||||
Reference in New Issue
Block a user