Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjee21
cjee21 authored Sep 5, 2024
1 parent 140fbea commit 503677d
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!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()}
<!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>
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>

0 comments on commit 503677d

Please sign in to comment.