100 lines
4.2 KiB
HTML
100 lines
4.2 KiB
HTML
{{ define "main" }}
|
|
<div class="countdown-page">
|
|
<div class="accent-band">
|
|
</div>
|
|
|
|
<div class="launch-logo-back">
|
|
{{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent") }}
|
|
</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)
|
|
|
|
function render() {
|
|
let now = luxon.DateTime.now()
|
|
let duration = now.diff(target, components)
|
|
console.debug(duration.values)
|
|
|
|
if (target < now) {
|
|
console.log("COUNTDOWN: Target reached!")
|
|
document.location = document.location.origin + "/adhesion"
|
|
}
|
|
|
|
components.forEach(key => {
|
|
document.getElementById(key).innerText = (-duration.values[key]).toString().split(".")[0].padStart(2, "0")
|
|
|
|
// test with random values
|
|
// document.getElementById(key).innerText = (Math.floor(Math.random() * 99)).toString().split(".")[0].padStart(2, "0")
|
|
})
|
|
}
|
|
|
|
render()
|
|
setInterval(() => {
|
|
render()
|
|
}, 1000)
|
|
</script>
|
|
{{ end }}
|
|
|