diff --git a/public/css/building.css b/public/css/building.css index 278aaa2..7851054 100644 --- a/public/css/building.css +++ b/public/css/building.css @@ -569,3 +569,45 @@ body { .market-page.locked { opacity: 0.4; } + +/* ========================= + Schwarzmarkt Tabs +========================= */ + +.market-tabs { + display: flex; + gap: 6px; + margin-bottom: 10px; +} + +.market-tab { + padding: 8px 14px; + + background: #5c3b20; + color: #e7d9b4; + + border: 1px solid #8b6a3c; + + cursor: pointer; + + font-family: "Cinzel", serif; +} + +.market-tab:hover { + background: #8b6a3c; +} + +.market-tab.active { + background: #d4b97a; + color: #2b1b0f; +} + +/* Tab Inhalte */ + +.market-tab-content { + display: none; +} + +.market-tab-content.active { + display: block; +} diff --git a/public/js/buildings/schwarzmarkt.js b/public/js/buildings/schwarzmarkt.js index 42de1f3..16dd3f7 100644 --- a/public/js/buildings/schwarzmarkt.js +++ b/public/js/buildings/schwarzmarkt.js @@ -2,12 +2,45 @@ export async function loadSchwarzmarkt() { const ui = document.querySelector(".building-ui"); ui.innerHTML = ` -

Schwarzmarkt

+
+ + + + + + + +
+ + +
+ +
+
+ +
+

Noch keine Artefakte verfügbar

+
+ +
+

Schwarzmarkt Angebote folgen bald

+
+ +
+ `; loadPages(); + + initMarketTabs(); } async function loadPages() { @@ -65,3 +98,23 @@ document.addEventListener("click", async (e) => { loadPages(); }); + +function initMarketTabs() { + document.querySelectorAll(".market-tab").forEach((tab) => { + tab.addEventListener("click", () => { + document + .querySelectorAll(".market-tab") + .forEach((t) => t.classList.remove("active")); + + tab.classList.add("active"); + + document + .querySelectorAll(".market-tab-content") + .forEach((c) => c.classList.remove("active")); + + document + .getElementById("market-" + tab.dataset.tab) + .classList.add("active"); + }); + }); +}