highlite active Faction in WEbUI
This commit is contained in:
parent
52026296f2
commit
d04489819d
@ -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">
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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++) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user