tzkjrzt

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;
+}

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
 ================================ */

views/launcher.ejs

@@ -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>