diff --git a/public/css/chapa_sigmoide.css b/public/css/chapa_sigmoide.css index 4424edc..28d44c4 100644 --- a/public/css/chapa_sigmoide.css +++ b/public/css/chapa_sigmoide.css @@ -296,16 +296,40 @@ 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; +} + +.easteregg-transition { + transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in; + overflow: hidden; +} + +.easteregg-hidden { + max-height: 0; + opacity: 0; + padding: 0 1.5rem; /* Maintain horizontal padding space */ +} + +.easteregg-visible { + max-height: 300px; /* Arbitrary large height for expansion */ + opacity: 1; + padding-top: 1rem; + padding-bottom: 1.5rem; +} + div.ficha figure img:nth-of-type(1) { animation-delay: 0s;} diff --git a/public/javascript/chapa_sigmoide.js b/public/javascript/chapa_sigmoide.js new file mode 100644 index 0000000..1587592 --- /dev/null +++ b/public/javascript/chapa_sigmoide.js @@ -0,0 +1,76 @@ +const cards = document.querySelectorAll('div.ficha'); + +for (const card of cards) +{ + card.addEventListener('click', handleCardClick); +} + +const content = document.querySelector('div.ficha .easteregg'); + +const messageBox = document.getElementById('message-box'); + +let clickCount = 0; +let lastClickTime = 0; +const clickThreshold = 800; +const expandDuration = 5000; + +let hideTimeoutId = null; + +function hideContent() { + content.classList.remove('easteregg-visible'); + content.classList.add('easteregg-hidden'); + messageBox.textContent = ''; +} + +function expandContent() { + // Show content + content.classList.remove('easteregg-hidden'); + content.classList.add('easteregg-visible'); + messageBox.textContent = 'Secret content unlocked!'; + + // 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); + + 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); // Duration of the shake animation + + // Determine if the click is 'in a row' + if (now - lastClickTime < clickThreshold) { + clickCount++; + } else { + clickCount = 1; + if (content.classList.contains('easteregg-visible')) { + hideContent(); + } + } + + lastClickTime = now; + + // Check for the 3-click trigger + if (clickCount >= 3) { + expandContent(); + } +} + +window.onload = () => { hideContent(); } \ No newline at end of file diff --git a/views/chapa-sigmoide/readme.erb b/views/chapa-sigmoide/readme.erb index cfa11ae..f3d74a4 100644 --- a/views/chapa-sigmoide/readme.erb +++ b/views/chapa-sigmoide/readme.erb @@ -22,6 +22,8 @@

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

+

Easteregg

+

Mais

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