diff --git a/public/chapa-sigmoide/mateus-easteregg.gif b/public/chapa-sigmoide/mateus-easteregg.gif new file mode 100644 index 0000000..115ae00 Binary files /dev/null and b/public/chapa-sigmoide/mateus-easteregg.gif differ diff --git a/public/css/chapa_sigmoide.css b/public/css/chapa_sigmoide.css index 28d44c4..a329335 100644 --- a/public/css/chapa_sigmoide.css +++ b/public/css/chapa_sigmoide.css @@ -270,17 +270,24 @@ div.ficha figure padding: 0; } -div.ficha figure img +div.ficha img { margin: 0; aspect-ratio: 3 / 4; +} + +div.ficha:not(.easteregg-visible) img +{ animation-name: image-change; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 10s; } -div.ficha div.description +div.ficha.easteregg-visible img:not(.easteregg) +{ opacity: 0; } + +div.ficha div.description, div.ficha div.easteregg { grid-row: 2; grid-column: 1 / 3; @@ -308,43 +315,55 @@ div.ficha div.description 40%, 80% { transform: translateX(8px) rotate(1deg); } } -.animate-shake { - animation: shake 0.3s ease-in-out; +.animate-shake +{ animation: shake 0.3s ease-in-out; } + +div.easteregg-visible +{ animation: glow 1s infinite alternate ease-in-out; } + +@keyframes glow { + 0% { + border-color: orange; + box-shadow: 0 0 10px orange, + 0 0 20px orange; + } + + 100% { + border-color: red; + box-shadow: 0 0 10px red, + 0 0 30px red; + } } -.easteregg-transition { - transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in; - overflow: hidden; -} +div.easteregg-visible div.description +{ display: none; } -.easteregg-hidden { - max-height: 0; - opacity: 0; - padding: 0 1.5rem; /* Maintain horizontal padding space */ -} +div:not(.easteregg-visible) .easteregg +{ display: none; } -.easteregg-visible { - max-height: 300px; /* Arbitrary large height for expansion */ - opacity: 1; - padding-top: 1rem; - padding-bottom: 1.5rem; -} +div.easteregg-visible .easteregg +{ display: block; } div.ficha figure img:nth-of-type(1) { animation-delay: 0s;} -div.ficha figure img:nth-of-type(2) +div.ficha figure img:not(:nth-of-type(1)) { - animation-delay: 5s; - opacity: 0; position: absolute; left: 0rem; top: 0rem; - width: 100%;; + width: 100%; padding: inherit; box-sizing: border-box; } +div.ficha figure img:not(:nth-of-type(1)):not(.easteregg) +{ opacity: 0; animation-delay: 5s; } + +div.ficha img.easteregg +{ opacity: 1; } + + @media print { :root diff --git a/public/javascript/chapa_sigmoide.js b/public/javascript/chapa_sigmoide.js index 1587592..db0bbf9 100644 --- a/public/javascript/chapa_sigmoide.js +++ b/public/javascript/chapa_sigmoide.js @@ -5,7 +5,7 @@ for (const card of cards) card.addEventListener('click', handleCardClick); } -const content = document.querySelector('div.ficha .easteregg'); +const eastereggContainers = document.querySelectorAll('div.ficha:has(.easteregg)'); const messageBox = document.getElementById('message-box'); @@ -16,28 +16,30 @@ const expandDuration = 5000; let hideTimeoutId = null; -function hideContent() { - content.classList.remove('easteregg-visible'); - content.classList.add('easteregg-hidden'); - messageBox.textContent = ''; +function hideEastereggs() { + for (const div of eastereggContainers) + { + div.classList.remove('easteregg-visible'); + div.classList.add('easteregg-hidden'); + } } -function expandContent() { - // Show content - content.classList.remove('easteregg-hidden'); - content.classList.add('easteregg-visible'); - messageBox.textContent = 'Secret content unlocked!'; +function expandEastereggs() { + for (const div of eastereggContainers) + { + div.classList.add('easteregg-visible'); + div.classList.remove('easteregg-hidden'); + } // Clear any existing timeout and set a new one if (hideTimeoutId) { clearTimeout(hideTimeoutId); } - hideTimeoutId = setTimeout(() => { - hideContent(); - // Optionally reset the count after the content hides, - // but we already reset it immediately below. - }, expandDuration); + hideTimeoutId = setTimeout( + () => { hideEastereggs(); }, + expandDuration + ); clickCount = 0; } @@ -51,26 +53,27 @@ function handleCardClick(event) { { element = element.parentElement } element.classList.add('animate-shake'); - setTimeout(() => { - element.classList.remove('animate-shake'); - }, 300); // Duration of the shake animation + + setTimeout( + () => { element.classList.remove('animate-shake'); }, + 300 + ); // Determine if the click is 'in a row' - if (now - lastClickTime < clickThreshold) { - clickCount++; - } else { - clickCount = 1; - if (content.classList.contains('easteregg-visible')) { - hideContent(); - } + if (now - lastClickTime < clickThreshold) + { clickCount++; } + else + { + clickCount = 1; + if (element.classList.contains('easteregg-visible')) + { hideEastereggs(); } } lastClickTime = now; // Check for the 3-click trigger - if (clickCount >= 3) { - expandContent(); - } + if (clickCount >= 3) + { expandEastereggs(); } } -window.onload = () => { hideContent(); } \ No newline at end of file +window.onload = () => { hideEastereggs(); } \ No newline at end of file diff --git a/views/chapa-sigmoide/readme.erb b/views/chapa-sigmoide/readme.erb index f3d74a4..de581cb 100644 --- a/views/chapa-sigmoide/readme.erb +++ b/views/chapa-sigmoide/readme.erb @@ -15,6 +15,8 @@ + +
@@ -22,10 +24,12 @@

Gosta de: programação, Linux, código aberto, Hollow Knight, Undertale, Deltarune, Chuunibyo.

-

Easteregg

-

Mais

+ +
+

UwU

+