Update index.html

blake437 · web-flow · commit 4ea1d56ac25a · 2025-05-21T12:56:03.000-07:00
Signed-off-by: Blake Arnold &lt;blake.arnold@mail.com&gt;
diff --git a/index.html b/index.html
@@ -59,6 +59,58 @@
   display: block !important;
 }
 
+.above-tabs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f7f7f7;
+  border: 1px solid #bbb;
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
+  padding: 10px 24px 10px 24px;
+  margin: 32px auto 0 auto;
+  max-width: 480px;
+  gap: 14px;
+  position: relative;
+  top: 24px;
+}
+
+.above-tabs input[type="text"], 
+.above-tabs input[type="number"] {
+  width: 180px;
+  padding: 7px 12px;
+  font-size: 15px;
+  margin: 0;
+  border: 1px solid #b0b0b0;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+  transition: border-color 0.2s;
+}
+
+.above-tabs input[type="text"]:focus, 
+.above-tabs input[type="number"]:focus {
+  outline: none;
+  border-color: #0078d7;
+}
+
+.above-tabs button {
+  background: #f7f7f7;
+  color: #555;
+  border: 1px solid #bbb;
+  border-radius: 6px;
+  font-size: 15px;
+  padding: 8px 18px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
+  transition: background 0.2s, color 0.2s, border 0.2s;
+}
+
+.above-tabs button:hover, .above-tabs button:focus {
+  background: #ececec;
+  color: #222;
+  border-color: #888;
+}
+
 input[type="text"], input[type="number"] {
   width: 220px;
   padding: 7px 12px;
@@ -109,6 +161,17 @@
     padding: 16px 4vw;
     max-width: 98vw;
   }
+  .above-tabs {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 10px 2vw;
+    max-width: 98vw;
+    gap: 10px;
+  }
+  .above-tabs input[type="text"], .above-tabs input[type="number"] {
+    width: 96vw;
+    max-width: 98vw;
+  }
   input[type="text"], input[type="number"] {
     width: 96vw;
     max-width: 98vw;
@@ -117,9 +180,11 @@
     </style>
   </head>
   <body>
-    <input type="text" placeholder="encryption key" id="key">
-    <input type="number" placeholder="message number" id="num">
-    <button id="newMessageBtn">New message</button>
+    <div class="above-tabs">
+      <input type="text" placeholder="encryption key" id="key">
+      <input type="number" placeholder="message number" id="num">
+      <button type="button" id="newMessageBtn">New Message</button>
+    </div>
     <div id="tabs">
       <div class="tab" onclick="showTabContent('tab1')">Encrypt</div>
       <div class="tab" onclick="showTabContent('tab2')">Decrypt</div>
@@ -139,13 +204,6 @@
     </div>
   </body>
 <script>
-  document.getElementById('newMessageBtn').addEventListener('click', function() {
-    document.getElementById('message').value = '';
-    let fileInput = document.getElementById('fileInput');
-    if(fileInput) fileInput.value = '';
-    let msgNum = Math.floor(Math.random() * 900000) + 100000;
-    document.getElementById('messageNum').value = msgNum;
-});
   showTabContent('tab1')
   function strToBuf(str) {
     return new TextEncoder().encode(str);
