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).