some changes

2024-12-03 22:15:09 +01:00
parent d705afaccf
commit 78228e188b
4 changed files with 141 additions and 0 deletions
--- a/add_to_index_html.html
+++ b/add_to_index_html.html
@ -0,0 +1,3 @@
+<div class="snow-container"></div>
+<script src="script.js"></script>
+<link rel="stylesheet" href="snowstorm.css">
--- a/snowstorm.css
+++ b/snowstorm.css
@ -0,0 +1,41 @@
+/* styles.css */
+.snow-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+}
+
+.snowflake {
+    position: absolute;
+    top: -10px;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+    opacity: 0.9;
+    animation: fly diagonal infinite, spin linear infinite;
+}
+
+/* Schneeflocken fliegen diagonal von rechts oben nach links unten */
+@keyframes fly {
+    0% {
+        transform: translate(100vw, -10px); /* Startposition: Rechts oben */
+    }
+    100% {
+        transform: translate(-10vw, 110vh); /* Endposition: Links unten */
+    }
+}
+
+/* Drehen der Schneeflocken für mehr Dynamik */
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
--- a/snowstorm.js
+++ b/snowstorm.js
@ -0,0 +1,76 @@
+const snowstorm = true; // enable/disable snowstorm
+let msgPrinted = false; // flag to prevent multiple console messages
+
+// function to check and control the snowflakes
+function toggleSnowflakes() {
+  const snowflakeContainer = document.querySelector('.snow-container');
+  if (!snowflakeContainer) 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 snowflakes if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    snowflakeContainer.style.display = 'none'; // hide snowflakes
+    if (!msgPrinted) {
+      console.log('Snowstorm hidden');
+      msgPrinted = true;
+    }
+  } else {
+    snowflakeContainer.style.display = 'block'; // show snowflakes
+    if (msgPrinted) {
+      console.log('Snowstorm 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 createSnowflake() {
+
+  // Schneeflocken-Container
+  const snowContainer = document.querySelector(".snow-container");
+  const snowflake = document.createElement("div");
+  snowflake.classList.add("snowflake");
+
+  // Zufällige Größe
+  const size = Math.random() * 10 + 5; // Schneeflocken sind zwischen 5px und 15px groß
+  snowflake.style.width = `${size}px`;
+  snowflake.style.height = `${size}px`;
+
+  // Zufällige Startposition (nur oben rechts)
+  snowflake.style.top = `${Math.random() * 20 - 10}px`; // Leicht variieren um -10px bis 10px
+  snowflake.style.right = `${Math.random() * 20}px`;
+
+  // Zufällige Dauer der Animation
+  const flightDuration = Math.random() * 2 + 1; // Sehr schnell: 1-3 Sekunden
+  snowflake.style.animationDuration = `${flightDuration}s`;
+
+  // Flocke zum Container hinzufügen
+  snowContainer.appendChild(snowflake);
+
+  // Entfernen der Flocke nach der Animation
+  snowflake.addEventListener("animationend", () => {
+    snowflake.remove();
+  });
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  if (!snowstorm) return; // exit if fireworks are disabled
+  createSnowflake();
+  // Jede 50ms eine neue Schneeflocke erzeugen
+  setInterval(createSnowflake, 50);
+});
--- a/test-site.html
+++ b/test-site.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snowstorm Display</title>
+    <link rel="stylesheet" href="snowstorm.css">
+    
+    <style>
+        body {
+            background-color: black;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="snow-container"></div>
+    <script src="snowstorm.js"></script>
+</body>
+
+</html>