add files
3
README.md
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
# hrt-timer
|
||||||
|
|
||||||
|
https://hrt.adora.codes
|
BIN
android-chrome-192x192.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
android-chrome-512x512.png
Normal file
After Width: | Height: | Size: 9.7 KiB |
BIN
apple-touch-icon.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
bgimage.webp
Normal file
After Width: | Height: | Size: 208 KiB |
BIN
favicon-16x16.png
Normal file
After Width: | Height: | Size: 187 B |
BIN
favicon-32x32.png
Normal file
After Width: | Height: | Size: 313 B |
BIN
favicon.ico
Normal file
After Width: | Height: | Size: 15 KiB |
120
index.html
Normal file
|
@ -0,0 +1,120 @@
|
||||||
|
<!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>
|
BIN
poppins-v20-latin-regular.woff2
Normal file
1
site.webmanifest
Normal file
|
@ -0,0 +1 @@
|
||||||
|
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|