etoiledebethleem/website
4
1
Fork 0
Code Issues 5 Pull requests 1 Projects 1 Releases Packages Activity Actions

feat: new adhesion page

Browse source
This commit is contained in:
Matthieu Bessat 2024-03-06 09:09:56 +01:00
parent b7c6df59ed
commit 64c9c00ec8
5 changed files with 212 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
assets/images/icons/write.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

38
assets/sass/adhesion.scss
View file

@ -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 {
}

16
content/adhesion/_index.md
View file

@ -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

108
layouts/adhesion/list.html
View file

@ -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">
<main class="page-container">
{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
<p>2 méthodes d'adhésions possibles :</p>
<div class="adhesion-choice">
<a
class="btn subscribe-button"
href="{{ .Site.Params.contact.helloasso_adhesion }}"
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 }}

87
layouts/adhesion/old.html Normal file
View 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 }}