Dark Mode erstellt und Textanalyse Feedback optmiert

css/style.css

@@ -274,4 +274,88 @@ footer {
   width: 0%;
   border-radius: 6px;
   transition: width 0.5s ease, background-color 0.5s ease;
+}
+
+
+/* Dark Mode */
+body.dark {
+  background-color: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark nav {
+  background-color: #0f172a;
+  border-color: #334155;
+}
+
+body.dark a {
+  color: #60a5fa;
+}
+
+body.dark h1,
+body.dark h2 {
+  color: #e2e8f0;
+}
+
+body.dark p {
+  color: #e2e8f0;
+}
+
+body.dark nav a {
+  color: #e2e8f0;
+}
+
+/* Dark Mode Toggle Switch */
+#dark-mode-toggle {
+  margin-left: auto;
+  position: relative;
+  width: 52px;
+  height: 26px;
+  background-color: #ccc;
+  border: none;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  flex-shrink: 0;
+}
+
+#dark-mode-toggle::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  top: 3px;
+  left: 3px;
+  transition: transform 0.3s ease;
+}
+
+body.dark #dark-mode-toggle {
+  background-color: #2563eb;
+  border-color: #2563eb;
+}
+
+body.dark #dark-mode-toggle::after {
+  transform: translateX(26px);
+}
+
+body.dark .rechner-feld label {
+  color: #e2e8f0;
+}
+
+body.dark .rechner-feld input,
+body.dark .rechner-feld textarea {
+  background: #1e293b;
+  color: #e2e8f0;
+  border-color: #334155;
+}
+
+body.dark .ergebnis-box {
+  background: #0f172a;
+  border-color: #2563eb;
+}
+
+body.dark .ergebnis-box p {
+  color: #e2e8f0;
 }

js/nav.js

@@ -11,7 +11,10 @@ const navigation = `
   <a href="textanalyse.html">Textanalyse</a>
   <a href="kontakt.html">Kontakt</a>
   <a href="impressum.html">Impressum</a>
+  <button id="dark-mode-toggle"></button>
 </nav>
 `;
 
-document.body.insertAdjacentHTML('afterbegin', navigation);
+document.body.insertAdjacentHTML('afterbegin', navigation);
+
+

js/script.js

@@ -26,3 +26,20 @@ function goToSlide(id, index) {
 
 initSlideshow('farn');
 initSlideshow('moos');
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    const toggle = document.getElementById("dark-mode-toggle");
+
+    // Gespeicherten Zustand wiederherstellen
+    if (localStorage.getItem("darkMode") === "true") {
+        document.body.classList.add("dark");
+    }
+
+    // Beim Klick umschalten und speichern
+    toggle.addEventListener("click", () => {
+        document.body.classList.toggle("dark");
+        const isDark = document.body.classList.contains("dark");
+        localStorage.setItem("darkMode", isDark);
+    });
+});

js/textanalyse.js

@@ -2,7 +2,6 @@ function analyseText(text) {
   const zeichen = text.length;
   const woerter = text.trim().split(/\s+/).length;
   const grossbuchstaben = text.toUpperCase();
-
   return `Zeichen: ${zeichen}\nWörter: ${woerter}\nGroßbuchstaben: ${grossbuchstaben}`;
 }
 
@@ -10,14 +9,13 @@ function starten() {
   const text = document.getElementById("eingabe").value;
 
   if (text.trim() === "") {
-    alert("Bitte gib einen Text ein!");
+    document.getElementById("ergebnisText").innerHTML = "<strong>Bitte gib einen Text ein!</strong>";
+    document.getElementById("ergebnis").style.display = "block";
     return;
   }
 
   const ergebnis = analyseText(text);
-
   console.log(ergebnis);
-  alert(ergebnis);
 
   document.getElementById("ergebnisText").innerHTML =
     `<strong>Zeichen:</strong> ${text.length}<br>

notenrechner.html

@@ -39,5 +39,6 @@
   </footer>
 
   <script src="js/notenrechener.js"></script>
+  <script src="js/script.js"></script>
 </body>
 </html>

textanalyse.html

@@ -32,5 +32,6 @@
   </footer>
 
   <script src="js/textanalyse.js"></script>
+  <script src="js/script.js"></script>
 </body>
 </html>