From ddb66b9df85fcd14bc54e9dc5d896341b4e244a1 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <mail@matthieubessat.fr>
Date: Wed, 6 Mar 2024 09:09:56 +0100
Subject: [PATCH] feat: new adhesion page

---
 assets/images/icons/write.svg |  43 +++++++++++++
 assets/sass/adhesion.scss     |  38 ++++++++++++
 content/adhesion/_index.md    |  16 +++--
 layouts/adhesion/list.html    | 110 +++++++++++-----------------------
 layouts/adhesion/old.html     |  87 +++++++++++++++++++++++++++
 5 files changed, 212 insertions(+), 82 deletions(-)
 create mode 100644 assets/images/icons/write.svg
 create mode 100644 layouts/adhesion/old.html

diff --git a/assets/images/icons/write.svg b/assets/images/icons/write.svg
new file mode 100644
index 0000000..7b31d32
--- /dev/null
+++ b/assets/images/icons/write.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="WRITE" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 1800 1800" enable-background="new 0 0 1800 1800" xml:space="preserve">
+<g>
+	<path fill="#333333" d="M241.023,324.818c0.252,0,0.505,0.035,0.758,0.035h465.68c17.266,0,31.256-13.99,31.256-31.252
+		c0-17.262-13.99-31.247-31.256-31.247H351.021h-109.24c-17.258,0-31.252,13.985-31.252,31.247
+		C210.529,310.605,224.121,324.412,241.023,324.818z"/>
+	<path fill="#333333" d="M210.529,450.306c0,17.257,13.994,31.252,31.252,31.252h769.451c17.262,0,31.256-13.995,31.256-31.252
+		c0-17.266-13.994-31.252-31.256-31.252H241.781C224.523,419.054,210.529,433.04,210.529,450.306z"/>
+	<path fill="#333333" d="M1011.232,575.751H241.781c-8.149,0-15.549,3.147-21.116,8.261c-6.213,5.712-10.136,13.879-10.136,22.987
+		c0,17.262,13.994,31.26,31.252,31.26h769.451c17.262,0,31.256-13.999,31.256-31.26c0-9.108-3.923-17.275-10.141-22.987
+		C1026.781,578.898,1019.386,575.751,1011.232,575.751z"/>
+	<path fill="#333333" d="M1011.232,732.461H241.781c-17.258,0-31.252,13.99-31.252,31.247c0,17.262,13.994,31.257,31.252,31.257
+		h769.451c17.262,0,31.256-13.995,31.256-31.257C1042.488,746.451,1028.494,732.461,1011.232,732.461z"/>
+	<path fill="#333333" d="M1011.232,889.157H241.781c-8.149,0-15.549,3.147-21.116,8.261c-6.213,5.713-10.136,13.879-10.136,22.987
+		c0,17.257,13.994,31.261,31.252,31.261h769.451c17.262,0,31.256-14.004,31.256-31.261c0-9.108-3.923-17.274-10.141-22.987
+		C1026.781,892.305,1019.386,889.157,1011.232,889.157z"/>
+	<path fill="#333333" d="M1011.232,1045.867H241.781c-17.258,0-31.252,13.99-31.252,31.243c0,17.271,13.994,31.265,31.252,31.265
+		h769.451c17.262,0,31.256-13.994,31.256-31.265C1042.488,1059.857,1028.494,1045.867,1011.232,1045.867z"/>
+	<path fill="#333333" d="M1011.232,1202.576H241.781c-17.258,0-31.252,13.995-31.252,31.252c0,17.258,13.994,31.252,31.252,31.252
+		h769.451c17.262,0,31.256-13.994,31.256-31.252C1042.488,1216.571,1028.494,1202.576,1011.232,1202.576z"/>
+	<path fill="#333333" d="M1011.232,1359.273H241.781c-8.149,0-15.549,3.151-21.116,8.265c-6.213,5.713-10.136,13.875-10.136,22.987
+		c0,17.258,13.994,31.261,31.252,31.261h769.451c17.262,0,31.256-14.003,31.256-31.261c0-9.112-3.923-17.274-10.141-22.987
+		C1026.781,1362.425,1019.386,1359.273,1011.232,1359.273z"/>
+	<path fill="#333333" d="M1233.542,251.228l-49.851-45.109L1052.136,87.076l-59.185-53.554c-5.293-4.792-11.947-7.421-18.786-7.836
+		h-3.49H83.676c-45.688,0-82.858,37.375-82.858,83.316v1583.612c0,45.94,37.17,83.316,82.858,83.316h1078.562
+		c45.68,0,82.845-37.376,82.845-83.316V277.08v-3.182C1244.646,264.73,1240.261,256.589,1233.542,251.228z M1003.117,125.864
+		l131.119,118.657h-131.119V125.864z M1183.691,1692.613c0,12.094-9.622,21.926-21.454,21.926H83.676
+		c-11.836,0-21.467-9.832-21.467-21.926V109.001c0-12.089,9.631-21.925,21.467-21.925h857.857V275.38
+		c0,17.052,13.785,30.862,30.786,30.862h211.372V1692.613z"/>
+	<path fill="#333333" d="M1798.578,180.737c-7.049-88.305-81.114-158.02-171.205-158.02c-0.004,0-0.004,0-0.004,0
+		c-45.889,0-89.033,17.874-121.479,50.32c-29.18,29.175-46.519,67.005-49.73,107.699h-0.586v13.609c0,0.06-0.005,0.115-0.005,0.175
+		c0,0.026,0.005,0.056,0.005,0.082l-0.005,1369.26h0.197c0.557,5.404,2.522,10.731,6.047,15.373l141.135,185.91
+		c5.803,7.648,14.851,12.136,24.447,12.136c9.601-0.004,18.646-4.496,24.447-12.14l141.093-185.897
+		c3.528-4.65,5.494-9.982,6.051-15.391h0.197V180.737H1798.578z M1549.299,116.448c20.854-20.855,48.578-32.339,78.07-32.339h0.004
+		c50.24,0,92.746,33.723,106.076,79.718h-212.19C1526.358,146.098,1535.896,129.852,1549.299,116.448z M1595.372,1502.468
+		l-78.413,0.005l0.005-1260.345h220.828v1260.336h-81.103l0.009-1016.486l-61.335,0.004L1595.372,1502.468z M1627.382,1695.821
+		l-100.171-131.963l200.338-0.004L1627.382,1695.821z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/assets/sass/adhesion.scss b/assets/sass/adhesion.scss
index d3071c8..3232f72 100644
--- a/assets/sass/adhesion.scss
+++ b/assets/sass/adhesion.scss
@@ -177,3 +177,41 @@
     }
 }
 
+
+.adhesion-choice {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: .5rem;
+
+    span {
+        font-size: 1.3rem;
+    }
+}
+
+.adhesion-choice__item {
+    border: 1px solid gray;
+    text-align: center;
+}
+
+.adhesion-choice__item {
+    &:hover, &:focus {
+        background: transparent !important;
+        box-shadow: inset 0 0 10px $accent-dark;
+        color: black !important;
+        svg {
+            filter: grayscale(100%);
+        }
+    }
+}
+
+.adhesion-choice__item__icon {
+    margin-bottom: 1rem;
+    svg {
+        padding: .8rem;
+        width: 9rem;
+        height: 9rem;
+    }
+}
+
+.adhesion-choice__item {
+}
diff --git a/content/adhesion/_index.md b/content/adhesion/_index.md
index 0dead49..b446953 100644
--- a/content/adhesion/_index.md
+++ b/content/adhesion/_index.md
@@ -1,12 +1,16 @@
 ---
 title: "Campagne d'adhésion 2023-2024"
-with_header: false
-with_footer: false
-body_class: "adhesion-body"
-with_normal_config: false
-description: Découvrez la campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye.
+description: Campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye.
 featured_image:
     src: ./images/default_logo.png
 ---
 
-Découvrez la campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye.
+## Pourquoi adhérer ?
+
+à remplir depuis l'affiche adhérer de damien
+
+## Comment adhérer ?
+
+### Via Helloasso
+
+### Par bulletin papier
diff --git a/layouts/adhesion/list.html b/layouts/adhesion/list.html
index 503f864..69ab7bc 100644
--- a/layouts/adhesion/list.html
+++ b/layouts/adhesion/list.html
@@ -1,87 +1,45 @@
 {{ define "main" }}
-<div class="root">
-    <div class="adhesion-container">
-        <div class="video-presentation video-presentation-cover" id="video-cover">
-            <div class="video-cover__back">
-                {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent" "class" "back-icon") }}
-                <!-- {{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent" "class" "back-icon") }} -->
-            </div>
-            <div id="video-play-btn" class="video-cover__content">
-                <button>
-                    {{ partial "helpers/svg" (dict "path" "icons/circle-play" "class" "btn-icon") }}
-                </button>
-                <p>Regarder le teaser</p>
-            </div>
-        </div>
-        <div class="video-presentation final-video-presentation" style="display: none;" id="final-video-container">
-            <!--     <!-1- <iframe -1-> -->
-            <!--     <!-1-     title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
-            <!--     <!-1-     width="100%" height="950" -1-> -->
-            <!--     <!-1-     src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
-            <!--     <!-1-     frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
-            <!--     <!-1- </iframe> -1-> -->
+    <div class="team-presentation">
+        <div class="team-item">
+
         </div>
     </div>
-    <div class="adhesion-footer">
-        <div class="page-container adhesion-btns">
-            <a 
-                class="btn subscribe-button"
-                href="{{ .Site.Params.contact.helloasso_adhesion }}"
+        
+	<main class="page-container">
+		{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
+
+        <p>2 méthodes d'adhésions possibles :</p>
+        <div class="adhesion-choice">
+            <a
+                class="adhesion-choice__item button button-light"
+                tabindex="0"
                 title="Adhérer sur Helloasso"
+                href="{{ .Site.Params.contact.helloasso_adhesion }}"
             >
-                {{ partial "helpers/svg" (dict "path" "icons/helloasso" "class" "btn__icon") }}
-                Adhérer
+                <div class="adhesion-choice__item__icon">
+                    {{ partial "helpers/svg" (dict "path" "icons/helloasso") }}
+                </div>
+                <span>HelloAsso</span>
+            </a>
+            <a
+                class="adhesion-choice__item button button-light"
+                tabindex="0"
+                title="Adhérer avec bulletin papier (PDF)"
+                href="{{ .Site.Params.contact.paper_adhesion }}"
+            >
+                <div class="adhesion-choice__item__icon">
+                    {{ partial "helpers/svg" (dict "path" "icons/write") }}
+                </div>
+                <span>Papier</span>
             </a>
-            
-            <ul class="socials">
-                <li class="btn" title="Télécharger le bulletin d'adhésion papier">
-                    <a href="{{ .Site.Params.contact.paper_adhesion }}">
-                        {{ partial "helpers/svg" (dict "path" "icons/document" "class" "site-footer-socials__logo") }}
-                    </a>
-                </li>
-                <li class="btn" title="Envoyer nous un e-mail">
-                    <a href="mailto:{{ .Site.Params.contact.email }}">
-                        {{ partial "helpers/svg" (dict "path" "icons/email" "class" "site-footer-socials__logo") }}
-                    </a>
-                </li>
-                <li class="btn" title="Notre chaîne YouTube">
-                    <a href="{{ .Site.Params.socials.youtube }}">
-                        {{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "site-footer-socials__logo") }}
-                    </a>
-                </li>
-                <li class="btn" title="Notre groupe facebook">
-                    <a href="{{ .Site.Params.socials.facebook }}">
-                        {{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo") }}
-                    </a>
-                </li>
-            </ul>
         </div>
-    </div>
 
-</div>
+		{{ if .Content }}
+		<div>
+			{{ with .Content }}<div>{{ . }}</div>{{ end }}
+		</div>
+		{{ end }}
+	</main>
 
-
-<script>
-
-    let iframe_html = `<iframe
-                width="100%"
-                src="https://www.youtube.com/embed/vJeEqDfz_4c?autoplay=1"
-                title="YouTube video player"
-                frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                allowfullscreen
-            ></iframe>`;
-
-    let btn = document.getElementById("video-play-btn")
-    const video_cover = document.getElementById("video-cover")
-
-    const final_video_container = document.getElementById("final-video-container")
-    btn.onclick = () => {
-        video_cover.style.display = "none"
-        final_video_container.innerHTML = iframe_html
-        final_video_container.style.display = "block"
-    }
-
-</script>
 {{ end }}
 
diff --git a/layouts/adhesion/old.html b/layouts/adhesion/old.html
new file mode 100644
index 0000000..503f864
--- /dev/null
+++ b/layouts/adhesion/old.html
@@ -0,0 +1,87 @@
+{{ define "main" }}
+<div class="root">
+    <div class="adhesion-container">
+        <div class="video-presentation video-presentation-cover" id="video-cover">
+            <div class="video-cover__back">
+                {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent" "class" "back-icon") }}
+                <!-- {{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent" "class" "back-icon") }} -->
+            </div>
+            <div id="video-play-btn" class="video-cover__content">
+                <button>
+                    {{ partial "helpers/svg" (dict "path" "icons/circle-play" "class" "btn-icon") }}
+                </button>
+                <p>Regarder le teaser</p>
+            </div>
+        </div>
+        <div class="video-presentation final-video-presentation" style="display: none;" id="final-video-container">
+            <!--     <!-1- <iframe -1-> -->
+            <!--     <!-1-     title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
+            <!--     <!-1-     width="100%" height="950" -1-> -->
+            <!--     <!-1-     src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
+            <!--     <!-1-     frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
+            <!--     <!-1- </iframe> -1-> -->
+        </div>
+    </div>
+    <div class="adhesion-footer">
+        <div class="page-container adhesion-btns">
+            <a 
+                class="btn subscribe-button"
+                href="{{ .Site.Params.contact.helloasso_adhesion }}"
+                title="Adhérer sur Helloasso"
+            >
+                {{ partial "helpers/svg" (dict "path" "icons/helloasso" "class" "btn__icon") }}
+                Adhérer
+            </a>
+            
+            <ul class="socials">
+                <li class="btn" title="Télécharger le bulletin d'adhésion papier">
+                    <a href="{{ .Site.Params.contact.paper_adhesion }}">
+                        {{ partial "helpers/svg" (dict "path" "icons/document" "class" "site-footer-socials__logo") }}
+                    </a>
+                </li>
+                <li class="btn" title="Envoyer nous un e-mail">
+                    <a href="mailto:{{ .Site.Params.contact.email }}">
+                        {{ partial "helpers/svg" (dict "path" "icons/email" "class" "site-footer-socials__logo") }}
+                    </a>
+                </li>
+                <li class="btn" title="Notre chaîne YouTube">
+                    <a href="{{ .Site.Params.socials.youtube }}">
+                        {{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "site-footer-socials__logo") }}
+                    </a>
+                </li>
+                <li class="btn" title="Notre groupe facebook">
+                    <a href="{{ .Site.Params.socials.facebook }}">
+                        {{ partial "helpers/svg" (dict "path" "icons/facebook" "class" "site-footer-socials__logo") }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+</div>
+
+
+<script>
+
+    let iframe_html = `<iframe
+                width="100%"
+                src="https://www.youtube.com/embed/vJeEqDfz_4c?autoplay=1"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+            ></iframe>`;
+
+    let btn = document.getElementById("video-play-btn")
+    const video_cover = document.getElementById("video-cover")
+
+    const final_video_container = document.getElementById("final-video-container")
+    btn.onclick = () => {
+        video_cover.style.display = "none"
+        final_video_container.innerHTML = iframe_html
+        final_video_container.style.display = "block"
+    }
+
+</script>
+{{ end }}
+