@RenderBody() diff --git a/src/img/us-flag-cover_512x166.png b/src/img/us-flag-cover_512x166.png new file mode 100644 index 0000000..f7841e9 Binary files /dev/null and b/src/img/us-flag-cover_512x166.png differ diff --git a/src/scss/app.scss b/src/scss/app.scss index 19d9315..c76825c 100644 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -188,7 +188,7 @@ article { img { transform: scale(110%); } - + p.project-title { font-size: 1.2em; margin: calc(-35px - .2em) 0 0; @@ -358,4 +358,18 @@ table.reading-list { td.trim-p p:last-child { margin-bottom: 0; +} + +#usa-countdown { + background-image: url('/img/us-flag-cover_512x166.png'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + p { + text-align: center; + font-size: 3em; + margin: 0; + padding: 0; + } } \ No newline at end of file diff --git a/src/ts/app.ts b/src/ts/app.ts index 3daa3f2..82fee4b 100644 --- a/src/ts/app.ts +++ b/src/ts/app.ts @@ -97,4 +97,22 @@ declare const Prism: any; } UI.updateUI(); + + setInterval(() => { + const countdown = document.querySelector("#usa-countdown p"); + const start = new Date().getTime(); + const end = Date.UTC(2024, 2, 7, 13, 20); + const diff = end - start; + let days = Math.floor(diff / (1000 * 60 * 60 * 24)); + let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); + let seconds = Math.floor((diff % (1000 * 60)) / 1000); + + if (days < 0) days = 0 + if (hours < 0) hours = 0; + if (minutes < 0) minutes = 0; + if (seconds < 0) seconds = 0; + + countdown.innerHTML = `${days.toString().padStart(2, '0')} : ${hours.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')}`; + }, 1000); })();