added templates, more solid DarkMode

2026-02-06 12:34:10 +01:00
parent 623cfd3a50
commit 3ab261d777
6 changed files with 342 additions and 546 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ block "title" . }}Passwort-Generator{{ end }}</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const root = document.documentElement;
+        const savedTheme = localStorage.getItem('theme');
+        const themeToggle = document.getElementById('theme-toggle');
+
+        // Setze das Theme basierend auf localStorage oder Systemeinstellung
+        if (savedTheme === 'dark') {
+          root.classList.add('dark');
+        } else if (savedTheme === 'light') {
+          root.classList.remove('dark');
+        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          root.classList.add('dark');
+        }
+
+        // Toggle-Button-Logik
+        themeToggle.addEventListener('click', function() {
+          if (root.classList.contains('dark')) {
+            root.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+          } else {
+            root.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+          }
+        });
+
+        // Systemtheme-Änderungen abhören
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+          if (!localStorage.getItem('theme')) {
+            e.matches ? root.classList.add('dark') : root.classList.remove('dark');
+          }
+        });
+      });
+    </script>
+    {{ block "head" . }}{{ end }}
+</head>
+<body>
+    <button id="theme-toggle">🌓</button>
+    {{ block "body" . }}{{end}}
+</body>
+</html>
--- a/templates/help.html
+++ b/templates/help.html
@@ -0,0 +1,35 @@
+{{ define "help.html" }}
+
+{{ block "title" . }}Hilfe{{ end }}
+
+{{ block "head" . }}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentHost = window.location.host;
+        const apiEndpoint = window.location.protocol + "//" + currentHost + "/api/password";
+
+        document.getElementById("api-endpoint").textContent = apiEndpoint;
+        document.getElementById("curl-example").textContent = "curl " + apiEndpoint;
+        document.getElementById("powershell-example").textContent = "Invoke-RestMethod -Uri " + apiEndpoint;
+        document.getElementById("cmd-example").textContent = "curl " + apiEndpoint;
+    });
+</script>
+{{ end }}
+
+{{ block "body" . }}
+<div class="container">
+    <h1>Hilfe: API-Endpunkt</h1>
+    <p>Diese Anwendung bietet einen API-Endpunkt, um Passwörter direkt über die Kommandozeile abzurufen.</p>
+    <h2>Endpunkt:</h2>
+    <p><code id="api-endpoint"></code></p>
+    <h2>Beispiele:</h2>
+    <h3>Mac/Linux (Terminal):</h3>
+    <pre id="curl-example"></pre>
+    <h3>Windows (PowerShell):</h3>
+    <pre id="powershell-example"></pre>
+    <h3>Windows (cmd):</h3>
+    <pre id="cmd-example"></pre>
+    <p><a href="/">Zurück zur Passwort-Generierung</a></p>
+</div>
+{{ end }}
+{{ end }}
--- a/templates/index.html
+++ b/templates/index.html
@@ -0,0 +1,43 @@
+{{ define "index.html" }}
+
+{{ block "title" . }}Passwort-Generator{{ end }}
+
+{{ block "head" . }}
+<script>
+    function copyToClipboard() {
+        const password = document.getElementById("password").innerText;
+        navigator.clipboard.writeText(password).then(() => {
+            const toast = document.getElementById("toast");
+            toast.style.visibility = "visible";
+            setTimeout(() => { toast.style.visibility = "hidden"; }, 1500);
+        }).catch(err => {
+            console.error("Fehler beim Kopieren: ", err);
+            alert("Kopieren fehlgeschlagen. Bitte manuell kopieren: " + password);
+        });
+    }
+
+    function generateNewPassword() {
+        fetch("/api/password")
+            .then(response => response.text())
+            .then(password => {
+                document.getElementById("password").innerText = password;
+            })
+            .catch(error => console.error("Fehler:", error));
+    }
+</script>
+{{ end }}
+
+{{ block "body" . }}
+<div class="container">
+    <a href="/help" class="help-link">?</a>
+    <a href="https://gitea.scu.si/Florian.Walther/Web-Password" class="code-link">Sourcecode</a>
+    <h1>Generiertes Passwort</h1>
+    <div id="password">{{ .Password }}</div>
+    <div class="buttons">
+        <button class="copy-button" onclick="copyToClipboard()">In Zwischenablage kopieren</button>
+        <button class="renew-button" onclick="generateNewPassword()">Neues Passwort generieren</button>
+    </div>
+    <div id="toast">✓ Kopiert!</div>
+</div>
+{{ end }}
+{{ end }}