admin/landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animations

Browse Source
This commit is contained in:
VS-Code
2026-02-06 15:51:37 +01:00
parent 986a513138
commit addc23bc14
1 changed files with 44 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

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