further code cleanup

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-./example.js
+./example.js
+./userconfig.json

userconfig.js

@@ -4,12 +4,12 @@ const webServerName = "Noobish's Server" // web server name (will be displayed i
 
 const xdrdServerHost = '192.168.1.15'; // xdrd server IP (if it's running on the same machine, use 127.0.0.1)
 const xdrdServerPort = 7373; // xdrd server port
-const xdrdPassword = 'changeme'; // xdrd password (optional)
+const xdrdPassword = 'password'; // xdrd password (optional)
 
 const qthLatitude = ''; // your latitude, useful for maps.fmdx.pl integration
 const qthLongitude = ''; // your longitude, useful for maps.fmdx.pl integration
 
-const verboseMode = true; // if true, console will display extra messages
+const verboseMode = false; // if true, console will display extra messages
 
 // DO NOT MODIFY ANYTHING BELOW THIS LINE
 module.exports = {

web/css/breadcrumbs.css

@@ -11,6 +11,10 @@ h3 {
     font-family: monospace;
 }
 
+.form-group {
+    display: inline-block;
+}
+
 #color-settings, #settings {
     background: transparent;
     border: 0;

web/css/helpers.css

@@ -68,13 +68,7 @@
     text-transform: uppercase;
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 960px) {
-    .flex-container {
-        display: block;
-    }
-    .flex-phone {
-        display: flex;
-    }
     .text-medium-big {
         font-size: 32px;
     }
@@ -86,4 +80,13 @@
     .text-big#data-ps {
         margin: 0;
     }
+}
+
+@media only screen and (max-width: 768px) {
+    .flex-container {
+        display: block;
+    }
+    .flex-phone {
+        display: flex;
+    }
 }

web/css/main.css

@@ -19,6 +19,26 @@
     color: inherit;
 }
 
+/* width */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: var(--color-1); 
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: var(--color-2); 
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-3); 
+}
+
 body {
     font-family: 'Titillium Web', sans-serif;
     color: white;
@@ -35,7 +55,6 @@ body {
     max-width: 1240px;
 }
 
-
 @media (max-width: 960px) {
     #wrapper {
         position: static;

web/css/panels.css

@@ -1,16 +1,4 @@
-.panel-10 {
+*[class^="panel-"] {
-    width: 10%;
-    background: var(--color-1);
-    margin-left: 10px;
-    margin-right: 10px;
-    border-radius: 30px;
-    text-align: center;
-    margin-top: 30px;
-    margin-bottom: 30px;
-}
-
-.panel-33 {
-    width: 33%;
     background-color: var(--color-1);
     margin-left: 10px;
     margin-right: 10px;
@@ -20,37 +8,26 @@
     transition: 0.3s ease-in-out background-color;
 }
 
+.panel-10 {
+    width: 10%;
+    margin-bottom: 30px;
+}
+
+.panel-33 {
+    width: 33%;
+}
+
 .panel-75 {
     width: 68%;
-    background: var(--color-1);
-    margin-left: 10px;
-    margin-right: 10px;
-    border-radius: 30px;
-    text-align: center;
-    margin-top: 30px;
-    transition: 0.3s ease-in-out background-color;
 }
 
 .panel-90 {
     width: 88%;
-    background: var(--color-1);
-    margin-left: 10px;
-    margin-right: 10px;
-    border-radius: 30px;
-    text-align: center;
-    margin-top: 30px;
 }
 
 
 .panel-100 {
     width: 98%;
-    background: var(--color-1);
-    margin-left: 10px;
-    margin-right: 10px;
-    min-height: 100px;
-    border-radius: 30px;
-    text-align: center;
-    margin-top: 30px;
 }
 
 
@@ -62,7 +39,6 @@
         margin-bottom: 20px;
     }
     .panel-75 {
-        margin: 80px auto 0 auto !important;
         width: 90%;
     }
     .panel-33 h2 {
@@ -72,6 +48,5 @@
     .panel-100 {
         width: 90%;
         margin: auto;
-    }
+    } 
-    
 }

web/index.html

@@ -118,16 +118,27 @@
             <span class="modal-title">Settings</span>
             <span class="close" id="closeModal"><i class="fa-solid fa-xmark"></i></span>
             
-            <label for="themes" style="margin-top: 50px;"><i class="fa-solid fa-palette"></i> Theme:</label>
+            <div class="form-group">
-            <select name="themes" style="margin-bottom: 15px;" id="theme-selector">
+                <label for="themes" style="margin-top: 50px;"><i class="fa-solid fa-palette"></i> Theme:</label>
-                <option value="theme1">Blurple</option>
+                <select name="themes" style="margin-bottom: 15px;" id="theme-selector">
-                <option value="theme2">Red</option>
+                    <option value="theme1">Blurple</option>
-                <option value="theme3">Green</option>
+                    <option value="theme2">Red</option>
-                <option value="theme4">Cyan</option>
+                    <option value="theme3">Green</option>
-                <option value="theme5">Orange</option>
+                    <option value="theme4">Cyan</option>
-                <option value="theme6">Pink</option>
+                    <option value="theme5">Orange</option>
-                <option value="theme7">Monochrome</option>
+                    <option value="theme6">Pink</option>
-            </select>
+                    <option value="theme7">Monochrome</option>
+                </select>
+            </div>
+
+            <div class="form-group" style="margin-left: 10px;">
+                <label for="signal" style="margin-top: 50px;"><i class="fa-solid fa-signal"></i> Signal units:</label>
+                <select name="signal" style="margin-bottom: 15px;" id="signal-selector">
+                    <option value="dBf">dBf</option>
+                    <option value="dBuV">dBuV</option>
+                    <option value="dBm">dBm</option>
+                </select>
+            </div>
 
             <div style="margin-bottom: 20px;">
                 <label for="themes"><i class="fa-solid fa-user"></i> Users online:</label>