Auf Tabs umgestellt

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>