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 id="header_faction3" class="col text-center data-name_faction3 text-white p-3">%NAME_FAC_3%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<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>
|
||||||
<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>
|
||||||
<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>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -8438,4 +8438,23 @@ a.text-dark:hover {
|
|||||||
|
|
||||||
.navbar-dark.bg-primary {
|
.navbar-dark.bg-primary {
|
||||||
background-color: #111 !important
|
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
|
// Wenn das Element ein Settingsabschnitt-div ist
|
||||||
if (dataset[key] == 0) element.style.display = "none";
|
if (dataset[key] == 0) element.style.display = "none";
|
||||||
else element.style.display = "";
|
else element.style.display = "";
|
||||||
} else if (element.tagName === "DIV") {
|
} else if (element.tagName === "DIV" || element.tagName === "SPAN") {
|
||||||
if (element.classList.contains("format-time")) {
|
if (element.classList.contains("format-time")) {
|
||||||
element.innerText = formatTime(dataset[key]);
|
element.innerText = formatTime(dataset[key]);
|
||||||
|
} else if (element.classList.contains("faction-logo")) {
|
||||||
|
// Faction-Logo-Logik
|
||||||
|
updateFactionLogo(element, dataset[key]);
|
||||||
} else {
|
} else {
|
||||||
element.innerText = dataset[key];
|
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
|
// Funktion zum Setzen des ausgewählten Werts für Dropdowns
|
||||||
function setDropdownValue(selectElement, value) {
|
function setDropdownValue(selectElement, value) {
|
||||||
for (var i = 0; i < selectElement.options.length; i++) {
|
for (var i = 0; i < selectElement.options.length; i++) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user