ergaenze eine Konfetti-AnimationHEADmain

3 files changed, 88 insertions, 0 deletions

diff --git a/kuchenstand.css b/kuchenstand.css
index 02b7539..0c4a37e 100644
--- a/kuchenstand.css
+++ b/kuchenstand.css
@@ -38,3 +38,60 @@ ul.klassen-navigation li {
 ul li:hover {
   background-color: #111111;
 }
+
+.konfetti-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Prevent interaction */
+  overflow: hidden;
+}
+
+@keyframes konfetti-fall {
+  0% {
+    transform: translateY(-100%) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh) rotate(360deg);
+    opacity: 0.8;
+  }
+}
+
+.konfetti-stueck {
+  position: absolute;
+  width: 10px;
+  height: 20px;
+  background: var(--konfetti-color, red);
+  opacity: 0.9;
+  animation: konfetti-fall var(--fall-dauer, 4s) linear infinite;
+}
+
+/* Randomize confetti properties */
+.konfetti-stueck:nth-child(1) {
+  left: 10%;
+  --konfetti-farbe: #ff6347;
+  --fall-dauer: 3s;
+}
+.konfetti-stueck:nth-child(2) {
+  left: 25%;
+  --konfetti-farbe: #ffa500;
+  --fall-dauer: 5s;
+}
+.konfetti-stueck:nth-child(3) {
+  left: 40%;
+  --konfetti-farbe: #32cd32;
+  --fall-dauer: 4.5s;
+}
+.konfetti-stueck:nth-child(4) {
+  left: 60%;
+  --konfetti-farbe: #1e90ff;
+  --fall-dauer: 3.5s;
+}
+.konfetti-stueck:nth-child(5) {
+  left: 80%;
+  --konfetti-farbe: #ff69b4;
+  --fall-dauer: 6s;
+}
diff --git a/kuchenstand.js b/kuchenstand.js
index a3b8949..97c795e 100644
--- a/kuchenstand.js
+++ b/kuchenstand.js
@@ -102,6 +102,11 @@ function zeichne(klasse) {
   // Passe die Größe des Kuchens anhand des Streaks an
   const streak = streaks[klasse];
   const proportion = streak/streak_anzahl * 100;
+  if (proportion == 100) {
+    zeichneKonfetti();
+  } else {
+    versteckeKonfetti();
+  }
   kuchenVordergrund.style.maxWidth = `${proportion}%`;
   kuchenVordergrund.style.maxHeight = `${proportion}%`;
 
@@ -200,3 +205,28 @@ function listeStreakEreignisse(klasse) {
     liste.insertBefore(ereignisNode, liste.firstChild);
   }
 }
+
+function getRandomColor() {
+  const colors = ['#ff6347', '#ffa500', '#32cd32', '#1e90ff', '#ff69b4'];
+  return colors[Math.floor(Math.random() * colors.length)];
+}
+
+function zeichneKonfetti() {
+  const konfettiWrapper = document.querySelector('.konfetti-wrapper');
+  // Erzeuge konfetti
+  for (let i = 0; i < 50; i++) {
+    const konfetti = document.createElement('div');
+    konfetti.classList.add('konfetti-stueck');
+    konfetti.style.left = `${Math.random() * 100}%`;
+    konfetti.style.setProperty('--fall-dauer', `${Math.random() * 3 + 3}s`);
+    konfetti.style.setProperty('--konfetti-farbe', getRandomColor());
+    konfettiWrapper.appendChild(konfetti);
+  }
+}
+
+function versteckeKonfetti() {
+  const konfettiWrapper = document.querySelector('.konfetti-wrapper');
+  while (konfettiWrapper.firstChild) {
+    konfettiWrapper.removeChild(konfettiWrapper.firstChild);
+  }
+}
diff --git a/kuchenstand.php b/kuchenstand.php
index fb41f96..9aadf9c 100644
--- a/kuchenstand.php
+++ b/kuchenstand.php
@@ -61,6 +61,7 @@
 
   <!-- Container für den Inhalt des Punktestands -->
   <div id="content">
+    <div class="konfetti-wrapper"></div>
     <div id="kuchen-wrapper">
       <div id="kuchen">
       </div>