diff --git a/app.js b/app.js index c09098d..cb9ba62 100644 --- a/app.js +++ b/app.js @@ -232,3 +232,67 @@ loadConfig() dashboardSections.innerHTML = '

Dashboard-Konfiguration konnte nicht geladen werden.

'; onlineCount.textContent = '--'; }); + +// ========================================================================== +// Peeking Bongo Cat Easter Egg Logic +// ========================================================================== +(function initPeekingCat() { + const peekingCat = document.querySelector('#peekingCat'); + const searchInput = document.querySelector('#serviceSearch'); + + if (!peekingCat) return; + + let tapTimeout = null; + + // Function to trigger heart popup on click + function createHeart(x, y) { + const heart = document.createElement('div'); + heart.className = 'cat-heart'; + heart.innerHTML = '❤️'; + heart.style.left = `${x - 12}px`; + heart.style.top = `${y - 20}px`; + + // Set random rotation angle in CSS custom variable + const randomRot = Math.random() * 40 - 20; + heart.style.setProperty('--rot', `${randomRot}deg`); + + document.body.appendChild(heart); + + // Cleanup heart after animation completes + setTimeout(() => heart.remove(), 800); + } + + // Focus search box triggers peeking active state + if (searchInput) { + searchInput.addEventListener('focus', () => { + peekingCat.classList.add('is-active'); + }); + + searchInput.addEventListener('blur', () => { + peekingCat.classList.remove('is-active'); + peekingCat.classList.remove('is-tapping'); + }); + + // Keyboard typing triggers tapping animation! + searchInput.addEventListener('input', () => { + peekingCat.classList.add('is-active'); + peekingCat.classList.add('is-tapping'); + + if (tapTimeout) clearTimeout(tapTimeout); + tapTimeout = setTimeout(() => { + peekingCat.classList.remove('is-tapping'); + }, 350); // Stop tapping 350ms after typing stops + }); + } + + // Click on cat triggers tapping + heart animation! + peekingCat.addEventListener('click', (e) => { + peekingCat.classList.add('is-tapping'); + createHeart(e.clientX, e.clientY); + + if (tapTimeout) clearTimeout(tapTimeout); + tapTimeout = setTimeout(() => { + peekingCat.classList.remove('is-tapping'); + }, 800); + }); +})(); diff --git a/index.html b/index.html index 7b18973..7de4f46 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - +
@@ -73,6 +73,50 @@ Status wird im Hintergrund geprueft. - + + + + diff --git a/style.css b/style.css index 1d4ff05..d3d94c3 100644 --- a/style.css +++ b/style.css @@ -820,3 +820,117 @@ main { animation-iteration-count: 1 !important; } } + +/* ========================================================================== + Peeking Bongo Cat Easter Egg + ========================================================================== */ +.peeking-cat { + position: fixed; + bottom: -45px; + left: 24px; + width: 120px; + height: 100px; + z-index: 1000; + cursor: pointer; + transition: bottom 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s ease; + user-select: none; + pointer-events: auto; +} + +.peeking-cat:hover { + bottom: -15px; + transform: scale(1.06); +} + +.peeking-cat.is-active { + bottom: -15px; +} + +/* Blinking eyes animation */ +@keyframes cat-blink { + 0%, 90%, 100% { + transform: scaleY(1); + } + 95% { + transform: scaleY(0.1); + } +} +.cat-eye-group { + transform-origin: 42px 50px; + animation: cat-blink 4s infinite; +} +.cat-eye-group:nth-child(2) { + transform-origin: 78px 50px; +} + +/* Ear wiggle animation on hover */ +@keyframes ear-wiggle-l { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate(-6deg); } +} +@keyframes ear-wiggle-r { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate(6deg); } +} +.peeking-cat:hover .cat-ear-left, +.peeking-cat:hover .cat-ear-left-inner { + animation: ear-wiggle-l 0.4s ease-in-out infinite alternate; + transform-origin: 35px 42px; +} +.peeking-cat:hover .cat-ear-right, +.peeking-cat:hover .cat-ear-right-inner { + animation: ear-wiggle-r 0.4s ease-in-out infinite alternate; + transform-origin: 85px 42px; +} + +/* Paw tapping animation (Bongo Cat typing style) */ +@keyframes paw-tap-left { + 0%, 100% { transform: translateY(0) rotate(0); } + 50% { transform: translateY(-10px) rotate(-3deg); } +} +@keyframes paw-tap-right { + 0%, 100% { transform: translateY(0) rotate(0); } + 50% { transform: translateY(-10px) rotate(3deg); } +} +.peeking-cat.is-tapping .cat-paw-left { + animation: paw-tap-left 0.14s ease-in-out infinite alternate; + transform-origin: 38px 70px; +} +.peeking-cat.is-tapping .cat-paw-right { + animation: paw-tap-right 0.14s ease-in-out infinite alternate-reverse; + transform-origin: 82px 70px; +} + +/* Floating Hearts on click */ +.cat-heart { + position: fixed; + pointer-events: none; + z-index: 10001; + font-size: 20px; + animation: heart-float 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; +} + +@keyframes heart-float { + 0% { + transform: translateY(0) scale(0.6) rotate(0deg); + opacity: 1; + } + 100% { + transform: translateY(-80px) scale(1.4) rotate(var(--rot, 15deg)); + opacity: 0; + } +} + +/* Responsive adjustment for mobile screen */ +@media (max-width: 620px) { + .peeking-cat { + width: 90px; + height: 75px; + bottom: -35px; + left: 12px; + } + .peeking-cat:hover, + .peeking-cat.is-active { + bottom: -10px; + } +}