Ein Code von nasmacadic

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

3 May 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>

Ein Code von nasmacadic

Empfohlen

Ein Code von nehapanchal8087

Ein Code von alejandrokundrah

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von nehapanchal8087

Ein Code von alejandrokundrah

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS