new and improved easter eggs (with sound effects!)
This commit is contained in:
IZZY
parent
74ed7bd50a
commit
daa50887d6
BIN
public/earthquake.mp3
Normal file
BIN
public/earthquake.mp3
Normal file
Binary file not shown.
@ -248,7 +248,7 @@ const ContactUs = () => {
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="sr-only">Instagram</span>
|
||||
<Image height={200} width={200} alt="Logo" className="z-10" src="/insta.webp" />
|
||||
<Image height={200} width={200} alt="Logo" className="z-10" src="/instagram.png" />
|
||||
</a>
|
||||
{/* Facebook: Pulsating Map */}
|
||||
<a
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
@ -15,216 +15,319 @@
|
||||
} */
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* Increase specificity and use !important where necessary */
|
||||
.mapboxgl-popup .mapboxgl-popup-content {
|
||||
@apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
|
||||
@apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
|
||||
}
|
||||
|
||||
/* Hide the popup tip */
|
||||
.mapboxgl-popup .mapboxgl-popup-tip {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Child elements */
|
||||
.mapboxgl-popup-content h3 {
|
||||
@apply text-sm font-medium text-neutral-800 !important;
|
||||
@apply text-sm font-medium text-neutral-800 !important;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content p {
|
||||
@apply text-xs text-neutral-600 !important;
|
||||
@apply text-xs text-neutral-600 !important;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content p + p {
|
||||
@apply text-neutral-500 !important;
|
||||
.mapboxgl-popup-content p+p {
|
||||
@apply text-neutral-500 !important;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
/* default styles if needed */
|
||||
/* default styles if needed */
|
||||
}
|
||||
|
||||
.icon-link:hover,
|
||||
.icon-link:focus {
|
||||
background-color: #16424b;
|
||||
background-color: #16424b;
|
||||
}
|
||||
|
||||
.icon-link:hover h3,
|
||||
.icon-link:focus h3,
|
||||
.icon-link:hover p,
|
||||
.icon-link:focus p {
|
||||
color: #fff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.icon-link:hover h3,
|
||||
.icon-link:hover p,
|
||||
.icon-link:focus h3,
|
||||
.icon-link:focus p {
|
||||
color: #111;
|
||||
/* or black */
|
||||
color: #111;
|
||||
/* or black */
|
||||
}
|
||||
|
||||
/* ---- LAVA FLOOD OVERLAY ---- */
|
||||
.lava-flood-overlay {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: -100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
transition: top 0.9s cubic-bezier(0.6, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: -100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
transition: top 0.9s cubic-bezier(0.6, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.lava-flood-overlay.lava-active {
|
||||
top: 0;
|
||||
transition: top 0.33s cubic-bezier(0.6, 0, 0.2, 1);
|
||||
top: 0;
|
||||
transition: top 0.33s cubic-bezier(0.6, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.lava-flood-overlay img,
|
||||
.lava-gradient {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 80px #ff5500);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 80px #ff5500);
|
||||
}
|
||||
|
||||
/* ---- INSANE SCREEN SHAKE (LinkedIn) ---- */
|
||||
@keyframes supershake {
|
||||
0% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
0% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
|
||||
5% {
|
||||
transform: translate(-20px, 5px) rotate(-2deg);
|
||||
}
|
||||
5% {
|
||||
transform: translate(-20px, 5px) rotate(-2deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translate(18px, -8px) rotate(2deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(18px, -8px) rotate(2deg);
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translate(-22px, 8px) rotate(-4deg);
|
||||
}
|
||||
15% {
|
||||
transform: translate(-22px, 8px) rotate(-4deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate(22px, -2px) rotate(4deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(22px, -2px) rotate(4deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(-18px, 12px) rotate(-2deg);
|
||||
}
|
||||
25% {
|
||||
transform: translate(-18px, 12px) rotate(-2deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(18px, -10px) rotate(2deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(18px, -10px) rotate(2deg);
|
||||
}
|
||||
|
||||
35% {
|
||||
transform: translate(-22px, 14px) rotate(-4deg);
|
||||
}
|
||||
35% {
|
||||
transform: translate(-22px, 14px) rotate(-4deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate(22px, -12px) rotate(4deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(22px, -12px) rotate(4deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translate(-18px, 8px) rotate(-2deg);
|
||||
}
|
||||
45% {
|
||||
transform: translate(-18px, 8px) rotate(-2deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(18px, -14px) rotate(4deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(18px, -14px) rotate(4deg);
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: translate(-22px, 12px) rotate(-4deg);
|
||||
}
|
||||
55% {
|
||||
transform: translate(-22px, 12px) rotate(-4deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate(22px, -8px) rotate(2deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(22px, -8px) rotate(2deg);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: translate(-18px, 10px) rotate(-2deg);
|
||||
}
|
||||
65% {
|
||||
transform: translate(-18px, 10px) rotate(-2deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate(18px, -12px) rotate(2deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(18px, -12px) rotate(2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-22px, 14px) rotate(-4deg);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-22px, 14px) rotate(-4deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate(22px, -10px) rotate(4deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(22px, -10px) rotate(4deg);
|
||||
}
|
||||
|
||||
85% {
|
||||
transform: translate(-18px, 8px) rotate(-2deg);
|
||||
}
|
||||
85% {
|
||||
transform: translate(-18px, 8px) rotate(-2deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate(18px, -14px) rotate(2deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(18px, -14px) rotate(2deg);
|
||||
}
|
||||
|
||||
95% {
|
||||
transform: translate(-20px, 5px) rotate(-2deg);
|
||||
}
|
||||
95% {
|
||||
transform: translate(-20px, 5px) rotate(-2deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.shake-screen {
|
||||
animation: supershake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
animation: supershake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
}
|
||||
|
||||
/* ---- CRACK + COLLAPSE OVERLAY (X icon) ---- */
|
||||
.crack-overlay {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.5s;
|
||||
will-change: transform, opacity;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.5s;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.crack {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.crack1 {
|
||||
width: 35vw;
|
||||
left: 10vw;
|
||||
top: 22vh;
|
||||
opacity: 0.8;
|
||||
width: 35vw;
|
||||
left: 10vw;
|
||||
top: 22vh;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.crack2 {
|
||||
width: 32vw;
|
||||
right: 12vw;
|
||||
top: 42vh;
|
||||
opacity: 0.7;
|
||||
transform: rotate(-8deg);
|
||||
width: 32vw;
|
||||
right: 12vw;
|
||||
top: 42vh;
|
||||
opacity: 0.7;
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
/* Add more .crackN classes if using more cracks */
|
||||
|
||||
/* Collapse falling effect */
|
||||
.crack-collapse {
|
||||
transform: perspective(900px) rotateX(75deg) translateY(80vh) scale(0.9);
|
||||
opacity: 0;
|
||||
transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.6s;
|
||||
transform: perspective(900px) rotateX(75deg) translateY(80vh) scale(0.9);
|
||||
opacity: 0;
|
||||
transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.6s;
|
||||
}
|
||||
|
||||
/* --- X Logo Crack-and-Spin Easter Egg --- */
|
||||
.x-logo.cracked {
|
||||
/* Overlay cracks with a clip-path or filters for effect (simple grayscale/contrast for demo) */
|
||||
filter: grayscale(1) brightness(0.6) contrast(2);
|
||||
/* Slight shake + scale for realism */
|
||||
transform: scale(1.04);
|
||||
transition: filter 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.x-logo.spin {
|
||||
animation: xspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes xspin180 {
|
||||
0% {
|
||||
transform: rotate(0deg) scale(1.04);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate(200deg) scale(1.04);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(180deg) scale(1.04);
|
||||
}
|
||||
}
|
||||
|
||||
.x-logo.cracked {
|
||||
filter: grayscale(1) brightness(0.7) contrast(2.6);
|
||||
transition: filter 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.x-logo.spin {
|
||||
animation: xspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
||||
}
|
||||
|
||||
.x-logo.nospin {
|
||||
transform: rotate(0deg) scale(1.0);
|
||||
filter: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.x-logo-cracks {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.x-logo-cracks img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.footer-x-logo-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* === X Logo Full Page Crack-and-Spin Easter Egg === */
|
||||
.body-cracked .crack-overlay,
|
||||
.body-cracked .crack1,
|
||||
.body-cracked .crack2 {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.body-cracked {
|
||||
/* Animate the whole page spin with a transform on html/body! */
|
||||
animation: bodyspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.body-spin-back {
|
||||
/* Immediately resets the transform, no animation needed */
|
||||
animation: none !important;
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
|
||||
@keyframes bodyspin180 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate(200deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
@ -2,79 +2,100 @@ import React, { useCallback, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function BottomFooter() {
|
||||
// ig easter egg
|
||||
const [lavaActive, setLavaActive] = useState(false);
|
||||
// Instagram Lava Flood Easter Egg
|
||||
const [lavaActive, setLavaActive] = useState(false);
|
||||
const lavaTimeout = useRef<any>(null);
|
||||
|
||||
// LinkedIn easter egg
|
||||
// Instagram sound
|
||||
const earthquakeAudio = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
// LinkedIn Shake Easter Egg
|
||||
const [shaking, setShaking] = useState(false);
|
||||
const shakeTimeout = useRef<any>(null);
|
||||
|
||||
// x easter egg
|
||||
// X Logo Full-Page Crack & Spin Easter Egg
|
||||
const [showCracks, setShowCracks] = useState(false);
|
||||
const [collapse, setCollapse] = useState(false);
|
||||
const crackTimeout = useRef<any>(null);
|
||||
const [crackOverlayActive, setCrackOverlayActive] = useState(false);
|
||||
|
||||
// Lava flood handler (top-down flood)
|
||||
// Lava flood & sound handler
|
||||
const handleInstagramClick = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setLavaActive(true);
|
||||
// Play earthquake sound
|
||||
if (earthquakeAudio.current) {
|
||||
earthquakeAudio.current.currentTime = 0;
|
||||
earthquakeAudio.current.play();
|
||||
}
|
||||
clearTimeout(lavaTimeout.current);
|
||||
lavaTimeout.current = setTimeout(() => setLavaActive(false), 2000);
|
||||
}, []);
|
||||
|
||||
// LinkedIn shake handler
|
||||
const handleLinkedInClick = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
if (shaking) return; // prevent stacking
|
||||
setShaking(true);
|
||||
const body = document.body;
|
||||
body.classList.remove("shake-screen");
|
||||
void body.offsetWidth;
|
||||
body.classList.add("shake-screen");
|
||||
shakeTimeout.current = setTimeout(() => {
|
||||
setShaking(false);
|
||||
const handleLinkedInClick = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
if (shaking) return; // prevent stacking
|
||||
setShaking(true);
|
||||
const body = document.body;
|
||||
body.classList.remove("shake-screen");
|
||||
}, 1000);
|
||||
}, [shaking]);
|
||||
void body.offsetWidth;
|
||||
body.classList.add("shake-screen");
|
||||
shakeTimeout.current = setTimeout(() => {
|
||||
setShaking(false);
|
||||
body.classList.remove("shake-screen");
|
||||
}, 1000);
|
||||
},
|
||||
[shaking]
|
||||
);
|
||||
|
||||
// X (crack and collapse) handler
|
||||
const handleXClick = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setShowCracks(true);
|
||||
crackTimeout.current = setTimeout(() => {
|
||||
setCollapse(true);
|
||||
// X click = crack, spin page, then reset after 2s
|
||||
const handleXClick = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
if (crackOverlayActive) return;
|
||||
setShowCracks(true);
|
||||
setCrackOverlayActive(true);
|
||||
document.body.classList.remove("body-spin-back");
|
||||
document.body.classList.add("body-cracked");
|
||||
setTimeout(() => {
|
||||
setShowCracks(false);
|
||||
setCollapse(false);
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
}, []);
|
||||
document.body.classList.remove("body-cracked");
|
||||
document.body.classList.add("body-spin-back");
|
||||
setTimeout(() => {
|
||||
setShowCracks(false);
|
||||
setCrackOverlayActive(false);
|
||||
document.body.classList.remove("body-spin-back");
|
||||
}, 200);
|
||||
}, 2000);
|
||||
},
|
||||
[crackOverlayActive]
|
||||
);
|
||||
|
||||
// Clean up classes and timeouts on unmount
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
clearTimeout(lavaTimeout.current);
|
||||
clearTimeout(shakeTimeout.current);
|
||||
clearTimeout(crackTimeout.current);
|
||||
document.body.classList.remove("shake-screen");
|
||||
document.body.classList.remove("body-cracked");
|
||||
document.body.classList.remove("body-spin-back");
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hidden audio element */}
|
||||
<audio ref={earthquakeAudio} src="/earthquake.mp3" preload="auto" />
|
||||
{/* Lava Flood Overlay */}
|
||||
{lavaActive && (
|
||||
<div className="lava-flood-overlay lava-active">
|
||||
<img src="/lava.jpg" alt="Lava flood" draggable={false} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Crack & Collapse Overlay */}
|
||||
{(showCracks || collapse) && (
|
||||
<div className={`crack-overlay${collapse ? " crack-collapse" : ""}`}>
|
||||
{/* Crack overlay for the spinning effect */}
|
||||
{showCracks && (
|
||||
<div className="crack-overlay" style={{ pointerEvents: "none" }}>
|
||||
<img className="crack crack1" src="/crack1.png" alt="" />
|
||||
<img className="crack crack2" src="/crack2.png" alt="" />
|
||||
{/* Add more cracks for extra effect if you wish */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -113,7 +134,6 @@ export default function BottomFooter() {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Donate Section */}
|
||||
<div className="min-w-[220px] mb-8 md:mb-0 flex-1">
|
||||
<h3 className="font-bold underline text-lg mb-3">Donate</h3>
|
||||
@ -128,17 +148,16 @@ export default function BottomFooter() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="max-w-6xl mx-auto mt-8 pt-6 flex flex-col md:flex-row items-center justify-between border-t border-gray-200/30">
|
||||
<div className="flex flex-row items-center w-full md:w-auto">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="TremorTracker logo"
|
||||
className="h-16 w-auto mr-4 object-contain"
|
||||
style={{ maxHeight: 75 }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row items-center w-full md:w-auto">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="TremorTracker logo"
|
||||
className="h-16 w-auto mr-4 object-contain"
|
||||
style={{ maxHeight: 75 }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm flex items-center">
|
||||
<span className="mr-2">©</span> TremorTracker 2025
|
||||
</span>
|
||||
@ -167,7 +186,14 @@ export default function BottomFooter() {
|
||||
style={{ cursor: "pointer" }}
|
||||
aria-label="X Crack Easter egg"
|
||||
>
|
||||
<img src="x_logo.jpg" alt="X" className="h-7 w-7 rounded-full shadow" />
|
||||
<span className="footer-x-logo-wrap">
|
||||
<img
|
||||
src="x_logo.jpg"
|
||||
alt="X"
|
||||
className="h-7 w-7 rounded-full shadow"
|
||||
style={{ display: "block"}}
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user