website/layouts/countdown/list.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 }}