cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tzkjrzt

Browse Source
This commit is contained in:
cay 2026-04-10 11:38:39 +01:00
parent 4c620e82ab
commit a70085f9a5
3 changed files with 108 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
public/css/quickmenu.css
View File

@ -1,10 +1,12 @@
/* =========================
Quick Menu Panel
========================= */
#quickmenu-panel {
position: fixed;
bottom: 30px;
bottom: 20px;
left: 50%;
z-index: 1999;
@ -23,6 +25,8 @@
transform: translateX(-50%);
}
/* =========================
Einzelne Slots
========================= */
@ -205,3 +209,58 @@
#qm-overlay.active {
display: block;
}
/* =========================
Gaststätte Tabs
========================= */
.qm-popup-body--tabs {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 20px 40px;
}
.qm-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
border-bottom: 2px solid #8b6a3c;
padding-bottom: 8px;
width: 100%;
}
.qm-tab {
background: linear-gradient(#3a2810, #1a0f04);
border: 2px solid #8b6a3c;
border-radius: 6px 6px 0 0;
color: #e7d9b4;
font-family: "Cinzel", serif;
font-size: 15px;
padding: 8px 24px;
cursor: pointer;
transition: 0.2s;
}
.qm-tab:hover {
border-color: #f0d060;
background: linear-gradient(#5a3c18, #2a1a08);
}
.qm-tab.active {
background: linear-gradient(#6b4b2a, #3c2414);
border-color: #f0d060;
color: #f0d060;
}
.qm-tab-content {
display: none;
width: 100%;
color: #5c3b20;
font-family: "Cinzel", serif;
font-size: 16px;
}
.qm-tab-content.active {
display: block;
}

13
public/js/quickmenu.js
View File

@ -23,6 +23,19 @@ const popupLoaders = {
"qm-popup-boosterjagd": loadBoosterHunt,
};
/* ================================
Gaststätte – Tab-Logik
================================ */
document.querySelectorAll("#qm-body-gaststaette .qm-tab").forEach((tab) => {
tab.addEventListener("click", () => {
document.querySelectorAll("#qm-body-gaststaette .qm-tab").forEach((t) => t.classList.remove("active"));
document.querySelectorAll("#qm-body-gaststaette .qm-tab-content").forEach((c) => c.classList.remove("active"));
tab.classList.add("active");
document.getElementById(tab.dataset.tab).classList.add("active");
});
});
/* ================================
Quick Menu – Toggle
================================ */

35
views/launcher.ejs
View File

@ -776,6 +776,15 @@
/>
<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>
<!-- ================================
@ -787,6 +796,32 @@
Quick Menu Popups (je 1800x1000)
================================ -->
<!-- ================================
Gaststätte Popup (Building 6)
================================ -->
<div id="qm-popup-gaststaette" 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>
<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>
</div>
</div>
</div>
<div id="qm-popup-carddeck" class="qm-popup">
<div class="qm-popup-header">
<span class="qm-popup-title">Kartendeck</span>