Merge pull request 'Eastereggs' (#7) from shake into main

Reviewed-on: https://mytonton.com.br/git/git/TonTon-UFPA-Comput/site/pulls/7

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

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(); }

views/chapa-sigmoide/readme.erb

@@ -15,6 +15,8 @@
 		<img src="/chapa-sigmoide/mateus.jpg">
 
 		<img src="/chapa-sigmoide/mateus-avatar.png"/>
+
+		<img class="easteregg" src="/chapa-sigmoide/mateus-easteregg.gif"/>
 	</figure>
 
 	<div class="description">
@@ -24,6 +26,10 @@
 
 		<p><a href="mateus">Mais</a></p>
 	</div>
+
+	<div class="easteregg">
+		<p>UwU</p>
+	</div>
 </div>
 
 <div class="ficha">

views/chapa_sigmoide.erb

@@ -32,4 +32,6 @@
 
 		title.textContent = document.querySelector('header').append(h1);
 	</script>
+
+	<script src="/javascript/chapa_sigmoide.js"></script>
 </html>