added some UI treaks and readme updates

5 years ago · db66e403ae
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!');
        })

      }