Airsoft/DarkEmergency-Timer
Airsoft/DarkEmergency-Timer
1
0
Fork 0
Code Issues Pull Requests Releases 9 Wiki Activity

highlite active Faction in WEbUI

Browse Source
This commit is contained in:
Marcel Peterkau 2024-05-31 12:49:38 +02:00
parent 52026296f2
commit d04489819d
3 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Software/data_src/index.htm
View File

@ -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"
class="rounded mx-auto img-fluid d-block" alt="...">
<div class="col bg-dark text-white p-3 data-activefaction faction-logo faction1">
<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"
class="rounded mx-auto img-fluid d-block" alt="...">
<div class="col bg-dark text-white p-3 data-activefaction faction-logo faction2">
<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"
class="rounded mx-auto img-fluid d-block" alt="...">
<div class="col bg-dark text-white p-3 data-activefaction faction-logo faction3">
<img src="static/img/logo_fac3.png" class="rounded mx-auto img-fluid d-block" alt="...">
</div>
</div>
<div class="row">

21
Software/data_src/static/css/custom.css
View File

@ -8438,4 +8438,23 @@ 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;
}
}

21
Software/data_src/static/js/websocket.js
View File

@ -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++) {