feat(ui): add Sign toggle and adjust selector widths

This commit is contained in:
2026-09-12 15:16:23 -07:00
parent 7c024baac0
commit f15ae68669
13 changed files with 148 additions and 108 deletions

View File

@@ -7,6 +7,9 @@ const encoderDropdown = document.getElementById('encoder');
const cipherDropdown = document.getElementById('cipher'); const cipherDropdown = document.getElementById('cipher');
document.getElementById('encodeButton').addEventListener('click', ACT); document.getElementById('encodeButton').addEventListener('click', ACT);
document.getElementById('decodeButton').addEventListener('click', ACT); document.getElementById('decodeButton').addEventListener('click', ACT);
document.getElementById('sign').addEventListener('click', e =>
e.target.classList.toggle('on')
);
function ACT(event) { function ACT(event) {
if (textarea.value === '') { if (textarea.value === '') {

View File

@@ -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:8.5em}#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{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}

View File

@@ -1,32 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" crossorigin src="/index.js"></script> <script type="module" crossorigin src="/index.js"></script>
</head> <link rel="stylesheet" crossorigin href="/index.css">
<body> </head>
<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> <body>
<textarea id="textarea" placeholder="input text here..."></textarea> <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>
<input id="encodeButton" type="button" name="button" value="encode to clipboard"/> <textarea id="textarea" placeholder="input text here..."></textarea>
<input id="decodeButton" type="button" name="button" value="decode from text"/> <input id="encodeButton" type="button" name="button" value="encode to clipboard"/>
<select id="encoder"> <input id="decodeButton" type="button" name="button" value="decode from text"/>
<optgroup label="Standard"> <select id="encoder">
<option>ZWUS-3</option> <optgroup label="Standard">
<option>ZWUS-6</option> <option>ZWUS-3</option>
<option>ZWUS-8</option> <option>ZWUS-6</option>
</optgroup> <option>ZWUS-8</option>
</select> </optgroup>
<select id="cipher"> </select>
<optgroup label="Encryption"> <select id="cipher">
<option>PLAIN</option> <optgroup label="Encryption">
<option>SPECK48_96CTR</option> <option>PLAIN</option>
<option>SPECK32_64ECB (insecure)</option> <option>SPECK48_96CTR</option>
</optgroup> <option>SPECK32_64ECB (insecure)</option>
</select> </optgroup>
<p id="notice"> </select>
notice: some platforms restrict Ø width characters. <button id="sign" type="button" class="on">Sign</button>
</p> <p id="notice">
</body> notice: some platforms restrict Ø width characters.
</html> </p>

File diff suppressed because one or more lines are too long

View File

@@ -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:8.5em}#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{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}

View File

@@ -1,32 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" crossorigin src="/index.js"></script> <script type="module" crossorigin src="/index.js"></script>
</head> <link rel="stylesheet" crossorigin href="/index.css">
<body> </head>
<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> <body>
<textarea id="textarea" placeholder="input text here..."></textarea> <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>
<input id="encodeButton" type="button" name="button" value="encode to clipboard"/> <textarea id="textarea" placeholder="input text here..."></textarea>
<input id="decodeButton" type="button" name="button" value="decode from text"/> <input id="encodeButton" type="button" name="button" value="encode to clipboard"/>
<select id="encoder"> <input id="decodeButton" type="button" name="button" value="decode from text"/>
<optgroup label="Standard"> <select id="encoder">
<option>ZWUS-3</option> <optgroup label="Standard">
<option>ZWUS-6</option> <option>ZWUS-3</option>
<option>ZWUS-8</option> <option>ZWUS-6</option>
</optgroup> <option>ZWUS-8</option>
</select> </optgroup>
<select id="cipher"> </select>
<optgroup label="Encryption"> <select id="cipher">
<option>PLAIN</option> <optgroup label="Encryption">
<option>SPECK48_96CTR</option> <option>PLAIN</option>
<option>SPECK32_64ECB (insecure)</option> <option>SPECK48_96CTR</option>
</optgroup> <option>SPECK32_64ECB (insecure)</option>
</select> </optgroup>
<p id="notice"> </select>
notice: some platforms restrict Ø width characters. <button id="sign" type="button" class="on">Sign</button>
</p> <p id="notice">
</body> notice: some platforms restrict Ø width characters.
</html> </p>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1 +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{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:8.5em}#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(/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}

4
dist/web/assets/index-CRFZe-9x.js vendored Normal file

File diff suppressed because one or more lines are too long

65
dist/web/index.html vendored
View File

@@ -1,32 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" crossorigin src="/assets/index-B8eyOrsF.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BtIxyDe5.css"> <script type="module" crossorigin src="/assets/index-CRFZe-9x.js"></script>
</head> <link rel="stylesheet" crossorigin href="/assets/index-BsThwXwS.css">
<body> </head>
<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> <body>
<textarea id="textarea" placeholder="input text here..."></textarea> <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>
<input id="encodeButton" type="button" name="button" value="encode to clipboard"/> <textarea id="textarea" placeholder="input text here..."></textarea>
<input id="decodeButton" type="button" name="button" value="decode from text"/> <input id="encodeButton" type="button" name="button" value="encode to clipboard"/>
<select id="encoder"> <input id="decodeButton" type="button" name="button" value="decode from text"/>
<optgroup label="Standard"> <select id="encoder">
<option>ZWUS-3</option> <optgroup label="Standard">
<option>ZWUS-6</option> <option>ZWUS-3</option>
<option>ZWUS-8</option> <option>ZWUS-6</option>
</optgroup> <option>ZWUS-8</option>
</select> </optgroup>
<select id="cipher"> </select>
<optgroup label="Encryption"> <select id="cipher">
<option>PLAIN</option> <optgroup label="Encryption">
<option>SPECK48_96CTR</option> <option>PLAIN</option>
<option>SPECK32_64ECB (insecure)</option> <option>SPECK48_96CTR</option>
</optgroup> <option>SPECK32_64ECB (insecure)</option>
</select> </optgroup>
<p id="notice"> </select>
notice: some platforms restrict Ø width characters. <button id="sign" type="button" class="on">Sign</button>
</p> <p id="notice">
</body> notice: some platforms restrict Ø width characters.
</html> </p>

View File

@@ -24,6 +24,7 @@
<option>SPECK32_64ECB (insecure)</option> <option>SPECK32_64ECB (insecure)</option>
</optgroup> </optgroup>
</select> </select>
<button id="sign" type="button" class="on">Sign</button>
<p id="notice"> <p id="notice">
notice: some platforms restrict Ø width characters. notice: some platforms restrict Ø width characters.
</p> </p>

View File

@@ -97,7 +97,40 @@ select {
background-color: #e6e6e6; background-color: #e6e6e6;
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
width: 8.5em; width: 8.0em;
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, 0.2);
background: transparent;
color: rgba(229, 244, 255, 0.35);
cursor: pointer;
vertical-align: middle;
}
#sign:hover {
border-color: rgba(229, 244, 255, 0.35);
color: rgba(229, 244, 255, 0.5);
}
#sign.on {
background: #e6e6e6;
border-color: #e6e6e6;
color: #002b4d;
}
#sign.on:hover {
background: #fff;
border-color: #fff;
} }
#notice { #notice {