112 lines
2.7 KiB
HTML
112 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Redirecting</title>
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Arcade Classic';
|
|
src:
|
|
url('/fonts/arcadeclassic.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
body,
|
|
.announcement {
|
|
position: absolute;
|
|
inset: 0px;
|
|
background: black;
|
|
font-family: sans-serif;
|
|
word-spacing: 5px;
|
|
}
|
|
|
|
.announcement {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
color: white;
|
|
}
|
|
|
|
.blink {
|
|
font-size: 30px;
|
|
animation: blink 1s infinite;
|
|
max-width: min(80%, 500px);
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
margin: 0px;
|
|
font-family: 'Arcade Classic';
|
|
}
|
|
|
|
.red {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.green {
|
|
color: #52ff2f;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="announcement">
|
|
|
|
<p class="red blink">Either you are not connected to the .play.morphix.tv wifi network.</p>
|
|
<p class="red blink">or your device handles the request not as expected.</p>
|
|
<br>
|
|
<p class="green" style="font-size: 20px">we will redirect you</p>
|
|
<p class="green" style="font-size: 20px" id="counter">in <span class="seconds">5</span> seconds</p>
|
|
<br>
|
|
<p class="green">If the redirect fails:</p>
|
|
<p class="green">Connect to the</p>
|
|
<p class="red">'.play.morphix.tv'</p>
|
|
<p class="green">Wifi network with password</p>
|
|
<p class="red">'pluk&play'</p>
|
|
<p class="green">and visit</p>
|
|
<p class="red">play.morphix.tv</p>
|
|
<p class="green">again to join the game</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
const target = 'http://10.99.10.10'
|
|
var counter = 5;
|
|
var timer = setInterval(() => {
|
|
counter--;
|
|
document.querySelector('.seconds').innerText = counter;
|
|
|
|
if (counter == 0) {
|
|
clearInterval(timer);
|
|
window.location.href = `${target}${window.location.pathname + window.location.search}`
|
|
}
|
|
}, 1000)
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |