-
Notifications
You must be signed in to change notification settings - Fork 0
/
barcode.html
52 lines (52 loc) · 9.35 KB
/
barcode.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Login Tool</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<script>
const aztec=(r,t,o)=>{const f=2e4,e=[5,5,5,5,4],a=[[0,5,5,10,5,10],[9,0,5,10,5,10],[5,5,0,5,10,10],[5,10,10,0,10,15],[4,9,9,14,0,14],[0,0,0,0,0,0]],n=[[0,f,f,5,f],[5,0,f,5,f],[f,f,0,5,f],[f,f,f,0,f],[4,f,f,4,0]],h=[[[],[28],[29],[29,30],[30],[31]],[[30,14],[],[29],[29,30],[30],[31]],[[29],[28],[],[30],[28,30],[31]],[[31],[31,28],[31,29],[],[31,30],[31,31]],[[14],[14,28],[14,29],[14,29,30],[],[14,31]]],l=[" ABCDEFGHIJKLMNOPQRSTUVWXYZ"," abcdefghijklmnopqrstuvwxyz",String.fromCharCode(0,32,1,2,3,4,5,6,7,8,9,10,11,12,13,7,28,29,30,31,64,92,94,95,96,124,126,127)," \r\r\r\r\r!\"#$%&'()*+,-./:;<=>?[]{}"," 0123456789,."];let s,m,i,c,M,d,g,p,u,x,w,A=r.length,b=0;const y=(r,t,o)=>{let f=r[0]%c+o;for(t<<=c,r[0]+=o,r[r.length-1]|=t>>f;f>=c;)o=r[r.length-1]>>1,0!==b||0!==o&&2*o+2!=1<<c||(r[r.length-1]=2*o+(1&o^1),r[0]++,f++),f-=c,r.push(t>>f&(1<<c)-1)},C=(t,o)=>{t[0]-=8*m+(m>31?16:5),y(t,m>31?0:m,5),m>31&&y(t,m-31,11);for(let f=o-m;f<o;f++)y(t,r.charCodeAt(f),8)};for(t=100/(100-Math.min(Math.max(t||25,0),90)),x=p=4;x=Math.max(x,(Math.floor(A*t)+3)*p),c=x<=240?6:x<=1920?8:x<=10208?10:12,o&&(c=Math.max(c,o<3?6:o<9?8:o<23?10:12)),!(p>=c);p=c){let t=[[0,0],[f],[f],[f],[f],[f]];for(u=0;u<r.length;u++){for(let r=0;r<6;r++)for(let o=0;o<6;o++)t[o][0]+a[o][r]<t[r][0]&&(o<5||r===s)&&(t[r]=t[o].slice(),o<5?h[o][r].forEach((o=>{y(t[r],o,o<16?4:5)})):C(t[r],u),5===r&&(s=o,m=0,t[5][0]+=5));const o=[[f],[f],[f],[f],[f],t[5]],i=["\r\n",". ",", ",": "].indexOf(r.substr(u,2));for(to=0;to<5;to++){const f=i<0?l[to].indexOf(r.substr(u,1),1):i+2;if(!(f<0||i>=0&&3!==to))for(frm=0;frm<5;frm++)t[frm][0]+n[frm][to]+e[to]<o[frm][0]&&(o[frm]=t[frm].slice(),frm!==to&&y(o[frm],3===to?0:frm<4?28:15,e[frm]),y(o[frm],f,e[to]))}o[5][0]+=31==m++?19:8,i>=0&&(u++,o[5][0]+=31==m++?19:8),t=o}C(t[5],r.length),i=t.reduce(((r,t)=>r[0]<t[0]?r:t)),u=c-i[0]%c,u<c&&y(i,(1<<u)-1,u),i.pop(),A=i.shift()/c|0}if(A>1660)return[];b=x>608||A>64||o&&o>4?14:11;let O=parseInt(r);(O<0||O>255||O+""!==r||0!==o)&&(o=Math.max(o||1,Math.min(32,Math.ceil((Math.sqrt(x+b*b)-b)/4))));const q=Math.floor(8*o*(b+2*o)/c)-A;b>>=1,g=b+2*o,g+=(g-1)/15|0;const v=(r,t,o)=>{const f=new Array(r+2);let e,a;const n=i.length,h=new Array(t+1),l=new Array(t);for(a=1,e=0;e<t;e++)l[e]=a,h[a]=e,a+=a,a>t&&(a^=o);for(f[r+1]=e=0;e<=r;e++)for(a=r-e,f[a]=1;a++<r;)f[a]=f[a+1]^l[(h[f[a]]+e)%t];for(e=0;e<n;e++)for(a=0,o=i[n]^i[e];a++<r;)i[n+a-1]=i[n+a]^(o?l[(h[f[a]]+h[o])%t]:0)},z=Array(2*g+1).fill(null).map((()=>[]));for(d=1-b;d<b;d++)for(M=1-b;M<b;M++)z[g+d][g+M]=1&Math.max(Math.abs(M),Math.abs(d))^1;z[g-b+1][g-b]=z[g-b][g-b]=1,z[g-b][g-b+1]=z[g+b-1][g+b]=1,z[g-b+1][g+b]=z[g-b][g+b]=1;const E=(r,t)=>{do{M+=r}while(7===b&&0==(15&M));do{d+=t}while(7===b&&0==(15&d))};if(o>0){v(q,(1<<c)-1,[67,301,1033,4201][c/2-3]),M=-b,d=M-1,x=w=(3*b+9)/2;let r=1,t=0;for(;void 0!==(p=i.pop());)for(u=c/2;u-- >0;p>>=2)if(1&p&&(z[g+d][g+M]=1),E(t,-r),2&p&&(z[g+d][g+M]=1),E(r-t,r+t),0==x--){if(E(t,-r),x=r,r=-t,t=x,r<1)for(x=2;x--;)E(r-t,r+t);else w+=4;x=w}if(7===b)for(M=15-g&-16;M<=g;M+=16)for(d=1-g&-2;d<=g;d+=2)z[g+d][g+M]=z[g+M][g+d]=1;O=(o-1)*(992*b-4896)+A-1}for(c=(3*b-1)/2,u=b-2;u-- >0;O>>=4)i[u]=15&O;for(v((b+5)/2,15,19),i.push(0),x=o?0:10,u=1;u<=c;u++)y(i,x^i[u],4);for(u=2-b,x=1;u<b-1;u++,x+=x)7===b&&0===u&&u++,i[c+1]&x&&(z[g-b][g-u]=1),i[c+2]&x&&(z[g-u][g+b]=1),i[c+3]&x&&(z[g+b][g+u]=1),i[c+4]&x&&(z[g+u][g-b]=1);return z};
const module=16,scale=2,border=8,renderSprite=([e,t,n,r])=>{const a=new Uint32Array(e*t);let o=0;r.forEach((e=>{const[t,r]=Array.isArray(e)?e:[0,e];for(let e=0;e<r;e++)a[o++]=n[t]}));const l=document.createElement("canvas");l.height=t,l.width=e;const c=l.getContext("2d");return c.putImageData(new ImageData(new Uint8ClampedArray(a.buffer),t,e),0,0),c.imageSmoothingEnabled=!1,l},renderLabel=(e,t)=>{const n=document.createElement("canvas");n.height=32,n.width=16*(2*e.length-1)*2;const r=n.getContext("2d");return r.imageSmoothingEnabled=!1,e.forEach(((e,n)=>{r.drawImage(t[e],0,0,16,16,2*n*16*2,0,32,32)})),n},renderMatrix=e=>{const t=document.createElement("canvas");t.height=t.width=16*e.length;const n=t.getContext("2d");return n.fillColor="black",e.forEach(((t,r)=>{e.forEach(((t,a)=>{1==e[r][a]&&n.fillRect(16*a,16*r,16,16)}))})),t},composeImage=(e,t,n)=>{const r=document.createElement("canvas");r.height=r.width=16*(n+8);const a=r.getContext("2d");return a.fillStyle="#ffffff",a.fillRect(0,0,r.width,r.height),a.drawImage(e,r.width/2-e.width/2,r.height/2-e.height/2),a.drawImage(t,r.width/2-t.width/2,r.height-48),r};let items={sso:{label:[4,4,2]},user:{label:[5,4,0,3],append:"\r\n"},key:{label:[1,0,6],append:"\r\n"}};document.addEventListener("DOMContentLoaded",(()=>{const date = new Date();document.title = `Login Tool / ${String(date.getDate()).padStart(2,'0')}-${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][date.getMonth()]}-${String(date.getFullYear()).slice(-2)}`;const e=document.querySelector("#content"),t=document.querySelector("#button"),n=new URLSearchParams(window.location.hash.substring(1)),r=()=>{Object.keys(items).forEach((e=>{let t=document.querySelector(`#${e}`);t&&(t.value.length>0?n.set(e,t.value):n.delete(e))})),window.location.hash=n.toString()};Object.keys(items).forEach((e=>{let t=document.querySelector(`#${e}`);t&&(n.has(e)&&(t.value=n.get(e)),t.addEventListener("input",r))})),t.addEventListener("click",(()=>{const t=[];let n=0;for(;e.firstElementChild;){let t=e.firstElementChild.querySelector("img");if(t){let n=t.src;e.removeChild(e.firstElementChild),URL.revokeObjectURL(n)}}Object.keys(items).forEach((e=>{let r=document.querySelector(`#${e}`);if(r&&r.value.length>0){let a=aztec(`${r.value}${(items[e].append?items[e].append:"")}`,50);t.push([e,renderMatrix(a),renderLabel(items[e].label,sprites)]),n=Math.max(a.length,n)}})),t.forEach((t=>{let[r,a,o]=t;composeImage(a,o,n).toBlob((t=>{const n=URL.createObjectURL(t,"image/png"),a=document.createElement("a"),o=document.createElement("img");a.href=n,a.download=`barcode-${r}.png`,o.src=n,a.appendChild(o),e.appendChild(a)}))}))}))}));
const sprites=[[16,16,[4294967295,4278190080],[3,[1,10],6,[1,10],6,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,8],8,[1,8],8,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,10],6,[1,10],35]],[16,16,[4294967295,4278190080],[3,[1,2],6,[1,2],6,[1,2],5,[1,3],6,[1,2],4,[1,3],7,[1,2],3,[1,3],8,[1,2],2,[1,3],9,[1,2],1,[1,3],10,[1,5],11,[1,5],11,[1,2],1,[1,3],10,[1,2],2,[1,3],9,[1,2],3,[1,3],8,[1,2],4,[1,3],7,[1,2],5,[1,3],6,[1,2],6,[1,2],35]],[16,16,[4294967295,4278190080],[5,[1,6],9,[1,8],7,[1,3],5,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,3],4,[1,3],7,[1,8],9,[1,6],37]],[16,16,[4294967295,4278190080],[3,[1,8],8,[1,9],7,[1,2],5,[1,3],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],5,[1,3],6,[1,9],7,[1,9],7,[1,2],5,[1,3],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],35]],[16,16,[4294967295,4278190080],[5,[1,6],9,[1,8],7,[1,3],4,[1,3],6,[1,2],6,[1,2],6,[1,2],14,[1,3],14,[1,7],10,[1,7],14,[1,3],14,[1,2],6,[1,2],6,[1,2],6,[1,3],4,[1,3],7,[1,8],9,[1,6],37]],[16,16,[4294967295,4278190080],[3,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,3],4,[1,3],7,[1,8],9,[1,6],37]],[16,16,[4294967295,4278190080],[3,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,3],4,[1,3],7,[1,3],2,[1,3],9,[1,6],11,[1,4],13,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,2],39]]].map((e=>renderSprite(e)));
</script>
<style>
body{font-family: Roboto, sans-serif; font-size: 1rem;background-color:skyblue;}
input{box-sizing: border-box; font-family: inherit; font-size: inherit;}
input[type="text"], input[type="password"]{height: 2rem; line-height: 1.25rem; font-weight: 300;}
button{font-family: inherit; font-size: inherit; padding: 0.5rem 0;}
h1{margin: 1rem 0;}
label{font-weight: 600;}
sub{font-weight: 300;}
#container{max-width: 400px; margin: 0 auto; display: grid; gap: 20px;}
#data{padding: 0 10px; display: grid; grid-template-columns: 1fr;}
#data label, #data input, #data button, #data sub{margin-bottom: 5px; width: 100%;}
#content{display: grid; justify-items: center; grid-gap: 10px;}
#content img{max-width: 100%; height: auto;}
#content a{display: block; width: fit-content;}
</style>
</head>
<body>
<div id="container">
<div id="data">
<h1>Login Tool</h1>
<label for="sso">Simple Sign-On</label>
<sub>scan your card with a barcode app or google lens</sub>
<input type="text" id="sso">
<label for="user">User</label>
<sub>[email protected] (optional)</sub>
<input type="text" id="user">
<label for="key">Password</label>
<sub>(optional)</sub>
<input type="password" id="key">
<br>
<button id="button">Generate</button>
<br>
</div>
</div>
<div id="content"></div>
</body>
</html>