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

---
 index.html | 104 ++++++++++++++++++++++++-----------------------------
 1 file changed, 47 insertions(+), 57 deletions(-)
diff --git a/index.html b/index.html
index 77d9c13..009fe44 100644
--- a/index.html
+++ b/index.html
@@ -7,47 +7,37 @@
 <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>
-<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 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>
 <p id="notice">
     notice: some platforms restrict Ø width characters.
 </p>
 <script src="dash.js"></script>
 </body>
 <style>
-    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 {
+    *, *::before, *::after {
         margin: 0;
         padding: 0;
         border: 0;
-        font-size: 100%;
         font: inherit;
         vertical-align: baseline;
+        box-sizing: border-box;
     }
 
     article, aside, details, figcaption, figure,
@@ -60,8 +50,11 @@
     body {
         font-family: Candara, "DejaVu Sans", sans-serif, Arial, Helvetica;
         background-color: #002b4d;
-        width: 500px;
-        height: 320px;
+        max-width: 500px;
+        min-height: 100vh;
+        margin: auto;
+        display: flex;
+        flex-direction: column;
         line-height: 1;
         border: 1.5px solid rgb(0, 126, 199);
     }
@@ -70,9 +63,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 {
@@ -85,52 +78,49 @@
     #textarea {
         background-color: #e6e6e6;
         margin: 1.5%;
-        width: 95.5%;
-        height: 69%;
+        width: auto;
+        flex: 1;
+        resize: vertical;
         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: 1.5%;
-        padding: .8% 0% 0% 1.7%;
+        margin-top: auto;
+        padding: .8% 1.7%;
         color: rgb(229, 244, 255, 0.6);
         border-top: 1px solid rgb(0, 126, 199, .5);
+        flex-shrink: 0;
     }
 
     #versions {
