221 lines
5.8 KiB
Plaintext
221 lines
5.8 KiB
Plaintext
|
|
<!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> |