Auf Tabs umgestellt

backend/public/css/style.css

@@ -312,6 +312,38 @@ color:#555;
     margin-bottom:10px;
 }
 
+.tabs{
+    display:flex;
+    flex-wrap:wrap;
+    gap:8px;
+    margin:18px 0 24px 0;
+}
+
+.tab-button{
+    background:#e2e8f0;
+    color:#0f172a;
+    border-color:#cbd5e1;
+}
+
+.tab-button:hover{
+    background:#cbd5e1;
+    border-color:#94a3b8;
+}
+
+.tab-button.active{
+    background:#2563eb;
+    color:white;
+    border-color:#2563eb;
+}
+
+.tab-panel{
+    display:none;
+}
+
+.tab-panel.active{
+    display:block;
+}
+
 #ipList div{
     display:flex;
     align-items:center;
@@ -408,6 +440,23 @@ body.dark button.btn-ghost:hover{
     border-color:#475569;
 }
 
+body.dark .tab-button{
+    background:#334155;
+    color:#e5e7eb;
+    border-color:#475569;
+}
+
+body.dark .tab-button:hover{
+    background:#475569;
+    border-color:#64748b;
+}
+
+body.dark .tab-button.active{
+    background:#2563eb;
+    color:white;
+    border-color:#2563eb;
+}
+
 body.dark .domain-name,
 body.dark .subdomain-name{
     color:#f8fafc;

backend/public/index.html

@@ -20,8 +20,16 @@
 Letztes Update: -
 </div>
 
-<section>
+<nav class="tabs" aria-label="Bereiche">
+<button class="tab-button" data-tab-target="resources" onclick="setActiveTab('resources')">Ressourcen</button>
+<button class="tab-button" data-tab-target="overview" onclick="setActiveTab('overview')">Übersicht</button>
+<button class="tab-button" data-tab-target="domains" onclick="setActiveTab('domains')">Domains</button>
+<button class="tab-button" data-tab-target="mapping" onclick="setActiveTab('mapping')">Zuordnung</button>
+<button class="tab-button" data-tab-target="archive" onclick="setActiveTab('archive')">Archiv</button>
+</nav>
 
+<div class="tab-panel" data-tab="overview">
+<section>
 <h2>Kosten Dashboard</h2>
 
 <div id="costDashboard">
@@ -38,7 +46,16 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 
 </section>
 
+<section>
 
+<h2>Infrastruktur Übersicht</h2>
+
+<div id="infraView"></div>
+
+</section>
+</div>
+
+<div class="tab-panel" data-tab="resources">
 <section>
 
 <h2>Aktive Ressourcen</h2>
@@ -66,17 +83,10 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 </table>
 
 </section>
+</div>
 
 
-<section>
-
-<h2>Infrastruktur Übersicht</h2>
-
-<div id="infraView"></div>
-
-</section>
-
-
+<div class="tab-panel" data-tab="domains">
 <section>
 
 <h2>Domains</h2>
@@ -103,8 +113,10 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 </table>
 
 </section>
+</div>
 
 
+<div class="tab-panel" data-tab="mapping">
 <section>
 
 <h2>Domain → Server Zuordnung</h2>
@@ -124,8 +136,10 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 </table>
 
 </section>
+</div>
 
 
+<div class="tab-panel" data-tab="archive">
 <section>
 
 <h2>Gekündigte Ressourcen</h2>
@@ -150,6 +164,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 </table>
 
 </section>
+</div>
 
 
 

backend/public/js/main.js

@@ -1,5 +1,6 @@
 document.addEventListener("DOMContentLoaded", async () => {
 
+    initTabs()
     clearDNSCache()
     await refreshAll()
 
@@ -10,6 +11,29 @@ document.addEventListener("DOMContentLoaded", async () => {
 
 let refreshing = false
 
+const DEFAULT_TAB = "resources"
+
+window.setActiveTab = function(tab){
+    const selectedTab = tab || DEFAULT_TAB
+
+    document.querySelectorAll(".tab-button").forEach(button => {
+        button.classList.toggle("active", button.dataset.tabTarget === selectedTab)
+    })
+
+    document.querySelectorAll(".tab-panel").forEach(panel => {
+        panel.classList.toggle("active", panel.dataset.tab === selectedTab)
+    })
+
+    localStorage.setItem("activeTab", selectedTab)
+}
+
+function initTabs(){
+    const storedTab = localStorage.getItem("activeTab")
+    const hasStoredTab = storedTab && document.querySelector(`[data-tab="${storedTab}"]`)
+
+    setActiveTab(hasStoredTab ? storedTab : DEFAULT_TAB)
+}
+
 async function refreshAll(){
 
     if(refreshing) return
@@ -98,4 +122,4 @@ function showError(msg) {
   setTimeout(() => {
     div.remove()
   }, 3000)
-}
+}