website/layouts/countdown/list.html

101 lines
4.2 KiB
HTML
Raw Permalink Normal View History

2023-07-06 20:21:40 +00:00
{{ define "main" }}
<div class="countdown-page">
<div class="accent-band">
</div>
<div class="launch-logo-back">
2023-07-14 13:24:20 +00:00
{{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent") }}
2023-07-06 20:21:40 +00:00
</div>
<div class="h-100">
<div class="countdown-page__content__container">
<div class="countdown-page__content">
<div class="countdown__container">
<div class="launch-introduction">
<div>Lancement de la campagne d'adhésion dans...</div>
</div>
<div class="countdown__content">
<div class="timer__element days">
<div class="timer__value" id="days"></div>
<div class="timer__label">jours</div>
</div>
<div class="timer__element timer__separator">
<div class="timer__value">:</div>
<div class="timer__label">0</div>
</div>
<div class="timer__element hours">
<div class="timer__value" id="hours"></div>
<div class="timer__label">heures</div>
</div>
<div class="timer__element timer__separator">
<div class="timer__value">:</div>
<div class="timer__label">0</div>
</div>
<div class="timer__element minutes">
<div class="timer__value" id="minutes"></div>
<div class="timer__label">minutes</div>
</div>
<div class="timer__element timer__separator">
<div class="timer__value">:</div>
<div class="timer__label">0</div>
</div>
<div class="timer__element seconds">
<div class="timer__value" id="seconds"></div>
<div class="timer__label">secondes</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="countdown-footer">
<div class="page-container">
<div class="countdown-footer__logo">
{{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent") }}
</div>
<div class="socials">
<a href="{{ .Site.Params.socials.facebook }}" class="social-item" aria-label="Groupe facebook">
<div class="social-text">
Retrouvez nous sur facebook
</div>
<div class="social-icon">
{{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo") }}
</div>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.3.0/luxon.min.js" integrity="sha512-KKbQg5o92MwtJKR9sfm/HkREzfyzNMiKPIQ7i7SZOxwEdiNCm4Svayn2DBq7MKEdrqPJUOSIpy1v6PpFlCQ0YA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const components = ['days', 'hours', 'minutes', 'seconds']
// to test: const target = luxon.DateTime.now().plus(luxon.Duration.fromISO("PT10S"))
const target = luxon.DateTime.utc(2023, 7, 14, 10, 0, 0)
2023-07-06 20:21:40 +00:00
function render() {
let now = luxon.DateTime.now()
let duration = now.diff(target, components)
console.debug(duration.values)
2023-07-06 20:21:40 +00:00
if (target < now) {
console.log("COUNTDOWN: Target reached!")
document.location = document.location.origin + "/adhesion"
}
2023-07-06 20:21:40 +00:00
components.forEach(key => {
document.getElementById(key).innerText = (-duration.values[key]).toString().split(".")[0].padStart(2, "0")
2023-07-06 20:21:40 +00:00
// test with random values
// document.getElementById(key).innerText = (Math.floor(Math.random() * 99)).toString().split(".")[0].padStart(2, "0")
})
}
2023-07-06 20:21:40 +00:00
render()
setInterval(() => {
render()
}, 1000)
2023-07-06 20:21:40 +00:00
</script>
{{ end }}