Updater improvements, config UI enhancements, improved annoucement system, fixes and localization

UIMod/onboard_bundled/assets/apiinfo.html

@@ -206,7 +206,7 @@ <h3>Information Streams</h3>
         </div>
     </main>
     <footer>
-        <div class="copyright">Copyright &copy; 2025 <a href="https://github.com/jacksonthemaster">JacksonTheMaster.</a> Licensed under <a href="https://github.com/jacksonthemaster/StationeersServerUI/blob/main/LICENSE">Proprietary License</a>.</div>
+        <div class="copyright">Copyright &copy; 2026 <a href="https://github.com/jacksonthemaster">JacksonTheMaster.</a> Licensed under <a href="https://github.com/jacksonthemaster/StationeersServerUI/blob/main/LICENSE">Proprietary License</a>.</div>
     </footer>
 </body>
 </html>

UIMod/onboard_bundled/assets/credits.html

@@ -132,6 +132,13 @@
             margin: 3em 0 1em 0;
             text-shadow: 0 0 20px rgba(72, 187, 120, 0.6);
         }
+
+        .donors {
+            font-size: 2em;
+            color: #008cff;
+            margin: 3em 0 1em 0;
+            text-shadow: 0 0 20px rgba(72, 187, 120, 0.6);
+        }
 
         .tech-stack {
             font-size: 1.5em;
@@ -242,6 +249,11 @@
                 </div>
             </div>
 
+            <div class="section">
+                <div class="donors">Donors</div>
+                <div class="name">Musashi</div>
+            </div>
+
             <div class="section">
                 <div class="special-thanks">Created for the game "Stationeers" which is made by</div>
                 <div class="name">RocketWerkz, Dean Hall, New Zealand</div>

UIMod/onboard_bundled/assets/css/config.css

@@ -54,7 +54,7 @@
     width: 24px;
     height: 24px;
     margin-right: 10px;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' id='wizard' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3C!-- SVG content unchanged, but stroke/fill colours are part of the icon design --%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' id='wizard' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Ewizard%3C/title%3E%3Ccircle cx='33' cy='23' r='23' style='fill:%23edebdc'%3E%3C/circle%3E%3Cline x1='7' y1='17' x2='7' y2='19' style='fill:none;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/line%3E%3Cline x1='7' y1='23' x2='7' y2='25' style='fill:none;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/line%3E%3Cpath d='M21.778,47H47.222A8.778,8.778,0,0,1,56,55.778V61a0,0,0,0,1,0,0H13a0,0,0,0,1,0,0V55.778A8.778,8.778,0,0,1,21.778,47Z' style='fill:%239dc1e4;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/path%3E%3Cpolygon points='32 61 28 61 34 49 38 49 32 61' style='fill:%23ffffff;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/polygon%3E%3Cpath d='M59,39H11v4.236A5.763,5.763,0,0,0,16.764,49L34,55l19.236-6A5.763,5.763,0,0,0,59,43.236Z' style='fill:%239dc1e4;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/path%3E%3Cline x1='3' y1='21' x2='5' y2='21' style='fill:none;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='11' y2='21' style='fill:none;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/line%3E%3Ccircle cx='55.5' cy='6.5' r='2.5' style='fill:none;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/circle%3E%3Ccircle cx='13.984' cy='6.603' r='1.069' style='fill:%234c241d'%3E%3C/circle%3E%3Cellipse cx='35' cy='39' rx='24' ry='6' style='fill:%236b4f5b;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/ellipse%3E%3Ccircle cx='5.984' cy='30.603' r='1.069' style='fill:%234c241d'%3E%3C/circle%3E%3Cpath d='M48,13V10.143A6.143,6.143,0,0,0,41.857,4H27.143A6.143,6.143,0,0,0,21,10.143V13' style='fill:%239dc1e4;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/path%3E%3Crect x='20' y='17.81' width='29' height='14.19' style='fill:%23ffe8dc;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/rect%3E%3Cpath d='M41.972,13H48a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H21a4,4,0,0,1-4-4h0a4,4,0,0,1,4-4H37' style='fill:%23ffffff;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/path%3E%3Ccircle cx='39.5' cy='25.5' r='1.136' style='fill:%234c241d'%3E%3C/circle%3E%3Ccircle cx='29.5' cy='25.5' r='1.136' style='fill:%234c241d'%3E%3C/circle%3E%3Cpath d='M43.875,32a6.472,6.472,0,0,0-5.219-2.2A5.2,5.2,0,0,0,35,31.974,5.2,5.2,0,0,0,31.344,29.8,6.472,6.472,0,0,0,26.125,32H20v4.5a14.5,14.5,0,0,0,29,0V32Z' style='fill:%23ffffff;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/path%3E%3Cline x1='33' y1='36' x2='37' y2='36' style='fill:none;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/line%3E%3Crect x='32' y='10' width='5' height='5' transform='translate(1.266 28.056) rotate(-45)' style='fill:%23bd53b5;stroke:%234c241d;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -121,30 +121,125 @@
     display: inline-block;
     width: 24px;
     height: 24px;
-    margin-right: 10px;
+    padding: 2px;
     vertical-align: middle;
+    background-size: contain;
 }
 
-/* Icons – colours are baked in as white; keep as-is */
-.server-icon,
-.discord-icon,
-.detection-icon {
+/* Server Icon - gear/cog icon */
+.server-icon {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: center;
 }
 
+/* Discord Icon */
 .discord-icon {
-    background-size: 20px 20px;
+    background-image: url("/static/icons/discord.webp");
+    background-repeat: no-repeat;
+    background-position: center;
 }
 
-.tab-button {
+/* Detection Manager Icon - radar/search icon */
+.detection-icon {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1 5h2v2h-2v-2zm0-2h2v1h-2v-1zm0-1h2v1h-2v-1z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.slp-icon {
+    background-image: url("/static/icons/launchpad.webp");
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 5px;
+}
+.sliding-tabs {
     display: flex;
+    gap: 8px;
+    padding: 16px 0px;
+    min-width: 70px;
+}
+
+.sliding-tab-button {
+    display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 8px;
+    padding: 16px 12px;
+    background: var(--tab-bg);
+    border: 2px solid var(--primary-dim);
+    border-radius: 8px;
+    color: var(--primary);
+    cursor: pointer;
+    transition: all var(--transition-normal);
+    opacity: 0.7;
+    min-height: 80px;
+    width: 56px;
+    overflow: hidden;
+    position: relative;
+    font-size: 0.9rem;
+    font-family: 'Press Start 2P', cursive;
+    box-shadow: 0 0 10px var(--button-glow-soft);
+}
+
+.sliding-tab-button .icon {
+    opacity: 1;
+    transition: opacity 0.2s ease;
+}
+
+.sliding-tab-button .tab-text {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    white-space: nowrap;
+    font-size: 0.8rem;
+    position: absolute;
 }
 
-.tab-button.active .icon {
-    filter: brightness(1.2);
+.sliding-tab-button:hover{
+    width: 100%;
+    opacity: 1;
+    transform: translateY(0px) !important; /* Overrides the default transform on global button hover */
+}
+.sliding-tab-button.active {
+    width: 100%;
+    opacity: 1;
+    box-shadow: 0 0 15px var(--button-glow), 0 0 25px var(--button-glow-soft);
+    background-color: var(--tab-active-bg);
+}
+
+.sliding-tab-button:hover .icon,
+.sliding-tab-button.active .icon {
+    opacity: 0;
+}
+
+.sliding-tab-button:hover .tab-text,
+.sliding-tab-button.active .tab-text {
+    opacity: 1;
+}
+
+
+@media (max-width: 768px) {
+
+.sliding-tab-button:hover .icon,
+.sliding-tab-button.active .icon {
+    opacity: 1;
+}
+
+.sliding-tab-button:hover .tab-text,
+.sliding-tab-button.active .tab-text {
+    opacity: 0;
+}
+
+}
+
+.sliding-tab-button.active {
+    box-shadow: 0 0 20px var(--tab-active-glow);
+    border-color: var(--primary);
+}
+
+.config-tabs{
+    display: flex;
+    flex-direction: column;
 }
 
 .fill-hint-wraper {
@@ -311,9 +406,31 @@ select option {
     background-color: rgba(0, 0, 0, 0.4);
 }
 
-/* Responsive & Animation unchanged */
 @media (max-width: 768px) {
-    /* ... unchanged ... */
+    .section-navigation {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    .section-nav-button {
+        padding: 8px 12px;
+        font-size: 0.85em;
+    }
+
+    .wizard-button {
+        width: 100%;
+        justify-content: center;
+        padding: 10px 15px;
+    }
+
+    .section-title {
+        font-size: 0.9rem;
+    }
+
+    .sliding-tab-button {
+        width: 100%;
+        padding: 10px 15px;
+    }
 }
 
 @keyframes fadeIn {

UIMod/onboard_bundled/assets/css/detectionmanager.css

@@ -1,6 +1,6 @@
 @import '/static/css/variables.css';
 
-#detection-list-tab {
+#detection-list-container {
     background: rgba(114, 137, 218, 0.1);
 }
 
@@ -190,6 +190,10 @@ input:checked+.slider:before {
     margin-top: 10px;
 }
 
+#add-detection-container {
+    margin-top: 2rem;
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
     .detection-list-header,