Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve design of donate page #724

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
+409 −183
Open

Improve design of donate page #724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1979bff
Center page title and description
tedgravlin Aug 4, 2023
c76f734
Shorten page description and add learn more link
tedgravlin Aug 4, 2023
adaa3dc
Remove table of contents
tedgravlin Aug 4, 2023
49594c1
Replace donation sections with donation cards
tedgravlin Aug 4, 2023
e91295a
Style the donation cards
tedgravlin Aug 4, 2023
a3c2a99
Add GitHub, Interac, and PayPal logos
tedgravlin Aug 4, 2023
928080e
Optimize logos
tedgravlin Aug 4, 2023
6dcad79
Center donation cards
tedgravlin Aug 4, 2023
63869a3
Implement dark mode colors
tedgravlin Aug 4, 2023
fab96fe
Fix text placement error for mobile
tedgravlin Aug 4, 2023
db1e362
Fix width of page description on mobile
tedgravlin Aug 4, 2023
97bce70
Implement learn more page
tedgravlin Aug 4, 2023
faf0897
Move donation-information into the static folder
tedgravlin Aug 4, 2023
8db1e30
Remove debug code from donation-improvements
tedgravlin Aug 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
332 changes: 152 additions & 180 deletions static/donate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,188 +33,160 @@
{% with current_page="donate" %}
{% include "header.html" %}
{% endwith %}
<main id="donate">
<h1><a href="#donate">Donate</a></h1>

<p>GrapheneOS is an open source project supported via donations from individuals,
companies and other organizations. Donations are used for paying developers,
purchasing hardware (workstations, test devices, debugging cables/boards, etc.),
paying for infrastructure (domains, virtual/dedicated servers) and paying legal
fees.</p>

<p>The multiple ways to donate are listed in the sections on this page.</p>

<nav id="table-of-contents">
<h2><a href="#table-of-contents">Table of contents</a></h2>

<ul>
<li><a href="#github">GitHub Sponsors (credit card)</a></li>
<li><a href="#bitcoin">Bitcoin</a></li>
<li><a href="#monero">Monero</a></li>
<li><a href="#zcash">Zcash</a></li>
<li><a href="#ethereum">Ethereum</a></li>
<li><a href="#cardano">Cardano</a></li>
<li><a href="#paypal">PayPal</a></li>
<li><a href="#e-transfer">Interac e-Transfer</a></li>
</ul>
</nav>

<section id="github">
<h2><a href="#github">GitHub Sponsors (credit card)</a></h2>

<p>GrapheneOS can be sponsored with recurring or one-time donations via credit
cards through <a href="https://github.com/sponsors/thestinger">GitHub
Sponsors</a>. There are standard tiers from $5 to $250 or you can donate a custom
amount.</p>
<main class="normalize" id="donate">
<section class="page-title">
<h1><a href="#donate">Donate</a></h1>
<p>GrapheneOS is an open source project supported via donations from individuals,
companies and other organizations. <a href="./donation-information">Learn more about donations.</a></p>
</section>

<section id="bitcoin">
<h2><a href="#bitcoin">Bitcoin</a></h2>

<p>Bitcoin can be used to make donations to the non-profit GrapheneOS
Foundation.</p>

<p>You can send Bitcoin donations to the following Bech32 (Segwit) address:</p>

<div class="coin-address">
<a href="bitcoin:bc1q9qw3g8tdxf3dugkv2z8cahd3axehph0mhsqk96?label=GrapheneOS%20Foundation&amp;message=Donation%20to%20GrapheneOS%20Foundation" rel="nofollow">
<img src="/donate-bitcoin.png?1" alt="Bitcoin donation QR code"/>
<p>bc1q9qw3g8tdxf3dugkv2z8cahd3axehph0mhsqk96</p>
</a>
</div>

<p>Alternatively, you can donate to the following Bech32m (Taproot) address if
your wallet supports it (preferred):</p>

<div class="coin-address">
<a href="bitcoin:bc1prqf5hks5dnd4j87wxw3djn20559yhj7wvvcv6fqxpwlg96udkzgqtamhry?label=GrapheneOS%20Foundation&amp;message=Donation%20to%20GrapheneOS%20Foundation" rel="nofollow">
<img src="/donate-bitcoin-taproot.png?1" alt="Bitcoin Taproot donation QR code"/>
<p>bc1prqf5hks5dnd4j87wxw3djn20559yhj7wvvcv6fqxpwlg96udkzgqtamhry</p>
</a>
</div>

<p>You can donate to the following BIP47 payment code (stealth address) or PayNym
if your wallet supports it:</p>

<div class="coin-address">
<a href="bitcoin:PM8TJKmhJNQX6UTFagyuBk8UGmwKM6yDovEokpHBscPgP3Ac7WdK5zaQKh5XLSawyxiGYZS2a7HkAoeL6oHg7Ahn1VXX888yRG4PwF1dojouPtW7tEHT" rel="nofollow">
<img src="/donate-bitcoin-bip47.png" alt="Bitcoin BIP47 payment code QR code"/>
<p>PM8TJKmhJNQX6UTFagyuBk8UGmwKM6yDovEokpHBscPgP3Ac7WdK5zaQKh5XLSawyxiGYZS2a7HkAoeL6oHg7Ahn1VXX888yRG4PwF1dojouPtW7tEHT</p>
</a>
</div>

<p>PayNym: <var>+wildtooth299</var></p>

<p>We recommend using the lowest fee tier recommended by your wallet since the
transaction taking hours or even a couple days is fine. An even lower custom fee
isn't recommended unless you're going to monitor it and bump the fee with RBF.</p>
</section>

<section id="monero">
<h2><a href="#monero">Monero</a></h2>

<p>Monero can be used to make donations to the non-profit GrapheneOS
Foundation.</p>

<p>You can send Monero donations to the following address:</p>

<div class="coin-address">
<a href="monero:862CebHaBpFPgYoNC6zw4U8rsXrDjD8s5LMJNS7yVCRHMUKr9dDi7adMSLUMjkDYJ85xahQTCJHHyK5RCvvRJu9x7iSzN9D?recipient_name=GrapheneOS%20Foundation&amp;tx_description=Donation%20to%20GrapheneOS%20Foundation" rel="nofollow">
<img src="/donate-monero.png?1" alt="Monero donation QR code"/>
<p>862CebHaBpFPgYoNC6zw4U8rsXrDjD8s5LMJNS7yVCRHMUKr9dDi7adMSLUMjkDYJ85xahQTCJHHyK5RCvvRJu9x7iSzN9D</p>
</a>
</div>

<p>We recommend using the lowest fee level since it will still be quick.</p>
</section>

<section id="zcash">
<h2><a href="#zcash">Zcash</a></h2>

<p>Zcash can be used to make donations to the non-profit GrapheneOS
Foundation.</p>

<p>You can send Zcash donations to the following transparent address:</p>

<div class="coin-address">
<a href="zcash:t1SJABjX8rqgzqgrzLW5dUw7ikSDZ2snD8A?label=GrapheneOS%20Foundation&amp;message=Donation%20to%20GrapheneOS%20Foundation" rel="nofollow">
<img src="/donate-zcash-transparent.png?1" alt="Transparent Zcash donation QR code"/>
<p>t1SJABjX8rqgzqgrzLW5dUw7ikSDZ2snD8A</p>
</a>
</div>
</section>

<section id="ethereum">
<h2><a href="#ethereum">Ethereum</a></h2>

<p>Ethereum can be used to make donations to the non-profit GrapheneOS
Foundation.</p>

<p>You can send Ethereum donations to the following address:</p>

<div class="coin-address">
<a href="ethereum:0xC822A62E5Ab443E0001f30cEB9B2336D0524fC61" rel="nofollow">
<img src="/donate-ethereum.png?1" alt="Ethereum donation QR code"/>
<p>0xC822A62E5Ab443E0001f30cEB9B2336D0524fC61</p>
</a>
</div>

<p><strong>We aren't looking for donations of tokens, only Ethereum itself.</strong></p>
</section>

<section id="cardano">
<h2><a href="#cardano">Cardano</a></h2>

<p>Cardano can be used to make donations to the non-profit GrapheneOS
Foundation.</p>

<p>You can send Cardano donations to the following address:</p>

<div class="coin-address">
<a href="web+cardano:addr1q9v89vfwyfssveug5zf2w7leafz8ethq490gvq0ghag883atfnucytpnq2t38dj7cnyngs6ne05cdwu9gseevgmt3ggq2a2wt6" rel="nofollow">
<img src="/donate-cardano.png?1" alt="Cardano donation QR code"/>
<p>addr1q9v89vfwyfssveug5zf2w7leafz8ethq490gvq0ghag883atfnucytpnq2t38dj7cnyngs6ne05cdwu9gseevgmt3ggq2a2wt6</p>
</a>
</div>

<p>We own the <var>$grapheneos</var> handle with this address so you can also send to the handle.</p>

<p><strong>We aren't looking for donations of tokens, only Cardano itself.</strong></p>
</section>

<section id="paypal">
<h2><a href="#paypal">PayPal</a></h2>

<p>PayPal can be used to make one-time, monthly or yearly donations to the
non-profit GrapheneOS Foundation.</p>

<p>If possible, use the donation link for your currency. If it's not listed,
please use the CAD donation link.</p>

<p>Donation links:</p>

<ul>
<li><a href="https://www.paypal.com/donate/?hosted_button_id=T8KRPYKU5QVNE">Canadian dollar (CAD)</a></li>
<li><a href="https://www.paypal.com/donate/?hosted_button_id=2S2BP8V4E7PXU">United States dollar (USD)</a></li>
<li><a href="https://www.paypal.com/donate/?hosted_button_id=5SNPWEDS53HW4">Euro (EUR)</a></li>
<li><a href="https://www.paypal.com/donate/?hosted_button_id=N498QNB7NPKU8">British pound (GBP)</a></li>
</ul>

<p>PayPal charges a base fee of 30 cents and 2.9% of the donation amount within
Canada. There's an additional 0.8% fee for donations from the US and 1% for other
countries. Currency conversion adds an additional 4% fee as opposed to the usual
PayPal conversion fee of 3%.</p>
</section>

<section id="e-transfer">
<h2><a href="#e-transfer">Interac e-Transfer</a></h2>

<p>If you have a Canadian bank account, you can send Canadian dollar donations to
the non-profit GrapheneOS Foundation via Interac e-Transfer to
<var>[email protected]</var>. The email address has Interac e-Transfer
Autodeposit support enabled so no security question is necessary. If your bank
doesn't support Autodeposit, set the answer to the security question to
GrapheneOS.</p>
<section class="donation-card-holder">
<section class="donation-card" id="github-sponsors">
<section class="donate-thumb">
<img class="logo" src="./github-logo.png" alt="GitHub logo"/>
</section>
<section>
<h2><a href="#github-sponsors">GitHub Sponsors</a></h2>
<p>Recurring or one-time donations through GitHub Sponsors.</p>
<a href="https://github.com/sponsors/thestinger" rel="nofollow">
<p>github.com/sponsors/thestinger</p>
</a>
</section>
</section>

<section class="donation-card" id="paypal">
<section class="donate-thumb">
<img class="logo" src="./paypal-logo.png" alt="PayPal Logo"/>
</section>
<section>
<h2><a href="#paypal">PayPal</a></h2>
<p>You can donate via one of the PayPal links below.</p>
<p>PayPal: </p>
<a href="https://www.paypal.com/donate/?hosted_button_id=2S2BP8V4E7PXU" rel="nofollow">
<p>(USD)</p>
</a>
<a href="https://www.paypal.com/donate/?hosted_button_id=T8KRPYKU5QVNE" rel="nofollow">
<p>(CAD)</p>
</a>
<a href="https://www.paypal.com/donate/?hosted_button_id=5SNPWEDS53HW4" rel="nofollow">
<p>(EUR)</p>
</a>
<a href="https://www.paypal.com/donate/?hosted_button_id=N498QNB7NPKU8" rel="nofollow">
<p>(GBP)</p>
</a>
</section>
</section>
<section class="donation-card" id="interac">
<section class="donate-thumb">
<img class="logo" src="./interac-logo.png" alt="Interac logo"/>
</section>
<section>
<h2><a href="#paypal">Interac e-Transfer </a></h2>
<p>If you have a Canadian bank account, you can send CAD donations via </p>
<a href="mailto:[email protected]" rel="nofollow">
<p>[email protected]</p>
</a>
</section>
</section>
<section class="donation-card" id="bitcoin">
<section class="donate-thumb">
<img class="qr" src="./donate-bitcoin.png" alt="Bitcoin donation QR code"/>
</section>
<section>
<h2><a href="#bitcoin">Bitcoin</a></h2>
<p>You can send Bitcoin donations to the following address:</p>
<a href="bitcoin:bc1q9qw3g8tdxf3dugkv2z8cahd3axehph0mhsqk96?label=GrapheneOS%20Foundation&amp;message=Donation%20to%20GrapheneOS%20Foundation"
rel="nofollow">
<p>Bitcoin address</p>
</a>
</section>
</section>

<section class="donation-card" id="bitcoin-taproot">
<section class="donate-thumb">
<img class="qr" src="./donate-bitcoin-taproot.png" alt="Bitcoin Taproot donation QR code"/>
</section>
<section>
<h2><a href="#bitcoin-taproot">Bitcoin Taproot</a></h2>
<p>You can send Bitcoin Taproot donations to the following address:</p>
<a href="bitcoin:bc1prqf5hks5dnd4j87wxw3djn20559yhj7wvvcv6fqxpwlg96udkzgqtamhry?label=GrapheneOS%20Foundation&amp;message=Donation%20to%20GrapheneOS%20Foundation"
rel="nofollow">
<p>Bitcoin Taproot address</p>
</a>
</section>
</section>

<section class="donation-card" id="bitcoin-stealth">
<section class="donate-thumb">
<img class="qr" src="./donate-bitcoin-bip47.png" alt="Bitcoin Stealth donation QR code"/>
</section>
<section>
<h2><a href="#bitcoin-taproot">Bitcoin BIP47 (Stealth)</a></h2>
<p>You can send Bitcoin Taproot donations to one of the following addresses:</p>
<a href="bitcoin:PM8TJKmhJNQX6UTFagyuBk8UGmwKM6yDovEokpHBscPgP3Ac7WdK5zaQKh5XLSawyxiGYZS2a7HkAoeL6oHg7Ahn1VXX888yRG4PwF1dojouPtW7tEHT"
rel="nofollow">
<p>Bitcoin BIP47 (Stealth)</p>
</a>
<p>+wildtooth299</p>
</section>
</section>
<section class="donation-card" id="monero">
<section class="donate-thumb">
<img class="qr" src="./donate-monero.png" alt="Monero donation QR code"/>
</section>
<section>
<h2><a href="#monero">Monero</a></h2>
<p>You can send Monero donations to the following address:</p>
<a href="monero:862CebHaBpFPgYoNC6zw4U8rsXrDjD8s5LMJNS7yVCRHMUKr9dDi7adMSLUMjkDYJ85xahQTCJHHyK5RCvvRJu9x7iSzN9D?recipient_name=GrapheneOS%20Foundation&amp;tx_description=Donation%20to%20GrapheneOS%20Foundation"
rel="nofollow">
<p>Monero address</p>
</a>
</section>
</section>

<section class="donation-card" id="zcash">
<section class="donate-thumb">
<img class="qr" src="./donate-zcash-transparent.png" alt="Zcash donation QR code"/>
</section>
<section>
<h2><a href="#zcash">Zcash</a></h2>
<p>You can send Zcash donations to the following address:</p>
<a href="zcash:t1SJABjX8rqgzqgrzLW5dUw7ikSDZ2snD8A?label=GrapheneOS%20Foundation&amp;message=Donation%20to%20GrapheneOS%20Foundation"
rel="nofollow">
<p>Zcash address</p>
</a>
</section>
</section>

<section class="donation-card" id="ethereum">
<section class="donate-thumb">
<img class="qr" src="./donate-ethereum.png" alt="Ethereum donation QR code"/>
</section>
<section>
<h2><a href="#ethereum">Ethereum</a></h2>
<p>You can send Ethereum donations to the following address:</p>
<a href="ethereum:0xC822A62E5Ab443E0001f30cEB9B2336D0524fC61" rel="nofollow">
<p>Ethereum address</p>
</a>
</section>
</section>

<section class="donation-card" id="cardano">
<section class="donate-thumb">
<img class="qr" src="./donate-cardano.png" alt="Cardano donation QR code"/>
</section>
<section>
<h2><a href="#cardano">Cardano</a></h2>
<p>You can send Cardano donations to the following address:</p>
<a href="web+cardano:addr1q9v89vfwyfssveug5zf2w7leafz8ethq490gvq0ghag883atfnucytpnq2t38dj7cnyngs6ne05cdwu9gseevgmt3ggq2a2wt6"
rel="nofollow">
<p>Cardano address</p>
</a>
</section>
</section>
</section>
</main>
{% include "footer.html" %}
Expand Down
Loading