From fc8d2565f45fe745a4aba8c8477a7d48d12d0ba7 Mon Sep 17 00:00:00 2001
From: Timo Schilling <timo@schilling.io>
Date: Fri, 27 Jan 2023 13:09:32 +0100
Subject: [PATCH] overhaul UI

---
 fs_src/index.html | 1036 +++++++++++++++++++++++++--------------------
 fs_src/script.js  |   92 +++-
 fs_src/style.css  |   17 +-
 3 files changed, 646 insertions(+), 499 deletions(-)

diff --git a/fs_src/index.html b/fs_src/index.html
index eece9c02..7909928a 100644
--- a/fs_src/index.html
+++ b/fs_src/index.html
@@ -135,22 +135,57 @@ <h1>HomeKit Settings</h1>
       </div>
     </div>
   </div>
+
   <div class="container" id="wifi_container" style="display: none">
     <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/WiFi-Settings"
       target="_blank">?</a>
     <h1>WiFi Settings</h1>
 
     <div class="tab_wrapper" id="wifi_container">
-      <input class="tab_radio" id="one" name="group" type="radio" checked>
-      <input class="tab_radio" id="two" name="group" type="radio">
-      <input class="tab_radio" id="three" name="group" type="radio">
+      <input class="tab_radio" type="radio" checked>
+      <input class="tab_radio" type="radio">
+      <input class="tab_radio" type="radio">
+      <input class="tab_radio" type="radio">
       <div class="tabs">
-        <label class="tab" id="tab1" for="one">WiFi 1</label>
-        <label class="tab" id="tab2" for="two">WiFi 2</label>
-        <label class="tab" id="tab3" for="three">AP</label>
+        <label class="tab">Status</label>
+        <label class="tab">WiFi 1</label>
+        <label class="tab">WiFi 2</label>
+        <label class="tab">AP</label>
       </div>
       <div class="panels">
-        <div class="panel" id="panel1">
+        <div class="panel">
+          <div class="form">
+            <div class="form-control" id="wifi_conn_ssid_container">
+              <label>Network:</label>
+              <span id="wifi_conn_ssid"></span>
+            </div>
+            <div class="form-control" id="wifi_status_container">
+              <label>Status:</label>
+              <span id="wifi_status"></span>
+            </div>
+            <div class="form-control" id="wifi_conn_ip_container">
+              <label>IP:</label>
+              <span id="wifi_conn_ip"></span>
+            </div>
+            <div class="form-control" id="wifi_conn_rssi_container">
+              <label>RSSI:</label>
+              <span id="wifi_conn_rssi"></span>
+            </div>
+            <div class="form-control" id="mac_address_container">
+              <label>MAC:</label>
+              <span id="mac_address"></span>
+            </div>
+            <div class="form-control">
+              <label>Power saving:</label>
+              <select id="wifi_sta_ps_mode">
+                <option id="wifi_sta_ps_mode_0" value="0">Disabled</option>
+                <option id="wifi_sta_ps_mode_1" value="1">1</option>
+                <option id="wifi_sta_ps_mode_2" value="2">2</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="panel">
           <div class="form">
             <div class="form-control">
               <label>Enable:</label>
@@ -167,6 +202,10 @@ <h1>WiFi Settings</h1>
               <label>Password:</label>
               <input type="password" id="wifi_pass" placeholder="(empty)">
             </div>
+            <div class="form-control">
+              <label>Namesever:</label>
+              <input type="text" id="wifi_nameserver" placeholder="(optional)">
+            </div>
             <div class="form-control">
               <label>Static IP:</label>
               <label class="switch">
@@ -190,7 +229,7 @@ <h1>WiFi Settings</h1>
             </div>
           </div>
         </div>
-        <div class="panel" id="panel2">
+        <div class="panel">
           <div class="form">
             <div class="form-control">
               <label>Enable:</label>
@@ -207,6 +246,10 @@ <h1>WiFi Settings</h1>
               <label>Password:</label>
               <input type="password" id="wifi1_pass" placeholder="(empty)">
             </div>
+            <div class="form-control">
+              <label>Namesever:</label>
+              <input type="text" id="wifi1_nameserver" placeholder="(optional)">
+            </div>
             <div class="form-control">
               <label>Static IP:</label>
               <label class="switch">
@@ -230,7 +273,7 @@ <h1>WiFi Settings</h1>
             </div>
           </div>
         </div>
-        <div class="panel" id="panel3">
+        <div class="panel">
           <div class="form">
             <div class="form-control">
               <label>Enable permanently:</label>
@@ -250,41 +293,13 @@ <h1>WiFi Settings</h1>
           </div>
         </div>
       </div>
-    </div>
-    <div class="form">
-      <div>
+      <div class="form">
         <div class="form-control">
-          <label>Power saving:</label>
-          <select id="wifi_sta_ps_mode">
-            <option id="wifi_sta_ps_mode_0" value="0">Disabled</option>
-            <option id="wifi_sta_ps_mode_1" value="1">1</option>
-            <option id="wifi_sta_ps_mode_2" value="2">2</option>
-          </select>
-        </div>
-        <div class="form-control" id="wifi_status_container">
-          <label>Status:</label>
-          <span id="wifi_status"></span>
-        </div>
-        <div class="form-control" id="wifi_conn_ssid_container">
-          <label>Network:</label>
-          <span id="wifi_conn_ssid"></span>
-        </div>
-        <div class="form-control" id="wifi_conn_ip_container">
-          <label>IP:</label>
-          <span id="wifi_conn_ip"></span>
-        </div>
-        <div class="form-control" id="wifi_conn_rssi_container">
-          <label>RSSI:</label>
-          <span id="wifi_conn_rssi"></span>
-        </div>
-        <div class="form-control" id="mac_address_container">
-          <label>MAC:</label>
-          <span id="mac_address"></span>
-        </div>
-        <div class="button-container">
-          <button id="wifi_save_btn">
-            <label><span id="wifi_spinner"></span>Save</label>
-          </button>
+          <div class="button-container">
+            <button id="wifi_save_btn">
+              <label><span id="wifi_spinner"></span>Save</label>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -320,7 +335,6 @@ <h1>Security Settings</h1>
     </div>
   </div>
 
-
   <div class="container" id="sys_container" style="display: none">
     <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/System-Settings"
       target="_blank">?</a>
@@ -366,47 +380,73 @@ <h1>System</h1>
   <div class="container" id="firmware_container" style="display: none">
     <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Firmware" target="_blank">?</a>
     <h1>Firmware</h1>
-    <div class="form">
-      <div>
-        <div class="form-control">
-          <label>Version:</label><span id="version"></span>
-        </div>
-        <div class="form-wrap-control">
-          <label>Build:</label><span id="fw_build"></span>
-        </div>
-        <div class="form-control" id="update_container" style="display: none">
-          <label>Update: </label>
-          <button id="update_btn">
-            <label>
-              <span id="update_btn_spinner"></span>
-              <span id="update_btn_text">Check</span>
-            </label>
-          </button>
-          <span id="update_status"></span>
-        </div>
-        <div class="form-control" id="revert_to_stock_container" style="display: none">
-          <label>Revert to Stock:</label>
-          <button id="revert_btn">
-            <label><span id="revert_btn_spinner"></span>Revert</label>
-          </button>
-          <div class="form-control" id="revert_status">
-            <span id="revert_status"></span>
+    <div class="tab_wrapper" id="wifi_container">
+      <input class="tab_radio" type="radio" checked>
+      <input class="tab_radio" type="radio">
+      <input class="tab_radio" type="radio">
+      <input class="tab_radio" type="radio">
+      <div class="tabs">
+        <label class="tab">Info</label>
+        <label class="tab">Update</label>
+        <label class="tab">Revert</label>
+        <label class="tab">Upload</label>
+      </div>
+      <div class="panels">
+        <div class="panel">
+          <div class="form">
+            <div class="form-control">
+              <label>Version:</label><span id="version"></span>
+            </div>
+            <div class="form-wrap-control">
+              <label>Build:</label><span id="fw_build"></span>
+            </div>
           </div>
-          <div id="revert_msg" style="text-align: center; display: none">Please consider reporting missing features
-            <a href="https://github.com/mongoose-os-apps/shelly-homekit/issues">on GitHub</a>.
+        </div>
+        <div class="panel">
+          <div class="form">
+            <div class="form-control" id="update_container" style="display: none">
+              <label>Update: </label>
+              <button id="update_btn">
+                <label>
+                  <span id="update_btn_spinner"></span>
+                  <span id="update_btn_text">Check</span>
+                </label>
+              </button>
+              <span id="update_status"></span>
+            </div>
           </div>
         </div>
-        <form style="display: inline">
-          <div class="form-control">
-            <label>Update from file:</label>
-            <input type="file" id="fw_select_file" name="file" accept=".zip" style="width: 200px;">
+        <div class="panel">
+          <div class="form">
+            <div class="form-control" id="revert_to_stock_container" style="display: none">
+              <label>Revert to Stock:</label>
+              <button id="revert_btn">
+                <label><span id="revert_btn_spinner"></span>Revert</label>
+              </button>
+              <div class="form-control" id="revert_status">
+                <span id="revert_status"></span>
+              </div>
+              <div id="revert_msg" style="text-align: center; display: none">Please consider reporting missing features
+                <a href="https://github.com/mongoose-os-apps/shelly-homekit/issues">on GitHub</a>.
+              </div>
+            </div>
           </div>
-          <div class="button-container">
-            <button id="fw_upload_btn">
-              <label><span id="fw_spinner"></span>Upload</label>
-            </button>
+        </div>
+        <div class="panel">
+          <div class="form">
+            <form style="display: inline">
+              <div class="form-control">
+                <label>Update from file:</label>
+                <input type="file" id="fw_select_file" name="file" accept=".zip" style="width: 200px;">
+              </div>
+              <div class="button-container">
+                <button id="fw_upload_btn">
+                  <label><span id="fw_spinner"></span>Upload</label>
+                </button>
+              </div>
+            </form>
           </div>
-        </form>
+        </div>
       </div>
     </div>
   </div>
@@ -434,435 +474,491 @@ <h1>Firmware</h1>
     <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Switch-Settings"
       target="_blank">?</a>
     <h1 id="head">Switch</h1>
+    <div class="tab_wrapper">
+      <input class="tab_radio" type="radio" checked>
+      <input class="tab_radio" type="radio">
+      <div class="tabs">
+        <label class="tab">State</label>
+        <label class="tab">Settings</label>
+      </div>
+      <div class="panels">
+        <div class="panel">
+          <div class="form">
+            <div class="form-control" id="state_container">
+              <label for="state">Status:</label>
+              <label class="switch">
+                <input type="checkbox" id="state">
+                <span class="slider round"></span>
+              </label>
+            </div>
+            <div class="form-control" id="power_stats_container" style="display: none;">
+              <label for="power_stats">Power:</label>
+              <span id="power_stats"></span>
+            </div>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="form">
+            <div class="form-control">
+              <label for="name">Name:</label>
+              <input type="text" id="name">
+            </div>
+            <div class="form-control">
+              <label>HAP Service Type:</label>
+              <select id="svc_type">
+                <option id="svc_type_-1" value="-1">Disabled</option>
+                <option id="svc_type_0" value="0">Switch</option>
+                <option id="svc_type_1" value="1">Outlet</option>
+                <option id="svc_type_2" value="2">Lock</option>
+                <option id="svc_type_3" value="3">Valve</option>
+              </select>
+            </div>
+            <div class="form-control" id="hk_state_inverted_container" style="display: none">
+              <label for="hk_state_inverted">HAP State Inverted:</label>
+              <label class="switch">
+                <input type="checkbox" id="hk_state_inverted">
+                <span class="slider round"></span>
+              </label>
+            </div>
+            <div class="form-control" id="valve_type_container" style="display: none">
+              <label id="valve_type_label"></label>
+              <select id="valve_type">
+                <option id="valve_type_0" value="0">Generic Valve</option>
+                <option id="valve_type_1" value="1">Irrigation</option>
+              </select>
+            </div>
+            <div class="form-control" id="in_mode_container">
+              <label for="in_mode">Input Mode:</label>
+              <select id="in_mode">
+                <option id="in_mode_0" value="0">Momentary</option>
+                <option id="in_mode_1" value="1">Toggle</option>
+                <option id="in_mode_2" value="2">Edge</option>
+                <option id="in_mode_3" value="3">Detached</option>
+                <option id="in_mode_4" value="4">Activation</option>
+                <option id="in_mode_5" value="5">Edge (both inputs)</option>
+                <option id="in_mode_6" value="6">Activation (both inputs)</option>
+              </select>
+            </div>
+            <div class="form-control" id="in_inverted_container" style="display: none">
+              <label for="in_inverted">Inverted Input:</label>
+              <label class="switch">
+                <input type="checkbox" id="in_inverted">
+                <span class="slider round"></span>
+              </label>
+            </div>
+            <div class="form-control">
+              <label for="initial">Initial state:</label>
+              <select id="initial">
+                <option id="initial_0" value="0">Off</option>
+                <option id="initial_1" value="1">On</option>
+                <option id="initial_2" value="2">Last</option>
+                <option id="initial_3" value="3">Input</option>
+              </select>
+            </div>
+            <div class="form-control">
+              <label for="out_inverted">Inverted Output:</label>
+              <label class="switch">
+                <input type="checkbox" id="out_inverted">
+                <span class="slider round"></span>
+              </label>
+            </div>
+            <div class="form-control">
+              <label for="auto_off">Auto Off:</label>
+              <label class="switch">
+                <input type="checkbox" id="auto_off">
+                <span class="slider round"></span>
+              </label>
+            </div>
+            <div class="form-control" id="auto_off_delay_container">
+              <label for="auto_off_delay">Auto Off Delay:</label>
+              <input type="text" id="auto_off_delay" placeholder="D:HH:MM:SS.sss" required
+                pattern="[0-9]+:(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\.[0-9]{3}">
+            </div>
+            <div class="form-control" id="state_led_en_container">
+              <label for="state_led_en">State LED:</label>
+              <label class="switch">
+                <input type="checkbox" id="state_led_en">
+                <span class="slider round"></span>
+              </label>
+            </div>
+            <div class="button-container">
+              <button id="save_btn">
+                <label><span id="save_spinner"></span>Save</label>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container" id="ssw_template" style="display: none">
+    <a class="helpbadge"
+      href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Input-Switch-Settings#stateless-switch"
+      target="_blank">?</a>
+    <h1 id="head">Input</h1>
     <div class="form">
       <div>
-        <div class="form-control" id="state_container">
-          <label for="state">Status:</label>
+        <div class="form-control">
+          <label>HAP Type:</label>
+          <select id="type">
+            <option id="type_6" value="6">Disabled</option>
+            <option id="type_3" value="3">Stateless Switch</option>
+            <option id="type_7" value="7">Motion Sensor</option>
+            <option id="type_8" value="8">Occupancy Sensor</option>
+            <option id="type_9" value="9">Contact Sensor</option>
+            <option id="type_10" value="10">Doorbell</option>
+            <option id="type_13" value="13">Leak Sensor</option>
+            <option id="type_14" value="14">Smoke Sensor</option>
+            <option id="type_15" value="15">Carbon Monoxide Sensor</option>
+            <option id="type_16" value="16">Carbon Dioxide Sensor</option>
+          </select>
+        </div>
+        <div class="form-control">
+          <label>Name:</label>
+          <input type="text" id="name">
+        </div>
+        <div class="form-control">
+          <label>Input Mode:</label>
+          <select id="in_mode">
+            <option id="in_mode_0" value="0">Momentary</option>
+            <option id="in_mode_1" value="1">Toggle, on = off = single press</option>
+            <option id="in_mode_2" value="2">Toggle, on = single, off = double</option>
+          </select>
+        </div>
+        <div class="form-control">
+          <label for="inverted">Inverted Input:</label>
           <label class="switch">
-            <input type="checkbox" id="state">
+            <input type="checkbox" id="inverted">
             <span class="slider round"></span>
           </label>
         </div>
-        <div class="form-control" id="power_stats_container" style="display: none;">
-          <label for="power_stats">Power:</label>
-          <span id="power_stats"></span>
+        <div class="form-control">
+          <label>Last Event:</label>
+          <span id="last_event"></span>
         </div>
-        <div>
-          <div class="form-control">
-            <label for="name">Name:</label>
-            <input type="text" id="name">
-          </div>
-          <div class="form-control">
-            <label>HAP Service Type:</label>
-            <select id="svc_type">
-              <option id="svc_type_-1" value="-1">Disabled</option>
-              <option id="svc_type_0" value="0">Switch</option>
-              <option id="svc_type_1" value="1">Outlet</option>
-              <option id="svc_type_2" value="2">Lock</option>
-              <option id="svc_type_3" value="3">Valve</option>
-            </select>
-          </div>
-          <div class="form-control" id="valve_type_container" style="display: none">
-            <label id="valve_type_label"></label>
-            <select id="valve_type">
-              <option id="valve_type_0" value="0">Generic Valve</option>
-              <option id="valve_type_1" value="1">Irrigation</option>
-            </select>
-          </div>
-          <div class="form-control" id="in_mode_container">
-            <label for="in_mode">Input Mode:</label>
-            <select id="in_mode">
-              <option id="in_mode_0" value="0">Momentary</option>
-              <option id="in_mode_1" value="1">Toggle</option>
-              <option id="in_mode_2" value="2">Edge</option>
-              <option id="in_mode_3" value="3">Detached</option>
-              <option id="in_mode_4" value="4">Activation</option>
-              <option id="in_mode_5" value="5">Edge (both inputs)</option>
-              <option id="in_mode_6" value="6">Activation (both inputs)</option>
-            </select>
-          </div>
-          <div class="form-control" id="in_inverted_container" style="display: none">
-            <label for="in_inverted">Inverted Input:</label>
-            <label class="switch">
-              <input type="checkbox" id="in_inverted">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="form-control">
-            <label for="initial">Initial state:</label>
-            <select id="initial">
-              <option id="initial_0" value="0">Off</option>
-              <option id="initial_1" value="1">On</option>
-              <option id="initial_2" value="2">Last</option>
-              <option id="initial_3" value="3">Input</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label for="out_inverted">Inverted Output:</label>
-            <label class="switch">
-              <input type="checkbox" id="out_inverted">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="form-control">
-            <label for="auto_off">Auto Off:</label>
-            <label class="switch">
-              <input type="checkbox" id="auto_off">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="form-control" id="auto_off_delay_container">
-            <label for="auto_off_delay">Auto Off Delay:</label>
-            <input type="text" id="auto_off_delay" placeholder="D:HH:MM:SS.sss" required
-              pattern="[0-9]+:(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\.[0-9]{3}">
-          </div>
-          <div class="form-control" id="state_led_en_container">
-            <label for="state_led_en">State LED:</label>
-            <label class="switch">
-              <input type="checkbox" id="state_led_en">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="button-container">
-            <button id="save_btn">
-              <label><span id="save_spinner"></span>Save</label>
-            </button>
-          </div>
+        <div class="button-container">
+          <button id="save_btn">
+            <label><span id="save_spinner"></span>Save</label>
+          </button>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="container" id="ssw_template" style="display: none">
-      <a class="helpbadge"
-        href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Input-Switch-Settings#stateless-switch"
-        target="_blank">?</a>
-      <h1 id="head">Input</h1>
-      <div class="form">
-        <div>
-          <div class="form-control">
-            <label>HAP Type:</label>
-            <select id="type">
-              <option id="type_6" value="6">Disabled</option>
-              <option id="type_3" value="3">Stateless Switch</option>
-              <option id="type_7" value="7">Motion Sensor</option>
-              <option id="type_8" value="8">Occupancy Sensor</option>
-              <option id="type_9" value="9">Contact Sensor</option>
-              <option id="type_10" value="10">Doorbell</option>
-              <option id="type_13" value="13">Leak Sensor</option>
-              <option id="type_14" value="14">Smoke Sensor</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label>Name:</label>
-            <input type="text" id="name">
-          </div>
-          <div class="form-control">
-            <label>Input Mode:</label>
-            <select id="in_mode">
-              <option id="in_mode_0" value="0">Momentary</option>
-              <option id="in_mode_1" value="1">Toggle, on = off = single press</option>
-              <option id="in_mode_2" value="2">Toggle, on = single, off = double</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label for="inverted">Inverted Input:</label>
-            <label class="switch">
-              <input type="checkbox" id="inverted">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="form-control">
-            <label>Last Event:</label>
-            <span id="last_event"></span>
-          </div>
-          <div class="button-container">
-            <button id="save_btn">
-              <label><span id="save_spinner"></span>Save</label>
-            </button>
-          </div>
+  <div class="container" id="di_template" style="display: none">
+    <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Input-Switch-Settings"
+      target="_blank">?</a>
+    <h1 id="head">Disabled Input</h1>
+    <div class="form">
+      <div>
+        <div class="form-control">
+          <label>HAP Type:</label>
+          <select id="type">
+            <option id="type_6" value="6">Disabled</option>
+            <option id="type_3" value="3">Stateless Switch</option>
+            <option id="type_7" value="7">Motion Sensor</option>
+            <option id="type_8" value="8">Occupancy Sensor</option>
+            <option id="type_9" value="9">Contact Sensor</option>
+            <option id="type_10" value="10">Doorbell</option>
+            <option id="type_13" value="13">Leak Sensor</option>
+            <option id="type_14" value="14">Smoke Sensor</option>
+            <option id="type_15" value="15">Carbon Monoxide Sensor</option>
+            <option id="type_16" value="16">Carbon Dioxide Sensor</option>
+          </select>
         </div>
-      </div>
-    </div>
-
-    <div class="container" id="di_template" style="display: none">
-      <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Input-Switch-Settings"
-        target="_blank">?</a>
-      <h1 id="head">Disabled Input</h1>
-      <div class="form">
-        <div>
-          <div class="form-control">
-            <label>HAP Type:</label>
-            <select id="type">
-              <option id="type_6" value="6">Disabled</option>
-              <option id="type_3" value="3">Stateless Switch</option>
-              <option id="type_7" value="7">Motion Sensor</option>
-              <option id="type_8" value="8">Occupancy Sensor</option>
-              <option id="type_9" value="9">Contact Sensor</option>
-              <option id="type_10" value="10">Doorbell</option>
-              <option id="type_13" value="13">Leak Sensor</option>
-              <option id="type_14" value="14">Smoke Sensor</option>
-            </select>
-          </div>
-          <div class="button-container">
-            <button id="save_btn">
-              <label><span id="save_spinner"></span>Save</label>
-            </button>
-          </div>
+        <div class="button-container">
+          <button id="save_btn">
+            <label><span id="save_spinner"></span>Save</label>
+          </button>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="container" id="sensor_template" style="display: none">
-      <a class="helpbadge"
-        href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Input-Switch-Settings#motion-sensor--occupancy-sensor--contact-sensor"
-        target="_blank">?</a>
-      <h1 id="head">Sensor</h1>
-      <div class="form">
-        <div>
-          <div class="form-control">
-            <label>HAP Type:</label>
-            <select id="type">
-              <option id="type_6" value="6">Disabled</option>
-              <option id="type_3" value="3">Stateless Switch</option>
-              <option id="type_7" value="7">Motion Sensor</option>
-              <option id="type_8" value="8">Occupancy Sensor</option>
-              <option id="type_9" value="9">Contact Sensor</option>
-              <option id="type_10" value="10">Doorbell</option>
-              <option id="type_13" value="13">Leak Sensor</option>
-              <option id="type_14" value="14">Smoke Sensor</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label>Name:</label>
-            <input type="text" id="name">
-          </div>
-          <div class="form-control">
-            <label for="inverted">Inverted Input:</label>
-            <label class="switch">
-              <input type="checkbox" id="inverted">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="form-control">
-            <label>Input Mode:</label>
-            <select id="in_mode">
-              <option id="in_mode_0" value="0">Level</option>
-              <option id="in_mode_1" value="1">Pulse</option>
-            </select>
-          </div>
-          <div class="form-control" id="idle_time_container">
-            <label>Idle Time:</label>
-            <input type="text" id="idle_time" style="width: 2em; min-width: 2em"> s
-          </div>
-          <div class="form-control">
-            <label>Status:</label>
-            <span id="status"></span>
-          </div>
-          <div class="button-container">
-            <button id="save_btn">
-              <label><span id="save_spinner"></span>Save</label>
-            </button>
-          </div>
+  <div class="container" id="sensor_template" style="display: none">
+    <a class="helpbadge"
+      href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Input-Switch-Settings#motion-sensor--occupancy-sensor--contact-sensor"
+      target="_blank">?</a>
+    <h1 id="head">Sensor</h1>
+    <div class="form">
+      <div>
+        <div class="form-control">
+          <label>HAP Type:</label>
+          <select id="type">
+            <option id="type_6" value="6">Disabled</option>
+            <option id="type_3" value="3">Stateless Switch</option>
+            <option id="type_7" value="7">Motion Sensor</option>
+            <option id="type_8" value="8">Occupancy Sensor</option>
+            <option id="type_9" value="9">Contact Sensor</option>
+            <option id="type_10" value="10">Doorbell</option>
+            <option id="type_13" value="13">Leak Sensor</option>
+            <option id="type_14" value="14">Smoke Sensor</option>
+            <option id="type_15" value="15">Carbon Monoxide Sensor</option>
+            <option id="type_16" value="16">Carbon Dioxide Sensor</option>
+          </select>
+        </div>
+        <div class="form-control">
+          <label>Name:</label>
+          <input type="text" id="name">
+        </div>
+        <div class="form-control">
+          <label for="inverted">Inverted Input:</label>
+          <label class="switch">
+            <input type="checkbox" id="inverted">
+            <span class="slider round"></span>
+          </label>
+        </div>
+        <div class="form-control">
+          <label>Input Mode:</label>
+          <select id="in_mode">
+            <option id="in_mode_0" value="0">Level</option>
+            <option id="in_mode_1" value="1">Pulse</option>
+          </select>
+        </div>
+        <div class="form-control" id="idle_time_container">
+          <label>Idle Time:</label>
+          <input type="text" id="idle_time" style="width: 2em; min-width: 2em"> s
+        </div>
+        <div class="form-control">
+          <label>Status:</label>
+          <span id="status"></span>
+        </div>
+        <div class="button-container">
+          <button id="save_btn">
+            <label><span id="save_spinner"></span>Save</label>
+          </button>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="container" id="wc_template" style="display: none">
-      <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Roller-Shutter-Settings"
-        target="_blank">?</a>
-      <h1 id="head">Window</h1>
-      <div class="form">
-        <div>
-          <div class="form-control">
-            <label>Name:</label>
-            <input type="text" id="name">
-          </div>
-          <div class="form-control">
-            <label>Status:</label>
-            <span id="state"></span> pos
-            <span id="pos"></span>
-          </div>
-          <div class="button-container" id="pos_ctl">
-            <button id="open_btn">
-              <label><span id="open_spinner"></span>Open</label>
-            </button>
-            <button id="close_btn">
-              <label><span id="close_spinner"></span>Close</label>
-            </button>
-          </div>
-          <div class="form-control">
-            <label>Calibration:</label>
-            <span id="cal"></span>
-          </div>
-          <div class="form-control">
-            <label>Input Mode:</label>
-            <select id="in_mode">
-              <option id="in_mode_0" value="0">Separate - momentary</option>
-              <option id="in_mode_1" value="1">Separate - toggle</option>
-              <option id="in_mode_2" value="2">Single</option>
-              <option id="in_mode_3" value="3">Detached</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label>Swap Inputs:</label>
-            <label class="switch">
-              <input type="checkbox" id="swap_inputs">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="form-control">
-            <label>Swap Outputs:</label>
-            <label class="switch">
-              <input type="checkbox" id="swap_outputs">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="button-container" id="btns">
-            <button id="save_btn">
-              <label><span id="save_spinner"></span>Save</label>
-            </button>
-            <button id="cal_btn">
-              <label><span id="cal_spinner"></span>Calibrate</label>
-            </button>
-          </div>
+  <div class="container" id="wc_template" style="display: none">
+    <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Roller-Shutter-Settings"
+      target="_blank">?</a>
+    <h1 id="head">Window</h1>
+    <div class="form">
+      <div>
+        <div class="form-control">
+          <label>Name:</label>
+          <input type="text" id="name">
+        </div>
+        <div class="form-control">
+          <label>Status:</label>
+          <span id="state"></span> pos
+          <span id="pos"></span>
+        </div>
+        <div class="button-container" id="pos_ctl">
+          <button id="open_btn">
+            <label><span id="open_spinner"></span>Open</label>
+          </button>
+          <button id="close_btn">
+            <label><span id="close_spinner"></span>Close</label>
+          </button>
+        </div>
+        <div class="form-control">
+          <label>Calibration:</label>
+          <span id="cal"></span>
+        </div>
+        <div class="form-control">
+          <label>Input Mode:</label>
+          <select id="in_mode">
+            <option id="in_mode_0" value="0">Separate - momentary</option>
+            <option id="in_mode_1" value="1">Separate - toggle</option>
+            <option id="in_mode_2" value="2">Single</option>
+            <option id="in_mode_3" value="3">Detached</option>
+          </select>
+        </div>
+        <div class="form-control">
+          <label>Swap Inputs:</label>
+          <label class="switch">
+            <input type="checkbox" id="swap_inputs">
+            <span class="slider round"></span>
+          </label>
+        </div>
+        <div class="form-control">
+          <label>Swap Outputs:</label>
+          <label class="switch">
+            <input type="checkbox" id="swap_outputs">
+            <span class="slider round"></span>
+          </label>
+        </div>
+        <div class="button-container" id="btns">
+          <button id="save_btn">
+            <label><span id="save_spinner"></span>Save</label>
+          </button>
+          <button id="cal_btn">
+            <label><span id="cal_spinner"></span>Calibrate</label>
+          </button>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="container" id="ts_template" style="display: none">
-      <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Sensor-Settings"
-        target="_blank">?</a>
-      <h1 id="head">Sensor</h1>
-      <div class="form">
-        <div>
-          <div class="form-control">
-            <label>Name:</label>
-            <input type="text" id="name">
-          </div>
-          <div class="form-control">
-            <label>Value:</label>
-            <span id="value" style="min-width: 40px; display: inline-block;"></span>
-            <select id="unit" class="short">
-              <option id="unit_0" value="0">&deg;C</option>
-              <option id="unit_1" value="1">&deg;F</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label for="update_interval">Update Interval:</label>
-            <input type="number" id="update_interval" min="1" max="1000" class="short"><span>&nbsp; s</span>
-          </div>
-          <div class="button-container">
-            <button id="save_btn">
-              <label><span id="save_spinner"></span>Save</label>
-            </button>
-          </div>
+  <div class="container" id="ts_template" style="display: none">
+    <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Sensor-Settings"
+      target="_blank">?</a>
+    <h1 id="head">Sensor</h1>
+    <div class="form">
+      <div>
+        <div class="form-control">
+          <label>Name:</label>
+          <input type="text" id="name">
+        </div>
+        <div class="form-control">
+          <label>Value:</label>
+          <span id="value" style="min-width: 40px; display: inline-block;"></span>
+          <select id="unit" class="short">
+            <option id="unit_0" value="0">&deg;C</option>
+            <option id="unit_1" value="1">&deg;F</option>
+          </select>
+        </div>
+        <div class="form-control">
+          <label for="update_interval">Update Interval:</label>
+          <input type="number" id="update_interval" min="1" max="1000" class="short"><span>&nbsp; s</span>
+        </div>
+        <div class="button-container">
+          <button id="save_btn">
+            <label><span id="save_spinner"></span>Save</label>
+          </button>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="container" id="gdo_template" style="display: none">
-      <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Garage-Door-Opener-Settings"
-        target="_blank">?</a>
-      <h1 id="head">Garage Door</h1>
-      <div class="form">
-        <div>
-          <div class="form-control">
-            <label>Name:</label>
-            <input type="text" id="name">
-          </div>
-          <div class="form-control">
-            <label>Status:</label>
-            <span id="state"></span>
-          </div>
-          <div class="form-control">
-            <label>Close Sensor:</label>
-            <select id="close_sensor_mode">
-              <option id="close_sensor_mode_0" value="0">Normally Closed</option>
-              <option id="close_sensor_mode_1" value="1">Normally Open</option>
-            </select>
-          </div>
-          <div class="form-control" id="open_sensor_mode_container">
-            <label>Open Sensor:</label>
-            <select id="open_sensor_mode">
-              <option id="open_sensor_mode_0" value="0">Normally Closed</option>
-              <option id="open_sensor_mode_1" value="1">Normally Open</option>
-              <option id="open_sensor_mode_2" value="2">Disabled</option>
-            </select>
-          </div>
-          <div class="form-control" id="out_mode_container">
-            <label>Output Mode:</label>
-            <select id="out_mode">
-              <option id="out_mode_0" value="0">Single</option>
-              <option id="out_mode_1" value="1">Dual</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label>Movement Time:</label>
-            <input type="text" id="move_time" style="width: 2em; min-width: 2em;"> seconds
-          </div>
-          <div class="form-control">
-            <label>Pulse Time:</label>
-            <input type="text" id="pulse_time_ms" style="width: 2em; min-width: 2em;"> ms
+  <div class="container" id="gdo_template" style="display: none">
+    <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/Garage-Door-Opener-Settings"
+      target="_blank">?</a>
+    <h1 id="head">Garage Door</h1>
+    <div class="tab_wrapper">
+      <input class="tab_radio" type="radio" checked>
+      <input class="tab_radio" type="radio">
+      <div class="tabs">
+        <label class="tab">State</label>
+        <label class="tab">Settings</label>
+      </div>
+      <div class="panels">
+        <div class="panel">
+          <div class="form">
+            <div class="form-control">
+              <label>Status:</label>
+              <span id="state"></span>
+            </div>
           </div>
-          <div class="button-container" id="btns">
-            <button id="save_btn">
-              <label><span id="save_spinner"></span>Save</label>
-            </button>
+          <div class="button-container">
             <button id="toggle_btn">
               <label><span id="toggle_spinner"></span>Toggle</label>
             </button>
           </div>
         </div>
-      </div>
-    </div>
-
-    <div class="container" id="rgb_template" style="display: none">
-      <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/RGB-Settings"
-        target="_blank">?</a>
-      <h1 id="head">RGB</h1>
-      <div class="form">
-        <div>
-          <div class="form-control" id="state_container">
-            <label for="state">Status:</label>
-            <label class="switch">
-              <input type="checkbox" id="state">
-              <span class="slider round"></span>
-            </label>
-          </div>
-          <div class="form-control" id="power_stats_container" style="display: none;">
-            <label for="power_stats">Power:</label>
-            <span id="power_stats"></span>
-          </div>
-          <div>
-            <div class="form-control" id="color_container">
-              <label>Color:</label>
-              <span id="color_preview"></span>
-              <span id="color_name"></span>
+        <div class="panel">
+          <div class="form">
+            <div class="form-control">
+              <label>Name:</label>
+              <input type="text" id="name">
             </div>
-            <div class="form-control" id="hue_container">
-              <label>Hue:</label>
-              <input type="range" id="hue" min="0" max="360"><span id="hue_value"></span>
+            <div class="form-control">
+              <label>Close Sensor:</label>
+              <select id="close_sensor_mode">
+                <option id="close_sensor_mode_0" value="0">Normally Closed</option>
+                <option id="close_sensor_mode_1" value="1">Normally Open</option>
+              </select>
             </div>
-            <div class="form-control" id="saturation_container">
-              <label>Saturation:</label>
-              <input type="range" id="saturation" min="0" max="100"><span id="saturation_value"></span>
+            <div class="form-control" id="open_sensor_mode_container">
+              <label>Open Sensor:</label>
+              <select id="open_sensor_mode">
+                <option id="open_sensor_mode_0" value="0">Normally Closed</option>
+                <option id="open_sensor_mode_1" value="1">Normally Open</option>
+                <option id="open_sensor_mode_2" value="2">Disabled</option>
+              </select>
             </div>
-            <div class="form-control" id="color_temperature_container">
-              <label>Color Temperature:</label>
-              <input type="range" id="color_temperature" min="50" max="400"><span id="color_temperature_value"></span>
+            <div class="form-control" id="out_mode_container">
+              <label>Output Mode:</label>
+              <select id="out_mode">
+                <option id="out_mode_0" value="0">Single (out 1)</option>
+                <option id="out_mode_2" value="2">Single (out 2)</option>
+                <option id="out_mode_1" value="1">Dual</option>
+              </select>
             </div>
             <div class="form-control">
-              <label>Brightness:</label>
-              <input type="range" id="brightness" min="0" max="100"><span id="brightness_value"></span>
+              <label>Movement Time:</label>
+              <input type="text" id="move_time" style="width: 2em; min-width: 2em;"> seconds
             </div>
             <div class="form-control">
-              <label for="transition_time">Transition Time:</label>
-              <input type="number" id="transition_time" min="0" max="10000"><span>ms</span>
+              <label>Pulse Time:</label>
+              <input type="text" id="pulse_time_ms" style="width: 2em; min-width: 2em;"> ms
             </div>
+            <div class="button-container">
+              <button id="save_btn">
+                <label><span id="save_spinner"></span>Save</label>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container" id="rgb_template" style="display: none">
+    <a class="helpbadge" href="https://github.com/mongoose-os-apps/shelly-homekit/wiki/RGB-Settings"
+      target="_blank">?</a>
+    <h1 id="head">RGB</h1>
+    <div class="tab_wrapper">
+      <input class="tab_radio" type="radio" checked>
+      <input class="tab_radio" type="radio">
+      <div class="tabs">
+        <label class="tab">State</label>
+        <label class="tab">Settings</label>
+      </div>
+      <div class="panels">
+        <div class="panel">
+          <div class="form">
+            <div class="form-control" id="state_container">
+              <label for="state">Status:</label>
+              <label class="switch">
+                <input type="checkbox" id="state">
+                <span class="slider round"></span>
+              </label>
+            </div>
+            <div class="form-control" id="power_stats_container" style="display: none;">
+              <label for="power_stats">Power:</label>
+              <span id="power_stats"></span>
+            </div>
+            <div>
+              <div class="form-control" id="color_container">
+                <label>Color:</label>
+                <span id="color_preview"></span>
+                <span id="color_name"></span>
+              </div>
+              <div class="form-control" id="hue_container">
+                <label>Hue:</label>
+                <input type="range" id="hue" min="0" max="360"><span id="hue_value"></span>
+              </div>
+              <div class="form-control" id="saturation_container">
+                <label>Saturation:</label>
+                <input type="range" id="saturation" min="0" max="100"><span id="saturation_value"></span>
+              </div>
+              <div class="form-control" id="color_temperature_container">
+                <label>Color Temperature:</label>
+                <input type="range" id="color_temperature" min="50" max="400"><span id="color_temperature_value"></span>
+              </div>
+              <div class="form-control">
+                <label>Brightness:</label>
+                <input type="range" id="brightness" min="0" max="100"><span id="brightness_value"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="form">
             <div class="form-control">
               <label>Name:</label>
               <input type="text" id="name">
             </div>
+            <div class="form-control">
+              <label for="transition_time">Transition Time:</label>
+              <input type="number" id="transition_time" min="0" max="10000"><span>ms</span>
+            </div>
             <div class="form-control" id="svc_hidden_container">
               <label>HAP Service Hidden:</label>
               <label class="switch">
@@ -916,12 +1012,14 @@ <h1 id="head">RGB</h1>
           </div>
         </div>
       </div>
-      <script src="sha256.js">
-      </script>
-      <script src="qrcode.js">
-      </script>
-      <script src="script.js">
-      </script>
+    </div>
+  </div>
+  <script src="sha256.js">
+  </script>
+  <script src="qrcode.js">
+  </script>
+  <script src="script.js">
+  </script>
 </body>
 
 </html>
diff --git a/fs_src/script.js b/fs_src/script.js
index ceae40fe..66691b2d 100644
--- a/fs_src/script.js
+++ b/fs_src/script.js
@@ -60,7 +60,9 @@ class Component_Type {
   static kTemperatureSensor = 12;
   static kLeakSensor = 13;
   static kSmokeSensor = 14;
-  static kMax = 15;
+  static kCarbonMonoxideSensor = 15;
+  static kCarbonDioxideSensor = 16;
+  static kMax = 17;
 };
 
 // Keep in sync with shelly::LightBulbController::BulbType.
@@ -205,6 +207,7 @@ el("wifi_save_btn").onclick = function() {
       ip: (sta_static ? el("wifi_ip").value : ""),
       netmask: (sta_static ? el("wifi_netmask").value : ""),
       gw: (sta_static ? el("wifi_gw").value : ""),
+      nameserver: el("wifi_nameserver").value,
     },
     sta1: {
       enable: el("wifi1_en").checked,
@@ -212,6 +215,7 @@ el("wifi_save_btn").onclick = function() {
       ip: (sta1_static ? el("wifi1_ip").value : ""),
       netmask: (sta1_static ? el("wifi1_netmask").value : ""),
       gw: (sta1_static ? el("wifi1_gw").value : ""),
+      nameserver: el("wifi1_nameserver").value,
     },
     ap: {
       enable: el("wifi_ap_en").checked,
@@ -382,6 +386,7 @@ function swSetConfig(c) {
   let cfg = {
     name: name,
     svc_type: parseInt(el(c, "svc_type").value),
+    hk_state_inverted: el(c, "hk_state_inverted").checked,
     initial_state: parseInt(el(c, "initial").value),
     auto_off: autoOff,
     in_inverted: el(c, "in_inverted").checked,
@@ -522,20 +527,46 @@ el("reset_btn").onclick = function() {
   });
 };
 
+function cloneTemplate(name, id) {
+  c = el(name).cloneNode(true);
+  c.id = id;
+  configureTabs(c);
+  return c;
+}
+
+function configureTabs(c) {
+  tabWrapper = c.querySelector(`#${c.id} .tab_wrapper`);
+  if (!tabWrapper) return;
+  tabRadios = tabWrapper.getElementsByClassName("tab_radio");
+  tabGroup = c.id;
+  tabs = tabWrapper.getElementsByClassName("tab");
+  for (let i = 0; i < tabRadios.length; i++) {
+    tabRadios[i].name = tabGroup;
+    tabRadios[i].id = `${tabGroup}_${i}`;
+  }
+  for (let i = 0; i < tabs.length; i++) {
+    tabs[i].setAttribute("for", `${tabGroup}_${i}`);
+  }
+}
+
 function findOrAddContainer(cd) {
-  let elId = `c${cd.type}-${cd.id}`;
+  let elId = `c${cd.type}_${cd.id}`;
   let c = el(elId);
   if (c) return c;
+
   switch (cd.type) {
     case Component_Type.kSwitch:
     case Component_Type.kOutlet:
     case Component_Type.kLock:
-      c = el("sw_template").cloneNode(true);
-      c.id = elId;
+      c = cloneTemplate("sw_template", elId);
       el(c, "state").onchange = function(ev) {
         setComponentState(c, {state: !c.data.state}, el(c, "set_spinner"));
         markInputChanged(ev);
       };
+      if (cd.type == Component_Type.kSwitch ||
+          cd.type == Component_Type.kOutlet) {
+        el(c, "hk_state_inverted_container").style.display = "block";
+      }
       el(c, "save_btn").onclick = function() {
         swSetConfig(c);
       };
@@ -547,15 +578,13 @@ function findOrAddContainer(cd) {
       break;
     case Component_Type.kStatelessSwitch:  // aka input in detached mode
     case Component_Type.kDoorbell:
-      c = el("ssw_template").cloneNode(true);
-      c.id = elId;
+      c = cloneTemplate("ssw_template", elId);
       el(c, "save_btn").onclick = function() {
         sswSetConfig(c);
       };
       break;
     case Component_Type.kWindowCovering:
-      c = el("wc_template").cloneNode(true);
-      c.id = elId;
+      c = cloneTemplate("wc_template", elId);
       el(c, "open_btn").onclick = function() {
         setComponentState(c, {tgt_pos: 100}, el(c, "open_spinner"));
       };
@@ -571,8 +600,7 @@ function findOrAddContainer(cd) {
       };
       break;
     case Component_Type.kGarageDoorOpener:
-      c = el("gdo_template").cloneNode(true);
-      c.id = elId;
+      c = cloneTemplate("gdo_template", elId);
       el(c, "save_btn").onclick = function() {
         gdoSetConfig(c, null, el(c, "save_spinner"));
       };
@@ -581,8 +609,7 @@ function findOrAddContainer(cd) {
       };
       break;
     case Component_Type.kDisabledInput:
-      c = el("di_template").cloneNode(true);
-      c.id = elId;
+      c = cloneTemplate("di_template", elId);
       el(c, "save_btn").onclick = function() {
         diSetConfig(c);
       };
@@ -592,15 +619,15 @@ function findOrAddContainer(cd) {
     case Component_Type.kContactSensor:
     case Component_Type.kLeakSensor:
     case Component_Type.kSmokeSensor:
-      c = el("sensor_template").cloneNode(true);
-      c.id = elId;
+    case Component_Type.kCarbonMonoxideSensor:
+    case Component_Type.kCarbonDioxideSensor:
+      c = cloneTemplate("sensor_template", elId);
       el(c, "save_btn").onclick = function() {
         mosSetConfig(c);
       };
       break;
     case Component_Type.kLightBulb:
-      c = el("rgb_template").cloneNode(true);
-      c.id = elId;
+      c = cloneTemplate("rgb_template", elId);
 
       let value = cd.bulb_type;
       let showct = (value == LightBulbController_BulbType.kCCT)
@@ -635,8 +662,7 @@ function findOrAddContainer(cd) {
       };
       break;
     case Component_Type.kTemperatureSensor:
-      c = el("ts_template").cloneNode(true);
-      c.id = elId;
+      c = cloneTemplate("ts_template", elId);
       el(c, "save_btn").onclick = function() {
         tsSetConfig(c);
       };
@@ -662,6 +688,7 @@ function rgbState(c, newState) {
 
 function updateComponent(cd) {
   let c = findOrAddContainer(cd);
+  let whatSensor;
   if (!c) return;
   switch (cd.type) {
     case Component_Type.kSwitch:
@@ -674,6 +701,11 @@ function updateComponent(cd) {
       setValueIfNotModified(el(c, "name"), cd.name);
       el(c, "state").checked = cd.state;
       updatePowerStats(c, cd);
+      if (cd.type == Component_Type.kSwitch ||
+          cd.type == Component_Type.kOutlet) {
+        el(c, "hk_state_inverted_container").style.display = "block";
+        checkIfNotModified(el(c, "hk_state_inverted"), cd.hk_state_inverted);
+      }
       if (cd.type == Component_Type.kLightBulb) {
         checkIfNotModified(el(c, "svc_hidden"), cd.svc_hidden);
         if (cd.hap_optional !== undefined && cd.hap_optional == 0) {
@@ -864,10 +896,19 @@ function updateComponent(cd) {
       break;
     }
     case Component_Type.kMotionSensor:
+      whatSensor = whatSensor || "motion";
     case Component_Type.kOccupancySensor:
+      whatSensor = whatSensor || "occupancy";
     case Component_Type.kContactSensor:
+      whatSensor = whatSensor || "contact";
     case Component_Type.kLeakSensor:
-    case Component_Type.kSmokeSensor: {
+      whatSensor = whatSensor || "leak";
+    case Component_Type.kSmokeSensor:
+      whatSensor = whatSensor || "smoke";
+    case Component_Type.kCarbonMonoxideSensor:
+      whatSensor = whatSensor || "carbon monoxide";
+    case Component_Type.kCarbonDioxideSensor: {
+      whatSensor = whatSensor || "carbon dioxide";
       let headText = `Input ${cd.id}`;
       if (cd.name) headText += ` (${cd.name})`;
       updateInnerText(el(c, "head"), headText);
@@ -878,8 +919,8 @@ function updateComponent(cd) {
       setValueIfNotModified(el(c, "idle_time"), cd.idle_time);
       el(c, "idle_time_container").style.display =
           (cd.in_mode == 0 ? "none" : "block");
-      let what = (cd.type == 7 ? "motion" : "occupancy");
-      let statusText = (cd.state ? `${what} detected` : `no ${what} detected`);
+      let statusText =
+          (cd.state ? `${whatSensor} detected` : `no ${whatSensor} detected`);
       if (cd.last_ev_age > 0) {
         statusText += `; last ${secondsToDateString(cd.last_ev_age)} ago`;
       }
@@ -947,6 +988,8 @@ function updateElement(key, value, info) {
     case "wifi1_netmask":
     case "wifi_gw":
     case "wifi1_gw":
+    case "wifi_nameserver":
+    case "wifi1_nameserver":
       setValueIfNotModified(el(key), value);
       break;
     case "wifi_ip":
@@ -1125,6 +1168,9 @@ function getInfo() {
           el("firmware_container").style.display = "block";
           updateCommonVisibility(!updateInProgress);
 
+          configureTabs(el("firmware_container"));
+          configureTabs(el("wifi_container"));
+
           // the system mode changed, clear out old UI components
           if (lastInfo !== null && lastInfo.sys_mode !== info.sys_mode) {
             el("components").innerHTML = "";
@@ -1178,6 +1224,8 @@ function setupHost() {
 
   if (!host) {
     host = prompt("Please enter the host of your shelly.");
+    host = host.replace("http://", "");
+    host = host.split("/")[0];
     if (host !== null) {
       location.href = `${location.host}?host=${host}`;
     }
@@ -1189,7 +1237,7 @@ function setupHost() {
 function reloadPage() {
   // If path or query string were set (e.g. '/ota'), reset them.
   let newHREF = `http://${location.host}/`;
-  if (location.href != newHREF) {
+  if (location.href != newHREF && !location.href.startsWith("file://")) {
     location.replace(newHREF);
   } else {
     location.reload();
diff --git a/fs_src/style.css b/fs_src/style.css
index d390c599..6ed55954 100644
--- a/fs_src/style.css
+++ b/fs_src/style.css
@@ -373,20 +373,21 @@ input:checked + .slider:before {
   display: none;
 }
 
-#one:checked ~ .panels #panel1,
-#two:checked ~ .panels #panel2,
-#three:checked ~ .panels #panel3 {
+.tab_radio:nth-child(1):checked ~ .panels .panel:nth-child(1),
+.tab_radio:nth-child(2):checked ~ .panels .panel:nth-child(2),
+.tab_radio:nth-child(3):checked ~ .panels .panel:nth-child(3),
+.tab_radio:nth-child(4):checked ~ .panels .panel:nth-child(4) {
   display: block;
 }
 
-#two:checked ~ .panels,
-#three:checked ~ .panels {
+.tab_radio:nth-child(n+2):checked ~ .panels {
   border-top-left-radius: 10px;
 }
 
-#one:checked ~ .tabs #tab1,
-#two:checked ~ .tabs #tab2,
-#three:checked ~ .tabs #tab3 {
+.tab_radio:nth-child(1):checked ~ .tabs .tab:nth-child(1),
+.tab_radio:nth-child(2):checked ~ .tabs .tab:nth-child(2),
+.tab_radio:nth-child(3):checked ~ .tabs .tab:nth-child(3),
+.tab_radio:nth-child(4):checked ~ .tabs .tab:nth-child(4) {
   border-top: 3px solid var(--primary);
   border-left: 1px solid var(--primary);
   border-right: 1px solid var(--primary);