358 lines
8.8 KiB
Plaintext
358 lines
8.8 KiB
Plaintext
---
|
|
import { readSingleton } from '@directus/sdk';
|
|
|
|
import directus from '@lib/directus';
|
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
|
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
|
|
import GoBack from '@/components/ui/buttons/GoBack.astro';
|
|
|
|
const global = await directus.request(readSingleton('site_global'));
|
|
---
|
|
|
|
<BaseLayout
|
|
title="Page Not Found"
|
|
description="Page Not Found"
|
|
structuredData={{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'WebPage',
|
|
inLanguage: 'en-US',
|
|
'@id': Astro.url.href,
|
|
url: Astro.url.href,
|
|
name: `Page Not Found | ${global.name}`,
|
|
description: 'Page Not Found',
|
|
isPartOf: {
|
|
'@type': 'WebSite',
|
|
url: global.site_url,
|
|
name: global.name,
|
|
description: global.about,
|
|
},
|
|
}}
|
|
>
|
|
<section class="mt-20 grid place-content-center">
|
|
<div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
|
|
<div class="mx-auto max-w-screen-sm text-center">
|
|
<div class="glitch-wrapper smooth-reveal">
|
|
<h1
|
|
class="glitch text-9xl leading-none font-bold text-neutral-900 sm:text-[12rem] dark:text-neutral-100"
|
|
data-text="404"
|
|
>
|
|
Not Found
|
|
</h1>
|
|
</div>
|
|
|
|
<h1
|
|
class="text-dark smooth-reveal mb-4 text-7xl font-extrabold text-yellow-500 lg:text-9xl dark:text-yellow-400"
|
|
>
|
|
{`Page Not Found - ${global.name}`}
|
|
</h1>
|
|
<div
|
|
class="smooth-reveal mx-auto mt-16 max-w-md rounded-xl bg-neutral-100 p-6 shadow-xs dark:border-neutral-700/50 dark:bg-stone-800"
|
|
>
|
|
<h3
|
|
class="text-sm font-medium tracking-wider text-neutral-500 uppercase dark:text-neutral-400"
|
|
>
|
|
Did you know?
|
|
</h3>
|
|
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-300" id="fun-fact">
|
|
The 404 error code originated when CERN's web server displayed room 404 (their server
|
|
room) as the error message when a file wasn't found.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="smooth-reveal mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
|
|
>
|
|
<GoBack title="Go Back" />
|
|
<PrimaryCTA title="Return Home" url={global.site_url} noArrow addHome />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</BaseLayout>
|
|
|
|
<script>
|
|
const funFacts = [
|
|
"The 404 error code originated when CERN's web server displayed room 404 (their server room) as the error message when a file wasn't found.",
|
|
"In internet slang, '404' has become shorthand for something that's missing or someone who's clueless.",
|
|
"Some websites turn their 404 pages into games, like Google's Pac-Man 404 page that once existed.",
|
|
'The first web server was a NeXT computer used by Tim Berners-Lee at CERN, where the 404 error was born.',
|
|
'Many companies use creative 404 pages as a way to showcase their brand personality and humor.',
|
|
"The HTTP 1.0 specification from 1996 officially defined the 404 error as 'Not Found'.",
|
|
'Studies show that well-designed 404 pages can reduce bounce rates by up to 30%.',
|
|
'The most common cause of 404 errors is mistyped URLs.',
|
|
];
|
|
|
|
// Display a random fun fact
|
|
const funFactElement = document.getElementById('fun-fact');
|
|
if (funFactElement) {
|
|
const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
|
|
funFactElement.textContent = randomFact;
|
|
}
|
|
|
|
// Add smooth reveal animations for content after loading
|
|
document.addEventListener('astro:page-load', () => {
|
|
const animateContent = () => {
|
|
// Animate group 1
|
|
const smoothReveal = document.querySelectorAll('.smooth-reveal');
|
|
smoothReveal.forEach((el, index) => {
|
|
setTimeout(
|
|
() => {
|
|
el.classList.add('animate-reveal');
|
|
},
|
|
100 + index * 150
|
|
);
|
|
});
|
|
};
|
|
|
|
animateContent();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Glitch effect for 404 text */
|
|
.glitch-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.glitch {
|
|
position: relative;
|
|
display: inline-block;
|
|
animation: glitch-skew 1s infinite linear alternate-reverse;
|
|
}
|
|
|
|
.glitch::before,
|
|
.glitch::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.glitch::before {
|
|
left: 2px;
|
|
text-shadow: -2px 0 #ff00c1;
|
|
clip: rect(44px, 450px, 56px, 0);
|
|
animation: glitch-anim 5s infinite linear alternate-reverse;
|
|
}
|
|
|
|
.glitch::after {
|
|
left: -2px;
|
|
text-shadow:
|
|
-2px 0 #00fff9,
|
|
2px 2px #ff00c1;
|
|
animation: glitch-anim2 1s infinite linear alternate-reverse;
|
|
}
|
|
|
|
@keyframes glitch-anim {
|
|
0% {
|
|
clip: rect(31px, 9999px, 94px, 0);
|
|
transform: skew(0.85deg);
|
|
}
|
|
5% {
|
|
clip: rect(70px, 9999px, 71px, 0);
|
|
transform: skew(0.17deg);
|
|
}
|
|
10% {
|
|
clip: rect(9px, 9999px, 85px, 0);
|
|
transform: skew(0.4deg);
|
|
}
|
|
15% {
|
|
clip: rect(47px, 9999px, 18px, 0);
|
|
transform: skew(0.22deg);
|
|
}
|
|
20% {
|
|
clip: rect(7px, 9999px, 78px, 0);
|
|
transform: skew(0.96deg);
|
|
}
|
|
25% {
|
|
clip: rect(53px, 9999px, 54px, 0);
|
|
transform: skew(0.05deg);
|
|
}
|
|
30% {
|
|
clip: rect(84px, 9999px, 52px, 0);
|
|
transform: skew(0.94deg);
|
|
}
|
|
35% {
|
|
clip: rect(46px, 9999px, 7px, 0);
|
|
transform: skew(0.01deg);
|
|
}
|
|
40% {
|
|
clip: rect(2px, 9999px, 66px, 0);
|
|
transform: skew(0.66deg);
|
|
}
|
|
45% {
|
|
clip: rect(34px, 9999px, 33px, 0);
|
|
transform: skew(0.52deg);
|
|
}
|
|
50% {
|
|
clip: rect(80px, 9999px, 73px, 0);
|
|
transform: skew(0.9deg);
|
|
}
|
|
55% {
|
|
clip: rect(8px, 9999px, 81px, 0);
|
|
transform: skew(0.3deg);
|
|
}
|
|
60% {
|
|
clip: rect(10px, 9999px, 86px, 0);
|
|
transform: skew(0.85deg);
|
|
}
|
|
65% {
|
|
clip: rect(36px, 9999px, 25px, 0);
|
|
transform: skew(0.28deg);
|
|
}
|
|
70% {
|
|
clip: rect(75px, 9999px, 31px, 0);
|
|
transform: skew(0.46deg);
|
|
}
|
|
75% {
|
|
clip: rect(46px, 9999px, 87px, 0);
|
|
transform: skew(0.44deg);
|
|
}
|
|
80% {
|
|
clip: rect(19px, 9999px, 40px, 0);
|
|
transform: skew(0.07deg);
|
|
}
|
|
85% {
|
|
clip: rect(85px, 9999px, 88px, 0);
|
|
transform: skew(0.71deg);
|
|
}
|
|
90% {
|
|
clip: rect(1px, 9999px, 89px, 0);
|
|
transform: skew(0.76deg);
|
|
}
|
|
95% {
|
|
clip: rect(44px, 9999px, 25px, 0);
|
|
transform: skew(0.58deg);
|
|
}
|
|
100% {
|
|
clip: rect(31px, 9999px, 26px, 0);
|
|
transform: skew(0.6deg);
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-anim2 {
|
|
0% {
|
|
clip: rect(65px, 9999px, 65px, 0);
|
|
transform: skew(0.16deg);
|
|
}
|
|
5% {
|
|
clip: rect(8px, 9999px, 42px, 0);
|
|
transform: skew(0.65deg);
|
|
}
|
|
10% {
|
|
clip: rect(64px, 9999px, 30px, 0);
|
|
transform: skew(0.42deg);
|
|
}
|
|
15% {
|
|
clip: rect(29px, 9999px, 49px, 0);
|
|
transform: skew(0.05deg);
|
|
}
|
|
20% {
|
|
clip: rect(25px, 9999px, 56px, 0);
|
|
transform: skew(0.09deg);
|
|
}
|
|
25% {
|
|
clip: rect(76px, 9999px, 98px, 0);
|
|
transform: skew(0.79deg);
|
|
}
|
|
30% {
|
|
clip: rect(72px, 9999px, 3px, 0);
|
|
transform: skew(0.12deg);
|
|
}
|
|
35% {
|
|
clip: rect(20px, 9999px, 60px, 0);
|
|
transform: skew(0.09deg);
|
|
}
|
|
40% {
|
|
clip: rect(61px, 9999px, 47px, 0);
|
|
transform: skew(0.45deg);
|
|
}
|
|
45% {
|
|
clip: rect(29px, 9999px, 69px, 0);
|
|
transform: skew(0.09deg);
|
|
}
|
|
50% {
|
|
clip: rect(82px, 9999px, 96px, 0);
|
|
transform: skew(0.05deg);
|
|
}
|
|
55% {
|
|
clip: rect(33px, 9999px, 91px, 0);
|
|
transform: skew(0.16deg);
|
|
}
|
|
60% {
|
|
clip: rect(56px, 9999px, 23px, 0);
|
|
transform: skew(0.01deg);
|
|
}
|
|
65% {
|
|
clip: rect(46px, 9999px, 21px, 0);
|
|
transform: skew(0.89deg);
|
|
}
|
|
70% {
|
|
clip: rect(50px, 9999px, 1px, 0);
|
|
transform: skew(0.85deg);
|
|
}
|
|
75% {
|
|
clip: rect(82px, 9999px, 33px, 0);
|
|
transform: skew(0.87deg);
|
|
}
|
|
80% {
|
|
clip: rect(94px, 9999px, 46px, 0);
|
|
transform: skew(0.64deg);
|
|
}
|
|
85% {
|
|
clip: rect(48px, 9999px, 95px, 0);
|
|
transform: skew(0.43deg);
|
|
}
|
|
90% {
|
|
clip: rect(60px, 9999px, 10px, 0);
|
|
transform: skew(0.29deg);
|
|
}
|
|
95% {
|
|
clip: rect(85px, 9999px, 62px, 0);
|
|
transform: skew(0.66deg);
|
|
}
|
|
100% {
|
|
clip: rect(61px, 9999px, 58px, 0);
|
|
transform: skew(0.74deg);
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-skew {
|
|
0% {
|
|
transform: skew(-1deg);
|
|
}
|
|
10% {
|
|
transform: skew(0deg);
|
|
}
|
|
20% {
|
|
transform: skew(0.5deg);
|
|
}
|
|
30% {
|
|
transform: skew(-0.5deg);
|
|
}
|
|
40% {
|
|
transform: skew(0.2deg);
|
|
}
|
|
50% {
|
|
transform: skew(0deg);
|
|
}
|
|
60% {
|
|
transform: skew(-0.5deg);
|
|
}
|
|
70% {
|
|
transform: skew(0.8deg);
|
|
}
|
|
80% {
|
|
transform: skew(-0.2deg);
|
|
}
|
|
90% {
|
|
transform: skew(0.5deg);
|
|
}
|
|
100% {
|
|
transform: skew(0deg);
|
|
}
|
|
}
|
|
</style>
|