fsjgsr
This commit is contained in:
parent
a70085f9a5
commit
de0239c72d
@ -6,8 +6,8 @@
|
||||
|
||||
#quickmenu-panel {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
bottom: 60px;
|
||||
left: 430px;
|
||||
z-index: 1999;
|
||||
|
||||
display: grid;
|
||||
@ -22,7 +22,7 @@
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease;
|
||||
opacity: 1;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
|
||||
@ -211,56 +211,66 @@
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Gaststätte Tabs
|
||||
Gaststätte Popup
|
||||
========================= */
|
||||
|
||||
.qm-popup-body--tabs {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.qm-tabs {
|
||||
.gaststaette-body {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid #8b6a3c;
|
||||
padding-bottom: 8px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qm-tab {
|
||||
background: linear-gradient(#3a2810, #1a0f04);
|
||||
.gaststaette-tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 16px 10px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-right: 2px solid #8b6a3c;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.gaststaette-tab {
|
||||
background: linear-gradient(145deg, #3a2810, #1a0f04);
|
||||
border: 2px solid #8b6a3c;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border-radius: 6px;
|
||||
color: #e7d9b4;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 15px;
|
||||
padding: 8px 24px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.qm-tab:hover {
|
||||
.gaststaette-tab:hover {
|
||||
border-color: #f0d060;
|
||||
background: linear-gradient(#5a3c18, #2a1a08);
|
||||
background: linear-gradient(145deg, #5a3c18, #2a1a08);
|
||||
}
|
||||
|
||||
.qm-tab.active {
|
||||
background: linear-gradient(#6b4b2a, #3c2414);
|
||||
.gaststaette-tab.active {
|
||||
background: linear-gradient(145deg, #6b4b2a, #3c2414);
|
||||
border-color: #f0d060;
|
||||
color: #f0d060;
|
||||
box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.qm-tab-content {
|
||||
display: none;
|
||||
width: 100%;
|
||||
color: #5c3b20;
|
||||
.gaststaette-content {
|
||||
flex: 1;
|
||||
padding: 24px 40px;
|
||||
overflow-y: auto;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 16px;
|
||||
color: #5c3b20;
|
||||
}
|
||||
|
||||
.qm-tab-content.active {
|
||||
.gaststaette-tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gaststaette-tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -8,6 +8,24 @@ const tooltip = document.getElementById("map-tooltip");
|
||||
|
||||
const tooltipCache = {};
|
||||
|
||||
/* ================================
|
||||
Gaststätte Popup
|
||||
================================ */
|
||||
|
||||
const gaststaettePopup = document.getElementById("gaststaette-popup");
|
||||
const qmOverlay = document.getElementById("qm-overlay");
|
||||
|
||||
document.querySelectorAll(".gaststaette-tab").forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
document.querySelectorAll(".gaststaette-tab").forEach((t) => t.classList.remove("active"));
|
||||
document.querySelectorAll(".gaststaette-tab-content").forEach((c) => c.classList.remove("active"));
|
||||
tab.classList.add("active");
|
||||
document.getElementById(tab.dataset.tab).classList.add("active");
|
||||
});
|
||||
});
|
||||
|
||||
const tooltipCache = {};
|
||||
|
||||
// Tooltip verstecken wenn Maus über Quickmenu, Popup oder QM-Popups fährt
|
||||
document
|
||||
.getElementById("quickmenu-panel")
|
||||
@ -157,6 +175,17 @@ document.querySelectorAll(".building").forEach((building) => {
|
||||
building.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
const url = building.getAttribute("href");
|
||||
|
||||
// Gebäude 6 → Gaststätte eigenes Popup
|
||||
if (url === "/building/6") {
|
||||
gaststaettePopup.style.left = "50%";
|
||||
gaststaettePopup.style.top = "50%";
|
||||
gaststaettePopup.style.transform = "translate(-50%, -50%) scale(1)";
|
||||
gaststaettePopup.classList.add("active");
|
||||
qmOverlay.classList.add("active");
|
||||
return;
|
||||
}
|
||||
|
||||
await openBuildingPopup(url);
|
||||
});
|
||||
});
|
||||
|
||||
@ -776,15 +776,6 @@
|
||||
/>
|
||||
<span class="qm-slot-label">Boosterjagd</span>
|
||||
</div>
|
||||
|
||||
<div class="qm-slot" data-popup="qm-popup-gaststaette">
|
||||
<img
|
||||
src="/images/quickmenu/gaststaette.png"
|
||||
alt=""
|
||||
onerror="this.style.display = 'none'"
|
||||
/>
|
||||
<span class="qm-slot-label">Gaststätte</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================
|
||||
@ -797,27 +788,31 @@
|
||||
================================ -->
|
||||
|
||||
<!-- ================================
|
||||
Gaststätte Popup (Building 6)
|
||||
Gaststätte Popup (Gebäude 6)
|
||||
================================ -->
|
||||
<div id="qm-popup-gaststaette" class="qm-popup">
|
||||
<div id="gaststaette-popup" class="qm-popup">
|
||||
<div class="qm-popup-header">
|
||||
<span class="qm-popup-title">Gaststätte</span>
|
||||
<span class="qm-popup-close">✕</span>
|
||||
</div>
|
||||
<div class="qm-popup-body qm-popup-body--tabs" id="qm-body-gaststaette">
|
||||
<div class="qm-tabs">
|
||||
<button class="qm-tab active" data-tab="gaststaette-tab1">Tab 1</button>
|
||||
<button class="qm-tab" data-tab="gaststaette-tab2">Tab 2</button>
|
||||
<button class="qm-tab" data-tab="gaststaette-tab3">Tab 3</button>
|
||||
<div class="gaststaette-body">
|
||||
<!-- Linke Tab-Sidebar -->
|
||||
<div class="gaststaette-tabs">
|
||||
<button class="gaststaette-tab active" data-tab="gs-tab1">Dummy 1</button>
|
||||
<button class="gaststaette-tab" data-tab="gs-tab2">Dummy 2</button>
|
||||
<button class="gaststaette-tab" data-tab="gs-tab3">Dummy 3</button>
|
||||
</div>
|
||||
<div class="qm-tab-content active" id="gaststaette-tab1">
|
||||
<p>Inhalt Tab 1 (Dummy)</p>
|
||||
</div>
|
||||
<div class="qm-tab-content" id="gaststaette-tab2">
|
||||
<p>Inhalt Tab 2 (Dummy)</p>
|
||||
</div>
|
||||
<div class="qm-tab-content" id="gaststaette-tab3">
|
||||
<p>Inhalt Tab 3 (Dummy)</p>
|
||||
<!-- Hauptinhalt -->
|
||||
<div class="gaststaette-content">
|
||||
<div class="gaststaette-tab-content active" id="gs-tab1">
|
||||
<p>Inhalt Dummy 1</p>
|
||||
</div>
|
||||
<div class="gaststaette-tab-content" id="gs-tab2">
|
||||
<p>Inhalt Dummy 2</p>
|
||||
</div>
|
||||
<div class="gaststaette-tab-content" id="gs-tab3">
|
||||
<p>Inhalt Dummy 3</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user