diff --git a/public/css/quickmenu.css b/public/css/quickmenu.css index cfc1256..7892a65 100644 --- a/public/css/quickmenu.css +++ b/public/css/quickmenu.css @@ -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; +} diff --git a/public/js/quickmenu.js b/public/js/quickmenu.js index f0a9972..687110d 100644 --- a/public/js/quickmenu.js +++ b/public/js/quickmenu.js @@ -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 ================================ */ diff --git a/views/launcher.ejs b/views/launcher.ejs index 1a99307..d22c88d 100644 --- a/views/launcher.ejs +++ b/views/launcher.ejs @@ -776,6 +776,15 @@ /> Boosterjagd + +
+ Gaststätte
+ Inhalt Tab 1 (Dummy)
+Inhalt Tab 2 (Dummy)
+Inhalt Tab 3 (Dummy)
+