Web/404.html

89 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="icon" href="favicon.ico">
<style>
body {
font-family: Roboto;
background-color: #383838;
}
.content {
color: white;
position: absolute;
text-align: center;
left: 50%;
top: 40%;
transform: translate(-50%, -60%);
}
.disclaimer {
position: absolute;
bottom: 10px;
right: 10px;
color: gray;
}
a {
color: #8db3f4;
text-decoration: none;
}
.email {
color: #6c767c;
}
.go-home {
margin-top: 25px;
}
</style>
</head>
<body>
<div class="content">
<h1>Four Oh Four</h1>
<p>
There's nothing here, I'm sorry.
</p>
<p>
<span id="message"></span>
<script>
const messages = [
'Maybe try a different place?',
'Do you want to know a secret?',
'This is a magical place',
'What were you trying to find?',
'Now my day is ruined',
'There\'s a place like this somewhere',
'I shall overcome this obstacle.',
'Why are you like this?',
'this is so sad alexa play despacito',
'The server is at a loss for what you were trying to find',
'oh no :(',
'The world is quiet here.',
"Instructions unclear, got site stuck in debug mode",
"Please fix",
"If we get this video to 400 likes, I'll put the site back up",
"how could this happen to me"
];
let message = Math.floor(Math.random() * messages.length);
document.getElementById('message').innerHTML = '<em>' + messages[message] + '</em>';
</script>
</p>
<p class="go-home">
<a href="https://ellpeck.de">Go home</a>
</p>
</div>
<div class="disclaimer">
<em>If you think there should be something here, please notify me at <a class="email" href="mailto:me@ellpeck.de">me@ellpeck.de</a>.</em>
</div>
</body>
</html>