tools.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>8bit Base64 and SHA1 tool</title>
    <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./assets/styles.css">
</head>

<body>
    <div class="container" id="main_container">
        <h1 class="heading">8 Bit Base64 & SHA1 Tool for Images & Strings</h1>
        <hr>
        <label for="file">
            <h3>Select a image file (max 1mb):</h3>
        </label>
        <input type="file" id="file" data-max-size="2048" accept="image/x-png,image/jpeg">
        <p id="imgFileErr" class="error"></p>
        <button onclick="encodeImage()">Encode image</button>

        <label for="image">
            <h3>Enter encoded image base64</h3>
        </label>
        <textarea id="image" placeholder="Enter image base64"></textarea>
        <p id="encodedImgErr" class="error"></p>
        <button onclick="decodeImage()">Decode image</button>

        <label for="text">
            <h3>Enter string to encode</h3>
        </label>
        <textarea id="text" placeholder="Enter string"></textarea>
        <p id="strEncodeErr" class="error"></p>
        <button onclick="encodeString()">Encode string</button>

        <label for="text">
            <h3>Enter encoded string to decode</h3>
        </label>
        <textarea id="e_text" placeholder="Enter endoded string"></textarea>
        <p id="encodedStrErr" class="error"></p>
        <button onclick="decodeString()">Decode string</button>

        <label for="text2">
            <h3>Enter string to SHA1 hash</h3>
        </label>
        <textarea id="text2" placeholder="Enter string"></textarea>
        <p id="SHA1StrErr" class="error"></p>
        <button onclick="hashString()">SHA1 Hash</button>
    </div>
    <div class="result-container" id="result_view">
        <h3 id="result_header"></h3>
        <span id="result_box"></span>
        <img id="result_image">
        <button onclick="copyToClipboard()" id="copy_btn">Copy</button>
    </div>
    <script src="./assets/scripts.js"></script>
</body>

</html>