mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2024-12-17 17:20:21 +01:00
website: donations page
This commit is contained in:
Evgeny Poberezkin
@@ -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>
|
||||
Reference in New Issue
Block a user