From 9a29819d4f9eadcdfbe05659b0667a831e757b59 Mon Sep 17 00:00:00 2001
From: Yurii <laxilef@gmail.com>
Date: Mon, 8 Apr 2024 05:37:36 +0300
Subject: [PATCH] refactor: reworked layout and styles of the portal

---
 data/index.html         | 190 ++++++-------
 data/settings.html      | 605 +++++++++++++++++++---------------------
 data/static/app.css.gz  | Bin 581 -> 663 bytes
 data/static/app.js.gz   | Bin 4622 -> 4623 bytes
 src_data/static/app.css |  40 ++-
 src_data/static/app.js  |   2 +-
 6 files changed, 425 insertions(+), 412 deletions(-)

diff --git a/data/index.html b/data/index.html
index d431514..a6e9f9e 100644
--- a/data/index.html
+++ b/data/index.html
@@ -117,101 +117,104 @@
       </article>
 
       <article>
-        <div>
+        <div class="vars-busy" aria-busy="true"></div>
+        <div class="vars-table hidden">
           <hgroup>
-            <h2>States and sensors</h2>
-            <p>More information and settings can be found in your home assistant after setting up network and MQTT</p>
+            <h2>Info</h2>
+            <p>More information and settings can be found in your Home Assistant after setting up network and MQTT</p>
           </hgroup>
 
-          <div class="ot-busy" aria-busy="true"></div>
-          <table class="ot-table hidden">
-            <tbody>
-              <tr>
-                <th scope="row">OpenTherm connected:</th>
-                <td><input type="radio" class="ot-connected" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">MQTT connected:</th>
-                <td><input type="radio" class="mqtt-connected" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">Emergency:</th>
-                <td><input type="radio" class="ot-emergency" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">Heating:</th>
-                <td><input type="radio" class="ot-heating" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">DHW:</th>
-                <td><input type="radio" class="ot-dhw" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">Flame:</th>
-                <td><input type="radio" class="ot-flame" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">Fault:</th>
-                <td><input type="radio" class="ot-fault" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">Diagnostic:</th>
-                <td><input type="radio" class="ot-diagnostic" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">External pump:</th>
-                <td><input type="radio" class="ot-external-pump" aria-invalid="false" checked disabled /></td>
-              </tr>
-              <tr>
-                <th scope="row">Modulation:</th>
-                <td><b class="ot-modulation"></b> %</td>
-              </tr>
-              <tr>
-                <th scope="row">Pressure:</th>
-                <td><b class="ot-pressure"></b> <span class="pressure-unit"></span></td>
-              </tr>
-              <tr>
-                <th scope="row">DHW flow rate:</th>
-                <td><b class="ot-dhw-flow-rate"></b> <span class="volume-unit"></span>/min</td>
-              </tr>
-              <tr>
-                <th scope="row">Fault code:</th>
-                <td><b class="ot-fault-code"></b></td>
-              </tr>
-              <tr>
-                <th scope="row">Indoor temp:</th>
-                <td><b class="indoor-temp"></b> <span class="temp-unit"></span></td>
-              </tr>
-              <tr>
-                <th scope="row">Outdoor temp:</th>
-                <td><b class="outdoor-temp"></b> <span class="temp-unit"></span></td>
-              </tr>
-              <tr>
-                <th scope="row">Heating temp:</th>
-                <td><b class="heating-temp"></b> <span class="temp-unit"></span></td>
-              </tr>
-              <tr>
-                <th scope="row">Heating setpoint temp:</th>
-                <td><b class="heating-setpoint-temp"></b> <span class="temp-unit"></span></td>
-              </tr>
-              <tr>
-                <th scope="row">Heating return temp:</th>
-                <td><b class="heating-return-temp"></b> <span class="temp-unit"></span></td>
-              </tr>
-              <tr>
-                <th scope="row">DHW temp:</th>
-                <td><b class="dhw-temp"></b> <span class="temp-unit"></span></td>
-              </tr>
-              <tr>
-                <th scope="row">Exhaust temp:</th>
-                <td><b class="exhaust-temp"></b> <span class="temp-unit"></span></td>
-              </tr>
+          <details>
+            <summary role="button" class="secondary">States and sensors</summary>
+            <table>
+              <tbody>
+                <tr>
+                  <th scope="row">OpenTherm connected:</th>
+                  <td><input type="radio" class="ot-connected" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">MQTT connected:</th>
+                  <td><input type="radio" class="mqtt-connected" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">Emergency:</th>
+                  <td><input type="radio" class="ot-emergency" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">Heating:</th>
+                  <td><input type="radio" class="ot-heating" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">DHW:</th>
+                  <td><input type="radio" class="ot-dhw" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">Flame:</th>
+                  <td><input type="radio" class="ot-flame" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">Fault:</th>
+                  <td><input type="radio" class="ot-fault" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">Diagnostic:</th>
+                  <td><input type="radio" class="ot-diagnostic" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">External pump:</th>
+                  <td><input type="radio" class="ot-external-pump" aria-invalid="false" checked disabled /></td>
+                </tr>
+                <tr>
+                  <th scope="row">Modulation:</th>
+                  <td><b class="ot-modulation"></b> %</td>
+                </tr>
+                <tr>
+                  <th scope="row">Pressure:</th>
+                  <td><b class="ot-pressure"></b> <span class="pressure-unit"></span></td>
+                </tr>
+                <tr>
+                  <th scope="row">DHW flow rate:</th>
+                  <td><b class="ot-dhw-flow-rate"></b> <span class="volume-unit"></span>/min</td>
+                </tr>
+                <tr>
+                  <th scope="row">Fault code:</th>
+                  <td><b class="ot-fault-code"></b></td>
+                </tr>
+                <tr>
+                  <th scope="row">Indoor temp:</th>
+                  <td><b class="indoor-temp"></b> <span class="temp-unit"></span></td>
+                </tr>
+                <tr>
+                  <th scope="row">Outdoor temp:</th>
+                  <td><b class="outdoor-temp"></b> <span class="temp-unit"></span></td>
+                </tr>
+                <tr>
+                  <th scope="row">Heating temp:</th>
+                  <td><b class="heating-temp"></b> <span class="temp-unit"></span></td>
+                </tr>
+                <tr>
+                  <th scope="row">Heating setpoint temp:</th>
+                  <td><b class="heating-setpoint-temp"></b> <span class="temp-unit"></span></td>
+                </tr>
+                <tr>
+                  <th scope="row">Heating return temp:</th>
+                  <td><b class="heating-return-temp"></b> <span class="temp-unit"></span></td>
+                </tr>
+                <tr>
+                  <th scope="row">DHW temp:</th>
+                  <td><b class="dhw-temp"></b> <span class="temp-unit"></span></td>
+                </tr>
+                <tr>
+                  <th scope="row">Exhaust temp:</th>
+                  <td><b class="exhaust-temp"></b> <span class="temp-unit"></span></td>
+                </tr>
+              </tbody>
+            </table>
+          </details>
 
-              <!-- Diag -->
-              <tr>
-                <th scope="row">Slave parameters:</th>
-                <td>
-                  <pre><b>Vendor:</b>          <span class="slave-vendor"></span>
+          <details>
+            <summary role="button" class="secondary">OpenTherm diagnostic</summary>
+            <pre><b>Vendor:</b>          <span class="slave-vendor"></span>
 <b>Member ID:</b>       <span class="slave-member-id"></span>
 <b>Flags:</b>           <span class="slave-flags"></span>
 <b>Type:</b>            <span class="slave-type"></span>
@@ -219,10 +222,7 @@
 <b>OT version:</b>      <span class="slave-ot-version"></span>
 <b>Heating limits:</b>  <span class="heating-min-temp"></span>...<span class="heating-max-temp"></span> <span class="temp-unit"></span>
 <b>DHW limits:</b>      <span class="dhw-min-temp"></span>...<span class="dhw-max-temp"></span> <span class="temp-unit"></span></pre>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          </details>
         </div>
       </article>
     </main>
diff --git a/data/settings.html b/data/settings.html
index 129df82..14b730b 100644
--- a/data/settings.html
+++ b/data/settings.html
@@ -23,331 +23,310 @@
 
   <main class="container">
     <article>
-      <div>
-        <hgroup>
-          <h2>Portal settings</h2>
-          <p></p>
-        </hgroup>
+      <hgroup>
+        <h2>Settings</h2>
+        <p></p>
+      </hgroup>
 
-        <div id="portal-settings-busy" aria-busy="true"></div>
-        <form action="/api/settings" id="portal-settings" class="hidden">
-          <div class="grid">
-            <label for="portal-login">
-              Login
-              <input type="text" class="portal-login" name="portal[login]" maxlength="12" required>
+      <details>
+        <summary role="button" class="secondary">Portal settings</summary>
+        <div>
+          <div id="portal-settings-busy" aria-busy="true"></div>
+          <form action="/api/settings" id="portal-settings" class="hidden">
+            <div class="grid">
+              <label for="portal-login">
+                Login
+                <input type="text" class="portal-login" name="portal[login]" maxlength="12" required>
+              </label>
+              <label for="portal-password">
+                Password
+                <input type="password" class="portal-password" name="portal[password]" maxlength="32" required>
+              </label>
+            </div>
+            
+            <label for="portal-use-auth">
+              <input type="checkbox" class="portal-use-auth" name="portal[useAuth]" value="true">
+              Use auth
             </label>
-            <label for="portal-password">
-              Password
-              <input type="password" class="portal-password" name="portal[password]" maxlength="32" required>
-            </label>
-          </div>
-          
-          <label for="portal-use-auth">
-            <input type="checkbox" class="portal-use-auth" name="portal[useAuth]" value="true">
-            Use auth
-          </label>
-          <br>
+            <br>
+  
+            <button type="submit">Save</button>
+          </form>
+        </div>
+      </details>
 
-          <button type="submit">Save</button>
-        </form>
-      </div>
-    </article>
+      <details>
+        <summary role="button" class="secondary">System settings</summary>
+        <div>
+          <div id="system-settings-busy" aria-busy="true"></div>
+          <form action="/api/settings" id="system-settings" class="hidden">
+            <fieldset>
+              <legend>Unit system</legend>
+              <label>
+                <input type="radio" class="system-unit-system" name="system[unitSystem]" value="0" />
+                Metric (celsius)
+              </label>
+              <label>
+                <input type="radio" class="system-unit-system" name="system[unitSystem]" value="1" />
+                Imperial (fahrenheit)
+              </label>
+            </fieldset>
+  
+            <fieldset>
+              <label for="system-debug">
+                <input type="checkbox" class="system-debug" name="system[debug]" value="true">
+                Debug mode
+              </label>
+              <label for="system-use-serial">
+                <input type="checkbox" class="system-use-serial" name="system[useSerial]" value="true">
+                Enable serial port
+              </label>
+              <label for="system-use-telnet">
+                <input type="checkbox" class="system-use-telnet" name="system[useTelnet]" value="true">
+                Enable telnet
+              </label>
+            </fieldset>
+  
+            <fieldset>
+              <mark>After changing this settings, the ESP must be restarted for the changes to take effect.</mark>
+            </fieldset>
+  
+            <button type="submit">Save</button>
+          </form>
+        </div>
+      </details>
 
-    <article>
-      <div>
-        <hgroup>
-          <h2>OpenTherm settings</h2>
-          <p></p>
-        </hgroup>
+      <details>
+        <summary role="button" class="secondary">OpenTherm settings</summary>
+        <div>
+          <div id="opentherm-settings-busy" aria-busy="true"></div>
+          <form action="/api/settings" id="opentherm-settings" class="hidden">
+            <fieldset>
+              <legend>Unit system</legend>
+              <label>
+                <input type="radio" class="opentherm-unit-system" name="opentherm[unitSystem]" value="0" />
+                Metric (celsius)
+              </label>
+              <label>
+                <input type="radio" class="opentherm-unit-system" name="opentherm[unitSystem]" value="1" />
+                Imperial (fahrenheit)
+              </label>
+            </fieldset>
+  
+            <div class="grid">
+              <label for="opentherm-in-gpio">
+                In GPIO
+                <input type="number" inputmode="numeric" class="opentherm-in-gpio" name="opentherm[inGpio]" min="0" max="254" step="1">
+              </label>
+              <label for="opentherm-in-gpio">
+                Out GPIO
+                <input type="number" inputmode="numeric" class="opentherm-out-gpio" name="opentherm[outGpio]" min="0" max="254" step="1">
+              </label>
+              <label for="opentherm-member-id-code">
+                Master MemberID code
+                <input type="number" inputmode="numeric" class="opentherm-member-id-code" name="opentherm[memberIdCode]" min="0" max="65535" step="1" required>
+              </label>
+            </div>
+  
+            <fieldset>
+              <legend>Options</legend>
+              <label for="opentherm-dhw-present">
+                <input type="checkbox" class="opentherm-dhw-present" name="opentherm[dhwPresent]" value="true">
+                DHW present
+              </label>
+              <label for="opentherm-sw-mode">
+                <input type="checkbox" class="opentherm-sw-mode" name="opentherm[summerWinterMode]" value="true">
+                Summer/winter mode
+              </label>
+              <label for="opentherm-heating-ch2-enabled">
+                <input type="checkbox" class="opentherm-heating-ch2-enabled" name="opentherm[heatingCh2Enabled]" value="true">
+                Heating CH2 always enabled
+              </label>
+              <label for="opentherm-heating-ch1-to-ch2">
+                <input type="checkbox" class="opentherm-heating-ch1-to-ch2" name="opentherm[heatingCh1ToCh2]" value="true">
+                Duplicate heating CH1 to CH2
+              </label>
+              <label for="opentherm-dhw-to-ch2">
+                <input type="checkbox" class="opentherm-dhw-to-ch2" name="opentherm[dhwToCh2]" value="true">
+                Duplicate DHW to CH2
+              </label>
+              <label for="opentherm-dhw-blocking">
+                <input type="checkbox" class="opentherm-dhw-blocking" name="opentherm[dhwBlocking]" value="true">
+                DHW blocking
+              </label>
+              <label for="opentherm-sync-modulation-with-heating">
+                <input type="checkbox" class="opentherm-sync-modulation-with-heating" name="opentherm[modulationSyncWithHeating]" value="true">
+                Sync modulation with heating
+              </label>
+              <label for="opentherm-get-min-max-temp">
+                <input type="checkbox" class="opentherm-get-min-max-temp" name="opentherm[getMinMaxTemp]" value="true">
+                Get min/max temp from boiler
+              </label>
+            </fieldset>
+  
+            <button type="submit">Save</button>
+          </form>
+        </div>
+      </details>
 
-        <div id="opentherm-settings-busy" aria-busy="true"></div>
-        <form action="/api/settings" id="opentherm-settings" class="hidden">
-          <fieldset>
-            <legend>Unit system</legend>
-            <label>
-              <input type="radio" class="opentherm-unit-system" name="opentherm[unitSystem]" value="0" />
-              Metric (celsius)
-            </label>
-            <label>
-              <input type="radio" class="opentherm-unit-system" name="opentherm[unitSystem]" value="1" />
-              Imperial (fahrenheit)
-            </label>
-          </fieldset>
+      <details>
+        <summary role="button" class="secondary">MQTT settings</summary>
+        <div>
+          <div id="mqtt-settings-busy" aria-busy="true"></div>
+          <form action="/api/settings" id="mqtt-settings" class="hidden">
+            <div class="grid">
+              <label for="mqtt-server">
+                Server
+                <input type="text" class="mqtt-server" name="mqtt[server]" maxlength="80" required>
+              </label>
+              <label for="mqtt-port">
+                Port
+                <input type="number" inputmode="numeric" class="mqtt-port" name="mqtt[port]" min="1" max="65535" step="1" required>
+              </label>
+            </div>
+  
+            <div class="grid">
+              <label for="mqtt-user">
+                User
+                <input type="text" class="mqtt-user" name="mqtt[user]" maxlength="32" required>
+              </label>
+              <label for="mqtt-password">
+                Password
+                <input type="password" class="mqtt-password" name="mqtt[password]" maxlength="32">
+              </label>
+            </div>
+  
+            <div class="grid">
+              <label for="mqtt-prefix">
+                Prefix
+                <input type="text" class="mqtt-prefix" name="mqtt[prefix]" maxlength="32" required>
+              </label>
+              <label for="mqtt-interval">
+                Publish interval <small>(sec)</small>
+                <input type="number" inputmode="numeric" class="mqtt-interval" name="mqtt[interval]" min="3" max="60" step="1" required>
+              </label>
+            </div>
+  
+            <button type="submit">Save</button>
+          </form>
+        </div>
+      </details>
 
-          <div class="grid">
-            <label for="opentherm-in-gpio">
-              In GPIO
-              <input type="number" inputmode="numeric" class="opentherm-in-gpio" name="opentherm[inGpio]" min="0" max="254" step="1">
+      <details>
+        <summary role="button" class="secondary">Outdoor sensor settings</summary>
+        <div>
+          <div id="outdoor-sensor-settings-busy" aria-busy="true"></div>
+          <form action="/api/settings" id="outdoor-sensor-settings" class="hidden">
+            <fieldset>
+              <legend>Source type</legend>
+              <label>
+                <input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="0" />
+                From boiler via OpenTherm
+              </label>
+              <label>
+                <input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="1" />
+                Manual via MQTT/API
+              </label>
+              <label>
+                <input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="2" />
+                External (DS18B20)
+              </label>
+            </fieldset>
+  
+            <label for="outdoor-sensor-gpio">
+              GPIO
+              <input type="number" inputmode="numeric" class="outdoor-sensor-gpio" name="sensors[outdoor][gpio]" min="0" max="254" step="1">
             </label>
-            <label for="opentherm-in-gpio">
-              Out GPIO
-              <input type="number" inputmode="numeric" class="opentherm-out-gpio" name="opentherm[outGpio]" min="0" max="254" step="1">
-            </label>
-            <label for="opentherm-member-id-code">
-              Master MemberID code
-              <input type="number" inputmode="numeric" class="opentherm-member-id-code" name="opentherm[memberIdCode]" min="0" max="65535" step="1" required>
-            </label>
-          </div>
-
-          <fieldset>
-            <legend>Options</legend>
-            <label for="opentherm-dhw-present">
-              <input type="checkbox" class="opentherm-dhw-present" name="opentherm[dhwPresent]" value="true">
-              DHW present
-            </label>
-            <label for="opentherm-sw-mode">
-              <input type="checkbox" class="opentherm-sw-mode" name="opentherm[summerWinterMode]" value="true">
-              Summer/winter mode
-            </label>
-            <label for="opentherm-heating-ch2-enabled">
-              <input type="checkbox" class="opentherm-heating-ch2-enabled" name="opentherm[heatingCh2Enabled]" value="true">
-              Heating CH2 always enabled
-            </label>
-            <label for="opentherm-heating-ch1-to-ch2">
-              <input type="checkbox" class="opentherm-heating-ch1-to-ch2" name="opentherm[heatingCh1ToCh2]" value="true">
-              Duplicate heating CH1 to CH2
-            </label>
-            <label for="opentherm-dhw-to-ch2">
-              <input type="checkbox" class="opentherm-dhw-to-ch2" name="opentherm[dhwToCh2]" value="true">
-              Duplicate DHW to CH2
-            </label>
-            <label for="opentherm-dhw-blocking">
-              <input type="checkbox" class="opentherm-dhw-blocking" name="opentherm[dhwBlocking]" value="true">
-              DHW blocking
-            </label>
-            <label for="opentherm-sync-modulation-with-heating">
-              <input type="checkbox" class="opentherm-sync-modulation-with-heating" name="opentherm[modulationSyncWithHeating]" value="true">
-              Sync modulation with heating
-            </label>
-            <label for="opentherm-get-min-max-temp">
-              <input type="checkbox" class="opentherm-get-min-max-temp" name="opentherm[getMinMaxTemp]" value="true">
-              Get min/max temp from boiler
-            </label>
-          </fieldset>
-
-          <button type="submit">Save</button>
-        </form>
-      </div>
-    </article>
-
-    <article>
-      <div>
-        <hgroup>
-          <h2>MQTT settings</h2>
-          <p></p>
-        </hgroup>
-
-        <div id="mqtt-settings-busy" aria-busy="true"></div>
-        <form action="/api/settings" id="mqtt-settings" class="hidden">
-          <div class="grid">
-            <label for="mqtt-server">
-              Server
-              <input type="text" class="mqtt-server" name="mqtt[server]" maxlength="80" required>
-            </label>
-            <label for="mqtt-port">
-              Port
-              <input type="number" inputmode="numeric" class="mqtt-port" name="mqtt[port]" min="1" max="65535" step="1" required>
-            </label>
-          </div>
-
-          <div class="grid">
-            <label for="mqtt-user">
-              User
-              <input type="text" class="mqtt-user" name="mqtt[user]" maxlength="32" required>
-            </label>
-            <label for="mqtt-password">
-              Password
-              <input type="password" class="mqtt-password" name="mqtt[password]" maxlength="32">
-            </label>
-          </div>
-
-          <div class="grid">
-            <label for="mqtt-prefix">
-              Prefix
-              <input type="text" class="mqtt-prefix" name="mqtt[prefix]" maxlength="32" required>
-            </label>
-            <label for="mqtt-interval">
-              Publish interval <small>(sec)</small>
-              <input type="number" inputmode="numeric" class="mqtt-interval" name="mqtt[interval]" min="3" max="60" step="1" required>
-            </label>
-          </div>
-
-          <button type="submit">Save</button>
-        </form>
-      </div>
-    </article>
-
-    <article>
-      <div>
-        <hgroup>
-          <h2>Outdoor sensor settings</h2>
-          <p></p>
-        </hgroup>
-
-        <div id="outdoor-sensor-settings-busy" aria-busy="true"></div>
-        <form action="/api/settings" id="outdoor-sensor-settings" class="hidden">
-          <fieldset>
-            <legend>Source type</legend>
-            <label>
-              <input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="0" />
-              From boiler via OpenTherm
-            </label>
-            <label>
-              <input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="1" />
-              Manual via MQTT/API
-            </label>
-            <label>
-              <input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="2" />
-              External (DS18B20)
-            </label>
-          </fieldset>
-
-          <label for="outdoor-sensor-gpio">
-            GPIO
-            <input type="number" inputmode="numeric" class="outdoor-sensor-gpio" name="sensors[outdoor][gpio]" min="0" max="254" step="1">
-          </label>
-          <label for="outdoor-sensor-offset">
-            Temp offset (calibration)
-            <input type="number" inputmode="numeric" class="outdoor-sensor-offset" name="sensors[outdoor][offset]" min="-20" max="20" step="0.01" required>
-          </label>
-
-          <button type="submit">Save</button>
-        </form>
-      </div>
-    </article>
-
-    <article>
-      <div>
-        <hgroup>
-          <h2>Indoor sensor settings</h2>
-          <p></p>
-        </hgroup>
-
-        <div id="indoor-sensor-settings-busy" aria-busy="true"></div>
-        <form action="/api/settings" id="indoor-sensor-settings" class="hidden">
-          <fieldset>
-            <legend>Source type</legend>
-            <label>
-              <input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="1" />
-              Manual via MQTT/API
-            </label>
-            <label>
-              <input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="2" />
-              External (DS18B20)
-            </label>
-            <label>
-              <input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="3" />
-              BLE device <i>(ONLY for some ESP32 which support BLE)</i>
-            </label>
-          </fieldset>
-
-          <label for="indoor-sensor-gpio">
-            GPIO
-            <input type="number" inputmode="numeric" class="indoor-sensor-gpio" name="sensors[indoor][gpio]" min="0" max="254" step="1">
-          </label>
-
-          <div class="grid">
-            <label for="indoor-sensor-offset">
+            <label for="outdoor-sensor-offset">
               Temp offset (calibration)
-              <input type="number" inputmode="numeric" class="indoor-sensor-offset" name="sensors[indoor][offset]" min="-20" max="20" step="0.01" required>
+              <input type="number" inputmode="numeric" class="outdoor-sensor-offset" name="sensors[outdoor][offset]" min="-20" max="20" step="0.01" required>
             </label>
-            <label for="indoor-sensor-ble-addresss">
-              BLE addresss
-              <input type="text" class="indoor-sensor-ble-addresss" name="sensors[indoor][bleAddresss]" pattern="([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}">
-              <small>ONLY for some ESP32 which support BLE</small>
+  
+            <button type="submit">Save</button>
+          </form>
+        </div>
+      </details>
+
+      <details>
+        <summary role="button" class="secondary">Indoor sensor settings</summary>
+        <div>
+          <div id="indoor-sensor-settings-busy" aria-busy="true"></div>
+          <form action="/api/settings" id="indoor-sensor-settings" class="hidden">
+            <fieldset>
+              <legend>Source type</legend>
+              <label>
+                <input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="1" />
+                Manual via MQTT/API
+              </label>
+              <label>
+                <input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="2" />
+                External (DS18B20)
+              </label>
+              <label>
+                <input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="3" />
+                BLE device <i>(ONLY for some ESP32 which support BLE)</i>
+              </label>
+            </fieldset>
+  
+            <label for="indoor-sensor-gpio">
+              GPIO
+              <input type="number" inputmode="numeric" class="indoor-sensor-gpio" name="sensors[indoor][gpio]" min="0" max="254" step="1">
             </label>
-          </div>
+  
+            <div class="grid">
+              <label for="indoor-sensor-offset">
+                Temp offset (calibration)
+                <input type="number" inputmode="numeric" class="indoor-sensor-offset" name="sensors[indoor][offset]" min="-20" max="20" step="0.01" required>
+              </label>
+              <label for="indoor-sensor-ble-addresss">
+                BLE addresss
+                <input type="text" class="indoor-sensor-ble-addresss" name="sensors[indoor][bleAddresss]" pattern="([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}">
+                <small>ONLY for some ESP32 which support BLE</small>
+              </label>
+            </div>
+  
+            <button type="submit">Save</button>
+          </form>
+        </div>
+      </details>
 
-          <button type="submit">Save</button>
-        </form>
-      </div>
-    </article>
-
-    <article>
-      <div>
-        <hgroup>
-          <h2>External pump settings</h2>
-          <p></p>
-        </hgroup>
-
-        <div id="extpump-settings-busy" aria-busy="true"></div>
-        <form action="/api/settings" id="extpump-settings" class="hidden">
-          <label for="extpump-use">
-            <input type="checkbox" class="extpump-use" name="externalPump[use]" value="true">
-            Use external pump
-          </label>
-          <br>
-
-          <div class="grid">
-            <label for="extpump-gpio">
-              Relay GPIO
-              <input type="number" inputmode="numeric" class="extpump-gpio" name="externalPump[gpio]" min="0" max="254" step="1">
+      <details>
+        <summary role="button" class="secondary">External pump settings</summary>
+        <div>
+          <div id="extpump-settings-busy" aria-busy="true"></div>
+          <form action="/api/settings" id="extpump-settings" class="hidden">
+            <label for="extpump-use">
+              <input type="checkbox" class="extpump-use" name="externalPump[use]" value="true">
+              Use external pump
             </label>
-            <label for="extpump-pc-time">
-              Post circulation time <small>(min)</small>
-              <input type="number" inputmode="numeric" class="extpump-pc-time" name="externalPump[postCirculationTime]" min="1" max="120" step="1" required>
-            </label>
-          </div>
-
-          <div class="grid">
-            <label for="extpump-as-interval">
-              Anti stuck interval <small>(days)</small>
-              <input type="number" inputmode="numeric" class="extpump-as-interval" name="externalPump[antiStuckInterval]" min="1" max="366" step="1" required>
-            </label>
-            <label for="extpump-as-time">
-              Anti stuck time <small>(min)</small>
-              <input type="number" inputmode="numeric" class="extpump-as-time" name="externalPump[antiStuckTime]" min="1" max="20" step="1" required>
-            </label>
-          </div>
-
-          <button type="submit">Save</button>
-        </form>
-      </div>
-    </article>
-
-    <article>
-      <div>
-        <hgroup>
-          <h2>System settings</h2>
-          <p></p>
-        </hgroup>
-
-        <div id="system-settings-busy" aria-busy="true"></div>
-        <form action="/api/settings" id="system-settings" class="hidden">
-          <fieldset>
-            <legend>Unit system</legend>
-            <label>
-              <input type="radio" class="system-unit-system" name="system[unitSystem]" value="0" />
-              Metric (celsius)
-            </label>
-            <label>
-              <input type="radio" class="system-unit-system" name="system[unitSystem]" value="1" />
-              Imperial (fahrenheit)
-            </label>
-          </fieldset>
-
-          <fieldset>
-            <label for="system-debug">
-              <input type="checkbox" class="system-debug" name="system[debug]" value="true">
-              Debug mode
-            </label>
-            <label for="system-use-serial">
-              <input type="checkbox" class="system-use-serial" name="system[useSerial]" value="true">
-              Enable serial port
-            </label>
-            <label for="system-use-telnet">
-              <input type="checkbox" class="system-use-telnet" name="system[useTelnet]" value="true">
-              Enable telnet
-            </label>
-          </fieldset>
-
-          <fieldset>
-            <mark>After changing this settings, the ESP must be restarted for the changes to take effect.</mark>
-          </fieldset>
-
-          <button type="submit">Save</button>
-        </form>
-      </div>
+            <br>
+  
+            <div class="grid">
+              <label for="extpump-gpio">
+                Relay GPIO
+                <input type="number" inputmode="numeric" class="extpump-gpio" name="externalPump[gpio]" min="0" max="254" step="1">
+              </label>
+              <label for="extpump-pc-time">
+                Post circulation time <small>(min)</small>
+                <input type="number" inputmode="numeric" class="extpump-pc-time" name="externalPump[postCirculationTime]" min="1" max="120" step="1" required>
+              </label>
+            </div>
+  
+            <div class="grid">
+              <label for="extpump-as-interval">
+                Anti stuck interval <small>(days)</small>
+                <input type="number" inputmode="numeric" class="extpump-as-interval" name="externalPump[antiStuckInterval]" min="1" max="366" step="1" required>
+              </label>
+              <label for="extpump-as-time">
+                Anti stuck time <small>(min)</small>
+                <input type="number" inputmode="numeric" class="extpump-as-time" name="externalPump[antiStuckTime]" min="1" max="20" step="1" required>
+              </label>
+            </div>
+  
+            <button type="submit">Save</button>
+          </form>
+        </div>
+      </details>
     </article>
   </main>
 
diff --git a/data/static/app.css.gz b/data/static/app.css.gz
index fc5510130521d1175f4057330b15b2f1a5ae777c..68d7c603b93656e53d454e78c418031653e20722 100644
GIT binary patch
literal 663
zcmV;I0%-joiwFP!000001GQD{ZrU&u{S6ZD;Awwgnj@g4tx{>~JM0M@`;u5VzL9O{
z$Fz6fjT1s>X;eBYArQ{F$LHLyJd~icVAE1t{-{+bQntFish(!+&t%M)a6wB0%^$`%
zue3y-8I&9DD<QSb`3`E3Fe#%iIo%02ZE-DP#(uDQa=V({53m&I^b6YXVV=K}F?}ZE
zhqn%HZ|*+n;KZdL75!f5fX>Byd42g*FOua&QhneVvar0He}#n$IXD=Yj7N#AL$n1~
zD;$kV@pP!foNN$wG~{)4^#zl$xX@%Q`jc_4+oaG+fsII|ePzUR$}C!7-*j1_3&Mu`
z7F&Q&;C@cVC9%`b8Zoq&R6?m*a=?miaZnzIch55n0n1a6ctbC@B-`awf_}sv*1I^s
zQ{ckr+)|Ff((xXYZ7I+uek&z-AHkWBo7~~nDlXBWJDS}!x{`x|l34hTC>7o9$Z&(L
zGd$`aoEzL1wHDfdI#ZLj|E21^@Te=e#6oyPw@C}!wYl9l<&eV4X)4q+T_v|Zs*zjg
zYfy!{UydYqAi{4dlrR@5M#E|eD9j-3ceuV=&F5W6Ce){73??vX6VY%+L`v_h<*IIU
zj}&))UE87QdVgpn5`#G&PqDU!mO!&pj_6+R5-WC`pl{dLjPbteR$$yE_2OC1*bvKM
zeML8W(*3k%!b2^veinrmpz|Ue<-d2{box-SBr4#WOucE?{*XAK^wy^*Y&B1sMLIy<
zF*3F$bNsPYouN^&+eh)(>ldI3C09+2TJTzw+C0B%vF@CgXtB;7bZtdRWkxfR7Q#<|
xF{O90(6dt;vg>dKwEm4}5#L|Wgn73MPggDSRSsUUB&)Xd{sEBm6ca`Y006YLN*n+H

literal 581
zcmV-L0=oSliwFP!000001FcliZrd;nd`^J;gND7t!(^oGG88T_>>u_8w4~TVB+-y$
zC+X0CpCmh;v!({p?#ZxpJRW%z3ybK<@6~caX(JiZQX$(@*8r2IqBUCijK+g12m{5|
zcUEZfh1}=&+wAGBs7_cf+0~fU@@2JLEq`jkC6Kk2h8`sMbwTd#A2-c0OImUkb4nv@
z`dw%^j<C%pz+&o`8LsWa_jhsSwd7owgyhmS3Qh$vXaxBrb%WM}@lOM`7Qlu5x?1YM
z9zMI!$stJtoX19ZY(kb;{zdqBU!wP@uR&4<h;39NQEISNC~z8ahD{QCar6|FtW4;=
zFyZ(ND%%ifa@R5@oJ-&m*uJvZ8crE1v<2zFt_MeVXf+i|=)gj|K*>XH8w&2R$^7ZT
zt-(`KJCI878#PJuAysdMCtcp=M)(8TeNkgK^!7aJa|#<PgHflDinT7OVXbu$)S#T&
zkyloL{}qe^^<T{BSxo?fnx*|LzCCU?n=zyW{w^7_4a|o|^qdJ%kWE+sanK!xxZ8al
z9?dxWb59~ySmEU>mPUmo&~K^>y0oJvY7BHVKwq!3jL@m-L15Y?S=?_KnPd68N>epw
z((`LA!HFm^-X)>6kX7w3`ae1ECw<N=hFs8n$zKiZ^pRNLvUSCkvih5dC1i$tWF%x4
zilc`?b%~0nX<wvcC!a-dD1YcZ8o)cyQl0)8vGJU0G#I-l#<2=bB}x(~YH;fxgv%}&
Ton70IX~O>i{*}v7-v$5xCi5Ag

diff --git a/data/static/app.js.gz b/data/static/app.js.gz
index 1b62381334f26587e71d80d4f542274d0c392336..2b6f3282685b63b8b848b848a7dfd89337541c1c 100644
GIT binary patch
delta 4140
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

delta 4139
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

diff --git a/src_data/static/app.css b/src_data/static/app.css
index 885d43a..546ad75 100644
--- a/src_data/static/app.css
+++ b/src_data/static/app.css
@@ -1,15 +1,41 @@
-:root {
-	--pico-block-spacing-horizontal: calc(1rem * 2.25);
-	--pico-block-spacing-vertical: calc(1rem * 2.25)
+@media (min-width: 576px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 0.75);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 0.75);
+  }
+}
+
+@media (min-width: 768px) {
+  article {
+    --pico-block-spacing-vertical: var(--pico-spacing);
+    --pico-block-spacing-horizontal: var(--pico-spacing);
+  }
+}
+
+@media (min-width: 1024px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
+  }
 }
 
 @media (min-width: 1280px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5);
+  }
+
 	.container {
 		max-width: 1000px;
 	}
 }
 
 @media (min-width: 1536px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75);
+  }
+
 	.container {
 		max-width: 1000px;
 	}
@@ -82,4 +108,12 @@ tr.network:hover {
 
 nav li a:has(> div.logo) {
 	margin-bottom: 0;
+}
+
+details > div {
+	padding: 0 var(--pico-form-element-spacing-horizontal);
+}
+
+pre {
+	padding: 0.5rem;
 }
\ No newline at end of file
diff --git a/src_data/static/app.js b/src_data/static/app.js
index 0af1818..2e4285b 100644
--- a/src_data/static/app.js
+++ b/src_data/static/app.js
@@ -593,7 +593,7 @@ async function loadVars() {
   setValue('.slave-version', result.parameters.slaveVersion);
   setValue('.slave-ot-version', result.parameters.slaveOtVersion);
 
-  setBusy('.ot-busy', '.ot-table', false);
+  setBusy('.vars-busy', '.vars-table', false);
 
   setValue('.temp-unit', tempUnitStr);
   setValue('.pressure-unit', pressureUnitStr);