<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> /* * TODO: * - [x] rewrite functions to not use copied functions * - [x] add UI * - [x] add style * - [x] make everything not look like made at 0:41 on a phone */ function infohashToBase64(infohash) { // Converts an hex infohash into base64. // Convert hex into an byte array let byteArray = infohash.replace(/[^0-9a-fA-F]/g, '') .match(/[0-9a-fA-F]{2}/g); for(var i = 0; i<byteArray.length; i++) { byteArray[i] = parseInt(byteArray[i], 16); } // Convert byteArray into base64 return btoa( String.fromCharCode.apply( null, new Uint8Array(byteArray) ) ); } function base64ToInfohash(b64) { // Converts a base64 value into a infohash (in a hex form) // Convert base64 into an byteArray let binaryString = atob(b64); let byteArray = new Uint8Array(binaryString.length); for (var i = 0; i < binaryString.length; i++) { byteArray[i] = binaryString.charCodeAt(i); } // Convert byteArray into hex values return Array.from(byteArray, function(byte) { return ('0' + (byte & 0xFF).toString(16)).slice(-2); }).join(''); } // Everything for the UI itself // Holds the state of tabs. // Intended values are "encode" and "decode" let tabOpen = "encode" 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" 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" } } addEventListener("DOMContentLoaded", (event) => { // Get the current query params const urlParams = new URLSearchParams(window.location.search); if ( urlParams.has("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 tabOpen = urlParams.get("tab") } 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")) } else if (urlParams.get("tab") === "decode" && urlParams.has("base64value")) { document.getElementById("decodeResult").innerText = base64ToInfohash(urlParams.get("base64value")) } }); </script> <style> body { width: 100vw; height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #10101a; color: white; font-family: monospace; } main { background-color: #202025; padding: 1em; border: 1px solid white; border-radius: 1em; box-shadow: 0px 5px 15px black, 0px 1px 15px black inset; } input { color: white; background-color: transparent; border: 1px solid white; } label { margin-right: 0.5rem; } .tab { border: 1px solid white; padding: 1em; border-radius: 0em 1em 1em 1em; box-shadow: 0px 5px 15px black, 0px 1px 15px black inset; } .result:empty { display: none;} .result { background-color: rgba(32, 32, 42, 0.5); margin-top: 1em; padding: 0.5rem; border: 1px solid gray; border-radius: 1em; } .tab, .tabBar { display: none; /* Default value to keep tabs hidden when JS is not available */ } .button { padding: 0.5em; border: 1px solid white; border-bottom: none; transition: box-shadow 200ms ease; } .leftButton { border-radius: 1em 0em 0em 0em; } .button:hover { box-shadow: 0px 5px 25px black; } .button:active { background-color: rgba(255,255,255, 0.2); } a { color: cyan; text-decoration: none;} #about { max-width: 40rem; } </style> </head> <body> <main> <h1>infohash ↔ base64</h1> <noscript> This tool requires JavaScript to function. 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 leftButton">Encode</div> <div onclick="switchTab('decode')" class="button">Decode</div> <div onclick="switchTab('about')" class="button right">About</div> </div> <div class="tab" id="encode"> <form> <h2>Encode</h2> <input type="hidden" name="tab" value="encode" /> <label for="infohashv1">infohash v1</label><input type="text" id="infohashv1" name="infohashv1" pattern="[0-9a-f]*" /> <input type="submit" method="get" value="convert"/> </form> <div class="result" id="encodeResult"></div> </div> <div class="tab" id="decode"> <form> <h2>Decode</h2> <input type="hidden" name="tab" value="decode" /> <label for="base64value">base64 value</label><input type="text" id="base64value" name="base64value" /> <input type="submit" method="get" value="convert"/> </form> <div class="result" id="decodeResult"></div> </div> <div class="tab" id="about"> <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 <a href="https://codeberg.org/magmaus3/infohash2base64">Codeberg</a>. </p> </div> </main> </body> </html>