added password counter

screenshot auf v0.6.0 altualisiert
footer und AppVersion eingebaut
2026-02-07 23:45:57 +01:00 · 2026-02-07 16:49:46 +01:00 · 2026-02-07 16:45:02 +01:00 · 2026-02-07 00:34:05 +01:00 · 2026-02-07 00:32:20 +01:00 · 2026-02-07 00:31:40 +01:00
13 changed files with 523 additions and 554 deletions
--- a/.gitea/workflows/docker-release.yml
+++ b/.gitea/workflows/docker-release.yml
@@ -1,4 +1,4 @@
-iname: Docker Release Build
+name: Docker Release Build
 on:
  push:
    tags:
@@ -25,6 +25,8 @@ jobs:
          push: true
          # Hier wird die Git-Referenz automatisch als Docker-Tag genutzt
          #tags: gitea.scu.si/florianwalther/password-generator:${{ gitea.ref_name }}
+          build-args: |
+            APP_VERSION=${{ gitea.ref_name }}
          tags: |
            gitea.scu.si/florian.walther/password-generator:${{ gitea.ref_name }}
            gitea.scu.si/florian.walther/password-generator:latest
--- a/10
+++ b/10
@@ -8,7 +8,8 @@ WORKDIR /app
 COPY . .

 # Baue die Anwendung
-RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-s -w" -o /app/password-generator
+ARG APP_VERSION=dev
+RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-s -w -X 'main.AppVersion=${APP_VERSION}'" -o /app/password-generator

 # Verwende ein minimales Image für die finale Stage
 FROM scratch
@@ -16,9 +17,14 @@ FROM scratch
 # Kopiere die gebaute Binärdatei
 COPY --from=builder /app/password-generator /password-generator

+# Kopiere die templates
+COPY templates/ /templates/
+
+# Kopiere die static files
+COPY static/ /static/
+
 # Setze die Umgebungsvariable für die Ports
 ENV PORT=8080

 # Starte die Anwendung
 CMD ["/password-generator"]
-
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ _a web based password generator, with an API endpoint_
 * generates long and random, secure passwords (read about the [security considerations](SECURITY.md))
 * copy to clipboard
 * very small docker container, that only contains the application and has minimum attack surface
+* supports DarkMode and LightMode, you can toggle

 ## Demo

@@ -28,7 +29,7 @@ docker compose up -d

 ## Docker image

-The latest official docker image is at [https://gitea.scu.si/FlorianWalther/-/packages/container/password-generator/latest](https://gitea.scu.si/FlorianWalther/-/packages/container/password-generator/latest)
+The latest official docker image is at [https://gitea.scu.si/Florian.Walther/-/packages/container/password-generator/latest](https://gitea.scu.si/Florian.Walther/-/packages/container/password-generator/latest)

 You can pull it like this:
 ```
--- a/go.mod
+++ b/go.mod
@@ -1,3 +1,3 @@
-module gitea.scu.si/FlorianWalther/Web-Password
+module gitea.scu.si/Florian.Walther/Web-Password

 go 1.24.1
--- a/img/screenshot.png
+++ b/img/screenshot.png
--- a/main.go
+++ b/main.go
@@ -1,583 +1,154 @@
 package main

 import (
+	"os"
+	"strconv"
+	"strings"
+	"sync"
 	"crypto/rand"
-	"fmt"
+	"html/template"
 	"log"
 	"net/http"
+	"encoding/json"
 )

 const (
 	passwordLength = 32
-	// Zeichensatz mit 62 möglichen Zeichen pro Position
 	chars          = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
-
-        // Zeichensatz mit 58 möglichen Zeichen pro Position
-        // Verwechslungsanfällige Zeichen (0, O, 1, l, I) sind nicht enthalten.
-        //
-        // ## 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
-        // Sicherheitsverlust durch einen reduzierten Zeichensatz akzeptabel,
-        // weil der Keyspace immer noch so groß ist dass ein erraten praktisch
-        // unmöglich ist.
-        //
-        //const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789"
-
 )

+var (
+	templates = make(map[string]*template.Template)
+	AppVersion = "development"
+	counterFile = "/data/counter.txt"
+	mu sync.Mutex
+)
+
+// Diese Funktion wird nur intern aufgerufen, wenn der Mutex bereits gesperrt ist
+func getCount() int {
+	data, err := os.ReadFile(counterFile)
+	if err != nil {
+		return 0
+	}
+	count, _ := strconv.Atoi(strings.TrimSpace(string(data)))
+	return count
+}
+
+// Öffentliche Funktion für das Template (mit Lock)
+func GetPasswordCount() int {
+	mu.Lock()
+	defer mu.Unlock()
+	return getCount()
+}
+
+// Öffentliche Funktion zum Erhöhen (mit Lock)
+func IncrementPasswordCount() {
+	mu.Lock()
+	defer mu.Unlock()
+
+	// Wir rufen jetzt die interne Funktion auf, die NICHT versucht, 
+	// den Mutex erneut zu sperren
+	count := getCount() 
+	count++
+	os.WriteFile(counterFile, []byte(strconv.Itoa(count)), 0644)
+}
+
+func loadTemplates() {
+    // 1. FuncMap definieren
+    funcMap := template.FuncMap{
+        "getAppVersion": func() string { return AppVersion },
+        "getPassCount": func() int { return GetPasswordCount() },
+    }
+
+    // 2. Templates mit FuncMap laden
+    // Wir nutzen New("base.html"), da base.html meist das Haupt-Layout definiert
+    templates["index.html"] = template.Must(template.New("base.html").Funcs(funcMap).ParseFiles(
+        "templates/base.html", 
+        "templates/index.html",
+    ))
+
+    templates["help.html"] = template.Must(template.New("base.html").Funcs(funcMap).ParseFiles(
+        "templates/base.html", 
+        "templates/help.html",
+    ))
+
+    log.Printf("Alle Templates erfolgreich geladen")
+}
+
 func generatePassword() string {
+	log.Printf("called generatePassword\n")
 	password := make([]byte, passwordLength)
 	_, err := rand.Read(password)
 	if err != nil {
 		log.Fatal(err)
 	}
-
 	for i := 0; i < passwordLength; i++ {
 		password[i] = chars[int(password[i])%len(chars)]
 	}
-
+	IncrementPasswordCount()
 	return string(password)
 }

 func passwordHandler(w http.ResponseWriter, r *http.Request) {
-        log.Printf("APIHandler called from %s\n", r.RemoteAddr)
-	password := generatePassword()
-	fmt.Fprint(w, password)
+    log.Printf("called passwordHandler\n")
+    password := generatePassword()
+    currentCount := GetPasswordCount()
+    response := map[string]interface{}{
+        "password": password,
+        "count":    currentCount,
+    }
+    w.Header().Set("Content-Type", "application/json")
+    err := json.NewEncoder(w).Encode(response)
+    if err != nil {
+        log.Printf("Fehler beim Senden des JSON: %v", err)
+        http.Error(w, "Interner Fehler", http.StatusInternalServerError)
+        return
+    }
+}
+
+func passwordAPIHandler(w http.ResponseWriter, r *http.Request) {
+	log.Printf("called passwordHandler\n")
+	password := generatePassword()
+	w.Header().Set("Content-Type", "text/plain")
+	w.Write([]byte(password))
+}
+
+func indexHandler(w http.ResponseWriter, r *http.Request) {
+	log.Printf("call indexHandler: Request %s %s\n", r.Method, r.URL)
+	password := generatePassword()
+	//password := "load..."
+	data := struct {
+		Password string
+	}{
+		Password: password,
+	}
+	log.Printf("prepare template for index\n")
+	err := templates["index.html"].ExecuteTemplate(w, "base.html", data)
+	if err != nil {
+		log.Printf("Fehler beim Rendern des Templates: %v", err)
+		http.Error(w, "Interner Serverfehler", http.StatusInternalServerError)
+	}
 }

-// new help handler
 func helpHandler(w http.ResponseWriter, r *http.Request) {
-	log.Printf("helpHandler called from %s\n", r.RemoteAddr)
-	helpHTML := `
-	<!DOCTYPE html>
-	<html>
-	<head>
-		<title>Hilfe</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<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="help-container">
-			<h1>Hilfe: API-Endpunkt</h1>
-			<p>
-				Diese Anwendung bietet einen API-Endpunkt, um Passwörter direkt über die Kommandozeile abzurufen.
-				Der Endpunkt gibt das Passwort im Plain-Text-Format zurück.
-			</p>
-			<h2>Endpunkt:</h2>
-			<p><code>http://localhost:8080/api/password</code></p>
-			<h2>Beispiele:</h2>
-			<h3>Mac/Linux (Terminal):</h3>
-                        <pre>echo $(curl -s http://localhost:8080/api/password)</pre>
-			<h3>Windows (PowerShell):</h3>
-			<pre>Invoke-RestMethod -Uri http://localhost:8080/api/password</pre>
-			<h3>Windows (cmd):</h3>
-			<pre>curl http://localhost:8080/api/password</pre>
-			<p>
-				<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>
-	`
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	fmt.Fprint(w, helpHTML)
-}
-
-
-func webHandler(w http.ResponseWriter, r *http.Request) {
-	log.Printf("webHandler called from %s\n", r.RemoteAddr)
-	password := generatePassword()
-html := fmt.Sprintf(
-    `<DOCTYPE html>
-    <html>
-    <head>
-        <title>Passwort-Generator</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-				<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>
-            <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>
-        <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); // Toast verschwindet nach 1,5 Sekunden
-                }).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>
-				<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,
-)
-
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	fmt.Fprint(w, html)
+	log.Printf("call helpHandler\n")
+	err := templates["help.html"].ExecuteTemplate(w, "base.html", nil)
+	if err != nil {
+		log.Printf("Fehler beim Rendern des Templates: %v", err)
+		http.Error(w, "Interner Serverfehler", http.StatusInternalServerError)
+	}
 }

 func main() {
-	http.HandleFunc("/", webHandler)
-	http.HandleFunc("/api/password", passwordHandler)
+	loadTemplates()
+	fs := http.FileServer(http.Dir("static"))
+	http.Handle("/static/", http.StripPrefix("/static/", fs))
+
+	http.HandleFunc("/", indexHandler)
+	http.HandleFunc("/api/password", passwordAPIHandler)
+	http.HandleFunc("/json/password", passwordHandler)
 	http.HandleFunc("/help", helpHandler)
+
 	log.Println("Server läuft auf http://localhost:8080")
-	log.Println("Plain-Text-Passwort: curl http://localhost:8080/api/password")
 	log.Fatal(http.ListenAndServe(":8080", nil))
 }
--- a/misc/docker-compose.traefik.yml
+++ b/misc/docker-compose.traefik.yml
@@ -1,8 +1,10 @@
 services:
  password-generator:
-    image: gitea.scu.si/florianwalther/password-generator:latest
+    image: gitea.scu.si/florian.walther/password-generator:latest
    container_name: password-generator
    restart: always
+    volumes:
+      - ./app_data:/data
    expose:
      - "8080:8080"
    labels:
--- a/misc/docker-compose.yml
+++ b/misc/docker-compose.yml
@@ -1,8 +1,10 @@
 services:
  password-generator:
-    image: gitea.scu.si/florianwalther/password-generator:latest
+    image: gitea.scu.si/florian.walther/password-generator:latest
    container_name: password-generator
    restart: always
+    volumes:
+      - ./app_data:/data
    ports:
      - "8080:8080"
    # Falls die Registry privat ist, muss der Host zuvor mit 
--- a/static/key.png
+++ b/static/key.png
--- a/static/style.css
+++ b/static/style.css
@@ -0,0 +1,232 @@
+: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);
+}
+
+.dark {
+  --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;
+  margin-bottom: 60px;
+}
+
+.container {
+  text-align: center;
+  background: var(--container-bg);
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px var(--shadow-color);
+  width: 50%;
+  min-width: 600px;
+  position: relative;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--bg-color);
+    border-top: 1px solid var(--border-color);
+    padding: 10px 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    z-index: 1000;
+}
+
+.footer-container {
+    display: flex;
+    justify-content: flex-end; /* Schiebt alles nach rechts */
+    gap: 20px;                 /* Abstand zwischen Counter und Version */
+    align-items: center;
+}
+
+.footer-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 13px;
+    color:x#4b5563;
+}
+
+.label {
+    font-weight: 500;
+}
+
+/* Die Badges (Status-Pillen) */
+.value {
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+    font-weight: 600;
+    font-size: 11px;
+}
+
+.badge-blue {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+}
+
+.badge-gray {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    border: 1px solid var(border-color);
+}
+
+.claim {
+    font-family: monospace; /* Monospace sieht für Versionen oft "technischer" aus */
+    font-size: 12px;
+    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);
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.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;
+}
+
+.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;
+}
+
+.renew-button:hover {
+  background: var(--button-hover);
+}
+
+.code-link {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  font-size: 1.2rem;
+  color: var(--text-color);
+  opacity: 0.7;
+  text-decoration: none;
+}
+
+.code-link:hover {
+  opacity: 1;
+}
+.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);
+}
+
+#theme-toggle {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+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;
+}
+
--- a/templates/base.html
+++ b/templates/base.html
@@ -0,0 +1,66 @@
+<!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="icon" href="/static/key.png" type="image/png">
+    <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}}
+
+<!-- <footer>Version: {{getAppVersion}} | made with golang and ♥️  {{ block "footer" . }}{{ end }}</footer> -->
+<footer>
+    <div class="footer-container">
+        <div class="footer-item">
+            <span class="label">Passwörter generiert:</span>
+            <span id="global-counter" class="value badge-blue">{{getPassCount}}</span>
+        </div>
+        <div class="footer-item">
+            <span class="label">Version:</span>
+            <span class="value badge-gray">{{getAppVersion}}</span>
+        </div>
+        <div class="footer-item">
+            <span class="claim">made with golang and ♥️ </span>
+        </div>
+    </div>
+</footer>
+</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,52 @@
+{{ 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("/json/password")
+            .then(response => response.json()) // Jetzt .json() statt .text()
+            .then(data => {
+               // Passwort aktualisieren
+               document.getElementById("password").innerText = data.password;
+            
+               // Counter im Footer aktualisieren
+               // Wir suchen das Element mit der Klasse 'badge-blue' (oder gib ihm eine ID)
+               const counterElement = document.querySelector(".badge-blue");
+               if (counterElement) {
+                   //counterElement.innerText = data.count;
+                   document.getElementById("global-counter").innerText = data.count;
+               }
+        })
+        .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 }}
Author	SHA1	Message	Date
Florian Walther	13c791b1ae	added password counter All checks were successful Docker Release Build / push_to_registry (push) Successful in 58s Details	2026-02-07 23:45:57 +01:00
Florian Walther	8869db0f6b	screenshot auf v0.6.0 altualisiert	2026-02-07 16:49:46 +01:00
Florian Walther	c9296beb5f	footer und AppVersion eingebaut All checks were successful Docker Release Build / push_to_registry (push) Successful in 1m2s Details	2026-02-07 16:45:02 +01:00
Florian Walther	dd8eab7975	fixed URL	2026-02-07 00:34:05 +01:00
Florian Walther	3e2f4cf104	fixed spelling error	2026-02-07 00:32:20 +01:00
Florian Walther	9d4c816642	fixed spelling error	2026-02-07 00:31:40 +01:00
Florian Walther	2a8d343ff4	fixed spelling error	2026-02-07 00:29:41 +01:00
Florian Walther	c990d8a335	mention Dark- and Light-Mode in README	2026-02-06 13:08:16 +01:00
Florian Walther	e99bf45be9	favicon geändert All checks were successful / push_to_registry (push) Successful in 53s Details	2026-02-06 13:04:52 +01:00
Florian Walther	3c324d355d	favicon added	2026-02-06 12:43:48 +01:00
Florian Walther	149cdf2e63	new screenshot added	2026-02-06 12:40:50 +01:00
Florian Walther	3ab261d777	added templates, more solid DarkMode All checks were successful / push_to_registry (push) Successful in 1m13s Details	2026-02-06 12:34:10 +01:00