Update index.html

cjee21 · Sep 6, 2024 · 5214269 · 5214269
1 parent 503677d
commit 5214269
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
-<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="width=device-width,initial-scale=1" name=viewport><meta content=no-referrer name=referrer><meta content=off http-equiv=x-dns-prefetch-control><meta content="default-src 'none'; img-src data:; style-src 'sha256-HtBiyKguUk9FwwqdNWWv7hdPAKJGx4/iKZyIv49OGt0='; script-src 'self' 'sha256-h84HuZF4gisnuRIquolyZkZkHKxBGGzlO2gra4AqY/4='" http-equiv=Content-Security-Policy><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}.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{display:none;margin-top:1em}.qrOutput{display:block;font-size:larger;font-weight:700}#qrCodeCanvas{display:block;border:1px solid #aaa;border-radius:5px;width:calc(100vw - 32px);max-width:400px;aspect-ratio:1/1;image-rendering:pixelated}.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}.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 class=app><h1>Wi-Fi QR Code Generator</h1><label for=ssid>Network Name (SSID):</label> <input class=qrfield id=ssid maxlength=32 spellcheck=false><div class=remain id=remainSsid></div><label for=pass>Network Passphrase:</label> <input class=qrfield id=pass maxlength=64 spellcheck=false><div class=remain id=remainPass></div>Network Security Type:<div class=radio><span class=nowrap><label><input name=security type=radio value=WPA>WPA/WPA2-Personal</label></span> <span class=nowrap><label><input name=security type=radio value=SAE>WPA3-Personal</label></span></div>QR Code ECC Level:<div class=radio><span class=nowrap><label><input name=ecc type=radio value=L>L (7%)</label> <label><input name=ecc type=radio value=M>M (15%)</label></span> <span class=nowrap><label><input name=ecc type=radio value=Q>Q (25%)</label> <label><input name=ecc type=radio 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><canvas id=qrCodeCanvas></canvas><a class=button id=save>Save QR Code as PNG</a></div><p class=note>Created by <a href=https://github.com/cjee21 rel="noopener noreferrer" target=_blank title="Visit cjee21 on GitHub">cjee21</a> using <a href=https://code.visualstudio.com/ rel="noopener noreferrer" target=_blank title="Open official site">Visual Studio Code</a>.<br>Uses HTML5, CSS, JavaScript and <a href=https://github.com/kazuhikoarase/qrcode-generator/tree/master/js rel="noopener noreferrer" target=_blank title="Open GitHub repository">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/ rel="noopener noreferrer" target=_blank 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 rel="noopener noreferrer" target=_blank 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");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=document.getElementById("ssid").value.length+" / 32 characters";document.getElementById("remainPass").textContent=document.getElementById("pass").value.length+" / 64 characters"}function escape(a){return a.replace(/[:;\\]/g,"\\$&")}
-function generate(){const a=document.getElementById("qrCodeCanvas"),d=a.getContext("2d");var c=document.querySelector('input[name="security"]:checked').value,b=document.querySelector('input[name="ecc"]:checked').value;c=`WIFI:S:${escape(ssid.value)};T:${c};P:${escape(pass.value)};H:false;;`;a.width=1E3;a.height=a.width;d.clearRect(0,0,a.width,a.height);b=qrcode(0,b);b.addData(c);b.make();b=b.createSvgTag();c=new Image;c.addEventListener("load",e=>{d.imageSmoothingEnabled=!1;d.drawImage(e.target,0,
-0,a.width,a.height);download();document.getElementById("hidden").style.display="block"});c.src=`data:image/svg+xml,${b}`}function reset(){const a=document.getElementById("qrCodeCanvas");ssid.value="";pass.value="";document.getElementById("hidden").style.display="none";a.getContext("2d").clearRect(0,0,a.width,a.height);document.getElementById("save").removeAttribute("href");document.getElementById("save").removeAttribute("download");init()}
-function download(){var a=new Date;const d=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";document.getElementById("save").setAttribute("href",d);document.getElementById("save").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-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>