QRGenrator/index.html at main · sinzn/QRGenrator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>QR Code Generator</title>
</head>
<body style="text-align: center; margin-top: 100px; font-family: sans-serif;">
  <h2>QR Code Genrator</h2>
  <p>Enter text or a URL below:</p>

  <input type="text" id="qrInput" placeholder="Enter text or URL" style="width: 300px; padding: 5px;">
  <br><br>
  <button onclick="generateQR()">Generate QR</button>

  <div id="qrCode" style="margin-top: 20px;"></div>

  <script>
    function generateQR() {
      const input = document.getElementById('qrInput').value;
      const qrImageURL = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(input)}`;
      document.getElementById('qrCode').innerHTML = `<img src="${qrImageURL}" alt="QR Code">`;
    }
  </script>

   <footer
        style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); padding: 8px 16px; font-family: Arial, sans-serif; font-size: 09px; z-index: 1000;">
        Created by <a href="http://www.shivam-singh.com/" style="text-decoration: none; color: #0366d6;"> Shivam Singh </a> |
        Source available on
        <a href="https://github.com/sinzn/qrgenrator
" target="_blank" style="text-decoration: none; color: #0366d6;">GitHub</a>.
    </footer>
</body>
</html>