mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-01-19 05:33:31 +01:00
Change donation button from slider to input
This commit is contained in:
nicolas.dorier
parent
f570de5086
commit
645516ee1b
@ -81,109 +81,8 @@
|
||||
<div class="col-lg-4 mr-auto text-center"></div>
|
||||
<div class="col-lg-4 ml-auto text-center">
|
||||
<form method="POST" action="https://mainnet.demo.btcpayserver.org/api/v1/invoices">
|
||||
<input type="hidden" name="storeId" value="9jT32zwtZ9m6DPNVYTLNQZiKQSEM5r4wTej6t3NDb4VR" />
|
||||
<div style="text-align:center;width:209px;display:inline;">
|
||||
<input type="text" id="btcpay-input-price" name="price" value="10" style="border: none; background-image: none; background-color: transparent; -webkit-box-shadow: none ; -moz-box-shadow: none ; -webkit-appearance: none ; width: 209px; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff;" oninput="event.preventDefault();isNaN(event.target.value) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = 10 : event.target.value" onchange="document.querySelector('#btcpay-input-range').value = document.querySelector('#btcpay-input-price').value" /><select onchange="document.querySelector('input[type = hidden][name = currency]').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;"><option value="USD">USD</option><option value="GBP">GBP</option><option value="EUR">EUR</option><option value="BTC">BTC</option></select><input class="btcpay-input-range" id="btcpay-input-range" value="10" type="range" min="1" max="20" step="1" style="width:209px ;margin-bottom:15px;" oninput="document.querySelector('#btcpay-input-price').value = document.querySelector('#btcpay-input-range').value" />
|
||||
<style type="text/css">
|
||||
input[type=range].btcpay-input-range {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
margin: 9.45px 0
|
||||
}
|
||||
|
||||
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 solid rgba(24,213,1,0)
|
||||
}
|
||||
|
||||
input[type=range].btcpay-input-range::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
|
||||
border: 2.5px solid #cedc21;
|
||||
height: 22px;
|
||||
width: 23px;
|
||||
border-radius: 12px;
|
||||
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 solid rgba(24,213,1,0)
|
||||
}
|
||||
|
||||
input[type=range].btcpay-input-range::-moz-range-thumb {
|
||||
box-shadow: 0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
|
||||
border: 2.5px solid #cedc21;
|
||||
height: 22px;
|
||||
width: 23px;
|
||||
border-radius: 12px;
|
||||
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 solid rgba(24,213,1,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 solid rgba(24,213,1,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: 0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
|
||||
border: 2.5px solid #cedc21;
|
||||
height: 22px;
|
||||
width: 23px;
|
||||
border-radius: 12px;
|
||||
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>
|
||||
</div>
|
||||
<input type="hidden" name="storeId" value="EErYwCthBNfJUpuU1etH1uhg3x1YVH1q1F2zez7u1AAX" />
|
||||
<div style="text-align:center;display:inline;width:209px"><div><button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault(); var price = parseInt(document.querySelector('#btcpay-input-price').value); if ('-' == '-' && (price - 1) < 1) { return; } document.querySelector('#btcpay-input-price').value = parseInt(document.querySelector('#btcpay-input-price').value) - 1;">-</button><input type="text" id="btcpay-input-price" name="price" value="10" style="border: none; background-image: none; background-color: transparent; -webkit-box-shadow: none ; -moz-box-shadow: none ; -webkit-appearance: none ; width: 3em; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff;" oninput="event.preventDefault();isNaN(event.target.value) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = 10 : event.target.value" /><button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault(); var price = parseInt(document.querySelector('#btcpay-input-price').value); if ('+' == '-' && (price - 1) < 1) { return; } document.querySelector('#btcpay-input-price').value = parseInt(document.querySelector('#btcpay-input-price').value) + 1;">+</button></div><select onchange="document.querySelector('input[type = hidden][name = currency]').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;"><option value="USD">USD</option><option value="GBP">GBP</option><option value="EUR">EUR</option><option value="BTC">BTC</option></select></div>
|
||||
<input type="hidden" name="currency" value="USD" />
|
||||
<input type="image" src="~/img/paybutton/pay.png" name="submit" style="width:209px" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">
|
||||
</form>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user