Created
May 25, 2025 01:23
-
-
Save tariquesani/4ff27c176d8ec30e34c313bd6edfa7a0 to your computer and use it in GitHub Desktop.
A handy WiFi QR Code Generator. Just open in browser
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Wi-Fi QR Code Generator</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Bootstrap 5 --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| padding: 2rem; | |
| } | |
| canvas { | |
| display: block; | |
| margin: 1rem auto; | |
| } | |
| #ssidLabel { | |
| font-weight: bold; | |
| text-align: center; | |
| margin-top: 0.5rem; | |
| font-size: 1.2rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2 class="mb-4 text-center">Wi-Fi QR Code Generator</h2> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="ssid" class="form-label">SSID (Wi-Fi Name)</label> | |
| <input type="text" id="ssid" class="form-control" placeholder="Enter Wi-Fi name"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="password" class="form-label">Password</label> | |
| <input type="text" id="password" class="form-control" placeholder="Enter password"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="auth" class="form-label">Authentication</label> | |
| <select id="auth" class="form-select"> | |
| <option value="WPA">WPA/WPA2</option> | |
| <option value="WEP">WEP</option> | |
| <option value="nopass">None (Open)</option> | |
| </select> | |
| </div> | |
| <div class="mb-3 form-check"> | |
| <input type="checkbox" id="hidden" class="form-check-input"> | |
| <label for="hidden" class="form-check-label">Hidden SSID</label> | |
| </div> | |
| <div class="d-grid gap-2 mb-4"> | |
| <button class="btn btn-primary" onclick="generateQRCode()">Generate QR Code</button> | |
| <button class="btn btn-success" onclick="downloadQRCode()">Download PNG</button> | |
| </div> | |
| <div class="text-center"> | |
| <canvas id="qrcanvas"></canvas> | |
| <div id="ssidLabel"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- QRCode library --> | |
| <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script> | |
| <script> | |
| function generateQRCode() { | |
| const ssid = document.getElementById('ssid').value.trim(); | |
| const password = document.getElementById('password').value; | |
| const auth = document.getElementById('auth').value; | |
| const hidden = document.getElementById('hidden').checked; | |
| const label = document.getElementById('ssidLabel'); | |
| if (!ssid) { | |
| alert("Please enter an SSID."); | |
| return; | |
| } | |
| const hiddenFlag = hidden ? ';H:true' : ''; | |
| const qrData = `WIFI:T:${auth};S:${ssid};P:${password}${hiddenFlag};;`; | |
| const canvas = document.getElementById('qrcanvas'); | |
| QRCode.toCanvas(canvas, qrData, { width: 256 }, function (error) { | |
| if (error) { | |
| console.error("QR generation error:", error); | |
| } else { | |
| label.textContent = ssid; | |
| } | |
| }); | |
| } | |
| function downloadQRCode() { | |
| const canvas = document.getElementById('qrcanvas'); | |
| const ssid = document.getElementById('ssid').value.trim(); | |
| if (!ssid) { | |
| alert("Please enter an SSID before downloading."); | |
| return; | |
| } | |
| const link = document.createElement('a'); | |
| link.download = `${ssid}_QR.png`; | |
| link.href = canvas.toDataURL('image/png'); | |
| link.click(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment