njpma/app/templates/fallback.html

92 lines
1.9 KiB
HTML
Raw Normal View History

2021-10-10 15:06:43 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: "wrong font";
src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff");
}
h1 {
font-family: "wrong font";
margin: auto;
font-weight: normal;
color: yellow;
font-size: 66px;
letter-spacing: 3px;
font-weight: bold;
}
h2 {
color: #6666ff;
font-family: "wrong font";
}
#box {
width: 100%;
height: 100vh;
display: flex;
text-align: center;
}
body {
font-family: "wrong font";
overflow: hidden;
background: black;
}
#shadowBox {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.2);
/* Black w/opacity/see-through */
border: 3px solid;
margin: auto;
}
.rainbow_text_animated {
background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow_animation 6s ease-in-out infinite;
background-size: 400% 100%;
}
.reflection {
transform: scaley(-1);
opacity: 0.3;
margin-top: -8px;
}
@keyframes rainbow_animation {
0%,100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
</style>
<title>phantas.ma</title>
</head>
<body>
<div id="box">
<div id="shadowBox">
<h1 class="rainbow rainbow_text_animated">Phantas.ma</h1>
<h2></h2>
</div>
</div>
<script>
2021-11-22 21:58:35 +00:00
document.location.href = '/'
2021-10-10 15:06:43 +00:00
path = document.location.pathname.slice(1)
if (path) {
2021-11-22 21:58:35 +00:00
document.querySelector('h1').innerHTML = 'njp.ma/' + path
2021-10-10 15:06:43 +00:00
if (path == 'polis') {
setTimeout(() => {
document.querySelector('h2').innerHTML = 'Oct 30, 2021 Mar 6, 2022'
})
}
}
</script>