add bootstrap

This commit is contained in:
callebtc 2022-08-29 01:41:07 +02:00
parent ab82b49ff5
commit 62c2cbab5f

View file

@ -13,6 +13,8 @@
<meta name="MobileOptimized" content="176" />
<meta name="HandheldFriendly" content="True" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>LNURL</title>
<script src="https://unpkg.com/kjua@0.6.0/dist/kjua.min.js"></script>
<script src="https://telegram.org/js/telegram-web-app.js?1"></script>
@ -43,10 +45,7 @@
display: block;
width: 100%;
font-size: 14px;
margin: 15px 0;
padding: 12px 20px;
border: none;
border-radius: 4px;
background-color: var(--tg-theme-button-color, #50a8eb);
color: var(--tg-theme-button-text-color, #ffffff);
cursor: pointer;
@ -61,10 +60,7 @@
input {
font-size: 14px;
text-align: center;
padding: 12px 20px;
margin: 15px 0;
border: none;
border-radius: 4px;
background-color: var(--tg-theme-bg-color, #f5f5f5);
color: var(--tg-theme-text-color, #1a1a1a);
}
@ -218,6 +214,7 @@
padding: 12px 20px;
column-gap: 10px;
row-gap: 1em;
align-items: center;
}
</style>
</head>
@ -235,11 +232,15 @@
<div id="buttons">
<!-- <button onclick="webviewClose();">Close</button> -->
<div class="wrapper">
<div>
<input type="number" min="1" inputmode="numeric" pattern="[0-9]*" id="invoiceAmount" placeholder="amount in sat" style="width: 80%"></input>
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group">
<input type="number" class="form-control" min="1" inputmode="numeric" pattern="[0-9]*" id="invoiceAmount" placeholder="amount">
<div class="input-group-append">
<div class="input-group-text">sat</div>
</div>
</div>
<div>
<button onclick="invoiceButtonClick();" style="display: inline;" id="requestInvoice">Invoice</button>
<button class="btn btn-primary" onclick="invoiceButtonClick();" style="display: inline;" id="requestInvoice">Invoice</button>
</div>
</div>
</div>
@ -271,8 +272,6 @@
}
// listen for enter in input field
var el = document.getElementById("invoiceAmount");
el.addEventListener("keydown", function(event) {
@ -280,6 +279,8 @@
document.getElementById("requestInvoice").click();
}
document.getElementById("requestInvoice").innerHTML = "Invoice"
// revert color of button
$('#requestInvoice').removeClass('btn-danger').addClass('btn-primary');
});
// ------------------ functions ------------------
@ -292,6 +293,13 @@
window.scrollTo(0, 0);
}
function invoiceButtonDisplayError(message) {
btn = document.getElementById("requestInvoice")
btn.innerHTML = message
// update color of button
$('#requestInvoice').removeClass('btn-primary').addClass('btn-danger');
}
function webviewClose() {
Telegram.WebApp.close();
}
@ -319,8 +327,8 @@
console.log(r);
var invoiceAmount = Number(document.getElementById("invoiceAmount").value);
if (!Number.isInteger(invoiceAmount) || invoiceAmount < 1) {
document.getElementById("requestInvoice").innerHTML = "Error"
return true;
invoiceButtonDisplayError("Invalid")
return false;
}
console.log("requesting invoice with amount " + invoiceAmount);
fetch(r.callback + '?amount='+ invoiceAmount * 1000).then(data => {
@ -333,13 +341,17 @@
renderQr(r.pr);
document.querySelector('#greeting').innerHTML = "Pay " + invoiceAmount + " sat";
} else {
document.getElementById("requestInvoice").innerHTML = "Error"
invoiceButtonDisplayError("Error")
return false;
}
})
})
}
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>