add components for result saving (icons, css, base elements);

improve decodeAsAsn1: do not decode if outData is empty;

Author: TheBestTvarynka

img/add.png

@@ -13,6 +13,7 @@
     <title>Bytes formatter</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="examples.css">
+    <link rel="stylesheet" href="results.css">
     <link rel="stylesheet" href="notifications.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -112,11 +113,30 @@
             <div id="share" class="tool" onclick="share()">
                 <img src="../img/share.png" alt="share" />
             </div>
+            <div id="saveOutData" class="tool">
+                <img src="../img/add.png" alt="add" />
+            </div>
             <div id="asn1Tool" class="hide labeledTool" onclick="decodeAsAsn1()">
                 <img src="../img/linking1.png" alt="asn1" />
                 <span>asn1</span>
             </div>
         </div>
+        <div class="results-container">
+            <div class="result">
+                <span>52538a80094f7b62948fd31e68fd17a315d8dc91</span>
+                <div class="result-options">
+                    <div class="tool">
+                        <img src="../img/copy.png" alt="copy" />
+                    </div>
+                    <div class="tool">
+                        <img src="../img/grab.png" alt="grab" />
+                    </div>
+                    <div class="tool">
+                        <img src="../img/delete.png" alt="delete" />
+                    </div>
+                </div>
+            </div>
+        </div>
     </article>
     <footer>
         <span>Bytes formatter Copyright © 2022 Pavlo Myroniuk; released as <a

img/delete.png

@@ -0,0 +1,31 @@
+
+.results-container {
+    margin-top: 0.3em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
+}
+
+.result {
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: calc(100% - 0.4em);
+    height: 2em;
+    border-radius: 0.3em;
+    padding: 0.2em;
+}
+
+.result:hover {
+    background-color: #ded6cc;
+}
+
+.result:hover .result-options {
+    display: inline-flex;
+    gap: 0.3em;
+    align-items: center;
+}
+
+.result-options {
+    display: none;
+}

img/grab.png

@@ -221,10 +221,18 @@ const swap = () => {
   convert();
 }
 
-const decodeAsAsn1 = () => window.open(
-  `https://asn1.qkation.com/#${document.getElementById('outData').value}`,
-  '_blank'
-).focus();
+const decodeAsAsn1 = () => {
+  const value = document.getElementById('outData').value;
+
+  if (!value) {
+    return;
+  }
+
+  window.open(
+    `https://asn1.qkation.com/#${value}`,
+    '_blank'
+  ).focus();
+}
 
 const toggleAsn1Button = () => {
   const outType = document.getElementById('outType').value;

src/index.html

@@ -58,7 +58,7 @@ article {
 }
 
 .paramTool>img {
-    height: 90%;
+    height: 1.2em;
 }
 
 button {