collin/collinenlucy.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding a countdown to the homepage

Browse source
This commit is contained in:
collin 2026-03-23 14:46:56 +01:00
parent 7742bf21bf
commit 7146046ee0
No known key found for this signature in database
2 changed files with 67 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
client/index.html
View file

@ -1,47 +1,57 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<h1 class="title fontXL textCenter backgroundLightGreen colorWhite">Collin and Lucy's Wedding</h1>
<div class="contents fontM">
<a class="rsvpButton backgroundLightGreen hidden" href="/rsvp">
<div class="textCenter">
<p class="colorWhite">
RSVP
</p>
</div>
</a>
<div>
<h2 class="textLeft fontL colorLightGreen">When?</h2>
<p>Saturday 16th of May 2026</p>
<br/> <head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<h3 class="colorLightGreen fontM">Agenda</h3> <body>
<ul> <h1 class="title fontXL textCenter backgroundLightGreen colorWhite">Collin and Lucy's Wedding</h1>
<li>14:30 - Guests arrive</li> <div class="contents fontM">
<li>15:00 - Ceremony</li> <a class="rsvpButton backgroundLightGreen hidden" href="/rsvp">
<li>15:30 - Reception</li> <div class="textCenter">
<li>18:30 - Dinner</li> <p class="colorWhite">
</ul> RSVP
</p>
<br/>
<h2 class="textLeft colorLightGreen fontL">Where?</h2>
<a href="https://www.broekerhuis.nl/">
<p>
Het Broeker Huis <br/>
Leeteinde 16 <br/>
1151AK Broek in Waterland
</p>
</a>
<br/>
<iframe class="map" src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668" style="border: 1px solid black"></iframe><br/>
<a href="https://www.openstreetmap.org/node/2869212621"><h5 class="fontS">Open Map</h5></a>
</div> </div>
</a>
<div>
<h2 class="textLeft fontL colorLightGreen">When?</h2>
<p>Saturday 16th of May 2026</p>
<b>
<p id="countdown"></p>
</b>
<br />
<h3 class="colorLightGreen fontM">Agenda</h3>
<ul>
<li>14:30 - Guests arrive</li>
<li>15:00 - Ceremony</li>
<li>15:30 - Reception</li>
<li>18:30 - Dinner</li>
</ul>
<br />
<h2 class="textLeft colorLightGreen fontL">Where?</h2>
<a href="https://www.broekerhuis.nl/">
<p>
Het Broeker Huis <br />
Leeteinde 16 <br />
1151AK Broek in Waterland
</p>
</a>
<br />
<iframe class="map"
src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668"
style="border: 1px solid black"></iframe><br />
<a href="https://www.openstreetmap.org/node/2869212621">
<h5 class="fontS">Open Map</h5>
</a>
</div> </div>
<script src="/index.js"></script> </div>
</body> <script src="/index.js"></script>
</body>
</html> </html>

17
client/index.js
View file

@ -8,10 +8,27 @@ function hasRsvped() {
return cookies[COOKIE_NAME] === "true"; return cookies[COOKIE_NAME] === "true";
} }
function padTime(t) {
return `${t}`.padStart(2, '0');
}
function updateCountdown() {
const countdownDate = new Date("2026-05-16T14:30:00.000+02:00");
const now = new Date();
const msRemaining = countdownDate.getTime() - now.getTime();
const daysRemaining = Math.floor(msRemaining / (1000 * 60 * 60 * 24));
const hoursRemaining = Math.floor(msRemaining / (1000 * 60 * 60)) % 24;
const minutesRemaining = Math.floor(msRemaining / (1000 * 60)) % 60;
const secondsRemaining = Math.floor(msRemaining / 1000) % 60;
const countdownNode = document.getElementById("countdown");
countdownNode.innerText = `${daysRemaining} days ${padTime(hoursRemaining)}:${padTime(minutesRemaining)}:${padTime(secondsRemaining)}`;
}
window.onload = function () { window.onload = function () {
if (!hasRsvped()) { if (!hasRsvped()) {
const rsvpButton = document.querySelector(".rsvpButton"); const rsvpButton = document.querySelector(".rsvpButton");
rsvpButton.classList.remove("hidden"); rsvpButton.classList.remove("hidden");
} }
updateCountdown();
window.setInterval(updateCountdown, 500);
}; };