Un code par nasmacadic

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 April 2025

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Faites un Don</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(to right, #f0f4f8, #dbefff);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

.don-container {
      background-color: #fff;
      padding: 40px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      text-align: center;
      animation: slideFade 1s ease;
      max-width: 400px;
      width: 100%;
    }

@keyframes slideFade {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

.don-container h1 {
      color: #2c3e50;
      margin-bottom: 15px;
    }

.don-container p {
      color: #555;
      margin-bottom: 25px;
    }

.amount-options {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 20px;
    }

.amount-btn {
      background-color: #ecf0f1;
      color: #2c3e50;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
      font-weight: bold;
    }

.amount-btn:hover,
    .amount-btn.active {
      background-color: #3498db;
      color: white;
    }

.custom-amount {
      margin-top: 10px;
    }

.custom-amount input {
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      width: 100px;
      text-align: center;
    }

.don-btn {
      margin-top: 25px;
      background: #2ecc71;
      color: white;
      padding: 14px 28px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      transition: 0.3s ease;
    }

.don-btn:hover {
      background: #27ae60;
    }

@media (max-width: 500px) {
      .amount-options {
        flex-direction: column;
        align-items: center;
      }

.custom-amount input {
        width: 80%;
      }
    }
  </style>
</head>
<body>
  <div class="don-container">
    <h1>Faites un Don ❤️</h1>
    <p>Merci de soutenir notre projet. Choisissez un montant :</p>

<button class="don-btn" onclick="processDonation()">Faire un don</button>
  </div>

amountButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        amountButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        customAmountInput.value = '';
      });
    });

customAmountInput.addEventListener('input', () => {
      amountButtons.forEach(b => b.classList.remove('active'));
    });

function processDonation() {
      let selectedAmount = document.querySelector('.amount-btn.active');
      let customAmount = customAmountInput.value;

let amount = selectedAmount ? selectedAmount.dataset.amount : customAmount;

if (!amount || amount <= 0) {
        alert("Veuillez sélectionner ou entrer un montant valide.");
        return;
      }

// Redirige vers PayPal avec le montant
      let paypalLink = `https://www.paypal.com/donate?business=VOTRE_EMAIL_PAYPAL&amount=${amount}¤cy_code=EUR`;
      window.open(paypalLink, "_blank");
    }
  </script>
</body>
</html>

Un code par nasmacadic

Recommandé

Concevoir un algorithme

Un code par fastcloud893

Un code de Mete

HTML

CSS

JS

Recommandé

Concevoir un algorithme

Un code par fastcloud893

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS