mirror of https://github.com/bumi/lntip
209 lines
6.7 KiB
HTML
209 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<meta property="og:site_name" content="">
|
|
<meta property="og:description" content="">
|
|
|
|
<meta property="og:image" content="/lnme/icon.svg">
|
|
|
|
<title>Send me some Sats</title>
|
|
<style>
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 1vw;
|
|
}
|
|
body {
|
|
background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
|
|
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
}
|
|
.wrapper {
|
|
font-weight: 400;
|
|
line-height: 1.25;
|
|
margin-bottom: 1rem;
|
|
font-size: 4em;
|
|
color: #fff;
|
|
width: 640px;
|
|
margin: 1em auto;
|
|
text-align: center;
|
|
}
|
|
.note {
|
|
font-size: 0.2em;
|
|
}
|
|
.wrapper h1 {
|
|
font-weight: 700;
|
|
}
|
|
.wrapper h2 {
|
|
font-weight: 400;
|
|
}
|
|
.wrapper a, .wrapper a:visited, .wrapper a:active {
|
|
color: #fff;
|
|
text-decoration:none;
|
|
}
|
|
.wrapper p {
|
|
margin: 0.5em 0;
|
|
}
|
|
input, input:focus {
|
|
outline: none;
|
|
background-color: transparent;
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
border: none;
|
|
border-bottom: 1px solid #fff;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
::placeholder {
|
|
color: #fff;
|
|
opacity: 0.2;
|
|
}
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input.amount {
|
|
width: 300px;
|
|
}
|
|
input.memo {
|
|
width: 100%;
|
|
}
|
|
button {
|
|
color: #fff;
|
|
font-weight: 400;
|
|
font-size: 0.5em;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: 30px;
|
|
background-color: #2b76b9;
|
|
}
|
|
h2.lnme-value, h1.lnme-memo {
|
|
font-size: 2em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.lnme-wrapper {
|
|
margin-top: 1em;
|
|
font-size: 0.5em;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
.lnme-qrcode > canvas {
|
|
border: 5px solid #fff;
|
|
background: #fff;
|
|
}
|
|
.lnme-details {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.lnme-link {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.lnme-copy {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<link rel="icon" type="image/svg+xml" href="/lnme/favicon.svg" />
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<div class="form" id="form">
|
|
<p>
|
|
Send me<br>
|
|
<input type="number" placeholder="10000" class="amount" id="amount" autofocus="true" autocomplete="off" min="100"> Sats
|
|
<br>
|
|
for
|
|
<br>
|
|
<input type="text" class="memo" id="memo" placeholder="message" autocomplete="off">
|
|
</p>
|
|
|
|
<button id="send-button">⚡ Send ⚡</button>
|
|
|
|
<p id="onchain" class="note">
|
|
<a href="#" id="get-new-address" class="onchain">Prefer onchain Bitcoin? Click here!</a>
|
|
</p>
|
|
|
|
<div id="lnme-wrapper" class="lnme-wrapper" style="display:none">
|
|
<div class="lnme-qrcode"></div>
|
|
<div class="lnme-details">
|
|
<a href="#" class="lnme-link"><span class="lnme-payment-request"></span></a>
|
|
<div class="lnme-copy">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loader" style="display:none">
|
|
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
|
|
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
|
|
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/>
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/lnme/lnme.js" id="lnme-script"></script>
|
|
<script>
|
|
var siteName = document.querySelector('head > meta[property="og:site_name"]');
|
|
if (siteName && !siteName.content) {
|
|
siteName.content = window.location.host;
|
|
}
|
|
var siteDescription = document.querySelector('head > meta[property="og:description"]');
|
|
if (siteDescription && !siteDescription.content) {
|
|
siteDescription.content = "Sats for " + window.location.host;
|
|
}
|
|
document.getElementById("get-new-address").addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
var lnme = new LnMe({});
|
|
lnme.newAddress().then(address => {
|
|
document.getElementById("onchain").innerHTML = address;
|
|
});
|
|
});
|
|
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get('amount')) {
|
|
document.getElementById('amount').value = urlParams.get('amount');
|
|
}
|
|
if (urlParams.get('memo')) {
|
|
document.getElementById('memo').value = urlParams.get('memo');
|
|
}
|
|
document.getElementById('send-button').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
var amountElement = document.getElementById('amount');
|
|
var memoElement = document.getElementById('memo');
|
|
if (amountElement.value == "") {
|
|
return;
|
|
}
|
|
|
|
document.getElementById('loader').style.display = 'block';
|
|
|
|
|
|
e.target.setAttribute('disabled', true);
|
|
amountElement.setAttribute('disabled', true);
|
|
memoElement.setAttribute('disabled', true);
|
|
|
|
var lnme = new LnMe({ value: amountElement.value, memo: memoElement.value, target: document.getElementById('lnme-wrapper') });
|
|
|
|
lnme.showPaymentRequest = function() {
|
|
document.getElementById('send-button').style.display = 'none';
|
|
document.getElementById('lnme-wrapper').style.display = 'block';
|
|
this.populatePaymentRequest();
|
|
}
|
|
lnme.thanks = function() {
|
|
document.getElementById('form').innerHTML = '<h1 class="lnme-headline">Thanks!</h1>';
|
|
}
|
|
lnme.request();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|