templates/abonn/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Abonnements — Journal Officiel de l'Union des Comores
  5. {# ================================================================
  6. MODAL CHECKOUT — Standard & Premium
  7. ================================================================ #}
  8. <div id="checkout-modal"
  9. class="fixed inset-0 z-50 hidden items-center justify-center p-4"
  10. role="dialog" aria-modal="true" aria-labelledby="modal-title">
  12. <!-- Overlay -->
  13. <div id="modal-overlay"
  14. class="absolute inset-0 bg-black/60 backdrop-blur-sm"
  15. onclick="closeCheckoutModal()"></div>
  17. <!-- Panel -->
  18. <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto z-10 animate-modal">
  20. <!-- Header -->
  21. <div id="modal-header" class="sticky top-0 z-20 bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between rounded-t-2xl">
  22. <div class="flex items-center gap-3">
  23. <!-- Étapes pills -->
  24. <div class="flex items-center gap-1 text-xs" id="modal-steps">
  25. <span class="modal-step-pill active w-6 h-6 rounded-full bg-[#006633] text-white flex items-center justify-center font-black text-[10px]" data-step="1">1</span>
  26. <div class="w-4 h-px bg-gray-200"></div>
  27. <span class="modal-step-pill w-6 h-6 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center font-black text-[10px]" data-step="2">2</span>
  28. <div class="w-4 h-px bg-gray-200"></div>
  29. <span class="modal-step-pill w-6 h-6 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center font-black text-[10px]" data-step="3">3</span>
  30. </div>
  31. <span class="text-sm font-semibold text-gray-600" id="modal-step-label">Récapitulatif</span>
  32. </div>
  33. <button type="button" onclick="closeCheckoutModal()"
  34. class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 transition">
  35. <i class="fas fa-times text-xs"></i>
  36. </button>
  37. </div>
  39. <!-- Corps du modal -->
  40. <div class="px-6 py-6">
  42. {# ── ÉTAPE 1 : Récapitulatif ── #}
  43. <div id="modal-step-1" class="modal-step-content">
  45. <!-- Badge plan sélectionné -->
  46. <div id="modal-plan-badge" class="rounded-xl p-4 mb-5 flex items-center gap-3">
  47. <div id="modal-plan-icon" class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0">
  48. <i class="fas fa-building text-white"></i>
  49. </div>
  50. <div>
  51. <p class="text-xs font-bold uppercase tracking-wider" id="modal-plan-sublabel">Abonnement</p>
  52. <p class="font-black text-lg" id="modal-plan-name">Standard</p>
  53. </div>
  54. <div class="ml-auto text-right">
  55. <p class="font-black text-xl" id="modal-plan-price">40 000 KMF</p>
  56. <p class="text-xs opacity-70" id="modal-plan-period">/ an · 1ère année</p>
  57. </div>
  58. </div>
  60. <!-- Durée -->
  61. <div class="mb-5">
  62. <label class="block text-sm font-bold text-gray-700 mb-3">Durée</label>
  63. <div class="grid grid-cols-2 gap-3">
  64. <label class="cursor-pointer">
  65. <input type="radio" name="modal-duree" value="annuel" class="sr-only" checked>
  66. <div class="modal-dur-card border-2 border-[#006633] bg-emerald-50/50 rounded-xl p-3 text-center transition-all">
  67. <p class="text-xs font-bold text-gray-700 mb-1">Annuel <span class="bg-[#006633] text-white text-[9px] px-1.5 py-0.5 rounded-full ml-1">−20%</span></p>
  68. <p class="font-black text-[#006633] text-base modal-dur-price" data-std-annuel="40 000" data-pre-annuel="72 000" data-std-mensuel="4 500" data-pre-mensuel="8 000"></p>
  69. <p class="text-[10px] text-gray-400">KMF / an</p>
  70. </div>
  71. </label>
  72. <label class="cursor-pointer">
  73. <input type="radio" name="modal-duree" value="mensuel" class="sr-only">
  74. <div class="modal-dur-card border-2 border-gray-200 bg-white rounded-xl p-3 text-center transition-all hover:border-gray-300">
  75. <p class="text-xs font-bold text-gray-700 mb-1">Mensuel</p>
  76. <p class="font-black text-gray-800 text-base modal-dur-mensuel-price"></p>
  77. <p class="text-[10px] text-gray-400">KMF / mois</p>
  78. </div>
  79. </label>
  80. </div>
  81. </div>
  83. <!-- Informations -->
  84. <div class="space-y-3 mb-5">
  85. <div class="grid grid-cols-2 gap-3">
  86. <div>
  87. <label class="block text-xs text-gray-500 mb-1">Prénom <span class="text-red-400">*</span></label>
  88. <input type="text" id="m-prenom" placeholder="Mohammed"
  89. class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  90. </div>
  91. <div>
  92. <label class="block text-xs text-gray-500 mb-1">Nom <span class="text-red-400">*</span></label>
  93. <input type="text" id="m-nom" placeholder="Said"
  94. class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  95. </div>
  96. </div>
  97. <div>
  98. <label class="block text-xs text-gray-500 mb-1">E-mail <span class="text-red-400">*</span></label>
  99. <input type="email" id="m-email" placeholder="votre@email.com"
  100. class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  101. </div>
  102. <div>
  103. <label class="block text-xs text-gray-500 mb-1">Organisation <span class="text-gray-400">(optionnel)</span></label>
  104. <input type="text" id="m-org" placeholder="Ministère, cabinet, entreprise..."
  105. class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  106. </div>
  107. </div>
  109. <button type="button" onclick="modalGoStep(2)"
  110. class="w-full bg-gradient-to-r from-[#006633] to-[#008040] text-white py-3.5 rounded-xl font-bold text-sm hover:from-[#004d26] transition shadow-md flex items-center justify-center gap-2">
  111. Continuer vers le paiement <i class="fas fa-arrow-right"></i>
  112. </button>
  113. </div>
  116. {# ── ÉTAPE 2 : Paiement ── #}
  117. <div id="modal-step-2" class="modal-step-content hidden">
  119. <button type="button" onclick="modalGoStep(1)"
  120. class="flex items-center gap-2 text-gray-400 hover:text-gray-600 text-xs mb-5 transition">
  121. <i class="fas fa-arrow-left"></i> Retour
  122. </button>
  124. <h3 class="text-base font-black text-gray-800 mb-4">Mode de paiement</h3>
  126. <div class="space-y-3 mb-5">
  128. <!-- Huri Money -->
  129. <label class="cursor-pointer block">
  130. <input type="radio" name="modal-methode" value="huri_money" class="sr-only" checked>
  131. <div class="modal-pay-card border-2 border-orange-400 bg-orange-50/40 rounded-xl p-3.5 flex items-center gap-3 transition-all">
  132. <div class="w-10 h-10 bg-orange-500 rounded-xl flex items-center justify-center flex-shrink-0">
  133. <i class="fas fa-mobile-alt text-white"></i>
  134. </div>
  135. <div class="flex-1">
  136. <p class="font-bold text-gray-800 text-sm">Huri Money</p>
  137. <p class="text-xs text-gray-500">Mobile Money · Comores Telecom</p>
  138. </div>
  139. <div class="w-4 h-4 rounded-full border-2 border-orange-400 flex items-center justify-center modal-radio-dot">
  140. <div class="w-2 h-2 rounded-full bg-orange-400"></div>
  141. </div>
  142. </div>
  143. </label>
  145. <!-- Mvola -->
  146. <label class="cursor-pointer block">
  147. <input type="radio" name="modal-methode" value="mvola" class="sr-only">
  148. <div class="modal-pay-card border-2 border-gray-200 bg-white rounded-xl p-3.5 flex items-center gap-3 transition-all hover:border-gray-300">
  149. <div class="w-10 h-10 bg-green-600 rounded-xl flex items-center justify-center flex-shrink-0">
  150. <i class="fas fa-mobile-alt text-white"></i>
  151. </div>
  152. <div class="flex-1">
  153. <p class="font-bold text-gray-800 text-sm">Mvola</p>
  154. <p class="text-xs text-gray-500">Mobile Money · Telma Comores</p>
  155. </div>
  156. <div class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center modal-radio-dot"></div>
  157. </div>
  158. </label>
  160. <!-- Holo -->
  161. <label class="cursor-pointer block">
  162. <input type="radio" name="modal-methode" value="holo" class="sr-only">
  163. <div class="modal-pay-card border-2 border-gray-200 bg-white rounded-xl p-3.5 flex items-center gap-3 transition-all hover:border-gray-300">
  164. <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
  165. <i class="fas fa-mobile-alt text-white"></i>
  166. </div>
  167. <div class="flex-1">
  168. <p class="font-bold text-gray-800 text-sm">Holo</p>
  169. <p class="text-xs text-gray-500">Mobile Money · Holo Comores</p>
  170. </div>
  171. <div class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center modal-radio-dot"></div>
  172. </div>
  173. </label>
  175. <!-- Visa désactivé -->
  176. <div class="border-2 border-dashed border-gray-200 rounded-xl p-3.5 flex items-center gap-3 opacity-50 cursor-not-allowed">
  177. <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
  178. <i class="fas fa-credit-card text-indigo-400"></i>
  179. </div>
  180. <div class="flex-1">
  181. <p class="font-bold text-gray-500 text-sm">Visa / Mastercard</p>
  182. <p class="text-xs text-gray-400">Bientôt disponible</p>
  183. </div>
  184. <span class="text-[10px] bg-gray-100 text-gray-400 px-2 py-0.5 rounded-full font-semibold">À venir</span>
  185. </div>
  186. </div>
  188. <!-- Numéro téléphone -->
  189. <div class="bg-gray-50 border border-gray-200 rounded-xl p-4 mb-5">
  190. <label class="block text-sm font-bold text-gray-700 mb-2">
  191. Numéro <span id="modal-provider-label" class="text-[#006633]">Huri Money</span>
  192. </label>
  193. <div class="flex gap-2">
  194. <div class="flex items-center gap-1.5 bg-white border border-gray-200 rounded-xl px-3 py-2.5 flex-shrink-0">
  195. <img src="https://flagcdn.com/w20/km.png" alt="+269" class="w-4 rounded-sm">
  196. <span class="text-sm text-gray-600 font-semibold">+269</span>
  197. </div>
  198. <input type="tel" id="m-phone" placeholder="321 12 34" maxlength="10"
  199. class="flex-1 border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  200. </div>
  201. <p class="text-[10px] text-gray-400 mt-1.5">
  202. <i class="fas fa-info-circle mr-1"></i> Vous recevrez une notification pour confirmer.
  203. </p>
  204. </div>
  206. <!-- Récapitulatif mini -->
  207. <div class="bg-gray-50 border border-gray-100 rounded-xl p-3.5 mb-5 flex items-center justify-between text-sm">
  208. <div>
  209. <p class="font-semibold text-gray-700" id="modal-recap-plan">Standard · Annuel</p>
  210. <p class="text-xs text-gray-400">1ère année — remise −20% appliquée</p>
  211. </div>
  212. <p class="font-black text-[#006633] text-lg" id="modal-recap-prix">40 000 KMF</p>
  213. </div>
  215. <!-- CGU -->
  216. <label class="flex items-start gap-2.5 cursor-pointer mb-5">
  217. <input type="checkbox" id="m-cgu"
  218. class="mt-0.5 w-4 h-4 rounded border-gray-300 text-[#006633] focus:ring-[#006633] flex-shrink-0">
  219. <span class="text-xs text-gray-500 leading-relaxed">
  220. J'accepte les
  221. <a href="#" class="text-[#006633] font-semibold hover:underline">CGU</a>
  222. et la
  223. <a href="#" class="text-[#006633] font-semibold hover:underline">Politique de confidentialité</a>.
  224. </span>
  225. </label>
  227. <button type="button" id="modal-btn-pay"
  228. class="w-full bg-gradient-to-r from-[#006633] to-[#008040] text-white py-4 rounded-xl font-black text-base hover:from-[#004d26] transition shadow-lg flex items-center justify-center gap-2">
  229. <i class="fas fa-lock text-sm"></i>
  230. <span id="modal-btn-pay-label">Payer 40 000 KMF</span>
  231. </button>
  232. <p class="text-center text-[10px] text-gray-400 mt-2">
  233. <i class="fas fa-shield-alt mr-1 text-[#006633]"></i> Paiement sécurisé
  234. </p>
  235. </div>
  238. {# ── ÉTAPE 3 : Confirmation ── #}
  239. <div id="modal-step-3" class="modal-step-content hidden text-center py-4">
  240. <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
  241. <i class="fas fa-check-circle text-3xl text-[#006633]"></i>
  242. </div>
  243. <h3 class="text-xl font-black text-gray-800 mb-1">Abonnement activé !</h3>
  244. <p class="text-gray-500 text-sm mb-1">
  245. Votre abonnement <strong id="modal-confirm-plan" class="text-gray-800">Standard</strong> est actif.
  246. </p>
  247. <p class="text-xs text-gray-400 mb-5">
  248. Réf : <span id="modal-confirm-ref" class="font-mono font-semibold text-gray-600"></span>
  249. </p>
  251. <div class="bg-gray-50 rounded-xl border border-gray-100 p-4 text-left text-sm mb-5 space-y-2">
  252. <div class="flex justify-between">
  253. <span class="text-gray-500">Plan</span>
  254. <span class="font-semibold text-gray-800" id="modal-conf-plan2">Standard</span>
  255. </div>
  256. <div class="flex justify-between">
  257. <span class="text-gray-500">Durée</span>
  258. <span class="font-semibold text-gray-800" id="modal-conf-duree">Annuel</span>
  259. </div>
  260. <div class="flex justify-between">
  261. <span class="text-gray-500">Montant</span>
  262. <span class="font-bold text-[#006633]" id="modal-conf-montant">40 000 KMF</span>
  263. </div>
  264. <div class="flex justify-between">
  265. <span class="text-gray-500">Renouvellement</span>
  266. <span class="font-semibold text-gray-800" id="modal-conf-renouvellement">—</span>
  267. </div>
  268. </div>
  270. <div class="flex flex-col gap-3">
  271. <a href="{{ path('app_dashboard') }}"
  272. class="block w-full bg-[#006633] text-white py-3 rounded-xl font-bold text-sm hover:bg-[#004d26] transition">
  273. <i class="fas fa-tachometer-alt mr-2"></i> Accéder à mon espace
  274. </a>
  275. <button type="button" onclick="closeCheckoutModal()"
  276. class="block w-full border border-gray-200 text-gray-600 py-3 rounded-xl font-semibold text-sm hover:bg-gray-50 transition">
  277. Fermer
  278. </button>
  279. </div>
  280. </div>
  282. </div>
  283. </div>
  284. </div>
  287. <style>
  288. @keyframes modalIn {
  289. from { opacity: 0; transform: scale(0.96) translateY(10px); }
  290. to { opacity: 1; transform: scale(1) translateY(0); }
  291. }
  292. .animate-modal { animation: modalIn 0.25s ease-out; }
  293. </style>
  296. <script>
  297. (function () {
  299. const PRIX = {
  300. standard: { annuel: 40000, mensuel: 4500, plein: 50000 },
  301. premium: { annuel: 72000, mensuel: 8000, plein: 90000 },
  302. };
  303. const LABELS = { standard: 'Standard', premium: 'Premium' };
  304. const PROVIDERS = { huri_money: 'Huri Money', mvola: 'Mvola', holo: 'Holo' };
  306. let currentPlan = 'standard';
  307. let currentDuree = 'annuel';
  309. // ── Ouvrir / fermer ────────────────────────────────────────────────────────
  310. window.openCheckoutModal = function (plan) {
  311. currentPlan = plan || 'standard';
  312. currentDuree = 'annuel';
  313. modalGoStep(1);
  314. updateModalPlanUI();
  315. updatePrices();
  317. const modal = document.getElementById('checkout-modal');
  318. modal.classList.remove('hidden');
  319. modal.classList.add('flex');
  320. document.body.style.overflow = 'hidden';
  321. };
  323. window.closeCheckoutModal = function () {
  324. const modal = document.getElementById('checkout-modal');
  325. modal.classList.add('hidden');
  326. modal.classList.remove('flex');
  327. document.body.style.overflow = '';
  328. };
  330. // Fermer avec Escape
  331. document.addEventListener('keydown', e => {
  332. if (e.key === 'Escape') closeCheckoutModal();
  333. });
  335. // ── Navigation étapes ──────────────────────────────────────────────────────
  336. window.modalGoStep = function (n) {
  337. if (n === 2) {
  338. const prenom = document.getElementById('m-prenom')?.value.trim();
  339. const nom = document.getElementById('m-nom')?.value.trim();
  340. const email = document.getElementById('m-email')?.value.trim();
  341. if (!prenom || !nom) { alert('Veuillez renseigner votre prénom et nom.'); return; }
  342. if (!email || !email.includes('@')) { alert('Adresse e-mail invalide.'); return; }
  343. }
  345. document.querySelectorAll('.modal-step-content').forEach(s => s.classList.add('hidden'));
  346. document.getElementById('modal-step-' + n)?.classList.remove('hidden');
  348. // Étapes pills
  349. const pills = document.querySelectorAll('.modal-step-pill');
  350. pills.forEach(pill => {
  351. const s = parseInt(pill.dataset.step);
  352. if (s < n) {
  353. pill.className = 'modal-step-pill w-6 h-6 rounded-full bg-[#006633] text-white flex items-center justify-center font-black text-[10px]';
  354. pill.innerHTML = '<i class="fas fa-check text-[9px]"></i>';
  355. } else if (s === n) {
  356. pill.className = 'modal-step-pill w-6 h-6 rounded-full bg-[#006633] text-white flex items-center justify-center font-black text-[10px]';
  357. pill.textContent = s;
  358. } else {
  359. pill.className = 'modal-step-pill w-6 h-6 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center font-black text-[10px]';
  360. pill.textContent = s;
  361. }
  362. });
  364. const labels = { 1: 'Récapitulatif', 2: 'Paiement', 3: 'Confirmation' };
  365. const labelEl = document.getElementById('modal-step-label');
  366. if (labelEl) labelEl.textContent = labels[n];
  367. };
  369. // ── UI selon le plan ───────────────────────────────────────────────────────
  370. function updateModalPlanUI() {
  371. const isPremium = currentPlan === 'premium';
  372. const badge = document.getElementById('modal-plan-badge');
  373. const icon = document.getElementById('modal-plan-icon');
  374. const sub = document.getElementById('modal-plan-sublabel');
  375. const name = document.getElementById('modal-plan-name');
  377. if (isPremium) {
  378. badge.className = 'rounded-xl p-4 mb-5 flex items-center gap-3 bg-gradient-to-r from-[#00391a] to-[#006633] text-white';
  379. icon.className = 'w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0';
  380. icon.innerHTML = '<i class="fas fa-crown text-amber-400"></i>';
  381. sub.className = 'text-xs font-bold uppercase tracking-wider text-emerald-300';
  382. name.className = 'font-black text-lg text-white';
  383. } else {
  384. badge.className = 'rounded-xl p-4 mb-5 flex items-center gap-3 bg-emerald-50 border border-emerald-200';
  385. icon.className = 'w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0';
  386. icon.innerHTML = '<i class="fas fa-building text-[#006633]"></i>';
  387. sub.className = 'text-xs font-bold uppercase tracking-wider text-[#006633]';
  388. name.className = 'font-black text-lg text-gray-800';
  389. }
  390. if (name) name.textContent = LABELS[currentPlan];
  391. }
  393. // ── Mise à jour prix ───────────────────────────────────────────────────────
  394. function updatePrices() {
  395. const prix = PRIX[currentPlan][currentDuree];
  396. const isPremium = currentPlan === 'premium';
  398. // Badge header
  399. const priceEl = document.getElementById('modal-plan-price');
  400. const periodEl = document.getElementById('modal-plan-period');
  401. if (priceEl) priceEl.textContent = prix.toLocaleString('fr-FR') + ' KMF';
  402. if (periodEl) periodEl.textContent = currentDuree === 'annuel' ? '/ an · 1ère année' : '/ mois';
  404. // Cards durée
  405. const annuelPriceEl = document.querySelector('.modal-dur-price');
  406. const mensuelPriceEl = document.querySelector('.modal-dur-mensuel-price');
  407. if (annuelPriceEl) annuelPriceEl.textContent = PRIX[currentPlan].annuel.toLocaleString('fr-FR');
  408. if (mensuelPriceEl) mensuelPriceEl.textContent = PRIX[currentPlan].mensuel.toLocaleString('fr-FR');
  410. // Récap étape 2
  411. const recapPlan = document.getElementById('modal-recap-plan');
  412. const recapPrix = document.getElementById('modal-recap-prix');
  413. if (recapPlan) recapPlan.textContent = LABELS[currentPlan] + ' · ' + (currentDuree === 'annuel' ? 'Annuel' : 'Mensuel');
  414. if (recapPrix) recapPrix.textContent = prix.toLocaleString('fr-FR') + ' KMF';
  416. // Bouton payer
  417. const btnLabel = document.getElementById('modal-btn-pay-label');
  418. if (btnLabel) btnLabel.textContent = 'Payer ' + prix.toLocaleString('fr-FR') + ' KMF';
  420. // Couleur bouton payer si premium
  421. const btnPay = document.getElementById('modal-btn-pay');
  422. if (btnPay) {
  423. if (isPremium) {
  424. btnPay.className = btnPay.className.replace('from-[#006633] to-[#008040]', 'from-amber-500 to-amber-400').replace('hover:from-[#004d26]', 'hover:from-amber-600');
  425. } else {
  426. btnPay.className = btnPay.className.replace('from-amber-500 to-amber-400', 'from-[#006633] to-[#008040]').replace('hover:from-amber-600', 'hover:from-[#004d26]');
  427. }
  428. }
  429. }
  431. // ── Changement durée ──────────────────────────────────────────────────────
  432. document.querySelectorAll('input[name="modal-duree"]').forEach(radio => {
  433. radio.addEventListener('change', function () {
  434. currentDuree = this.value;
  435. updatePrices();
  437. document.querySelectorAll('.modal-dur-card').forEach(c => {
  438. c.className = c.className
  439. .replace('border-[#006633] bg-emerald-50/50', 'border-gray-200 bg-white')
  440. .replace('border-gray-200 bg-white', 'border-gray-200 bg-white');
  441. });
  442. const active = this.closest('label').querySelector('.modal-dur-card');
  443. active.className = active.className.replace('border-gray-200 bg-white', 'border-[#006633] bg-emerald-50/50');
  444. });
  445. });
  447. // ── Changement méthode paiement ───────────────────────────────────────────
  448. const COLORS = { huri_money: ['orange-400', 'orange-50/40'], mvola: ['green-600', 'green-50/40'], holo: ['blue-600', 'blue-50/40'] };
  450. document.querySelectorAll('input[name="modal-methode"]').forEach(radio => {
  451. radio.addEventListener('change', function () {
  452. document.querySelectorAll('.modal-pay-card').forEach(c => {
  453. c.className = 'modal-pay-card border-2 border-gray-200 bg-white rounded-xl p-3.5 flex items-center gap-3 transition-all hover:border-gray-300';
  454. });
  455. document.querySelectorAll('.modal-radio-dot').forEach(d => d.innerHTML = '');
  457. const [border, bg] = COLORS[this.value] || ['gray-400', 'gray-50'];
  458. const card = this.closest('label').querySelector('.modal-pay-card');
  459. card.className = `modal-pay-card border-2 border-${border} bg-${bg} rounded-xl p-3.5 flex items-center gap-3 transition-all`;
  460. const dot = this.closest('label').querySelector('.modal-radio-dot');
  461. dot.innerHTML = `<div class="w-2 h-2 rounded-full bg-${border}"></div>`;
  462. dot.className = `w-4 h-4 rounded-full border-2 border-${border} flex items-center justify-center modal-radio-dot`;
  464. const label = document.getElementById('modal-provider-label');
  465. if (label) label.textContent = PROVIDERS[this.value] || this.value;
  466. });
  467. });
  469. // ── Bouton payer ───────────────────────────────────────────────────────────
  470. document.getElementById('modal-btn-pay')?.addEventListener('click', async function () {
  471. const cgu = document.getElementById('m-cgu')?.checked;
  472. const phone = document.getElementById('m-phone')?.value.trim().replace(/\s/g, '');
  474. if (!cgu) { alert('Veuillez accepter les CGU.'); return; }
  475. if (phone.length < 7) { alert('Numéro de téléphone invalide.'); return; }
  477. this.disabled = true;
  478. this.innerHTML = '<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>&nbsp;Traitement…';
  480. // TODO : remplacer par l'appel API de paiement réel
  481. await new Promise(r => setTimeout(r, 1800));
  483. // Remplir confirmation
  484. const ref = 'JO-' + Date.now().toString(36).toUpperCase();
  485. const prix = PRIX[currentPlan][currentDuree];
  486. const date = new Date();
  487. currentDuree === 'annuel' ? date.setFullYear(date.getFullYear() + 1) : date.setMonth(date.getMonth() + 1);
  489. document.getElementById('modal-confirm-plan').textContent = LABELS[currentPlan];
  490. document.getElementById('modal-confirm-ref').textContent = ref;
  491. document.getElementById('modal-conf-plan2').textContent = LABELS[currentPlan];
  492. document.getElementById('modal-conf-duree').textContent = currentDuree === 'annuel' ? 'Annuel' : 'Mensuel';
  493. document.getElementById('modal-conf-montant').textContent = prix.toLocaleString('fr-FR') + ' KMF';
  494. document.getElementById('modal-conf-renouvellement').textContent = date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
  496. modalGoStep(3);
  497. });
  499. })();
  500. </script>
  502. {% endblock %}
  504. {% block body %}
  506. {# ================================================================
  507. PAGE ABONNEMENT — CDC conforme
  508. Gratuit / Standard 50 000 KMF / Premium 90 000 KMF
  509. Remise -20% première année sur les offres payantes
  510. Paiement : Huri Money, Mvola, Holo, Visa/Mastercard
  511. ================================================================ #}
  513. <!-- Hero -->
  514. <section class="relative bg-gradient-to-br from-[#00391a] via-[#006633] to-[#008040] text-white overflow-hidden">
  515. <div class="absolute inset-0 pointer-events-none opacity-10">
  516. <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
  517. <pattern id="dots" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
  518. <circle cx="2" cy="2" r="1.5" fill="white"/>
  519. </pattern>
  520. <rect width="100%" height="100%" fill="url(#dots)"/>
  521. </svg>
  522. </div>
  523. <div class="absolute top-0 right-0 w-96 h-96 bg-[#00994d] rounded-full blur-3xl opacity-20 -translate-y-1/2 translate-x-1/4"></div>
  525. <div class="container mx-auto px-4 py-20 relative z-10 text-center">
  526. <div class="inline-flex items-center gap-2 bg-white/15 backdrop-blur-sm border border-white/20 rounded-full px-5 py-2 mb-6 text-sm font-medium">
  527. <i class="fas fa-shield-alt text-emerald-300"></i>
  528. Accès officiel au Journal Officiel de l'Union des Comores
  529. </div>
  530. <h1 class="text-4xl md:text-5xl font-black mb-4 leading-tight">
  531. Choisissez votre accès
  532. </h1>
  533. <p class="text-white/75 max-w-xl mx-auto text-base leading-relaxed mb-8">
  534. De la consultation gratuite à la recherche enrichie par intelligence artificielle —
  535. un abonnement adapté à chaque besoin institutionnel, juridique ou citoyen.
  536. </p>
  538. <!-- Toggle Annuel / Mensuel -->
  539. <div class="inline-flex items-center bg-white/10 border border-white/20 rounded-full p-1 gap-1">
  540. <button id="btn-annuel"
  541. class="px-5 py-2 rounded-full text-sm font-semibold bg-white text-[#006633] transition-all duration-200">
  542. Annuel <span class="ml-1 text-xs bg-emerald-500 text-white px-1.5 py-0.5 rounded-full">−20%</span>
  543. </button>
  544. <button id="btn-mensuel"
  545. class="px-5 py-2 rounded-full text-sm font-semibold text-white/70 hover:text-white transition-all duration-200">
  546. Mensuel
  547. </button>
  548. </div>
  549. </div>
  551. <div class="absolute bottom-0 left-0 right-0">
  552. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" class="w-full">
  553. <path fill="#f9fafb" fill-opacity="1" d="M0,30L360,50L720,20L1080,50L1440,30L1440,60L0,60Z"></path>
  554. </svg>
  555. </div>
  556. </section>
  559. <!-- Cartes tarifs -->
  560. <section class="py-16 bg-gray-50" id="tarifs">
  561. <div class="container mx-auto px-4">
  562. <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto items-stretch">
  564. <!-- ── GRATUIT ─────────────────────────────────────── -->
  565. <div class="bg-white rounded-2xl border border-gray-200 shadow-sm flex flex-col overflow-hidden hover:shadow-md transition-shadow duration-300">
  566. <div class="p-7 flex-1">
  567. <div class="flex items-center gap-3 mb-5">
  568. <div class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center">
  569. <i class="fas fa-user text-gray-500"></i>
  570. </div>
  571. <div>
  572. <p class="text-xs font-bold text-gray-400 uppercase tracking-widest">Accès</p>
  573. <h2 class="text-lg font-black text-gray-800">Gratuit</h2>
  574. </div>
  575. </div>
  577. <div class="mb-6">
  578. <span class="text-4xl font-black text-gray-800">0</span>
  579. <span class="text-gray-400 text-sm ml-1">KMF / an</span>
  580. </div>
  582. <p class="text-gray-500 text-sm mb-6">
  583. Accès en lecture aux publications officielles et moteur de recherche par filtres.
  584. </p>
  586. <ul class="space-y-3 text-sm">
  587. {% set gratuit_features = [
  588. {ok: true, label: 'Consultation numéros complets (PDF)'},
  589. {ok: true, label: 'Moteur de recherche par filtres'},
  590. {ok: true, label: 'Accès aux derniers actes publiés'},
  591. {ok: false, label: 'Alertes & veille juridique'},
  592. {ok: false, label: 'Textes isolés (< 5 ans)'},
  593. {ok: false, label: 'Archives & réquisitions foncières'},
  594. {ok: false, label: 'Recherche Ibunas.IA (OCR + IA)'},
  595. {ok: false, label: 'Alertes personnalisées par thème'},
  596. ] %}
  597. {% for f in gratuit_features %}
  598. <li class="flex items-start gap-3">
  599. {% if f.ok %}
  600. <i class="fas fa-check-circle text-[#006633] mt-0.5 flex-shrink-0"></i>
  601. <span class="text-gray-700">{{ f.label }}</span>
  602. {% else %}
  603. <i class="fas fa-times-circle text-gray-300 mt-0.5 flex-shrink-0"></i>
  604. <span class="text-gray-400">{{ f.label }}</span>
  605. {% endif %}
  606. </li>
  607. {% endfor %}
  608. </ul>
  609. </div>
  611. <div class="p-7 pt-0">
  612. {% if app.user %}
  613. <a href="{{ path('app_dashboard') }}"
  614. class="block w-full text-center border-2 border-gray-200 text-gray-600 py-3 rounded-xl text-sm font-semibold hover:border-gray-300 hover:bg-gray-50 transition">
  615. Votre accès actuel
  616. </a>
  617. {% else %}
  618. <a href=""
  619. class="block w-full text-center border-2 border-gray-200 text-gray-600 py-3 rounded-xl text-sm font-semibold hover:border-gray-300 hover:bg-gray-50 transition">
  620. Créer un compte gratuit
  621. </a>
  622. {% endif %}
  623. </div>
  624. </div>
  627. <!-- ── STANDARD ────────────────────────────────────── -->
  628. <div class="bg-white rounded-2xl border-2 border-[#006633]/30 shadow-lg flex flex-col overflow-hidden hover:shadow-xl transition-shadow duration-300 relative">
  629. <!-- Badge populaire -->
  630. <div class="absolute top-4 right-4">
  631. <span class="bg-[#006633] text-white text-xs font-bold px-3 py-1 rounded-full">
  632. Populaire
  633. </span>
  634. </div>
  636. <div class="h-1.5 bg-gradient-to-r from-[#006633] to-[#00994d]"></div>
  638. <div class="p-7 flex-1">
  639. <div class="flex items-center gap-3 mb-5">
  640. <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
  641. <i class="fas fa-building text-[#006633]"></i>
  642. </div>
  643. <div>
  644. <p class="text-xs font-bold text-[#006633] uppercase tracking-widest">Abonnement</p>
  645. <h2 class="text-lg font-black text-gray-800">Standard</h2>
  646. </div>
  647. </div>
  649. <!-- Prix annuel -->
  650. <div class="mb-1 price-block" data-annuel="true">
  651. <div class="flex items-baseline gap-2">
  652. <span class="text-4xl font-black text-gray-800 price-value" data-annuel="40000" data-mensuel="4500">40 000</span>
  653. <span class="text-gray-400 text-sm price-unit">KMF / an</span>
  654. </div>
  655. <p class="text-xs text-emerald-600 font-semibold mt-1">
  656. <i class="fas fa-tag mr-1"></i>
  657. <span class="price-promo">−20% la 1ère année · au lieu de 50 000 KMF</span>
  658. </p>
  659. </div>
  661. <p class="text-gray-500 text-sm mb-6 mt-4">
  662. Pour les professionnels du droit, entreprises et administrations ayant besoin d'un suivi régulier.
  663. </p>
  665. <ul class="space-y-3 text-sm">
  666. {% set standard_features = [
  667. {ok: true, label: 'Consultation numéros complets (PDF)'},
  668. {ok: true, label: 'Moteur de recherche par filtres'},
  669. {ok: true, label: 'Alertes & veille juridique'},
  670. {ok: true, label: 'Textes isolés (actes < 5 ans)'},
  671. {ok: false, label: 'Archives historiques (> 5 ans)'},
  672. {ok: false, label: 'Réquisitions & actes fonciers'},
  673. {ok: false, label: 'Recherche Ibunas.IA (OCR + IA)'},
  674. {ok: false, label: 'Alertes personnalisées par thème'},
  675. ] %}
  676. {% for f in standard_features %}
  677. <li class="flex items-start gap-3">
  678. {% if f.ok %}
  679. <i class="fas fa-check-circle text-[#006633] mt-0.5 flex-shrink-0"></i>
  680. <span class="text-gray-700">{{ f.label }}</span>
  681. {% else %}
  682. <i class="fas fa-times-circle text-gray-300 mt-0.5 flex-shrink-0"></i>
  683. <span class="text-gray-400">{{ f.label }}</span>
  684. {% endif %}
  685. </li>
  686. {% endfor %}
  687. </ul>
  688. </div>
  690. <div class="p-7 pt-0">
  691. <button type="button" onclick="openCheckoutModal('standard')"
  692. class="block w-full text-center bg-gradient-to-r from-[#006633] to-[#008040] text-white py-3 rounded-xl text-sm font-bold hover:from-[#004d26] hover:to-[#006633] transition shadow-md hover:shadow-lg">
  693. <i class="fas fa-arrow-right mr-2"></i> Choisir Standard
  694. </button>
  695. <p class="text-center text-xs text-gray-400 mt-2">Sans engagement · Résiliable à tout moment</p>
  696. </div>
  697. </div>
  700. <!-- ── PREMIUM ─────────────────────────────────────── -->
  701. <div class="bg-gradient-to-br from-[#00391a] to-[#006633] rounded-2xl shadow-xl flex flex-col overflow-hidden hover:shadow-2xl transition-shadow duration-300 relative text-white">
  702. <!-- Badge IA -->
  703. <div class="absolute top-4 right-4">
  704. <span class="bg-amber-400 text-amber-900 text-xs font-black px-3 py-1 rounded-full flex items-center gap-1">
  705. <i class="fas fa-microchip text-[10px]"></i> Ibunas.IA
  706. </span>
  707. </div>
  709. <div class="p-7 flex-1">
  710. <div class="flex items-center gap-3 mb-5">
  711. <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
  712. <i class="fas fa-crown text-amber-400"></i>
  713. </div>
  714. <div>
  715. <p class="text-xs font-bold text-emerald-300 uppercase tracking-widest">Abonnement</p>
  716. <h2 class="text-lg font-black text-white">Premium</h2>
  717. </div>
  718. </div>
  720. <div class="mb-1">
  721. <div class="flex items-baseline gap-2">
  722. <span class="text-4xl font-black text-white price-value" data-annuel="72000" data-mensuel="8000">72 000</span>
  723. <span class="text-white/60 text-sm price-unit">KMF / an</span>
  724. </div>
  725. <p class="text-xs text-amber-300 font-semibold mt-1">
  726. <i class="fas fa-tag mr-1"></i>
  727. <span class="price-promo">−20% la 1ère année · au lieu de 90 000 KMF</span>
  728. </p>
  729. </div>
  731. <p class="text-white/65 text-sm mb-6 mt-4">
  732. Accès complet aux archives, réquisitions foncières et moteur Ibunas.IA avec recherche OCR dans le contenu des actes.
  733. </p>
  735. <ul class="space-y-3 text-sm">
  736. {% set premium_features = [
  737. {label: 'Consultation numéros complets (PDF)'},
  738. {label: 'Moteur de recherche par filtres'},
  739. {label: 'Alertes & veille juridique avancée'},
  740. {label: 'Textes isolés (actes < 5 ans)'},
  741. {label: 'Archives historiques (> 5 ans)'},
  742. {label: 'Réquisitions & actes fonciers'},
  743. {label: 'Recherche Ibunas.IA · OCR + IA'},
  744. {label: 'Alertes personnalisées par thème'},
  745. ] %}
  746. {% for f in premium_features %}
  747. <li class="flex items-start gap-3">
  748. <i class="fas fa-check-circle text-amber-400 mt-0.5 flex-shrink-0"></i>
  749. <span class="text-white/90">{{ f.label }}</span>
  750. </li>
  751. {% endfor %}
  752. </ul>
  753. </div>
  755. <div class="p-7 pt-0">
  756. <button type="button" onclick="openCheckoutModal('premium')"
  757. class="block w-full text-center bg-amber-400 text-amber-900 py-3 rounded-xl text-sm font-black hover:bg-amber-300 transition shadow-md hover:shadow-lg">
  758. <i class="fas fa-crown mr-2"></i> Choisir Premium
  759. </button>
  760. <p class="text-center text-xs text-white/40 mt-2">Sans engagement · Résiliable à tout moment</p>
  761. </div>
  762. </div>
  764. </div>
  766. <!-- Note remise -->
  767. <p class="text-center text-xs text-gray-400 mt-6">
  768. <i class="fas fa-info-circle mr-1"></i>
  769. La remise de −20% s'applique uniquement lors de la 1ère année de souscription.
  770. Le tarif plein est appliqué au renouvellement.
  771. </p>
  772. </div>
  773. </section>
  776. <!-- Moyens de paiement -->
  777. <section class="py-12 bg-white border-t border-gray-100">
  778. <div class="container mx-auto px-4">
  779. <div class="max-w-3xl mx-auto text-center">
  780. <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-5">
  781. Moyens de paiement acceptés
  782. </p>
  783. <div class="flex flex-wrap justify-center items-center gap-6">
  784. <div class="flex items-center gap-2.5 bg-gray-50 border border-gray-200 rounded-xl px-5 py-3">
  785. <div class="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center">
  786. <i class="fas fa-mobile-alt text-white text-sm"></i>
  787. </div>
  788. <div class="text-left">
  789. <p class="text-xs font-bold text-gray-800">Huri Money</p>
  790. <p class="text-[10px] text-gray-400">Mobile Money</p>
  791. </div>
  792. </div>
  793. <div class="flex items-center gap-2.5 bg-gray-50 border border-gray-200 rounded-xl px-5 py-3">
  794. <div class="w-8 h-8 bg-green-600 rounded-lg flex items-center justify-center">
  795. <i class="fas fa-mobile-alt text-white text-sm"></i>
  796. </div>
  797. <div class="text-left">
  798. <p class="text-xs font-bold text-gray-800">Mvola</p>
  799. <p class="text-[10px] text-gray-400">Mobile Money</p>
  800. </div>
  801. </div>
  802. <div class="flex items-center gap-2.5 bg-gray-50 border border-gray-200 rounded-xl px-5 py-3">
  803. <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
  804. <i class="fas fa-mobile-alt text-white text-sm"></i>
  805. </div>
  806. <div class="text-left">
  807. <p class="text-xs font-bold text-gray-800">Holo</p>
  808. <p class="text-[10px] text-gray-400">Mobile Money</p>
  809. </div>
  810. </div>
  811. <div class="flex items-center gap-2.5 bg-gray-50 border border-gray-200 rounded-xl px-5 py-3 opacity-60">
  812. <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
  813. <i class="fas fa-credit-card text-white text-sm"></i>
  814. </div>
  815. <div class="text-left">
  816. <p class="text-xs font-bold text-gray-800">Visa / Mastercard</p>
  817. <p class="text-[10px] text-gray-400">Bientôt disponible</p>
  818. </div>
  819. </div>
  820. </div>
  821. </div>
  822. </div>
  823. </section>
  826. <!-- Tableau comparatif complet -->
  827. <section class="py-16 bg-gray-50">
  828. <div class="container mx-auto px-4">
  829. <div class="max-w-5xl mx-auto">
  830. <h2 class="text-2xl font-black text-gray-800 text-center mb-2">Comparaison détaillée</h2>
  831. <p class="text-gray-500 text-center text-sm mb-10">Toutes les fonctionnalités, offre par offre</p>
  833. <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
  834. <div class="overflow-x-auto">
  835. <table class="w-full text-sm min-w-[560px]">
  836. <thead>
  837. <tr class="border-b border-gray-100">
  838. <th class="text-left p-4 text-gray-500 font-semibold w-1/2">Fonctionnalité</th>
  839. <th class="text-center p-4 text-gray-600 font-bold">Gratuit</th>
  840. <th class="text-center p-4 text-[#006633] font-bold">Standard</th>
  841. <th class="text-center p-4 font-bold">
  842. <span class="text-[#006633]">Premium</span>
  843. <span class="ml-1 text-[10px] bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full font-bold">IA</span>
  844. </th>
  845. </tr>
  846. </thead>
  847. <tbody>
  848. {% set rows = [
  849. {cat: true, label: 'Consultation'},
  850. {cat: false, label: 'Accès numéros complets (PDF)', g: true, s: true, p: true},
  851. {cat: false, label: 'Consultation en ligne HTML responsive', g: true, s: true, p: true},
  852. {cat: false, label: 'Textes isolés — actes récents (< 5 ans)', g: false, s: true, p: true},
  853. {cat: false, label: 'Archives historiques (> 5 ans)', g: false, s: false, p: true},
  854. {cat: false, label: 'Réquisitions & actes fonciers', g: false, s: false, p: true},
  855. {cat: true, label: 'Recherche'},
  856. {cat: false, label: 'Moteur de recherche par filtres', g: true, s: true, p: true},
  857. {cat: false, label: 'Recherche par institution émettrice', g: true, s: true, p: true},
  858. {cat: false, label: 'Filtrage chronologique (année / plage)', g: true, s: true, p: true},
  859. {cat: false, label: 'Filtrage par type d\'acte', g: true, s: true, p: true},
  860. {cat: false, label: 'Recherche Ibunas.IA (contenu OCR + IA)', g: false, s: false, p: true},
  861. {cat: false, label: 'Résumé automatique des actes', g: false, s: false, p: true},
  862. {cat: true, label: 'Alertes & veille'},
  863. {cat: false, label: 'Notifications de nouvelles publications', g: false, s: true, p: true},
  864. {cat: false, label: 'Veille juridique (domaines généraux)', g: false, s: true, p: true},
  865. {cat: false, label: 'Alertes personnalisées par thème', g: false, s: false, p: true},
  866. {cat: false, label: 'Mémentos juridiques (à venir)', g: false, s: false, p: true},
  867. ] %}
  868. {% for row in rows %}
  869. {% if row.cat %}
  870. <tr class="bg-gray-50 border-t border-gray-100">
  871. <td colspan="4" class="px-5 py-3 text-xs font-black text-gray-500 uppercase tracking-widest">
  872. {{ row.label }}
  873. </td>
  874. </tr>
  875. {% else %}
  876. <tr class="border-t border-gray-50 hover:bg-gray-50/50 transition-colors">
  877. <td class="p-4 px-5 text-gray-700">{{ row.label }}</td>
  878. <td class="p-4 text-center">
  879. {% if row.g %}
  880. <i class="fas fa-check text-[#006633]"></i>
  881. {% else %}
  882. <i class="fas fa-minus text-gray-300"></i>
  883. {% endif %}
  884. </td>
  885. <td class="p-4 text-center">
  886. {% if row.s %}
  887. <i class="fas fa-check text-[#006633]"></i>
  888. {% else %}
  889. <i class="fas fa-minus text-gray-300"></i>
  890. {% endif %}
  891. </td>
  892. <td class="p-4 text-center">
  893. {% if row.p %}
  894. <i class="fas fa-check text-amber-500"></i>
  895. {% else %}
  896. <i class="fas fa-minus text-gray-300"></i>
  897. {% endif %}
  898. </td>
  899. </tr>
  900. {% endif %}
  901. {% endfor %}
  903. <!-- Ligne tarif -->
  904. <tr class="border-t-2 border-gray-200 bg-gray-50">
  905. <td class="p-4 font-black text-gray-800">Tarif annuel</td>
  906. <td class="p-4 text-center font-black text-gray-800">Gratuit</td>
  907. <td class="p-4 text-center font-black text-[#006633]">
  908. 50 000 KMF<br>
  909. <span class="text-xs font-semibold text-emerald-600">40 000 KMF la 1ère année</span>
  910. </td>
  911. <td class="p-4 text-center font-black text-[#006633]">
  912. 90 000 KMF<br>
  913. <span class="text-xs font-semibold text-amber-600">72 000 KMF la 1ère année</span>
  914. </td>
  915. </tr>
  916. <tr class="border-t border-gray-100">
  917. <td class="p-4"></td>
  918. <td class="p-4 text-center">
  919. <a href=""
  920. class="inline-block border border-gray-200 text-gray-600 text-xs font-semibold px-4 py-2 rounded-lg hover:bg-gray-50 transition">
  921. Créer un compte
  922. </a>
  923. </td>
  924. <td class="p-4 text-center">
  925. <button type="button" onclick="openCheckoutModal('standard')"
  926. class="inline-block bg-[#006633] text-white text-xs font-bold px-4 py-2 rounded-lg hover:bg-[#004d26] transition">
  927. Choisir Standard
  928. </button>
  929. </td>
  930. <td class="p-4 text-center">
  931. <button type="button" onclick="openCheckoutModal('premium')"
  932. class="inline-block bg-amber-400 text-amber-900 text-xs font-black px-4 py-2 rounded-lg hover:bg-amber-300 transition">
  933. Choisir Premium
  934. </button>
  935. </td>
  936. </tr>
  937. </tbody>
  938. </table>
  939. </div> {# ← ferme overflow-x-auto #}
  940. </div>
  941. </div>
  942. </div>
  943. </div>
  944. </section>
  947. <!-- FAQ -->
  948. <section class="py-16 bg-white">
  949. <div class="container mx-auto px-4">
  950. <div class="max-w-2xl mx-auto">
  951. <h2 class="text-2xl font-black text-gray-800 text-center mb-2">Questions fréquentes</h2>
  952. <p class="text-gray-500 text-sm text-center mb-10">Tout ce que vous devez savoir avant de vous abonner</p>
  954. <div class="space-y-3" id="faq-list">
  955. {% set faqs = [
  956. {
  957. q: 'Comment fonctionne la remise de −20% ?',
  958. r: 'La remise s\'applique uniquement lors de votre première année d\'abonnement, que ce soit Standard ou Premium. À partir de la deuxième année, le tarif plein s\'applique automatiquement (50 000 KMF ou 90 000 KMF selon le plan).'
  959. },
  960. {
  961. q: 'Puis-je résilier à tout moment ?',
  962. r: 'Oui. Vous pouvez résilier votre abonnement à tout moment depuis votre espace personnel. Votre accès reste actif jusqu\'à la fin de la période payée, sans frais de résiliation.'
  963. },
  964. {
  965. q: 'Qu\'est-ce que la recherche Ibunas.IA ?',
  966. r: 'Ibunas.IA est notre moteur de recherche enrichi par intelligence artificielle. Il analyse le contenu textuel des actes grâce à l\'OCR (reconnaissance de caractères) et vous permet de rechercher des termes précis à l\'intérieur même des documents, pas seulement dans les titres et résumés.'
  967. },
  968. {
  969. q: 'Quels moyens de paiement sont acceptés ?',
  970. r: 'Nous acceptons les paiements Mobile Money comoriens : Huri Money, Mvola et Holo. Le paiement par carte Visa/Mastercard sera disponible prochainement, sous validation de la Banque Centrale des Comores.'
  971. },
  972. {
  973. q: 'Les abonnements peuvent-ils être partagés ?',
  974. r: 'Non, chaque abonnement est nominatif et lié à un seul compte utilisateur. Pour les institutions nécessitant plusieurs accès simultanés, contactez-nous pour un devis multi-utilisateurs.'
  975. },
  976. {
  977. q: 'Comment accéder aux archives historiques ?',
  978. r: 'Les archives antérieures à 5 ans sont exclusivement réservées aux abonnés Premium. Elles incluent les numérisations des anciens journaux officiels, indexées et rendues recherchables via notre système OCR.'
  979. },
  980. ] %}
  981. {% for faq in faqs %}
  982. <div class="faq-item bg-gray-50 rounded-xl border border-gray-100 overflow-hidden">
  983. <button type="button"
  984. class="faq-trigger w-full flex items-center justify-between p-5 text-left hover:bg-gray-100 transition-colors duration-200">
  985. <span class="font-semibold text-gray-800 text-sm pr-4">{{ faq.q }}</span>
  986. <i class="fas fa-chevron-down text-gray-400 text-xs flex-shrink-0 transition-transform duration-300 faq-icon"></i>
  987. </button>
  988. <div class="faq-answer hidden px-5 pb-5">
  989. <p class="text-gray-600 text-sm leading-relaxed">{{ faq.r }}</p>
  990. </div>
  991. </div>
  992. {% endfor %}
  993. </div>
  994. </div>
  995. </div>
  996. </section>
  999. <!-- CTA final -->
  1000. <section class="py-16 bg-gradient-to-br from-[#006633] to-[#004d26] text-white">
  1001. <div class="container mx-auto px-4 text-center">
  1002. <div class="w-14 h-14 bg-white/15 rounded-2xl flex items-center justify-center mx-auto mb-5">
  1003. <i class="fas fa-file-contract text-2xl text-white"></i>
  1004. </div>
  1005. <h2 class="text-2xl font-black mb-3">Besoin d'un accès institutionnel ?</h2>
  1006. <p class="text-white/70 max-w-md mx-auto text-sm mb-7">
  1007. Ministères, juridictions, cabinets d'avocats, universités —
  1008. contactez-nous pour un devis multi-utilisateurs adapté à votre structure.
  1009. </p>
  1010. <a href="mailto:contact@journalofficiel.km"
  1011. class="inline-flex items-center gap-2 bg-white text-[#006633] px-7 py-3 rounded-xl font-bold text-sm hover:bg-gray-50 transition shadow-lg">
  1012. <i class="fas fa-envelope"></i> Nous contacter
  1013. </a>
  1014. </div>
  1015. </section>
  1018. <script>
  1019. document.addEventListener('DOMContentLoaded', function () {
  1021. // ── Toggle annuel / mensuel ────────────────────────────────────────────────
  1022. const btnAnnuel = document.getElementById('btn-annuel');
  1023. const btnMensuel = document.getElementById('btn-mensuel');
  1024. const priceValues = document.querySelectorAll('.price-value');
  1025. const priceUnits = document.querySelectorAll('.price-unit');
  1026. const pricePromos = document.querySelectorAll('.price-promo');
  1028. let isAnnuel = true;
  1030. function updatePrices() {
  1031. priceValues.forEach(el => {
  1032. const val = isAnnuel ? el.dataset.annuel : el.dataset.mensuel;
  1033. el.textContent = parseInt(val).toLocaleString('fr-FR');
  1034. });
  1035. priceUnits.forEach(el => {
  1036. el.textContent = isAnnuel ? 'KMF / an' : 'KMF / mois';
  1037. });
  1038. pricePromos.forEach(el => {
  1039. if (isAnnuel) {
  1040. el.closest('p')?.classList.remove('hidden');
  1041. } else {
  1042. el.closest('p')?.classList.add('hidden');
  1043. }
  1044. });
  1045. }
  1047. btnAnnuel?.addEventListener('click', () => {
  1048. isAnnuel = true;
  1049. btnAnnuel.className = 'px-5 py-2 rounded-full text-sm font-semibold bg-white text-[#006633] transition-all duration-200';
  1050. btnMensuel.className = 'px-5 py-2 rounded-full text-sm font-semibold text-white/70 hover:text-white transition-all duration-200';
  1051. updatePrices();
  1052. });
  1054. btnMensuel?.addEventListener('click', () => {
  1055. isAnnuel = false;
  1056. btnMensuel.className = 'px-5 py-2 rounded-full text-sm font-semibold bg-white text-[#006633] transition-all duration-200';
  1057. btnAnnuel.className = 'px-5 py-2 rounded-full text-sm font-semibold text-white/70 hover:text-white transition-all duration-200';
  1058. updatePrices();
  1059. });
  1061. // ── FAQ accordion ──────────────────────────────────────────────────────────
  1062. document.querySelectorAll('.faq-trigger').forEach(btn => {
  1063. btn.addEventListener('click', () => {
  1064. const item = btn.closest('.faq-item');
  1065. const answer = item.querySelector('.faq-answer');
  1066. const icon = item.querySelector('.faq-icon');
  1067. const isOpen = !answer.classList.contains('hidden');
  1069. // Fermer tous
  1070. document.querySelectorAll('.faq-answer').forEach(a => a.classList.add('hidden'));
  1071. document.querySelectorAll('.faq-icon').forEach(i => i.style.transform = 'rotate(0deg)');
  1073. // Ouvrir si était fermé
  1074. if (!isOpen) {
  1075. answer.classList.remove('hidden');
  1076. icon.style.transform = 'rotate(180deg)';
  1077. }
  1078. });
  1079. });
  1081. });
  1082. </script>
  1086. {# ================================================================
  1087. MODAL CHECKOUT — Standard & Premium
  1088. ================================================================ #}
  1089. <div id="checkout-modal"
  1090. class="fixed inset-0 z-50 hidden items-center justify-center p-4"
  1091. role="dialog" aria-modal="true" aria-labelledby="modal-title">
  1093. <!-- Overlay -->
  1094. <div id="modal-overlay"
  1095. class="absolute inset-0 bg-black/60 backdrop-blur-sm"
  1096. onclick="closeCheckoutModal()"></div>
  1098. <!-- Panel -->
  1099. <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto z-10 animate-modal">
  1101. <!-- Header -->
  1102. <div id="modal-header" class="sticky top-0 z-20 bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between rounded-t-2xl">
  1103. <div class="flex items-center gap-3">
  1104. <!-- Étapes pills -->
  1105. <div class="flex items-center gap-1 text-xs" id="modal-steps">
  1106. <span class="modal-step-pill active w-6 h-6 rounded-full bg-[#006633] text-white flex items-center justify-center font-black text-[10px]" data-step="1">1</span>
  1107. <div class="w-4 h-px bg-gray-200"></div>
  1108. <span class="modal-step-pill w-6 h-6 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center font-black text-[10px]" data-step="2">2</span>
  1109. <div class="w-4 h-px bg-gray-200"></div>
  1110. <span class="modal-step-pill w-6 h-6 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center font-black text-[10px]" data-step="3">3</span>
  1111. </div>
  1112. <span class="text-sm font-semibold text-gray-600" id="modal-step-label">Récapitulatif</span>
  1113. </div>
  1114. <button type="button" onclick="closeCheckoutModal()"
  1115. class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 transition">
  1116. <i class="fas fa-times text-xs"></i>
  1117. </button>
  1118. </div>
  1120. <!-- Corps du modal -->
  1121. <div class="px-6 py-6">
  1123. {# ── ÉTAPE 1 : Récapitulatif ── #}
  1124. <div id="modal-step-1" class="modal-step-content">
  1126. <!-- Badge plan sélectionné -->
  1127. <div id="modal-plan-badge" class="rounded-xl p-4 mb-5 flex items-center gap-3">
  1128. <div id="modal-plan-icon" class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0">
  1129. <i class="fas fa-building text-white"></i>
  1130. </div>
  1131. <div>
  1132. <p class="text-xs font-bold uppercase tracking-wider" id="modal-plan-sublabel">Abonnement</p>
  1133. <p class="font-black text-lg" id="modal-plan-name">Standard</p>
  1134. </div>
  1135. <div class="ml-auto text-right">
  1136. <p class="font-black text-xl" id="modal-plan-price">40 000 KMF</p>
  1137. <p class="text-xs opacity-70" id="modal-plan-period">/ an · 1ère année</p>
  1138. </div>
  1139. </div>
  1141. <!-- Durée -->
  1142. <div class="mb-5">
  1143. <label class="block text-sm font-bold text-gray-700 mb-3">Durée</label>
  1144. <div class="grid grid-cols-2 gap-3">
  1145. <label class="cursor-pointer">
  1146. <input type="radio" name="modal-duree" value="annuel" class="sr-only" checked>
  1147. <div class="modal-dur-card border-2 border-[#006633] bg-emerald-50/50 rounded-xl p-3 text-center transition-all">
  1148. <p class="text-xs font-bold text-gray-700 mb-1">Annuel <span class="bg-[#006633] text-white text-[9px] px-1.5 py-0.5 rounded-full ml-1">−20%</span></p>
  1149. <p class="font-black text-[#006633] text-base modal-dur-price" data-std-annuel="40 000" data-pre-annuel="72 000" data-std-mensuel="4 500" data-pre-mensuel="8 000"></p>
  1150. <p class="text-[10px] text-gray-400">KMF / an</p>
  1151. </div>
  1152. </label>
  1153. <label class="cursor-pointer">
  1154. <input type="radio" name="modal-duree" value="mensuel" class="sr-only">
  1155. <div class="modal-dur-card border-2 border-gray-200 bg-white rounded-xl p-3 text-center transition-all hover:border-gray-300">
  1156. <p class="text-xs font-bold text-gray-700 mb-1">Mensuel</p>
  1157. <p class="font-black text-gray-800 text-base modal-dur-mensuel-price"></p>
  1158. <p class="text-[10px] text-gray-400">KMF / mois</p>
  1159. </div>
  1160. </label>
  1161. </div>
  1162. </div>
  1164. <!-- Informations -->
  1165. <div class="space-y-3 mb-5">
  1166. <div class="grid grid-cols-2 gap-3">
  1167. <div>
  1168. <label class="block text-xs text-gray-500 mb-1">Prénom <span class="text-red-400">*</span></label>
  1169. <input type="text" id="m-prenom" placeholder="Mohammed"
  1170. class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  1171. </div>
  1172. <div>
  1173. <label class="block text-xs text-gray-500 mb-1">Nom <span class="text-red-400">*</span></label>
  1174. <input type="text" id="m-nom" placeholder="Said"
  1175. class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  1176. </div>
  1177. </div>
  1178. <div>
  1179. <label class="block text-xs text-gray-500 mb-1">E-mail <span class="text-red-400">*</span></label>
  1180. <input type="email" id="m-email" placeholder="votre@email.com"
  1181. class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  1182. </div>
  1183. <div>
  1184. <label class="block text-xs text-gray-500 mb-1">Organisation <span class="text-gray-400">(optionnel)</span></label>
  1185. <input type="text" id="m-org" placeholder="Ministère, cabinet, entreprise..."
  1186. class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  1187. </div>
  1188. </div>
  1190. <button type="button" onclick="modalGoStep(2)"
  1191. class="w-full bg-gradient-to-r from-[#006633] to-[#008040] text-white py-3.5 rounded-xl font-bold text-sm hover:from-[#004d26] transition shadow-md flex items-center justify-center gap-2">
  1192. Continuer vers le paiement <i class="fas fa-arrow-right"></i>
  1193. </button>
  1194. </div>
  1197. {# ── ÉTAPE 2 : Paiement ── #}
  1198. <div id="modal-step-2" class="modal-step-content hidden">
  1200. <button type="button" onclick="modalGoStep(1)"
  1201. class="flex items-center gap-2 text-gray-400 hover:text-gray-600 text-xs mb-5 transition">
  1202. <i class="fas fa-arrow-left"></i> Retour
  1203. </button>
  1205. <h3 class="text-base font-black text-gray-800 mb-4">Mode de paiement</h3>
  1207. <div class="space-y-3 mb-5">
  1209. <!-- Huri Money -->
  1210. <label class="cursor-pointer block">
  1211. <input type="radio" name="modal-methode" value="huri_money" class="sr-only" checked>
  1212. <div class="modal-pay-card border-2 border-orange-400 bg-orange-50/40 rounded-xl p-3.5 flex items-center gap-3 transition-all">
  1213. <div class="w-10 h-10 bg-orange-500 rounded-xl flex items-center justify-center flex-shrink-0">
  1214. <i class="fas fa-mobile-alt text-white"></i>
  1215. </div>
  1216. <div class="flex-1">
  1217. <p class="font-bold text-gray-800 text-sm">Huri Money</p>
  1218. <p class="text-xs text-gray-500">Mobile Money · Comores Telecom</p>
  1219. </div>
  1220. <div class="w-4 h-4 rounded-full border-2 border-orange-400 flex items-center justify-center modal-radio-dot">
  1221. <div class="w-2 h-2 rounded-full bg-orange-400"></div>
  1222. </div>
  1223. </div>
  1224. </label>
  1226. <!-- Mvola -->
  1227. <label class="cursor-pointer block">
  1228. <input type="radio" name="modal-methode" value="mvola" class="sr-only">
  1229. <div class="modal-pay-card border-2 border-gray-200 bg-white rounded-xl p-3.5 flex items-center gap-3 transition-all hover:border-gray-300">
  1230. <div class="w-10 h-10 bg-green-600 rounded-xl flex items-center justify-center flex-shrink-0">
  1231. <i class="fas fa-mobile-alt text-white"></i>
  1232. </div>
  1233. <div class="flex-1">
  1234. <p class="font-bold text-gray-800 text-sm">Mvola</p>
  1235. <p class="text-xs text-gray-500">Mobile Money · Telma Comores</p>
  1236. </div>
  1237. <div class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center modal-radio-dot"></div>
  1238. </div>
  1239. </label>
  1241. <!-- Holo -->
  1242. <label class="cursor-pointer block">
  1243. <input type="radio" name="modal-methode" value="holo" class="sr-only">
  1244. <div class="modal-pay-card border-2 border-gray-200 bg-white rounded-xl p-3.5 flex items-center gap-3 transition-all hover:border-gray-300">
  1245. <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
  1246. <i class="fas fa-mobile-alt text-white"></i>
  1247. </div>
  1248. <div class="flex-1">
  1249. <p class="font-bold text-gray-800 text-sm">Holo</p>
  1250. <p class="text-xs text-gray-500">Mobile Money · Holo Comores</p>
  1251. </div>
  1252. <div class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center modal-radio-dot"></div>
  1253. </div>
  1254. </label>
  1256. <!-- Visa désactivé -->
  1257. <div class="border-2 border-dashed border-gray-200 rounded-xl p-3.5 flex items-center gap-3 opacity-50 cursor-not-allowed">
  1258. <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
  1259. <i class="fas fa-credit-card text-indigo-400"></i>
  1260. </div>
  1261. <div class="flex-1">
  1262. <p class="font-bold text-gray-500 text-sm">Visa / Mastercard</p>
  1263. <p class="text-xs text-gray-400">Bientôt disponible</p>
  1264. </div>
  1265. <span class="text-[10px] bg-gray-100 text-gray-400 px-2 py-0.5 rounded-full font-semibold">À venir</span>
  1266. </div>
  1267. </div>
  1269. <!-- Numéro téléphone -->
  1270. <div class="bg-gray-50 border border-gray-200 rounded-xl p-4 mb-5">
  1271. <label class="block text-sm font-bold text-gray-700 mb-2">
  1272. Numéro <span id="modal-provider-label" class="text-[#006633]">Huri Money</span>
  1273. </label>
  1274. <div class="flex gap-2">
  1275. <div class="flex items-center gap-1.5 bg-white border border-gray-200 rounded-xl px-3 py-2.5 flex-shrink-0">
  1276. <img src="https://flagcdn.com/w20/km.png" alt="+269" class="w-4 rounded-sm">
  1277. <span class="text-sm text-gray-600 font-semibold">+269</span>
  1278. </div>
  1279. <input type="tel" id="m-phone" placeholder="321 12 34" maxlength="10"
  1280. class="flex-1 border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 focus:border-[#006633]">
  1281. </div>
  1282. <p class="text-[10px] text-gray-400 mt-1.5">
  1283. <i class="fas fa-info-circle mr-1"></i> Vous recevrez une notification pour confirmer.
  1284. </p>
  1285. </div>
  1287. <!-- Récapitulatif mini -->
  1288. <div class="bg-gray-50 border border-gray-100 rounded-xl p-3.5 mb-5 flex items-center justify-between text-sm">
  1289. <div>
  1290. <p class="font-semibold text-gray-700" id="modal-recap-plan">Standard · Annuel</p>
  1291. <p class="text-xs text-gray-400">1ère année — remise −20% appliquée</p>
  1292. </div>
  1293. <p class="font-black text-[#006633] text-lg" id="modal-recap-prix">40 000 KMF</p>
  1294. </div>
  1296. <!-- CGU -->
  1297. <label class="flex items-start gap-2.5 cursor-pointer mb-5">
  1298. <input type="checkbox" id="m-cgu"
  1299. class="mt-0.5 w-4 h-4 rounded border-gray-300 text-[#006633] focus:ring-[#006633] flex-shrink-0">
  1300. <span class="text-xs text-gray-500 leading-relaxed">
  1301. J'accepte les
  1302. <a href="#" class="text-[#006633] font-semibold hover:underline">CGU</a>
  1303. et la
  1304. <a href="#" class="text-[#006633] font-semibold hover:underline">Politique de confidentialité</a>.
  1305. </span>
  1306. </label>
  1308. <button type="button" id="modal-btn-pay"
  1309. class="w-full bg-gradient-to-r from-[#006633] to-[#008040] text-white py-4 rounded-xl font-black text-base hover:from-[#004d26] transition shadow-lg flex items-center justify-center gap-2">
  1310. <i class="fas fa-lock text-sm"></i>
  1311. <span id="modal-btn-pay-label">Payer 40 000 KMF</span>
  1312. </button>
  1313. <p class="text-center text-[10px] text-gray-400 mt-2">
  1314. <i class="fas fa-shield-alt mr-1 text-[#006633]"></i> Paiement sécurisé
  1315. </p>
  1316. </div>
  1319. {# ── ÉTAPE 3 : Confirmation ── #}
  1320. <div id="modal-step-3" class="modal-step-content hidden text-center py-4">
  1321. <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
  1322. <i class="fas fa-check-circle text-3xl text-[#006633]"></i>
  1323. </div>
  1324. <h3 class="text-xl font-black text-gray-800 mb-1">Abonnement activé !</h3>
  1325. <p class="text-gray-500 text-sm mb-1">
  1326. Votre abonnement <strong id="modal-confirm-plan" class="text-gray-800">Standard</strong> est actif.
  1327. </p>
  1328. <p class="text-xs text-gray-400 mb-5">
  1329. Réf : <span id="modal-confirm-ref" class="font-mono font-semibold text-gray-600"></span>
  1330. </p>
  1332. <div class="bg-gray-50 rounded-xl border border-gray-100 p-4 text-left text-sm mb-5 space-y-2">
  1333. <div class="flex justify-between">
  1334. <span class="text-gray-500">Plan</span>
  1335. <span class="font-semibold text-gray-800" id="modal-conf-plan2">Standard</span>
  1336. </div>
  1337. <div class="flex justify-between">
  1338. <span class="text-gray-500">Durée</span>
  1339. <span class="font-semibold text-gray-800" id="modal-conf-duree">Annuel</span>
  1340. </div>
  1341. <div class="flex justify-between">
  1342. <span class="text-gray-500">Montant</span>
  1343. <span class="font-bold text-[#006633]" id="modal-conf-montant">40 000 KMF</span>
  1344. </div>
  1345. <div class="flex justify-between">
  1346. <span class="text-gray-500">Renouvellement</span>
  1347. <span class="font-semibold text-gray-800" id="modal-conf-renouvellement">—</span>
  1348. </div>
  1349. </div>
  1351. <div class="flex flex-col gap-3">
  1352. <a href="{{ path('app_dashboard') }}"
  1353. class="block w-full bg-[#006633] text-white py-3 rounded-xl font-bold text-sm hover:bg-[#004d26] transition">
  1354. <i class="fas fa-tachometer-alt mr-2"></i> Accéder à mon espace
  1355. </a>
  1356. <button type="button" onclick="closeCheckoutModal()"
  1357. class="block w-full border border-gray-200 text-gray-600 py-3 rounded-xl font-semibold text-sm hover:bg-gray-50 transition">
  1358. Fermer
  1359. </button>
  1360. </div>
  1361. </div>
  1363. </div>
  1364. </div>
  1365. </div>
  1368. <style>
  1369. @keyframes modalIn {
  1370. from { opacity: 0; transform: scale(0.96) translateY(10px); }
  1371. to { opacity: 1; transform: scale(1) translateY(0); }
  1372. }
  1373. .animate-modal { animation: modalIn 0.25s ease-out; }
  1374. </style>
  1377. <script>
  1378. (function () {
  1380. const PRIX = {
  1381. standard: { annuel: 40000, mensuel: 4500, plein: 50000 },
  1382. premium: { annuel: 72000, mensuel: 8000, plein: 90000 },
  1383. };
  1384. const LABELS = { standard: 'Standard', premium: 'Premium' };
  1385. const PROVIDERS = { huri_money: 'Huri Money', mvola: 'Mvola', holo: 'Holo' };
  1387. let currentPlan = 'standard';
  1388. let currentDuree = 'annuel';
  1390. // ── Ouvrir / fermer ────────────────────────────────────────────────────────
  1391. window.openCheckoutModal = function (plan) {
  1392. currentPlan = plan || 'standard';
  1393. currentDuree = 'annuel';
  1394. modalGoStep(1);
  1395. updateModalPlanUI();
  1396. updatePrices();
  1398. const modal = document.getElementById('checkout-modal');
  1399. modal.classList.remove('hidden');
  1400. modal.classList.add('flex');
  1401. document.body.style.overflow = 'hidden';
  1402. };
  1404. window.closeCheckoutModal = function () {
  1405. const modal = document.getElementById('checkout-modal');
  1406. modal.classList.add('hidden');
  1407. modal.classList.remove('flex');
  1408. document.body.style.overflow = '';
  1409. };
  1411. // Fermer avec Escape
  1412. document.addEventListener('keydown', e => {
  1413. if (e.key === 'Escape') closeCheckoutModal();
  1414. });
  1416. // ── Navigation étapes ──────────────────────────────────────────────────────
  1417. window.modalGoStep = function (n) {
  1418. if (n === 2) {
  1419. const prenom = document.getElementById('m-prenom')?.value.trim();
  1420. const nom = document.getElementById('m-nom')?.value.trim();
  1421. const email = document.getElementById('m-email')?.value.trim();
  1422. if (!prenom || !nom) { alert('Veuillez renseigner votre prénom et nom.'); return; }
  1423. if (!email || !email.includes('@')) { alert('Adresse e-mail invalide.'); return; }
  1424. }
  1426. document.querySelectorAll('.modal-step-content').forEach(s => s.classList.add('hidden'));
  1427. document.getElementById('modal-step-' + n)?.classList.remove('hidden');
  1429. // Étapes pills
  1430. const pills = document.querySelectorAll('.modal-step-pill');
  1431. pills.forEach(pill => {
  1432. const s = parseInt(pill.dataset.step);
  1433. if (s < n) {
  1434. pill.className = 'modal-step-pill w-6 h-6 rounded-full bg-[#006633] text-white flex items-center justify-center font-black text-[10px]';
  1435. pill.innerHTML = '<i class="fas fa-check text-[9px]"></i>';
  1436. } else if (s === n) {
  1437. pill.className = 'modal-step-pill w-6 h-6 rounded-full bg-[#006633] text-white flex items-center justify-center font-black text-[10px]';
  1438. pill.textContent = s;
  1439. } else {
  1440. pill.className = 'modal-step-pill w-6 h-6 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center font-black text-[10px]';
  1441. pill.textContent = s;
  1442. }
  1443. });
  1445. const labels = { 1: 'Récapitulatif', 2: 'Paiement', 3: 'Confirmation' };
  1446. const labelEl = document.getElementById('modal-step-label');
  1447. if (labelEl) labelEl.textContent = labels[n];
  1448. };
  1450. // ── UI selon le plan ───────────────────────────────────────────────────────
  1451. function updateModalPlanUI() {
  1452. const isPremium = currentPlan === 'premium';
  1453. const badge = document.getElementById('modal-plan-badge');
  1454. const icon = document.getElementById('modal-plan-icon');
  1455. const sub = document.getElementById('modal-plan-sublabel');
  1456. const name = document.getElementById('modal-plan-name');
  1458. if (isPremium) {
  1459. badge.className = 'rounded-xl p-4 mb-5 flex items-center gap-3 bg-gradient-to-r from-[#00391a] to-[#006633] text-white';
  1460. icon.className = 'w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0';
  1461. icon.innerHTML = '<i class="fas fa-crown text-amber-400"></i>';
  1462. sub.className = 'text-xs font-bold uppercase tracking-wider text-emerald-300';
  1463. name.className = 'font-black text-lg text-white';
  1464. } else {
  1465. badge.className = 'rounded-xl p-4 mb-5 flex items-center gap-3 bg-emerald-50 border border-emerald-200';
  1466. icon.className = 'w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0';
  1467. icon.innerHTML = '<i class="fas fa-building text-[#006633]"></i>';
  1468. sub.className = 'text-xs font-bold uppercase tracking-wider text-[#006633]';
  1469. name.className = 'font-black text-lg text-gray-800';
  1470. }
  1471. if (name) name.textContent = LABELS[currentPlan];
  1472. }
  1474. // ── Mise à jour prix ───────────────────────────────────────────────────────
  1475. function updatePrices() {
  1476. const prix = PRIX[currentPlan][currentDuree];
  1477. const isPremium = currentPlan === 'premium';
  1479. // Badge header
  1480. const priceEl = document.getElementById('modal-plan-price');
  1481. const periodEl = document.getElementById('modal-plan-period');
  1482. if (priceEl) priceEl.textContent = prix.toLocaleString('fr-FR') + ' KMF';
  1483. if (periodEl) periodEl.textContent = currentDuree === 'annuel' ? '/ an · 1ère année' : '/ mois';
  1485. // Cards durée
  1486. const annuelPriceEl = document.querySelector('.modal-dur-price');
  1487. const mensuelPriceEl = document.querySelector('.modal-dur-mensuel-price');
  1488. if (annuelPriceEl) annuelPriceEl.textContent = PRIX[currentPlan].annuel.toLocaleString('fr-FR');
  1489. if (mensuelPriceEl) mensuelPriceEl.textContent = PRIX[currentPlan].mensuel.toLocaleString('fr-FR');
  1491. // Récap étape 2
  1492. const recapPlan = document.getElementById('modal-recap-plan');
  1493. const recapPrix = document.getElementById('modal-recap-prix');
  1494. if (recapPlan) recapPlan.textContent = LABELS[currentPlan] + ' · ' + (currentDuree === 'annuel' ? 'Annuel' : 'Mensuel');
  1495. if (recapPrix) recapPrix.textContent = prix.toLocaleString('fr-FR') + ' KMF';
  1497. // Bouton payer
  1498. const btnLabel = document.getElementById('modal-btn-pay-label');
  1499. if (btnLabel) btnLabel.textContent = 'Payer ' + prix.toLocaleString('fr-FR') + ' KMF';
  1501. // Couleur bouton payer si premium
  1502. const btnPay = document.getElementById('modal-btn-pay');
  1503. if (btnPay) {
  1504. if (isPremium) {
  1505. btnPay.className = btnPay.className.replace('from-[#006633] to-[#008040]', 'from-amber-500 to-amber-400').replace('hover:from-[#004d26]', 'hover:from-amber-600');
  1506. } else {
  1507. btnPay.className = btnPay.className.replace('from-amber-500 to-amber-400', 'from-[#006633] to-[#008040]').replace('hover:from-amber-600', 'hover:from-[#004d26]');
  1508. }
  1509. }
  1510. }
  1512. // ── Changement durée ──────────────────────────────────────────────────────
  1513. document.querySelectorAll('input[name="modal-duree"]').forEach(radio => {
  1514. radio.addEventListener('change', function () {
  1515. currentDuree = this.value;
  1516. updatePrices();
  1518. document.querySelectorAll('.modal-dur-card').forEach(c => {
  1519. c.className = c.className
  1520. .replace('border-[#006633] bg-emerald-50/50', 'border-gray-200 bg-white')
  1521. .replace('border-gray-200 bg-white', 'border-gray-200 bg-white');
  1522. });
  1523. const active = this.closest('label').querySelector('.modal-dur-card');
  1524. active.className = active.className.replace('border-gray-200 bg-white', 'border-[#006633] bg-emerald-50/50');
  1525. });
  1526. });
  1528. // ── Changement méthode paiement ───────────────────────────────────────────
  1529. const COLORS = { huri_money: ['orange-400', 'orange-50/40'], mvola: ['green-600', 'green-50/40'], holo: ['blue-600', 'blue-50/40'] };
  1531. document.querySelectorAll('input[name="modal-methode"]').forEach(radio => {
  1532. radio.addEventListener('change', function () {
  1533. document.querySelectorAll('.modal-pay-card').forEach(c => {
  1534. c.className = 'modal-pay-card border-2 border-gray-200 bg-white rounded-xl p-3.5 flex items-center gap-3 transition-all hover:border-gray-300';
  1535. });
  1536. document.querySelectorAll('.modal-radio-dot').forEach(d => d.innerHTML = '');
  1538. const [border, bg] = COLORS[this.value] || ['gray-400', 'gray-50'];
  1539. const card = this.closest('label').querySelector('.modal-pay-card');
  1540. card.className = `modal-pay-card border-2 border-${border} bg-${bg} rounded-xl p-3.5 flex items-center gap-3 transition-all`;
  1541. const dot = this.closest('label').querySelector('.modal-radio-dot');
  1542. dot.innerHTML = `<div class="w-2 h-2 rounded-full bg-${border}"></div>`;
  1543. dot.className = `w-4 h-4 rounded-full border-2 border-${border} flex items-center justify-center modal-radio-dot`;
  1545. const label = document.getElementById('modal-provider-label');
  1546. if (label) label.textContent = PROVIDERS[this.value] || this.value;
  1547. });
  1548. });
  1550. // ── Bouton payer ───────────────────────────────────────────────────────────
  1551. document.getElementById('modal-btn-pay')?.addEventListener('click', async function () {
  1552. const cgu = document.getElementById('m-cgu')?.checked;
  1553. const phone = document.getElementById('m-phone')?.value.trim().replace(/\s/g, '');
  1555. if (!cgu) { alert('Veuillez accepter les CGU.'); return; }
  1556. if (phone.length < 7) { alert('Numéro de téléphone invalide.'); return; }
  1558. this.disabled = true;
  1559. this.innerHTML = '<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>&nbsp;Traitement…';
  1561. // TODO : remplacer par l'appel API de paiement réel
  1562. await new Promise(r => setTimeout(r, 1800));
  1564. // Remplir confirmation
  1565. const ref = 'JO-' + Date.now().toString(36).toUpperCase();
  1566. const prix = PRIX[currentPlan][currentDuree];
  1567. const date = new Date();
  1568. currentDuree === 'annuel' ? date.setFullYear(date.getFullYear() + 1) : date.setMonth(date.getMonth() + 1);
  1570. document.getElementById('modal-confirm-plan').textContent = LABELS[currentPlan];
  1571. document.getElementById('modal-confirm-ref').textContent = ref;
  1572. document.getElementById('modal-conf-plan2').textContent = LABELS[currentPlan];
  1573. document.getElementById('modal-conf-duree').textContent = currentDuree === 'annuel' ? 'Annuel' : 'Mensuel';
  1574. document.getElementById('modal-conf-montant').textContent = prix.toLocaleString('fr-FR') + ' KMF';
  1575. document.getElementById('modal-conf-renouvellement').textContent = date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
  1577. modalGoStep(3);
  1578. });
  1580. })();
  1581. </script>
  1583. {% endblock %}