etoiledebethleem/website
3
1
Fork 0
Code Issues 6 Pull requests 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 d888a9de4a
commit ddb66b9df8
5 changed files with 212 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

110
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">
<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 }}