-
Mouse
+
diff --git a/webdata/main.css b/webdata/main.css
index 6b9907f..a7d917e 100644
--- a/webdata/main.css
+++ b/webdata/main.css
@@ -17,7 +17,6 @@ html {
color: white;
background-image: url(tex.png);
touch-action: none;
- overflow: hidden;
}
html,
@@ -34,9 +33,6 @@ body,
flex-direction: column;
justify-content: center;
box-sizing: border-box;
- align-items: center;
- gap: 2rem;
- padding: 0.5rem;
}
p {
@@ -46,7 +42,42 @@ p {
text-align: center;
}
-p.background {
+button {
+ padding: 0;
+ background-color: transparent;
+ border: 1px solid black;
+ height: 1.5em;
+ width: 2em;
+ border-radius: 2px;
+ font-size: 2rem;
+ color: white;
+ font-family: "icon";
+ overflow: hidden;
+ cursor: pointer;
+}
+
+button:focus {
+ outline: none;
+}
+
+#opening,
+#closed {
+ padding: 0 0.5rem;
+}
+
+#opening noscript p,
+#closed p {
+ margin-bottom: 1em;
+}
+
+#reloadbutton {
+ font-size: 4rem;
+ margin: 0 auto;
+ max-width: 100%;
+}
+
+#pad > p,
+#mouse > p {
color: gray;
text-shadow:
-1px -1px 0 black,
@@ -56,94 +87,44 @@ p.background {
opacity: 0.08;
font-weight: bold;
font-size: 4rem;
- pointer-events: none;
}
@media (max-width: 32rem) {
- p.background {
+ #pad > p,
+ #mouse > p {
font-size: 13vw;
}
}
-.large {
- font-size: 4rem;
-}
-
-button {
- box-sizing: border-box;
- padding: 0;
- background-color: transparent;
- border: 1px solid black;
- height: 1.5em;
- width: 2em;
- min-width: 1.2em;
- min-height: 1.2em;
- max-width: 100%;
- max-height: 100%;
- border-radius: 2px;
- font-size: 2rem;
- color: white;
- font-family: "icon";
- overflow: hidden;
- cursor: pointer;
- transition: box-shadow 0.2s ease-out;
-}
-
-button:focus {
- outline: none;
-}
-
-button.click {
- box-shadow: 0 0 1rem white inset;
- transition: none;
-}
-
-button.top,
-button.bottom,
-button.left,
-button.right {
+#pad > button, #keys > button {
position: absolute;
max-width: 50%;
max-height: 50%;
}
-button.top {
- top: 0;
- border-top: none;
-}
-
-button.bottom {
+#fullscreenbutton {
+ left: 0;
bottom: 0;
border-bottom: none;
-}
-
-button.left {
- left: 0;
border-left: none;
}
-button.right {
+#keyboardbutton {
right: 0;
+ bottom: 0;
border-right: none;
+ border-bottom: none;
}
-.buttons {
- display: flex;
- flex-direction: row;
- min-height: 0;
- min-width: 0;
-}
-
-.buttons > button:not(:last-child) {
- border-right: none;
-}
-
-.scene > .grow,
-.buttons > .grow {
- flex-grow: 1;
+#keysbutton {
+ left: 0;
+ top: 0;
+ border-top: none;
+ border-left: none;
}
textarea {
+ flex-grow: 1;
border: none;
resize: none;
font-size: 2rem;
@@ -153,76 +134,77 @@ textarea {
padding: 0 0.5rem;
}
-textarea:focus {
- outline: none;
-}
-
-#keys {
- padding: 0;
- justify-content: end;
-}
-
-#keys .page {
- display: grid;
- gap: 0.5rem;
- min-height: 0;
- min-width: 0;
- grid-auto-rows: minmax(min-content, 6rem);
- grid-auto-columns: minmax(min-content, 8rem);
- padding: 0.5rem;
-}
-
-#keys .page * {
- width: 100%;
- height: 100%;
-}
-
-#text-input {
- align-items: stretch;
- padding: 0;
- gap: 0;
+#keyboard .buttons {
+ display: flex;
flex-direction: row;
}
-#text-input .buttons {
- flex-direction: column;
+#keyboard .buttons > button {
+ border-bottom: none;
+ border-left: none;
}
-#text-input .buttons > button {
+#keyboard .buttons > button:last-of-type {
+ flex-grow: 1;
+ border-right: none;
+}
+
+@media (min-aspect-ratio: 4/3) {
+ #keyboard {
+ flex-direction: row;
+ }
+
+ #keyboard .buttons {
+ flex-direction: column;
+ }
+
+ #keyboard .buttons > button {
+ border-top: none;
+ border-right: none;
+ border-left: 1px solid black;
+ }
+
+ #keyboard .buttons > button:last-of-type {
+ border-top: 1px solid black;
+ }
+}
+
+#keys .scene {
+ padding: 0.5rem;
+ padding-bottom: 0;
+ justify-content: flex-end;
+}
+
+#switchbutton {
+ right: 0;
+ top: 0;
border-top: none;
border-right: none;
}
-#text-input .buttons > button:last-child {
- border-bottom: none;
+#keys .backbutton {
+ left: 0;
+ top: 0;
+ border-top: none;
+ border-left: none;
}
-/* Only Safari for iOS */
-@supports (-webkit-touch-callout: none) {
- /* Virtual keyboard can overlay content */
- #text-input .buttons > button:last-child {
- display: flex;
- padding-top: 0.2em;
- justify-content: center;
- }
+#keys .buttons {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 0.5rem;
+ flex-shrink: 1;
+ height: 6rem;
+ min-height: 0;
}
-/* Portrait orientation (not for Safari on iOS) */
-@supports not (-webkit-touch-callout: none) { @media (max-aspect-ratio: 4/3) {
- #text-input {
- flex-direction: column;
- }
+#keys .buttons > button:not(:last-of-type) {
+ border-right: none;
+}
- #text-input .buttons {
- flex-direction: row;
- }
-
- #text-input .buttons > button {
- border-top: 1px solid black;
- border-bottom: none;
- }
-
- #text-input .buttons > button:first-child {
- border-left: none;
- }
-} }
+#keys .buttons > button {
+ flex-shrink: 1;
+ height: 100%;
+ width: 8rem;
+ min-width: 0;
+}
diff --git a/webdata/sha256.js b/webdata/sha256.js
new file mode 100644
index 0000000..e62bf9e
--- /dev/null
+++ b/webdata/sha256.js
@@ -0,0 +1,27 @@
+/*
+ A JavaScript implementation of the SHA family of hashes, as
+ defined in FIPS PUB 180-4 and FIPS PUB 202, as well as the corresponding
+ HMAC implementation as defined in FIPS PUB 198a
+
+ Copyright 2008-2018 Brian Turek, 1998-2009 Paul Johnston & Contributors
+ Distributed under the BSD License
+ See http://caligatio.github.com/jsSHA/ for more information
+*/
+'use strict';(function(I){function w(c,a,d){var l=0,b=[],g=0,f,n,k,e,h,q,y,p,m=!1,t=[],r=[],u,z=!1;d=d||{};f=d.encoding||"UTF8";u=d.numRounds||1;if(u!==parseInt(u,10)||1>u)throw Error("numRounds must a integer >= 1");if(0===c.lastIndexOf("SHA-",0))if(q=function(b,a){return A(b,a,c)},y=function(b,a,l,f){var g,e;if("SHA-224"===c||"SHA-256"===c)g=(a+65>>>9<<4)+15,e=16;else throw Error("Unexpected error in SHA-2 implementation");for(;b.length<=g;)b.push(0);b[a>>>5]|=128<<24-a%32;a=a+l;b[g]=a&4294967295;
+b[g-1]=a/4294967296|0;l=b.length;for(a=0;a
>>3;g=e/4-1;if(eb/8){for(;a.length<=g;)a.push(0);a[g]&=4294967040}for(b=0;b<=g;b+=1)t[b]=a[b]^909522486,r[b]=a[b]^1549556828;n=q(t,n);l=h;m=!0};this.update=function(a){var c,f,e,d=0,p=h>>>5;c=k(a,b,g);a=c.binLen;f=c.value;c=a>>>5;for(e=0;e>>
+5);g=a%h;z=!0};this.getHash=function(a,f){var d,h,k,q;if(!0===m)throw Error("Cannot call getHash after setting HMAC key");k=C(f);switch(a){case "HEX":d=function(a){return D(a,e,k)};break;case "B64":d=function(a){return E(a,e,k)};break;case "BYTES":d=function(a){return F(a,e)};break;case "ARRAYBUFFER":try{h=new ArrayBuffer(0)}catch(v){throw Error("ARRAYBUFFER not supported by this environment");}d=function(a){return G(a,e)};break;default:throw Error("format must be HEX, B64, BYTES, or ARRAYBUFFER");
+}q=y(b.slice(),g,l,p(n));for(h=1;h>>2]>>>8*(3+b%4*-1),l+="0123456789abcdef".charAt(g>>>4&15)+"0123456789abcdef".charAt(g&15);return d.outputUpper?l.toUpperCase():l}function E(c,a,d){var l="",b=a/8,g,f,n;for(g=0;g>>2]:0,n=g+2>>2]:0,n=(c[g>>>2]>>>8*(3+g%4*-1)&255)<<16|(f>>>8*(3+(g+1)%4*-1)&255)<<8|n>>>8*(3+(g+2)%4*-1)&255,f=0;4>f;f+=1)8*g+6*f<=a?l+="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".charAt(n>>>
+6*(3-f)&63):l+=d.b64Pad;return l}function F(c,a){var d="",l=a/8,b,g;for(b=0;b>>2]>>>8*(3+b%4*-1)&255,d+=String.fromCharCode(g);return d}function G(c,a){var d=a/8,l,b=new ArrayBuffer(d),g;g=new Uint8Array(b);for(l=0;l>>2]>>>8*(3+l%4*-1)&255;return b}function C(c){var a={outputUpper:!1,b64Pad:"=",shakeLen:-1};c=c||{};a.outputUpper=c.outputUpper||!1;!0===c.hasOwnProperty("b64Pad")&&(a.b64Pad=c.b64Pad);if("boolean"!==typeof a.outputUpper)throw Error("Invalid outputUpper formatting option");
+if("string"!==typeof a.b64Pad)throw Error("Invalid b64Pad formatting option");return a}function B(c,a){var d;switch(a){case "UTF8":case "UTF16BE":case "UTF16LE":break;default:throw Error("encoding must be UTF8, UTF16BE, or UTF16LE");}switch(c){case "HEX":d=function(a,b,c){var f=a.length,d,k,e,h,q;if(0!==f%2)throw Error("String of HEX type must be in byte increments");b=b||[0];c=c||0;q=c>>>3;for(d=0;d>>1)+q;for(e=h>>>2;b.length<=e;)b.push(0);b[e]|=k<<8*(3+h%4*-1)}return{value:b,binLen:4*f+c}};break;case "TEXT":d=function(c,b,d){var f,n,k=0,e,h,q,m,p,r;b=b||[0];d=d||0;q=d>>>3;if("UTF8"===a)for(r=3,e=0;ef?n.push(f):2048>f?(n.push(192|f>>>6),n.push(128|f&63)):55296>f||57344<=f?n.push(224|f>>>12,128|f>>>6&63,128|f&63):(e+=1,f=65536+((f&1023)<<10|c.charCodeAt(e)&1023),n.push(240|f>>>18,128|f>>>12&63,128|f>>>6&63,128|f&63)),h=0;h>>2;b.length<=m;)b.push(0);b[m]|=n[h]<<8*(r+p%4*-1);k+=1}else if("UTF16BE"===a||"UTF16LE"===a)for(r=2,n="UTF16LE"===a&&!0||"UTF16LE"!==a&&!1,e=0;e>>8);p=k+q;for(m=p>>>2;b.length<=m;)b.push(0);b[m]|=f<<8*(r+p%4*-1);k+=2}return{value:b,binLen:8*k+d}};break;case "B64":d=function(a,b,c){var f=0,d,k,e,h,q,m,p;if(-1===a.search(/^[a-zA-Z0-9=+\/]+$/))throw Error("Invalid character in base-64 string");k=a.indexOf("=");a=a.replace(/\=/g,
+"");if(-1!==k&&k