<!DOCTYPE html>
<html>
<head>
<title>G2's Website | 404 - Not Found</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
@import url('/assets/fonts/fonts.css');
* {
margin: 0;
box-sizing: border-box;
}
::selection {
color: #1e1e2e;
background-color: #a6e3a1;
}
body {
height: 100vh;
width: 100vw;
display: flex;
background-color: #111114;
color: white;
font-family: 'Roboto', 'Noto Sans', sans-serif;
font-size: 16pt;
overflow: hidden;
}
main {
max-width: 100vw;
max-height: 100vh;
margin: auto;
}
h1 {
font-size: 10em;
text-align: center;
}
h3 {
font-weight: 500;
margin: 0 10px;
text-align: center;
}
p {
margin: auto;
padding: 0 5px;
text-align: center;
max-width: 540px;
opacity: 0;
overflow: hidden;
text-overflow: ellipsis;
}
a {
text-decoration: none;
}
a:link {
color: DeepSkyBlue;
}
a:visited {
color: #7289DA;
}
a:hover {
color: DarkTurquoise;
}
hr {
margin: 20px 10px;
color: #f9e2af;
}
button {
width: 75%;
margin: 20px auto;
position: relative;
display: block;
font-size: 18pt;
font-weight: bold;
padding: 10px 0;
border-radius: 2em;
border: 2px solid #74c7ec;
background-color: #74c7ec;
color: #2C2F33;
transition-duration: 500ms;
cursor: pointer;
}
button:hover {
background-color: transparent;
color: #74c7ec;
}
button:hover::before, button:hover::after {
content: '↜';
position: absolute;
left: 25%;
animation-duration: 1s;
animation-name: slideright;
animation-fill-mode: forwards;
}
button:hover::after {
left: unset;
right: 25%;
}
button:active {
background-color: #74c7ec55;
color: #7dd8ff;
}
.text-box {
display: flex;
flex-direction: column;
height: 4em;
}
.slide-up {
animation-duration: 1s;
animation-name: slideup;
animation-fill-mode: forwards;
position: relative;
display: block;
}
.fade-in {
animation-duration: 1s;
animation-name: fadein;
animation-fill-mode: forwards;
position: relative;
display: block;
}
.cat {
position: absolute;
top: 31px;
left: calc(50% - 1px);
transform: translatex(-50%);
}
#cookies {
font-weight: bold;
}
@keyframes slideright {
from {
transform: translatex(100%);
opacity: 0;
}
to {
transform: translatey(0%);
opacity: 1;
}
}
@keyframes slideup {
from {
transform: translatey(100%);
opacity: 0;
}
to {
transform: translatey(0%);
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<main class="fade-in">
<div style="position:relative;display: flex;justify-content: center;">
<h1>404</h1>
<img class="cat" style="display:none;" id="cat" src="/assets/images/cat.png">
</div>
<h3 id="notFound">The page you requested could not be found.</h3>
<hr>
<div class="text-box">
<p id="message" class="slide-up"><i>A message was here<br>But sometimes, without warning<br>javascript will fail</i></p>
</div>
<a href="/"><button>Home</button></a>
</main>
</body>
<script>
// Eat the cookies you have
function eatCookie() {
let numCookies = localStorage.getItem('cookies') || 0;
if (numCookies >= 1) numCookies--;
document.getElementById("cookies").innerHTML = numCookies;
localStorage.setItem('cookies', numCookies);
console.log(numCookies);
}
let time = new Date();
let timePrefix = "";
if (time.getMinutes() >= 40){
time = new Date(Date.now() + 1 * 60 * 60 * 1000);
timePrefix = "almost";
}
currentTime = time.toLocaleString('en-US', { hour: 'numeric', hour12: true })
// Get cookies
let cookiesRecieved = localStorage.getItem('cookies') || 0;
cookiesRecieved++;
let s = "s";
if (cookiesRecieved == 1) {
s = "";
}
const strings = [
"Don't feel bad, have a cookie:</i> 🍪<i><br><sub>You have <span id='cookies'>" + cookiesRecieved + "</span> cookie" + s + "!</sub><br><sup><a style='cursor:pointer;color:teal;' onclick='eatCookie()'>Eat Cookie</a></sup>",
"Just think, it could be worse",
"Instead of staring at this page, you could go outside!",
"Where did it go?",
"Error reduces<br>Your expensive computer<br>To a simple stone.",
"Sit back, relax, have some tea...</i> 🍵<i>",
"Where has the time gone, it's " + timePrefix + " <b>" + currentTime + "</b> already!",
"Where has the time gone, it's </i><currentTime><i> already!",
"This message brought to you by JavaScript!",
"This is not the page you are looking for.",
"Go check out <a href='https://xkcd.com/'>xkcd</a> instead!",
"Won't you please observe<br>A brief moment of silence<br>For the dead server?",
"Let's get you home, son",
"Nya~~!"
];
let messageIndex = Math.floor(Math.random() * strings.length);
const message = strings[messageIndex];
const messageTarget = document.getElementById("message");
messageTarget.innerHTML = "<i>" + message + "</i>";
console.log(messageIndex);
if (messageIndex == 0) {
localStorage.setItem('cookies', cookiesRecieved);
} else if (message == "Nya~~!") {
document.getElementById("cat").style.display = "block";
document.getElementById("notFound").innerHTML = "The page you requested could <i>nyot</i> be found.";
}
</script>
</html>