added some UI treaks and readme updates

This commit is contained in:
Syed Faizan
2021-02-28 18:58:00 +05:30
parent 4d3cbc3c03
commit db66e403ae
2 changed files with 32 additions and 9 deletions
+29 -6
View File
@@ -6,6 +6,13 @@
<title>UPI QR code generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<style>
.outputWrapper{
border: 1px solid #606c76;
border-radius: 4px;
padding: 2%;
}
</style>
</head>
<body>
<div class="container">
@@ -22,10 +29,13 @@
<input class="button-primary" type="submit" value="Generate QR code">
</fieldset>
</form>
<a href="#" class="button button-outline" target="_blank" id="appLink"><strong>Open UPI App</strong></a>
<label for="sharelink">Sharable link</label>
<input type="text" readonly id="sharelink">
<img src="//:0" alt="" id="outputImg">
<div class="outputWrapper">
<a href="#" class="button button-outline" target="_blank" id="appLink"><strong>Open UPI App</strong></a>
<a onclick="copyToClipboard()" class="button button-outline" target="_blank" id="copyLink"><strong>Copy Link</strong></a>
<label for="sharelink">Sharable link</label>
<input type="text" readonly id="sharelink">
<img src="//:0" alt="" id="outputImg">
</div>
</div>
</div>
</div>
@@ -37,6 +47,20 @@
return document.getElementById(sel);
}
function copyToClipboard() {
// change btn text
var link = $('copyLink');
link.innerText = 'Copied!'
setTimeout(()=>{
// restore btn text
link.innerText = 'Copy Link'
}, 1000)
var input = $('sharelink');
input.focus();
input.select();
document.execCommand('copy');
}
function renderQR(accNo, ifscCode, accountHolder){
var upiString = 'upi://pay?pa='+ accNo + '@'+ ifscCode + '.ifsc.npci&pn='+ accountHolder +'&am=';
@@ -46,7 +70,7 @@
margin: 1,
scale:8,
color: {
dark:"#580000",
dark:"#9b4dca",
light:"#fff"
}
}
@@ -59,7 +83,6 @@
return;
}
$('outputImg').src = dataUrl;
console.log('success!');
})
}