fmlist integration, new admin panel, bugfixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fm-dx-webserver",
-  "version": "1.2.8.1",
+  "version": "1.3.0",
   "description": "FM DX Webserver",
   "main": "index.js",
   "scripts": {

server/datahandler.js

@@ -235,7 +235,7 @@ var dataToSend = {
     dist: '',
     azi: '',
     id: '',
-    reg: '',
+    reg: false,
     pi: '',
   },
   country_name: '',
@@ -394,21 +394,26 @@ function handleData(wss, receivedData, rdsWss) {
   }
 
   // Get the received TX info
-  const currentTx = fetchTx(parseFloat(dataToSend.freq).toFixed(1), dataToSend.pi, dataToSend.ps);
-  if(currentTx && currentTx.station !== undefined) {
-    dataToSend.txInfo = {
-      tx: currentTx.station,
-      pol: currentTx.pol,
-      erp: currentTx.erp,
-      city: currentTx.city,
-      itu: currentTx.itu,
-      dist: currentTx.distance,
-      azi: currentTx.azimuth,
-      id: currentTx.id,
-      pi: currentTx.pi,
-      reg: currentTx.reg
-    }
-  }
+  fetchTx(parseFloat(dataToSend.freq).toFixed(1), dataToSend.pi, dataToSend.ps)
+  .then((currentTx) => {
+      if (currentTx && currentTx.station !== undefined) {
+          dataToSend.txInfo = {
+              tx: currentTx.station,
+              pol: currentTx.pol,
+              erp: currentTx.erp,
+              city: currentTx.city,
+              itu: currentTx.itu,
+              dist: currentTx.distance,
+              azi: currentTx.azimuth,
+              id: currentTx.id,
+              pi: currentTx.pi,
+              reg: currentTx.reg
+          };
+      }
+  })
+  .catch((error) => {
+      logError("Error fetching Tx info:", error);
+  });
 
     // Send the updated data to the client
     const dataToSendJSON = JSON.stringify(dataToSend);

server/endpoints.js

@@ -62,6 +62,7 @@ router.get('/', (req, res) => {
             device: serverConfig.device,
             noPlugins,
             plugins: serverConfig.plugins,
+            fmlist_integration: serverConfig.fmlist_integration ? serverConfig.fmlist_integration : true,
             bwSwitch: serverConfig.bwSwitch ? serverConfig.bwSwitch : false
         });
     }
@@ -74,6 +75,11 @@ router.get('/403', (req, res) => {
 router.get('/wizard', (req, res) => {
     let serialPorts;
     
+    if(!req.session.isAdminAuthenticated) {
+        res.render('login');
+        return;
+    }
+
     SerialPort.list()
     .then((deviceList) => {
         serialPorts = deviceList.map(port => ({
@@ -95,6 +101,11 @@ router.get('/wizard', (req, res) => {
 router.get('/setup', (req, res) => {
     let serialPorts; 
 
+    if(!req.session.isAdminAuthenticated) {
+        res.render('login');
+        return;
+    }
+    
     SerialPort.list()
     .then((deviceList) => {
         serialPorts = deviceList.map(port => ({
@@ -260,6 +271,14 @@ router.get('/ping', (req, res) => {
 });  
 
 router.get('/log_fmlist', (req, res) => {
+    if(dataHandler.dataToSend.txInfo.tx.length === 0) {
+        res.status(500).send('No suitable transmitter to log.');
+        return;
+    }
+
+    if(serverConfig.extras?.fmlist_integration == false) {
+        res.status(500).send('FMLIST Integration is not enabled on this server.');
+    }
     const clientIp = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
     const postData = JSON.stringify({
         station: {
@@ -278,11 +297,12 @@ router.get('/log_fmlist', (req, res) => {
             longitude: serverConfig.identification.lon,
             address: serverConfig.identification.proxyIp.length > 1 ? serverConfig.identification.proxyIp : ('Matches request IP with port ' + serverConfig.webserver.port),
             webserver_name: serverConfig.identification.tunerName,
+            omid: serverConfig.extras?.fmlist_omid || '',
         },
         client: {
             request_ip: clientIp
         },
-        log_msg: `PS: ${dataHandler.dataToSend.ps}, PI: ${dataHandler.dataToSend.pi}, Signal: ${dataHandler.dataToSend.sig.toFixed(0)} dBf`
+        log_msg: `Logged PS: ${dataHandler.dataToSend.ps.replace(/\s+/g, '_')}, PI: ${dataHandler.dataToSend.pi}, Signal: ${dataHandler.dataToSend.sig.toFixed(0)} dBf`
     });
 
     const options = {

server/index.js

@@ -52,7 +52,7 @@ function startPluginsWithDelay(plugins, delay) {
     setTimeout(() => {
       const pluginName = path.basename(pluginPath, '.js'); // Extract plugin name from path
       logInfo(`-----------------------------------------------------------------`);
-      logInfo(`Plugin ${pluginName} is loaded`);
+      logInfo(`Plugin ${pluginName} loaded successfully!`);
       require(pluginPath);
     }, delay * index);
   });

server/server_config.js

@@ -45,6 +45,10 @@ let serverConfig = {
     tunePass: "",
     adminPass: ""
   },
+  extras: {
+    fmlist_integration: true,
+    fmlist_omid: "",
+  },
   plugins: [],
   device: 'tef',
   defaultFreq: 87.5,

server/tx_search.js

@@ -3,29 +3,69 @@ const { serverConfig } = require('./server_config');
 const consoleCmd = require('./console');
 
 let cachedData = {};
-
 let lastFetchTime = 0;
-const fetchInterval = 3000;
-
+const fetchInterval = 1000;
 const esSwitchCache = {"lastCheck":0, "esSwitch":false};
 const esFetchInterval = 300000;
+const usStatesGeoJsonUrl = "https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json";
+let usStatesGeoJson = null;  // To cache the GeoJSON data for US states
+
+// Load the US states GeoJSON data
+async function loadUsStatesGeoJson() {
+    if (!usStatesGeoJson) {
+        const response = await fetch(usStatesGeoJsonUrl);
+        usStatesGeoJson = await response.json();
+    }
+}
+
+// Function to get bounding box of a state
+function getStateBoundingBox(coordinates) {
+    let minLat = Infinity, maxLat = -Infinity, minLon = Infinity, maxLon = -Infinity;
+    for (const polygon of coordinates) {
+        for (const coord of polygon[0]) { // First level in case of MultiPolygon
+            const [lon, lat] = coord;
+            if (lat < minLat) minLat = lat;
+            if (lat > maxLat) maxLat = lat;
+            if (lon < minLon) minLon = lon;
+            if (lon > maxLon) maxLon = lon;
+        }
+    }
+    return { minLat, maxLat, minLon, maxLon };
+}
+
+// Function to check if a city (lat, lon) falls within the bounding box of a state
+function isCityInState(lat, lon, boundingBox) {
+    return lat >= boundingBox.minLat && lat <= boundingBox.maxLat &&
+           lon >= boundingBox.minLon && lon <= boundingBox.maxLon;
+}
+
+// Function to check if a city (lat, lon) is inside any US state and return the state name
+function getStateForCoordinates(lat, lon) {
+    if (!usStatesGeoJson) return null;
+
+    for (const feature of usStatesGeoJson.features) {
+        const boundingBox = getStateBoundingBox(feature.geometry.coordinates);
+        if (isCityInState(lat, lon, boundingBox)) {
+            return feature.properties.name;  // Return the state's name if city is inside bounding box
+        }
+    }
+    return null;
+}
 
 // Fetch data from maps
-function fetchTx(freq, piCode, rdsPs) {
+async function fetchTx(freq, piCode, rdsPs) {
     const now = Date.now();
     freq = parseFloat(freq);
 
-    if(isNaN(freq)) {
+    if (isNaN(freq)) {
         return;
     }
-    // Check if it's been at least 3 seconds since the last fetch and if the QTH is correct
     if (now - lastFetchTime < fetchInterval || serverConfig.identification.lat.length < 2 || freq < 87) {
         return Promise.resolve();
     }
 
     lastFetchTime = now;
 
-    // Check if data for the given frequency is already cached
     if (cachedData[freq]) {
         return processData(cachedData[freq], piCode, rdsPs);
     }
@@ -34,32 +74,32 @@ function fetchTx(freq, piCode, rdsPs) {
 
     return fetch(url)
         .then(response => response.json())
-        .then(data => {
-            // Cache the fetched data for the specific frequency
+        .then(async (data) => {
             cachedData[freq] = data;
+            await loadUsStatesGeoJson();
             return processData(data, piCode, rdsPs);
         })
         .catch(error => {
+            console.error("Error fetching data:", error);
         });
 }
 
-function processData(data, piCode, rdsPs) {
+async function processData(data, piCode, rdsPs) {
     let matchingStation = null;
     let matchingCity = null;
-    let maxScore = -Infinity; // Initialize maxScore with a very low value
+    let maxScore = -Infinity;
     let txAzimuth;
     let maxDistance;
     let esMode = checkEs();
-    let detectedByPireg = false; // To track if the station was found by pireg
+    let detectedByPireg = false;
 
-    // Helper function to calculate score and update matching station/city
     function evaluateStation(station, city, distance) {
         let weightDistance = distance.distanceKm;
         if (esMode && distance.distanceKm > 500) {
             weightDistance = Math.abs(distance.distanceKm - 1500);
         }
         let erp = station.erp && station.erp > 0 ? station.erp : 1;
-        const score = (10 * Math.log10(erp * 1000)) / weightDistance; // Calculate score
+        const score = (10 * Math.log10(erp * 1000)) / weightDistance;
         if (score > maxScore) {
             maxScore = score;
             txAzimuth = distance.azimuth;
@@ -77,13 +117,13 @@ function processData(data, piCode, rdsPs) {
                 if (station.pi === piCode.toUpperCase() && !station.extra && station.ps && station.ps.toLowerCase().includes(rdsPs.replace(/ /g, '_').replace(/^_*(.*?)_*$/, '$1').toLowerCase())) {
                     const distance = haversine(serverConfig.identification.lat, serverConfig.identification.lon, city.lat, city.lon);
                     evaluateStation(station, city, distance);
-                    detectedByPireg = false; // Detected by pi, not pireg
+                    detectedByPireg = false;
                 }
             }
         }
     }
 
-    // If no matching station is found, fallback to pireg
+    // Fallback to pireg if no match is found
     if (!matchingStation) {
         for (const cityId in data.locations) {
             const city = data.locations[cityId];
@@ -92,27 +132,34 @@ function processData(data, piCode, rdsPs) {
                     if (station.pireg && station.pireg.toUpperCase() === piCode.toUpperCase() && !station.extra && station.ps && station.ps.toLowerCase().includes(rdsPs.replace(/ /g, '_').replace(/^_*(.*?)_*$/, '$1').toLowerCase())) {
                         const distance = haversine(serverConfig.identification.lat, serverConfig.identification.lon, city.lat, city.lon);
                         evaluateStation(station, city, distance);
-                        detectedByPireg = true; // Detected by pireg
+                        detectedByPireg = true;
                     }
                 }
             }
         }
     }
 
-    // Return the results if a station was found, otherwise return undefined
+    // Determine the state if the city is in the USA
+    if (matchingStation && matchingCity.itu === 'USA') {
+        const state = getStateForCoordinates(matchingCity.lat, matchingCity.lon);
+        if (state) {
+            matchingCity.state = state;  // Add state to matchingCity
+        }
+    }
+
     if (matchingStation) {
         return {
             station: matchingStation.station.replace("R.", "Radio "),
             pol: matchingStation.pol.toUpperCase(),
             erp: matchingStation.erp && matchingStation.erp > 0 ? matchingStation.erp : '?',
             city: matchingCity.name,
-            itu: matchingCity.itu,
+            itu: matchingCity.state ? matchingCity.state + ', ' + matchingCity.itu : matchingCity.itu,
             distance: maxDistance.toFixed(0),
             azimuth: txAzimuth.toFixed(0),
             id: matchingStation.id,
             pi: matchingStation.pi,
             foundStation: true,
-            reg: detectedByPireg // Indicates if it was detected by pireg
+            reg: detectedByPireg
         };
     } else {
         return;
@@ -151,26 +198,19 @@ function checkEs() {
 }
 
 function haversine(lat1, lon1, lat2, lon2) {
-    const R = 6371; // Earth radius in kilometers
+    const R = 6371;
     const dLat = deg2rad(lat2 - lat1);
     const dLon = deg2rad(lon2 - lon1);
-
     const a =
         Math.sin(dLat / 2) * Math.sin(dLat / 2) +
         Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
-
     const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-
-    // Distance in kilometers
     const distance = R * c;
 
-    // Azimuth calculation
     const y = Math.sin(dLon) * Math.cos(deg2rad(lat2));
     const x = Math.cos(deg2rad(lat1)) * Math.sin(deg2rad(lat2)) -
               Math.sin(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.cos(dLon);
     const azimuth = Math.atan2(y, x);
-
-    // Convert azimuth from radians to degrees
     const azimuthDegrees = (azimuth * 180 / Math.PI + 360) % 360;
 
     return {
@@ -179,7 +219,6 @@ function haversine(lat1, lon1, lat2, lon2) {
     };
 }
 
-
 function deg2rad(deg) {
     return deg * (Math.PI / 180);
 }

web/css/breadcrumbs.css

@@ -191,40 +191,22 @@ label {
   }
   
   .checkbox label {
-    position: relative;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    user-select: none;
-  }
-  
-  .checkbox label:before {
-    content:'';
-    appearance: none;
-    -webkit-appearance: none;
-    background-color: transparent;
-    border: 2px solid var(--color-4);
-    padding: 10px;
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-    cursor: pointer;
-    margin-right: 5px;
-  }
-  
-  .form-group input:checked + label:before {
-    background-color: var(--color-4);
-  }
-
-  .form-group input:checked + label:after {
-    content: '✓';
     display: block;
-    position: absolute;
-    font-size: 18px;
-    top: -1px;
-    left: 5px;
-    width: 18px;
-    height: 18px;
+    user-select: none;
+    padding: 7px 20px;
+    border-radius: 15px;
+    text-align: center;
+    border: 2px solid var(--color-4);
+    box-sizing: border-box;
+    transition: 0.35s ease background-color, 0.35s ease color;
+  }
+  .checkbox label:hover {
+    background-color: var(--color-2);
+  }
+  
+ .form-group input:checked + label {
+    background-color: var(--color-4);
     color: var(--color-main);
   }
 

web/css/buttons.css

@@ -18,6 +18,10 @@ button:hover {
     opacity: 0.6;
 }
 
+.cursor-disabled {
+    cursor: not-allowed;
+}
+
 .btn-next {
     width: 200px;
     padding: 10px;

web/css/helpers.css

@@ -190,6 +190,10 @@
     padding: 10px;
 }
 
+.p-20 {
+    padding: 20px;
+}
+
 .p-left-10 {
     padding-left: 10px;
 }

web/css/main.css

@@ -73,7 +73,6 @@ body {
 .wrapper-outer-static {
     display: block !important;
     padding-top: 10px;
-    padding-bottom: 10px;
 }
 
 #wrapper {
@@ -84,6 +83,8 @@ body {
     margin: auto;
     position: static;
     transform: none;
+    width: calc(100% - 420px);
+    margin-left: 420px;
 }
 
 a {
@@ -142,3 +143,14 @@ hr {
         width: 100%;
     }
 }
+
+@media (max-width: 768px) {
+    #wrapper.setup-wrapper {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .setup-wrapper h2 {
+        display: initial;
+    }
+}

web/css/panels.css

@@ -52,6 +52,19 @@
     width: 98%;
 }
 
+.panel-100-real {
+    width: 100%;
+}
+
+.panel-full {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    max-width: 100% !important;
+    transition: 0.35s ease;
+    box-sizing: border-box;
+}
+
 @media only screen and (max-width: 768px) {
     .panel-75 {
         width: 90%;

web/css/setup.css

@@ -10,14 +10,13 @@
 }
 
 .setup-wrapper h2 {
-    font-size: 32px;
+    font-size: 42px;
     font-weight: 300;
-    padding: 10px;
-    text-transform: uppercase;
+    padding: 20px 15px;
+    text-align: left;
 }
 
-
-.setup-wrapper textarea {
+#wrapper textarea {
     width: 100%;
     max-width: 768px;
     background-color: var(--color-2);
@@ -26,34 +25,92 @@
     padding-top: 10px;
 }
 
+.sidenav {
+    background-color: var(--color-main);
+  }
+
+  .sidenav li a:focus {
+    outline: none;
+  }
+
+  .sidenav-content {
+    flex: 1;
+    position: relative;
+    overflow-y: auto;
+  }
+  
+  .sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+  }
+
+  .sidenav h1 {
+    font-size: 42px;
+    text-transform: initial;
+    font-weight: 300;
+    text-align: center;
+  }
 ul.nav {
     list-style-type: none;
     padding: 15px 0;
-    background: var(--color-2);
     border-radius: 15px;
 }
 
 ul.nav li {
-    display: inline;
-    padding: 15px;
+    padding: 12px 20px;
     cursor: pointer;
     transition: color 0.3s ease, background-color 0.3s ease;
     user-select: none;
 }
 
-ul.nav li:hover {
-    color: var(--color-main);
-    background-color: var(--color-4);
+ul.nav li a {
+    color: var(--color-5) !important;
 }
 
-li.active {
+
+ul.nav li:hover {
     background-color: var(--color-3);
 }
 
+ul.nav li:hover a {
+    color: var(--color-main) !important;
+}
+
+ul.nav li.active a {
+    color: var(--color-main) !important;
+    font-weight: bold;
+}
+
+
+li.active {
+    background-color: var(--color-4);
+}
+
 .tab-content {
     display: none;
 }
 
+#navigation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 420px; /* Width of the sidenav */
+    height: 100%;
+    z-index: 1000; /* Ensure it's above other content */
+    transition: margin-left 0.3s ease; /* Smooth transition */
+  }
+  
+  .admin-wrapper {
+    transition: margin-left 0.3s ease, width 0.3s ease;
+  }
+
+  .admin-wrapper > .panel-full > .panel-full {
+    min-height: 100vh;
+  }
+
 #map {
     height:400px;
     width:100%;
@@ -66,6 +123,12 @@ li.active {
 .setup-wrapper h3 {
     font-weight: 300;
     margin: 8px;
+    font-size: 36px;
+    color: var(--color-5)
+}
+
+.setup-wrapper h4 {
+    color: var(--color-4);
 }
 
 
@@ -87,18 +150,15 @@ li.active {
 }
 
 @media only screen and (max-width: 768px) {
-    ul.nav {
-        display: flex;
-        overflow-y: scroll;
-        background: transparent;
+    .setup-wrapper .panel-33, .setup-wrapper .panel-50 {
+        background: var(--color-1-transparent);
     }
+    #navigation {
+        width: 100vw; /* You can make the sidenav full width on mobile if you want */
+      }
       
-    ul.nav li {
-        background-color: var(--color-4);
-        color: var(--color-main);
-        margin: 0px 10px;
-        padding: 15px 35px;
-        border-radius: 15px;
-        min-width: fit-content;
-    }
+      .admin-wrapper {
+        margin-left: 0;
+        width: 100%;
+      }
 }

web/css/toast.css

@@ -1,4 +1,11 @@
   /* Basic Toast Styling */
+  #toast-container {
+    position: fixed;
+    top: 20px;
+    right: 96px;
+    z-index: 9999;
+  }
+
   .toast {
     padding: 15px;
     margin-top: 10px;
@@ -8,7 +15,7 @@
     position: relative;
     transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
     transform: translateY(-10px); /* Initial animation state */
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(50px);
   }
 
   .toast:hover {
@@ -88,3 +95,13 @@
     color: #fff;
     cursor: pointer;
   }
+
+  @media only screen and (max-width: 768px) {
+    #toast-container {
+      left: 0;
+      right: 0;
+    }
+    .toast {
+      margin: auto;
+    }
+}

web/index.ejs

@@ -157,17 +157,11 @@
                     
                     <div class="panel-33 hide-phone no-bg">
                         <div class="flex-container">
-                            <% if(device === 'other' || bwSwitch == false) { %>
-                                <span class="panel-100 m-0 h-100" style="height: 48px;width: 100%;">
-                                    <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1"  aria-label="Volume slider">
-                                </span>
-                            <% } else { %>
-                                <span class="panel-100 m-0" style="margin-right: 15px !important;height: 48px;">
-                                    <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1"  aria-label="Volume slider">
-                                </span>
-                            <% } %>
+                            <span class="panel-100-real m-0" style="height: 48px;">
+                                <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1"  aria-label="Volume slider">
+                            </span>
                             <% if (device == 'tef' && bwSwitch == true) { %>
-                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
+                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 15px !important;">
                                     <input type="text" placeholder="Auto BW" readonly tabindex="0">
                                     <ul class="options open-top" tabindex="-1">
                                         <li data-value="0" class="option" tabindex="0">Auto</li>
@@ -191,7 +185,7 @@
                             <% } %>
 
                             <% if (device == 'xdr' && bwSwitch == true) { %>
-                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
+                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 15px !important;">
                                     <input type="text" placeholder="Auto BW" readonly tabindex="0">
                                     <ul class="options open-top" tabindex="-1">
                                         <li data-value="0" data-value2="-1" class="option" tabindex="0">Auto</li>
@@ -216,7 +210,7 @@
                             <% } %>
 
                             <% if (device == 'sdr' && bwSwitch == true) { %>
-                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
+                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 15px !important;">
                                     <input type="text" placeholder="Auto BW" readonly tabindex="0">
                                     <ul class="options open-top" tabindex="-1">
                                         <li data-value="0" class="option" tabindex="0">Auto</li>
@@ -236,9 +230,11 @@
                                     </ul>
                                 </div>
                             <% } %>
-                            <!--<button class="tooltip bg-color-4" id="log-fmlist" 
+                            <% if (fmlist_integration == true) { %>
+                            <button class="tooltip bg-color-4" id="log-fmlist" 
                             data-tooltip="<strong>LOG TO FMLIST</strong><br>Clicking this button logs the current station to FMLIST's visual logbook." aria-label="Chatbox"
-                            style="width: 80px; height: 48px;margin-left: 15px;"><i class="fa-solid fa-flag fa-lg"></i></button>-->
+                            style="width: 80px; height: 48px;margin-left: 15px !important;"><i class="fa-solid fa-flag fa-lg"></i></button>
+                            <% } %>
                         </div>
                     </div>
                 </div>
@@ -360,11 +356,11 @@
             
             <div class="form-group checkbox">
                 <input type="checkbox" tabindex="0"  id="extended-frequency-range" aria-label="Add decimals manually">
-                <label for="extended-frequency-range">Add decimals manually</label>
+                <label for="extended-frequency-range" class="tooltip" data-tooltip="Enabling this will allow you to enter the decimal point manually.<br>Useful for servers that use upconverters.">Manual decimal entry</label>
             </div>
             <div class="form-group checkbox">
                 <input type="checkbox" tabindex="0" id="ps-underscores" aria-label="Add underscores to RDS PS">
-                <label for="ps-underscores">Add underscores to RDS PS</label>
+                <label for="ps-underscores" class="tooltip" data-tooltip="Enabling this option replaces spaces in RDS PS with underscores.">Underscores in RDS PS</label>
             </div>
 
             <div class="form-group bottom-20 hide-desktop" style="float: none;">
@@ -493,7 +489,7 @@
     </div>
 </div>
 </div>
-<div id="toast-container" style="position: fixed; top: 20px; right: 96px; z-index: 9999;"></div>
+<div id="toast-container"></div>
 <script src="js/websocket.js"></script>
 <script src="js/webserver.js"></script>
 <% if (!noPlugins) { %>

web/js/confighandler.js

@@ -77,6 +77,9 @@ function submitData() {
       plugins.push($(this).data('name'));
   });
 
+    const fmlistIntegration = $("#fmlist-integration").is(":checked") || false;
+    const fmlistOmid = $('#fmlist-omid').val();
+
     const publicTuner = $("#tuner-public").is(":checked");
     const lockToAdmin = $("#tuner-lock").is(":checked");
     const autoShutdown = $("#shutdown-tuner").is(":checked") || false;
@@ -143,6 +146,10 @@ function submitData() {
         tunePass,
         adminPass,
       },
+      extras: {
+        fmlistIntegration,
+        fmlistOmid,
+      },
       plugins,
       device,
       publicTuner, 
@@ -164,7 +171,7 @@ function submitData() {
       contentType: 'application/json',
       data: JSON.stringify(data),
       success: function (message) {
-        alert(message);
+        sendToast('success', 'Data saved!', message, true, true);
       },
       error: function (error) {
         console.error(error);
@@ -307,6 +314,9 @@ function submitData() {
             });
           }
         }
+
+        $("#fmlist-integration").prop("checked", data.extras ? data.extras?.fmlist_integration : "true");
+        $('#fmlist-omid').val(data.extras?.fmlist_omid);
       })
       .catch(error => {
         console.error('Error fetching data:', error.message);

web/js/init.js

@@ -1,9 +1,9 @@
-var currentDate = new Date('Sep 12, 2024 21:30:00');
+var currentDate = new Date('Sep 15, 2024 00:00:00');
 var day = currentDate.getDate();
 var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
 var year = currentDate.getFullYear();
 var formattedDate = day + '/' + month + '/' + year; 
-var currentVersion = 'v1.2.8.1 [' + formattedDate + ']';
+var currentVersion = 'v1.3.0 [' + formattedDate + ']';
 
 getInitialSettings();
 removeUrlParameters(); // Call this function to remove URL parameters
@@ -30,9 +30,8 @@ function getInitialSettings() {
 }
 
 function removeUrlParameters() {
-    // Get the current URL without the query parameters
-    var urlWithoutParams = window.location.protocol + "//" + window.location.host + window.location.pathname;
-
-    // Replace the current URL with the new one, without reloading the page
-    window.history.replaceState({ path: urlWithoutParams }, '', urlWithoutParams);
+    if (window.location.pathname === "/") {
+        var urlWithoutParams = window.location.protocol + "//" + window.location.host + window.location.pathname;
+        window.history.replaceState({ path: urlWithoutParams }, '', urlWithoutParams);
+    }
 }

web/js/main.js

@@ -828,12 +828,18 @@ const updateDataElements = throttle(function(parsedData) {
         updateTextIfChanged($('#data-station-pol'), parsedData.txInfo.pol);
         updateTextIfChanged($('#data-station-distance'), parsedData.txInfo.dist);
         updateHtmlIfChanged($('#data-station-azimuth'), parsedData.txInfo.azi + '°');
-        updateHtmlIfChanged($('#data-regular-pi'), parsedData.txInfo.reg === true ? parsedData.txInfo.pi : ' ');
         $dataStationContainer.css('display', 'block');
     } else {
         $dataStationContainer.removeAttr('style');
     }
 
+    if(parsedData.txInfo.tx.length > 1 && parsedData.txInfo.dist > 150 && parsedData.txInfo.dist < 4000) {
+        $('#log-fmlist').attr('disabled', 'false').removeClass('btn-disabled cursor-disabled');
+    } else {
+        $('#log-fmlist').attr('disabled', 'true').addClass('btn-disabled cursor-disabled');
+    }
+    updateHtmlIfChanged($('#data-regular-pi'), parsedData.txInfo.reg === true ? parsedData.txInfo.pi : '&nbsp;');
+
     updateCounter++;
     if (updateCounter % 8 === 0) {
         $dataTp.html(parsedData.tp === 0 ? "<span class='opacity-half'>TP</span>" : "TP");

web/js/setup.js

@@ -153,6 +153,7 @@ $(document).ready(function() {
 
   updateTabFocus(currentTabIndex);
   $tabs.on('keydown', handleKeyDown);
+  //toggleNav();
 });
 
 function MapCreate() {
@@ -188,4 +189,49 @@ function MapCreate() {
         // Add active class to the corresponding li element
         $('.nav li[data-panel="' + panelId + '"]').addClass('active');
     }
+    if(window.location.hash.length == 0) {
+      $('.nav li[data-panel="dashboard"]').addClass('active');
+    }
+}
+
+function toggleNav() {
+  const navOpen = $("#navigation").css('margin-left') === '0px';
+  const isMobile = window.innerWidth <= 768; // Define mobile screen width threshold (you can adjust this as needed)
+
+  if (navOpen) {
+    // Close the navigation
+    if (isMobile) {
+      // Do nothing to .admin-wrapper on mobile (since we're overlaying)
+      $(".admin-wrapper").css({
+        'margin-left': '0',
+        'width': '100%' // Reset content to full width on close
+      });
+      $("#navigation").css('margin-left', 'calc(64px - 100vw)');
+    } else {
+      // On desktop, adjust the content margin and width
+      $(".admin-wrapper").css({
+        'margin-left': '64px',
+        'width': 'calc(100% - 64px)'
+      });
+      $("#navigation").css('margin-left', '-356px');
+    }
+    $(".sidenav-close").html('<i class="fa-solid fa-chevron-right"></i>');
+  } else {
+    // Open the navigation
+    $("#navigation").css('margin-left', '0');
+    if (isMobile) {
+      // On mobile, overlay the navigation
+      $(".admin-wrapper").css({
+        'margin-left': '0', // Keep content in place when sidenav is open
+        'width': '100%' // Keep content at full width
+      });
+    } else {
+      // On desktop, push the content
+      $(".admin-wrapper").css({
+        'margin-left': '420px',
+        'width': 'calc(100% - 420px)'
+      });
+    }
+    $(".sidenav-close").html('<i class="fa-solid fa-chevron-left"></i>');
+  }
 }

web/js/toast.js

@@ -18,7 +18,7 @@ function sendToast(type, title, message, persistent, important) {
 
     // Create the toast element
     var $toast = $(`
-        <div class="toast ${type} flex-container ${important ? 'important' : ''}" id="${toastId}">
+        <div class="toast ${type} flex-container flex-phone ${important ? 'important' : ''}" id="${toastId}">
           <div class="toast-icon"><i class="fa-solid ${iconClass}"></i></div>
           <div>
             <div class="toast-title">${toastTitle}</div>

web/login.ejs

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Login - FM-DX Webserver</title>
+    <link href="css/entry.css" type="text/css" rel="stylesheet">
+    <link href="css/flags.min.css" type="text/css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" type="text/css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" type="text/css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+    <div id="toast-container"></div>
+    <div id="wrapper-outer">
+    <div id="wrapper">
+        <div class="panel-100 no-bg">
+            <img class="top-25" src="../favicon.png" height="64px">
+            <p>You are currently not logged in as an administrator and therefore can't change the settings.</p>
+            <p>Please login below.</p>
+        </div>
+        <div class="panel-100 p-bottom-20">
+            <h1 class="text-light">Login</h1>
+            <form action="./login" method="post" id="login-form">
+                <input type="password" id="password" name="password" placeholder="Password" style="width: 250px; background-color: var(--color-2);" required>
+                <button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -4px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
+                    <i class="fa-solid fa-right-to-bracket"></i>
+                </button>
+              </form>
+        </div>
+    </div>
+    </div>
+    <script src="js/settings.js"></script>
+    <script src="js/toast.js"></script>
+</body>
+</html>

web/setup.ejs

@@ -12,268 +12,244 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-    <div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>
+    <div id="toast-container"></div>
     <div id="wrapper-outer" class="wrapper-outer-static">
-    <div id="wrapper" class="setup-wrapper">
-        <% if (isAdminAuthenticated) { %>
-        <div class="panel-100 no-bg">
-            <img class="top-10" src="./images/openradio_logo_neutral.png" height="64px">
-            <h2 class="text-monospace text-light">[ADMIN PANEL]</h2>
-        </div>
-        <div class="panel-100" style="border-radius: 15px 15px 0 0;">
-            <ul class="nav" role="tablist" style="border-radius: 15px 15px 0 0;">
-                <li role="presentation" data-panel="dashboard" aria-selected="true">
-                    <a href="#" role="tab" tabindex="0" aria-controls="dashboard">Dashboard</a>
-                </li>
-                <li role="presentation" data-panel="tuner">
-                    <a href="#" role="tab" tabindex="-1" aria-controls="tuner">Tuner</a>
-                </li>
-                <li role="presentation" data-panel="connection">
-                    <a href="#" role="tab" tabindex="-1" aria-controls="connection">Connection</a>
-                </li>
-                <li role="presentation" data-panel="audio">
-                    <a href="#" role="tab" tabindex="-1" aria-controls="audio">Audio</a>
-                </li>
-                <li role="presentation" data-panel="webserver">
-                    <a href="#" role="tab" tabindex="-1" aria-controls="webserver">Webserver</a>
-                </li>
-                <li role="presentation" data-panel="plugins">
-                    <a href="#" role="tab" tabindex="-1" aria-controls="plugins">Plugins</a>
-                </li>
-                <li role="presentation" data-panel="identification">
-                    <a href="#" role="tab" tabindex="-1" aria-controls="identification">Info & Map</a>
-                </li>
-                <li role="presentation" class="logout-link text-gray">
-                    <a href="./logout"><i class="fas fa-sign-out"></i></a>
-                </li>
-            </ul>
-        </div>
+        <div id="navigation" class="sidenav flex-container flex-phone">
+            <div class="sidenav-content">
+                <h1 class="top-25">Settings</h1>
+                <ul class="nav" role="tablist" style="border-radius: 15px 15px 0 0;">
+                    <li role="presentation" data-panel="dashboard" aria-selected="true">
+                        <a href="#" role="tab" tabindex="0" aria-controls="dashboard"><i class="fa-solid fa-fw fa-chart-line"></i> Dashboard</a>
+                    </li>
+                    <li role="presentation" data-panel="tuner">
+                        <a href="#" role="tab" tabindex="-1" aria-controls="tuner"><i class="fa-solid fa-fw fa-radio"></i> Tuner</a>
+                    </li>
+                    <li role="presentation" data-panel="audio">
+                        <a href="#" role="tab" tabindex="-1" aria-controls="audio"><i class="fa-solid fa-fw fa-volume-high"></i> Audio</a>
+                    </li>
+                    <li role="presentation" data-panel="webserver">
+                        <a href="#" role="tab" tabindex="-1" aria-controls="webserver"><i class="fa-solid fa-fw fa-server"></i> Webserver</a>
+                    </li>
+                    <li role="presentation" data-panel="plugins">
+                        <a href="#" role="tab" tabindex="-1" aria-controls="plugins"><i class="fa-solid fa-fw fa-puzzle-piece"></i> Plugins</a>
+                    </li>
+                    <li role="presentation" data-panel="identification">
+                        <a href="#" role="tab" tabindex="-1" aria-controls="identification"><i class="fa-solid fa-fw fa-circle-info"></i> Identification & Map</a>
+                    </li>
+                    <li role="presentation" data-panel="extras">
+                        <a href="#" role="tab" tabindex="-1" aria-controls="extras"><i class="fa-solid fa-fw fa-star"></i> Extras</a>
+                    </li>
 
-        <div class="panel-100" style="margin-top: -20px; border-radius: 0 0 15px 15px;">
-            <div class="panel-100 tab-content no-bg no-bg" id="dashboard" role="tabpanel">
+                    <div class="admin-quick-dashboard top-25">
+                        <div class="icon tooltip" role="button" aria-label="Go back to the main screen" tabindex="0" data-tooltip="Go back to the main screen" onclick="document.location.href='./'">
+                            <i class="fa-solid fa-arrow-left"></i>
+                        </div>
+                        <div class="icon tooltip" id="submit-config" role="button" aria-label="Save settings" tabindex="0" data-tooltip="Save settings" onclick="submitData()">
+                            <i class="fa-solid fa-save"></i>
+                        </div>
+                        <div class="icon tooltip logout-link" role="button" aria-label="Sign out" tabindex="0" data-tooltip="Sign out">
+                            <i class="fa-solid fa-sign-out"></i>
+                        </div>
+                    </div>
+                    <hr>
+                    <div class="panel-100 no-bg">
+                        <p class="color-4">Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong class="color-5"><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
+                        <a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank" class="text-small">Version: <span class="version-string color-4"></span></a>
+                    </div>
+                </ul>
+            </div>
+            <div class="sidenav-close text-medium-big hover-brighten flex-center color-4 modal-panel-sidebar" role="button" onclick="toggleNav()" aria-label="Toggle navigation" tabindex="0"><i class="fa-solid fa-chevron-left"></i></div>
+        </div>
+    <div id="wrapper" class="setup-wrapper admin-wrapper panel-full">
+        <div class="panel-full" style="margin-top: -20px; border-radius: 0; padding-left: 20px;padding-right: 20px;">
+            <div class="panel-full tab-content no-bg m-0" id="dashboard" role="tabpanel">
                 <h2>Dashboard</h2>
 
-                <div class="panel-100 flex-container auto p-bottom-20">
-                    <div class="panel-33 no-bg">
+                <div class="flex-container">
+                    <div class="panel-33 p-20">
                         <span class="text-medium-big color-5"><%= onlineUsers %></span>
-                        <p class="m-0">Online users</p>
+                        <p>Online users</p>
                     </div>
 
-                    <div class="panel-33 no-bg">
+                    <div class="panel-33 p-20">
                         <span class="text-medium-big color-5"><%= memoryUsage %></span>
-                        <p class="m-0">Memory usage</p>
+                        <p>Memory usage</p>
                     </div>
 
-                    <div class="panel-33 no-bg">
+                    <div class="panel-33 p-20">
                         <span class="text-medium-big color-5"><%= processUptime %></span>
-                        <p class="m-0">Uptime</p>
+                        <p >Uptime</p>
                     </div>
                 </div>
 
-                <h3>Current users</h3>
-                <table class="table-big">
-                    <thead>
-                        <tr>
-                            <th>IP Address</th>
-                            <th>Location</th>
-                            <th>Online since</th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <% if (connectedUsers.length > 0) { %>
-                            <% connectedUsers.forEach(user => { %>
+                <div class="flex-container">
+                    <div class="panel-50 p-bottom-20">
+                        <h3>Current users</h3>
+                        <table class="table-big">
+                            <thead>
                                 <tr>
-                                    <td><a href="https://dnschecker.org/ip-location.php?ip=<%= user.ip %>" target="_blank"><%= user.ip %></a></td>
-                                    <td><%= user.location %></td>
-                                    <td><%= user.time %></td>
-                                    <td><a href="./kick?ip=<%= user.ip %>">Kick</a></td>
+                                    <th>IP Address</th>
+                                    <th>Location</th>
+                                    <th>Online since</th>
+                                    <th></th>
                                 </tr>
-                            <% }); %>
-                        <% } else { %>
-                            <tr>
-                                <td colspan="4" style="text-align: center">No users online</td>
-                            </tr>
-                        <% } %>
-                    </tbody>
-                </table>    
-                
-                <h3>Maintenance</h3>
-                <div class="flex-container flex-center" style="margin: 30px;">
-                    <div class="form-group checkbox">
-                        <input type="checkbox" tabindex="0"  id="tuner-public" aria-label="Public tuner (no password)">
-                        <label for="tuner-public">Public tuner (no password)</label>
+                            </thead>
+                            <tbody>
+                                <% if (connectedUsers.length > 0) { %>
+                                    <% connectedUsers.forEach(user => { %>
+                                        <tr>
+                                            <td><a href="https://dnschecker.org/ip-location.php?ip=<%= user.ip %>" target="_blank"><%= user.ip %></a></td>
+                                            <td><%= user.location %></td>
+                                            <td><%= user.time %></td>
+                                            <td><a href="./kick?ip=<%= user.ip %>">Kick</a></td>
+                                        </tr>
+                                    <% }); %>
+                                <% } else { %>
+                                    <tr>
+                                        <td colspan="4" style="text-align: center">No users online</td>
+                                    </tr>
+                                <% } %>
+                            </tbody>
+                        </table>    
                     </div>
-                    <div class="form-group checkbox">
-                        <input type="checkbox" tabindex="0"  id="tuner-lock" aria-label="Admin lock (only admins can tune)">
-                        <label for="tuner-lock">Admin lock (only admins can tune)</label>
-                    </div>
-                    <div class="form-group checkbox">
-                        <input type="checkbox" tabindex="0"  id="shutdown-tuner" aria-label="Auto shutdown">
-                        <label for="shutdown-tuner">Auto-shutdown</label>
-                    </div><br>
-                </div>
                     
-                <div class="form-group">
-                    <label for="tune-pass">Tune password:</label>
-                    <input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
-                </div>
-                <div class="form-group">
-                    <label for="admin-pass">Admin setup password:</label>
-                    <input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
-                </div><br>
-
-                <h3>Console</h3>
-                <% if (consoleOutput && consoleOutput.length > 0) { %>
-                    <div class="panel-100 br-5 p-10 text-small text-left top-10" id="console-output">
-                        <% consoleOutput.forEach(function(log) { %>
-                            <pre class="m-0" style="white-space:pre-wrap;"><%= log %></pre>
-                        <% }); %>
-                    </div>
-                <% } else { %>
-                    <p>No console output available.</p>
-                <% } %>
-
-                <p class="text-small">Version: <span class="version-string color-4"></span></p>
-                <p><a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank">Check for the latest source code</a> • <a href="https://buymeacoffee.com/noobish" target="_blank">Support the developer</a></p>
-            </div>
-    
-            <div class="panel-100 tab-content no-bg" id="connection" role="tabpanel">
-                <h2>Connection settings</h2>
-                <p>You can set up your connection settings here. Changing these settings requires a server restart.</p>
-                <h3>Tuner connection:</h3>
-
-                <div style="width: 300px;" class="auto top-10">
-                    <label class="toggleSwitch nolabel" onclick="">
-                        <input id="connection-type-toggle" type="checkbox" tabindex="0" aria-label="Connection type"/>
-                        <a></a>
-                        <span>
-                            <span class="left-span">Direct</span>
-                            <span class="right-span">TCP/IP</span>
-                        </span>											
-                    </label>
-                </div>
-
-                <div id="tuner-usb" class="top-25">
-                    <div class="form-group">
-                        <label for="com-devices"><i class="fa-brands fa-usb"></i> USB Device:</label>
-                        <div class="dropdown" style="width: 300px;margin-right: 0;">
-                            <input id="com-devices" type="text" name="com-devices" placeholder="Choose your USB device" readonly tabindex="0" />
-                            <ul class="options" tabindex="-1" id="deviceList">
-                                <% serialPorts.forEach(serialPort => { %>
-                                    <li data-value="<%= serialPort.path %>" class="option" tabindex="0"><%= serialPort.path %> - <%= serialPort.friendlyName %></li>
-                                <% }); %>
-                            </ul>
+                    <div class="panel-50 p-bottom-20">
+                        <h3>Quick settings</h3>
+                        <div class="flex-container flex-center" style="margin: 30px;">
+                            <div class="form-group checkbox">
+                                <input type="checkbox" tabindex="0"  id="tuner-public" aria-label="Public tuner (no password)">
+                                <label for="tuner-public">Tune lock</label>
+                            </div>
+                            <div class="form-group checkbox">
+                                <input type="checkbox" tabindex="0"  id="tuner-lock" aria-label="Admin lock (only admins can tune)">
+                                <label for="tuner-lock">Admin lock</label>
+                            </div><br>
                         </div>
+        
+                        <div class="form-group">
+                            <label for="tune-pass">Tune password:</label>
+                            <input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
+                        </div>
+                        <div class="form-group">
+                            <label for="admin-pass">Admin setup password:</label>
+                            <input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
+                        </div><br>
                     </div>
                 </div>
 
-                <div id="tuner-wireless">
-                    <p class="text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
-                    <div class="form-group">
-                        <label for="xdrd-ip">xdrd ip address:</label>
-                        <input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
-                    </div>  
-                    <div class="form-group">
-                        <label for="xdrd-port">xdrd port:</label>
-                        <input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
-                    </div> 
-                    <div class="form-group">
-                        <label for="xdrd-password">xdrd server password:</label>
-                        <input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
+                <div class="flex-container">
+                    <div class="panel-100-real p-bottom-20 bottom-20">
+                        <h3>Console</h3>
+                        <% if (consoleOutput && consoleOutput.length > 0) { %>
+                            <div class="panel-100 auto br-5 p-10 text-small text-left top-10" id="console-output">
+                                <% consoleOutput.forEach(function(log) { %>
+                                    <pre class="m-0" style="white-space:pre-wrap;"><%= log %></pre>
+                                <% }); %>
+                            </div>
+                        <% } else { %>
+                            <p>No console output available.</p>
+                        <% } %>
                     </div>
                 </div>
-
-                <br class="top-25">
-
-                <h3>Webserver connection:</h3>
-                <p class="text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p>
-                <div class="form-group">
-                    <label for="webserver-ip">Webserver IP:</label>
-                    <input class="input-text w-150" type="text" name="webserver-ip" id="webserver-ip" placeholder="0.0.0.0">
-                </div>  
-                <div class="form-group">
-                    <label for="webserver-port">Webserver port:</label>
-                    <input class="input-text w-100" type="text" name="webserver-port" id="webserver-port" placeholder="8080">
-                </div> 
-                <br>
             </div>
 
-            <div class="panel-100 tab-content no-bg" id="audio" role="tabpanel">
+            <div class="panel-full tab-content no-bg m-0" id="audio" role="tabpanel">
                 <h2>Audio settings</h2>
                 
-                <p>You can set up your audio settings here. Changing these settings requires a server restart.</p>
-                <div class="panel-100 p-bottom-20">
-                    <div class="form-group">
-                        <p class="text-left">Your audio device port.<br>
-                            <span class="text-gray">This is where your tuner is plugged in.</span>
-                        </p>
-                        <label for="audio-devices"><i class="fa-solid fa-headphones"></i> STREAM AUDIO FROM:</label>
-                        <div class="dropdown" style="width: 300px;">
-                            <input id="audio-devices" type="text" name="audio-devices" placeholder="Choose your audio device" readonly tabindex="0" />
-                            <ul class="options" tabindex="-1" id="deviceList">
-                                <% videoDevices.forEach(device => { %>
-                                    <li data-value="<%= device.name %>" class="option" tabindex="0"><%= device.name %></li>
-                                <% }); %>
-                                <% audioDevices.forEach(device => { %>
-                                    <li data-value="<%= device.name %>" class="option" tabindex="0"><%= device.name %></li>
-                                <% }); %>
-                            </ul>
+                <div class="flex-container">
+                        <div class="panel-33 p-bottom-20">
+                            <h3>Device</h3>
+                            <div class="form-group">
+                                <p class="text-left">Your audio device port.<br>
+                                    <span class="text-gray">This is where your tuner is plugged in.</span>
+                                </p>
+                                <label for="audio-devices"><i class="fa-solid fa-headphones"></i> STREAM AUDIO FROM:</label>
+                                <div class="dropdown" style="width: 300px;">
+                                    <input id="audio-devices" type="text" name="audio-devices" placeholder="Choose your audio device" readonly tabindex="0" />
+                                    <ul class="options" tabindex="-1" id="deviceList">
+                                        <% videoDevices.forEach(device => { %>
+                                            <li data-value="<%= device.name %>" class="option" tabindex="0"><%= device.name %></li>
+                                        <% }); %>
+                                        <% audioDevices.forEach(device => { %>
+                                            <li data-value="<%= device.name %>" class="option" tabindex="0"><%= device.name %></li>
+                                        <% }); %>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <p class="text-left">Audio channel count.<br>
-                            <span class="text-gray">Choose between Mono / Stereo.</span>
-                        </p>
-                        <label for="audio-devices"><i class="fa-solid fa-microphone-lines"></i> Audio channels:</label>
-                        <div class="dropdown" style="width: 300px;">
-                            <input id="audio-channels" type="text" name="audio-channels" placeholder="Stereo" readonly tabindex="0" />
-                            <ul class="options" tabindex="-1">
-                                <li data-value="2" class="option" tabindex="0">Stereo</li>
-                                <li data-value="1" class="option" tabindex="0">Mono</li>
-                            </ul>
+                        <div class="panel-33 p-bottom-20">
+                            <h3>Channels</h3>
+                            <div class="form-group">
+                                <p class="text-left">Audio channel count.<br>
+                                    <span class="text-gray">Choose between Mono / Stereo.</span>
+                                </p>
+                                <label for="audio-devices"><i class="fa-solid fa-microphone-lines"></i> Audio channels:</label>
+                                <div class="dropdown" style="width: 300px;">
+                                    <input id="audio-channels" type="text" name="audio-channels" placeholder="Stereo" readonly tabindex="0" />
+                                    <ul class="options" tabindex="-1">
+                                        <li data-value="2" class="option" tabindex="0">Stereo</li>
+                                        <li data-value="1" class="option" tabindex="0">Mono</li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <p class="text-left">The bitrate of the mp3 audio.<br>
-                        <span class="text-gray">Minimum: 64 Kbps • Maximum: 320 Kbps</span>
-                        </p>
-                        <label for="audio-quality"><i class="fa-solid fa-wave-square"></i> Audio quality:</label>
-                        <div class="dropdown" style="width: 300px;">
-                            <input id="audio-quality" type="text" name="audio-quality" placeholder="128k (standard)" readonly tabindex="0" />
-                            <ul class="options" tabindex="-1">
-                                <li data-value="64k" class="option" tabindex="0">64k (lowest quality)</li>
-                                <li data-value="96k" class="option" tabindex="0">96k (low quality)</li>
-                                <li data-value="128k" class="option" tabindex="0">128k (standard)</li>
-                                <li data-value="192k" class="option" tabindex="0">192k (higher quality)</li>
-                                <li data-value="256k" class="option" tabindex="0">256k (very high quality)</li>
-                                <li data-value="320k" class="option" tabindex="0">320k (ultra quality)</li>
-                            </ul>
+                        <div class="panel-33 p-bottom-20">
+                            <h3>Bitrate</h3>
+                            <div class="form-group">
+                                <p class="text-left">The bitrate of the mp3 audio.<br>
+                                <span class="text-gray">Minimum: 64 Kbps • Maximum: 320 Kbps</span>
+                                </p>
+                                <label for="audio-quality"><i class="fa-solid fa-wave-square"></i> Audio quality:</label>
+                                <div class="dropdown" style="width: 300px;">
+                                    <input id="audio-quality" type="text" name="audio-quality" placeholder="128k (standard)" readonly tabindex="0" />
+                                    <ul class="options" tabindex="-1">
+                                        <li data-value="64k" class="option" tabindex="0">64k (lowest quality)</li>
+                                        <li data-value="96k" class="option" tabindex="0">96k (low quality)</li>
+                                        <li data-value="128k" class="option" tabindex="0">128k (standard)</li>
+                                        <li data-value="192k" class="option" tabindex="0">192k (higher quality)</li>
+                                        <li data-value="256k" class="option" tabindex="0">256k (very high quality)</li>
+                                        <li data-value="320k" class="option" tabindex="0">320k (ultra quality)</li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
-                    </div>
+                </div>
 
-                    <div class="form-group checkbox bottom-20">
-                        <input type="checkbox" tabindex="0"  id="audio-software-mode" aria-label="ALSA Software mode (plughw) - Linux only">
-                        <label for="audio-software-mode">ALSA software mode (plughw) - LINUX ONLY</label>
+                <div class="flex-container">
+                    <div class="panel-100-real p-bottom-20">
+                        <h3>Miscellaneous</h3>
+                        <div class="form-group checkbox bottom-20">
+                            <input type="checkbox" tabindex="0"  id="audio-software-mode" aria-label="ALSA Software mode (plughw) - Linux only">
+                            <label for="audio-software-mode">Toggle ALSA software mode</label>
+                        </div>   
                     </div>
                 </div>
             </div>
 
-            <div class="panel-100 tab-content no-bg" id="webserver" role="tabpanel">
+            <div class="panel-full m-0 tab-content no-bg" id="webserver" role="tabpanel">
                 <h2>Webserver settings</h2>
                 <div class="flex-container">
-                    <div class="panel-50 no-bg">
-                        <div class="panel-100 no-bg">
-                            <h3>Background image</h3>
+                    <div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;">
+                        <h3>Connection</h3>
+                        <p class="text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p>
+                        <div class="form-group">
+                            <label for="webserver-ip">Webserver IP:</label>
+                            <input class="input-text w-150" type="text" name="webserver-ip" id="webserver-ip" placeholder="0.0.0.0">
+                        </div>  
+                        <div class="form-group">
+                            <label for="webserver-port">Webserver port:</label>
+                            <input class="input-text w-100" type="text" name="webserver-port" id="webserver-port" placeholder="8080">
+                        </div> 
+                        <br>
+                    </div>
+                    <div class="panel-33 p-bottom-20">
+                            <h3>Design</h3>
+                            <h4>Background image</h4>
                             <div class="form-group">
                                 <label for="bg-image">Image link:</label>
                                 <input class="input-text w-200" type="text" placeholder="" name="bg-image" id="bg-image">
                             </div>      
-                        </div>
-                        <div class="panel-100 no-bg">
-                            <h3>Themes</h3>
+                            <h4>Themes</h4>
                             <div class="form-group">
                                 <label for="themes"><i class="fa-solid fa-palette"></i> Default server theme:</label>
                                 <div class="dropdown" id="server-theme-selector" style="margin-right: 0;">
@@ -291,10 +267,9 @@
                                     </ul>
                                 </div>
                             </div>
-                        </div>
                     </div>
-                    <div class="panel-50 no-bg">
-                        <h3>Antenna options</h3>
+                    <div class="panel-33 p-bottom-20">
+                        <h3>Antennas</h3>
                         <div class="form-group checkbox bottom-20">
                             <input type="checkbox" tabindex="0"  id="antenna-switch" aria-label="Antenna switch">
                             <label for="antenna-switch">Enable the antenna switch</label>
@@ -302,16 +277,16 @@
                         
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="ant1-enabled" aria-label="Enable antenna 1">
-                            <label for="ant1-enabled"></label>
+                            <label for="ant1-enabled"><i class="fa-solid fa-check"></i></label>
                         </div>
                         <div class="form-group">
                             <label for="ant1-name">Antenna 1 name:</label>
                             <input class="input-text w-100" type="text" placeholder="Ant A" name="ant1-name" id="ant1-name">
-                        </div><br>
+                        </div>
 
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="ant2-enabled" aria-label="Enable antenna 2">
-                            <label for="ant2-enabled"></label>
+                            <label for="ant2-enabled"><i class="fa-solid fa-check"></i></label>
                         </div>
                         <div class="form-group">
                             <label for="ant2-name">Antenna 2 name:</label>
@@ -320,16 +295,16 @@
 
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="ant3-enabled" aria-label="Enable antenna 3">
-                            <label for="ant3-enabled"></label>
+                            <label for="ant3-enabled"><i class="fa-solid fa-check"></i></label>
                         </div>
                         <div class="form-group">
                             <label for="ant3-name">Antenna 3 name:</label>
                             <input class="input-text w-100" type="text" placeholder="Ant C" name="ant3-name" id="ant3-name">
-                        </div><br>
+                        </div>
 
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="ant4-enabled" aria-label="Enable antenna 4">
-                            <label for="ant4-enabled"></label>
+                            <label for="ant4-enabled"><i class="fa-solid fa-check"></i></label>
                         </div>
                         <div class="form-group">
                             <label for="ant4-name">Antenna 4 name:</label>
@@ -338,19 +313,10 @@
 
                     </div>
                 </div>
-                <br><hr>
 
                 <div class="flex-container">
-                    <div class="panel-50 no-bg">
+                    <div class="panel-50">
                         <h3>Tuning options</h3>
-                        <div class="form-group checkbox">
-                            <input type="checkbox" tabindex="0"  id="default-freq-enable" aria-label="Enable deafult frequency for first client">
-                            <label for="default-freq-enable">Enable default frequency for first client</label>
-                        </div><br>
-                        <div class="form-group">
-                            <label for="default-freq">Default frequency:</label>
-                            <input class="input-text w-150" type="text" placeholder="87.5" name="default-freq" id="default-freq">
-                        </div>
                         <p>If you want to limit which frequencies the users can tune to,<br>you can set the lower and upper limit here.<br>
                             <span class="text-gray">Enter frequencies in MHz.</span>
                         </p>
@@ -368,14 +334,7 @@
                         </div>
                     </div>
 
-                    <div class="panel-50 no-bg">
-                        <h3>RDS Mode</h3>
-                        <p>You can switch between American (RBDS) / Global (RDS) mode here.</p>
-                        <div class="form-group checkbox bottom-20">
-                            <input type="checkbox" tabindex="0"  id="rds-mode" aria-label="Enable american RDS mode (RBDS)">
-                            <label for="rds-mode">Enable American Mode (RBDS)</label>
-                        </div>      
-
+                    <div class="panel-50 p-bottom-20">
                         <h3>Presets</h3>
                         <p>You can set up to 4 presets.<br>These presets are accessible with the F1-F4 buttons.<br>
                         <span class="text-gray">Enter frequencies in MHz.</span></p>
@@ -398,9 +357,16 @@
                     </div>
                 </div>
 
-                <br><hr>
-
-                    <div class="panel-100 no-bg">
+                <div class="flex-container p-bottom-20">
+                    <div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;">
+                        <h3>RDS Mode</h3>
+                        <p>You can switch between American (RBDS) / Global (RDS) mode here.</p>
+                        <div class="form-group checkbox bottom-20">
+                            <input type="checkbox" tabindex="0"  id="rds-mode" aria-label="Enable american RDS mode (RBDS)">
+                            <label for="rds-mode">Enable American Mode (RBDS)</label>
+                        </div>      
+                    </div>
+                    <div class="panel-33">
                         <h3>Chat options</h3>
                         <div class="form-group checkbox bottom-20">
                             <input type="checkbox" tabindex="0"  id="chat-switch" aria-label="Enable chat">
@@ -408,7 +374,7 @@
                         </div>        
                     </div>
 
-                    <div class="panel-100 no-bg">
+                    <div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;">
                         <h3>Banlist</h3>
                         <p>If you have users that don't behave on your server, you can choose to ban them by their IP address.<br>
                         <span class="text-gray">You can see their IP address by hovering over their nickname. One IP per row.</span></p>
@@ -417,67 +383,153 @@
                             <textarea id="ip-addresses" placeholder="123.45.67.8"></textarea>
                         </div>
                     </div>
-
-            </div>
-
-            <div class="panel-100 tab-content no-bg" id="plugins" role="tabpanel">
-                <h2>Plugins</h2>
-                <p>Any compatible <strong>.js</strong> plugin, which is in the "plugins" folder, will be listed here.<br>
-                    Click on the individual plugins to enable/disable them.</p>
-                    <select id="plugin-list" class="multiselect" multiple>
-                        <% plugins.forEach(function(plugin) { %>
-                            <option data-name="<%= plugin.frontEndPath %>" title="<%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]">
-                                <%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]
-                            </option>
-                        <% }); %>
-                    </select><br><br>
-                    <a href="https://github.com/NoobishSVK/fm-dx-webserver/wiki/Plugin-List" target="_blank">Download new plugins here!</a>
-                    <hr>
-                    <h3>Plugin settings</h3>
-                    <div id="plugin-settings"></div>
-                    
-            </div>
-
-            <div class="panel-100 tab-content no-bg" id="tuner" role="tabpanel">
-                <h2>Tuner Specific Settings</h2>
-                <div class="form-group">
-                    <label for="themes"><i class="fa-solid fa-radio"></i> Device:</label>
-                    <div class="dropdown" id="device-selector" style="margin-right: 0;">
-                        <input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly tabindex="0">
-                        <ul class="options" tabindex="0">
-                            <li class="option" tabindex="0" data-value="tef">TEF668x / TEA685x</li>
-                            <li class="option" tabindex="0" data-value="xdr">XDR (F1HD / S10HDiP)</li>
-                            <li class="option" tabindex="0" data-value="sdr">SDR (RTL-SDR / AirSpy)</li>
-                            <li class="option" tabindex="0" data-value="other">Other</li>
-                        </ul>
-                    </div>
-                </div><br>
-
-                <div class="form-group checkbox">
-                    <input type="checkbox" tabindex="0"  id="toggle-bw" aria-label="Toggle bandwidth switch">
-                    <label for="toggle-bw">Toggle bandwidth switch</label>
-                </div><br>
-
-                <h3>Startup Volume</h3>
-
-                <div class="panel-50 bg-color-2 auto" style="padding: 20px;">
-                    <div class="panel-75 auto" style="height: 48px;">
-                        <input type="range" id="startup-volume" min="0" max="1" step="0.01" value="1" aria-label="Startup Volume slider">
-                    </div>
-                    <h3 class="top-25" id="volume-percentage-value"></h3>
                 </div>
 
             </div>
 
-            <div class="panel-100 tab-content no-bg" id="identification" role="tabpanel">
+            <div class="panel-full m-0 tab-content no-bg" id="plugins" role="tabpanel">
+                <h2>Plugins</h2>
+                <div class="panel-100 p-bottom-20">
+                    <h3>Plugin list</h3>
+                    <p>Any compatible <strong>.js</strong> plugin, which is in the "plugins" folder, will be listed here.<br>
+                        Click on the individual plugins to enable/disable them.</p>
+                        <select id="plugin-list" class="multiselect" multiple>
+                            <% plugins.forEach(function(plugin) { %>
+                                <option data-name="<%= plugin.frontEndPath %>" title="<%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]">
+                                    <%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]
+                                </option>
+                            <% }); %>
+                        </select><br><br>
+                        <a href="https://github.com/NoobishSVK/fm-dx-webserver/wiki/Plugin-List" target="_blank">Download new plugins here!</a>
+                </div>
+
+                <div class="panel-100 p-bottom-20">
+                    <h3>Plugin settings</h3>
+                    <div id="plugin-settings">No plugin settings are available.</div>
+                </div>
+            </div>
+
+            <div class="panel-full m-0 tab-content no-bg" id="tuner" role="tabpanel">
+                <h2>Tuner settings</h2>
+                <div class="flex-container">
+                <div class="panel-33 p-bottom-20">
+                    <h3>Device type</h3>
+                    <div class="form-group">
+                        <label for="themes"><i class="fa-solid fa-radio"></i> Device</label>
+                        <div class="dropdown" id="device-selector" style="margin-right: 0;">
+                            <input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly tabindex="0">
+                            <ul class="options" tabindex="0">
+                                <li class="option" tabindex="0" data-value="tef">TEF668x / TEA685x</li>
+                                <li class="option" tabindex="0" data-value="xdr">XDR (F1HD / S10HDiP)</li>
+                                <li class="option" tabindex="0" data-value="sdr">SDR (RTL-SDR / AirSpy)</li>
+                                <li class="option" tabindex="0" data-value="other">Other</li>
+                            </ul>
+                        </div>
+                    </div><br>
+                </div>
+
+                <div class="panel-33 p-bottom-20" style="padding-right: 20px; padding-left: 20px;">
+                    <h3>Connection type</h3>
+                    <p class="text-gray">If you want to choose the COM port directly, choose "Direct".<br>If you use xdrd or your receiver is connected via Wi-Fi, choose TCP/IP.</p>
+                    <div style="width: 300px;" class="auto top-10">
+                        <label class="toggleSwitch nolabel" onclick="">
+                            <input id="connection-type-toggle" type="checkbox" tabindex="0" aria-label="Connection type"/>
+                            <a></a>
+                            <span>
+                                <span class="left-span">Direct</span>
+                                <span class="right-span">TCP/IP</span>
+                            </span>											
+                        </label>
+                    </div>
+                </div>
+                <div class="panel-33 p-bottom-20">
+                    <h3>Device / Server</h3>
+                        
+                    <div id="tuner-usb">
+                        <p class="text-gray">Choose your desired <strong>COM port</strong><br>&nbsp;</p>
+                        <div class="form-group">
+                            <label for="com-devices"><i class="fa-brands fa-usb"></i> USB Device:</label>
+                            <div class="dropdown" style="width: 300px;margin-right: 0;">
+                                <input id="com-devices" type="text" name="com-devices" placeholder="Choose your USB device" readonly tabindex="0" />
+                                <ul class="options" tabindex="-1" id="deviceList">
+                                    <% serialPorts.forEach(serialPort => { %>
+                                        <li data-value="<%= serialPort.path %>" class="option" tabindex="0"><%= serialPort.path %> - <%= serialPort.friendlyName %></li>
+                                    <% }); %>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div id="tuner-wireless">
+                        <p class="text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
+                        <div class="form-group">
+                            <label for="xdrd-ip">xdrd ip address:</label>
+                            <input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
+                        </div>  
+                        <div class="form-group">
+                            <label for="xdrd-port">xdrd port:</label>
+                            <input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
+                        </div> 
+                        <div class="form-group">
+                            <label for="xdrd-password">xdrd server password:</label>
+                            <input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
+                        </div> 
+                    </div>
+                </div>
+                </div>
+                <div class="flex-container">
+                    <div class="panel-50 p-bottom-20">
+                        <h3>Startup</h3>
+                        <h4>Startup volume</h4>
+                        <div class="panel-75 auto" style="height: 48px;">
+                            <input type="range" id="startup-volume" min="0" max="1" step="0.01" value="1" aria-label="Startup Volume slider">
+                        </div>
+                        <h4 class="top-10 text-gray" id="volume-percentage-value"></h4>
+    
+                        <hr>
+                        <h4 class="bottom-20">Default frequency</h4>
+                        <div class="form-group checkbox">
+                            <input type="checkbox" tabindex="0"  id="default-freq-enable" aria-label="Enable deafult frequency for first client">
+                            <label for="default-freq-enable">Enable default frequency for first client</label>
+                        </div><br>
+                        <div class="form-group">
+                            <label for="default-freq">Default frequency</label>
+                            <input class="input-text w-150" type="text" placeholder="87.5" name="default-freq" id="default-freq">
+                        </div>
+                    </div>
+                    <div class="panel-50 p-bottom-20">
+                        <h3>Miscellaneous</h3>
+                        <div class="flex-container">
+                            <div class="panel-50 no-bg">
+                                <h4>Bandwidth switch</h4>
+                                <p>Bandwidth switch allows the user to set the bandwidth manually.</p>
+                                <div class="form-group checkbox">
+                                    <input type="checkbox" tabindex="0"  id="toggle-bw" aria-label="Toggle bandwidth switch">
+                                    <label for="toggle-bw">Toggle bandwidth switch</label>
+                                </div><br>
+                            </div>
+                            <div class="panel-50 no-bg">
+                                <h4>Automatic shutdown</h4>
+                                <p>Toggling this option will put the tuner to sleep when no clients are connected.</p>
+                                <div class="form-group checkbox">
+                                    <input type="checkbox" tabindex="0"  id="shutdown-tuner" aria-label="Auto shutdown">
+                                    <label for="shutdown-tuner">Toggle Auto-shutdown</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+    
+            <div class="panel-full m-0 tab-content no-bg" id="identification" role="tabpanel">
                 <h2>Identification & Map</h2>
 
                 <div class="flex-container">
-                    <div class="panel-50 no-bg">
+                    <div class="panel-50 p-bottom-20">
                         <h3>Basic info</h3>
                         
-                        <p class="text-gray">Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p>
-                        <div class="panel-100 no-bg" style="padding-left: 20px; padding-right: 20px;">
+                        <p>Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p>
+                        <div class="panel-full no-bg" style="padding-left: 20px; padding-right: 20px;">
                             <label for="webserver-name" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label>
                             <input style="width: 100%; max-width: 768px;" class="input-text" type="text" name="webserver-name" id="webserver-name" placeholder="Fill your server name here." maxlength="32">
                             <br>
@@ -486,9 +538,9 @@
                         </div>
                     </div>
 
-                    <div class="panel-50 no-bg">
+                    <div class="panel-50">
                         <h3>Online map</h3>
-                        <p class="m-0 text-gray">If your location information is filled,<br>you can add your tuner to a public list.</p>
+                        <p>If your location information is filled,<br>you can add your tuner to a public list.</p>
                         <p></p>
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="broadcast-tuner" aria-label="Broadcast to map">
@@ -504,52 +556,48 @@
                         </div>
         
                         <p>Check your tuner at <strong><a href="https://servers.fmdx.org" target="_blank" class="color-4">servers.fmdx.org</a></strong>.</p>
+                        <p class="text-small text-gray">By activating the <strong>Broadcast to map</strong> option,<br>you agree to the <a href="https://fmdx.org/projects/webserver.php#rules" target="_blank">Terms of Service</a>.</p>
                     </div>
                 </div>
-                <br>
-                <hr>
 
-                <h3>Location:</h3>
-                <p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
-                <div class="form-group">
-                    <label for="lat">Latitude:</label>
-                    <input class="input-text" type="text" name="lat" id="lat">
+                <div class="panel-100">
+                    <h3>Location</h3>
+                    <p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
+                    <div class="form-group">
+                        <label for="lat">Latitude:</label>
+                        <input class="input-text" type="text" name="lat" id="lat">
+                    </div>  
+                    
+                    <div class="form-group">
+                        <label for="lng">Longitude:</label>
+                        <input class="input-text" type="text" name="lng" id="lng">
+                    </div>
+                    
+                    <div id="map"></div>
+                    <br>
                 </div>
-                
-                <div class="form-group">
-                    <label for="lng">Longitude:</label>
-                    <input class="input-text" type="text" name="lng" id="lng">
-                </div>
-                
-                <div id="map"></div>
-                <br>
             </div>
 
-            <button id="submit-config" style="height:48px; width: 200px;margin:20px;" onclick="submitData();">Save settings</button>
-        </div>
+            <div class="panel-full m-0 tab-content no-bg" id="extras" role="tabpanel">
+                <h2>Extras</h2>
+                <div class="panel-100 p-bottom-20">
+                    <h3>FMLIST Integration</h3>
+                    <p>FMLIST integration allows you to get potential DXes logged on the <a href="http://fmlist.org/fm_logmap.php?hours=900" target="_blank" class="text-bold color-4">FMLIST Visual Logbook</a>.<br>
+                    Your server also needs to have a valid UUID, which is obtained by registering on maps in the <strong>Identification & Map</strong> tab.</p>
+                    <div class="form-group checkbox">
+                        <input type="checkbox" tabindex="0"  id="fmlist-integration" aria-label="FMLIST integration">
+                        <label for="fmlist-integration">Toggle FMLIST integration</label>
+                    </div><br>
+                    <p>You can also fill in your OMID from FMLIST.org, if you want the logs to be saved to your account.</p>
+                    <div class="form-group">
+                        <label for="fmlist-omid">OMID</label>
+                        <input class="input-text w-100" type="text" name="fmlist-omid" id="fmlist-omid" maxlength="5">
+                    </div>
 
-        <div class="panel-100 no-bg">
-            <p>Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
-        </div>
+                </div>
+            </div>
 
-        <button onclick="document.location.href='./'" id="back-btn" aria-label="Go back to tuning"><i class="fa-solid fa-arrow-left"></i></button>
-        <% } else { %>
-        <div class="panel-100 no-bg">
-            <img class="top-10" src="./images/openradio_logo_neutral.png" height="64px">
-            <h2 class="text-monospace text-light">[ADMIN PANEL]</h2>
-            <p>You are currently not logged in as an administrator and therefore can't change the settings.</p>
-            <p>Please login below.</p>
         </div>
-        <div class="panel-100 p-bottom-20">
-            <h2>LOGIN</h2>
-            <form action="./login" method="post" id="login-form">
-                <input type="password" id="password" name="password" placeholder="Password" style="width: 250px;" required>
-                <button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -2px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
-                    <i class="fa-solid fa-right-to-bracket"></i>
-                </button>
-              </form>
-        </div>
-        <% } %>
     </div>
     </div>
     <script src="js/init.js"></script>

web/wizard.ejs

@@ -14,8 +14,7 @@
 <body>
     <div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>
     <div id="wrapper-outer">
-    <div id="wrapper" class="setup-wrapper">
-        <% if (isAdminAuthenticated) { %>
+    <div id="wrapper">
         <div class="panel-100 no-bg">
             <img class="top-10" src="../images/openradio_logo_neutral.png" height="64px">
             <h2 class="text-monospace text-light text-gray">[SETUP WIZARD]</h2>
@@ -55,19 +54,20 @@
 
                 <h3>Tuner type:</h3>
                 <p class="text-gray">Settings a proper device type ensures that the correct interface and settings will load.</p>
-                <div class="form-group">
-                    <label for="themes"><i class="fa-solid fa-radio"></i> Device</label>
-                    <div class="dropdown" id="device-selector" style="margin-right: 0;">
-                        <input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly>
-                        <ul class="options">
-                            <li class="option" data-value="tef">TEF668x / TEA685x</li>
-                            <li class="option" data-value="xdr">XDR (F1HD / S10HDiP)</li>
-                            <li class="option" data-value="sdr">SDR (RTL-SDR / AirSpy)</li>
-                            <li class="option" data-value="other">Other</li>
-                        </ul>
+                <div class="panel-100 no-bg text-center">
+                    <div class="form-group" style="float: none;">
+                        <label for="device-selector"><i class="fa-solid fa-radio"></i> Device</label>
+                        <div class="dropdown" id="device-selector" style="margin: auto;">
+                            <input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly>
+                            <ul class="options">
+                                <li class="option" data-value="tef">TEF668x / TEA685x</li>
+                                <li class="option" data-value="xdr">XDR (F1HD / S10HDiP)</li>
+                                <li class="option" data-value="sdr">SDR (RTL-SDR / AirSpy)</li>
+                                <li class="option" data-value="other">Other</li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
-
                 <h3>Tuner connection:</h3>
                 <div style="width: 300px;" class="auto top-10">
                     <label class="toggleSwitch nolabel" onclick="">
@@ -120,7 +120,7 @@
                         Choose the audio port your tuner is connected to and desired audio settings here.</p>
                     <p class="text-gray">Recommended defaults have already been set for the audio quality, you can keep them as-is.</p>
                     
-                    <div class="panel-100 p-bottom-20">
+                    <div class="panel-100 p-bottom-20 flex-container flex-center">
                         <div class="form-group">
                             <label for="audio-devices"><i class="fa-solid fa-headphones"></i> Stream audio from</label>
                             <div class="dropdown" style="width: 300px;">
@@ -177,14 +177,16 @@
                     
                     <h3>Location:</h3>
                     <p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
-                    <div class="form-group">
-                        <label for="lat">Latitude:</label>
-                        <input class="input-text" type="text" name="lat" id="lat">
-                    </div>  
+                    <div class="panel-100 no-bg flex-container flex-center">
+                        <div class="form-group">
+                            <label for="lat">Latitude:</label>
+                            <input class="input-text" type="text" name="lat" id="lat">
+                        </div>  
                         
-                    <div class="form-group">
-                        <label for="lng">Longitude:</label>
-                        <input class="input-text" type="text" name="lng" id="lng">
+                        <div class="form-group">
+                            <label for="lng">Longitude:</label>
+                            <input class="input-text" type="text" name="lng" id="lng">
+                        </div>
                     </div>
                     <div id="map"></div>
 
@@ -193,18 +195,23 @@
                     <p class="m-0">The list is available at <strong><a href="https://servers.fmdx.org" target="_blank" class="color-4">servers.fmdx.org</a></strong>.</p>
 
                     <p class="text-gray">Only fill up your broadcast address if you are using a proxy. If you don't know what a proxy is, leave it empty.</p>
-                    <div class="form-group checkbox">
-                        <input type="checkbox" id="broadcast-tuner" aria-label="Broadcast to map">
-                        <label for="broadcast-tuner">Show my tuner on the public list</label>
+
+                    <div class="panel-100 flex-container flex-center">
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="broadcast-tuner" aria-label="Broadcast to map">
+                            <label for="broadcast-tuner">Show my tuner on the public list</label>
+                        </div>
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="tuner-public" aria-label="Allow tuning wihtout password">
+                            <label for="tuner-public">Allow tuning without password</label>
+                        </div>
                     </div>
-                    <div class="form-group checkbox">
-                        <input type="checkbox" id="tuner-public" aria-label="Allow tuning wihtout password">
-                        <label for="tuner-public">Allow tuning without password</label>
-                    </div>
-                    <br>
-                    <div class="form-group">
-                        <label for="broadcast-address">Broadcast address:</label>
-                        <input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
+
+                    <div class="panel-100 flex-container flex-center">
+                        <div class="form-group">
+                            <label for="broadcast-address">Broadcast address:</label>
+                            <input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
+                        </div>
                     </div>
                 </div>
             </div>
@@ -215,14 +222,16 @@
                 <p>We are at the last and final step of the settings.</p>
 
                 <p class="text-gray">Here we can set the password. Tune password is optional.<br>Setting an admin password allows you to change settings later and setting one up is mandatory.</p>
-                <div class="form-group">
-                    <label for="tune-pass">Tune password:</label>
-                    <input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
+                <div class="flex-container flex-center">
+                    <div class="form-group">
+                        <label for="tune-pass">Tune password:</label>
+                        <input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
+                    </div>
+                    <div class="form-group">
+                        <label for="admin-pass">Admin setup password:</label>
+                        <input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
+                    </div>
                 </div>
-                <div class="form-group">
-                    <label for="admin-pass">Admin setup password:</label>
-                    <input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
-                </div><br>
                 <p>You can now click the <strong>save button</strong> to save your settings.</p>
             </div>
 
@@ -232,23 +241,6 @@
         <div class="panel-100 no-bg">
             <p>Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
         </div>
-        <% } else { %>
-        <div class="panel-100 no-bg">
-            <img class="top-25" src="../images/openradio_logo_neutral.png" height="64px">
-            <h2 class="text-monospace text-light">[Wizard]</h2>
-            <p>You are currently not logged in as an administrator and therefore can't change the settings.</p>
-            <p>Please login below.</p>
-        </div>
-        <div class="panel-100 p-bottom-20">
-            <h2>LOGIN</h2>
-            <form action="./login" method="post" id="login-form">
-                <input type="password" id="password" name="password" placeholder="Password" style="width: 250px; background-color: var(--color-2);" required>
-                <button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -4px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
-                    <i class="fa-solid fa-right-to-bracket"></i>
-                </button>
-              </form>
-        </div>
-        <% } %>
     </div>
     </div>
     <script src="js/init.js"></script>