mirror of
https://github.com/seigler/dash-docs
synced 2025-07-26 17:26:12 +00:00
Adds donation banner and modal window.
Includes auto-conversions between USD and BTC and autogeneration of QR code.
This commit is contained in:
Igor Kuzmenko
parent
0a4820ad1a
commit
9dc45b2827
7 changed files with 380 additions and 0 deletions
|
|
@ -16,6 +16,8 @@ http://opensource.org/licenses/MIT.
|
|||
{% if page.lang == 'bg' or page.lang == 'el' or page.lang == 'ko' or page.lang == 'hi' or page.lang == 'pl' or page.lang == 'sl' or page.lang == 'ro' or page.lang == 'ru' or page.lang == 'tr' or page.lang == 'uk' or page.lang == 'zh_CN' or page.lang == 'zh_TW' %}<link rel="stylesheet" href="/css/sans.css">{% endif %}
|
||||
<script type="text/javascript" src="/js/base.js"></script>
|
||||
{% if page.id != 'download' %}<script type="text/javascript" src="/js/main.js"></script>{% endif %}
|
||||
<script src="/js/jquery/jquery-1.11.2.min.js"></script>
|
||||
<script src="/js/jquery.qrcode.min.js"></script>
|
||||
<link rel="shortcut icon" href="/favicon.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="/img/icons/logo_ios.png"/>
|
||||
<script>
|
||||
|
|
|
|||
71
_includes/layout/base/pagetop-donation.html
Normal file
71
_includes/layout/base/pagetop-donation.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
{% comment %}
|
||||
This file is licensed under the MIT License (MIT) available on
|
||||
http://opensource.org/licenses/MIT.
|
||||
{% endcomment %}
|
||||
|
||||
<div class="donation-container">
|
||||
<div class="donation-text">
|
||||
<p>
|
||||
{% translate donation-banner-text layout %}
|
||||
</p>
|
||||
<button class="donation-btn" onclick="openDonationModal()">
|
||||
{% translate donation-banner-donate-button layout %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="donation-visibility-toggle" onclick="toggleDonationBanner()">
|
||||
{% translate donation-banner-toggle-button layout %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="donation-modal"
|
||||
style="display: none"
|
||||
class="donation-modal hidden">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<div class="modal-close-btn" onclick="closeDonationModal()">×</div>
|
||||
<p class="modal-header-text">{% translate donation-modal-header layout %}</p>
|
||||
</div>
|
||||
<p class="modal-subheader">{% translate donation-modal-subheader layout %}</p>
|
||||
<div style="text-align: center;">
|
||||
<div id="donation-qr-code" data-address="{{ site.donation_banner.address }}"></div>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
class="donation-btc-address"
|
||||
href="bitcoin:{{ site.donation_banner.address }}"
|
||||
target="_blank">
|
||||
{{ site.donation_banner.address }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="modal-body bg-white" style="overflow-y:hidden;text-align: center;">
|
||||
<div>
|
||||
{% for amount in site.donation_banner.amounts_in_usd %}
|
||||
<button class="donation-amount-btn" data-amount-usd="{{ amount }}">
|
||||
${{ amount }}.00
|
||||
<div class="donation-amount-usd-in-btc">(... BTC)</div>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
style="margin-right: 15px"
|
||||
type="text"
|
||||
placeholder="{% translate donation-modal-input-custom-amount layout %} (BTC)"
|
||||
id="donation-input-amount-btc" class="donation-amount-input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="{% translate donation-modal-input-custom-amount layout %} (USD)"
|
||||
id="donation-input-amount-usd" class="donation-amount-input">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea
|
||||
class="donation-amount-input"
|
||||
id="donation-input-message"
|
||||
placeholder="{% translate donation-modal-optional-message layout %}"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,6 +10,9 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
{% if site.donation_banner.display %}
|
||||
{% include layout/base/pagetop-donation.html %}
|
||||
{% endif %}
|
||||
{% include layout/base/pagetop-detect-mobile.html %}
|
||||
|
||||
{% include layout/base/pagetop-alert.html %}
|
||||
|
|
|
|||
160
_sass/_donation-banner.scss
Normal file
160
_sass/_donation-banner.scss
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
.donation-btn {
|
||||
background-color: #4CAF50;
|
||||
background-image: -webkit-linear-gradient(bottom, #318f20 14%, #4cad2c 70%);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.donation-container {
|
||||
text-align: center;
|
||||
|
||||
.donation-text {
|
||||
background-color: #ef9e5b;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
transition: margin-top .2s ease-in;
|
||||
height: 90px;
|
||||
margin-top: -110px;
|
||||
padding: 10px;
|
||||
|
||||
&.expanded {
|
||||
margin-top: 0;
|
||||
border-bottom: 4px solid #ef9e5b;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
.donation-visibility-toggle {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
background-color: #ef9e5b;
|
||||
color: #fefefe;
|
||||
font-weight: 600;
|
||||
border: 4px solid #ef9e5b;
|
||||
border-top: 0;
|
||||
padding: 10px 50px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
|
||||
|
||||
&.active {
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donation-modal {
|
||||
/* display: block; */
|
||||
background: white;
|
||||
padding: 0 20px;
|
||||
padding-bottom: 20px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
transition: transform .2s ease-in, opacity .12s ease-in;
|
||||
transform-origin: top;
|
||||
|
||||
&.hidden {
|
||||
transform: scale(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.open {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #2c6fad;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header-text {
|
||||
color: #383838;
|
||||
font-size: 110%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.modal-subheader {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
.donation-btc-address {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin: 1.33em 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
.donation-amount-btn {
|
||||
cursor: pointer;
|
||||
background-color: #ef9e5b;
|
||||
background-image: -webkit-linear-gradient(bottom, #de8236 14%, #ef9e5b 70%);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
margin-right: 10px;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background-image: -webkit-linear-gradient(bottom, #ef9e5b 14%, #de8236 70%);
|
||||
}
|
||||
|
||||
.donation-amount-usd-in-btc {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.donation-amount-input {
|
||||
width: 203px;
|
||||
margin-top: 15px;
|
||||
padding: 10px 15px;
|
||||
border: 2px solid #dadada;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
textarea.donation-amount-input {
|
||||
width: 460px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-drop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
background-color: rgba(0, 0, 0, 0.38);
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-in;
|
||||
}
|
||||
|
||||
@media handheld, only screen and ( max-width: 60em ), only screen and ( max-device-width: 60em ){
|
||||
.donation-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2320,3 +2320,4 @@ h2 .rssicon{
|
|||
|
||||
@import 'wallets';
|
||||
@import 'wallets-menu';
|
||||
@import 'donation-banner';
|
||||
|
|
|
|||
|
|
@ -888,6 +888,13 @@
|
|||
sponsor: "A community website sponsored by"
|
||||
getstarted: "Get started with Bitcoin"
|
||||
bitcoin-core: "Bitcoin Core"
|
||||
donation-banner-text: "Bitcoin.org is a community funded project, donations are appreciated and used to improve the website."
|
||||
donation-banner-toggle-button: "Bitcoin.org needs your support!"
|
||||
donation-banner-donate-button: "Make a donation"
|
||||
donation-modal-header: "Donate to Bitcoin.org"
|
||||
donation-modal-subheader: "Please use this QR code or send <br />donation manually using address below"
|
||||
donation-modal-input-custom-amount: "Or custom amount?"
|
||||
donation-modal-optional-message: "Optional message to Bitcoin.org"
|
||||
url:
|
||||
about-us: about-us
|
||||
bitcoin-for-developers: bitcoin-for-developers
|
||||
|
|
|
|||
136
js/main.js
136
js/main.js
|
|
@ -527,3 +527,139 @@ var xint = setInterval(function() {
|
|||
addEvent(document.body, 'mousedown', makeEditable);
|
||||
clearInterval(xint);
|
||||
}, 200);
|
||||
|
||||
function generateDonationUrl(address, amountBtc, message) {
|
||||
var result = [
|
||||
address
|
||||
];
|
||||
|
||||
amountBtc = parseFloat(amountBtc);
|
||||
|
||||
if (!isNaN(amountBtc)) {
|
||||
result.push('?amount=' + amountBtc);
|
||||
}
|
||||
|
||||
if (message !== '') {
|
||||
message = encodeURIComponent(message);
|
||||
result.push(result.length === 1 ? '?' : '&');
|
||||
result.push('message=' + message);
|
||||
}
|
||||
|
||||
return result.join('');
|
||||
}
|
||||
|
||||
function generateDonationQrCode() {
|
||||
var qrcodeContainer = $('#donation-qr-code');
|
||||
qrcodeContainer.empty();
|
||||
|
||||
var address = qrcodeContainer.data('address');
|
||||
var amount = $('#donation-input-amount-btc').val();
|
||||
var message = $('#donation-input-message').val();
|
||||
|
||||
var text = 'bitcoin:' + generateDonationUrl(address, amount, message);
|
||||
|
||||
$('#donation-qr-code').qrcode({
|
||||
width: 150,
|
||||
height: 150,
|
||||
text: text
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function loadTickerPrices() {
|
||||
$.ajax('https://blockchain.info/ticker').then(function(data) {
|
||||
var rate = data.USD.last;
|
||||
|
||||
function usdToBtc(amount) {
|
||||
var amountUsd = parseFloat(amount);
|
||||
if (isNaN(amountUsd)) {
|
||||
return 0;
|
||||
}
|
||||
var amountBtc = amountUsd / rate;
|
||||
return amountBtc.toFixed(8);
|
||||
}
|
||||
|
||||
function btcToUsd(amount) {
|
||||
var amountBtc = parseFloat(amount);
|
||||
if (isNaN(amountBtc)) {
|
||||
return 0;
|
||||
}
|
||||
var amountUsd = amountBtc * rate;
|
||||
return amountUsd.toFixed(2);
|
||||
}
|
||||
|
||||
$('#donation-input-amount-usd').on('keyup', function() {
|
||||
var amount = $(this).val();
|
||||
$('#donation-input-amount-btc').val(usdToBtc(amount));
|
||||
generateDonationQrCode();
|
||||
});
|
||||
|
||||
$('#donation-input-amount-btc').on('keyup', function() {
|
||||
var amount = $(this).val();
|
||||
$('#donation-input-amount-usd').val(btcToUsd(amount));
|
||||
generateDonationQrCode();
|
||||
});
|
||||
|
||||
$('#donation-input-message').on('keyup', function() {
|
||||
generateDonationQrCode();
|
||||
});
|
||||
|
||||
$('[data-amount-usd]').each(function() {
|
||||
var amountUsd = $(this).data('amount-usd');
|
||||
var amountBtc = usdToBtc(amountUsd);
|
||||
$('div', this).text('(' + amountBtc + ' BTC)');
|
||||
|
||||
$(this).on('click', function() {
|
||||
$('#donation-input-amount-btc').val(amountBtc);
|
||||
$('#donation-input-amount-usd').val(amountUsd);
|
||||
|
||||
generateDonationQrCode();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function openDonationModal() {
|
||||
var drop = $('<div class="modal-drop" />');
|
||||
var body = $('body');
|
||||
var modal = $('#donation-modal');
|
||||
body.append(drop);
|
||||
body.css('overflow', 'hidden');
|
||||
modal.css('display', 'block');
|
||||
|
||||
drop.on('click', closeDonationModal);
|
||||
|
||||
// postpone opacity update
|
||||
setTimeout(function() {
|
||||
drop.css('opacity', 1);
|
||||
modal.removeClass('hidden');
|
||||
modal.addClass('open');
|
||||
}, 0);
|
||||
|
||||
loadTickerPrices();
|
||||
generateDonationQrCode();
|
||||
}
|
||||
|
||||
function closeDonationModal() {
|
||||
var drop = $('.modal-drop');
|
||||
var body = $('body');
|
||||
var modal = $('#donation-modal');
|
||||
|
||||
drop.css('opacity', 0);
|
||||
body.css('overflow', 'auto');
|
||||
|
||||
setTimeout(function() {
|
||||
drop.remove();
|
||||
modal.addClass('hidden');
|
||||
modal.removeClass('open');
|
||||
modal.css('display', 'none');
|
||||
}, 120);
|
||||
}
|
||||
|
||||
function toggleDonationBanner() {
|
||||
var banner = $('.donation-text');
|
||||
var toggle = $('.donation-visibility-toggle');
|
||||
|
||||
toggle.toggleClass('active');
|
||||
banner.toggleClass('expanded');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue