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 @@
+
+
Gosta de: programação, Linux, código aberto, Hollow Knight, Undertale, Deltarune, Chuunibyo.
-Easteregg
-UwU
+