design updates

static/style.css

@@ -1,6 +1,7 @@
 :root {
   --bg-color: #f5f5f5;
   --text-color: #333;
+  --highlight-color: #1d4ed8;
   --container-bg: white;
   --button-bg: #007BFF;
   --button-hover: #0056b3;
@@ -14,6 +15,7 @@
 .dark {
   --bg-color: #121212;
   --text-color: #e0e0e0;
+  --highlight-color: #fcf803;
   --container-bg: #1e1e1e;
   --button-bg: #2a7df4;
   --button-hover: #1a5fb4;
@@ -72,40 +74,19 @@ footer {
     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;
+    font-size: 13px;
-    color: var(--text-color);
+    color:var(--text-color);
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); color: var(--shadow-color); }
+    50% { transform: scale(1.2); color: var(--highlight-color); font-weight: bold; }
+    100% { transform: scale(1); color: var(--shadow-color); }
+}
+
+.counter-update {
+    animation: pulse 0.4s ease-out;
 }
 
 #password {

templates/base.html

@@ -50,15 +50,13 @@
 <footer>
     <div class="footer-container">
         <div class="footer-item">
-            <span class="label">Passwörter generiert:</span>
+            Passwörter generiert: <span id="global-counter">{{getPassCount}}</span>
-            <span id="global-counter" class="value badge-blue">{{getPassCount}}</span>
         </div>
         <div class="footer-item">
-            <span class="label">Version:</span>
+            Version: {{getAppVersion}}
-            <span class="value badge-gray">{{getAppVersion}}</span>
         </div>
         <div class="footer-item">
-            <span class="claim">made with golang and ♥️ </span>
+            made with golang and ♥️
         </div>
     </div>
 </footer>

templates/index.html

@@ -25,10 +25,13 @@
             
                // Counter im Footer aktualisieren
                // Wir suchen das Element mit der Klasse 'badge-blue' (oder gib ihm eine ID)
-               const counterElement = document.querySelector(".badge-blue");
+               const counterElement = document.getElementById("global-counter");
                if (counterElement) {
-                   //counterElement.innerText = data.count;
                    document.getElementById("global-counter").innerText = data.count;
+                   // Animation triggern
+                   counterElement.classList.remove("counter-update"); // Vorherige Animation zurücksetzen
+                   void counterElement.offsetWidth;                 // Trick, um CSS-Reflow zu erzwingen
+                   counterElement.classList.add("counter-update");
                }
         })
         .catch(error => console.error("Fehler:", error));