diff --git a/seperate single seasonals/Seasonals-Easter/easter.css b/seperate single seasonals/Seasonals-Easter/easter.css index e69de29..dd477ef 100644 --- a/seperate single seasonals/Seasonals-Easter/easter.css +++ b/seperate single seasonals/Seasonals-Easter/easter.css @@ -0,0 +1,178 @@ +.easter-container { + display: block; + pointer-events: none; + z-index: 0; + overflow: hidden; +} + +#rabbit img{ + position: fixed; + bottom: 2px; + width: 100px; + transition: transform 0.3s ease-in-out; + overflow: hidden; +} + +/* +@media (max-width: 768px) { + #rabbit { + width: 70px; + /* Kleiner auf mobilen Geräten + bottom: 10px; + } +} +*/ + +.easter { + position: fixed; + top: -10%; + font-size: 1em; + color: #fff; + font-family: Arial, sans-serif; + text-shadow: 0 0 5px #000; + user-select: none; + -webkit-user-select: none; + cursor: default; + -webkit-animation-name: easter-fall, easter-shake; + -webkit-animation-duration: 7s, 3s; + -webkit-animation-timing-function: linear, ease-in-out; + -webkit-animation-iteration-count: infinite, infinite; + -webkit-user-select: none; + animation-name: easter-fall, easter-shake; + animation-duration: 7s, 3s; + animation-timing-function: linear, ease-in-out; + animation-iteration-count: infinite, infinite; +} + +.easter img { + height: auto; + width: 20px; +} + +@-webkit-keyframes easter-fall { + 0% { + top: -10%; + } + + 100% { + top: 100%; + } +} + +@-webkit-keyframes easter-shake { + + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 50% { + -webkit-transform: translateX(80px); + transform: translateX(80px); + } +} + +@keyframes easter-fall { + 0% { + top: -10%; + } + + 100% { + top: 100%; + } +} + +@keyframes easter-shake { + + 0%, + 100% { + transform: translateX(0); + } + + 50% { + transform: translateX(80px); + } +} + +@keyframes bunny-move { + 0% { + top: -10%; + } + + 100% { + top: 100%; + } +} + +@keyframes bunny-hop { + + 0%, + 100% { + transform: translateX(0); + } + + 50% { + transform: translateX(80px); + } +} + +.easter:nth-of-type(0) { + left: 0%; + animation-delay: 0s, 0s; +} + +.easter:nth-of-type(1) { + left: 10%; + animation-delay: 1s, 1s; +} + +.easter:nth-of-type(2) { + left: 20%; + animation-delay: 6s, 0.5s; +} + +.easter:nth-of-type(3) { + left: 30%; + animation-delay: 4s, 2s; +} + +.easter:nth-of-type(4) { + left: 40%; + animation-delay: 2s, 2s; +} + +.easter:nth-of-type(5) { + left: 50%; + animation-delay: 8s, 3s; +} + +.easter:nth-of-type(6) { + left: 60%; + animation-delay: 6s, 2s; +} + +.easter:nth-of-type(7) { + left: 70%; + animation-delay: 2.5s, 1s; +} + +.easter:nth-of-type(8) { + left: 80%; + animation-delay: 1s, 0s; +} + +.easter:nth-of-type(9) { + left: 90%; + animation-delay: 3s, 1.5s; +} + +.easter:nth-of-type(10) { + left: 25%; + animation-delay: 2s, 0s; +} + +.easter:nth-of-type(11) { + left: 65%; + animation-delay: 4s, 2.5s; +} \ No newline at end of file diff --git a/seperate single seasonals/Seasonals-Easter/easter.js b/seperate single seasonals/Seasonals-Easter/easter.js index e69de29..3f95592 100644 --- a/seperate single seasonals/Seasonals-Easter/easter.js +++ b/seperate single seasonals/Seasonals-Easter/easter.js @@ -0,0 +1,220 @@ +const easter = true; // enable/disable easter +const randomEaster = true; // enable random easter +const randomEasterMobile = false; // enable random easter on mobile devices +const enableDiffrentDuration = true; // enable different duration for the random easter +const easterEggCount = 20; // count of random extra easter + +const bunny = true; // enable/disable hopping bunny +const step = 5; // step size of the bunny +const hopHeight = 30; // height of the bunny hop + + +let msgPrinted = false; // flag to prevent multiple console messages +let position = -100; // start position of the bunny +const screenWidth = window.innerWidth; + +// function to check and control the easter +function toggleEaster() { + const easterContainer = document.querySelector('.easter-container'); + if (!easterContainer) 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 easter if video/trailer player is active or dashboard is visible + if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { + easterContainer.style.display = 'none'; // hide easter + if (!msgPrinted) { + console.log('Easter hidden'); + msgPrinted = true; + } + } else { + easterContainer.style.display = 'block'; // show easter + if (msgPrinted) { + console.log('Easter visible'); + msgPrinted = false; + } + } +} + +// observe changes in the DOM +const observer = new MutationObserver(toggleEaster); + +// 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) +}); + +/* +const images = [ + "./seasonals/easter_images/egg_1.png", + "./seasonals/easter_images/egg_2.png", + "./seasonals/easter_images/egg_3.png", + "./seasonals/easter_images/egg_4.png", + "./seasonals/easter_images/egg_5.png", + "./seasonals/easter_images/egg_6.png", + "./seasonals/easter_images/egg_7.png", + "./seasonals/easter_images/egg_8.png", + "./seasonals/easter_images/egg_9.png", + "./seasonals/easter_images/egg_10.png", + "./seasonals/easter_images/egg_11.png", + "./seasonals/easter_images/egg_12.png", +]; +const rabbit = "./seasonals/easter_images/easter-bunny.png"; +*/ +// remove commented out image array to enable test site working, comment out above images array for that + +let images = [ + "./images/egg_1.png", + "./images/egg_2.png", + "./images/egg_3.png", + "./images/egg_4.png", + "./images/egg_5.png", + "./images/egg_6.png", + "./images/egg_7.png", + "./images/egg_8.png", + "./images/egg_9.png", + "./images/egg_10.png", + "./images/egg_11.png", + "./images/egg_12.png", +]; +const rabbit = "./images/easter-bunny.png"; + + +function addRandomEaster(count) { + const easterContainer = document.querySelector('.easter-container'); // get the leave container + if (!easterContainer) return; // exit if leave container is not found + + console.log('Adding random easter eggs'); + + // Array of leave characters + for (let i = 0; i < count; i++) { + // create a new leave element + const eggDiv = document.createElement('div'); + eggDiv.className = "easter"; + + // pick a random easter symbol + const imageSrc = images[Math.floor(Math.random() * images.length)]; + const img = document.createElement("img"); + img.src = imageSrc; + + eggDiv.appendChild(img); + + // set random horizontal position, animation delay and size(uncomment lines to enable) + const randomLeft = Math.random() * 100; // position (0% to 100%) + const randomAnimationDelay = Math.random() * 12; // delay (0s to 12s) + const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) + + // apply styles + eggDiv.style.left = `${randomLeft}%`; + eggDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; + + // set random animation duration + if (enableDiffrentDuration) { + const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s) + const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s) + eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`; + } + + + // add the leave to the container + easterContainer.appendChild(eggDiv); + } + console.log('Random easter added'); +} + +function addHoppingRabbit() { + if (!bunny) return; // only add the bunny if bunny is enabled + + const easterContainer = document.querySelector('.easter-container'); // get the leave container + if (!easterContainer) return; // exit if leave container is not found + + // create the rabbit image + const rabbitDiv = document.createElement('div'); + rabbitDiv.id = "rabbit-wrapper"; + + const bunnyImg = document.createElement("img"); + bunnyImg.src = rabbit; + bunnyImg.id = "rabbit"; + + rabbitDiv.appendChild(bunnyImg); + + + // function to animate the rabbit + function hop() { + position += step; + + // Horizontal bewegen und "Hüpfen" animieren + rabbitDiv.style.left = position + "px"; + rabbitDiv.style.transform = `translateY(${Math.sin(position / 50) * -hopHeight}px)`; + + // Wenn der Hase den rechten Rand verlässt, zurück auf die linke Seite setzen + if (position > screenWidth) { + position = -rabbitImg.offsetWidth; + } + + requestAnimationFrame(hop); + } + + // Start der Animation + rabbitDiv.style.left = position + "px"; + + easterContainer.appendChild(rabbitDiv); + hop(); +} + +// initialize standard easter +function initEaster() { + const container = document.querySelector('.easter-container') || document.createElement("div"); + + if (!document.querySelector('.easter-container')) { + container.className = "easter-container"; + container.setAttribute("aria-hidden", "true"); + document.body.appendChild(container); + } + + // shuffle the easter images + let currentIndex = images.length; + let randomIndex; + while (currentIndex != 0) { + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; + [images[currentIndex], images[randomIndex]] = [images[randomIndex], images[currentIndex]]; + } + + for (let i = 0; i < 12; i++) { + const eggDiv = document.createElement("div"); + eggDiv.className = "easter"; + + const img = document.createElement("img"); + img.src = images[i]; + + // set random animation duration + if (enableDiffrentDuration) { + const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s) + const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s) + eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`; + } + + eggDiv.appendChild(img); + container.appendChild(eggDiv); + } + + addHoppingRabbit(); +} + + +// initialize easter and add random easter after the DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + if (!easter) return; // exit if easter are disabled + initEaster(); + toggleEaster(); + + if (randomEaster && (screenWidth > 768 || randomEasterMobile)) { // add random easter only on larger screens, unless enabled for mobile devices + addRandomEaster(easterEggCount); + } +}); \ No newline at end of file diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-bunny.png b/seperate single seasonals/Seasonals-Easter/images/easter-bunny.png index 8381fd4..05b5467 100644 Binary files a/seperate single seasonals/Seasonals-Easter/images/easter-bunny.png and b/seperate single seasonals/Seasonals-Easter/images/easter-bunny.png differ diff --git a/seperate single seasonals/Seasonals-Easter/images/easter.png b/seperate single seasonals/Seasonals-Easter/images/egg_1.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter.png rename to seperate single seasonals/Seasonals-Easter/images/egg_1.png diff --git a/seperate single seasonals/Seasonals-Easter/images/egg(1).png b/seperate single seasonals/Seasonals-Easter/images/egg_10.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/egg(1).png rename to seperate single seasonals/Seasonals-Easter/images/egg_10.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-egg.png b/seperate single seasonals/Seasonals-Easter/images/egg_11.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-egg.png rename to seperate single seasonals/Seasonals-Easter/images/egg_11.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-egg(7).png b/seperate single seasonals/Seasonals-Easter/images/egg_12.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-egg(7).png rename to seperate single seasonals/Seasonals-Easter/images/egg_12.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-egg(1).png b/seperate single seasonals/Seasonals-Easter/images/egg_2.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-egg(1).png rename to seperate single seasonals/Seasonals-Easter/images/egg_2.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-egg(2).png b/seperate single seasonals/Seasonals-Easter/images/egg_3.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-egg(2).png rename to seperate single seasonals/Seasonals-Easter/images/egg_3.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-egg(3).png b/seperate single seasonals/Seasonals-Easter/images/egg_4.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-egg(3).png rename to seperate single seasonals/Seasonals-Easter/images/egg_4.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-egg(4).png b/seperate single seasonals/Seasonals-Easter/images/egg_5.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-egg(4).png rename to seperate single seasonals/Seasonals-Easter/images/egg_5.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-egg(5).png b/seperate single seasonals/Seasonals-Easter/images/egg_6.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-egg(5).png rename to seperate single seasonals/Seasonals-Easter/images/egg_6.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-egg(6).png b/seperate single seasonals/Seasonals-Easter/images/egg_7.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-egg(6).png rename to seperate single seasonals/Seasonals-Easter/images/egg_7.png diff --git a/seperate single seasonals/Seasonals-Easter/images/egg.png b/seperate single seasonals/Seasonals-Easter/images/egg_8.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/egg.png rename to seperate single seasonals/Seasonals-Easter/images/egg_8.png diff --git a/seperate single seasonals/Seasonals-Easter/images/egg(2).png b/seperate single seasonals/Seasonals-Easter/images/egg_9.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/egg(2).png rename to seperate single seasonals/Seasonals-Easter/images/egg_9.png diff --git a/seperate single seasonals/Seasonals-Easter/images/easter-day.png b/seperate single seasonals/Seasonals-Easter/images/eggs.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/easter-day.png rename to seperate single seasonals/Seasonals-Easter/images/eggs.png diff --git a/seperate single seasonals/Seasonals-Easter/images/rabbit.png b/seperate single seasonals/Seasonals-Easter/images/rabbit_1.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/rabbit.png rename to seperate single seasonals/Seasonals-Easter/images/rabbit_1.png diff --git a/seperate single seasonals/Seasonals-Easter/images/rabbit(1).png b/seperate single seasonals/Seasonals-Easter/images/rabbit_2.png similarity index 100% rename from seperate single seasonals/Seasonals-Easter/images/rabbit(1).png rename to seperate single seasonals/Seasonals-Easter/images/rabbit_2.png diff --git a/seperate single seasonals/Seasonals-Easter/test-site.html b/seperate single seasonals/Seasonals-Easter/test-site.html new file mode 100644 index 0000000..a541961 --- /dev/null +++ b/seperate single seasonals/Seasonals-Easter/test-site.html @@ -0,0 +1,21 @@ + + + + + + Easter Display + + + + +
+ + + + + \ No newline at end of file diff --git a/seperate single seasonals/Seasonals-Summer/summer.js b/seperate single seasonals/Seasonals-Summer/summer.js index e69de29..5616c45 100644 --- a/seperate single seasonals/Seasonals-Summer/summer.js +++ b/seperate single seasonals/Seasonals-Summer/summer.js @@ -0,0 +1,171 @@ +const leaves = true; // enable/disable leaves +const randomLeaves = true; // enable random leaves +const randomLeavesMobile = false; // enable random leaves on mobile devices +const enableDiffrentDuration = true; // enable different duration for the random leaves +const leafCount = 25; // count of random extra leaves + + +let msgPrinted = false; // flag to prevent multiple console messages + +// function to check and control the leaves +function toggleAutumn() { + const autumnContainer = document.querySelector('.autumn-container'); + if (!autumnContainer) 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 leaves if video/trailer player is active or dashboard is visible + if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { + autumnContainer.style.display = 'none'; // hide leaves + if (!msgPrinted) { + console.log('Autumn hidden'); + msgPrinted = true; + } + } else { + autumnContainer.style.display = 'block'; // show leaves + if (msgPrinted) { + console.log('Autumn visible'); + msgPrinted = false; + } + } +} + +// observe changes in the DOM +const observer = new MutationObserver(toggleAutumn); + +// 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) +}); + + +const images = [ + "./seasonals/autumn_images/acorn1.png", + "./seasonals/autumn_images/acorn2.png", + "./seasonals/autumn_images/leaf1.png", + "./seasonals/autumn_images/leaf2.png", + "./seasonals/autumn_images/leaf3.png", + "./seasonals/autumn_images/leaf4.png", + "./seasonals/autumn_images/leaf5.png", + "./seasonals/autumn_images/leaf6.png", + "./seasonals/autumn_images/leaf7.png", + "./seasonals/autumn_images/leaf8.png", + "./seasonals/autumn_images/leaf9.png", + "./seasonals/autumn_images/leaf10.png", + "./seasonals/autumn_images/leaf11.png", + "./seasonals/autumn_images/leaf12.png", + "./seasonals/autumn_images/leaf13.png", + "./seasonals/autumn_images/leaf14.png", + "./seasonals/autumn_images/leaf15.png", +]; + +// remove commented out image array to enable test site working, comment out above images array for that +/* +const images = [ + "./images/acorn1.png", + "./images/acorn2.png", + "./images/leaf1.png", + "./images/leaf2.png", + "./images/leaf3.png", + "./images/leaf4.png", + "./images/leaf5.png", + "./images/leaf6.png", + "./images/leaf7.png", + "./images/leaf8.png", + "./images/leaf9.png", + "./images/leaf10.png", + "./images/leaf11.png", + "./images/leaf12.png", + "./images/leaf13.png", + "./images/leaf14.png", + "./images/leaf15.png", +]; +*/ + +function addRandomLeaves(count) { + const autumnContainer = document.querySelector('.autumn-container'); // get the leave container + if (!autumnContainer) return; // exit if leave container is not found + + console.log('Adding random leaves'); + + // Array of leave characters + for (let i = 0; i < count; i++) { + // create a new leave element + const leaveDiv = document.createElement('div'); + leaveDiv.className = "leaf"; + + // pick a random leaf symbol + const imageSrc = images[Math.floor(Math.random() * images.length)]; + const img = document.createElement("img"); + img.src = imageSrc; + + leaveDiv.appendChild(img); + + + // set random horizontal position, animation delay and size(uncomment lines to enable) + const randomLeft = Math.random() * 100; // position (0% to 100%) + const randomAnimationDelay = Math.random() * 12; // delay (0s to 12s) + const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) + + // apply styles + leaveDiv.style.left = `${randomLeft}%`; + leaveDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; + + // set random animation duration + if (enableDiffrentDuration) { + const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s) + const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s) + leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`; + } + + // add the leave to the container + autumnContainer.appendChild(leaveDiv); + } + console.log('Random leaves added'); +} + +// initialize standard leaves +function initLeaves() { + const container = document.querySelector('.autumn-container') || document.createElement("div"); + + if (!document.querySelector('.autumn-container')) { + container.className = "autumn-container"; + container.setAttribute("aria-hidden", "true"); + document.body.appendChild(container); + } + + for (let i = 0; i < 12; i++) { + const leafDiv = document.createElement("div"); + leafDiv.className = "leaf"; + + const img = document.createElement("img"); + img.src = images[Math.floor(Math.random() * images.length)]; + + // set random animation duration + if (enableDiffrentDuration) { + const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s) + const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s) + leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`; + } + + leafDiv.appendChild(img); + container.appendChild(leafDiv); + } +} + +// initialize leaves and add random leaves after the DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + if (!leaves) return; // exit if leaves are disabled + initLeaves(); + toggleAutumn(); + + const screenWidth = window.innerWidth; // get the screen width to detect mobile devices + if (randomLeaves && (screenWidth > 768 || randomLeavesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices + addRandomLeaves(leafCount); + } +}); \ No newline at end of file