120 lines
3.6 KiB
HTML
120 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset='utf-8'>
|
||
|
|
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||
|
|
<title>Adoras HRT 🏳️⚧️</title>
|
||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||
|
|
|
||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||
|
|
<link rel="manifest" href="/site.webmanifest">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@font-face {
|
||
|
|
font-display: swap;
|
||
|
|
font-family: 'Poppins';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url('poppins-v20-latin-regular.woff2') format('woff2');
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Poppins';
|
||
|
|
background-image: url("bgimage.webp");
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-attachment: fixed;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: white;
|
||
|
|
text-shadow: deeppink 1px 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
color: #000;
|
||
|
|
text-align: center;
|
||
|
|
backdrop-filter: blur(25px);
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-container {
|
||
|
|
margin: auto;
|
||
|
|
padding: 0 15px;
|
||
|
|
border-radius: 30px;
|
||
|
|
width: fit-content;
|
||
|
|
text-align: center;
|
||
|
|
backdrop-filter: blur(25px);
|
||
|
|
font-size: 2em;
|
||
|
|
color: white;
|
||
|
|
text-shadow: deeppink 1px 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#timer {
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer>div {
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="time-container">
|
||
|
|
<div class="timer-label">🏳️⚧️ Adoras Time On HRT 🏳️⚧️</div>
|
||
|
|
<p id="timer"></p>
|
||
|
|
</div>
|
||
|
|
<footer>
|
||
|
|
<div class="mention">
|
||
|
|
Photo by <a href="https://unsplash.com/@robmaxwell">Rob Maxwell</a> on <a
|
||
|
|
href="https://unsplash.com/photos/a-rainbow-flag-flying-high-in-the-sky-AO3YjzAU4EE">Unsplash</a>
|
||
|
|
</div>
|
||
|
|
<div>© by <a href="https://adora.codes/">Adora Laura Kalb</a></div>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
// Set the date we're counting up from
|
||
|
|
const countUpDate = new Date("Nov 1, 2021 16:00:00").getTime();
|
||
|
|
const timerElement = document.getElementById("timer")
|
||
|
|
|
||
|
|
function updateHtml() {
|
||
|
|
// Get today's date and time
|
||
|
|
var now = new Date().getTime();
|
||
|
|
|
||
|
|
// Find the distance between now and the count up date
|
||
|
|
var distance = now - countUpDate;
|
||
|
|
|
||
|
|
// Time calculations for days, hours, minutes and seconds
|
||
|
|
var years = Math.floor(distance / (1000 * 60 * 60 * 24 * 365));
|
||
|
|
var days = Math.floor(distance % (1000 * 60 * 60 * 24 * 365) / (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"
|
||
|
|
timerElement.innerHTML = years + "y " + days + "d " + hours + "h "
|
||
|
|
+ minutes + "m " + seconds + "s";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
updateHtml()
|
||
|
|
|
||
|
|
// Update the count down every 1 second
|
||
|
|
var x = setInterval(updateHtml, 1000);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|