<!DOCTYPE html>
<html>
<head>
<title>Days Until Counter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.counter.dev/script.js" data-id="d5378282-a7bf-4de1-b215-693a25f3b961" data-utcoffset="2"></script>
<link rel="icon" type="image/x-icon" href="/images/until.jpg">
<meta name="description" content="A simple web app that counts down the days until a selected date.">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
text-align: center;
margin-top: 50px;
}
label {
font-size: 18px;
font-weight: bold;
display: block;
margin: 20px 0;
}
input[type="date"] {
font-size: 18px;
padding: 8px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
width: 100%;
max-width: 400px;
}
button {
background-color: #008CBA;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s;
}
button:hover {
background-color: #005b80;
}
#result {
font-size: 20px;
text-align: center;
margin-top: 50px;
}
#result p {
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Days Until Counter</h1>
<label for="date-input">Select a date:</label>
<input type="date" id="date-input">
<div id="result"></div>
<button onclick="copyLink()">Share</button><script>
function calculateDaysUntil() {
const selectedDate = new Date(document.getElementById("date-input").value);
const timeDiff = selectedDate.getTime() - new Date().getTime();
// Convert the time difference into years, months, weeks, days, hours, minutes, and seconds
const milliseconds = timeDiff % 1000;
const seconds = Math.floor(timeDiff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const weeks = Math.floor(days / 7);
const months = Math.floor(days / 30);
const years = Math.floor(days / 365);
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `
<p>${years} years, ${months % 12} months, ${days % 30} days, ${hours % 24} hours, ${minutes % 60} minutes, ${seconds % 60}.${milliseconds % 100} seconds, until ${selectedDate.toDateString()}.</p>
`;
}
function copyLink() {
const currentUrl = window.location.href;
const selectedDate = document.getElementById("date-input").value;
// Generate the link with the selected date as a query parameter
const link = `${currentUrl}?date=${selectedDate}`;
// Copy the link to the clipboard
navigator.clipboard.writeText(link).then(() => {
alert("Link copied to clipboard!");
});
}
const urlParams = new URLSearchParams(window.location.search);
const dateParam = urlParams.get('date');
if (dateParam) {
document.getElementById("date-input").value = dateParam;
}
calculateDaysUntil();
setInterval(calculateDaysUntil, 100);
</script>
</body>
</html>