etoiledebethleem/website
3
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Activity Actions

feat(countdown): add countdown page

Browse source
This commit is contained in:
Matthieu Bessat 2023-07-06 22:21:40 +02:00
parent 1cdbe6ad13
commit cea3b2f98b
7 changed files with 320 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
layouts/_default/baseof.html
View file

@ -7,9 +7,13 @@
</head>
<body>
<div class="footer-push">
{{ partial "header" . }}
{{ block "main" . }}{{ end }}
{{ if or (not (isset .Params "with_header")) .Params.with_header }}
{{ partial "header" . }}
{{ end }}
{{ block "main" . }}{{ end }}
</div>
{{ partial "footer" . }}
{{ if or (not (isset .Params "with_footer")) .Params.with_footer }}
{{ partial "footer" . }}
{{ end }}
</body>
</html>

93
layouts/countdown/list.html Normal file
View file

@ -0,0 +1,93 @@
{{ 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']
function render() {
let duration = luxon.DateTime.now().diff(luxon.DateTime.utc(2023, 7, 14, 10, 0, 0), components)
console.log(duration.values)
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 }}