From 4d2fe04acf92d0e10ab8d19c8b89a21121e3f4a9 Mon Sep 17 00:00:00 2001
From: Evgeny Poberezkin <evgeny@poberezkin.com>
Date: Sat, 6 Jul 2024 12:25:25 +0100
Subject: [PATCH] website: donations page

---
 website/src/donate.html | 278 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 278 insertions(+)
 create mode 100644 website/src/donate.html

diff --git a/website/src/donate.html b/website/src/donate.html
new file mode 100644
index 0000000000..d61d6a91af
--- /dev/null
+++ b/website/src/donate.html
@@ -0,0 +1,278 @@
+---
+layout: layouts/main.html
+title: "SimpleX Chat - Donate"
+description: "Get the app via F-Droid"
+templateEngineOverride: njk
+---
+
+<style>
+    .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: #DFE0E1;
+        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: currentColor;
+        background: transparent;
+        border: 1px solid transparent;
+        display: block;
+        padding: 1px;
+        margin-left: auto;
+        margin-right: auto;
+        font-size: 11px;
+        cursor: pointer;
+    }
+
+    .btcpay-form select:hover {
+        border-color: #ccc;
+    }
+
+    .btcpay-form option {
+        color: #000;
+        background: rgba(0, 0, 0, .1);
+    }
+
+    .btcpay-input-price {
+        -moz-appearance: textfield;
+        border: none;
+        box-shadow: none;
+        text-align: center;
+        font-size: 25px;
+        margin: auto;
+        border-radius: 5px;
+        line-height: 35px;
+        background: #fff;
+    }
+
+    .btcpay-input-price::-webkit-outer-spin-button,
+    .btcpay-input-price::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+</style>
+<style>
+    input[type=range].btcpay-input-range {
+        -webkit-appearance: none;
+        width: 100%;
+        background: transparent;
+    }
+
+    input[type=range].btcpay-input-range:focus {
+        outline: 0;
+    }
+
+    input[type=range].btcpay-input-range::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 3.1px;
+        cursor: pointer;
+        box-shadow: 0 0 1.7px #020, 0 0 0 #003c00;
+        background: #f3f3f3;
+        border-radius: 1px;
+        border: 0;
+    }
+
+    input[type=range].btcpay-input-range::-webkit-slider-thumb {
+        box-shadow: none;
+        border: 2.5px solid #cedc21;
+        height: 22px;
+        width: 22px;
+        border-radius: 50%;
+        background: #0f3723;
+        cursor: pointer;
+        -webkit-appearance: none;
+        margin-top: -9.45px
+    }
+
+    input[type=range].btcpay-input-range:focus::-webkit-slider-runnable-track {
+        background: #fff;
+    }
+
+    input[type=range].btcpay-input-range::-moz-range-track {
+        width: 100%;
+        height: 3.1px;
+        cursor: pointer;
+        box-shadow: 0 0 1.7px #020, 0 0 0 #003c00;
+        background: #f3f3f3;
+        border-radius: 1px;
+        border: 0;
+    }
+
+    input[type=range].btcpay-input-range::-moz-range-thumb {
+        box-shadow: none;
+        border: 2.5px solid #cedc21;
+        height: 22px;
+        width: 22px;
+        border-radius: 50%;
+        background: #0f3723;
+        cursor: pointer;
+    }
+
+    input[type=range].btcpay-input-range::-ms-track {
+        width: 100%;
+        height: 3.1px;
+        cursor: pointer;
+        background: 0 0;
+        border-color: transparent;
+        color: transparent;
+    }
+
+    input[type=range].btcpay-input-range::-ms-fill-lower {
+        background: #e6e6e6;
+        border: 0;
+        border-radius: 2px;
+        box-shadow: 0 0 1.7px #020, 0 0 0 #003c00;
+    }
+
+    input[type=range].btcpay-input-range::-ms-fill-upper {
+        background: #f3f3f3;
+        border: 0;
+        border-radius: 2px;
+        box-shadow: 0 0 1.7px #020, 0 0 0 #003c00;
+    }
+
+    input[type=range].btcpay-input-range::-ms-thumb {
+        box-shadow: none;
+        border: 2.5px solid #cedc21;
+        height: 22px;
+        width: 22px;
+        border-radius: 50%;
+        background: #0f3723;
+        cursor: pointer;
+        height: 3.1px;
+    }
+
+    input[type=range].btcpay-input-range:focus::-ms-fill-lower {
+        background: #f3f3f3;
+    }
+
+    input[type=range].btcpay-input-range:focus::-ms-fill-upper {
+        background: #fff;
+    }
+</style>
+<section
+    class="bg-primary-bg-light dark:bg-primary-bg-dark py-[75px] mt-[66px] px-5 lg:h-[calc(100vh-66px)] lg:max-h-[888px] lg:flex lg:items-center">
+    <form method="POST" action="https://btcpay.simplex.chat/api/v1/invoices" class="btcpay-form btcpay-form--block">
+        <input type="hidden" name="storeId" value="932Twc9xWnAzFx1iA5VRMoRVEvn7tydmpwqqTVf6ziiV" />
+        <input type="hidden" name="jsonResponse" value="true" />
+        <div class="btcpay-custom-container">
+            <input class="btcpay-input-price" type="number" name="price" min="0.0001" max="10" step="0.005"
+                value="0.001" data-price="0" style="width:209px;" />
+            <input type="hidden" name="currency" value="BTC" />
+            <select disabled>
+                <option value="BTC" selected>BTC</option>
+            </select>
+            <input type="range" class="btcpay-input-range" min="0" max="1" step="0.005" value="0.001"
+                style="width:209px;margin-bottom:15px;" />
+        </div>
+        <button type="submit" class="submit" name="submit"
+            style="min-width:209px;min-height:57px;border-radius:4px;border-style:none;background-color:#0f3b21;cursor:pointer;"
+            title="Donate via BTCPay Server, a Self-Hosted Bitcoin Payment Processor"><span style="color:#fff">Donate
+                via</span>
+            <img src="https://btcpay.simplex.chat/img/paybutton/logo.svg"
+                style="height:57px;display:inline-block;padding:5% 0 5% 5px;vertical-align:middle;">
+        </button>
+    </form>
+</section>
+<script>
+    (function () {
+        if (!window.btcpay) {
+            var script = document.createElement("script");
+            script.src = "https://btcpay.simplex.chat/modal/btcpay.js";
+            document.getElementsByTagName("head")[0].append(script);
+        }
+        const form = document.querySelector(".btcpay-form");
+        const field = form.querySelector(".btcpay-input-price");
+        const slider = form.querySelector(".btcpay-input-range");
+        const min = 0.0001;
+        const maxSlider = 1;
+        const maxInput = 10;
+
+        attach(form, "submit", (event) => {
+            event.preventDefault();
+            var xhttp = new XMLHttpRequest();
+            xhttp.onreadystatechange = function () {
+                if (this.readyState == 4 && this.status == 200 && this.responseText) {
+                    window.btcpay.appendInvoiceFrame(JSON.parse(this.responseText).invoiceId);
+                }
+            };
+            xhttp.open("POST", event.target.getAttribute("action"), true);
+            xhttp.send(new FormData(event.target));
+        });
+
+        attach(slider, "input", (event) => {
+            event.preventDefault();
+            const price = parseFloat(slider.value);
+            if (price === undefined || isNaN(price) || price < min) {
+                slider.value = min;
+                field.value = min;
+            } else {
+                field.value = price;
+            }
+        });
+
+        attach(field, "input", (event) => {
+            event.preventDefault();
+            let price = parseFloat(field.value);
+            if (price === undefined || isNaN(price) || price < min) {
+                field.value = min;
+                slider.value = min;
+            } else if (price > maxInput) {
+                field.value = maxInput;
+                slider.value = maxSlider;
+            } else {
+                slider.value = price
+            }
+        });
+
+        function attach(el, event, listener) {
+            if (!el.dataset.initialized) {
+                el.addEventListener(event, listener);
+                el.dataset.initialized = true;
+            }
+        }
+    })()
+</script>
\ No newline at end of file