highlite active Faction in WEbUI

Software/data_src/index.htm

@@ -96,14 +96,14 @@
             <div id="header_faction3" class="col text-center data-name_faction3 text-white p-3">%NAME_FAC_3%</div>
           </div>
           <div class="row">
-            <div class="col bg-dark text-white p-3"><img src="static/img/logo_fac1.png"
+            <div class="col bg-dark text-white p-3 data-activefaction faction-logo faction1">
-                class="rounded mx-auto img-fluid d-block" alt="...">
+              <img src="static/img/logo_fac1.png" class="rounded mx-auto img-fluid d-block" alt="...">
             </div>
-            <div class="col bg-dark text-white p-3"><img src="static/img/logo_fac2.png"
+            <div class="col bg-dark text-white p-3 data-activefaction faction-logo faction2">
-                class="rounded mx-auto img-fluid d-block" alt="...">
+              <img src="static/img/logo_fac2.png" class="rounded mx-auto img-fluid d-block" alt="...">
             </div>
-            <div class="col bg-dark text-white p-3"><img src="static/img/logo_fac3.png"
+            <div class="col bg-dark text-white p-3 data-activefaction faction-logo faction3">
-                class="rounded mx-auto img-fluid d-block" alt="...">
+              <img src="static/img/logo_fac3.png" class="rounded mx-auto img-fluid d-block" alt="...">
             </div>
           </div>
           <div class="row">

Software/data_src/static/css/custom.css

@@ -8439,3 +8439,22 @@ a.text-dark:hover {
 .navbar-dark.bg-primary {
     background-color: #111 !important
 }
+
+.glow-active-faction {
+    border: 3px solid #FFD700; /* Goldene Umrandung */
+    box-shadow: 0 0 20px #FFD700; /* Leuchtender Glüheffekt */
+    animation: glow 1.5s infinite alternate;
+    border-radius: 10px; /* Abgerundete Ecken */
+    margin-bottom: 10px; /* Abstand nach unten */
+  }
+  
+  @keyframes glow {
+    from {
+      box-shadow: 0 0 10px #FFD700;
+    }
+    to {
+      box-shadow: 0 0 20px #FFD700;
+    }
+  }
+  
+  

Software/data_src/static/js/websocket.js

@@ -178,9 +178,12 @@ function fillValuesToHTML(dataset) {
           // Wenn das Element ein Settingsabschnitt-div ist
           if (dataset[key] == 0) element.style.display = "none";
           else element.style.display = "";
-        } else if (element.tagName === "DIV") {
+        } else if (element.tagName === "DIV" || element.tagName === "SPAN") {
           if (element.classList.contains("format-time")) {
             element.innerText = formatTime(dataset[key]);
+          } else if (element.classList.contains("faction-logo")) {
+            // Faction-Logo-Logik
+            updateFactionLogo(element, dataset[key]);
           } else {
             element.innerText = dataset[key];
           }
@@ -211,6 +214,22 @@ function formatTime(seconds) {
   );
 }
 
+function updateFactionLogo(element, faction) {
+  const glowClass = "glow-active-faction";
+  const factionClasses = ["faction1", "faction2", "faction3"];
+
+  factionClasses.forEach((factionClass) => {
+    if (
+      factionClass === "faction" + faction &&
+      element.classList.contains(factionClass)
+    ) {
+      element.classList.add(glowClass);
+    } else {
+      element.classList.remove(glowClass);
+    }
+  });
+}
+
 // Funktion zum Setzen des ausgewählten Werts für Dropdowns
 function setDropdownValue(selectElement, value) {
   for (var i = 0; i < selectElement.options.length; i++) {