rob/CmdForge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add configurable donation options

Browse Source
This commit is contained in:
rob
2026-09-29 13:11:19 -03:00
parent 2e38c5d629
commit 16be1c8d92
5 changed files with 244 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cmdforge/web/templates/pages/donate.html
+83 -2
View File
@@ -2,7 +2,7 @@
{% block title %}Support CmdForge{% endblock %}
{% block meta_description %}Support CmdForge by contributing code, tools, or feedback.{% endblock %}
{% block meta_description %}Support the open-source CmdForge project with Bitcoin, PayPal, tools, code, or feedback.{% endblock %}
{% block content %}
<div class="bg-gray-50 min-h-screen">
@@ -11,13 +11,76 @@
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
<h1 class="text-3xl font-bold text-gray-900">Support CmdForge</h1>
<p class="mt-4 text-lg text-gray-600">
CmdForge is a passion project. The best way to support it is to use it and share what you build.
Help keep an independent, open-source toolkit growing. Every contribution supports hosting,
maintenance, documentation, and the next generation of tools.
</p>
</div>
</div>
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
{% if donations.enabled %}
<section class="mb-12" aria-labelledby="financial-support-heading">
<div class="text-center mb-8">
<h2 id="financial-support-heading" class="text-2xl font-bold text-gray-900">Make a Contribution</h2>
<p class="mt-3 text-gray-600">
Choose the method that works for you. Donations are voluntary and do not unlock product features.
</p>
</div>
<div class="grid grid-cols-1 {% if donations.bitcoin_address and donations.paypal_url %}md:grid-cols-2{% endif %} gap-6 max-w-4xl mx-auto">
{% if donations.bitcoin_address %}
<article class="bg-white rounded-xl border border-amber-200 p-7 shadow-sm">
<div class="flex items-center gap-3">
<div class="w-11 h-11 bg-amber-100 rounded-full flex items-center justify-center text-amber-700 font-bold text-xl">&#8383;</div>
<div>
<h3 class="text-xl font-semibold text-gray-900">Bitcoin</h3>
<p class="text-sm text-gray-500">Send BTC directly to the project wallet.</p>
</div>
</div>
<label for="bitcoin-address" class="block mt-6 text-sm font-medium text-gray-700">Bitcoin address</label>
<div class="mt-2 flex flex-col sm:flex-row gap-2">
<code id="bitcoin-address" class="min-w-0 flex-1 px-3 py-3 bg-gray-50 border border-gray-200 rounded-md text-xs text-gray-800 break-all select-all">{{ donations.bitcoin_address }}</code>
<button type="button" id="copy-bitcoin-address"
class="px-4 py-2 text-sm font-medium text-amber-800 border border-amber-300 rounded-md hover:bg-amber-50"
data-address="{{ donations.bitcoin_address }}">
Copy
</button>
</div>
<p id="copy-bitcoin-status" class="mt-2 text-sm text-green-700 min-h-5" role="status" aria-live="polite"></p>
<a href="{{ donations.bitcoin_uri }}"
class="mt-2 inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-white bg-amber-600 rounded-md hover:bg-amber-700">
Open Bitcoin Wallet
</a>
<p class="mt-3 text-xs text-gray-500">Always verify the full address in your wallet before sending.</p>
</article>
{% endif %}
{% if donations.paypal_url %}
<article class="bg-white rounded-xl border border-blue-200 p-7 shadow-sm flex flex-col">
<div class="flex items-center gap-3">
<div class="w-11 h-11 bg-blue-100 rounded-full flex items-center justify-center text-blue-700 font-bold text-xl">P</div>
<div>
<h3 class="text-xl font-semibold text-gray-900">PayPal</h3>
<p class="text-sm text-gray-500">Contribute with PayPal or a supported card.</p>
</div>
</div>
<p class="mt-6 text-gray-600 flex-1">
PayPal handles the payment securely on its own website. CmdForge never receives your payment credentials.
</p>
<a href="{{ donations.paypal_url }}" target="_blank" rel="noopener noreferrer"
class="mt-6 inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
Donate with PayPal
</a>
</article>
{% endif %}
</div>
</section>
{% endif %}
<!-- Ways to help -->
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-gray-900">Other Ways to Help</h2>
<p class="mt-3 text-gray-600">Money is never the only way to make a meaningful contribution.</p>
</div>
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<div class="bg-white rounded-lg border border-gray-200 p-6">
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
@@ -85,3 +148,21 @@
</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
{% if donations.bitcoin_address %}
<script>
document.getElementById('copy-bitcoin-address')?.addEventListener('click', async function () {
const status = document.getElementById('copy-bitcoin-status');
try {
await navigator.clipboard.writeText(this.dataset.address);
status.textContent = 'Address copied.';
this.textContent = 'Copied';
} catch (error) {
status.textContent = 'Select the address above and copy it manually.';
}
});
</script>
{% endif %}
{% endblock %}