initial commit

add_to_index_html.html

@@ -0,0 +1,3 @@
+<div class="fireworks" aria-hidden="true"></div>
+<script src="seasonal/fireworks.js"></script>
+<link rel="stylesheet" href="seasonal/fireworks.css">

fireworks.css

@@ -0,0 +1,44 @@
+/* Der Container für das Feuerwerk */
+.fireworks {
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 10; /* Über andere Elemente legen */
+  }
+  
+  /* Jede Partikel eines Feuerwerks */
+  .firework {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9); /* Standardfarbe */
+    animation: explode 1s ease-out forwards;
+    transform-origin: center;
+  }
+  
+  /* Animation für die Explosion */
+  @keyframes explode {
+    0% {
+      transform: scale(0.5);
+      opacity: 1;
+    }
+    100% {
+      transform: translate(var(--x), var(--y)) scale(0.2);
+      opacity: 0;
+    }
+  }
+  
+  /* Optional: Farbwechsel für die Partikel */
+  .firework:nth-child(odd) {
+    background: rgba(255, 100, 100, 0.9); /* Rot */
+  }
+  
+  .firework:nth-child(even) {
+    background: rgba(100, 100, 255, 0.9); /* Blau */
+  }
+  

fireworks.js

@@ -0,0 +1,89 @@
+const fireworks = true; // enable/disable fireworks
+const particlesPerFirework = 30; // count of particles per firework
+
+let msgPrinted = false; // flag to prevent multiple console messages
+
+// function to check and control fireworks
+function toggleSnowflakes() {
+  const fireworksContainer = document.querySelector('.fireworks');
+  if (!fireworksContainer) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  // hide fireworks if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    fireworksContainer.style.display = 'none'; // hide fireworks
+    if (!msgPrinted) {
+      console.log('Fireworks hidden');
+      msgPrinted = true;
+    }
+  } else {
+    fireworksContainer.style.display = 'block'; // show fireworks
+    if (msgPrinted) {
+      console.log('Fireworks visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleSnowflakes);
+
+// start observation
+observer.observe(document.body, {
+  childList: true,    // observe adding/removing of child elements
+  subtree: true,      // observe all levels of the DOM tree
+  attributes: true    // observe changes to attributes (e.g. class changes)
+});
+
+// function to add random fireworks
+function launchFirework() {
+  const fireworkContainer = document.querySelector('.fireworks');
+  if (!fireworkContainer) return;
+
+  // random position on the screen
+  const x = Math.random() * window.innerWidth;
+  const y = Math.random() * window.innerHeight;
+
+  // create particles for the firework
+  for (let i = 0; i < particlesPerFirework; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('firework');
+
+    // random angle and distance
+    const angle = Math.random() * 2 * Math.PI; // 0 to 360 degrees
+    const distance = Math.random() * 100 + 50; // 50 to 150 pixels
+    const xOffset = Math.cos(angle) * distance;
+    const yOffset = Math.sin(angle) * distance;
+
+    // set particle properties
+    particle.style.left = `${x}px`;
+    particle.style.top = `${y}px`;
+    particle.style.setProperty('--x', `${xOffset}px`);
+    particle.style.setProperty('--y', `${yOffset}px`);
+
+    // add particle to the container
+    fireworkContainer.appendChild(particle);
+
+    // remove particle after animation ends
+    particle.addEventListener('animationend', () => {
+      particle.remove();
+    });
+  }
+}
+
+// automaticly start fireworks
+function startFireworks() {
+  setInterval(() => {
+    launchFirework();
+  }, 1000); // firework every second
+}
+
+// initialize snowflakes and add random snowflakes after the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  if (!fireworks) return; // exit if fireworks are disabled
+  startFireworks();
+});