feat: new adhesion page
This commit is contained in:
parent
d888a9de4a
commit
ddb66b9df8
5 changed files with 212 additions and 82 deletions
43
assets/images/icons/write.svg
Normal file
43
assets/images/icons/write.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 4 KiB |
|
|
@ -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 {
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,16 @@
|
||||||
---
|
---
|
||||||
title: "Campagne d'adhésion 2023-2024"
|
title: "Campagne d'adhésion 2023-2024"
|
||||||
with_header: false
|
description: Campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye.
|
||||||
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.
|
|
||||||
featured_image:
|
featured_image:
|
||||||
src: ./images/default_logo.png
|
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
|
||||||
|
|
|
||||||
|
|
@ -1,87 +1,45 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="root">
|
<div class="team-presentation">
|
||||||
<div class="adhesion-container">
|
<div class="team-item">
|
||||||
<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>
|
</div>
|
||||||
<div class="video-presentation final-video-presentation" style="display: none;" id="final-video-container">
|
|
||||||
<!-- <!-1- <iframe -1-> -->
|
<main class="page-container">
|
||||||
<!-- <!-1- title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
|
{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
|
||||||
<!-- <!-1- width="100%" height="950" -1-> -->
|
|
||||||
<!-- <!-1- src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
|
<p>2 méthodes d'adhésions possibles :</p>
|
||||||
<!-- <!-1- frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
|
<div class="adhesion-choice">
|
||||||
<!-- <!-1- </iframe> -1-> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="adhesion-footer">
|
|
||||||
<div class="page-container adhesion-btns">
|
|
||||||
<a
|
<a
|
||||||
class="btn subscribe-button"
|
class="adhesion-choice__item button button-light"
|
||||||
href="{{ .Site.Params.contact.helloasso_adhesion }}"
|
tabindex="0"
|
||||||
title="Adhérer sur Helloasso"
|
title="Adhérer sur Helloasso"
|
||||||
|
href="{{ .Site.Params.contact.helloasso_adhesion }}"
|
||||||
>
|
>
|
||||||
{{ partial "helpers/svg" (dict "path" "icons/helloasso" "class" "btn__icon") }}
|
<div class="adhesion-choice__item__icon">
|
||||||
Adhérer
|
{{ partial "helpers/svg" (dict "path" "icons/helloasso") }}
|
||||||
</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>
|
||||||
|
<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>
|
||||||
</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 }}
|
{{ end }}
|
||||||
|
|
||||||
|
|
|
||||||
87
layouts/adhesion/old.html
Normal file
87
layouts/adhesion/old.html
Normal file
|
|
@ -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 }}
|
||||||
|
|
||||||
Loading…
Reference in a new issue