READMS.md erstellt

backend/public/css/style.css

@@ -163,3 +163,33 @@ color:#555;
     color:white;
     font-weight:bold;
 }
+body.dark{
+    background:#111827;
+    color:#e5e7eb;
+}
+
+body.dark section{
+    background:#1f2937;
+}
+
+body.dark th{
+    background:#111827;
+}
+
+body.dark td{
+    border-color:#374151;
+}
+
+body.dark .provider{
+    background:#1e3a8a;
+    color:white;
+}
+
+body.dark .ip{
+    background:#374151;
+}
+
+body.dark .ip.public{
+    background:#16a34a;
+    color:white;
+}

backend/public/index.html

@@ -13,6 +13,8 @@
 
 <h1>Ressourcen Verwaltung</h1>
 
+<button onclick="toggleDarkMode()">🌙 Dark Mode</button>
+
 <div id="lastUpdate" style="margin-bottom:10px;color:#555;">
 Letztes Update: -
 </div>
@@ -224,9 +226,6 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 <div id="ipList"></div>
 
 <hr>
-<input id="new_ip" placeholder="IP">
-<input id="new_type" placeholder="public / private">
-<input id="new_comment" placeholder="Beschreibung">
 
 <button onclick="saveIP()">Add</button>
 

backend/public/js/main.js

@@ -58,3 +58,22 @@ function updateLastUpdate(){
     document.getElementById("lastUpdate").innerText =
      "🟢 Letztes Update: " + time
 }
+
+window.toggleDarkMode = function(){
+
+    document.body.classList.toggle("dark")
+
+    localStorage.setItem(
+        "darkmode",
+        document.body.classList.contains("dark")
+    )
+}
+
+// beim Start laden
+document.addEventListener("DOMContentLoaded", () => {
+
+    if(localStorage.getItem("darkmode") === "true"){
+        document.body.classList.add("dark")
+    }
+
+})