templates/donation/dons.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Faire un Don - Soutenir WA BENIN{% endblock %}
  5. {% block body %}
  6. <div class="page-header" style="height: 50vh; background-image: linear-gradient(rgba(192, 57, 43, 0.8), rgba(31, 31, 31, 0.9)), url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');">
  7. <div class="container fade-up" style="max-width: 800px;">
  8. <h1 class="page-title">Chaque Geste Compte</h1>
  9. <p style="font-size: 1.2rem; color: #fff; opacity: 0.9;">Votre générosité permet de préserver notre patrimoine, de soutenir nos artistes émergents et de financer les éditions du Festival WA BENIN.</p>
  10. </div>
  11. </div>
  13. <section class="section-padding" style="margin-top: -100px; position: relative; z-index: 10;">
  14. <div class="container">
  15. <div style="background: #fff; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-hover); padding: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px;">
  17. <!-- Donation Form -->
  18. <div>
  19. <h3 style="font-size: 1.8rem; margin-bottom: 30px;">Faire un Don Sécurisé</h3>
  21. <div style="display: flex; gap: 10px; margin-bottom: 25px;">
  22. <button type="button" class="btn btn-type active" data-type="unique" style="flex: 1; border-radius: 8px;">Don Unique</button>
  23. <button type="button" class="btn btn-type" data-type="mensuel" style="flex: 1; border-radius: 8px;">Don Mensuel</button>
  24. </div>
  26. <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px;">
  27. <div class="amount-box" data-amount="20">20€</div>
  28. <div class="amount-box active" data-amount="50">50€</div>
  29. <div class="amount-box" data-amount="100">100€</div>
  30. <div style="border: 2px solid #eee; padding: 15px; text-align: center; border-radius: 8px; transition: var(--transition); font-weight: bold; font-size: 1.2rem; grid-column: span 3;" class="amount-custom-box">
  31. <input type="number" id="custom_amount" placeholder="Montant libre (€)" min="5" style="border: none; background: transparent; width: 100%; text-align: center; font-size: 1.2rem; outline: none;">
  32. </div>
  33. </div>
  35. <form action="{{ path('app_checkout') }}" method="POST" id="donationForm" target="_blank">
  36. <input type="hidden" name="donation_type" id="donation_type" value="unique">
  37. <input type="hidden" name="amount" id="amount" value="50">
  39. <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
  40. <input type="text" name="firstname" placeholder="Prénom" required style="padding: 15px; border: 1px solid #ddd; border-radius: 8px; width: 100%; outline: none;">
  41. <input type="text" name="lastname" placeholder="Nom" required style="padding: 15px; border: 1px solid #ddd; border-radius: 8px; width: 100%; outline: none;">
  42. </div>
  43. <input type="email" name="email" placeholder="Adresse Email" required style="padding: 15px; border: 1px solid #ddd; border-radius: 8px; width: 100%; margin-bottom: 15px; outline: none;">
  45. <div style="margin-bottom: 15px;">
  46. <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
  47. <input type="checkbox" name="anonymous" value="1">
  48. <span style="color: #666;">Je souhaite faire un don anonyme (mon nom n'apparaîtra pas)</span>
  49. </label>
  50. </div>
  52. <div style="margin-bottom: 25px;">
  53. <select name="project_id" style="padding: 15px; border: 1px solid #ddd; border-radius: 8px; width: 100%; outline: none;">
  54. <option value="">Soutenir un projet spécifique (Optionnel)</option>
  55. {% for project in projects %}
  56. <option value="{{ project.id }}">{{ project.title }}</option>
  57. {% endfor %}
  58. </select>
  59. </div>
  61. <div style="margin-bottom: 25px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
  62. <span style="color: #666;"><i class="fas fa-lock" style="color: var(--green); margin-right: 10px;"></i> Paiement sécurisé via Stripe</span>
  63. <i class="fab fa-cc-stripe fa-2x" style="color: #635bff;"></i>
  64. </div>
  66. <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px; font-size: 1.1rem; border-radius: 8px; display: flex; justify-content: center; align-items: center; gap: 10px;">
  67. Valider mon don de <span id="submit_amount">50</span>€
  68. </button>
  69. </form>
  70. </div>
  72. <!-- Impact Information & Projects -->
  73. <div style="background: var(--white-off); padding: 40px; border-radius: 16px;">
  74. <h3 style="font-size: 1.8rem; margin-bottom: 30px;">Projets en cours de financement</h3>
  76. {% for project in projects|slice(0,3) %}
  77. <div style="margin-bottom: 30px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
  78. <h4 style="margin-bottom: 10px; font-size: 1.2rem;">{{ project.title }}</h4>
  79. <p style="color: #555; font-size: 0.9rem; margin-bottom: 15px;">{{ project.description|slice(0, 80) ~ '...' }}</p>
  81. <div style="width: 100%; background: #eee; height: 10px; border-radius: 5px; margin-bottom: 10px;">
  82. {% set percent = (project.currentAmount / project.targetAmount) * 100 %}
  83. <div style="width: {{ percent > 100 ? 100 : percent }}%; background: var(--green); height: 100%; border-radius: 5px;"></div>
  84. </div>
  85. <div style="display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: bold;">
  86. <span style="color: var(--green);">{{ project.currentAmount|number_format(0, ',', ' ') }} € collectés</span>
  87. <span style="color: #888;">Objectif : {{ project.targetAmount|number_format(0, ',', ' ') }} €</span>
  88. </div>
  89. </div>
  90. {% endfor %}
  92. <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;">
  93. <h4 style="color: var(--gold); margin-bottom: 10px; font-size: 1.3rem;">Pourquoi donner ?</h4>
  94. <ul style="color: #555; padding-left: 20px;">
  95. <li>Transparence totale sur l'utilisation des fonds</li>
  96. <li>Déduction fiscale à hauteur de 66% (selon juridiction)</li>
  97. <li>Impact direct sur les artistes locaux béninois</li>
  98. </ul>
  99. </div>
  100. </div>
  102. </div>
  103. </div>
  104. </section>
  106. <style>
  107. .btn-type {
  108. background: #f0f0f0;
  109. color: #555;
  110. }
  111. .btn-type.active {
  112. background: var(--black-dark);
  113. color: #fff;
  114. }
  115. .amount-box {
  116. border: 2px solid #eee;
  117. padding: 15px;
  118. text-align: center;
  119. border-radius: 8px;
  120. cursor: pointer;
  121. transition: var(--transition);
  122. font-weight: bold;
  123. font-size: 1.2rem;
  124. color: var(--black-dark);
  125. }
  126. .amount-box.active {
  127. border-color: var(--green);
  128. background: rgba(116, 172, 49, 0.1);
  129. color: var(--green);
  130. }
  131. .amount-custom-box:focus-within {
  132. border-color: var(--green);
  133. }
  134. </style>
  136. <script>
  137. document.addEventListener('DOMContentLoaded', function() {
  138. const btnTypes = document.querySelectorAll('.btn-type');
  139. const amountBoxes = document.querySelectorAll('.amount-box');
  140. const customAmountInput = document.getElementById('custom_amount');
  142. const hiddenType = document.getElementById('donation_type');
  143. const hiddenAmount = document.getElementById('amount');
  144. const submitAmountSpan = document.getElementById('submit_amount');
  146. // Type Selection
  147. btnTypes.forEach(btn => {
  148. btn.addEventListener('click', function() {
  149. btnTypes.forEach(b => b.classList.remove('active'));
  150. this.classList.add('active');
  151. hiddenType.value = this.getAttribute('data-type');
  152. });
  153. });
  155. // Amount Selection
  156. amountBoxes.forEach(box => {
  157. box.addEventListener('click', function() {
  158. amountBoxes.forEach(b => b.classList.remove('active'));
  159. this.classList.add('active');
  160. customAmountInput.value = ''; // clear custom
  161. const val = this.getAttribute('data-amount');
  162. hiddenAmount.value = val;
  163. submitAmountSpan.textContent = val;
  164. });
  165. });
  167. // Custom Amount
  168. customAmountInput.addEventListener('input', function() {
  169. amountBoxes.forEach(b => b.classList.remove('active'));
  170. const val = this.value;
  171. if(val && val >= 5) {
  172. hiddenAmount.value = val;
  173. submitAmountSpan.textContent = val;
  174. } else {
  175. hiddenAmount.value = 5;
  176. submitAmountSpan.textContent = "5";
  177. }
  178. });
  179. });
  180. </script>
  181. {% endblock %}