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 @@
+
+
UwU
+