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) { function switchTab(name) {
// Switches the tab // Switches the tab
// only "encode" and "decode" values are supported // only "encode","decode" and "about" values are supported
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"
document.getElementById("about").style.display = "none"
} else if (name === "decode") { } else if (name === "decode") {
document.getElementById("encode").style.display = "none" document.getElementById("encode").style.display = "none"
document.getElementById("decode").style.display = "block" 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); const urlParams = new URLSearchParams(window.location.search);
if ( if (
urlParams.has("tab") && 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 // Check if tab parameter is set up and is correct
// If not, an default value will be used // If not, an default value will be used
@ -92,6 +98,7 @@
} }
switchTab(tabOpen) switchTab(tabOpen)
document.getElementsByClassName("tabBar")[0].style.display = "flex"
// Show the result of the action performed before reloading // Show the result of the action performed before reloading
if (urlParams.get("tab") === "encode" && urlParams.has("infohashv1")) { if (urlParams.get("tab") === "encode" && urlParams.has("infohashv1")) {
document.getElementById("encodeResult").innerText = infohashToBase64(urlParams.get("infohashv1")) document.getElementById("encodeResult").innerText = infohashToBase64(urlParams.get("infohashv1"))
@ -122,6 +129,7 @@
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: 0.5em; padding: 0.5em;
border-radius: 0em 1em 1em 1em; border-radius: 0em 1em 1em 1em;
@ -135,7 +143,7 @@
border-radius: 1em; border-radius: 1em;
} }
.tabBar { .tabBar {
display: flex; display: none; /* Default value to keep tabs hidden when JS is not available */
border-collapse: collapse; border-collapse: collapse;
} }
.button { .button {
@ -150,6 +158,7 @@
.button:active { .button:active {
background-color: rgba(255,255,255, 0.2); background-color: rgba(255,255,255, 0.2);
} }
a { color: cyan; text-decoration: none;}
</style> </style>
</head> </head>
<body> <body>
@ -162,6 +171,7 @@
<div class="tabBar"> <div class="tabBar">
<div onclick="switchTab('encode')" class="button">Encode</div> <div onclick="switchTab('encode')" class="button">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> </div>
<div class="tab" id="encode"> <div class="tab" id="encode">
<form> <form>
@ -181,6 +191,20 @@
</form> </form>
<div class="result" id="decodeResult"></div> <div class="result" id="decodeResult"></div>
</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> </main>
</body> </body>
</html> </html>