new version

package.json

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

server/endpoints.js

@@ -84,7 +84,7 @@ router.get('/', (req, res) => {
 });
 
 router.get('/403', (req, res) => {
-    const reason = req.query.reason || null;
+    const reason = req.query.reason ? req.query.reason : null;
     res.render('403', { reason });
 })
 

views/index.ejs

@@ -180,7 +180,7 @@
 
           <div class="flex-container">
             <div class="panel-33 hover-brighten tooltip no-bg-phone" id="pi-code-container" data-tooltip="Clicking on the PI code will show the current station on a map.">
-              <h2 class="signal-heading">PI CODE</h2>
+              <h2 class="signal-heading text-uppercase">PI Code</h2>
               <div class="text-small text-gray highest-signal-container">
                 <span id="data-regular-pi">&nbsp;</span>
               </div>
@@ -188,12 +188,12 @@
             </div>
 
             <div class="panel-33 hover-brighten no-bg-phone" id="freq-container">
-              <h2>FREQUENCY</h2>
+              <h2 class="text-uppercase">Frequency</h2>
               <span id="data-frequency" class="text-big"></span>
             </div>
 
             <div class="panel-33 no-bg-phone">
-              <h2 class="signal-heading">SIGNAL</h2>
+              <h2 class="signal-heading text-uppercase">Signal</h2>
               <div class="text-small text-gray highest-signal-container">
                 <i class="fa-solid fa-arrow-up"></i>
                 <span id="data-signal-highest"></span>

views/setup.ejs

@@ -342,7 +342,7 @@
                 <div class="panel-100 p-bottom-20" style="padding-right: 20px; padding-left: 20px;">
                     <h3>Connection type</h3>
                     <p class="text-gray">If you want to choose the serial port directly, choose "Direct".<br>If you use xdrd or your receiver is connected via Wi-Fi, choose TCP/IP.</p>
-                    <div class="auto top-10">
+                    <div class="auto top-10" style="max-width: 350px;">
                         <label class="toggleSwitch nolabel" onclick="">
                             <input id="xdrd-wirelessConnection" type="checkbox" tabindex="0" aria-label="Connection type"/>
                             <a></a>
@@ -393,17 +393,17 @@
                     <div class="panel-50 p-bottom-20">
                         <h3>Miscellaneous</h3>
                         <div class="flex-container">
-                            <div class="panel-50 no-bg">
+                            <div class="panel-33 no-bg">
                                 <h4>Bandwidth switch</h4>
                                 <p>Bandwidth switch allows the user to set the bandwidth manually.</p>
                                 <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Bandwidth switch', id: 'bwSwitch'}) %><br>
                             </div>
-                            <div class="panel-50 no-bg">
+                            <div class="panel-33 no-bg">
                                 <h4>Automatic shutdown</h4>
                                 <p>Toggling this option will put the tuner to sleep when no clients are connected.</p>
                                 <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Auto-shutdown', id: 'autoShutdown'}) %><br>
                             </div>
-                            <div class="panel-50 no-bg">
+                            <div class="panel-33 no-bg">
                                 <h4>SI47XX AGC control</h4>
                                 <p>Allow users to change SI47XX AGC mode from the main UI.</p>
                                 <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Enable AGC control', id: 'si47xx-agcControl'}) %><br>

web/css/breadcrumbs.css

@@ -39,6 +39,7 @@ h2 {
     color: var(--color-4);
     margin-bottom: 0;
     margin-top: 8px;
+    font-weight: 500;
 }
 
 h3 {

web/js/main.js

@@ -932,7 +932,11 @@ function updateDatasetValIfChanged($element, dataLabel, newVal) {
 const updateDataElements = throttle(function(parsedData) {
     updateTextIfChanged($dataFrequency, parsedData.freq);
     $commandInput.attr("aria-label", "Current frequency: " + parsedData.freq);
-    updateHtmlIfChanged($dataPi, parsedData.pi === '?' ? "<span class='opacity-half'>?</span>" : parsedData.pi);
+    
+    const questionCount = (parsedData.pi.match(/\?/g) || []).length;
+    const opacity = 1 - (questionCount * 0.2);
+
+    updateHtmlIfChanged($dataPi,`<span style="opacity:${opacity}">${parsedData.pi}</span>`);
 
     if ($('#ps-underscores').is(':checked')) {
         parsedData.ps = parsedData.ps.replace(/\s/g, '_');

web/js/settings.js

@@ -119,7 +119,7 @@ function setTheme(themeName) {
 function setBg() {
     const disableBackgroundParameter = getQueryParameter('disableBackground');
     if(localStorage.getItem('bgImage').length > 5 && localStorage.getItem('theme') != 'theme9' && disableBackgroundParameter != 'true') {
-        $('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') top center / cover fixed no-repeat var(--color-main)');
+        $('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') center center / cover fixed no-repeat var(--color-main)');
     } else $('body').css('background', 'var(--color-main)');
 }
 

web/js/ver.js

@@ -1,2 +1,2 @@
-const versionDate = new Date('Apr 3, 2026 22:30:00');
-const currentVersion = `v1.4.0a [${versionDate.getDate()}/${versionDate.getMonth() + 1}/${versionDate.getFullYear()}]`;
+const versionDate = new Date('Apr 11, 2026 13:30:00');
+const currentVersion = `v1.4.0b [${versionDate.getDate()}/${versionDate.getMonth() + 1}/${versionDate.getFullYear()}]`;