«Ветер Духа Святого»

on 12.02.2017 • by padova
Ростислав
<!-- Libreria per la generazione del QR Code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<style>
  .donation-widget {
    max-width: 340px;
    margin: 20px auto;
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
    color: #333333;
    border: 1px solid #eaeaea;
  }
  .donation-widget h3 {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    color: #1a1a1a;
  }
  .donation-widget p.subtitle {
    font-size: 0.85rem;
    color: #666666;
    margin: 0 0 16px 0;
  }
  .tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .tab-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
    transition: all 0.2s;
  }
  .tab-btn.active {
    background: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
  }
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
  }
  .qr-container {
    background: #ffffff;
    padding: 12px;
    display: inline-block;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
  }
  .info-box {
    margin-top: 16px;
    text-align: left;
    background: #f9f9f9;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.85rem;
  }
  .info-item {
    margin-bottom: 6px;
  }
  .info-item strong {
    color: #555555;
  }
  .iban-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-top: 4px;
  }
  .iban-text {
    font-family: monospace;
    font-size: 0.78rem;
    word-break: break-all;
  }
  .btn-action {
    background: #0066cc;
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
  }
  .btn-action.paypal-btn {
    background: #0070ba;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .btn-action:hover {
    opacity: 0.9;
  }
</style>

<div class="donation-widget">
  <h3>Ministero Phares</h3>
  <p class="subtitle">Sostieni il ministero con la tua offerta</p>

  <!-- Pulsanti di Selezione Metodo -->
  <div class="tab-buttons">
    <button class="tab-btn active" onclick="switchTab('iban')">Bonifico SEPA</button>
    <button class="tab-btn" onclick="switchTab('paypal')">PayPal</button>
  </div>

  <!-- Scheda Bonifico IBAN -->
  <div id="tab-iban" class="tab-content active">
    <div class="qr-container" id="qrcode-iban"></div>
    <div class="info-box">
      <div class="info-item"><strong>Beneficiario:</strong> Ministero Phares</div>
      <div class="info-item"><strong>Banca:</strong> Intesa Sanpaolo</div>
      <div class="info-item"><strong>Causale:</strong> Offerta volontaria</div>
      <div class="info-item" style="margin-top: 8px;">
        <strong>IBAN:</strong>
        <div class="iban-container">
          <span class="iban-text" id="ibanText">IT46T0306909606100000173250</span>
          <button class="btn-action" style="padding: 2px 6px; font-size: 0.75rem;" onclick="copyIban()">Copia</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Scheda PayPal -->
  <div id="tab-paypal" class="tab-content">
    <div class="qr-container" id="qrcode-paypal"></div>
    <div class="info-box">
      <div class="info-item"><strong>Email PayPal:</strong> phares.it@gmail.com</div>
      <div class="info-item"><strong>Destinazione:</strong> Donazione / Offerta</div>
      <a href="https://py.pl/27gS4nQ2K9m6lr16jHi1sg" target="_blank" class="btn-action paypal-btn">Paga con PayPal</a>
    </div>
  </div>
</div>

<script>
  // Dati IBAN SEPA (EPC)
  const epcData = "BCD\n002\n1\nSCT\nBCITITMM\nMinistero Phares\nIT46T0306909606100000173250\nEUR0.00\n\n\nOfferta volontaria";
  
  // URL PayPal (Sostituire con il proprio link PayPal.Me se personalizzato)
  const paypalUrl = "https://www.paypal.com/paypalme/phares.it@gmail.com";

  // Genera QR Code IBAN
  new QRCode(document.getElementById("qrcode-iban"), {
    text: epcData,
    width: 160,
    height: 160,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.M
  });

  // Genera QR Code PayPal
  new QRCode(document.getElementById("qrcode-paypal"), {
    text: paypalUrl,
    width: 160,
    height: 160,
    colorDark: "#0070ba", // Colore blu PayPal
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.M
  });

  // Cambio Scheda
  function switchTab(tab) {
    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

    if (tab === 'iban') {
      document.querySelectorAll('.tab-btn')[0].classList.add('active');
      document.getElementById('tab-iban').classList.add('active');
    } else {
      document.querySelectorAll('.tab-btn')[1].classList.add('active');
      document.getElementById('tab-paypal').classList.add('active');
    }
  }

  // Copia IBAN
  function copyIban() {
    const iban = document.getElementById("ibanText").innerText;
    navigator.clipboard.writeText(iban).then(() => {
      alert("IBAN copiato negli appunti!");
    });
  }
</script>