2nd test

snowflakes.css

@@ -1,13 +1,8 @@
 .snowflakes {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  display: block;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
-  visibility: visible;
 }
 
 .snowflake {
@@ -19,7 +14,11 @@
   text-shadow: 0 0 5px #000;
   user-select: none;
   -webkit-user-select: none;
-  animation: snowflakes-fall 10s linear infinite, snowflakes-shake 3s ease-in-out infinite;
+  cursor: default;
+  animation-name: snowflakes-fall, snowflakes-shake;
+  animation-duration: 10s, 3s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
 }
 
 @-webkit-keyframes snowflakes-fall {
@@ -126,8 +125,4 @@
 .snowflake:nth-of-type(11) {
   left: 65%;
   animation-delay: 4s, 2.5s;
-}
-
-body.hide-snowflakes .snowflakes {
-  visibility: hidden;
 }

snowflakes.js

@@ -1,19 +1,21 @@
-let randomSnowflakes = flase; // enable random Snowflakes
+const randomSnowflakes = flase; // enable random Snowflakes
 const snowflakeCount = 50; // count of random extra snowflakes
 
 
 // function to check and control the snowflakes
 function toggleSnowflakes() {
-  const body = document.body;
+  const snowflakeContainer = document.querySelector('.snowflakes');
+  if (!snowflakeContainer) return;
+
   const videoPlayer = document.querySelector('.videoPlayerContainer');
-  const isDashboard = body.classList.contains('dashboardDocument');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
   const hasUserMenu = document.querySelector('#app-user-menu');
 
   // hide snowflakes if video player is active or dashboard is visible
   if (videoPlayer || isDashboard || hasUserMenu) {
-      body.classList.add('hide-snowflakes');
+    snowflakeContainer.style.display = 'none'; // hide snowflakes
   } else {
-      body.classList.remove('hide-snowflakes');
+    snowflakeContainer.style.display = 'block'; // show snowflakes
   }
 }
 
@@ -34,32 +36,30 @@ function addRandomSnowflakes(count) {
   const snowflakeSymbols = ['❅', '❆', '❄']; // some snowflake symbols
 
   for (let i = 0; i < count; i++) {
-      // create a new snowflake element
-      const snowflake = document.createElement('div');
-      snowflake.classList.add('snowflake');
+    // create a new snowflake element
+    const snowflake = document.createElement('div');
+    snowflake.classList.add('snowflake');
 
-      // pick a random snowflake symbol
-      snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
+    // pick a random snowflake symbol
+    snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
 
-      // set random horizontal position, size and animation delay
-      const randomLeft = Math.random() * 100; // position (0% to 100%)
-      const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em)
-      const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s)
+    // set random horizontal position, size and animation delay
+    const randomLeft = Math.random() * 100; // position (0% to 100%)
+    //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em)
+    const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s)
 
-      // apply styles
-      snowflake.style.left = `${randomLeft}%`;
-      snowflake.style.fontSize = `${randomSize}em`;
-      snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`;
+    // apply styles
+    snowflake.style.left = `${randomLeft}%`;
+    //snowflake.style.fontSize = `${randomSize}em`;
+    snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`;
 
-      // add the snowflake to the container
-      snowflakeContainer.appendChild(snowflake);
+    // add the snowflake to the container
+    snowflakeContainer.appendChild(snowflake);
   }
 }
 
 // initialize snowflakes
-document.addEventListener('DOMContentLoaded', () => {
-  toggleSnowflakes(); //check if snowflakes should be hidden
-  if (randomSnowflakes) {
-      addRandomSnowflakes(snowflakeCount); //add random snowflakes
-  }
-});
+toggleSnowflakes(); //check if snowflakes should be hidden
+if (randomSnowflakes) {
+  addRandomSnowflakes(snowflakeCount); //add random snowflakes
+}

v2.js

@@ -1,27 +0,0 @@
-// Funktion zum Überprüfen und Steuern der Schneeflocken
-function toggleSnowflakes() {
-  const body = document.body;
-  const videoPlayer = document.querySelector('.videoPlayerContainer');
-  const isDashboard = body.classList.contains('dashboardDocument');
-  const hasUserMenu = document.querySelector('#app-user-menu');
-
-  // Schneeflocken ausblenden, wenn Videoplayer aktiv ist oder Dashboard sichtbar ist
-  if (videoPlayer || isDashboard || hasUserMenu) {
-    body.classList.add('hide-snowflakes');
-  } else {
-    body.classList.remove('hide-snowflakes');
-  }
-}
-
-// Beobachte Änderungen im DOM
-const observer = new MutationObserver(toggleSnowflakes);
-
-// Beobachtung starten
-observer.observe(document.body, {
-  childList: true,    // Überwacht Hinzufügen/Entfernen von Kindelementen
-  subtree: true,      // Überwacht alle Ebenen des DOM-Baums
-  attributes: true    // Überwacht Änderungen an Attributen (z. B. Klassenänderungen)
-});
-
-// Initiale Überprüfung
-document.addEventListener('DOMContentLoaded', toggleSnowflakes);