PHP dynamique + cache JSON, nettoyage CSS/HTML, CI Forgejo
- Renommage classes/IDs (BEM cohérent, anglais, noms sémantiques) - Correction HTML : h3→h2 FAQ, button>a→a[role=button] CTA mobile - Conversion index.html → index.php (FR/EN) avec cache JSON depuis API Kirby - Pages merci/thanks converties en PHP dynamique - Ajout includes/cache.php + includes/config.php (cache TTL 5min) - Ajout CI Forgejo (deploy FTP via lftp) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
119c98edab
commit
322d9136b6
29 changed files with 917 additions and 1485 deletions
128
index.html
128
index.html
|
|
@ -90,36 +90,36 @@
|
|||
<main>
|
||||
<div class="col-left">
|
||||
<section id="section__hero">
|
||||
<p class="p__baseline-big">
|
||||
<p class="hero-heading">
|
||||
Pour continuer à enquêter, <br />Index a besoin de vous
|
||||
</p>
|
||||
|
||||
<div class="gauge__container">
|
||||
<div class="gauge-container">
|
||||
<div id="gauge" style="--pourcent: 0%"></div>
|
||||
<div class="gauge--infos" id="gauge--infos__donateurs">
|
||||
<div class="gauge-info" id="gauge-info--supporters">
|
||||
<p class="property">Soutiens réguliers</p>
|
||||
<p class="value">0</p>
|
||||
</div>
|
||||
<div class="gauge--infos" id="gauge--infos__objectif">
|
||||
<div class="gauge-info" id="gauge-info--goal">
|
||||
<p class="property">Objectif</p>
|
||||
<p class="value">500</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="p__baseline-big">
|
||||
<p class="hero-heading">
|
||||
Objectif 500 Soutiens<br /><strong>au 21 juin 2026</strong>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="section__baseline">
|
||||
<p class="p__baseline">
|
||||
<p class="subheading">
|
||||
Index est une ONG d’investigation <br />à but non-lucratif.
|
||||
<br />Vos dons garantissent notre indépendance.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="section__video">
|
||||
<h2 class="section__heading">
|
||||
<h2 class="section-heading">
|
||||
Pourquoi soutenir Index  ? <br />Écoutez les premier·es
|
||||
concerné·es
|
||||
</h2>
|
||||
|
|
@ -133,8 +133,8 @@
|
|||
></iframe>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="videos__input" />
|
||||
<label class="btn__deploy" for="videos__input">
|
||||
<input type="checkbox" id="testimonies-toggle" />
|
||||
<label class="btn-expand" for="testimonies-toggle">
|
||||
<span class="txt">Voir les témoignages</span>
|
||||
<span class="icon"
|
||||
><svg
|
||||
|
|
@ -169,9 +169,9 @@
|
|||
></span>
|
||||
</label>
|
||||
|
||||
<ul class="videos__ul">
|
||||
<ul class="testimonies-list">
|
||||
<li
|
||||
class="videos__li"
|
||||
class="testimony-item"
|
||||
data-video="https://player.vimeo.com/video/1138884807?h=384a2d15ea&autoplay=1"
|
||||
>
|
||||
<span class="icon">
|
||||
|
|
@ -192,13 +192,13 @@
|
|||
<p class="txt">
|
||||
« Index fait un travail que la justice
|
||||
ne fait pas » :
|
||||
<span class="br-desktop"><br /></span>le témoignage
|
||||
<span class="desktop-break"><br /></span>le témoignage
|
||||
d’Issam El Khalfaoui
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="videos__li"
|
||||
class="testimony-item"
|
||||
data-video="https://player.vimeo.com/video/1145581831?h=ce46358189&autoplay=1"
|
||||
>
|
||||
<span class="icon">
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
</li>
|
||||
|
||||
<li
|
||||
class="videos__li"
|
||||
class="testimony-item"
|
||||
data-video="https://player.vimeo.com/video/1142401468?h=f88778b3dd&autoplay=1"
|
||||
>
|
||||
<span class="icon">
|
||||
|
|
@ -244,13 +244,13 @@
|
|||
</span>
|
||||
<p class="txt">
|
||||
« Les enquêtes d'Index doivent continuer » :
|
||||
<span class="br-desktop"><br /></span>le témoignage
|
||||
<span class="desktop-break"><br /></span>le témoignage
|
||||
d’Assa Traoré
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="videos__li"
|
||||
class="testimony-item"
|
||||
data-video="https://player.vimeo.com/video/1143395847?h=f28d317c46&autoplay=1"
|
||||
>
|
||||
<span class="icon">
|
||||
|
|
@ -271,13 +271,13 @@
|
|||
<p class="txt">
|
||||
« Vous faites un travail rare
|
||||
et concret » :
|
||||
<span class="br-desktop"><br /></span>le témoignage
|
||||
<span class="desktop-break"><br /></span>le témoignage
|
||||
de Jérôme Rodrigues
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="videos__li"
|
||||
class="testimony-item"
|
||||
data-video="https://player.vimeo.com/video/1144550389?h=5781ebef9b&autoplay=1"
|
||||
>
|
||||
<span class="icon">
|
||||
|
|
@ -297,13 +297,13 @@
|
|||
</span>
|
||||
<p class="txt">
|
||||
« Index est d’un intérêt public absolu » :
|
||||
<span class="br-desktop"><br /></span>le témoignage
|
||||
<span class="desktop-break"><br /></span>le témoignage
|
||||
de Fatiha B.
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="videos__li"
|
||||
class="testimony-item"
|
||||
data-video="https://player.vimeo.com/video/1145649552?h=63bd03334b&autoplay=1"
|
||||
>
|
||||
<span class="icon">
|
||||
|
|
@ -324,13 +324,13 @@
|
|||
<p class="txt">
|
||||
« Je n’aurais jamais imaginé recevoir un tel
|
||||
soutien » :
|
||||
<span class="br-desktop"><br /></span>le témoignage
|
||||
<span class="desktop-break"><br /></span>le témoignage
|
||||
de Jean-François Martin
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="videos__li"
|
||||
class="testimony-item"
|
||||
data-video="https://player.vimeo.com/video/1146620554?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1"
|
||||
>
|
||||
<span class="icon">
|
||||
|
|
@ -351,13 +351,13 @@
|
|||
<p class="txt">
|
||||
« Le travail d'Index a permis de rétablir
|
||||
la vérité » :
|
||||
<span class="br-desktop"><br /></span>le témoignage de
|
||||
<span class="desktop-break"><br /></span>le témoignage de
|
||||
Mahamadou Camara, frère de Gaye
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="videos__li"
|
||||
class="testimony-item"
|
||||
data-video="https://player.vimeo.com/video/1148007280?h=2e9c81e900&autoplay=1"
|
||||
>
|
||||
<span class="icon">
|
||||
|
|
@ -378,7 +378,7 @@
|
|||
<p class="txt">
|
||||
« Pour les familles endeuillées, Index est
|
||||
essentiel » :
|
||||
<span class="br-desktop"><br /></span>le témoignage de
|
||||
<span class="desktop-break"><br /></span>le témoignage de
|
||||
Christelle Vendeiro-Bico, belle-sœur de Luis Bico
|
||||
</p>
|
||||
</li>
|
||||
|
|
@ -396,7 +396,7 @@
|
|||
</section> -->
|
||||
|
||||
<section id="section__questions">
|
||||
<h3 class="section__heading">Questions fréquentes</h3>
|
||||
<h2 class="section-heading">Questions fréquentes</h2>
|
||||
|
||||
<details>
|
||||
<summary>Les Soutiens d'Index, c'est quoi ?</summary>
|
||||
|
|
@ -618,49 +618,49 @@
|
|||
</nav>
|
||||
|
||||
<div
|
||||
data-donnation="one-off"
|
||||
class="btn--donation__container"
|
||||
data-donation="one-off"
|
||||
class="donation-grid"
|
||||
>
|
||||
<button class="btn--donation">
|
||||
<button class="donation-btn">
|
||||
<p class="bold">200 €</p>
|
||||
<p class="small">Soit 68 € après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<button class="donation-btn donation-btn--wide">
|
||||
<p class="bold">100 €</p>
|
||||
<p class="small">Soit 34 € après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<button class="donation-btn donation-btn--wide">
|
||||
<p class="bold">50 €</p>
|
||||
<p class="small">Soit 17 € après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<button class="donation-btn donation-btn--wide">
|
||||
<p class="bold">20 €</p>
|
||||
<p class="small">Soit 6.80 € après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-2">
|
||||
<button class="donation-btn donation-btn--full">
|
||||
<p class="bold">Choisissez votre montant</p>
|
||||
<p class="small">Avec déduction fiscale de 66 %</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div data-donnation="monthly" class="btn--donation__container is-selected">
|
||||
<button class="btn--donation">
|
||||
<div data-donation="monthly" class="donation-grid is-selected">
|
||||
<button class="donation-btn">
|
||||
<p class="bold">5€/mois</p>
|
||||
<p class="small">Soit X€ après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<button class="donation-btn donation-btn--wide">
|
||||
<p class="bold">10€/mois</p>
|
||||
<p class="small">Soit X€ après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<button class="donation-btn donation-btn--wide">
|
||||
<p class="bold">20€/mois</p>
|
||||
<p class="small">Soit X€ après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-1">
|
||||
<button class="donation-btn donation-btn--wide">
|
||||
<p class="bold">50€/mois</p>
|
||||
<p class="small">Soit X€ après impôts</p>
|
||||
</button>
|
||||
<button class="btn--donation btn--donation__grow-2">
|
||||
<button class="donation-btn donation-btn--full">
|
||||
<p class="bold">Choisissez votre montant</p>
|
||||
<p class="small">Avec déduction fiscale</p>
|
||||
</button>
|
||||
|
|
@ -668,60 +668,59 @@
|
|||
</section>
|
||||
|
||||
<section id="section__comments">
|
||||
<h2 class="section__heading">Commentaires de donateur·ices</h2>
|
||||
<h2 class="section-heading">Commentaires de donateur·ices</h2>
|
||||
|
||||
<div class="swiper" id="comments-slider">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide comment">
|
||||
<p class="comment__text">
|
||||
<p class="comment-text">
|
||||
Vous faites un travail admirable. Merci de faire avancer la
|
||||
Justice avec un grand J. Force à vous!
|
||||
</p>
|
||||
<p class="comment__name">Olivier</p>
|
||||
<p class="comment-name">Olivier</p>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide comment">
|
||||
<p class="comment__text">
|
||||
<p class="comment-text">
|
||||
Merci du travail salutaire, précieux et extrêmement
|
||||
professionnel que vous réalisez.
|
||||
</p>
|
||||
<p class="comment__name">Myriam</p>
|
||||
<p class="comment-name">Myriam</p>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide comment">
|
||||
<p class="comment__text">
|
||||
<p class="comment-text">
|
||||
Vous êtes vraiment d'utilité publique et les méthodes que vous
|
||||
utilisez méritent d'être popularisées.
|
||||
</p>
|
||||
<p class="comment__name">Frédéric</p>
|
||||
<p class="comment-name">Frédéric</p>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide comment">
|
||||
<p class="comment__text">
|
||||
<p class="comment-text">
|
||||
Merci de poursuivre cette quête inlassable pour révéler les
|
||||
vérités que l'on nous tait.
|
||||
</p>
|
||||
<p class="comment__name">Pauline</p>
|
||||
<p class="comment-name">Pauline</p>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide comment">
|
||||
<p class="comment__text">
|
||||
<p class="comment-text">
|
||||
Les enquêteurs d'Index font un travail essentiel pour la
|
||||
démocratie et la justice. Par ce soutien citoyen, j'exprime
|
||||
toute ma reconnaissance pour leur engagement et leur rigueur.
|
||||
</p>
|
||||
<p class="comment__name">Anne</p>
|
||||
<p class="comment-name">Anne</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination comments-slider__dots"></div>
|
||||
<div class="swiper-pagination comments-dots"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="btn--don__mobile">
|
||||
<button class="btn--don">
|
||||
<a href="#section__donation">
|
||||
<div id="donation-cta-mobile">
|
||||
<a href="#section__donation" class="donation-cta" role="button">
|
||||
<span class="txt">Faire un don</span>
|
||||
<span class="icon">
|
||||
<svg
|
||||
|
|
@ -738,21 +737,20 @@
|
|||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="site-footer">
|
||||
<div class="site-footer__container">
|
||||
<div class="footer__newsletter">
|
||||
<div class="footer-container">
|
||||
<div class="footer-newsletter">
|
||||
<p>
|
||||
Recevez les dernières enquêtes et actualités d’Index directement
|
||||
dans votre boîte mail.
|
||||
</p>
|
||||
<p>Inscrivez-vous à la newsletter</p>
|
||||
|
||||
<form class="form__newsletter">
|
||||
<form class="newsletter-form">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
|
|
@ -779,7 +777,7 @@
|
|||
</button>
|
||||
</form>
|
||||
|
||||
<p class="p__small">
|
||||
<p class="text-small">
|
||||
En vous inscrivant, vous acceptez les
|
||||
<a target="_blank" href="https://www.index.ngo/mentions-legales/"
|
||||
>conditions d’utilisation</a
|
||||
|
|
@ -789,10 +787,10 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer__socials">
|
||||
<div class="footer-socials">
|
||||
<p>Suivez Index sur les réseaux sociaux</p>
|
||||
|
||||
<ul id="list-socials">
|
||||
<ul id="socials-list">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.youtube.com/index-ngo"
|
||||
|
|
@ -973,8 +971,8 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer__mentions">
|
||||
<p class="p__small">
|
||||
<div class="footer-mentions">
|
||||
<p class="text-small">
|
||||
© 2025 Index Investigation |
|
||||
<a target="_blank" href="https://www.index.ngo/mentions-legales/"
|
||||
>Mentions légales</a
|
||||
|
|
@ -993,7 +991,7 @@
|
|||
disableOnInteraction: false, // continue après un swipe
|
||||
},
|
||||
pagination: {
|
||||
el: '.comments-slider__dots',
|
||||
el: '.comments-dots',
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue