Add page title, add "how to copy"

Add licensing stuff
(also makes the tool work with librejs)
2023-07-25 16:27:12 +02:00 · 2023-07-25 15:19:36 +02:00 · 2023-07-25 14:48:24 +02:00 · 2023-07-24 19:55:08 +02:00 · 2023-07-24 18:56:30 +02:00 · 2023-07-24 18:53:22 +02:00
2 changed files with 104 additions and 67 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,12 @@
+# infohash ↔ base64 tool
+
+You can check the tool at
+<https://magmaus3.codeberg.page/infohash2base64/> (requires javascript)
+
+This tool was made to work with
+[an suggestion posted by @toxictenement@lemmy.dbzer0.com](https://lemmy.dbzer0.com/post/1009713)
+by [magmaus3](https://magmaus3.eu.org).
+
+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](https://codeberg.org/magmaus3/infohash2base64).
--- a/index.html
+++ b/index.html
@ -1,74 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
    <head>
-        <title></title>
+        <title>infohash ↔ base64</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
-            /*
-             * TODO:
-             * - [ ] rewrite functions to not use copied functions 
-             * - [x] add UI
-             * - [x] add style
-             * - [ ] make everything not look like made at 0:41 on a phone
-             */
-            function hexToBytes(hexdata) {
-                // https://stackoverflow.com/a/39396866
-                var arr = hexdata.replace(/[^0-9a-fA-F]/g, '')
+            // @license http://www.wtfpl.net/txt/copying/ WTFPL
+            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<arr.length; i++) {
-                    arr[i] = parseInt(arr[i], 16);
+                for(var i = 0; i<byteArray.length; i++) {
+                    byteArray[i] = parseInt(byteArray[i], 16);
                }

-                return arr;
-            }
-            
-            function bytesToBase64(byteArray) {
-                // https://stackoverflow.com/a/11562550
+                // 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)

-            function base64ToArray(base64) {
-                // https://stackoverflow.com/a/21797381
-                var binaryString = atob(base64);
-                var bytes = new Uint8Array(binaryString.length);
+                // Convert base64 into an byteArray
+                let binaryString = atob(b64);
+                let byteArray = new Uint8Array(binaryString.length);
                for (var i = 0; i < binaryString.length; i++) {
-                        bytes[i] = binaryString.charCodeAt(i);
+                        byteArray[i] = binaryString.charCodeAt(i);
                    }
-                    return bytes;
-            }
-
-            function bytesToHex(byteArray) {
-                // https://stackoverflow.com/a/34310051
+                // Convert byteArray into hex values 
                return Array.from(byteArray, function(byte) {
                    return ('0' + (byte & 0xFF).toString(16)).slice(-2);
                }).join('');
            }
            
-            function infohashToBase64(infohash) {
-                return bytesToBase64(
-                    hexToBytes(infohash)
-                );
-            }
-            function base64ToInfohash(b64) {
-                return bytesToHex(
-                    base64ToArray(b64)
-                );
-            }
-            
            // Everything for the UI itself

            // Holds the state of tabs.
-            // Intended values are "encode" and "decode"
+            // Intended values are "encode", "decode" and "about"
            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"
@ -106,33 +87,40 @@
                    document.getElementById("decodeResult").innerText = base64ToInfohash(urlParams.get("base64value"))
                }
            });
+            // @license-end
        </script>
        <style>
            body {
+                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;
                font-family: monospace;
            }
            main {
+                background-color: #202025;
                padding: 1em;
                border: 1px solid white;
-                width: 50%; border-radius: 1em;
+                border-radius: 1em;
+                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: 0.5em;
-                border-radius: 0em 1em 1em 1em;
+                padding: 1em;
+                border-radius: 0em 0em 1em 1em;
+                box-shadow: 0px 5px 15px black, 0px 1px 15px black inset;
            }
            .result:empty { display: none;}
            .result {
@ -142,36 +130,52 @@
                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 {
+                flex: 1;
+                text-align: center;
                padding: 0.5em;
                border: 1px solid white;
                border-bottom: none;
                transition: box-shadow 200ms ease;
            }
+            .leftButton {
+                border-radius: 1em 0em 0em 0em;
+            }
+            .rightButton {
+                border-radius: 0em 1em 0em 0em;
+            }
            .button:hover {
-                box-shadow: 1px 5px 15px black;
+                box-shadow: 0px 5px 25px black;
            }
            .button:active {
                background-color: rgba(255,255,255, 0.2);
            }
            a { color: cyan; text-decoration: none;}
+            ul > li {
+                margin-bottom: 1em;
+            }
+            #about, .noscript {
+                display: block;
+                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).
+                <div class="noscript">
+                    <p>This tool requires JavaScript to function.</p>
+                    <p>You can use DevTools in your browser to look at the code (it's intended to be easily readable).</p>
+                </div>
            </noscript>
            <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('about')" class="button">About</div>
+                <div onclick="switchTab('about')" class="button rightButton">About</div>
            </div>
            <div class="tab" id="encode">
                <form>
@ -192,7 +196,6 @@
                <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>
@ -200,10 +203,32 @@
                </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.
+                    by going to your browser's devtools or on <a href="https://codeberg.org/magmaus3/infohash2base64">Codeberg</a>.
                </p>
-                </form>
-                <div class="result" id="decodeResult"></div>
+                <h3>License</h3>
+                <p>Copyright © 2023 magmaus3 &lt;magmaus3@disroot.org&gt;</p>
+                <p>This work is free. You can redistribute it and/or modify it under the
+                terms of the Do What The Fuck You Want To Public License, Version 2,
+                as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.</p>
+                <h3>How to copy</h3>
+                <ul>
+                    <li>
+                        On Firefox/Chromium:
+                        <ol>
+                            <li>Right-click on the page</li>
+                            <li>Select <i>Save Page as...</i> or <i>Save as...</i> (or simillar option)</li>
+                            <li>Choose file type as <i>HTML Only</i></li>
+                            <li>Profit!</li>
+                        </ol>
+                    </li>
+                    <li>
+                        Using git:
+                        <ol>
+                            <li><code>git clone https://codeberg.org/magmaus3/infohash2base64</code></li>
+                            <li>Profit!</li>
+                        </ol>
+                    </li>
+                </ul>
            </div>
        </main>
    </body>
Author	SHA1	Message	Date
magmaus3	7c894840f2	Add page title, add "how to copy"	2023-07-25 16:27:12 +02:00
magmaus3	4b39876a7d	Add licensing stuff (also makes the tool work with librejs)	2023-07-25 15:19:36 +02:00
magmaus3	460a2da2cd	Show the about tab when JavaScript is off	2023-07-25 14:48:24 +02:00
magmaus3	5328ba1727	make the tabs take all the space	2023-07-24 19:55:08 +02:00
magmaus3	f5abe57ca1	remove todo comment	2023-07-24 18:56:30 +02:00
magmaus3	97215d4265	Reduce the amount of functions on the backend Instead of using separate functions for each step (hex -> bytearray -> base64 and the opposite), this commit merges the required functions into their uses.	2023-07-24 18:53:22 +02:00
magmaus3	206b295268	more changes	2023-07-24 18:40:25 +02:00
magmaus3	6a4b576a81	Even more style changes	2023-07-24 17:45:39 +02:00
magmaus3	be40b8503c	Add README	2023-07-24 17:28:09 +02:00
magmaus3	51cc45adff	more style changes	2023-07-24 17:21:28 +02:00
magmaus3	b3608aa1e2	add codeberg link	2023-07-24 17:04:24 +02:00