156 lines
4.5 KiB
HTML
156 lines
4.5 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>
|
|
function getTimeSince(dateString) {
|
|
// Parse the input date string into a Date object
|
|
const startDate = new Date(dateString);
|
|
|
|
// Get the current date
|
|
const currentDate = new Date();
|
|
|
|
// Calculate the differences in each unit
|
|
let years = currentDate.getFullYear() - startDate.getFullYear();
|
|
let months = currentDate.getMonth() - startDate.getMonth();
|
|
let days = currentDate.getDate() - startDate.getDate();
|
|
let hours = currentDate.getHours() - startDate.getHours();
|
|
let minutes = currentDate.getMinutes() - startDate.getMinutes();
|
|
let seconds = currentDate.getSeconds() - startDate.getSeconds();
|
|
|
|
// Adjust for negative month difference
|
|
if (months < 0) {
|
|
years--;
|
|
months += 12;
|
|
}
|
|
|
|
// Adjust for negative day difference
|
|
if (days < 0) {
|
|
months--;
|
|
let prevMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
|
|
days += prevMonth;
|
|
}
|
|
|
|
// Adjust for negative hour difference
|
|
if (hours < 0) {
|
|
days--;
|
|
hours += 24;
|
|
}
|
|
|
|
// Adjust for negative minute difference
|
|
if (minutes < 0) {
|
|
hours--;
|
|
minutes += 60;
|
|
}
|
|
|
|
// Adjust for negative second difference
|
|
if (seconds < 0) {
|
|
minutes--;
|
|
seconds += 60;
|
|
}
|
|
|
|
return {
|
|
years: years,
|
|
months: months,
|
|
days: days,
|
|
hours: hours,
|
|
minutes: minutes,
|
|
seconds: seconds
|
|
};
|
|
}
|
|
|
|
function updateHtml() {
|
|
var result = getTimeSince("Nov 1, 2021 16:43:22")
|
|
const timerElement = document.getElementById("timer")
|
|
timerElement.innerHTML = `${result.years} Years, ${result.months} Months, ${result.days} Days,<br/> ${result.hours} Hours, ${result.minutes} Minutes, ${result.seconds} Seconds`
|
|
}
|
|
|
|
updateHtml()
|
|
|
|
var x = setInterval(updateHtml, 999);
|
|
</script>
|
|
|
|
</html>
|