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 4424edc..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; @@ -296,31 +303,67 @@ div.ficha div.description @keyframes image-change { 0% { opacity: 0; } - 10% { opacity: 1; } - 50% { opacity: 1; } - 60% { opacity: 0; } - 100% { opacity: 0; } } +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 20%, 60% { transform: translateX(-8px) rotate(-1deg); } + 40%, 80% { transform: translateX(8px) rotate(1deg); } +} + +.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; + } +} + +div.easteregg-visible div.description +{ display: none; } + +div:not(.easteregg-visible) .easteregg +{ display: none; } + +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 new file mode 100644 index 0000000..db0bbf9 --- /dev/null +++ b/public/javascript/chapa_sigmoide.js @@ -0,0 +1,79 @@ +const cards = document.querySelectorAll('div.ficha'); + +for (const card of cards) +{ + card.addEventListener('click', handleCardClick); +} + +const eastereggContainers = document.querySelectorAll('div.ficha:has(.easteregg)'); + +const messageBox = document.getElementById('message-box'); + +let clickCount = 0; +let lastClickTime = 0; +const clickThreshold = 800; +const expandDuration = 5000; + +let hideTimeoutId = null; + +function hideEastereggs() { + for (const div of eastereggContainers) + { + div.classList.remove('easteregg-visible'); + div.classList.add('easteregg-hidden'); + } +} + +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( + () => { hideEastereggs(); }, + expandDuration + ); + + clickCount = 0; +} + +function handleCardClick(event) { + const now = Date.now(); + + let element = event.target; + + while (!element.classList.contains("ficha")) + { element = element.parentElement } + + element.classList.add('animate-shake'); + + setTimeout( + () => { element.classList.remove('animate-shake'); }, + 300 + ); + + // Determine if the click is 'in a row' + 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) + { expandEastereggs(); } +} + +window.onload = () => { hideEastereggs(); } \ No newline at end of file diff --git a/views/chapa-sigmoide/readme.erb b/views/chapa-sigmoide/readme.erb index cfa11ae..de581cb 100644 --- a/views/chapa-sigmoide/readme.erb +++ b/views/chapa-sigmoide/readme.erb @@ -15,6 +15,8 @@ + +
@@ -24,6 +26,10 @@

Mais

+ +
+

UwU

+
diff --git a/views/chapa_sigmoide.erb b/views/chapa_sigmoide.erb index 82d3842..e37a2b1 100644 --- a/views/chapa_sigmoide.erb +++ b/views/chapa_sigmoide.erb @@ -32,4 +32,6 @@ title.textContent = document.querySelector('header').append(h1); + + \ No newline at end of file