Update

cjee21 · Sep 6, 2024 · f43d383 · f43d383
1 parent 5214269
commit f43d383
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,4 @@
-<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=description content="Wi-Fi QR Code generator supporting WPA2 and WPA3 for Android devices implemented in HTML/CSS/JavaScript."> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=referrer content=no-referrer> <meta http-equiv=x-dns-prefetch-control content=off> <meta http-equiv=Content-Security-Policy content="default-src 'none'; img-src data:; style-src 'sha256-zoyJXL8oxc1J/iIi0l/NWBxffC6mpxwD5lckmGqldTQ='; script-src 'self' 'sha256-KSX4emQrUfFDtBx4gXUOTS+e7YoIRmXmXLgXHAirBAQ='"> <title>Wi-Fi QR Generator</title> <style>body,html{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;margin:0}button,input,select{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;accent-color:#000}div#app{margin:auto;padding:15px;box-sizing:border-box;width:100vw;max-width:50em;opacity:0;transition:opacity .5s}.qrfield{box-sizing:border-box;width:100%;font-size:larger}.radio{font-size:larger;margin-bottom:1em}span.nowrap{white-space:nowrap}label:has(>input[name=security]){display:inline-block;width:11.2em}label:has(>input[name=ecc]){display:inline-block;width:5.5em}div.remain{text-align:right;color:#708090}#hidden{max-height:0;overflow:clip;transition:max-height 250ms}#hidden.show{max-height:500px}.qrOutput{display:block;font-size:larger;font-weight:700}#qrCodeCanvas{display:block;border-radius:5px;width:calc(100vw - 32px);max-width:400px;aspect-ratio:1/1;image-rendering:pixelated;opacity:0}#qrCodeCanvas.show{opacity:1;transition:opacity .5s}.frame{width:fit-content;border:1px solid #aaa;border-radius:5px}.button{background-color:#000;border:2px solid #000;border-radius:5px;color:#fff;padding:5px 25px;text-align:center;text-decoration:none;display:inline-block;font-size:larger;margin-right:5px;margin-top:2px;margin-bottom:1em}.button:hover{background-color:#1e1e1e}.button:active{background-color:#323232}.button2{background-color:#fff;border:2px solid;border-radius:5px;color:#000;padding:5px 25px;text-align:center;text-decoration:none;display:inline-block;font-size:larger}.button2:hover{background-color:#f5f5f5}.button2:active{background-color:#e1e1e1}a#save{width:calc(100vw - 84px);max-width:348px;cursor:default}a#save:hover{text-decoration:none}a{text-decoration:none}a:hover{text-decoration:underline}p.note{font-size:smaller}@media (prefers-color-scheme:dark){:root{color-scheme:dark}button,input,select{accent-color:#fff}a{color:#6c6cee}.button{background-color:#fff;color:#000;border-color:#fff}.button2{background-color:#282828;color:#fff;border-color:#fff}.button:hover{background-color:#f5f5f5}.button:active{background-color:#e1e1e1}.button2:hover{background-color:#323232}.button2:active{background-color:#464646}}</style> </head> <body> <div id=app> <h1>Wi-Fi QR Code Generator</h1> <label for=ssid>Network Name (SSID):</label> <input id=ssid class=qrfield maxlength=32 spellcheck=false> <div id=remainSsid class=remain></div> <label for=pass>Network Passphrase:</label> <input id=pass class=qrfield maxlength=64 spellcheck=false> <div id=remainPass class=remain></div> Network Security Type: <div class=radio> <span class=nowrap> <label><input type=radio name=security value=WPA>WPA/WPA2-Personal</label> </span> <span class=nowrap> <label><input type=radio name=security value=SAE>WPA3-Personal</label> </span> </div> QR Code ECC Level: <div class=radio> <span class=nowrap> <label><input type=radio name=ecc value=L>L (7%)</label> <label><input type=radio name=ecc value=M>M (15%)</label> </span> <span class=nowrap> <label><input type=radio name=ecc value=Q>Q (25%)</label> <label><input type=radio name=ecc value=H>H (30%)</label> </span> </div> <button class=button id=Generate>Generate</button> <button class=button2 id=Reset>Reset</button> <div id=hidden> <span class=qrOutput>Your Wi-Fi QR Code:</span> <div class=frame><canvas id=qrCodeCanvas></canvas></div> <a class=button id=save>Save QR Code as PNG</a> </div> <p class=note> Created by <a href=https://github.com/cjee21 title="Visit cjee21 on GitHub" target=_blank rel="noopener noreferrer">cjee21</a> using <a href=https://code.visualstudio.com/ title="Open official site" target=_blank rel="noopener noreferrer">Visual Studio Code</a>.<br> Uses HTML5, CSS, JavaScript and <a href=https://github.com/kazuhikoarase/qrcode-generator/tree/master/js title="Open GitHub repository" target=_blank rel="noopener noreferrer">QRCode.JS</a>.<br> All features are implemented with JavaScript run on your browser. No information is sent to any server.<br> The generated QR Code is compatible with the built-in Wi-Fi QR Code scanner in Android devices. </p> <p class=note> Wi-Fi®, Wi-Fi Protected Access® (WPA), and Wi-Fi Alliance® are registered trademarks of <a href=https://www.wi-fi.org/ target=_blank rel="noopener noreferrer" title="Open official site">Wi-Fi Alliance</a>.<br> "QR Code" is a registered trademark of <a href=https://www.denso-wave.com/en/technology/vol1.html target=_blank rel="noopener noreferrer" title="QR Code development story">DENSO WAVE INCORPORATED</a>. </p> </div> <script src=qrcode_e02eef5_20190918_min.js></script> <script>'use strict';const ssid=document.getElementById("ssid"),pass=document.getElementById("pass"),hiddendiv=document.getElementById("hidden"),canvas=document.getElementById("qrCodeCanvas"),canvasctx=canvas.getContext("2d"),savebtn=document.getElementById("save");window.addEventListener("load",()=>{document.getElementById("app").style.opacity=1});document.addEventListener("DOMContentLoaded",init);ssid.addEventListener("input",calculate);pass.addEventListener("input",calculate);
-document.getElementById("Generate").addEventListener("click",generate);document.getElementById("Reset").addEventListener("click",reset);function init(){document.getElementsByName("security")[0].checked=!0;document.getElementsByName("ecc")[1].checked=!0;calculate()}function calculate(){document.getElementById("remainSsid").textContent=ssid.value.length+" / "+ssid.maxLength+" characters";document.getElementById("remainPass").textContent=pass.value.length+" / "+pass.maxLength+" characters"}
-function escape(a){return a.replace(/[:;\\]/g,"\\$&")}
-function generate(){canvas.classList.remove("show");var a=document.querySelector('input[name="security"]:checked').value,b=document.querySelector('input[name="ecc"]:checked').value;a=`WIFI:S:${escape(ssid.value)};T:${a};P:${escape(pass.value)};H:false;;`;canvas.width=1110;canvas.height=canvas.width;canvasctx.clearRect(0,0,canvas.width,canvas.height);b=qrcode(0,b);b.addData(a);b.make();b=b.createSvgTag();a=new Image;a.addEventListener("load",c=>{canvasctx.imageSmoothingEnabled=!1;canvasctx.drawImage(c.target,
-0,0,canvas.width,canvas.height);download();hiddendiv.style.display="block";hiddendiv.classList.add("show");canvas.classList.add("show")});a.src=`data:image/svg+xml,${b}`}function reset(){ssid.value="";pass.value="";hiddendiv.classList.remove("show");canvasctx.clearRect(0,0,canvas.width,canvas.height);savebtn.removeAttribute("href");savebtn.removeAttribute("download");init()}
-function download(){var a=new Date;const b=document.getElementById("qrCodeCanvas").toDataURL("image/png");a=ssid.value+"_QR_"+a.getFullYear()+(10>a.getMonth()+1?"0":"")+(a.getMonth()+1)+(10>a.getDate()?"0":"")+a.getDate()+".png";savebtn.setAttribute("href",b);savebtn.setAttribute("download",a)};</script> </body> </html>
+<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=description content="Wi-Fi QR Code generator supporting WPA2 and WPA3 for Android devices implemented in HTML/CSS/JavaScript."> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=referrer content=no-referrer> <meta http-equiv=x-dns-prefetch-control content=off> <meta http-equiv=Content-Security-Policy content="default-src 'none'; img-src data:; style-src 'sha256-zoyJXL8oxc1J/iIi0l/NWBxffC6mpxwD5lckmGqldTQ='; script-src 'self' 'sha256-zWha525Ngz/3Pee4WBfu0axbgYnbkIkqCO+8rqiV0vk='"> <title>Wi-Fi QR Generator</title> <style>body,html{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;margin:0}button,input,select{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;accent-color:#000}div#app{margin:auto;padding:15px;box-sizing:border-box;width:100vw;max-width:50em;opacity:0;transition:opacity .5s}.qrfield{box-sizing:border-box;width:100%;font-size:larger}.radio{font-size:larger;margin-bottom:1em}span.nowrap{white-space:nowrap}label:has(>input[name=security]){display:inline-block;width:11.2em}label:has(>input[name=ecc]){display:inline-block;width:5.5em}div.remain{text-align:right;color:#708090}#hidden{max-height:0;overflow:clip;transition:max-height 250ms}#hidden.show{max-height:500px}.qrOutput{display:block;font-size:larger;font-weight:700}#qrCodeCanvas{display:block;border-radius:5px;width:calc(100vw - 32px);max-width:400px;aspect-ratio:1/1;image-rendering:pixelated;opacity:0}#qrCodeCanvas.show{opacity:1;transition:opacity .5s}.frame{width:fit-content;border:1px solid #aaa;border-radius:5px}.button{background-color:#000;border:2px solid #000;border-radius:5px;color:#fff;padding:5px 25px;text-align:center;text-decoration:none;display:inline-block;font-size:larger;margin-right:5px;margin-top:2px;margin-bottom:1em}.button:hover{background-color:#1e1e1e}.button:active{background-color:#323232}.button2{background-color:#fff;border:2px solid;border-radius:5px;color:#000;padding:5px 25px;text-align:center;text-decoration:none;display:inline-block;font-size:larger}.button2:hover{background-color:#f5f5f5}.button2:active{background-color:#e1e1e1}a#save{width:calc(100vw - 84px);max-width:348px;cursor:default}a#save:hover{text-decoration:none}a{text-decoration:none}a:hover{text-decoration:underline}p.note{font-size:smaller}@media (prefers-color-scheme:dark){:root{color-scheme:dark}button,input,select{accent-color:#fff}a{color:#6c6cee}.button{background-color:#fff;color:#000;border-color:#fff}.button2{background-color:#282828;color:#fff;border-color:#fff}.button:hover{background-color:#f5f5f5}.button:active{background-color:#e1e1e1}.button2:hover{background-color:#323232}.button2:active{background-color:#464646}}</style> </head> <body> <div id=app> <h1>Wi-Fi QR Code Generator</h1> <label for=ssid>Network Name (SSID):</label> <input id=ssid class=qrfield maxlength=32 spellcheck=false> <div id=remainSsid class=remain></div> <label for=pass>Network Passphrase:</label> <input id=pass class=qrfield maxlength=64 spellcheck=false> <div id=remainPass class=remain></div> Network Security Type: <div class=radio> <span class=nowrap> <label><input type=radio name=security value=WPA>WPA/WPA2-Personal</label> </span> <span class=nowrap> <label><input type=radio name=security value=SAE>WPA3-Personal</label> </span> </div> QR Code ECC Level: <div class=radio> <span class=nowrap> <label><input type=radio name=ecc value=L>L (7%)</label> <label><input type=radio name=ecc value=M>M (15%)</label> </span> <span class=nowrap> <label><input type=radio name=ecc value=Q>Q (25%)</label> <label><input type=radio name=ecc value=H>H (30%)</label> </span> </div> <button class=button id=Generate>Generate</button> <button class=button2 id=Reset>Reset</button> <div id=hidden> <span class=qrOutput>Your Wi-Fi QR Code:</span> <div class=frame><canvas id=qrCodeCanvas></canvas></div> <a class=button id=save>Save QR Code as PNG</a> </div> <p class=note> Created by <a href=https://github.com/cjee21 title="Visit cjee21 on GitHub" target=_blank rel="noopener noreferrer">cjee21</a> using <a href=https://code.visualstudio.com/ title="Open official site" target=_blank rel="noopener noreferrer">Visual Studio Code</a>.<br> Uses HTML5, CSS, JavaScript and <a href=https://github.com/kazuhikoarase/qrcode-generator/tree/master/js title="Open GitHub repository" target=_blank rel="noopener noreferrer">QRCode.JS</a>.<br> All features are implemented with JavaScript run on your browser. No information is sent to any server.<br> The generated QR Code is compatible with the built-in Wi-Fi QR Code scanner in Android devices. </p> <p class=note> Wi-Fi®, Wi-Fi Protected Access® (WPA), and Wi-Fi Alliance® are registered trademarks of <a href=https://www.wi-fi.org/ target=_blank rel="noopener noreferrer" title="Open official site">Wi-Fi Alliance</a>.<br> "QR Code" is a registered trademark of <a href=https://www.denso-wave.com/en/technology/vol1.html target=_blank rel="noopener noreferrer" title="QR Code development story">DENSO WAVE INCORPORATED</a>. </p> </div> <script src=qrcode_e02eef5_20190918_min.js></script> <script>const a=document.getElementById("ssid"),f=document.getElementById("pass"),h=document.getElementById("hidden"),l=document.getElementById("qrCodeCanvas"),m=l.getContext("2d"),n=document.getElementById("save");window.addEventListener("load",()=>{document.getElementById("app").style.opacity=1});document.addEventListener("DOMContentLoaded",q);a.addEventListener("input",t);f.addEventListener("input",t);document.getElementById("Generate").addEventListener("click",u);
+document.getElementById("Reset").addEventListener("click",w);function q(){document.getElementsByName("security")[0].checked=!0;document.getElementsByName("ecc")[1].checked=!0;t()}function t(){document.getElementById("remainSsid").textContent=a.value.length+" / "+a.maxLength+" characters";document.getElementById("remainPass").textContent=f.value.length+" / "+f.maxLength+" characters"}
+function u(){l.classList.remove("show");var g=document.querySelector('input[name="security"]:checked').value,b=document.querySelector('input[name="ecc"]:checked').value;g=`WIFI:S:${a.value.replace(/[:;\\]/g,"\\$&")};T:${g};P:${f.value.replace(/[:;\\]/g,"\\$&")};H:false;;`;l.width=1110;l.height=l.width;m.clearRect(0,0,l.width,l.height);b=qrcode(0,b);b.addData(g);b.make();b=b.createSvgTag();g=new Image;g.addEventListener("load",r=>{m.imageSmoothingEnabled=!1;m.drawImage(r.target,0,0,l.width,l.height);
+var e=new Date;r=l.toDataURL("image/png");e=a.value+"_QR_"+e.getFullYear()+(10>e.getMonth()+1?"0":"")+(e.getMonth()+1)+(10>e.getDate()?"0":"")+e.getDate()+".png";n.setAttribute("href",r);n.setAttribute("download",e);h.style.display="block";h.classList.add("show");l.classList.add("show")});g.src=`data:image/svg+xml,${b}`}function w(){a.value="";f.value="";h.classList.remove("show");m.clearRect(0,0,l.width,l.height);n.removeAttribute("href");n.removeAttribute("download");q()};</script> </body> </html>
diff --git a/qrcode_e02eef5_20190918_min.js b/qrcode_e02eef5_20190918_min.js