changed name from halloween

hearts.css

@@ -1,11 +1,11 @@
-.halloween-container {
+.hearts-container {
     display: block;
     pointer-events: none;
     z-index: 0;
     overflow: hidden;
 }
 
-.halloween {
+.heart {
     position: fixed;
     bottom: -10%;
     z-index: 0;
@@ -14,19 +14,19 @@
     -ms-user-select: none;
     user-select: none;
     cursor: default;
-    -webkit-animation-name: halloween-fall, halloween-shake;
+    -webkit-animation-name: heart-fall, heart-shake;
-    -webkit-animation-duration: 10s, 3s;
+    -webkit-animation-duration: 16s, 5s;
     -webkit-animation-timing-function: linear, ease-in-out;
     -webkit-animation-iteration-count: infinite, infinite;
     -webkit-animation-play-state: running, running;
-    animation-name: halloween-fall, halloween-shake;
+    animation-name: heart-fall, heart-shake;
-    animation-duration: 10s, 3s;
+    animation-duration: 16s, 5s;
     animation-timing-function: linear, ease-in-out;
     animation-iteration-count: infinite, infinite;
     animation-play-state: running, running
 }
 
-@-webkit-keyframes halloween-fall {
+@-webkit-keyframes heart-fall {
     0% {
         bottom: -10%
     }
@@ -36,7 +36,7 @@
     }
 }
 
-@-webkit-keyframes halloween-shake {
+@-webkit-keyframes heart-shake {
 
     0%,
     100% {
@@ -50,7 +50,7 @@
     }
 }
 
-@keyframes halloween-fall {
+@keyframes heart-fall {
     0% {
         bottom: -10%
     }
@@ -60,7 +60,7 @@
     }
 }
 
-@keyframes halloween-shake {
+@keyframes heart-shake {
 
     0%,
     100% {
@@ -72,73 +72,73 @@
     }
 }
 
-.halloween:nth-of-type(0) {
+.heart:nth-of-type(0) {
     left: 1%;
     -webkit-animation-delay: 0s, 0s;
     animation-delay: 0s, 0s
 }
 
-.halloween:nth-of-type(1) {
+.heart:nth-of-type(1) {
     left: 10%;
     -webkit-animation-delay: 1s, 1s;
     animation-delay: 1s, 1s
 }
 
-.halloween:nth-of-type(2) {
+.heart:nth-of-type(2) {
     left: 20%;
     -webkit-animation-delay: 6s, .5s;
     animation-delay: 6s, .5s
 }
 
-.halloween:nth-of-type(3) {
+.heart:nth-of-type(3) {
     left: 30%;
     -webkit-animation-delay: 4s, 2s;
     animation-delay: 4s, 2s
 }
 
-.halloween:nth-of-type(4) {
+.heart:nth-of-type(4) {
     left: 40%;
     -webkit-animation-delay: 2s, 2s;
     animation-delay: 2s, 2s
 }
 
-.halloween:nth-of-type(5) {
+.heart:nth-of-type(5) {
     left: 50%;
     -webkit-animation-delay: 8s, 3s;
     animation-delay: 8s, 3s
 }
 
-.halloween:nth-of-type(6) {
+.heart:nth-of-type(6) {
     left: 60%;
     -webkit-animation-delay: 6s, 2s;
     animation-delay: 6s, 2s
 }
 
-.halloween:nth-of-type(7) {
+.heart:nth-of-type(7) {
     left: 70%;
     -webkit-animation-delay: 2.5s, 1s;
     animation-delay: 2.5s, 1s
 }
 
-.halloween:nth-of-type(8) {
+.heart:nth-of-type(8) {
     left: 80%;
     -webkit-animation-delay: 1s, 0s;
     animation-delay: 1s, 0s
 }
 
-.halloween:nth-of-type(9) {
+.heart:nth-of-type(9) {
     left: 90%;
     -webkit-animation-delay: 3s, 1.5s;
     animation-delay: 3s, 1.5s
 }
 
-.halloween:nth-of-type(10) {
+.heart:nth-of-type(10) {
     left: 25%;
     -webkit-animation-delay: 2s, 0s;
     animation-delay: 2s, 0s
 }
 
-.halloween:nth-of-type(11) {
+.heart:nth-of-type(11) {
     left: 65%;
     -webkit-animation-delay: 4s, 2.5s;
     animation-delay: 4s, 2.5s

hearts.js

@@ -1,38 +1,38 @@
-const halloween = true; // enable/disable halloween
+const hearts = true; // enable/disable hearts
 const randomSymbols = true; // enable more random symbols
 const randomSymbolsMobile = false; // enable random symbols on mobile devices
-const halloweenCount = 25; // count of random extra symbols
+const heartsCount = 25; // count of random extra symbols
 
 let msgPrinted = false; // flag to prevent multiple console messages
 
-// function to check and control the halloween
+// function to check and control the hearts
-function toggleHalloween() {
+function toggleHearts() {
-  const halloweenContainer = document.querySelector('.snow-container');
+  const heartsContainer = document.querySelector('.snow-container');
-  if (!halloweenContainer) return;
+  if (!heartsContainer) 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 halloween if video/trailer player is active or dashboard is visible
+  // hide hearts if video/trailer player is active or dashboard is visible
   if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
-    halloweenContainer.style.display = 'none'; // hide halloween
+    heartsContainer.style.display = 'none'; // hide hearts
     if (!msgPrinted) {
-      console.log('Halloween hidden');
+      console.log('Hearts hidden');
       msgPrinted = true;
     }
   } else {
-    halloweenContainer.style.display = 'block'; // show halloween
+    heartsContainer.style.display = 'block'; // show hearts
     if (msgPrinted) {
-      console.log('Halloween visible');
+      console.log('Hearts visible');
       msgPrinted = false;
     }
   }
 }
 
 // observe changes in the DOM
-const observer = new MutationObserver(toggleHalloween);
+const observer = new MutationObserver(toggleHearts);
 
 // start observation
 observer.observe(document.body, {
@@ -44,85 +44,81 @@ observer.observe(document.body, {
 /*
 const images = [
     "/web/seasonal/ghost_20x20.png",
-    "/web/seasonal/bat_20x20.png",
-    "/web/seasonal/pumpkin_20x20.png",
 ];*/
 const images = [
-  "./images/ghost_20x20.png",
+  "./images/heart_20x20.png",
-  "./images/bat_20x20.png",
-  "./images/pumpkin_20x20.png",
 ];
 
-// create halloween objects
+// create hearts objects
-function createHalloween() {
+function createHearts() {
-  const container = document.querySelector('.halloween-container') || document.createElement("div");
+  const container = document.querySelector('.hearts-container') || document.createElement("div");
 
-  if (!document.querySelector('.halloween-container')) {
+  if (!document.querySelector('.hearts-container')) {
-    container.className = "halloween-container";
+    container.className = "hearts-container";
     container.setAttribute("aria-hidden", "true");
     document.body.appendChild(container);
   }
 
-  for (let i = 0; i < 4; i++) {
+  for (let i = 0; i < 12; i++) {
     images.forEach(imageSrc => {
-      const halloweenDiv = document.createElement("div");
+      const heartsDiv = document.createElement("div");
-      halloweenDiv.className = "halloween";
+      heartsDiv.className = "hearts";
 
       const img = document.createElement("img");
       img.src = imageSrc;
 
-      halloweenDiv.appendChild(img);
+      heartsDiv.appendChild(img);
-      container.appendChild(halloweenDiv);
+      container.appendChild(heartsDiv);
     });
   }
 }
 
 
 function addRandomSymbols(count) {
-  const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container
+  const heartsContainer = document.querySelector('.hearts-container'); // get the hearts container
-  if (!halloweenContainer) return; // exit if halloween container is not found
+  if (!heartsContainer) return; // exit if hearts container is not found
 
-  console.log('Adding random halloween symbols');
+  console.log('Adding random hearts symbols');
 
 
   for (let i = 0; i < count; i++) {
-    // create a new halloween elements
+    // create a new hearts elements
-    const halloweenDiv = document.createElement("div");
+    const heartsDiv = document.createElement("div");
-    halloweenDiv.className = "halloween";
+    heartsDiv.className = "hearts";
 
-    // pick a random halloween symbol
+    // pick a random hearts symbol
     const imageSrc = images[Math.floor(Math.random() * images.length)];
     const img = document.createElement("img");
     img.src = imageSrc;
 
-    halloweenDiv.appendChild(img);
+    heartsDiv.appendChild(img);
 
 
     // set random horizontal position, animation delay and size(uncomment lines to enable) 
     const randomLeft = Math.random() * 100; // position (0% to 100%)
     //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
-    const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s)
+    const randomAnimationDelay = Math.random() * 16; // delay (0s to 16s)
-    const randomAnimationDelay2 = Math.random() * 3; // delay (0s to 3s)
+    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
 
     // apply styles
-    halloweenDiv.style.left = `${randomLeft}%`;
+    heartsDiv.style.left = `${randomLeft}%`;
-    halloweenDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+    heartsDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
 
-    // add the halloween to the container
+    // add the hearts to the container
-    halloweenContainer.appendChild(halloweenDiv);
+    heartsContainer.appendChild(heartsDiv);
   }
-  console.log('Random halloween symbols added');
+  console.log('Random hearts symbols added');
 }
 
 
-// initialize halloween after the DOM is loaded
+// initialize hearts after the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
-  if (!halloween) return; // exit if halloween is disabled
+  if (!hearts) return; // exit if hearts is disabled
-  createHalloween();
+  createHearts();
-  toggleHalloween();
+  toggleHearts();
 
   const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
-  if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random halloweens only on larger screens, unless enabled for mobile devices
+  if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random heartss only on larger screens, unless enabled for mobile devices
-    addRandomSymbols(halloweenCount);
+    addRandomSymbols(heartsCount);
   }
 });