From addc23bc148f23d0972ab23830bb10528a79bd6c Mon Sep 17 00:00:00 2001
From: VS-Code <->
Date: Fri, 6 Feb 2026 15:51:37 +0100
Subject: [PATCH] Animations

---
 index.html | 53 ++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index fb3643f..603f171 100755
--- a/index.html
+++ b/index.html
@@ -213,15 +213,16 @@
         
         <h1><span id="typewriter"></span><span class="title-cursor">_</span></h1>
 
+
         <div class="terminal">
     <pre>
                              <span class="t-blue">Helios Server</span>
     <span class="t-yellow">__  __     ___           -------------------------</span>
-   <span class="t-yellow">/ / / /__  / (_)___  _____</span>  <span class="t-white">Users    </span><span class="t-yellow">:</span> <span class="white">2</span>
-  <span class="t-yellow">/ /_/ / _ \/ / / __ \/ ___/</span>  <span class="t-white">Procs    </span><span class="t-yellow">:</span> <span class="white">186</span>
- <span class="t-yellow">/ __  /  __/ / / /_/ (__  )</span>   <span class="t-white">Load     </span><span class="t-yellow">:</span> <span class="white">0.10</span>
-<span class="t-yellow">/_/ /_/\___/_/_/\____/____/</span>    <span class="t-white">Memory   </span><span class="t-yellow">:</span> <span class="white">18.2%</span>
-                               <span class="t-white">Disk     </span><span class="t-yellow">:</span> <span class="white">6%</span></pre>
+   <span class="t-yellow">/ / / /__  / (_)___  _____</span>  <span class="t-white">Users    </span><span class="t-yellow">:</span> <span class="t-white" id="stat-users">0</span>
+  <span class="t-yellow">/ /_/ / _ \/ / / __ \/ ___/</span>  <span class="t-white">Procs    </span><span class="t-yellow">:</span> <span class="t-white" id="stat-procs">0</span>
+ <span class="t-yellow">/ __  /  __/ / / /_/ (__  )</span>   <span class="t-white">Load     </span><span class="t-yellow">:</span> <span class="t-white" id="stat-load">0.00</span>
+<span class="t-yellow">/_/ /_/\___/_/_/\____/____/</span>    <span class="t-white">Memory   </span><span class="t-yellow">:</span> <span class="t-white" id="stat-memory">0.0</span><span class="t-white">%</span>
+                               <span class="t-white">Disk     </span><span class="t-yellow">:</span> <span class="t-white" id="stat-disk">0</span><span class="t-white">%</span></pre>
 
     <span class="path">[</span><span class="prompt">admin@helios:</span> <span class="path">~]$</span> 
     <span class="command">./deploy-projects.sh --active</span><span class="cursor"></span>
@@ -252,20 +253,54 @@
         <br><br><br>
     </div>
 <script>
-    const text = "Helios";
-    const speed = 150; // Geschwindigkeit in Millisekunden pro Buchstabe
+    const text = "HELIOS";
+    const speed = 150;
     let i = 0;
 
+    // Funktion zum Hochzählen der Zahlen
+    function animateValue(id, start, end, duration, decimals = 0) {
+        const obj = document.getElementById(id);
+        const startTime = Date.now();
+        
+        function update() {
+            const currentTime = Date.now();
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            
+            const currentVal = (progress * (end - start) + start).toFixed(decimals);
+            obj.innerHTML = currentVal;
+            
+            if (progress < 1) {
+                requestAnimationFrame(update);
+            }
+        }
+        requestAnimationFrame(update);
+    }
+
+    function startStatsAnimation() {
+        // Hier definierst du Zielwerte, Dauer und Nachkommastellen
+        animateValue("stat-users", 0, 2, 1000, 0);
+        animateValue("stat-procs", 0, 186, 1200, 0);
+        animateValue("stat-load", 0, 0.10, 1500, 2);
+        animateValue("stat-memory", 0, 18.2, 1500, 1);
+        animateValue("stat-disk", 0, 6, 1500, 0);
+    }
+
     function typeWriter() {
         if (i < text.length) {
             document.getElementById("typewriter").innerHTML += text.charAt(i);
             i++;
             setTimeout(typeWriter, speed);
+        } else {
+            // Wenn HELIOS fertig ist, starte die Zahlen-Animation
+            setTimeout(startStatsAnimation, 500); // Kurze Pause für den Effekt
         }
     }
 
-    // Startet den Effekt, wenn die Seite geladen ist
-    window.onload = typeWriter;
+    // Beim Laden: Erst 800ms warten, dann Schreibmaschine starten
+    window.onload = () => {
+        setTimeout(typeWriter, 800);
+    };
 </script>
 </body>
 </html>
\ No newline at end of file