index.html logic for ausbildungsfortschritt

2024-10-29 14:47:50 +01:00
parent 0aba451f81
commit 49046d54cb
1 changed files with 133 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,133 @@
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ausbildungsfortschritt</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f4f4f4;
+        }
+
+        .progress-container {
+            text-align: center;
+        }
+
+        .progress-bar {
+            width: 100%;
+            max-width: 1200px; /* Längere Breite */
+            background-color: #ddd;
+            border-radius: 25px;
+            overflow: hidden;
+            margin: 20px 0;
+        }
+
+        .progress {
+            height: 50px; /* Höherer Balken */
+            background-color: #4caf50;
+            width: 0;
+            border-radius: 25px;
+        }
+
+        #progress-percentage {
+            font-size: 2em;
+            color: #333;
+        }
+
+        h1 {
+            font-size: 3em;
+            color: #333;
+        }
+
+        .time-info {
+            font-size: 1.5em;
+            color: #333;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+<div class="progress-container">
+    <h1>Ausbildungsfortschritt</h1>
+    <div class="progress-bar">
+        <div class="progress" id="progress"></div>
+    </div>
+    <p id="progress-percentage">0%</p>
+    <div class="time-info">
+        <p>Vergangene Zeit: <span id="elapsed-time">0 Jahre, 0 Tage, 0 Stunden, 0 Minuten, 0 Sekunden, 0 Millisekunden</span></p>
+        <p>Verbleibende Zeit: <span id="remaining-time">0 Jahre, 0 Tage, 0 Stunden, 0 Minuten, 0 Sekunden, 0 Millisekunden</span></p>
+        <p>Aktuelle Zeit: <span id="current-time">00:00:00.000</span></p>
+    </div>
+</div>
+
+<script>
+    function updateProgress() {
+        // Startdatum der Ausbildung (01.08.2024)
+        const startDate = new Date('2024-08-01');
+
+        // Ende der Ausbildung (3 Jahre später)
+        const endDate = new Date(startDate);
+        endDate.setFullYear(endDate.getFullYear() + 3);
+
+        // Heutiges Datum
+        const today = new Date();
+
+        // Berechne die Gesamtzahl der Millisekunden der Ausbildung
+        const totalMilliseconds = endDate - startDate;
+
+        // Berechne die Anzahl der bereits vergangenen Millisekunden
+        const completedMilliseconds = today - startDate;
+
+        // Prozentsatz des Fortschritts auf die Millisekunde genau
+        const progressPercentage = (completedMilliseconds / totalMilliseconds) * 100;
+
+        // Aktualisiere die Progress-Bar und den Text
+        const progressElement = document.getElementById('progress');
+        const percentageElement = document.getElementById('progress-percentage');
+
+        progressElement.style.width = progressPercentage + '%';
+        percentageElement.textContent = progressPercentage.toFixed(9) + '%';
+
+        // Vergangene Zeit berechnen
+        const elapsedTime = completedMilliseconds;
+        const elapsedYears = Math.floor(elapsedTime / (1000 * 60 * 60 * 24 * 365.25));
+        const elapsedDays = Math.floor((elapsedTime % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24));
+        const elapsedHours = Math.floor((elapsedTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const elapsedMinutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
+        const elapsedSeconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
+        const elapsedMilliseconds = elapsedTime % 1000;
+
+        // Verbleibende Zeit berechnen
+        const remainingTime = totalMilliseconds - completedMilliseconds;
+        const remainingYears = Math.floor(remainingTime / (1000 * 60 * 60 * 24 * 365.25));
+        const remainingDays = Math.floor((remainingTime % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24));
+        const remainingHours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const remainingMinutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
+        const remainingSeconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
+        const remainingMilliseconds = remainingTime % 1000;
+
+        // Aktuelle Zeit anzeigen (mit Millisekunden)
+        const currentHours = today.getHours().toString().padStart(2, '0');
+        const currentMinutes = today.getMinutes().toString().padStart(2, '0');
+        const currentSeconds = today.getSeconds().toString().padStart(2, '0');
+        const currentMilliseconds = today.getMilliseconds().toString().padStart(3, '0');
+        const currentTime = `${currentHours}:${currentMinutes}:${currentSeconds}.${currentMilliseconds}`;
+
+        // Elemente für die Zeitinfo aktualisieren
+        document.getElementById('elapsed-time').textContent = `${elapsedYears} Jahre, ${elapsedDays} Tage, ${elapsedHours} Stunden, ${elapsedMinutes} Minuten, ${elapsedSeconds} Sekunden, ${elapsedMilliseconds} Millisekunden`;
+        document.getElementById('remaining-time').textContent = `${remainingYears} Jahre, ${remainingDays} Tage, ${remainingHours} Stunden, ${remainingMinutes} Minuten, ${remainingSeconds} Sekunden, ${remainingMilliseconds} Millisekunden`;
+        document.getElementById('current-time').textContent = currentTime;
+    }
+
+    // Aktualisiere die Progress Bar und die Zeiten jede Millisekunde
+    setInterval(updateProgress, 1);
+</script>
+</body>
+</html>