-
Mouse
+
+
diff --git a/webdata/main.css b/webdata/main.css
index a7d917e..6b9907f 100644
--- a/webdata/main.css
+++ b/webdata/main.css
@@ -17,6 +17,7 @@ html {
color: white;
background-image: url(tex.png);
touch-action: none;
+ overflow: hidden;
}
html,
@@ -33,6 +34,9 @@ body,
flex-direction: column;
justify-content: center;
box-sizing: border-box;
+ align-items: center;
+ gap: 2rem;
+ padding: 0.5rem;
}
p {
@@ -42,42 +46,7 @@ p {
text-align: center;
}
-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 {
+p.background {
color: gray;
text-shadow:
-1px -1px 0 black,
@@ -87,44 +56,94 @@ button:focus {
opacity: 0.08;
font-weight: bold;
font-size: 4rem;
+ pointer-events: none;
}
@media (max-width: 32rem) {
- #pad > p,
- #mouse > p {
+ p.background {
font-size: 13vw;
}
}
-#pad > button, #keys > button {
+.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 {
position: absolute;
max-width: 50%;
max-height: 50%;
}
-#fullscreenbutton {
- left: 0;
- bottom: 0;
- border-bottom: none;
- border-left: none;
-}
-
-#keyboardbutton {
- right: 0;
- bottom: 0;
- border-right: none;
- border-bottom: none;
-}
-
-#keysbutton {
- left: 0;
+button.top {
top: 0;
border-top: none;
+}
+
+button.bottom {
+ bottom: 0;
+ border-bottom: none;
+}
+
+button.left {
+ left: 0;
border-left: none;
}
+button.right {
+ right: 0;
+ border-right: 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;
+}
+
textarea {
- flex-grow: 1;
border: none;
resize: none;
font-size: 2rem;
@@ -134,77 +153,76 @@ textarea {
padding: 0 0.5rem;
}
-#keyboard .buttons {
- display: flex;
+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;
flex-direction: row;
}
-#keyboard .buttons > button {
- border-bottom: none;
- border-left: none;
+#text-input .buttons {
+ flex-direction: column;
}
-#keyboard .buttons > button:last-of-type {
- flex-grow: 1;
+#text-input .buttons > button {
+ border-top: none;
border-right: none;
}
-@media (min-aspect-ratio: 4/3) {
- #keyboard {
- flex-direction: row;
- }
+#text-input .buttons > button:last-child {
+ border-bottom: none;
+}
- #keyboard .buttons {
+/* 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;
+ }
+}
+
+/* Portrait orientation (not for Safari on iOS) */
+@supports not (-webkit-touch-callout: none) { @media (max-aspect-ratio: 4/3) {
+ #text-input {
flex-direction: column;
}
- #keyboard .buttons > button {
- border-top: none;
- border-right: none;
- border-left: 1px solid black;
+ #text-input .buttons {
+ flex-direction: row;
}
- #keyboard .buttons > button:last-of-type {
+ #text-input .buttons > button {
border-top: 1px solid black;
+ border-bottom: none;
}
-}
-#keys .scene {
- padding: 0.5rem;
- padding-bottom: 0;
- justify-content: flex-end;
-}
-
-#switchbutton {
- right: 0;
- top: 0;
- border-top: none;
- border-right: none;
-}
-
-#keys .backbutton {
- left: 0;
- top: 0;
- border-top: none;
- border-left: none;
-}
-
-#keys .buttons {
- display: flex;
- justify-content: center;
- margin-bottom: 0.5rem;
- flex-shrink: 1;
- height: 6rem;
- min-height: 0;
-}
-
-#keys .buttons > button:not(:last-of-type) {
- border-right: none;
-}
-
-#keys .buttons > button {
- flex-shrink: 1;
- height: 100%;
- width: 8rem;
- min-width: 0;
-}
+ #text-input .buttons > button:first-child {
+ border-left: none;
+ }
+} }
diff --git a/webdata/sha256.js b/webdata/sha256.js
deleted file mode 100644
index e62bf9e..0000000
--- a/webdata/sha256.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- 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