magmaus3/infohash2base64
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

more changes

Browse source
This commit is contained in:
magmaus3 2023-07-24 18:24:05 +02:00
parent 6a4b576a81
commit 206b295268
Signed by: magmaus3
GPG key ID: 966755D3F4A9B251
1 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
index.html
View file

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