furizon_webint/reg.furizon.net/index.html

148 lines
3.8 KiB
HTML

<html>
<head>
<title>Countdown to Furizon</title>
<link rel="preconnect" href="https://fonts.bunny.net">
<meta name="viewport" content="width=500rem" />
<link href="https://fonts.bunny.net/css?family=pt-serif-caption:400" rel="stylesheet" />
<meta property="og:title" content="Furizon Overlord · Booking">
<meta property="og:description" content="Acquista i biglietti per Furizon Overlord, la convention furry Italiana.">
<style>
*{margin:0;border:0;padding:0;}
body {
font-family: 'PT Serif Caption';
background: url('bg.jpg') center center no-repeat;
backdrop-filter: blur(5px);
background-color:#111;
height:100%;
}
@media screen and (min-width: calc(100vh * 1.406)) { /*1.406 is width/height of the image*/
.containedBg {
width: 100%;
height: 100%;
background: url('bg.jpg') center center no-repeat;
background-size: contain;
}
}
@media screen and (max-width: calc(100vh * 1.406)) and (min-width: calc(100vh * 0.706)) {
.containedBg {
width: 100%;
height: 100%;
background: url('bg.jpg') right center no-repeat;
background-size: cover;
}
}
@media screen and (max-width: calc(100vh * 0.706)) {
.containedBg {
width: 100%;
height: 100%;
background: url('bgVert.jpg') center center no-repeat;
background-size: contain;
}
}
img {
display:block;
height: 6rem;
margin: 0 auto;
}
main {
padding: 1em 0;
font-size: 1.2rem;
color: #fff;
width:100%;
box-sizing:border-box;
background:rgba(0,0,0,0.5);
text-align:center;
position:absolute;
top: 50%;
transform: translateY(-50%);
}
em {
color: #FCB53F;
font-size: 0.5em;
text-decoration:none;
}
main a {
font-size:1.6em;
margin-top: 0.5em;
color: #FCB53F;
background:#000;
border-radius: 5px;
text-decoration:none;
padding: 0.3em 0.6em;
display:inline-block;
transition: all 0.2s;
}
main a:hover {
background:#FCB53F;
color: #000;
}
span {
font-size: 2em;
}
#timer {display:block;max-width:30em;margin: 0 auto;}
#clock {display:block;}
</style>
</head>
<body>
<div class="containedBg"></div>
<main>
<div id="timer">
<img src="https://furizon.net/wp-content/uploads/2022/08/Logo_base_no_sfondoo_Furizon_1-1.png" />
<h2>Overlord Registration</h2>
<span id="clock">Enjoy furizon~</span>
<a id="button" href="https://reg.furizon.net/furizon/overlord/" style="display:none">Book now!</a>
</div>
</main>
<script>
// Set the date we're counting down to
var countDownDate = 1705143600 * 1000;
var now = new Date().getTime();
if(now <= countDownDate) {
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="timer"
document.getElementById("clock").innerHTML = days + "<em>d</em> " + hours + "<em>h</em> "
+ minutes + "<em>m</em> " + seconds + "<em>s</em>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("button").style.display = 'block';
document.getElementById("clock").style.display = 'none';
}
}, 1000);
} else {
document.getElementById("button").style.display = 'block';
document.getElementById("clock").style.display = 'none';
}
</script>
</body>
</html>