CSS updated, webinterface is a bit cleaner now. Added a reset button to the tc editor.

firmware/data/index_template_bottom.html

@@ -19,6 +19,7 @@
 </tr>
 </table>
 <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
+<a href="#" id="save-button" class="pure-button pure-button-primary" onclick="fillTableFromJson();">reset</a>
 </div>
 </div> <!-- end of tab-tde -->
 <script src="http://{{IP_ADDRESS}}/js_bottom">

firmware/data/style.css

@@ -1,27 +1,40 @@
-#tab-lights, #tab-config, #tab-tde {
+/* Vereinheitlichter Look */
+body {
+font-family: Arial, sans-serif;
+}
+
+/* Gemeinsame Regeln für die Tabs */
+#tab-lights,
+#tab-config,
+#tab-tde {
 display: none;
 background-color: #ffffff;
 color: black;
 font-weight: bold;
+padding: 10px;
+border-radius: 3px;
 }
-#tab-lights.visible {
-display: block;
-}
-#tab-config.visible {
-display: block;
-}
+
+/* Sichtbarkeitsregeln für die Tabs */
+#tab-lights.visible,
+#tab-config.visible,
 #tab-tde.visible {
 display: block;
 }
+
+/* Gemeinsame Regeln für Tabellenzellen */
 .pure-table td {
 padding: 4px;
 }
+
+/* Stil für Formularelemente */
 .pure-form input[type="number"] {
 width: 60px;
 height: 20px;
 border-radius: 3px;
 border: 1px solid #ccc;
 }
+
 .pure-form select {
 width: 80px;
 height: 26px;
@@ -29,6 +42,8 @@ border-radius: 3px;
 border: 1px solid #ccc;
 background-color: #fff;
 }
+
+/* Stil für Buttons */
 .pure-button {
 background-color: #5a5a5a;
 color: #fff;
@@ -38,12 +53,12 @@ padding: 8px 12px;
 font-size: 14px;
 cursor: pointer;
 }
+
 .pure-button:hover {
 background-color: #333;
 }
-.top-align {
-vertical-align: top;
-}
+
+/* Stil für die Toast-Nachrichten */
 .toast {
 position: fixed;
 bottom: 10px;
@@ -58,12 +73,16 @@ text-align: center;
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
 }
+
 .toast.success {
-background-color: #4CAF50;
+background-color: #4caf50;
 }
+
 .toast.error {
 background-color: #f44336;
 }
+
+/* Stil für den Range-Slider */
 input[type=range] {
 -webkit-appearance: none;
 width: 70%;
@@ -71,9 +90,12 @@ height: 7px;
 margin: 4px 0;
 background-color: #ddd;
 }
+
 input[type=range]:focus {
 outline: none;
 }
+
+/* Spezifischer Stil für Elemente mit ID, die mit "bri" beginnen */
 [id^="bri"] {
 width: 50%;
 }

firmware/html/bottom.js

@@ -9,7 +9,6 @@ function addTabListener() {
         var acfg = document.getElementById("tab-a-config");
         var atde = document.getElementById("tab-a-tde");
 
-
         amain.addEventListener("click", function() {
             //console.log("Switch to main lights tab");
             tabMain.classList.add("visible");

firmware/html/index_template_bottom.html

@@ -20,6 +20,7 @@
             </table>
             
             <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
+            <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="fillTableFromJson();">reset</a>
         </div>
     </div> <!-- end of tab-tde -->
 

firmware/html/style.css

@@ -1,27 +1,40 @@
-#tab-lights, #tab-config, #tab-tde {
+/* Vereinheitlichter Look */
+body {
+font-family: Arial, sans-serif;
+}
+
+/* Gemeinsame Regeln für die Tabs */
+#tab-lights,
+#tab-config,
+#tab-tde {
 display: none;
 background-color: #ffffff;
 color: black;
 font-weight: bold;
+padding: 10px;
+border-radius: 3px;
 }
-#tab-lights.visible {
-display: block;
-}
-#tab-config.visible {
-display: block;
-}
+
+/* Sichtbarkeitsregeln für die Tabs */
+#tab-lights.visible,
+#tab-config.visible,
 #tab-tde.visible {
 display: block;
 }
+
+/* Gemeinsame Regeln für Tabellenzellen */
 .pure-table td {
 padding: 4px;
 }
+
+/* Stil für Formularelemente */
 .pure-form input[type="number"] {
 width: 60px;
 height: 20px;
 border-radius: 3px;
 border: 1px solid #ccc;
 }
+
 .pure-form select {
 width: 80px;
 height: 26px;
@@ -29,6 +42,8 @@ border-radius: 3px;
 border: 1px solid #ccc;
 background-color: #fff;
 }
+
+/* Stil für Buttons */
 .pure-button {
 background-color: #5a5a5a;
 color: #fff;
@@ -38,12 +53,12 @@ padding: 8px 12px;
 font-size: 14px;
 cursor: pointer;
 }
+
 .pure-button:hover {
 background-color: #333;
 }
-.top-align {
-vertical-align: top;
-}
+
+/* Stil für die Toast-Nachrichten */
 .toast {
 position: fixed;
 bottom: 10px;
@@ -58,12 +73,16 @@ text-align: center;
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
 }
+
 .toast.success {
-background-color: #4CAF50;
+background-color: #4caf50;
 }
+
 .toast.error {
 background-color: #f44336;
 }
+
+/* Stil für den Range-Slider */
 input[type=range] {
 -webkit-appearance: none;
 width: 70%;
@@ -71,9 +90,12 @@ height: 7px;
 margin: 4px 0;
 background-color: #ddd;
 }
+
 input[type=range]:focus {
 outline: none;
 }
+
+/* Spezifischer Stil für Elemente mit ID, die mit "bri" beginnen */
 [id^="bri"] {
 width: 50%;
 }