150 lines
8.5 KiB
Plaintext
150 lines
8.5 KiB
Plaintext
|
<section class="support">
|
||
|
|
<div class="section-container">
|
||
|
|
<h2>Nous <span class="accent-text">Soutenir</span></h2>
|
||
|
|
<p style="font-size: 1.3rem; margin-bottom: 1rem;">
|
||
|
|
Soutenez notre mission de promotion de nos langues et d'alternatives libres aux GAFAM
|
||
|
|
</p>
|
||
|
|
<p style="font-size: 1.1rem; margin-bottom: 3rem; opacity: 0.9;">
|
||
|
|
Votre don nous aide à maintenir nos services et à financer nos coûts de serveur.<br>
|
||
|
|
Chaque contribution renforce notre engagement envers la diversité linguistique, technologique et médiatique.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<!-- Donation Options Container -->
|
||
|
|
<div style="max-width: 900px; margin: 0 auto;">
|
||
|
|
|
||
|
|
<!-- One-time Donations -->
|
||
|
|
<div style="background: rgba(232, 166, 37, 0.1); border-radius: 20px; padding: 2rem; margin-bottom: 2rem;">
|
||
|
|
<h3 style="color: var(--or-oki); margin-bottom: 1.5rem; text-align: center;">
|
||
|
|
💸 Don ponctuel
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="donation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
|
||
|
|
<a href="https://don.o-k-i.net/b/aEUdTw5SD3SH7m0bII" class="donation-amount" target="_blank" rel="noopener noreferrer">
|
||
|
|
1€
|
||
|
|
</a>
|
||
|
|
<a href="https://don.o-k-i.net/b/4gw6r480L1Kz5dScMO" class="donation-amount" target="_blank" rel="noopener noreferrer">
|
||
|
|
5€
|
||
|
|
</a>
|
||
|
|
<a href="https://don.o-k-i.net/b/5kA02G1Cn4WLbCgeUV" class="donation-amount" target="_blank" rel="noopener noreferrer">
|
||
|
|
10€
|
||
|
|
</a>
|
||
|
|
<a href="https://don.o-k-i.net/b/fZebLo94PfBpayc5kn" class="donation-amount" target="_blank" rel="noopener noreferrer">
|
||
|
|
20€
|
||
|
|
</a>
|
||
|
|
<a href="https://don.o-k-i.net/b/6oE5n05SDdth49O004" class="donation-amount" target="_blank" rel="noopener noreferrer">
|
||
|
|
50€
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="text-align: center;">
|
||
|
|
<label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant personnalisé :</label>
|
||
|
|
<div class="custom-donation-form">
|
||
|
|
<input type="number" id="customAmountOneTime" placeholder="Montant" min="1" class="custom-amount-input">
|
||
|
|
<span class="currency-symbol">€</span>
|
||
|
|
<button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
|
||
|
|
Donner
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Monthly Donations -->
|
||
|
|
<div style="background: rgba(0, 168, 84, 0.1); border-radius: 20px; padding: 2rem;">
|
||
|
|
<h3 style="color: var(--vert-oki); margin-bottom: 1.5rem; text-align: center;">
|
||
|
|
⭐ Don mensuel
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="donation-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
|
||
|
|
<a href="https://don.o-k-i.net/b/7sI9Dgch14WL7m0fZ3" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
|
||
|
|
1€/mois
|
||
|
|
</a>
|
||
|
|
<a href="https://don.o-k-i.net/b/8wM4iW4Ozbl95dS6ow" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
|
||
|
|
5€/mois
|
||
|
|
</a>
|
||
|
|
<a href="https://don.o-k-i.net/b/8wM2aO80L74TcGk3ci" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
|
||
|
|
10€/mois
|
||
|
|
</a>
|
||
|
|
<a href="https://don.o-k-i.net/b/00g7v894P88XgWAfZ7" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
|
||
|
|
20€/mois
|
||
|
|
</a>
|
||
|
|
<a href="https://don.o-k-i.net/b/4gw8zc6WHgFtcGkbIP" class="donation-amount monthly" target="_blank" rel="noopener noreferrer">
|
||
|
|
50€/mois
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="text-align: center;">
|
||
|
|
<label style="display: block; margin-bottom: 1rem; color: var(--blanc-creme);">Montant mensuel personnalisé :</label>
|
||
|
|
<div class="custom-donation-form">
|
||
|
|
<input type="number" id="customAmountMonthly" placeholder="Montant" min="1" class="custom-amount-input custom-amount-input-monthly">
|
||
|
|
<span class="currency-symbol">€/mois</span>
|
||
|
|
<button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
|
||
|
|
S'abonner
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Alternative Donation Methods -->
|
||
|
|
<div style="margin-top: 3rem;">
|
||
|
|
<h3 style="text-align: center; color: var(--or-oki); margin-bottom: 2rem; font-size: 1.5rem;">
|
||
|
|
Autres moyens de nous soutenir
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 700px; margin: 0 auto;">
|
||
|
|
|
||
|
|
<!-- Liberapay -->
|
||
|
|
<a href="https://liberapay.com/OKI/donate" target="_blank" rel="noopener noreferrer" style="
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1rem;
|
||
|
|
padding: 2rem;
|
||
|
|
background: rgba(242, 179, 54, 0.1);
|
||
|
|
border: 2px solid #F2B336;
|
||
|
|
border-radius: 15px;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 30px rgba(242, 179, 54, 0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
|
||
|
|
<div style="font-size: 3rem;">💛</div>
|
||
|
|
<h4 style="color: #F2B336; font-size: 1.3rem; margin: 0;">Liberapay</h4>
|
||
|
|
<p style="color: var(--blanc-creme); text-align: center; margin: 0; font-size: 0.95rem;">
|
||
|
|
Soutenez-nous via Liberapay, une plateforme libre et éthique
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Ko-fi -->
|
||
|
|
<a href="https://ko-fi.com/J3J5TOZPI" target="_blank" rel="noopener noreferrer" style="
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1rem;
|
||
|
|
padding: 2rem;
|
||
|
|
background: rgba(255, 93, 93, 0.1);
|
||
|
|
border: 2px solid #FF5E5B;
|
||
|
|
border-radius: 15px;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 30px rgba(255, 93, 93, 0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
|
||
|
|
<div style="font-size: 3rem;">☕</div>
|
||
|
|
<h4 style="color: #FF5E5B; font-size: 1.3rem; margin: 0;">Ko-fi</h4>
|
||
|
|
<p style="color: var(--blanc-creme); text-align: center; margin: 0; font-size: 0.95rem;">
|
||
|
|
Offrez-nous un café sur Ko-fi pour nous encourager
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="text-align: center; margin-top: 3rem; padding: 1.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 15px;">
|
||
|
|
<p style="font-size: 0.95rem; margin-bottom: 0.5rem;">
|
||
|
|
🔒 Vos paiements sont sécurisés et traités de manière fiable par <a href="https://stripe.com/" target="_blank" style="color: var(--or-oki); text-decoration: none;">Stripe</a>.
|
||
|
|
</p>
|
||
|
|
<p style="font-size: 0.9rem; opacity: 0.8;">
|
||
|
|
Aucune information de paiement n'est stockée sur notre site.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|