diff --git a/assets/css/partials/_site-footer.scss b/assets/css/partials/_site-footer.scss index 2c1bcc0..aa51927 100644 --- a/assets/css/partials/_site-footer.scss +++ b/assets/css/partials/_site-footer.scss @@ -74,7 +74,7 @@ margin: 0 auto; } - .footer__socials .container{ + .footer__socials .socials{ max-width: 400px; columns: 2; margin-top: calc(var(--spacing)*1); diff --git a/assets/css/style.css b/assets/css/style.css index db53b3c..bf64ca0 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1019,7 +1019,7 @@ body.menu-open #menu-toggle .close { max-width: 1200px; margin: 0 auto; } - #site-footer .footer__socials .container { + #site-footer .footer__socials .socials { max-width: 400px; -moz-columns: 2; columns: 2; diff --git a/assets/icons/search.svg b/assets/icons/search.svg new file mode 100644 index 0000000..5ea9712 --- /dev/null +++ b/assets/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/socials/bluesky.svg b/assets/icons/socials/bluesky.svg new file mode 100644 index 0000000..3944e93 --- /dev/null +++ b/assets/icons/socials/bluesky.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/icons/socials/facebook.svg b/assets/icons/socials/facebook.svg new file mode 100644 index 0000000..cf4118e --- /dev/null +++ b/assets/icons/socials/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/socials/instagram.svg b/assets/icons/socials/instagram.svg new file mode 100644 index 0000000..57775b0 --- /dev/null +++ b/assets/icons/socials/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/socials/linkedin.svg b/assets/icons/socials/linkedin.svg new file mode 100644 index 0000000..5a9c0a5 --- /dev/null +++ b/assets/icons/socials/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/socials/mastodon.svg b/assets/icons/socials/mastodon.svg new file mode 100644 index 0000000..efe42f5 --- /dev/null +++ b/assets/icons/socials/mastodon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/icons/socials/threads.svg b/assets/icons/socials/threads.svg new file mode 100644 index 0000000..3619982 --- /dev/null +++ b/assets/icons/socials/threads.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/socials/x-social.svg b/assets/icons/socials/x-social.svg new file mode 100644 index 0000000..18f2f4d --- /dev/null +++ b/assets/icons/socials/x-social.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/icons/socials/youtube.svg b/assets/icons/socials/youtube.svg new file mode 100644 index 0000000..40ca348 --- /dev/null +++ b/assets/icons/socials/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/Jumaa-visuel-1.png b/assets/images/Jumaa-visuel-1.png new file mode 100644 index 0000000..298530b Binary files /dev/null and b/assets/images/Jumaa-visuel-1.png differ diff --git a/assets/images/Nahel-visuel1.png b/assets/images/Nahel-visuel1.png new file mode 100644 index 0000000..d281231 Binary files /dev/null and b/assets/images/Nahel-visuel1.png differ diff --git a/assets/images/Nidal-Khaled-Amirah.png b/assets/images/Nidal-Khaled-Amirah.png new file mode 100644 index 0000000..615bf54 Binary files /dev/null and b/assets/images/Nidal-Khaled-Amirah.png differ diff --git a/assets/images/kanaky-visuel-1.png b/assets/images/kanaky-visuel-1.png new file mode 100644 index 0000000..6aa5d3c Binary files /dev/null and b/assets/images/kanaky-visuel-1.png differ diff --git a/assets/js/header.js b/assets/js/header.js new file mode 100644 index 0000000..8c1e30a --- /dev/null +++ b/assets/js/header.js @@ -0,0 +1,33 @@ +export function headerToggle() { + const header = document.getElementById("site-header"); + const buttonToggle = document.querySelector("#menu-toggle"); + console.log(header); + console.log(buttonToggle); + + if (!header || !buttonToggle) return; + buttonToggle.addEventListener("click", () => { + document.body.classList.toggle("menu-open"); + }); +} + +export function headerScrollVisibility() { + const header = document.getElementById("site-header"); + const hero = document.getElementById("hero"); + + if (!header || !hero) return; + + function checkScroll() { + const headerHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 0; + const heroBottom = hero.getBoundingClientRect().bottom; + + if (heroBottom <= headerHeight) { + header.classList.add("is-visible"); + } else { + header.classList.remove("is-visible"); + } + } + + window.addEventListener("scroll", checkScroll); + checkScroll(); // Vérifier au chargement +} + diff --git a/assets/js/mobile-sticky.js b/assets/js/mobile-sticky.js new file mode 100644 index 0000000..4d4589e --- /dev/null +++ b/assets/js/mobile-sticky.js @@ -0,0 +1,50 @@ +let isInitialized = false; + +export function btnSticky(responsiveSmall) { + if (isInitialized) return; + + let main = document.querySelector("main"); + if (!main || !main.classList.contains("page-enquete")) return; + + let bannerPage = main.querySelector("#banner--page"); + let sectionDl = document.querySelector("#section__dl"); + let footer = document.querySelector("#site-footer"); + + if (!bannerPage || !sectionDl || !footer) return; + + function checkScroll() { + const screenWidth = window.innerWidth; + + // Vérifier que l'écran est plus petit que responsiveSmall + if (screenWidth >= responsiveSmall) { + bannerPage.classList.remove('is-visible'); + bannerPage.style.transform = 'translateY(0)'; + return; + } + + const sectionTop = sectionDl.getBoundingClientRect().top; + const footerTop = footer.getBoundingClientRect().top; + const windowHeight = window.innerHeight; + + // Activer le banner quand #section__dl arrive en bas de l'écran + if (sectionTop <= windowHeight) { + bannerPage.classList.add('is-visible'); + + // Pousser le banner vers le haut si le footer arrive en bas de l'écran + if (footerTop < windowHeight) { + const pushUp = windowHeight - footerTop; + bannerPage.style.transform = `translateY(-${pushUp}px)`; + } else { + bannerPage.style.transform = 'translateY(0)'; + } + } else { + bannerPage.classList.remove('is-visible'); + bannerPage.style.transform = 'translateY(0)'; + } + } + + window.addEventListener('scroll', checkScroll); + checkScroll(); + + isInitialized = true; +} \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 7e121fe..b248cfb 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,51 +1,14 @@ -function updateLinkInterval(link, interval) { - const currentHref = link.getAttribute("href"); - const newHref = currentHref.replace( - /default_interval=[om]/, - `default_interval=${interval}` - ); - link.setAttribute("href", newHref); -} +import { headerToggle, headerScrollVisibility } from './header.js'; +import { copyLink } from './share.js'; +import { btnSticky } from './mobile-sticky.js'; -function updateAmountDisplay(link, amount, interval) { - const boldText = link.querySelector(".bold"); - if (!boldText) return; +const responsiveMedium = 1080; +const responsiveSmall = 768; - const suffix = interval === "m" ? "€/mois" : "€"; - boldText.innerHTML = `${amount}${suffix}`; -} - -function switchActiveTab(clickedButton, allButtons) { - allButtons.forEach((btn) => btn.classList.remove("is-selected")); - clickedButton.classList.add("is-selected"); -} - -function handleDonationIntervalChange(interval) { - const donationLinks = document.querySelectorAll(".btn--donation[data-amount]"); - const freeAmountLink = document.querySelector(".btn--donation:not([data-amount])"); - - donationLinks.forEach((link) => { - const amount = link.getAttribute("data-amount"); - updateLinkInterval(link, interval); - updateAmountDisplay(link, amount, interval); - }); - - if (freeAmountLink) { - updateLinkInterval(freeAmountLink, interval); - } -} - -document.addEventListener("DOMContentLoaded", function () { - const tabButtons = document.querySelectorAll(".nav--tabs__btn"); - const donationLinks = document.querySelectorAll(".btn--donation[data-amount]"); - - if (tabButtons.length === 0 || donationLinks.length === 0) return; - - tabButtons.forEach((button) => { - button.addEventListener("click", function () { - const interval = this.getAttribute("data-interval"); - switchActiveTab(this, tabButtons); - handleDonationIntervalChange(interval); - }); - }); -}); +window.onload = async function () { + console.log("SCRIPT LOADED"); + headerToggle(); + headerScrollVisibility(); + copyLink(); + btnSticky(responsiveSmall); +} \ No newline at end of file diff --git a/assets/js/share.js b/assets/js/share.js new file mode 100644 index 0000000..5c42a65 --- /dev/null +++ b/assets/js/share.js @@ -0,0 +1,19 @@ +export function copyLink() { + let buttons = document.querySelectorAll('.copy-link button'); + buttons.forEach(function (button, index) { + let link = button.parentNode.querySelector("input").value; + + button.addEventListener('click', function() { + navigator.clipboard.writeText(link).then(() => { + const originalText = button.textContent; + button.textContent = 'Lien copié'; + setTimeout(() => { + button.textContent = originalText; + }, 1000); + }).catch(err => { + console.error('Erreur lors de la copie:', err); + }); + }); + }); +} + diff --git a/site/snippets/footer.php b/site/snippets/footer.php index bf0d989..71adb72 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -1,7 +1,7 @@