mirror of
https://github.com/seigler/dash-docs
synced 2025-07-27 01:36:13 +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 %}
|
{% 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>
|
<script type="text/javascript" src="/js/base.js"></script>
|
||||||
{% if page.id != 'download' %}<script type="text/javascript" src="/js/main.js"></script>{% endif %}
|
{% 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="shortcut icon" href="/favicon.png">
|
||||||
<link rel="apple-touch-icon-precomposed" href="/img/icons/logo_ios.png"/>
|
<link rel="apple-touch-icon-precomposed" href="/img/icons/logo_ios.png"/>
|
||||||
<script>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
{% if site.donation_banner.display %}
|
||||||
|
{% include layout/base/pagetop-donation.html %}
|
||||||
|
{% endif %}
|
||||||
{% include layout/base/pagetop-detect-mobile.html %}
|
{% include layout/base/pagetop-detect-mobile.html %}
|
||||||
|
|
||||||
{% include layout/base/pagetop-alert.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';
|
||||||
@import 'wallets-menu';
|
@import 'wallets-menu';
|
||||||
|
@import 'donation-banner';
|
||||||
|
|
|
||||||
|
|
@ -888,6 +888,13 @@
|
||||||
sponsor: "A community website sponsored by"
|
sponsor: "A community website sponsored by"
|
||||||
getstarted: "Get started with Bitcoin"
|
getstarted: "Get started with Bitcoin"
|
||||||
bitcoin-core: "Bitcoin Core"
|
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:
|
url:
|
||||||
about-us: about-us
|
about-us: about-us
|
||||||
bitcoin-for-developers: bitcoin-for-developers
|
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);
|
addEvent(document.body, 'mousedown', makeEditable);
|
||||||
clearInterval(xint);
|
clearInterval(xint);
|
||||||
}, 200);
|
}, 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