Merge pull request #1 from syedfaizan/main

added some UI treaks and readme updates
5 years ago · 796aa0c44d
2 changed files with 32 additions and 9 deletions
--- a/README.md
+++ b/README.md
@ -3,12 +3,12 @@ Generate shareable QR code, link from bank details to use with UPI payment apps
 ## [Try it now](https://harish2704.github.io/UPI-qr-gen/)
 It first generate a [UPI](https://www.npci.org.in/what-we-do/upi/product-overview) id from bank details and then generates following items for end users.
 This tool first generates a [UPI](https://www.npci.org.in/what-we-do/upi/product-overview) id from bank details provided and then generates following items for end users to reuse.
 1. QR code image
 2. Sharable URL
    - Shareable URLs **do not send any banking data to any third party servers**. The data is stored in "hashbang" which is only accessible to web browsers and not sent to servers
 3. Mobile friendly link which will invoke the installed UPI application in any device
    - Shareable URLs **This tool does not save/send any banking data to any third party servers**. The data is stored in "hashbang" which is only accessible to web browsers and not sent to servers
 3. Mobile friendly link which will invoke the UPI application of your choice on any device
 ### Powered by
--- a/index.html
+++ b/index.html
@ -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!');
        })
      }