favicon geändert

.gitea/workflows/docker-release.yml

@@ -14,8 +14,8 @@ jobs:
       - name: Login to Gitea
         uses: docker/login-action@v3
         with:
-          registry: ${{ secrets.REGISTRY_URL }} # gitea.scu.si
-          username: ${{ gitea.actor }}
+          registry: ${{ vars.REGISTRY_URL }} # gitea.scu.si
+          username: ${{ secrets.REGISTRY_USER }}
           password: ${{ secrets.REGISTRY_PASSWORD }}
 
       - name: Build and push
@@ -26,5 +26,5 @@ jobs:
           # Hier wird die Git-Referenz automatisch als Docker-Tag genutzt
           #tags: gitea.scu.si/florianwalther/password-generator:${{ gitea.ref_name }}
           tags: |
-            gitea.scu.si/florianwalther/password-generator:${{ gitea.ref_name }}
-            gitea.scu.si/florianwalther/password-generator:latest
+            gitea.scu.si/florian.walther/password-generator:${{ gitea.ref_name }}
+            gitea.scu.si/florian.walther/password-generator:latest

Dockerfile

@@ -16,9 +16,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"]
-

README.md

@@ -1,6 +1,6 @@
 # Web-Password
 
-_a web based password generator_
+_a web based password generator, with an API endpoint_
 
 ![App Screenshot](img/screenshot.png)
 
@@ -16,7 +16,7 @@ There is a demo at [https://passwd.scu.si](https://passwd.scu.si)
 
 ## Usage
 
-The follwoing example shows how to get up your own instance with `docker compose`.
+The following example shows how to get up your own instance with `docker compose`.
 
 ```
 git clone https://gitea.scu.si/FlorianWalther/Web-Password.git
@@ -26,4 +26,15 @@ docker compose pull
 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)
+
+You can pull it like this:
+```
+docker pull gitea.scu.si/florian.walther/password-generator:latest
+```
+
+## more usage examples
+
 There are some more usage example in [misc/MoreUsage.md](misc/MoreUsage.md)

main.go

@@ -2,307 +2,76 @@ package main
 
 import (
 	"crypto/rand"
-	"fmt"
+	"html/template"
 	"log"
 	"net/http"
 )
 
 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 tmpl *template.Template
+var templates = make(map[string]*template.Template)
+
+func loadTemplates() {
+	templates["index.html"] = template.Must(template.ParseFiles("templates/base.html", "templates/index.html"))
+	templates["help.html"] = template.Must(template.ParseFiles("templates/base.html", "templates/help.html"))
+	log.Printf("Alle Templates erfolgreich geladen")
+}
+
 func generatePassword() string {
 	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)]
 	}
-
 	return string(password)
 }
 
 func passwordHandler(w http.ResponseWriter, r *http.Request) {
 	password := generatePassword()
-	fmt.Fprint(w, password)
+	w.Header().Set("Content-Type", "text/plain")
+	w.Write([]byte(password))
 }
 
-// new help handler
-func helpHandler(w http.ResponseWriter, r *http.Request) {
-    helpHTML := `
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <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: 500px;
-            }
-            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;
-            }
-        </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 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>
-        <script>
-            // Dynamisch den aktuellen Hostnamen ermitteln
-            const currentHost = window.location.host;
-            const apiEndpoint = "http://" + currentHost + "/api/password";
-
-            // Hostnamen in die Beispiele eintragen
-            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>
-    </body>
-    </html>
-    `
-    w.Header().Set("Content-Type", "text/html; charset=utf-8")
-    fmt.Fprint(w, helpHTML)
-}
-
-
-func webHandler(w http.ResponseWriter, r *http.Request) {
+func indexHandler(w http.ResponseWriter, r *http.Request) {
+	log.Printf("call indexHandler: Request %s %s\n", r.Method, r.URL)
 	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>
-            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;
+	data := struct {
+		Password string
+	}{
+		Password: password,
 	}
-            .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: 500px;
-                position: relative;
+	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)
 	}
-            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>
-    </head>
-    <body>
-        <div class="container">
-            <a href="/help" class="help-link">API</a>
-            <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>
-    </body>
-    </html>`,
-    password,
-)
+}
 
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	fmt.Fprint(w, html)
+func helpHandler(w http.ResponseWriter, r *http.Request) {
+	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)
+	loadTemplates()
+	fs := http.FileServer(http.Dir("static"))
+	http.Handle("/static/", http.StripPrefix("/static/", fs))
+
+	http.HandleFunc("/", indexHandler)
 	http.HandleFunc("/api/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))
 }
-

misc/MoreUsage.md

@@ -1,31 +1,66 @@
+## bash alias
 
+You can configure an bash alias in your `~/.bashrc` like this:
 
-# Baue die Go-Anwendung
+```
+## genpasswd alias
+alias genpasswd='echo $(curl -s https://passwd.scu.si/api/password)'
+```
+
+After making above changes you have to reload your ~/bashrc, in order to activate your changes.
+```
+. ~/.bashrc
+```
+
+Now you can enter `genpasswd` and get a fresh password from the API Endpoint.
+
+## get 10 fresh passwords
+
+```bash
+for i in {1..10}; do echo $(curl -s https://passwd.scu.si/api/password); done
+```
+
+# building the app
+
+you can build the app yourself like this:
 
 ```
 go build -o password-generator ./
 ```
 
-# Baue das Docker-Image
+
+
+# build a docker container
 
 ```
 docker build -t password-generator .
 ```
 
-# Starte den Docker Container
+# start the docker container
 
 ```
 docker run -p 8080:8080 password-generator
 ```
 
-## mit docker-compose
+## docker-compose
 
-Ein `docker-compose.yml` wird mitgeliefert.
+There are two example docker-compose files in the [misc](./) directory.
+
+### docker-compose.yml
+
+A basic variant that just brings up the container and export port 8080.
+The basic variant can be used without modifications.
+
+### docker-compose.traefik.yml
+
+The other one is meant to be used behind a traefik reverse proxy.
+This variant has lables to configure traefik accordingly.
+The traefik variant needs to be adjusted to your environment before 
+you can use it successfully.
 
 ### initial pull
 
 ```
-docker compose login gitea.scu.si
 docker compose pull
 ```
 
@@ -41,5 +76,12 @@ docker compose up -d
 docker compose down
 ```
 
+### update container
+
+In order to update your container to the current version, do this:
+```
+docker compose pull
+docker compose up -d
+```
 
 

misc/docker-compose.traefik.yml

@@ -5,8 +5,6 @@ services:
     restart: always
     expose:
       - "8080:8080"
-    # Falls die Registry privat ist, muss der Host zuvor mit 
-    # 'docker login gitea.scu.si' angemeldet worden sein.
     labels:
       - "traefik.enable=true"
       - "traefik.docker.network=traefik_backend"

static/style.css

@@ -0,0 +1,171 @@
+: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;
+}
+
+.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;
+}
+
+#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;
+}
+

templates/base.html

@@ -0,0 +1,49 @@
+<!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}}
+</body>
+</html>

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 }}

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 }}