Created
July 13, 2025 10:18
-
-
Save liyu1981/c464586570e1d8ac54bb79524a58456c to your computer and use it in GitHub Desktop.
example of webpage contains a qr code for connecting wifi
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> | |
| <head> | |
| <title>Scan to Connect to Wi-Fi</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background-color: #f0f0f0; | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 20px; | |
| border-radius: 10px; | |
| background-color: white; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| canvas { | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Scan to Connect to Wi-Fi</h1> | |
| <p>Scan the QR code below with your phone to connect to the "<span id="network-name"></span>" Wi-Fi network.</p> | |
| <canvas id="qrcode"></canvas> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/qrcode.min.js"></script> | |
| <script> | |
| const networkName = "mynetwork-guest"; | |
| const networkPassword = "guestpass"; | |
| const wifiData = `WIFI:T:WPA;S:${networkName};P:${networkPassword};;`; | |
| const canvas = document.getElementById('qrcode'); | |
| document.getElementById('network-name').textContent = networkName; | |
| QRCode.toCanvas(canvas, wifiData, function (error) { | |
| if (error) console.error(error); | |
| console.log('success!'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment