From 206b295268890f25ccd292cbff44d49f9cfe5ea2 Mon Sep 17 00:00:00 2001
From: magmaus3 <magmaus3@disroot.org>
Date: Mon, 24 Jul 2023 18:24:05 +0200
Subject: [PATCH] more changes

---
 index.html | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index ee43659..a45fe70 100644
--- a/index.html
+++ b/index.html
@@ -69,6 +69,9 @@
             function switchTab(name) {
                 // Switches the tab
                 // only "encode","decode" and "about" values are supported
+                let url = new URL(window.location)
+                url.searchParams.set("tab", name)
+                window.history.replaceState(null, "", url.href)
                 if (name === "encode") {
                     document.getElementById("encode").style.display = "block"
                     document.getElementById("decode").style.display = "none"
@@ -112,7 +115,7 @@
                 width: 100vw; height: 100vh; 
                 margin: 0; padding: 0;
                 display: flex; flex-direction: column;
-                justify-content: center; text-align: center;
+                justify-content: center;
                 align-items: center;
                 background-color: #10101a;
                 color: white;
@@ -123,20 +126,18 @@
                 padding: 1em;
                 border: 1px solid white;
                 border-radius: 1em;
-                width: fit-content;
                 box-shadow: 0px 5px 15px black, 0px 1px 15px black inset;
 
             }
             input {
                 color: white;
                 background-color: transparent;
-                border: 1px solid #50505a;
+                border: 1px solid white;
             }
             label {
                 margin-right: 0.5rem;
             }
             .tab {
-                display: none; /* Default value to keep tabs hidden when JS is not available */
                 border: 1px solid white;
                 padding: 1em;
                 border-radius: 0em 1em 1em 1em;
@@ -150,9 +151,8 @@
                 border: 1px solid gray;
                 border-radius: 1em;
             }
-            .tabBar {
+            .tab, .tabBar {
                 display: none; /* Default value to keep tabs hidden when JS is not available */
-                border-collapse: collapse;
             }
             .button {
                 padding: 0.5em;
@@ -160,6 +160,9 @@
                 border-bottom: none;
                 transition: box-shadow 200ms ease;
             }
+            .leftButton {
+                border-radius: 1em 0em 0em 0em;
+            }
             .button:hover {
                 box-shadow: 0px 5px 25px black;
             }
@@ -180,9 +183,9 @@
                 You can use DevTools in your browser to look at the code (it's intended to be easily readable).
             </noscript>
             <div class="tabBar">
-                <div onclick="switchTab('encode')" class="button">Encode</div>
+                <div onclick="switchTab('encode')" class="button leftButton">Encode</div>
                 <div onclick="switchTab('decode')" class="button">Decode</div>
-                <div onclick="switchTab('about')" class="button">About</div>
+                <div onclick="switchTab('about')" class="button right">About</div>
             </div>
             <div class="tab" id="encode">
                 <form>