add donation page (#19)

raspiblitz · Oct 8, 2024 · 1b8d7c8 · 1b8d7c8
1 parent 0aa2a5f
commit 1b8d7c8
Show file tree

Hide file tree

Showing 2 changed files with 208 additions and 3 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -99,8 +99,8 @@ function HomepageHeader() {
       </div>
       <div style={{ paddingTop: "0px" }}>
         <a href="#donation" />
-        Donate to the RaspiBlitz Project:<br />
-        <img
+        Scan or <a href="/donation.html">Click to Donate</a> to the RaspiBlitz Project:<br />
+        <a href="/donation.html"><img
           src="https://github.com/rootzoll/raspiblitz/raw/dev/pictures/qr_donate.png"
           alt="Donate to RaspiBlitz Project with Lightning Address"
           style={{
@@ -110,7 +110,7 @@ function HomepageHeader() {
             marginTop: "10px",
             marginBottom: "6px",
           }}
-        /><br />
+        /></a><br />
         Lightning Address: raspiblitz@btcypay.fulmo.org<br />All donations for the RaspiBlitz project are collected by <a href="https://fulmo.org" target="_blank">Fulmo</a> & managed together with the developer team.
       </div>
       <div style={{ paddingTop: "10px" }}>

diff --git a/static/donation.html b/static/donation.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BRaspiBlitz Donations</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        body {
+            background-color: #1b1b1b;
+            color: #ffffff;
+            font-family: Arial, sans-serif;
+        }
+
+        a {
+            color: #fbb040;
+        }
+
+        .btcpay-form {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .btcpay-form--inline {
+            flex-direction: row;
+        }
+
+        .btcpay-form--block {
+            flex-direction: column;
+        }
+
+        .btcpay-form--inline .submit {
+            margin-left: 15px;
+        }
+
+        .btcpay-form--block select {
+            margin-bottom: 10px;
+        }
+
+        .btcpay-form .btcpay-custom-container {
+            text-align: center;
+        }
+
+        .btcpay-custom {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .btcpay-form .plus-minus {
+            cursor: pointer;
+            font-size: 25px;
+            line-height: 25px;
+            background: #fbb040;
+            color: #1b1b1b;
+            height: 30px;
+            width: 45px;
+            border: none;
+            border-radius: 60px;
+            margin: auto 5px;
+            display: inline-flex;
+            justify-content: center;
+        }
+
+        .btcpay-form select {
+            -moz-appearance: none;
+            -webkit-appearance: none;
+            appearance: none;
+            color: #ffffff;
+            background: #1b1b1b;
+            border: 1px solid #fbb040;
+            display: block;
+            padding: 1px;
+            margin-left: auto;
+            margin-right: auto;
+            font-size: 11px;
+            cursor: pointer;
+        }
+
+        .btcpay-form select:hover {
+            border-color: #fbb040;
+        }
+
+        .btcpay-form option {
+            color: #000;
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .btcpay-input-price {
+            -moz-appearance: textfield;
+            border: 1px solid #fbb040;
+            box-shadow: none;
+            text-align: center;
+            font-size: 25px;
+            margin: auto;
+            border-radius: 5px;
+            line-height: 35px;
+            background: #1b1b1b;
+            color: #ffffff;
+        }
+
+        .btcpay-input-price::-webkit-outer-spin-button,
+        .btcpay-input-price::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        header,
+        nav,
+        footer {
+            text-align: center;
+            padding: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <h1>RaspiBlitz - Donations</h1>
+    </header>
+    <main>
+        <p style="text-align: center; margin-top: 0px;">Set your Donation Amount:</p>
+        <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
+            <form method="POST" action="https://btcpay.fulmo.org/api/v1/invoices"
+                class="btcpay-form btcpay-form--block">
+                <input type="hidden" name="storeId" value="CzD1ddWDKR7PqNUuw2Sbt41oELNvY59Cg62LCMT8gNnA" />
+                <input type="hidden" name="notifyEmail" value="info@fulmo.org" />
+                <div class="btcpay-custom-container">
+                    <div class="btcpay-custom">
+                        <button class="plus-minus" type="button" onclick="handlePlusMinus(event);return false"
+                            data-type="-" data-step="5" data-min="1" data-max="1000">-</button>
+                        <input class="btcpay-input-price" type="number" name="price" min="1" max="1000" step="5"
+                            value="1" data-price="1" style="width:3em;"
+                            oninput="handlePriceInput(event);return false" />
+                        <button class="plus-minus" type="button" onclick="handlePlusMinus(event);return false"
+                            data-type="+" data-step="5" data-min="1" data-max="1000">+</button>
+                    </div>
+                    <select name="currency" id="currencySelect">
+                        <option value="USD">USD</option>
+                        <option value="GBP">GBP</option>
+                        <option value="EUR">EUR</option>
+                        <option value="BTC">BTC</option>
+                    </select>
+                </div>
+                <input type="image" class="submit" name="submit" src="https://btcpay.fulmo.org/img/paybutton/pay.svg"
+                    style="width:209px" alt="Pay with BTCPay Server, a Self-Hosted Bitcoin Payment Processor">
+            </form>
+        </div>
+    </main>
+
+    <footer style="color: #b0b0b0; font-size: 0.8em;">
+        <p>All donations for the RaspiBlitz project are collected by Fulmo &<br /> managed together with the developer
+            team.</p>
+    </footer>
+
+    <script>
+        function handlePlusMinus(event) {
+            event.preventDefault();
+            const root = event.target.closest('.btcpay-form');
+            const el = root.querySelector('.btcpay-input-price');
+            const step = parseInt(event.target.dataset.step);
+            const min = parseInt(event.target.dataset.min);
+            const max = parseInt(event.target.dataset.max);
+            const type = event.target.dataset.type;
+            const price = parseInt(el.value) || min;
+            if (type === '-') {
+                el.value = price - step < min ? min : price - step;
+            } else if (type === '+') {
+                el.value = price + step > max ? max : price + step;
+            }
+        }
+
+        function handlePriceInput(event) {
+            event.preventDefault();
+            const root = event.target.closest('.btcpay-form');
+            const price = parseInt(event.target.dataset.price);
+            if (isNaN(event.target.value)) root.querySelector('.btcpay-input-price').value = price;
+            const min = parseInt(event.target.getAttribute('min'));
+            const max = parseInt(event.target.getAttribute('max'));
+            if (event.target.value < min) {
+                event.target.value = min;
+            } else if (event.target.value > max) {
+                event.target.value = max;
+            }
+        }
+
+        window.addEventListener('DOMContentLoaded', (event) => {
+            const currencySelect = document.getElementById('currencySelect');
+            const userLang = navigator.language || navigator.userLanguage;
+            if (userLang.startsWith('en-GB')) {
+                currencySelect.value = 'GBP';
+            } else if (userLang.startsWith('en-US')) {
+                currencySelect.value = 'USD';
+            } else if (userLang.startsWith('de') || userLang.startsWith('fr') || userLang.startsWith('es') || userLang.startsWith('it')) {
+                currencySelect.value = 'EUR';
+            } else {
+                currencySelect.value = 'USD'; // default fallback
+            }
+        });
+    </script>
+</body>
+
+</html>