From 69ebdda2691f64c33e4878b5a116b17c2df4bf24 Mon Sep 17 00:00:00 2001
From: Kai Lauterbach <klaute@gmx.de>
Date: Mon, 22 May 2023 12:12:22 +0200
Subject: [PATCH] CSS updated, webinterface is a bit cleaner now. Added a reset
 button to the tc editor.

---
 firmware/data/index_template_bottom.html |  1 +
 firmware/data/style.css                  | 48 +++++++++++++++++-------
 firmware/html/bottom.js                  |  1 -
 firmware/html/index_template_bottom.html |  1 +
 firmware/html/style.css                  | 48 +++++++++++++++++-------
 5 files changed, 72 insertions(+), 27 deletions(-)

diff --git a/firmware/data/index_template_bottom.html b/firmware/data/index_template_bottom.html
index 985a4fd..1f7dec1 100644
--- a/firmware/data/index_template_bottom.html
+++ b/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">
diff --git a/firmware/data/style.css b/firmware/data/style.css
index 815054c..ec5cadd 100644
--- a/firmware/data/style.css
+++ b/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%;
-}
\ No newline at end of file
+width: 50%;
+}
diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js
index e4293d7..6b2a8fc 100644
--- a/firmware/html/bottom.js
+++ b/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");
diff --git a/firmware/html/index_template_bottom.html b/firmware/html/index_template_bottom.html
index 1447848..b7b82e3 100644
--- a/firmware/html/index_template_bottom.html
+++ b/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 -->
 
diff --git a/firmware/html/style.css b/firmware/html/style.css
index 815054c..ec5cadd 100644
--- a/firmware/html/style.css
+++ b/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%;
-}
\ No newline at end of file
+width: 50%;
+}