Web/404.html
2018-08-15 23:27:17 +02:00

70 lines
No EOL
2 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: #6c767c;
text-decoration: none;
}
</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 :('
];
let message = Math.floor(Math.random() * messages.length);
document.getElementById('message').innerHTML = '<em>' + messages[message] + '</em>';
</script>
</p>
</div>
<div class="disclaimer">
<em>If you think there should be something here, please notify me at <a href="mailto:me@ellpeck.de">me@ellpeck.de</a>.</em>
</div>
</body>
</html>