feat(countdown): add countdown page
This commit is contained in:
parent
1cdbe6ad13
commit
cea3b2f98b
7 changed files with 320 additions and 3 deletions
205
assets/sass/countdown.scss
Normal file
205
assets/sass/countdown.scss
Normal file
|
|
@ -0,0 +1,205 @@
|
||||||
|
.countdown-page {
|
||||||
|
background-color: $background;
|
||||||
|
color: white;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-page__content__container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-page__content {
|
||||||
|
margin-top: -5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-band {
|
||||||
|
background-color: $accent;
|
||||||
|
height: 1.5vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.launch-logo-back {
|
||||||
|
margin-top: -1.8rem;
|
||||||
|
|
||||||
|
opacity: 0.05;
|
||||||
|
position: absolute;
|
||||||
|
top: 0rem;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.launch-logo-aligner {
|
||||||
|
margin-top: -10rem;
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 8fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.launch-logo-large {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 4rem;
|
||||||
|
svg {
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.launch-logo {
|
||||||
|
svg {
|
||||||
|
width: 10rem;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.launch-introduction {
|
||||||
|
margin-top: 3rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
letter-spacing: .33rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: .8rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown__container {
|
||||||
|
.countdown__content {
|
||||||
|
flex-shrink: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer__value {
|
||||||
|
font-size: 5.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer__label {
|
||||||
|
font-size: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer__separator {
|
||||||
|
margin: 0 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.timer__value {
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-top: -.4rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.timer__label {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer__value {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $md-breakpoint) {
|
||||||
|
.launch-logo-back {
|
||||||
|
top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.countdown-page__content {
|
||||||
|
// margin-top: -10rem;
|
||||||
|
}
|
||||||
|
.countdown__container {
|
||||||
|
.timer__value {
|
||||||
|
font-size: 3rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
.timer__separator {
|
||||||
|
margin: 0 .8rem;
|
||||||
|
.timer__value {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timer__label {
|
||||||
|
font-size: .8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown__content {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
background-color: rgba(1, 1, 1, .5);
|
||||||
|
color: white;
|
||||||
|
// background-color: $tertiary;
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
|
padding: .5rem 0;
|
||||||
|
|
||||||
|
.countdown-footer__logo {
|
||||||
|
padding: .3rem 0;
|
||||||
|
svg {
|
||||||
|
width: auto;
|
||||||
|
height: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.socials {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.social-icon {
|
||||||
|
width: 1.4rem;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.social-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.social-text {
|
||||||
|
margin-right: .8rem;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
fill: white;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $md-breakpoint) {
|
||||||
|
.socials {
|
||||||
|
.social-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -78,6 +78,10 @@ a:hover {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-100 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -88,3 +92,4 @@ img {
|
||||||
.grid-2 {
|
.grid-2 {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ $background-secondary: #BFB78F;
|
||||||
$secondary: #011F26;
|
$secondary: #011F26;
|
||||||
$tertiary: #A5A692;
|
$tertiary: #A5A692;
|
||||||
$accent: #F2A71B;
|
$accent: #F2A71B;
|
||||||
|
$accent-dark: #A56F09;
|
||||||
|
|
||||||
.pagination-nav {
|
.pagination-nav {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
|
|
@ -33,6 +34,7 @@ $accent: #F2A71B;
|
||||||
@import 'footer.scss';
|
@import 'footer.scss';
|
||||||
@import 'sections.scss';
|
@import 'sections.scss';
|
||||||
@import 'carousel.scss';
|
@import 'carousel.scss';
|
||||||
|
@import 'countdown.scss';
|
||||||
|
|
||||||
// components
|
// components
|
||||||
@import 'tags.scss';
|
@import 'tags.scss';
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,9 @@ changefreq = 'weekly'
|
||||||
|
|
||||||
[params]
|
[params]
|
||||||
dateFmt = "02.01.2006 15:04"
|
dateFmt = "02.01.2006 15:04"
|
||||||
|
[params.socials]
|
||||||
|
facebook = "https://www.facebook.com/groups/bethleemaubevoye"
|
||||||
|
twitter = "https://www.helloasso.com/associations/l-etoile-de-bethleem-association-des-amis-de-la-chapelle-de-bethleem-d-aubevoye/"
|
||||||
|
|
||||||
[params.defaultImage]
|
[params.defaultImage]
|
||||||
local = true
|
local = true
|
||||||
|
|
@ -28,3 +31,4 @@ imtag = 'imtags'
|
||||||
[markup.goldmark.renderer]
|
[markup.goldmark.renderer]
|
||||||
unsafe = true
|
unsafe = true
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
4
content/countdown/_index.md
Normal file
4
content/countdown/_index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
with_header: false
|
||||||
|
with_footer: false
|
||||||
|
---
|
||||||
|
|
@ -7,9 +7,13 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="footer-push">
|
<div class="footer-push">
|
||||||
|
{{ if or (not (isset .Params "with_header")) .Params.with_header }}
|
||||||
{{ partial "header" . }}
|
{{ partial "header" . }}
|
||||||
|
{{ end }}
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
{{ if or (not (isset .Params "with_footer")) .Params.with_footer }}
|
||||||
{{ partial "footer" . }}
|
{{ partial "footer" . }}
|
||||||
|
{{ end }}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
93
layouts/countdown/list.html
Normal file
93
layouts/countdown/list.html
Normal 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 }}
|
||||||
|
|
||||||
Loading…
Reference in a new issue