changed font family; aligned elements

src/frontend/index.css

@@ -1,5 +1,5 @@
 html {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: verdana, serif;
     color: white;
     user-select: none;
     -webkit-user-select: none;
@@ -186,17 +186,17 @@ h5 {
 }
 .name-txt {
     position: absolute;
-    top: 3%;
-    left: 8.7%;
+    top: 10%;
+    left: 8%;
 }
 .serial-txt {
     position: absolute;
-    top: 50%;
-    left: 9%;
+    top: 53%;
+    left: 8%;
     color: rgb(200, 200, 200);
 }
 .percent-slider {
-    top: 0;
+    top: 1%;
     padding-top: 5%;
     height: 47.6%;
 }
@@ -232,8 +232,8 @@ h5 {
     top: 1px;
     width: 35%;
     height: 100%;
-    font-size: medium;
-    font-weight: 600;
+    font-size: 1.1em;
+    font-weight: normal;
     color: white;
     background-color: rgba(0, 0, 0, 0);
     border: none;
@@ -362,11 +362,10 @@ input[type="range"]:hover ~ .hundred-mkr {
     left: 24.5%;
     background-image: url(./img/icon_backward_100x100.png);
 }
-.more-setting-txt {
+.more-settings-txt {
     position: absolute;
     top: 25%;
-    left: 10.5%;
-    font-weight: 400;
+    left: 9.5%;
     font-size: 1em;
 }
 .more-settings-dropdown {
@@ -433,7 +432,8 @@ input[type="checkbox"], input[type="range"] {
 }
 .settings-header-txt {
     position: absolute;
-    left: 28%;
+    top: 6%;
+    left: 26%;
     font-weight: 500;
 }
 .four-settings {
@@ -484,13 +484,13 @@ input[type="checkbox"], input[type="range"] {
 }
 .setting-name-txt {
     position: absolute;
-    top: 19%;
+    top: 25%;
     left: 5%;
     font-size: 1.1em;
 }
 .setting-value-txt {
     position: absolute;
-    top: 19%;
+    top: 25%;
     left: 79.9%;
     width: 15%;
     font-size: 1.1em;
@@ -538,7 +538,7 @@ input[type="checkbox"], input[type="range"] {
 }
 .toggle-cbx::before {
     position: absolute;
-    top: 5%;
+    top: 4.5%;
     left: 4%;
     content: '';
     width: 54.5%;
@@ -558,9 +558,9 @@ input:checked + .toggle-cbx::before {
 }
 .more-settings {
     top: 23.5%;
-    left: 54%;
-    width: 38%;
-    background: linear-gradient(135deg, rgba(80, 80, 80, 0.6), rgba(65, 65, 65, 0.7));
+    left: 47%;
+    width: 44%;
+    background: linear-gradient(135deg, rgba(80, 80, 80, 0.7), rgba(65, 65, 65, 0.8));
     overflow: hidden;
     transition: 0.12s ease-in-out;
 }
@@ -619,6 +619,7 @@ input:checked + .toggle-cbx::before {
     top: 10%;
     left: 3.9%;
     font-size: 1.1em;
+    cursor: pointer;
 }
 .dialog-title-txt {
     font-size: 1.1em;

src/frontend/index.html

@@ -67,11 +67,11 @@ <h3 id="serial" class="serial-txt">%AP_SSID%</h3>
     </div>
     <div id="more_settings" class="two-settings glass container more-settings more-settings-hide">
         <div class="one-half-height default clickable" onclick="toggleSettings('motor_settings')">
-            <h3 class="more-setting-txt">Motor Settings</h3>
+            <h3 class="more-settings-txt">Motor Settings</h3>
         </div>
         <div class="one-half-pos horizontal-separator"></div>
         <div class="one-half-pos one-half-height default clickable" onclick="toggleSettings('system_settings')">
-            <h3 class="more-setting-txt" style="top:23%;">System Settings</h3>
+            <h3 class="more-settings-txt" style="top:23%;">System Settings</h3>
         </div>
     </div>
 
@@ -80,8 +80,8 @@ <h3 class="more-setting-txt" style="top:23%;">System Settings</h3>
     <!-- To display and change motor settings -->
     <div id="motor_settings" class="default default-hide" style="border:none;">
         <div class="settings-header container">
-            <div class="back-arrow clickable" onclick="toggleSettings('motor_settings')"></div>
-            <button class="back-btn form-btn clickable" onclick="toggleSettings('motor_settings')">Back</button>
+            <div class="back-arrow" onclick="toggleSettings('motor_settings')"></div>
+            <button class="back-btn form-btn" onclick="toggleSettings('motor_settings')">Back</button>
             <h2 class="settings-header-txt">Motor Settings</h2>
         </div>
 
@@ -179,8 +179,8 @@ <h3 id="stallguard_threshold" class="setting-value-txt">10</h3>
     <!-- To display and change system and wifi settings -->
     <div id="system_settings" class="default default-hide" style="border:none;">
         <div class="settings-header container">
-            <div class="back-arrow clickable" onclick="toggleSettings('system_settings')"></div>
-            <button class="back-btn form-btn clickable" onclick="toggleSettings('system_settings')">Back</button>
+            <div class="back-arrow" onclick="toggleSettings('system_settings')"></div>
+            <button class="back-btn form-btn" onclick="toggleSettings('system_settings')">Back</button>
             <h2 class="settings-header-txt">System Settings</h2>
         </div>
 
@@ -192,7 +192,7 @@ <h3 id="name" class="setting-value-txt2">Living Room Window</h3>
             </div>
         </div>
 
-        <h4 style="position:absolute;left:8.5%;top:20%;font-size:1em;font-weight:400;">WiFi</h4>
+        <h4 style="position:absolute;left:8.5%;top:20.5%;font-size:1em;font-weight:400;">Wi-Fi</h4>
         <div class="three-settings glass shadow container" style="top:24.3%;">
             <div class="one-third-height default">
                 <h3 class="setting-name-txt">Setup Mode</h3>
@@ -228,7 +228,7 @@ <h3 id="restart" class="setting-name-txt" style="left:41%;">Restart</h3>
 
         <div class="one-setting glass shadow container" style="top:70%;">
             <div class="whole-height default clickable" onclick="httpRequest('system', 'reset')">
-                <h3 id="reset" class="setting-name-txt" style="left:42.5%;">Reset</h3>
+                <h3 id="reset" class="setting-name-txt" style="left:43%;">Reset</h3>
             </div>
         </div>
         <div id="reset_hint" class="dialog-hint" style="top:77.8%;color:rgb(245,245,245);">