From e04351931bb86fc4ae06bb83b183d57fc3c6c232 Mon Sep 17 00:00:00 2001
From: Marcel Peterkau <marcel@peterkau.de>
Date: Tue, 23 Aug 2022 00:48:42 +0200
Subject: [PATCH] Format-Tweaks on WebUI

---
 Software/data_src/index.htm             | 134 ++++++++++++------------
 Software/data_src/static/css/tweaks.css |   4 +-
 2 files changed, 68 insertions(+), 70 deletions(-)

diff --git a/Software/data_src/index.htm b/Software/data_src/index.htm
index 7a83ca2..8b1c4b4 100644
--- a/Software/data_src/index.htm
+++ b/Software/data_src/index.htm
@@ -20,7 +20,7 @@
 
   <nav class="navbar fixed-top navbar-dark bg-primary" id="navbar1">
     <a class="navbar-brand" href="#">
-      <img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
+      <img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top mr-1" alt="">
       KTM CAN ChainLube
     </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar"
@@ -51,7 +51,7 @@
         <div class="col text-center">
           <div class="jumbotron">
             <img src="static/img/logo.png" width="120" height="120" class="img-fluid" alt="">
-            <h3>KTM CAN Chain Lube</h3>
+            <h3 class="pt-3">KTM CAN Chain Lube</h3>
           </div>
         </div>
         <hr />
@@ -85,8 +85,8 @@
             </tbody>
           </table>
           <p>
-            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseDTCDescription"
-              aria-expanded="false" aria-controls="collapseDTCDescription">
+            <button class="btn btn-outline-primary" type="button" data-toggle="collapse"
+              data-target="#collapseDTCDescription" aria-expanded="false" aria-controls="collapseDTCDescription">
               DTC Beschreibung
             </button>
           </p>
@@ -102,37 +102,40 @@
       <!-- Div Tab Home-->
       <!-- Div Tab Source Settings-->
       <div id="tab_source" class="tab-pane fade" role="tabpanel">
-        <h3>Erfassung Wegstrecke</h3>
+        <h3>Wegstreckenerfassung</h3>
         <hr />
         <p>
         <h4>Signalquelle</h4>
-        <form action="\post.htm" method="POST" class="form-horizontal">
+        <form action="post.htm" method="POST" class="form-horizontal">
           <div class="form-group row">
-            <label for="sourceselect" class="control-label col-4">Wegstrecke Quelle</label>
+            <label for="sourceselect" class="control-label col-4">Schnittstelle</label>
             <div class="col-8">
               <select id="sourceselect" name="sourceselect" class="select form-control">
                 %SOURCE_SELECT_OPTIONS%
               </select>
             </div>
           </div>
+          <div class="alert alert-primary alert-dismissable show fade" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+            <strong>Achtung!</strong><br>
+            Bei Änderung der Signalquelle wird der CAN-Oiler neu gestartet.
+            Dadurch wird die WiFi-Verbindung getrennt und muss neu aufgebaut werden.
+          </div>
           <div class="form-group row">
             <div class="offset-4 col-8">
-              <button name="sourcesave" type="submit" class="btn btn-primary">&Uuml;bernehmen</button>
+              <button name="sourcesave" type="submit" class="btn btn-outline-primary">&Uuml;bernehmen</button>
             </div>
           </div>
         </form>
-        <div class="alert alert-warning">
-          <strong>Achtung!</strong><br>
-          Bei Änderung der Wegstrecken-Quelle wird der CAN-Oiler neu gestartet.
-          Dadurch wird die WiFi-Verbindung getrennt und muss neu aufgebaut werden.
-        </div>
         </p>
         <!-- Div Source:Impulse Settings-->
         <div %SHOW_IMPULSE_SETTINGS%>
           <hr />
           <p>
-          <h4>Einstellungen Impuls</h4>
-          <form action="\post.htm" method="POST" class="form-horizontal">
+          <h4>Einstellungen Impulseingang</h4>
+          <form action="post.htm" method="POST" class="form-horizontal">
 
             <div class="form-group row">
               <label for="tirewidth" class="control-label col-4">Reifenbreite</label>
@@ -153,9 +156,9 @@
                 <div class="input-group">
                   <input id="tireratio" name="tireratio" type="text" required="required" class="form-control"
                     value="%TIRE_RATIO%">
-                    <div class="input-group-append">
-                      <span class="input-group-text">mm</span>
-                    </div>
+                  <div class="input-group-append">
+                    <span class="input-group-text">mm</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -165,9 +168,9 @@
                 <div class="input-group">
                   <input id="tiredia" name="tiredia" type="text" required="required" class="form-control"
                     value="%RIM_DIAMETER%">
-                    <div class="input-group-append">
-                      <span class="input-group-text">"</span>
-                    </div>
+                  <div class="input-group-append">
+                    <span class="input-group-text">"</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -183,7 +186,7 @@
             </div>
             <div class="form-group row">
               <div class="offset-4 col-8">
-                <button name="pulsesave" type="submit" class="btn btn-primary">Speichern</button>
+                <button name="pulsesave" type="submit" class="btn btn-outline-primary">Speichern</button>
               </div>
             </div>
           </form>
@@ -195,7 +198,7 @@
           <hr />
           <p>
           <h4>Einstellungen CAN-Bus</h4>
-          <form action="\post.htm" method="POST" class="form-horizontal">
+          <form action="post.htm" method="POST" class="form-horizontal">
             <div class="form-group row">
               <label for="cansource" class="control-label col-4">Model</label>
               <div class="col-8">
@@ -206,7 +209,7 @@
             </div>
             <div class="form-group row">
               <div class="offset-4 col-8">
-                <button name="cansave" type="submit" class="btn btn-primary">Speichern</button>
+                <button name="cansave" type="submit" class="btn btn-outline-primary">Speichern</button>
               </div>
             </div>
           </form>
@@ -218,7 +221,7 @@
           <hr />
           <p>
           <h4>Einstellungen GPS</h4>
-          <form action="\post.htm" method="POST" class="form-horizontal">
+          <form action="post.htm" method="POST" class="form-horizontal">
             <div class="form-group row">
               <label for="gpsbaud" class="control-label col-4">Baudrate</label>
               <div class="col-8">
@@ -229,7 +232,7 @@
             </div>
             <div class="form-group row">
               <div class="offset-4 col-8">
-                <button name="gpssave" type="submit" class="btn btn-primary">Speichern</button>
+                <button name="gpssave" type="submit" class="btn btn-outline-primary">Speichern</button>
               </div>
             </div>
           </form>
@@ -246,32 +249,32 @@
         <p>
         <form action="post.htm" method="POST" class="form-horizontal">
           <div class="form-group row">
-            <label for="lubedistancenormal" class="control-label col-4">Modus:normal</label>
+            <label for="lubedistancenormal" class="control-label col-4">Normal (gr&uuml;n)</label>
             <div class="col-8">
               <div class="input-group">
                 <input id="lubedistancenormal" name="lubedistancenormal" value="%LUBE_DISTANCE_NORMAL%" type="text"
                   class="form-control" required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">m</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">m</span>
+                </div>
               </div>
             </div>
           </div>
           <div class="form-group row">
-            <label for="lubedistancerain" class="control-label col-4">Modus:rain</label>
+            <label for="lubedistancerain" class="control-label col-4">Regen (blau)</label>
             <div class="col-8">
               <div class="input-group">
                 <input id="lubedistancerain" name="lubedistancerain" value="%LUBE_DISTANCE_RAIN%" type="text"
                   class="form-control" required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">m</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">m</span>
+                </div>
               </div>
             </div>
           </div>
           <div class="form-group row">
             <div class="offset-4 col-8">
-              <button name="oilsave" type="submit" class="btn btn-primary">Speichern</button>
+              <button name="oilsave" type="submit" class="btn btn-outline-primary">Speichern</button>
             </div>
           </div>
         </form>
@@ -285,16 +288,16 @@
         <hr />
         <p>
         <h4>&Ouml;lvorrat</h4>
-        <form action="\post.htm" method="POST" class="form-horizontal">
+        <form action="post.htm" method="POST" class="form-horizontal">
           <div class="form-group row">
             <label for="tankcap" class="control-label col-4">Tankkapazität</label>
             <div class="col-8">
               <div class="input-group">
                 <input id="tankcap" name="tankcap" value="%TANK_CAPACITY%" type="text" class="form-control"
                   required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">ml</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">ml</span>
+                </div>
               </div>
             </div>
           </div>
@@ -304,9 +307,9 @@
               <div class="input-group">
                 <input id="tankwarn" name="tankwarn" value="%TANK_REMIND%" type="text" class="form-control"
                   required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">&#37;</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">&#37;</span>
+                </div>
               </div>
             </div>
           </div>
@@ -316,9 +319,9 @@
               <div class="input-group">
                 <input id="pumppulse" name="pumppulse" value="%AMOUNT_PER_DOSE%" type="text" class="form-control"
                   required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">µl</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">µl</span>
+                </div>
               </div>
             </div>
           </div>
@@ -336,8 +339,8 @@
           </div>
           <div class="form-group row">
             <div class="offset-4 col-8 row">
-              <button name="oilsave" type="submit" class="btn btn-primary">Speichern</button>
-              <button name="resettank" type="submit" class="btn btn-primary">Tank zurücksetzen</button>
+              <button name="oilsave" type="submit" class="btn btn-outline-primary">Speichern</button>
+              <button name="resettank" type="submit" class="btn btn-outline-primary ml-2">Tank zurücksetzen</button>
             </div>
           </div>
         </form>
@@ -345,7 +348,7 @@
         <hr />
         <p>
         <h4>Entl&uuml;ftung</h4>
-        <form action="\post.htm" method="POST" class="form-horizontal">
+        <form action="post.htm" method="POST" class="form-horizontal">
           <div class="form-group row">
             <label for="purgepulse" class="control-label col-4">Entl&uuml;ftung Dosierung</label>
             <div class="col-8">
@@ -359,8 +362,8 @@
           </div>
           <div class="form-group row">
             <div class="offset-4 col-8 row">
-              <button name="maintsave" type="submit" class="btn btn-primary">Speichern</button>
-              <button name="purgenow" type="submit" class="btn btn-primary">Entlüftung starten</button>
+              <button name="maintsave" type="submit" class="btn btn-outline-primary">Speichern</button>
+              <button name="purgenow" type="submit" class="btn btn-outline-primary ml-2">Entlüftung starten</button>
             </div>
           </div>
         </form>
@@ -368,7 +371,10 @@
         <hr />
         <h4>EEPROM formatieren</h4>
         <p>
-        <div class="alert alert-warning">
+        <div class="alert alert-primary alert-dismissable show fade" role="alert">
+          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
           <strong>Achtung!</strong><br>
           Das Formatieren der EEPROM-Bereiche sollte nur ausgeführt werden wenn es unbedingt erforderlich ist!
           Hierdurch werden alle Einstellungen zurück gesetzt bzw. alle Betriebsdaten gehen verloren.
@@ -395,7 +401,7 @@
           </div>
           <div class="form-group row">
             <div class="offset-4 col-8">
-              <button name="reset_ee_btn" type="submit" class="btn btn-primary">EEPROM formatieren</button>
+              <button name="reset_ee_btn" type="submit" class="btn btn-outline-primary">EEPROM formatieren</button>
             </div>
           </div>
         </form>
@@ -536,10 +542,6 @@
         <p>
         <h4>Firmware-Update</h4>
         <form method='POST' action='/doUpdate' enctype='multipart/form-data'>
-
-
-
-
           <div class="input-group">
             <div class="input-group-prepend">
               <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
@@ -549,12 +551,6 @@
               <label class="custom-file-label" for="fw-update-file">Choose file</label>
             </div>
           </div>
-
-
-
-
-
-
         </form>
         </p>
       </div>
@@ -564,16 +560,16 @@
   </main>
 
   <!-- Footer -->
-  <footer class="navbar-default navbar-fixed-bottom">
-    <div class="container-fluid">
-      <!-- Copyright -->
-      <div class="col text-center">
-        © 2022 Copyright:
-        <a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a>
+
+  <footer class="page-footer navbar-dark bg-primary font-small fixed-bottom">
+    <div class="container-fluid text-center">
+      <div class="footer-copyright text-center py-3">
+        <span class="text-muted">© 2022 - 
+          <a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a></span>
       </div>
-      <!-- Copyright -->
     </div>
   </footer>
+
   <!-- Footer -->
 
   <script>
diff --git a/Software/data_src/static/css/tweaks.css b/Software/data_src/static/css/tweaks.css
index cd008a9..be04abb 100644
--- a/Software/data_src/static/css/tweaks.css
+++ b/Software/data_src/static/css/tweaks.css
@@ -8,6 +8,7 @@
 
 body {
     padding-top: 70px;
+    margin-bottom: 56px;
 }
 
 hr {
@@ -15,4 +16,5 @@ hr {
     border-width: 0;
     color: gray;
     background-color: gray
-}
\ No newline at end of file
+}
+