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

Add about tab, hide tabs and tabBar when js is off, and more polish.

Browse source
This commit is contained in:
magmaus3 2023-07-24 16:58:36 +02:00
parent 8de892c3cb
commit 3fe7347759
Signed by: magmaus3
GPG key ID: 966755D3F4A9B251
1 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -68,13 +68,19 @@
function switchTab(name) {
// Switches the tab
// only "encode" and "decode" values are supported
// only "encode","decode" and "about" values are supported
if (name === "encode") {
document.getElementById("encode").style.display = "block"
document.getElementById("decode").style.display = "none"
document.getElementById("about").style.display = "none"
} else if (name === "decode") {
document.getElementById("encode").style.display = "none"
document.getElementById("decode").style.display = "block"
document.getElementById("about").style.display = "none"
} else if (name === "about") {
document.getElementById("encode").style.display = "none"
document.getElementById("decode").style.display = "none"
document.getElementById("about").style.display = "block"
}
}
@ -84,7 +90,7 @@
const urlParams = new URLSearchParams(window.location.search);
if (
urlParams.has("tab") &&
["encode", "decode"].includes(urlParams.get("tab"))
["encode", "decode", "about"].includes(urlParams.get("tab"))
) {
// Check if tab parameter is set up and is correct
// If not, an default value will be used
@ -92,6 +98,7 @@
}
switchTab(tabOpen)
document.getElementsByClassName("tabBar")[0].style.display = "flex"
// Show the result of the action performed before reloading
if (urlParams.get("tab") === "encode" && urlParams.has("infohashv1")) {
document.getElementById("encodeResult").innerText = infohashToBase64(urlParams.get("infohashv1"))
@ -122,6 +129,7 @@
margin-right: 0.5rem;
}
.tab {
display: none; /* Default value to keep tabs hidden when JS is not available */
border: 1px solid white;
padding: 0.5em;
border-radius: 0em 1em 1em 1em;
@ -135,7 +143,7 @@
border-radius: 1em;
}
.tabBar {
display: flex;
display: none; /* Default value to keep tabs hidden when JS is not available */
border-collapse: collapse;
}
.button {
@ -150,6 +158,7 @@
.button:active {
background-color: rgba(255,255,255, 0.2);
}
a { color: cyan; text-decoration: none;}
</style>
</head>
<body>
@ -162,6 +171,7 @@
<div class="tabBar">
<div onclick="switchTab('encode')" class="button">Encode</div>
<div onclick="switchTab('decode')" class="button">Decode</div>
<div onclick="switchTab('about')" class="button">About</div>
</div>
<div class="tab" id="encode">
<form>
@ -181,6 +191,20 @@
</form>
<div class="result" id="decodeResult"></div>
</div>
<div class="tab" id="about">
<form>
<h2>About</h2>
<p>
This tool was made to work with <a href="https://lemmy.dbzer0.com/post/1009713">an suggestion posted by @toxictenement@lemmy.dbzer0.com</a>
by <a href="https://magmaus3.eu.org">magmaus3</a>.
</p>
<p>
You can check the source code by downloading the page (everything is stored in a single html file),
by going to your browser's devtools or on codeberg.
</p>
</form>
<div class="result" id="decodeResult"></div>
</div>
</main>
</body>
</html>