sistema di donazione con importi multipli

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

13 June 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>

sistema di donazione con importi multipli

Consigliato

Un codice di Metehan

Un codice di yuhhxn

Un codice di Metehan

HTML

CSS

JS

Consigliato

Un codice di Metehan

Un codice di yuhhxn

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS