From 2f9ee420719285f831bcfa6b38fbe2bf6313cad5 Mon Sep 17 00:00:00 2001
From: Florian Walther <fwa@certainity.com>
Date: Tue, 3 Feb 2026 23:55:35 +0100
Subject: [PATCH] added darkmode

---
 main.go | 583 +++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 433 insertions(+), 150 deletions(-)

diff --git a/main.go b/main.go
index ba33966..a3d5d64 100644
--- a/main.go
+++ b/main.go
@@ -18,9 +18,9 @@ const (
         // ## Security Note: ################################################
         // Der reduzierte Zeichensatz setzt den Keyspace von 10^57 auf 10^56 herab.
         // Die Entropie wird von ~192.6 Bit auf ~190.6 Bit herabgesetzt.
-        // Solange die Passwortlänge von 32 Zeichen beibehalten wird ist der 
+        // Solange die Passwortlänge von 32 Zeichen beibehalten wird ist der
         // Sicherheitsverlust durch einen reduzierten Zeichensatz akzeptabel,
-        // weil der Keyspace immer noch so groß ist dass ein erraten praktisch 
+        // weil der Keyspace immer noch so groß ist dass ein erraten praktisch
         // unmöglich ist.
         //
         //const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789"
@@ -54,45 +54,168 @@ func helpHandler(w http.ResponseWriter, r *http.Request) {
 		<title>Hilfe</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<style>
-			body {
-				font-family: 'Helvetica Neue', Arial, sans-serif;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				height: 100vh;
-				margin: 0;
-				background-color: #f5f5f5;
-				color: #333;
-			}
-			.help-container {
-				text-align: left;
-				background: white;
-				padding: 2rem;
-				border-radius: 8px;
-				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-				max-width: 800px;
-				width: 90%;
-				min-width: 600px;
-			}
-			h1 {
-				font-size: 1.5rem;
-				margin-bottom: 1.5rem;
-				color: #444;
-			}
-			pre {
-				font-family: 'Courier New', Courier, monospace;
-				background: #f0f0f0;
-				padding: 0.8rem;
-				border-radius: 4px;
-				overflow-x: auto;
-			}
-			a {
-				color: #007BFF;
-				text-decoration: none;
-			}
-			a:hover {
-				text-decoration: underline;
-			}
+  :root {
+    --bg-color: #f5f5f5;
+    --text-color: #333;
+    --container-bg: white;
+    --button-bg: #007BFF;
+    --button-hover: #0056b3;
+    --copy-button-bg: #4CAF50;
+    --copy-button-hover: #45a049;
+    --password-bg: #f0f0f0;
+    --border-color: #ddd;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg-color: #121212;
+      --text-color: #e0e0e0;
+      --container-bg: #1e1e1e;
+      --button-bg: #2a7df4;
+      --button-hover: #1a5fb4;
+      --copy-button-bg: #4caf60;
+      --copy-button-hover: #3d8b40;
+      --password-bg: #2d2d2d;
+      --border-color: #444;
+      --shadow-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  body {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background-color 0.3s, color 0.3s;
+  }
+
+  .container {
+    text-align: center;
+    background: var(--container-bg);
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    width: 90%;
+    min-width: 600px;
+    position: relative;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-color);
+  }
+
+  #password {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 1.2rem;
+    letter-spacing: 1px;
+    margin: 1rem auto;
+    padding: 0.8rem;
+    background: var(--password-bg);
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    width: 90%;
+    word-break: break-all;
+    color: var(--text-color);
+  }
+
+  .copy-button {
+    background: var(--copy-button-bg);
+    color: white;
+    border: none;
+    padding: 0.6rem 1.2rem;
+    font-size: 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin: 0.3rem;
+  }
+
+  .copy-button:hover {
+    background: var(--copy-button-hover);
+  }
+
+  .renew-button {
+    background: var(--button-bg);
+    color: white;
+    border: none;
+    padding: 0.6rem 1.2rem;
+    font-size: 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin: 0.3rem;
+  }
+
+  .renew-button:hover {
+    background: var(--button-hover);
+  }
+
+  .help-link {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    font-size: 1.2rem;
+    color: var(--text-color);
+    opacity: 0.7;
+    text-decoration: none;
+  }
+
+  .help-link:hover {
+    opacity: 1;
+  }
+
+  #toast {
+    visibility: hidden;
+    min-width: 150px;
+    background-color: var(--copy-button-bg);
+    color: white;
+    text-align: center;
+    border-radius: 4px;
+    padding: 0.5rem;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1;
+    font-size: 0.9rem;
+    box-shadow: 0 2px 10px var(--shadow-color);
+  }
+
+  .help-container {
+    text-align: left;
+    background: var(--container-bg);
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    max-width: 800px;
+    width: 90%;
+    min-width: 600px;
+    color: var(--text-color);
+  }
+
+  pre {
+    font-family: 'Courier New', Courier, monospace;
+    background: var(--password-bg);
+    padding: 0.8rem;
+    border-radius: 4px;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+  }
+
+  a {
+    color: var(--button-bg);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
 		</style>
 	</head>
 	<body>
@@ -115,6 +238,58 @@ func helpHandler(w http.ResponseWriter, r *http.Request) {
 				<a href="/">Zurück zur Passwort-Generierung</a>
 			</p>
 		</div>
+		<script>
+  // Darkmode-Toggle-Funktion (optional)
+  function toggleDarkMode() {
+    const root = document.documentElement;
+    const isDark = root.style.getPropertyValue('--bg-color') === 'rgb(18, 18, 18)';
+    if (isDark) {
+      // Zu Lightmode wechseln
+      root.style.setProperty('--bg-color', '#f5f5f5');
+      root.style.setProperty('--text-color', '#333');
+      root.style.setProperty('--container-bg', 'white');
+      root.style.setProperty('--button-bg', '#007BFF');
+      root.style.setProperty('--button-hover', '#0056b3');
+      root.style.setProperty('--copy-button-bg', '#4CAF50');
+      root.style.setProperty('--copy-button-hover', '#45a049');
+      root.style.setProperty('--password-bg', '#f0f0f0');
+      root.style.setProperty('--border-color', '#ddd');
+      root.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
+      localStorage.setItem('theme', 'light');
+    } else {
+      // Zu Darkmode wechseln
+      root.style.setProperty('--bg-color', '#121212');
+      root.style.setProperty('--text-color', '#e0e0e0');
+      root.style.setProperty('--container-bg', '#1e1e1e');
+      root.style.setProperty('--button-bg', '#2a7df4');
+      root.style.setProperty('--button-hover', '#1a5fb4');
+      root.style.setProperty('--copy-button-bg', '#4caf60');
+      root.style.setProperty('--copy-button-hover', '#3d8b40');
+      root.style.setProperty('--password-bg', '#2d2d2d');
+      root.style.setProperty('--border-color', '#444');
+      root.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.3)');
+      localStorage.setItem('theme', 'dark');
+    }
+  }
+
+  // Prüfe, ob Nutzer eine manuelle Einstellung gespeichert hat
+  if (localStorage.getItem('theme') === 'dark') {
+    toggleDarkMode();
+  } else if (localStorage.getItem('theme') === 'light') {
+    // Stelle sicher, dass Lightmode aktiv ist (falls Systemtheme dark ist)
+    document.documentElement.style.setProperty('--bg-color', '#f5f5f5');
+    document.documentElement.style.setProperty('--text-color', '#333');
+    document.documentElement.style.setProperty('--container-bg', 'white');
+    document.documentElement.style.setProperty('--button-bg', '#007BFF');
+    document.documentElement.style.setProperty('--button-hover', '#0056b3');
+    document.documentElement.style.setProperty('--copy-button-bg', '#4CAF50');
+    document.documentElement.style.setProperty('--copy-button-hover', '#45a049');
+    document.documentElement.style.setProperty('--password-bg', '#f0f0f0');
+    document.documentElement.style.setProperty('--border-color', '#ddd');
+    document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
+  }
+</script>
+
 	</body>
 	</html>
 	`
@@ -130,119 +305,176 @@ html := fmt.Sprintf(
     <head>
         <title>Passwort-Generator</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
-            body {
-                font-family: 'Helvetica Neue', Arial, sans-serif;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 100vh;
-                margin: 0;
-                background-color: #f5f5f5;
-                color: #333;
-            }
-            .container {
-                text-align: center;
-                background: white;
-                padding: 2rem;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-                width: 90%%;
-                min-width: 600px;
-                position: relative;
-            }
-            h1 {
-                font-size: 1.5rem;
-                margin-bottom: 1.5rem;
-                color: #444;
-            }
-            #password {
-                font-family: 'Courier New', Courier, monospace;
-                font-size: 1.2rem;
-                letter-spacing: 1px;
-                margin: 1rem auto;
-                padding: 0.8rem;
-                background: #f0f0f0;
-                border-radius: 4px;
-                border: 1px solid #ddd;
-                width: 90%%;
-                word-break: break-all;
-            }
-            .copy-button {
-                background: #4CAF50;
-                color: white;
-                border: none;
-                padding: 0.6rem 1.2rem;
-                font-size: 1rem;
-                border-radius: 4px;
-                cursor: pointer;
-                transition: background 0.2s;
-                margin: 0.3rem;
-            }
-            .copy-button:hover {
-                background: #45a049;
-            }
-            .renew-button {
-                background: #007BFF;
-                color: white;
-                border: none;
-                padding: 0.6rem 1.2rem;
-                font-size: 1rem;
-                border-radius: 4px;
-                cursor: pointer;
-                transition: background 0.2s;
-                margin: 0.3rem;
-            }
-            .renew-button:hover {
-                background: #0056b3;
-            }
-            .about-link {
-                position: absolute;
-                top: 1rem;
-                left: 1rem;
-                font-size: 1.2rem;
-                color: #999;
-                text-decoration: none;
-            }
-            .about-link:hover {
-                color: #444;
-            }
-            .help-link {
-                position: absolute;
-                top: 1rem;
-                right: 1rem;
-                font-size: 1.2rem;
-                color: #999;
-                text-decoration: none;
-            }
-            .help-link:hover {
-                color: #444;
-            }
-            .buttons {
-                display: flex;
-                justify-content: center;
-                gap: 0.5rem;
-            }
-            #toast {
-                visibility: hidden;
-                min-width: 150px;
-                background-color: #4CAF50;
-                color: white;
-                text-align: center;
-                border-radius: 4px;
-                padding: 0.5rem;
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                z-index: 1;
-                font-size: 0.9rem;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-            }
+				<style>
+  :root {
+    --bg-color: #f5f5f5;
+    --text-color: #333;
+    --container-bg: white;
+    --button-bg: #007BFF;
+    --button-hover: #0056b3;
+    --copy-button-bg: #4CAF50;
+    --copy-button-hover: #45a049;
+    --password-bg: #f0f0f0;
+    --border-color: #ddd;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg-color: #121212;
+      --text-color: #e0e0e0;
+      --container-bg: #1e1e1e;
+      --button-bg: #2a7df4;
+      --button-hover: #1a5fb4;
+      --copy-button-bg: #4caf60;
+      --copy-button-hover: #3d8b40;
+      --password-bg: #2d2d2d;
+      --border-color: #444;
+      --shadow-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  body {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background-color 0.3s, color 0.3s;
+  }
+
+  .container {
+    text-align: center;
+    background: var(--container-bg);
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    width: 90%;
+    min-width: 600px;
+    position: relative;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-color);
+  }
+
+  #password {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 1.2rem;
+    letter-spacing: 1px;
+    margin: 1rem auto;
+    padding: 0.8rem;
+    background: var(--password-bg);
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    width: 90%;
+    word-break: break-all;
+    color: var(--text-color);
+  }
+
+  .copy-button {
+    background: var(--copy-button-bg);
+    color: white;
+    border: none;
+    padding: 0.6rem 1.2rem;
+    font-size: 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin: 0.3rem;
+  }
+
+  .copy-button:hover {
+    background: var(--copy-button-hover);
+  }
+
+  .renew-button {
+    background: var(--button-bg);
+    color: white;
+    border: none;
+    padding: 0.6rem 1.2rem;
+    font-size: 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin: 0.3rem;
+  }
+
+  .renew-button:hover {
+    background: var(--button-hover);
+  }
+
+  .help-link {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    font-size: 1.2rem;
+    color: var(--text-color);
+    opacity: 0.7;
+    text-decoration: none;
+  }
+
+  .help-link:hover {
+    opacity: 1;
+  }
+
+  #toast {
+    visibility: hidden;
+    min-width: 150px;
+    background-color: var(--copy-button-bg);
+    color: white;
+    text-align: center;
+    border-radius: 4px;
+    padding: 0.5rem;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1;
+    font-size: 0.9rem;
+    box-shadow: 0 2px 10px var(--shadow-color);
+  }
+
+  .help-container {
+    text-align: left;
+    background: var(--container-bg);
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    max-width: 800px;
+    width: 90%;
+    min-width: 600px;
+    color: var(--text-color);
+  }
+
+  pre {
+    font-family: 'Courier New', Courier, monospace;
+    background: var(--password-bg);
+    padding: 0.8rem;
+    border-radius: 4px;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+  }
+
+  a {
+    color: var(--button-bg);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
         </style>
     </head>
     <body>
         <div class="container">
             <a href="/help" class="help-link">API</a>
+            <button onclick="toggleDarkMode()" style="position: absolute; top: 1rem; left: 1rem; background: transparent; border: none; color: var(--text-color); font-size: 1.2rem; cursor: pointer;">🌓</button>
+
             <a class="about-link" href="https://gitea.scu.si/FlorianWalther/Web-Password">code</a>
             <h1>Generiertes Passwort</h1>
             <div id="password">%s</div>
@@ -275,6 +507,58 @@ html := fmt.Sprintf(
                     .catch(error => console.error("Fehler:", error));
             }
         </script>
+				<script>
+  // Darkmode-Toggle-Funktion (optional)
+  function toggleDarkMode() {
+    const root = document.documentElement;
+    const isDark = root.style.getPropertyValue('--bg-color') === 'rgb(18, 18, 18)';
+    if (isDark) {
+      // Zu Lightmode wechseln
+      root.style.setProperty('--bg-color', '#f5f5f5');
+      root.style.setProperty('--text-color', '#333');
+      root.style.setProperty('--container-bg', 'white');
+      root.style.setProperty('--button-bg', '#007BFF');
+      root.style.setProperty('--button-hover', '#0056b3');
+      root.style.setProperty('--copy-button-bg', '#4CAF50');
+      root.style.setProperty('--copy-button-hover', '#45a049');
+      root.style.setProperty('--password-bg', '#f0f0f0');
+      root.style.setProperty('--border-color', '#ddd');
+      root.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
+      localStorage.setItem('theme', 'light');
+    } else {
+      // Zu Darkmode wechseln
+      root.style.setProperty('--bg-color', '#121212');
+      root.style.setProperty('--text-color', '#e0e0e0');
+      root.style.setProperty('--container-bg', '#1e1e1e');
+      root.style.setProperty('--button-bg', '#2a7df4');
+      root.style.setProperty('--button-hover', '#1a5fb4');
+      root.style.setProperty('--copy-button-bg', '#4caf60');
+      root.style.setProperty('--copy-button-hover', '#3d8b40');
+      root.style.setProperty('--password-bg', '#2d2d2d');
+      root.style.setProperty('--border-color', '#444');
+      root.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.3)');
+      localStorage.setItem('theme', 'dark');
+    }
+  }
+
+  // Prüfe, ob Nutzer eine manuelle Einstellung gespeichert hat
+  if (localStorage.getItem('theme') === 'dark') {
+    toggleDarkMode();
+  } else if (localStorage.getItem('theme') === 'light') {
+    // Stelle sicher, dass Lightmode aktiv ist (falls Systemtheme dark ist)
+    document.documentElement.style.setProperty('--bg-color', '#f5f5f5');
+    document.documentElement.style.setProperty('--text-color', '#333');
+    document.documentElement.style.setProperty('--container-bg', 'white');
+    document.documentElement.style.setProperty('--button-bg', '#007BFF');
+    document.documentElement.style.setProperty('--button-hover', '#0056b3');
+    document.documentElement.style.setProperty('--copy-button-bg', '#4CAF50');
+    document.documentElement.style.setProperty('--copy-button-hover', '#45a049');
+    document.documentElement.style.setProperty('--password-bg', '#f0f0f0');
+    document.documentElement.style.setProperty('--border-color', '#ddd');
+    document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
+  }
+</script>
+
     </body>
     </html>`,
     password,
@@ -292,4 +576,3 @@ func main() {
 	log.Println("Plain-Text-Passwort: curl http://localhost:8080/api/password")
 	log.Fatal(http.ListenAndServe(":8080", nil))
 }
-