feat: add signature encoding, auto-detect base on decode, and show notification

dash.js

@@ -5,13 +5,27 @@ import * as speck32_64ecb from './speck32_64ecb.js';
 const textarea = document.getElementById('textarea');
 const encoderDropdown = document.getElementById('encoder');
 const cipherDropdown = document.getElementById('cipher');
+const signBtn = document.getElementById('sign');
+const sigDetect = document.getElementById('sigDetect');
+
+const SIG = {
+    3: '\u{200D}\u{200B}\u{00AD}\u{180E}',
+    6: '\u{200D}\u{200B}\u{00AD}\u{2060}',
+    8: '\u{200D}\u{200B}\u{00AD}\u{FEFF}'
+};
+
 document.getElementById('encodeButton').addEventListener('click', ACT);
 document.getElementById('decodeButton').addEventListener('click', ACT);
-document.getElementById('sign').addEventListener('click', e =>
+signBtn.addEventListener('click', e =>
     e.target.classList.toggle('on')
 );
 
+let fadeTimer;
+
 function ACT(event) {
+    clearTimeout(fadeTimer);
+    sigDetect.className = '';
+
     if (textarea.value === '') {
         textarea.value = 'The text box is empty.';
         return;
@@ -19,14 +33,35 @@ function ACT(event) {
 
     const op = event.target.id === 'encodeButton' ? 'NO' : 'YES';
     const cipher = getCipherKey();
-    const base = encoderDropdown.value.split('-')[1];
+    let base = encoderDropdown.value.split('-')[1];
+    let text = textarea.value;
+
+    if (op === 'YES') {
+        const sigBase = Object.keys(SIG).find(b => text.includes(SIG[b]));
+        if (sigBase) {
+            if (sigBase !== base) {
+                sigDetect.textContent = `ZWUS-${sigBase} signature detected`;
+                sigDetect.className = 'show';
+                fadeTimer = setTimeout(() =>
+                    sigDetect.className = '', 2000
+                );
+            }
+            base = sigBase;
+            encoderDropdown.value = 'ZWUS-' + base;
+            text = text.replace(SIG[base], '');
+        }
+    }
+
     const needsKey = cipher !== 'PLAIN';
     const kStr = needsKey && prompt('enter password.');
 
     if (needsKey && !kStr) return;
 
     try {
-        textarea.value = DESCRY[op][cipher](textarea.value, base, kStr);
+        let val = DESCRY[op][cipher](text, base, kStr);
+        if (op === 'NO' && signBtn.classList.contains('on'))
+            val = SIG[base] + val;
+        textarea.value = val;
     } catch (e) {
         console.log(e);
     }

dist/chrome/index.css

@@ -1 +1 @@
-@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/open-sans-v44-latin-regular.woff2) format("woff2")}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:Open Sans,sans-serif;background-color:#002b4d;width:500px;height:320px;line-height:1;border:1.5px solid rgb(0,126,199)}#overbar{padding:1.5%;font-size:10px;font-weight:700;margin-bottom:0;color:#e5f4ff99;border-bottom:1px solid rgb(0,126,199,.5)}#homepage{position:fixed;text-decoration:none;color:#ff0;right:2.5%}#textarea{background-color:#e6e6e6;margin:1.5%;width:95.5%;height:69%;font-family:Open Sans,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;line-height:20px}input{font-size:11.5px}#encodeButton{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}#decodeButton{margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}select{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;background-color:#e6e6e6;text-align:center;font-size:11px;width:8em;vertical-align:middle}#encodeButton,#decodeButton{vertical-align:middle}#sign{margin-left:1.5%;font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid rgba(229,244,255,.2);background:transparent;color:#e5f4ff59;cursor:pointer;vertical-align:middle}#sign:hover{border-color:#e5f4ff59;color:#e5f4ff80}#sign.on{background:#e6e6e6;border-color:#e6e6e6;color:#002b4d}#sign.on:hover{background:#fff;border-color:#fff}#notice{font-size:10px;margin-top:1.5%;padding:.8% 0% 0% 1.7%;color:#e5f4ff99;border-top:1px solid rgb(0,126,199,.5)}#versions{color:#007ec7;text-decoration:none}
+@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/open-sans-v44-latin-regular.woff2) format("woff2")}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:Open Sans,sans-serif;background-color:#002b4d;width:500px;height:320px;line-height:1;border:1.5px solid rgb(0,126,199)}#overbar{position:relative;padding:1.5%;font-size:10px;font-weight:700;margin-bottom:0;color:#e5f4ff99;border-bottom:1px solid rgb(0,126,199,.5)}#sigDetect{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:400;color:#e5f4ffd9;opacity:0;transition:opacity 1s}#sigDetect.show{opacity:1;transition:opacity .2s}#homepage{position:fixed;text-decoration:none;color:#ff0;right:2.5%}#textarea{background-color:#e6e6e6;margin:1.5%;width:95.5%;height:69%;font-family:Open Sans,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;line-height:20px}input{font-size:11.5px}#encodeButton{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}#decodeButton{margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}select{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;background-color:#e6e6e6;text-align:center;font-size:11px;width:8em;vertical-align:middle}#encodeButton,#decodeButton{vertical-align:middle}#sign{margin-left:1.5%;font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid rgba(229,244,255,.2);background:transparent;color:#e5f4ff59;cursor:pointer;vertical-align:middle}#sign:hover{border-color:#e5f4ff59;color:#e5f4ff80}#sign.on{background:#e6e6e6;border-color:#e6e6e6;color:#002b4d}#sign.on:hover{background:#fff;border-color:#fff}#notice{font-size:10px;margin-top:1.5%;padding:.8% 0% 0% 1.7%;color:#e5f4ff99;border-top:1px solid rgb(0,126,199,.5)}#versions{color:#007ec7;text-decoration:none}

dist/chrome/index.html

@@ -7,7 +7,7 @@
   <script type="module" crossorigin src="/index.js"></script>
   <link rel="stylesheet" crossorigin href="/index.css">
 </head>
-<body>
+<body>
 <div id="overbar"><p>inØsight 2.2.1<span id="sigDetect"></span><a id="homepage" href="https://github.com/planetrenox/inzerosight" target="_blank" rel="noopener">source</a></p></div>
 <textarea id="textarea" placeholder="input text here..."></textarea>
 <input id="encodeButton" type="button" name="button" value="encode to clipboard"/>

dist/firefox/index.css

@@ -1 +1 @@
-@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/open-sans-v44-latin-regular.woff2) format("woff2")}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:Open Sans,sans-serif;background-color:#002b4d;width:500px;height:320px;line-height:1;border:1.5px solid rgb(0,126,199)}#overbar{padding:1.5%;font-size:10px;font-weight:700;margin-bottom:0;color:#e5f4ff99;border-bottom:1px solid rgb(0,126,199,.5)}#homepage{position:fixed;text-decoration:none;color:#ff0;right:2.5%}#textarea{background-color:#e6e6e6;margin:1.5%;width:95.5%;height:69%;font-family:Open Sans,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;line-height:20px}input{font-size:11.5px}#encodeButton{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}#decodeButton{margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}select{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;background-color:#e6e6e6;text-align:center;font-size:11px;width:8em;vertical-align:middle}#encodeButton,#decodeButton{vertical-align:middle}#sign{margin-left:1.5%;font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid rgba(229,244,255,.2);background:transparent;color:#e5f4ff59;cursor:pointer;vertical-align:middle}#sign:hover{border-color:#e5f4ff59;color:#e5f4ff80}#sign.on{background:#e6e6e6;border-color:#e6e6e6;color:#002b4d}#sign.on:hover{background:#fff;border-color:#fff}#notice{font-size:10px;margin-top:1.5%;padding:.8% 0% 0% 1.7%;color:#e5f4ff99;border-top:1px solid rgb(0,126,199,.5)}#versions{color:#007ec7;text-decoration:none}
+@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/open-sans-v44-latin-regular.woff2) format("woff2")}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:Open Sans,sans-serif;background-color:#002b4d;width:500px;height:320px;line-height:1;border:1.5px solid rgb(0,126,199)}#overbar{position:relative;padding:1.5%;font-size:10px;font-weight:700;margin-bottom:0;color:#e5f4ff99;border-bottom:1px solid rgb(0,126,199,.5)}#sigDetect{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:400;color:#e5f4ffd9;opacity:0;transition:opacity 1s}#sigDetect.show{opacity:1;transition:none}#homepage{position:fixed;text-decoration:none;color:#ff0;right:2.5%}#textarea{background-color:#e6e6e6;margin:1.5%;width:95.5%;height:69%;font-family:Open Sans,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;line-height:20px}input{font-size:11.5px}#encodeButton{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}#decodeButton{margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}select{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;background-color:#e6e6e6;text-align:center;font-size:11px;width:8em;vertical-align:middle}#encodeButton,#decodeButton{vertical-align:middle}#sign{margin-left:1.5%;font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid rgba(229,244,255,.2);background:transparent;color:#e5f4ff59;cursor:pointer;vertical-align:middle}#sign:hover{border-color:#e5f4ff59;color:#e5f4ff80}#sign.on{background:#e6e6e6;border-color:#e6e6e6;color:#002b4d}#sign.on:hover{background:#fff;border-color:#fff}#notice{font-size:10px;margin-top:1.5%;padding:.8% 0% 0% 1.7%;color:#e5f4ff99;border-top:1px solid rgb(0,126,199,.5)}#versions{color:#007ec7;text-decoration:none}

dist/firefox/index.html

@@ -7,7 +7,7 @@
   <script type="module" crossorigin src="/index.js"></script>
   <link rel="stylesheet" crossorigin href="/index.css">
 </head>
-<body>
+<body>
 <div id="overbar"><p>inØsight 2.2.1<span id="sigDetect"></span><a id="homepage" href="https://github.com/planetrenox/inzerosight" target="_blank" rel="noopener">source</a></p></div>
 <textarea id="textarea" placeholder="input text here..."></textarea>
 <input id="encodeButton" type="button" name="button" value="encode to clipboard"/>

dist/web/assets/index-BsThwXwS.css

@@ -1 +0,0 @@
-@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/open-sans-v44-latin-regular-Bk63H6sG.woff2) format("woff2")}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:Open Sans,sans-serif;background-color:#002b4d;width:500px;height:320px;line-height:1;border:1.5px solid rgb(0,126,199)}#overbar{padding:1.5%;font-size:10px;font-weight:700;margin-bottom:0;color:#e5f4ff99;border-bottom:1px solid rgb(0,126,199,.5)}#homepage{position:fixed;text-decoration:none;color:#ff0;right:2.5%}#textarea{background-color:#e6e6e6;margin:1.5%;width:95.5%;height:69%;font-family:Open Sans,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;line-height:20px}input{font-size:11.5px}#encodeButton{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}#decodeButton{margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}select{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;background-color:#e6e6e6;text-align:center;font-size:11px;width:8em;vertical-align:middle}#encodeButton,#decodeButton{vertical-align:middle}#sign{margin-left:1.5%;font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid rgba(229,244,255,.2);background:transparent;color:#e5f4ff59;cursor:pointer;vertical-align:middle}#sign:hover{border-color:#e5f4ff59;color:#e5f4ff80}#sign.on{background:#e6e6e6;border-color:#e6e6e6;color:#002b4d}#sign.on:hover{background:#fff;border-color:#fff}#notice{font-size:10px;margin-top:1.5%;padding:.8% 0% 0% 1.7%;color:#e5f4ff99;border-top:1px solid rgb(0,126,199,.5)}#versions{color:#007ec7;text-decoration:none}

dist/web/assets/index-CSA6TclE.css

@@ -0,0 +1 @@
+@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/open-sans-v44-latin-regular-Bk63H6sG.woff2) format("woff2")}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:Open Sans,sans-serif;background-color:#002b4d;width:500px;height:320px;line-height:1;border:1.5px solid rgb(0,126,199)}#overbar{position:relative;padding:1.5%;font-size:10px;font-weight:700;margin-bottom:0;color:#e5f4ff99;border-bottom:1px solid rgb(0,126,199,.5)}#sigDetect{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:400;color:#e5f4ffd9;opacity:0;transition:opacity 1s}#sigDetect.show{opacity:1;transition:none}#homepage{position:fixed;text-decoration:none;color:#ff0;right:2.5%}#textarea{background-color:#e6e6e6;margin:1.5%;width:95.5%;height:69%;font-family:Open Sans,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;line-height:20px}input{font-size:11.5px}#encodeButton{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}#decodeButton{margin-bottom:0;margin-left:1.5%;color:#002b4d;cursor:pointer}select{display:inline-block;margin-bottom:0;margin-left:1.5%;color:#002b4d;background-color:#e6e6e6;text-align:center;font-size:11px;width:8em;vertical-align:middle}#encodeButton,#decodeButton{vertical-align:middle}#sign{margin-left:1.5%;font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid rgba(229,244,255,.2);background:transparent;color:#e5f4ff59;cursor:pointer;vertical-align:middle}#sign:hover{border-color:#e5f4ff59;color:#e5f4ff80}#sign.on{background:#e6e6e6;border-color:#e6e6e6;color:#002b4d}#sign.on:hover{background:#fff;border-color:#fff}#notice{font-size:10px;margin-top:1.5%;padding:.8% 0% 0% 1.7%;color:#e5f4ff99;border-top:1px solid rgb(0,126,199,.5)}#versions{color:#007ec7;text-decoration:none}

dist/web/index.html

@@ -3,11 +3,11 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+
-  <script type="module" crossorigin src="/assets/index-CRFZe-9x.js"></script>
+  <script type="module" crossorigin src="/assets/index-C__Rgwrh.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-CSA6TclE.css">
 </head>
-<body>
+<body>
 <div id="overbar"><p>inØsight 2.2.1<span id="sigDetect"></span><a id="homepage" href="https://github.com/planetrenox/inzerosight" target="_blank" rel="noopener">source</a></p></div>
 <textarea id="textarea" placeholder="input text here..."></textarea>
 <input id="encodeButton" type="button" name="button" value="encode to clipboard"/>

index.html

@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-<div id="overbar"><p>inØsight 2.2.1<a id="homepage" href="https://github.com/planetrenox/inzerosight" target="_blank" rel="noopener">source</a></p></div>
+<div id="overbar"><p>inØsight 2.2.1<span id="sigDetect"></span><a id="homepage" href="https://github.com/planetrenox/inzerosight" target="_blank" rel="noopener">source</a></p></div>
 <textarea id="textarea" placeholder="input text here..."></textarea>
 <input id="encodeButton" type="button" name="button" value="encode to clipboard"/>
 <input id="decodeButton" type="button" name="button" value="decode from text"/>

style.css

@@ -42,6 +42,7 @@ body {
 }
 
 #overbar {
+    position: relative;
     padding: 1.5%;
     font-size: 10px;
     font-weight: bold;
@@ -50,6 +51,22 @@ body {
     border-bottom: 1px solid rgb(0, 126, 199, .5);
 }
 
+#sigDetect {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: normal;
+    color: rgb(229, 244, 255, 0.85);
+    opacity: 0;
+    transition: opacity 1s;
+}
+
+#sigDetect.show {
+    opacity: 1;
+    transition: opacity .2s;
+}
+
 #homepage {
     position: fixed;
     text-decoration: none;