mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-04-21 02:21:52 +02:00
better 404 page
This commit is contained in:
Merox
parent
eaf51e3cc7
commit
28ada40502
1 changed files with 113 additions and 47 deletions
160
layouts/404.html
160
layouts/404.html
|
|
@ -1,64 +1,130 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
|
<div class="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
|
||||||
<div class="space-y-4">
|
<style>
|
||||||
<!-- Much larger 404 title -->
|
.glitch {
|
||||||
|
position: relative;
|
||||||
<!-- Image integration -->
|
animation: glitch 1s infinite;
|
||||||
<div>
|
}
|
||||||
<img src="404_hu3645313582868369550.png"
|
@keyframes glitch {
|
||||||
alt="404 Error Illustration"
|
0% { transform: translate(0) }
|
||||||
class="mx-auto w-[30%] max-w-[30%] h-auto" />
|
20% { transform: translate(-2px, 2px) }
|
||||||
|
40% { transform: translate(-2px, -2px) }
|
||||||
|
60% { transform: translate(2px, 2px) }
|
||||||
|
80% { transform: translate(2px, -2px) }
|
||||||
|
100% { transform: translate(0) }
|
||||||
|
}
|
||||||
|
.message {
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
.particle {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
background: #3b82f6;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<br><br><br>
|
||||||
|
<div class="flex justify-center items-center gap-6 mb-12">
|
||||||
|
<div class="font-extrabold glitch" style="font-size: 12rem;">4</div>
|
||||||
|
<div class="font-extrabold text-primary-600 dark:text-primary-400" style="font-size: 12rem;">0</div>
|
||||||
|
<div class="font-extrabold glitch" style="font-size: 12rem;">4</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<!-- Title -->
|
||||||
|
<h1 class="text-3xl font-bold mb-8">Page Not Found</h1>
|
||||||
|
|
||||||
|
<!-- Message -->
|
||||||
|
<div class="message text-xl text-neutral-600 dark:text-neutral-400 mb-8" id="message">
|
||||||
|
Error 404: Page decided to take a coffee break ☕
|
||||||
</div>
|
</div>
|
||||||
<a href="https://www.freepik.com/free-vector/404-error-lost-space-concept-illustration_20824296.htm#fromView=search&page=1&position=33&uuid=f4ddf9b6-d6fd-4bc9-be9b-24e9f4345eea" style="font-size: 8px;">Image by storyset on Freepik</a>
|
|
||||||
<br>
|
<!-- Description -->
|
||||||
<br>
|
<p class="text-neutral-500 dark:text-neutral-500 max-w-2xl mx-auto text-lg leading-relaxed mb-10">
|
||||||
<!-- Messages with reduced spacing -->
|
The page you're looking for might have taken a wrong turn in cyberspace.
|
||||||
<div class="space-y-2 mt-4">
|
Don't worry, even the best explorers get lost sometimes!
|
||||||
<p class="text-2xl font-bold text-neutral-800 dark:text-neutral-200">
|
</p>
|
||||||
Oops! Page Not Found
|
|
||||||
</p>
|
<!-- Buttons -->
|
||||||
<p class="text-lg text-neutral-600 dark:text-neutral-400" id="message">
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
Looks like our servers couldn't find what you're looking for!
|
<a href="/" class="px-6 py-3 text-sm font-medium text-white bg-primary-600 dark:bg-primary-500 rounded-lg hover:bg-primary-700 dark:hover:bg-primary-400 transition-all hover:-translate-y-0.5">
|
||||||
</p>
|
Return Home
|
||||||
<p class="text-neutral-500 dark:text-neutral-500 max-w-md mx-auto">
|
|
||||||
The page you're looking for might have been moved, deleted, or perhaps never existed.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Action buttons -->
|
|
||||||
<div class="flex flex-wrap justify-center gap-4 mt-6">
|
|
||||||
<a href="/" class="px-6 py-3 text-sm font-medium text-white bg-primary-600 dark:bg-primary-500 rounded-lg hover:bg-primary-700 dark:hover:bg-primary-400 transition-colors">
|
|
||||||
Back Home
|
|
||||||
</a>
|
</a>
|
||||||
<button onclick="window.history.back()" class="px-6 py-3 text-sm font-medium text-primary-600 dark:text-primary-400 border border-primary-600 dark:border-primary-400 rounded-lg hover:bg-primary-50 dark:hover:bg-primary-900/50 transition-colors">
|
<button onclick="window.history.back()" class="px-6 py-3 text-sm font-medium text-primary-600 dark:text-primary-400 border border-primary-600 dark:border-primary-400 rounded-lg hover:bg-primary-50 dark:hover:bg-primary-900/50 transition-all hover:-translate-y-0.5">
|
||||||
Previous Page
|
Go Back
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
const messages = [
|
const messages = [
|
||||||
"Looks like our servers couldn't find what you're looking for!",
|
"Error 404: Page decided to take a coffee break ☕",
|
||||||
"Our tech team is scratching their heads on this one...",
|
"Looks like this page took an unexpected vacation 🏖️",
|
||||||
"This page seems to have disappeared into the server room...",
|
"Our hamsters couldn't find this page in their servers 🐹",
|
||||||
"404: Page hiding in the server racks!",
|
"This page is playing hide and seek (and winning!) 🙈",
|
||||||
"Even our best admins couldn't locate this page!"
|
"Houston, we have a problem finding this page... 🚀"
|
||||||
];
|
];
|
||||||
|
|
||||||
let currentIndex = 0;
|
let currentIndex = 0;
|
||||||
const messageElement = document.getElementById('message');
|
const messageElement = document.getElementById('message');
|
||||||
|
|
||||||
// Change message periodically
|
|
||||||
setInterval(() => {
|
|
||||||
messageElement.style.opacity = '0';
|
|
||||||
setTimeout(() => {
|
|
||||||
currentIndex = (currentIndex + 1) % messages.length;
|
|
||||||
messageElement.textContent = messages[currentIndex];
|
|
||||||
messageElement.style.opacity = '1';
|
|
||||||
}, 200);
|
|
||||||
}, 5000);
|
|
||||||
|
|
||||||
messageElement.style.transition = 'opacity 0.2s ease-in-out';
|
function createParticle(x, y) {
|
||||||
|
const particle = document.createElement('div');
|
||||||
|
particle.className = 'particle';
|
||||||
|
particle.style.width = '8px';
|
||||||
|
particle.style.height = '8px';
|
||||||
|
particle.style.left = x + 'px';
|
||||||
|
particle.style.top = y + 'px';
|
||||||
|
document.body.appendChild(particle);
|
||||||
|
|
||||||
|
gsap.to(particle, {
|
||||||
|
duration: 1,
|
||||||
|
x: (Math.random() - 0.5) * 200,
|
||||||
|
y: (Math.random() - 0.5) * 200,
|
||||||
|
opacity: 1,
|
||||||
|
scale: 0,
|
||||||
|
ease: "power2.out",
|
||||||
|
onComplete: () => particle.remove()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function explodeParticles(event) {
|
||||||
|
for (let i = 0; i < 20; i++) {
|
||||||
|
createParticle(event.clientX, event.clientY);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll('.glitch').forEach(num => {
|
||||||
|
num.addEventListener('click', explodeParticles);
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateMessage() {
|
||||||
|
gsap.to(messageElement, {
|
||||||
|
duration: 0.3,
|
||||||
|
opacity: 0,
|
||||||
|
onComplete: () => {
|
||||||
|
currentIndex = (currentIndex + 1) % messages.length;
|
||||||
|
messageElement.textContent = messages[currentIndex];
|
||||||
|
gsap.to(messageElement, {
|
||||||
|
duration: 0.3,
|
||||||
|
opacity: 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(updateMessage, 4000);
|
||||||
|
|
||||||
|
// Initial animation
|
||||||
|
gsap.from('.glitch, .text-[12rem]', {
|
||||||
|
duration: 1,
|
||||||
|
y: -100,
|
||||||
|
opacity: 0,
|
||||||
|
stagger: 0.2,
|
||||||
|
ease: "bounce.out"
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
Loading…
Add table
Reference in a new issue