first commit
This commit is contained in:
MCHost
221
404.txt
Normal file
221
404.txt
Normal file
@ -0,0 +1,221 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>My-MC.LINK - Peer Not Found! </title>
|
||||
<link rel="canonical" href="https://codepen.io/ricardpriet/pen/zPqyvY">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
|
||||
@import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');
|
||||
.error-container {
|
||||
text-align: center;
|
||||
font-size: 180px;
|
||||
font-family: 'Catamaran', sans-serif;
|
||||
font-weight: 800;
|
||||
margin: 20px 15px;
|
||||
}
|
||||
.error-container > span {
|
||||
display: inline-block;
|
||||
line-height: 0.7;
|
||||
position: relative;
|
||||
color: #FFB485;
|
||||
}
|
||||
.error-container > span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.error-container > span:nth-of-type(1) {
|
||||
color: #D1F2A5;
|
||||
animation: colordancing 4s infinite;
|
||||
}
|
||||
.error-container > span:nth-of-type(3) {
|
||||
color: #F56991;
|
||||
animation: colordancing2 4s infinite;
|
||||
}
|
||||
.error-container > span:nth-of-type(2) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.error-container > span:nth-of-type(2):before,
|
||||
.error-container > span:nth-of-type(2):after {
|
||||
border-radius: 0%;
|
||||
content:"";
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: inherit; height: inherit;
|
||||
border-radius: 999px;
|
||||
box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
|
||||
inset 0 30px 0 rgba(239, 250, 180, 0.4),
|
||||
inset -30px 0 0 rgba(255, 196, 140, 0.4),
|
||||
inset 0 -30px 0 rgba(245, 105, 145, 0.4);
|
||||
animation: shadowsdancing 4s infinite;
|
||||
}
|
||||
.error-container > span:nth-of-type(2):before {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.screen-reader-text {
|
||||
position: absolute;
|
||||
top: -9999em;
|
||||
left: -9999em;
|
||||
}
|
||||
@keyframes shadowsdancing {
|
||||
0% {
|
||||
box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
|
||||
inset 0 30px 0 rgba(239, 250, 180, 0.4),
|
||||
inset -30px 0 0 rgba(255, 196, 140, 0.4),
|
||||
inset 0 -30px 0 rgba(245, 105, 145, 0.4);
|
||||
}
|
||||
25% {
|
||||
box-shadow: inset 30px 0 0 rgba(245, 105, 145, 0.4),
|
||||
inset 0 30px 0 rgba(209, 242, 165, 0.4),
|
||||
inset -30px 0 0 rgba(239, 250, 180, 0.4),
|
||||
inset 0 -30px 0 rgba(255, 196, 140, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: inset 30px 0 0 rgba(255, 196, 140, 0.4),
|
||||
inset 0 30px 0 rgba(245, 105, 145, 0.4),
|
||||
inset -30px 0 0 rgba(209, 242, 165, 0.4),
|
||||
inset 0 -30px 0 rgba(239, 250, 180, 0.4);
|
||||
}
|
||||
75% {
|
||||
box-shadow: inset 30px 0 0 rgba(239, 250, 180, 0.4),
|
||||
inset 0 30px 0 rgba(255, 196, 140, 0.4),
|
||||
inset -30px 0 0 rgba(245, 105, 145, 0.4),
|
||||
inset 0 -30px 0 rgba(209, 242, 165, 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
|
||||
inset 0 30px 0 rgba(239, 250, 180, 0.4),
|
||||
inset -30px 0 0 rgba(255, 196, 140, 0.4),
|
||||
inset 0 -30px 0 rgba(245, 105, 145, 0.4);
|
||||
}
|
||||
}
|
||||
@keyframes colordancing {
|
||||
0% {
|
||||
color: #D1F2A5;
|
||||
}
|
||||
25% {
|
||||
color: #F56991;
|
||||
}
|
||||
50% {
|
||||
color: #FFC48C;
|
||||
}
|
||||
75% {
|
||||
color: #EFFAB4;
|
||||
}
|
||||
100% {
|
||||
color: #D1F2A5;
|
||||
}
|
||||
}
|
||||
@keyframes colordancing2 {
|
||||
0% {
|
||||
color: #FFC48C;
|
||||
}
|
||||
25% {
|
||||
color: #EFFAB4;
|
||||
}
|
||||
50% {
|
||||
color: #D1F2A5;
|
||||
}
|
||||
75% {
|
||||
color: #F56991;
|
||||
}
|
||||
100% {
|
||||
color: #FFC48C;
|
||||
}
|
||||
}
|
||||
|
||||
/* demo stuff */
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background-color: #416475;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
html, button, input, select, textarea {
|
||||
font-family: 'Montserrat', Helvetica, sans-serif;
|
||||
color: #92a4ad;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px 15px;
|
||||
}
|
||||
.zoom-area {
|
||||
max-width: 550px;
|
||||
margin: 30px auto 30px;
|
||||
font-size: 19px;
|
||||
text-align: center;
|
||||
}
|
||||
.link-container {
|
||||
text-align: center;
|
||||
}
|
||||
a.more-link {
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
background-color: #92a4ad;
|
||||
padding: 10px 15px;
|
||||
border-radius: 0;
|
||||
color: #416475;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
margin-top: 50px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.console = window.console || function(t) {};
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const errorMessages = [
|
||||
"Whoopsie daisy! Our code took a coffee break.",
|
||||
"Houston, we have a problem...with our code.",
|
||||
"Error 404: Sense of Direction Not Found.",
|
||||
"Looks like our code is doing the electric slide...backward.",
|
||||
"Oops! Did someone trip over the server cable again?",
|
||||
"404 Error: Wit Not Found. Please try again later.",
|
||||
"This wasn't in the developer manual!",
|
||||
"Well, that's a funny way to say 'Hello, World!'",
|
||||
"Looks like our code decided to go on a spontaneous vacation.",
|
||||
"Hold on tight, we're experiencing technical turbulence.",
|
||||
"Error 101: Gremlins in the System.",
|
||||
"If at first you don't succeed, call IT support.",
|
||||
"Congratulations! You've found the hidden feature...of bugs.",
|
||||
"Looks like our code got lost in translation.",
|
||||
"Abandon hope, all ye who debug here.",
|
||||
"Error 418: I'm a teapot. But seriously, something's wrong.",
|
||||
"Well, this is awkward...even for code.",
|
||||
"Have you tried turning it off and on again? No, seriously.",
|
||||
"Error 505: Brain.exe has stopped responding.",
|
||||
"Looks like our code took a wrong turn at Albuquerque."];
|
||||
let currentMessageIndex = 0;
|
||||
const errorMessageElement = document.getElementById('error-message');
|
||||
setInterval(() => {
|
||||
currentMessageIndex = (currentMessageIndex + 1) % errorMessages.length;
|
||||
errorMessageElement.textContent = errorMessages[currentMessageIndex];
|
||||
}, 3000); // Change message every 5 seconds
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body translate="no">
|
||||
<h1 id="error-message">Look's like we did not get that quite right... </h1>
|
||||
<p class="zoom-area"><b>Routing Error: Invalid hash or connection timeout.</b><BR>Please reset your link and try again. </p>
|
||||
<section class="error-container">
|
||||
<span>4</span>
|
||||
<span><span class="screen-reader-text">0</span></span>
|
||||
<span>4</span>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user