3bcb51c829
- Add Donorbox configuration in site/config/config.php with API settings - Create controller for support page to fetch campaign data from API - Update support.php template with dynamic donation buttons and gauge - Transform static buttons into dynamic links with proper URL parameters - Add JavaScript for tab switching between one-time and monthly donations - Calculate donation percentage and display real-time campaign stats The donation buttons now link directly to Donorbox with pre-filled amounts and intervals. API integration is ready but requires API key configuration. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
190 lines
No EOL
12 KiB
PHP
190 lines
No EOL
12 KiB
PHP
<?php snippet('header') ?>
|
||
|
||
<main>
|
||
<section id="section__player">
|
||
<div class="player__container">
|
||
<div class="player__element">
|
||
<video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="https://www.index.ngo/wp-content/uploads/2025/09/Enquete-GP_Extrait-embed-site-web.mp4"></video>
|
||
<button class="player__btn"><?= svg('assets/icons/play-button.svg') ?></button>
|
||
</div>
|
||
<div class="player__iframe">
|
||
<iframe src="https://www.youtube.com/embed/UN3ZVQVaypg"></iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="section__hero" class="section__page-don">
|
||
<div class="hero-heading__container" class="section__page-don">
|
||
<h2 class="hero-heading">Pour continuer à enquêter, Index a besoin de vous</h2>
|
||
</div>
|
||
<p class="p__baseline-big">Minutieuses et approfondies, nos enquêtes représentent des mois de travail par plusieurs membres de notre équipe. Tout ceci a un coût important.</p>
|
||
|
||
<div class="gauge__container">
|
||
<!-- calculet le pourcentage avec l’API ?-->
|
||
<div id="gauge" style="--pourcent: <?= $percentage ?>%"></div>
|
||
|
||
<div class="gauge--infos" id="gauge--infos__donnateurs">
|
||
<p class="property">Donnateur·ices</p>
|
||
<p class="value"><?= $donor_count ?></p>
|
||
</div>
|
||
|
||
<div class="gauge--infos" id="gauge--infos__objectif">
|
||
<p class="property">Objectif</p>
|
||
<p class="value"><?= number_format($goal_amount, 0, ',', ' ') ?>€</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="p__baseline">Soutenez-nous avant le 31 décembre 2021</p>
|
||
|
||
<button class="btn--bold"><a href="#" class="btn--bold__container"><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span> <span class="txt">Faire un don</span></a></button>
|
||
|
||
<p class="p__details">Le don donne droit à une réduction fiscale de 66%</p>
|
||
</section>
|
||
|
||
|
||
<section id="section__donation" class="subsection__page-don">
|
||
<p class="p__baseline-big">Index est une ONG d’investigation à but non-lucratif. Vos dons garantissent notre indépendance.</p>
|
||
|
||
<nav class="nav--tabs">
|
||
<button class="nav--tabs__btn is-selected" data-interval="o">Je donne une fois</button>
|
||
<button class="nav--tabs__btn" data-interval="m">Je donne tous les mois</button>
|
||
</nav>
|
||
|
||
<div class="btn--donation__container">
|
||
<a href="<?= $campaign_url ?>?amount=5&default_interval=o" class="btn--donation" data-amount="5">
|
||
<p class="bold"><span class="amount-value">5</span>€</p>
|
||
<p class="small">Soit <?= round(5 * 0.34) ?>€ <br>après impôts</p>
|
||
</a>
|
||
<a href="<?= $campaign_url ?>?amount=10&default_interval=o" class="btn--donation btn--donation__grow-1" data-amount="10">
|
||
<p class="bold"><span class="amount-value">10</span>€</p>
|
||
<p class="small">Soit <?= round(10 * 0.34) ?>€ <br>après impôts</p>
|
||
</a>
|
||
<a href="<?= $campaign_url ?>?amount=20&default_interval=o" class="btn--donation btn--donation__grow-1" data-amount="20">
|
||
<p class="bold"><span class="amount-value">20</span>€</p>
|
||
<p class="small">Soit <?= round(20 * 0.34) ?>€ <br>après impôts</p>
|
||
</a>
|
||
<a href="<?= $campaign_url ?>?amount=50&default_interval=o" class="btn--donation btn--donation__grow-1" data-amount="50">
|
||
<p class="bold"><span class="amount-value">50</span>€</p>
|
||
<p class="small">Soit <?= round(50 * 0.34) ?>€ <br>après impôts</p>
|
||
</a>
|
||
<a href="<?= $campaign_url ?>?default_interval=o" class="btn--donation btn--donation__grow-2">
|
||
<p class="small">Montant libre</p>
|
||
<p class="bold">Choisissez votre montant</p>
|
||
<p class="small">Avec déduction fiscale</p>
|
||
</a>
|
||
</div>
|
||
|
||
<p class="p__details">Le don donne droit à une réduction fiscale de 66%<br> Vous pouvez stopper votre don à tout moment</p>
|
||
</section>
|
||
|
||
|
||
<section id="section__comments" class="subsection__page-don">
|
||
<h4 class="subsection__heading">Commentaires de donnateur·ices</h4>
|
||
|
||
<div class="comments-slider">
|
||
<div class="comment">
|
||
<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>
|
||
</div>
|
||
|
||
<div class="comment">
|
||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
||
<p class="comment__name">Name</p>
|
||
</div>
|
||
|
||
<div class="comment">
|
||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
||
<p class="comment__name">Name</p>
|
||
</div>
|
||
|
||
<div class="comment">
|
||
<p class="comment__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
|
||
<p class="comment__name">Name</p>
|
||
</div>
|
||
</div>
|
||
<div class="comments-slider__dots"></div>
|
||
</section>
|
||
|
||
|
||
<section id="section__questions" class="section__page-don">
|
||
<h3 class="section__heading">Questions fréquentes</h3>
|
||
|
||
<details>
|
||
<summary>Pourquoi faire un don à index ?</summary>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary>À quoi va servir mon don ?</summary>
|
||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus, voluptate porro? Reprehenderit officia debitis suscipit ab deleniti possimus dignissimos error illum labore. Quos cumque modi alias repellendus, necessitatibus qui impedit nisi! Veritatis illo quod praesentium, voluptates explicabo accusantium reprehenderit ullam provident quaerat ipsum dignissimos molestias, deserunt voluptas dolor.</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary>Pourquoi faire un don à index ?</summary>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
|
||
</details>
|
||
|
||
<details>
|
||
<summary>Les dons sont-ils défiscalisables ?</summary>
|
||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus.</p>
|
||
</details>
|
||
|
||
|
||
<details>
|
||
<summary>Index, c’est quoi au juste ?</summary>
|
||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum tempore exercitationem asperiores ipsam pariatur! Esse ab, at labore doloribus sit aperiam quidem beatae id unde facere totam perferendis quod itaque voluptatem aut officia laudantium, aliquid quis earum quisquam alias soluta voluptatibus, voluptate porro? Reprehenderit officia debitis suscipit ab deleniti possimus dignissimos error illum labore. Quos cumque modi alias repellendus, necessitatibus qui impedit nisi! Veritatis illo quod praesentium, voluptates explicabo accusantium reprehenderit ullam provident quaerat ipsum dignissimos molestias, deserunt voluptas dolor.</p>
|
||
</details>
|
||
|
||
<button class="btn--bold"><a href="#" class="btn--bold__container"><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span> <span class="txt">Faire un don</span></a></button>
|
||
</section>
|
||
|
||
<section id="section__store" class="section__page-don">
|
||
<h3 class="section__heading">Boutique</h3>
|
||
<p class="p__baseline">Vous pouvez également soutenir Index en commandant des articles disponibles sur notre boutique.</p>
|
||
|
||
<div class="store__container">
|
||
<?php foreach(page('boutique')->children() as $product): ?>
|
||
<article class="store__product">
|
||
<?php if ($product->hasFiles()): ?>
|
||
<figure style="--data-bg: #000000">
|
||
<img src="<?= $product->files()->first()->url() ?>" alt="">
|
||
</figure>
|
||
<?php endif ?>
|
||
<p><?= $product->title() ?></p>
|
||
<?= $product->description() ?>
|
||
<a href="#" class="link-block" aria-hidden="true"></a>
|
||
</article>
|
||
<?php endforeach ?>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="section__newsletter" class="section__page-don">
|
||
<h3 class="section__heading">Nous suivre</h3>
|
||
|
||
<p class="p__baseline-big">Abonnez-vous <br>à la newsletter d’Index</p>
|
||
<p class="p__baseline">Recevez nos dernière publications et actualités directement dans votre boite mail.</p>
|
||
|
||
<form class="form__newsletter">
|
||
<input type="email" name="email" placeholder="Votre adresse e-mail*" required />
|
||
<button class="btn--bold" type="submit" aria-label="s’inscrire"><span class="btn--bold__container"><span class="txt">S’inscrire</span><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></span></button>
|
||
</form>
|
||
|
||
<p class="p__details">Votre adresse e-mail est uniquement utilisée pour vous envoyer notre newsletter ainsi que les informations relatives aux activités d’INDEX. Vous pouvez vous désinscrire à tout moment à l’aide du lien inclus dans chaque email.</p>
|
||
</section>
|
||
|
||
<section id="section__socials" class="subsection__page-don">
|
||
<h4 class="subsection__heading">Suivez Index sur les réseaux sociaux</h4>
|
||
<ul class="list-socials">
|
||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/linkedin.svg') ?></span><span>Linkedin</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||
<li><a href="#" class="link--external"><span class="icon"><?= svg('assets/icons/facebook.svg') ?></span><span>Facebook</span><span class="arrow"><?= svg('assets/icons/arrow-top-right.svg') ?></span></a></li>
|
||
</ul>
|
||
</section>
|
||
</main>
|
||
<?php snippet('footer') ?>
|