| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Janngu - Plateforme de dons et cagnottes</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6B46C1 0%, #4299E1 100%); |
| } |
| .donation-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .progress-bar { |
| transition: width 0.5s ease-in-out; |
| } |
| #paymentModal { |
| transition: all 0.3s ease; |
| } |
| .payment-method:hover { |
| border-color: #6B46C1; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-hand-holding-heart text-3xl"></i> |
| <h1 class="text-2xl font-bold">Janngu</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" class="hover:text-purple-200 font-medium">Accueil</a> |
| <a href="#" class="hover:text-purple-200 font-medium">Cagnottes</a> |
| <a href="#" class="hover:text-purple-200 font-medium">Comment ça marche</a> |
| <a href="#" class="hover:text-purple-200 font-medium">Contact</a> |
| </nav> |
| <button id="createCampaignBtn" class="bg-white text-purple-700 px-4 py-2 rounded-full font-semibold hover:bg-purple-100 transition"> |
| Créer une cagnotte |
| </button> |
| <button class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Faites la différence avec Janngu</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Lancez votre cagnotte en quelques clics et recevez des dons via Orange Money, Wave, Paypal et plus encore.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <button id="heroCreateBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-semibold text-lg hover:bg-purple-100 transition"> |
| Créer une cagnotte |
| </button> |
| <button class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-semibold text-lg hover:bg-white hover:text-purple-700 transition"> |
| Voir les cagnottes |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div id="campaignModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Créer votre cagnotte</h2> |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| </div> |
| |
| <form id="campaignForm"> |
| <div class="mb-6"> |
| <label for="campaignTitle" class="block text-gray-700 font-medium mb-2">Titre de la cagnotte</label> |
| <input type="text" id="campaignTitle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Ex: Aide médicale pour mon père" required> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="campaignDescription" class="block text-gray-700 font-medium mb-2">Description</label> |
| <textarea id="campaignDescription" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Expliquez pourquoi vous collectez des fonds..." required></textarea> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label for="targetAmount" class="block text-gray-700 font-medium mb-2">Montant à atteindre (FCFA)</label> |
| <input type="number" id="targetAmount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="50000" required> |
| </div> |
| <div> |
| <label for="category" class="block text-gray-700 font-medium mb-2">Catégorie</label> |
| <select id="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
| <option value="medical">Médical</option> |
| <option value="education">Éducation</option> |
| <option value="business">Entreprise</option> |
| <option value="personal">Personnel</option> |
| <option value="other">Autre</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">Image de la cagnotte</label> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i> |
| <p class="text-gray-500">Glissez-déposez une image ou <span class="text-purple-600 cursor-pointer">parcourir</span></p> |
| <input type="file" id="campaignImage" class="hidden" accept="image/*"> |
| </div> |
| </div> |
| |
| <div class="flex justify-end space-x-4"> |
| <button type="button" id="cancelCampaign" class="px-6 py-2 border border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-100">Annuler</button> |
| <button type="submit" class="gradient-bg text-white px-6 py-2 rounded-lg font-medium hover:opacity-90">Créer la cagnotte</button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Cagnottes en cours</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden donation-card transition duration-300"> |
| <div class="h-48 bg-purple-100 relative"> |
| <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Campaign" class="w-full h-full object-cover"> |
| <div class="absolute top-4 left-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">Médical</div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Aide médicale pour Amadou</h3> |
| <p class="text-gray-600 mb-4">Amadou a besoin d'une opération urgente pour sauver sa vue. Aidez-nous à collecter les fonds nécessaires.</p> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> |
| <span>Collecté</span> |
| <span>350,000 FCFA / 500,000 FCFA</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-purple-600 h-2 rounded-full progress-bar" style="width: 70%"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-users text-gray-500 mr-2"></i> |
| <span class="text-gray-600">42 donateurs</span> |
| </div> |
| <button class="donate-btn gradient-bg text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90" data-id="1"> |
| Faire un don |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden donation-card transition duration-300"> |
| <div class="h-48 bg-blue-100 relative"> |
| <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Campaign" class="w-full h-full object-cover"> |
| <div class="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">Éducation</div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Bourses scolaires 2023</h3> |
| <p class="text-gray-600 mb-4">Aidez 10 enfants défavorisés à poursuivre leur éducation cette année scolaire.</p> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> |
| <span>Collecté</span> |
| <span>120,000 FCFA / 300,000 FCFA</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full progress-bar" style="width: 40%"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-users text-gray-500 mr-2"></i> |
| <span class="text-gray-600">18 donateurs</span> |
| </div> |
| <button class="donate-btn gradient-bg text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90" data-id="2"> |
| Faire un don |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden donation-card transition duration-300"> |
| <div class="h-48 bg-green-100 relative"> |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Campaign" class="w-full h-full object-cover"> |
| <div class="absolute top-4 left-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium">Entreprise</div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Atelier de couture communautaire</h3> |
| <p class="text-gray-600 mb-4">Soutenez notre projet d'atelier de couture qui emploiera 15 femmes de la communauté.</p> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> |
| <span>Collecté</span> |
| <span>750,000 FCFA / 1,000,000 FCFA</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-600 h-2 rounded-full progress-bar" style="width: 75%"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-users text-gray-500 mr-2"></i> |
| <span class="text-gray-600">63 donateurs</span> |
| </div> |
| <button class="donate-btn gradient-bg text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90" data-id="3"> |
| Faire un don |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button class="border-2 border-purple-600 text-purple-600 px-6 py-3 rounded-full font-semibold hover:bg-purple-50 transition"> |
| Voir toutes les cagnottes |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Comment ça marche</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-plus text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">1. Créez votre cagnotte</h3> |
| <p class="text-gray-600">Remplissez le formulaire en quelques minutes avec les détails de votre collecte.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-share-alt text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">2. Partagez votre lien</h3> |
| <p class="text-gray-600">Diffusez votre cagnotte sur les réseaux sociaux et auprès de vos proches.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-hand-holding-usd text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">3. Recevez les dons</h3> |
| <p class="text-gray-600">Les donateurs contribuent via Orange Money, Wave, Paypal et autres méthodes.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Méthodes de paiement acceptées</h2> |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto"> |
| <div class="payment-method bg-white p-6 rounded-xl border-2 border-gray-200 flex flex-col items-center justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Orange_Money_logo.svg/1200px-Orange_Money_logo.svg.png" alt="Orange Money" class="h-12 object-contain mb-3"> |
| <span class="text-gray-700 font-medium">Orange Money</span> |
| </div> |
| |
| <div class="payment-method bg-white p-6 rounded-xl border-2 border-gray-200 flex flex-col items-center justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Wave_logo.png/800px-Wave_logo.png" alt="Wave" class="h-12 object-contain mb-3"> |
| <span class="text-gray-700 font-medium">Wave</span> |
| </div> |
| |
| <div class="payment-method bg-white p-6 rounded-xl border-2 border-gray-200 flex flex-col items-center justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/1200px-PayPal.svg.png" alt="Paypal" class="h-12 object-contain mb-3"> |
| <span class="text-gray-700 font-medium">PayPal</span> |
| </div> |
| |
| <div class="payment-method bg-white p-6 rounded-xl border-2 border-gray-200 flex flex-col items-center justify-center"> |
| <img src="https://www.bankizina.com/wp-content/uploads/2021/03/bankil-logo.png" alt="Bankil" class="h-12 object-contain mb-3"> |
| <span class="text-gray-700 font-medium">Bankil</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Témoignages</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto"> |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-user text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Aïssatou D.</h4> |
| <p class="text-gray-500 text-sm">Créatrice de cagnotte</p> |
| </div> |
| </div> |
| <p class="text-gray-700">"Grâce à Janngu, j'ai pu collecter les fonds nécessaires pour l'opération de ma mère. La plateforme est simple et les dons arrivent rapidement."</p> |
| <div class="flex mt-4"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Mamadou K.</h4> |
| <p class="text-gray-500 text-sm">Donateur</p> |
| </div> |
| </div> |
| <p class="text-gray-700">"J'apprécie la transparence de Janngu. Je peux voir l'avancement des cagnottes et choisir celles qui me touchent. Le paiement par Wave est très pratique."</p> |
| <div class="flex mt-4"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star-half-alt text-yellow-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gradient-bg text-white py-16"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à lancer votre cagnotte ?</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez des milliers de personnes qui utilisent Janngu pour collecter des fonds en toute simplicité.</p> |
| <button id="bottomCreateBtn" class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold text-lg hover:bg-purple-100 transition"> |
| Créer une cagnotte maintenant |
| </button> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-hand-holding-heart text-2xl"></i> |
| <h3 class="text-xl font-bold">Janngu</h3> |
| </div> |
| <p class="text-gray-400">La plateforme de dons et cagnottes la plus simple et sécurisée d'Afrique.</p> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Navigation</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Cagnottes</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Créer une cagnotte</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Comment ça marche</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Légal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Sécurité des paiements</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope text-gray-400 mr-2"></i> |
| <span class="text-gray-400">contact@janngu.com</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt text-gray-400 mr-2"></i> |
| <span class="text-gray-400">+221 77 123 45 67</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> |
| <span class="text-gray-400">Dakar, Sénégal</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Janngu. Tous droits réservés.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin-in"></i></a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Faire un don</h2> |
| <button id="closePaymentModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| </div> |
| |
| <div id="campaignInfo" class="mb-6 p-4 bg-gray-50 rounded-lg"> |
| <h3 id="paymentCampaignTitle" class="font-bold mb-1">Aide médicale pour Amadou</h3> |
| <div class="flex justify-between text-sm text-gray-600"> |
| <span>Objectif: <span id="paymentTargetAmount">500,000 FCFA</span></span> |
| <span>Collecté: <span id="paymentCollectedAmount">350,000 FCFA</span></span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
| <div id="paymentProgressBar" class="bg-purple-600 h-2 rounded-full" style="width: 70%"></div> |
| </div> |
| </div> |
| |
| <form id="donationForm"> |
| <div class="mb-6"> |
| <label for="donationAmount" class="block text-gray-700 font-medium mb-2">Montant du don (FCFA)</label> |
| <input type="number" id="donationAmount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="5000" required> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">Méthode de paiement</label> |
| <div class="grid grid-cols-2 gap-3"> |
| <label class="payment-option payment-method cursor-pointer"> |
| <input type="radio" name="paymentMethod" value="orange" class="hidden" checked> |
| <div class="border-2 border-gray-200 rounded-lg p-3 flex items-center justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Orange_Money_logo.svg/1200px-Orange_Money_logo.svg.png" alt="Orange Money" class="h-8 mr-2"> |
| <span>Orange Money</span> |
| </div> |
| </label> |
| |
| <label class="payment-option payment-method cursor-pointer"> |
| <input type="radio" name="paymentMethod" value="wave" class="hidden"> |
| <div class="border-2 border-gray-200 rounded-lg p-3 flex items-center justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Wave_logo.png/800px-Wave_logo.png" alt="Wave" class="h-8 mr-2"> |
| <span>Wave</span> |
| </div> |
| </label> |
| |
| <label class="payment-option payment-method cursor-pointer"> |
| <input type="radio" name="paymentMethod" value="bankil" class="hidden"> |
| <div class="border-2 border-gray-200 rounded-lg p-3 flex items-center justify-center"> |
| <img src="https://www.bankizina.com/wp-content/uploads/2021/03/bankil-logo.png" alt="Bankil" class="h-8 mr-2"> |
| <span>Bankil</span> |
| </div> |
| </label> |
| |
| <label class="payment-option payment-method cursor-pointer"> |
| <input type="radio" name="paymentMethod" value="paypal" class="hidden"> |
| <div class="border-2 border-gray-200 rounded-lg p-3 flex items-center justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/1200px-PayPal.svg.png" alt="Paypal" class="h-8 mr-2"> |
| <span>PayPal</span> |
| </div> |
| </label> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="donorName" class="block text-gray-700 font-medium mb-2">Votre nom (optionnel)</label> |
| <input type="text" id="donorName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Votre nom"> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="donorMessage" class="block text-gray-700 font-medium mb-2">Message de soutien (optionnel)</label> |
| <textarea id="donorMessage" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Votre message..."></textarea> |
| </div> |
| |
| <button type="submit" class="w-full gradient-bg text-white px-6 py-3 rounded-lg font-semibold text-lg hover:opacity-90"> |
| Confirmer le don |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full text-center p-8"> |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-check text-green-600 text-2xl"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Merci pour votre don !</h2> |
| <p class="text-gray-600 mb-6">Votre contribution fait toute la différence. Un reçu vous a été envoyé par email.</p> |
| <button id="closeSuccessModal" class="gradient-bg text-white px-6 py-2 rounded-lg font-medium hover:opacity-90"> |
| Retour aux cagnottes |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const campaignModal = document.getElementById('campaignModal'); |
| const paymentModal = document.getElementById('paymentModal'); |
| const successModal = document.getElementById('successModal'); |
| const createCampaignBtn = document.getElementById('createCampaignBtn'); |
| const heroCreateBtn = document.getElementById('heroCreateBtn'); |
| const bottomCreateBtn = document.getElementById('bottomCreateBtn'); |
| const closeModal = document.getElementById('closeModal'); |
| const closePaymentModal = document.getElementById('closePaymentModal'); |
| const closeSuccessModal = document.getElementById('closeSuccessModal'); |
| const cancelCampaign = document.getElementById('cancelCampaign'); |
| const campaignForm = document.getElementById('campaignForm'); |
| const donationForm = document.getElementById('donationForm'); |
| const donateButtons = document.querySelectorAll('.donate-btn'); |
| |
| |
| const campaigns = { |
| 1: { |
| title: "Aide médicale pour Amadou", |
| target: 500000, |
| collected: 350000, |
| progress: 70 |
| }, |
| 2: { |
| title: "Bourses scolaires 2023", |
| target: 300000, |
| collected: 120000, |
| progress: 40 |
| }, |
| 3: { |
| title: "Atelier de couture communautaire", |
| target: 1000000, |
| collected: 750000, |
| progress: 75 |
| } |
| }; |
| |
| |
| function formatNumber(num) { |
| return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
| } |
| |
| |
| [createCampaignBtn, heroCreateBtn, bottomCreateBtn].forEach(btn => { |
| btn.addEventListener('click', () => { |
| campaignModal.classList.remove('hidden'); |
| }); |
| }); |
| |
| closeModal.addEventListener('click', () => { |
| campaignModal.classList.add('hidden'); |
| }); |
| |
| cancelCampaign.addEventListener('click', () => { |
| campaignModal.classList.add('hidden'); |
| }); |
| |
| closePaymentModal.addEventListener('click', () => { |
| paymentModal.classList.add('hidden'); |
| }); |
| |
| closeSuccessModal.addEventListener('click', () => { |
| successModal.classList.add('hidden'); |
| }); |
| |
| |
| campaignForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| |
| const title = document.getElementById('campaignTitle').value; |
| const description = document.getElementById('campaignDescription').value; |
| const targetAmount = document.getElementById('targetAmount').value; |
| const category = document.getElementById('category').value; |
| |
| |
| console.log('New campaign created:', { |
| title, |
| description, |
| targetAmount, |
| category |
| }); |
| |
| |
| alert('Votre cagnotte a été créée avec succès !'); |
| |
| |
| campaignForm.reset(); |
| campaignModal.classList.add('hidden'); |
| }); |
| |
| |
| donateButtons.forEach(btn => { |
| btn.addEventListener('click', () => { |
| const campaignId = btn.getAttribute('data-id'); |
| const campaign = campaigns[campaignId]; |
| |
| |
| document.getElementById('paymentCampaignTitle').textContent = campaign.title; |
| document.getElementById('paymentTargetAmount').textContent = formatNumber(campaign.target) + ' FCFA'; |
| document.getElementById('paymentCollectedAmount').textContent = formatNumber(campaign.collected) + ' FCFA'; |
| document.getElementById('paymentProgressBar').style.width = campaign.progress + '%'; |
| |
| |
| paymentModal.classList.remove('hidden'); |
| }); |
| }); |
| |
| |
| donationForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| |
| const amount = document.getElementById('donationAmount').value; |
| const paymentMethod = document.querySelector('input[name="paymentMethod"]:checked').value; |
| const name = document.getElementById('donorName').value; |
| const message = document.getElementById('donorMessage').value; |
| |
| |
| console.log('New donation:', { |
| amount, |
| paymentMethod, |
| name, |
| message |
| }); |
| |
| |
| paymentModal.classList.add('hidden'); |
| donationForm.reset(); |
| successModal.classList.remove('hidden'); |
| }); |
| |
| |
| [campaignModal, paymentModal, successModal].forEach(modal => { |
| modal.addEventListener('click', (e) => { |
| if (e.target === modal) { |
| modal.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.payment-option').forEach(option => { |
| option.addEventListener('click', () => { |
| document.querySelectorAll('.payment-option').forEach(opt => { |
| opt.querySelector('div').classList.remove('border-purple-600', 'bg-purple-50'); |
| }); |
| option.querySelector('div').classList.add('border-purple-600', 'bg-purple-50'); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Janngu/don" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
