From 40df29fb0b254d2da53ded299a3584ad4c9ef94c Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <mail@matthieubessat.fr>
Date: Thu, 6 Jul 2023 22:21:40 +0200
Subject: [PATCH] feat(countdown): add countdown page

---
 assets/sass/countdown.scss   | 205 +++++++++++++++++++++++++++++++++++
 assets/sass/general.scss     |   5 +
 assets/sass/main.scss        |   2 +
 config.toml                  |   4 +
 content/countdown/_index.md  |   4 +
 layouts/_default/baseof.html |  10 +-
 layouts/countdown/list.html  |  93 ++++++++++++++++
 7 files changed, 320 insertions(+), 3 deletions(-)
 create mode 100644 assets/sass/countdown.scss
 create mode 100644 content/countdown/_index.md
 create mode 100644 layouts/countdown/list.html

diff --git a/assets/sass/countdown.scss b/assets/sass/countdown.scss
new file mode 100644
index 0000000..24faa74
--- /dev/null
+++ b/assets/sass/countdown.scss
@@ -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;
+        }
+    }
+}
diff --git a/assets/sass/general.scss b/assets/sass/general.scss
index 5c5444b..bd9eae7 100644
--- a/assets/sass/general.scss
+++ b/assets/sass/general.scss
@@ -78,6 +78,10 @@ a:hover {
     width: 200px;
 }
 
+.h-100 {
+    height: 100%;
+}
+
 img {
     max-width: 100%;
 }
@@ -88,3 +92,4 @@ img {
 .grid-2 {
     grid-template-columns: 1fr 1fr;
 }
+
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 0059907..c44a449 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -14,6 +14,7 @@ $background-secondary: #BFB78F;
 $secondary: #011F26;
 $tertiary: #A5A692;
 $accent: #F2A71B;
+$accent-dark: #A56F09;
 
 .pagination-nav {
     margin-top: 1em;
@@ -33,6 +34,7 @@ $accent: #F2A71B;
 @import 'footer.scss';
 @import 'sections.scss';
 @import 'carousel.scss';
+@import 'countdown.scss';
 
 // components
 @import 'tags.scss';
diff --git a/config.toml b/config.toml
index bd54708..be4730b 100644
--- a/config.toml
+++ b/config.toml
@@ -13,6 +13,9 @@ changefreq = 'weekly'
 
 [params]
 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] 
 local = true
@@ -28,3 +31,4 @@ imtag = 'imtags'
     [markup.goldmark.renderer]
       unsafe = true
 
+
diff --git a/content/countdown/_index.md b/content/countdown/_index.md
new file mode 100644
index 0000000..15266ff
--- /dev/null
+++ b/content/countdown/_index.md
@@ -0,0 +1,4 @@
+---
+with_header: false
+with_footer: false
+---
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6b2e822..f021839 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -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>
diff --git a/layouts/countdown/list.html b/layouts/countdown/list.html
new file mode 100644
index 0000000..0fb568d
--- /dev/null
+++ b/layouts/countdown/list.html
@@ -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 }}
+