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 1/2] 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

From aab05a25681af7088677f09c48d5cf83a918b264 Mon Sep 17 00:00:00 2001
From: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Date: Fri, 2 Aug 2024 16:25:43 +0500
Subject: [PATCH 2/2] web: style donate page

---
 website/.eleventy.js    |  35 ++++++++++++
 website/package.json    |   1 +
 website/src/donate.html | 122 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 157 insertions(+), 1 deletion(-)

diff --git a/website/.eleventy.js b/website/.eleventy.js
index a0a35f3366..63249cfad8 100644
--- a/website/.eleventy.js
+++ b/website/.eleventy.js
@@ -7,6 +7,7 @@ const i18n = require('eleventy-plugin-i18n')
 const fs = require("fs")
 const path = require("path")
 const matter = require('gray-matter')
+const cheerio = require('cheerio')
 const pluginRss = require('@11ty/eleventy-plugin-rss')
 const { JSDOM } = require('jsdom')
 
@@ -93,6 +94,40 @@ module.exports = function (ty) {
     }
   })
 
+  ty.addShortcode("includeReadmeSectionHtml", function(sectionName) {
+    const readmePath = path.join(__dirname, '../README.md')
+    const readmeContent = fs.readFileSync(readmePath, 'utf8')
+    
+    const htmlContent = md.render(readmeContent)
+    
+    const cheerioDoc = cheerio.load(htmlContent)
+    let sectionContent = ''
+    let captureContent = false
+    let depth = 0
+    
+    cheerioDoc('body > *').each((i, elem) => {
+      if (cheerioDoc(elem).is('h2') && cheerioDoc(elem).text().trim() === sectionName) {
+        captureContent = true
+        sectionContent += cheerioDoc(elem).prop('outerHTML')
+      } else if (cheerioDoc(elem).is('h2') && captureContent) {
+        if (depth === 0) {
+          captureContent = false
+          return false // Stop iterating
+        }
+      } else if (captureContent) {
+        if (cheerioDoc(elem).is('ul, ol')) {
+          depth++
+        }
+        sectionContent += cheerioDoc(elem).prop('outerHTML')
+        if (cheerioDoc(elem).is('ul, ol')) {
+          depth--
+        }
+      }
+    })
+    
+    return sectionContent || `Section "${sectionName}" not found in README.md`
+  })
+
   ty.addFilter('applyGlossary', function (content) {
     const dom = new JSDOM(content)
     const { document } = dom.window
diff --git a/website/package.json b/website/package.json
index bbe3a17a68..c8b2a9231d 100644
--- a/website/package.json
+++ b/website/package.json
@@ -28,6 +28,7 @@
     "tailwindcss": "3.3.1"
   },
   "dependencies": {
+    "cheerio": "^1.0.0-rc.12",
     "eleventy-plugin-i18n": "^0.1.3",
     "fs": "^0.0.1-security",
     "gray-matter": "^4.0.3",
diff --git a/website/src/donate.html b/website/src/donate.html
index d61d6a91af..bcb4bcbfff 100644
--- a/website/src/donate.html
+++ b/website/src/donate.html
@@ -192,9 +192,128 @@ templateEngineOverride: njk
     input[type=range].btcpay-input-range:focus::-ms-fill-upper {
         background: #fff;
     }
+
+    .donate-content h2{
+        color: #0197ff;
+        font-weight: 700;
+        font-size: 28px;
+        line-height: 36px;
+        margin-bottom: 28px;
+        text-align: left;
+    }
+
+    :is([dir="rtl"] .donate-content h2) {
+        text-align: right;
+    }
+
+    .donate-content p{
+        color: #0d0e12;
+        line-height: 24px;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+
+    :is(.dark .donate-content p) {
+        color: #ffffff;
+    }
+
+    @media (min-width: 768px) {
+        .donate-content h2{
+            font-size: 35px;
+            line-height: 43px;
+        }
+    }
+
+    .donate-content a {
+        color: #0053D0;
+        text-decoration: underline;
+        text-underline-offset: 4px;
+    }
+
+    .dark .donate-content a,
+    .dark .donate-content h2 {
+        color: #70F0F9;
+    }
+
+    .donate-content ul,
+    .donate-content ol {
+        list-style-position: inside;
+        overflow: auto;
+        margin: 10px 0;
+    }
+
+    .donate-content > ul{
+        margin-bottom: 1.5rem;
+    }
+
+    .donate-content ul li,
+    .donate-content ol li {
+        margin-right: 0;
+        margin-left: 0;
+        -webkit-margin-start: 1.1rem;
+        color: #0d0e12;
+        word-wrap: break-word;
+        white-space: normal; 
+    }
+
+    @media (min-width: 1024px) {
+        .donate-content ul li,
+        .donate-content ol li {
+            word-break: break-all;
+        }
+    }
+
+    .dark .donate-content ul li,
+    .dark .donate-content ol li {
+        color: #fff;
+    }
+
+    .donate-content ul li::marker,
+    .donate-content ol li::marker {
+        color: #0d0e12;
+    }
+
+    .dark .donate-content ul li::marker,
+    .dark .donate-content ol li::marker {
+        color: white;
+    }
+
+    .donate-content ul li {
+        list-style: disc;
+        letter-spacing: 0.4px;
+    }
+
+    .donate-content ol li {
+        list-style: decimal;
+    }
+
+    .donate-content > p:nth-last-child(3),
+    .donate-content > p:nth-last-child(2){
+        margin-bottom: 4px;
+    }
+
+    .donate-content > p:nth-last-child(3) {
+        font-weight: bold;
+    }
+
+    .donate-form{
+        padding: 5rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .donate-form form{
+        scale: 1.2;
+    }
 </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">
+    class="container bg-primary-bg-light dark:bg-primary-bg-dark mt-[66px] px-5 flex flex-col-reverse lg:flex-row lg:gap-5">
+    <div class="donate-content flex-[5] py-[75px]">
+        {% includeReadmeSectionHtml 'Help us with donations' %}
+    </div>
+
+    <div class="donate-form flex-[4] max-h-[calc(100vh-66px)]">
     <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" />
@@ -216,6 +335,7 @@ templateEngineOverride: njk
                 style="height:57px;display:inline-block;padding:5% 0 5% 5px;vertical-align:middle;">
         </button>
     </form>
+    </div>
 </section>
 <script>
     (function () {