sistema de donaciones con múltiples montos

Abrir en el editor Publica tu código

Recomendado

19 May 2025

reclutamiento de fuerzas especiales

HTML

<!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>

sistema de donaciones con múltiples montos

Recomendado

animación de avión

Barra de navegación simple

reclutamiento de fuerzas especiales

HTML

CSS

JS

Recomendado

animación de avión

Barra de navegación simple

reclutamiento de fuerzas especiales

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS