From 6ba79ee3517ba8e78b3d5cb4e361a47d9e1c235b Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 12 Sep 2025 01:49:13 -0700
Subject: [PATCH] feat: update index.html

---
 index.html | 105 +++++++++++++++++++++++++++++------------------------
 1 file changed, 58 insertions(+), 47 deletions(-)
diff --git a/index.html b/index.html
index 009fe44..c622190 100644
--- a/index.html
+++ b/index.html
@@ -7,37 +7,47 @@
 <body>
 <div id="overbar"><p>inØsight 2.1.0<a id="homepage" href="https://github.com/planetrenox/inzerosight" target="_blank">source</a></p></div>
 <textarea id="textarea" placeholder="input text here..."></textarea>
-<div id="controls">
-    <input id="encodeButton" type="button" name="button" value="encode to clipboard"/>
-    <input id="decodeButton" type="button" name="button" value="decode from text"/>
-    <select id="encoder">
-        <optgroup label="Standard">
-            <option>ZWUS-3</option>
-            <option>ZWUS-6</option>
-            <option>ZWUS-8</option>
-        </optgroup>
-        <!--    <optgroup label="Depreciated"></optgroup>-->
-    </select>
-    <select id="cipher">
-        <optgroup label="Encryption">
-            <option>PLAIN</option>
-            <option>SPECK32_64ECB</option>
-        </optgroup>
-    </select>
-</div>
+<input id="encodeButton" type="button" name="button" value="encode to clipboard"/>
+<input id="decodeButton" type="button" name="button" value="decode from text"/>
+<select id="encoder">
+    <optgroup label="Standard">
+        <option>ZWUS-3</option>
+        <option>ZWUS-6</option>
+        <option>ZWUS-8</option>
+    </optgroup>
+    <!--    <optgroup label="Depreciated"></optgroup>-->
+</select>
+<select id="cipher">
+    <optgroup label="Encryption">
+        <option>PLAIN</option>
+        <option>SPECK32_64ECB</option>
+    </optgroup>
+</select>
 <p id="notice">
     notice: some platforms restrict Ø width characters.
 </p>
 <script src="dash.js"></script>
 </body>
 <style>
-    *, *::before, *::after {
+    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;
-        box-sizing: border-box;
     }
 
     article, aside, details, figcaption, figure,
@@ -50,11 +60,8 @@
     body {
         font-family: Candara, "DejaVu Sans", sans-serif, Arial, Helvetica;
         background-color: #002b4d;
-        max-width: 500px;
-        min-height: 100vh;
-        margin: auto;
-        display: flex;
-        flex-direction: column;
+        width: 500px;
+        height: 320px;
         line-height: 1;
         border: 1.5px solid rgb(0, 126, 199);
     }
@@ -63,9 +70,9 @@
         padding: 1.5%;
         font-size: 10px;
         font-weight: bold;
+        margin-bottom: 0px;
         color: rgb(229, 244, 255, 0.6);
         border-bottom: 1px solid rgb(0, 126, 199, .5);
-        flex-shrink: 0;
     }
 
     #homepage {
@@ -78,49 +85,52 @@
     #textarea {
         background-color: #e6e6e6;
         margin: 1.5%;
-        width: auto;
-        flex: 1;
-        resize: vertical;
+        width: 95.5%;
+        height: 69%;
         font-family: "Open Sans", Candara, "DejaVu Sans", sans-serif, Arial, Helvetica;
         font-size: 13px;
         font-style: normal;
         font-variant: normal;
         font-weight: 400;
         line-height: 20px;
-        padding: 5px;
-    }
-
-    #controls {
-        display: flex;
-        flex-wrap: wrap;
-        gap: .5em;
-        padding: 0 1.5% 1.5%;
-    }
-
-    #controls > * {
-        flex: 1 1 120px;
-        color: #002b4d;
-        cursor: pointer;
-        padding: .3em;
     }
 
     input {
         font-size: 11.5px;
     }
 
+    #encodeButton {
+        display: inline-block;
+        margin-bottom: 0px;
+        margin-left: 1.5%;
+        color: #002b4d;
+        cursor: pointer;
+    }
+
+    #decodeButton {
+        margin-bottom: 0px;
+        margin-left: 1.5%;
+        color: #002b4d;
+        cursor: pointer;
+    }
+
     select {
+        display: inline-block;
+        margin-bottom: 0px;
+        margin-left: 1.5%;
+        color: #002b4d;
         background-color: #e6e6e6;
         text-align: center;
         font-size: 11px;
+        width: 8.5em;
     }
 
     #notice {
         font-size: 10px;
-        margin-top: auto;
-        padding: .8% 1.7%;
+        margin-top: 1.5%;
+        padding: .8% 0% 0% 1.7%;
         color: rgb(229, 244, 255, 0.6);
         border-top: 1px solid rgb(0, 126, 199, .5);
-        flex-shrink: 0;
     }
 
     #versions {
@@ -131,3 +141,4 @@
 </style>
 
 </html>
+
