<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Encode</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }

        .drop-zone {
            background-color: #f8f8f8;
            border: 2px dashed #cccccc;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
        }

        .drop-zone:hover {
            border-color: #aaaaaa;
        }

        .drop-zone input {
            display: none;
        }

        .drop-zone .upload-icon {
            font-size: 50px;
            margin-bottom: 15px;
        }

        .drop-zone .upload-text {
            font-size: 16px;
            color: #888888;
        }

        .form-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }

        .form-container input[type="text"],
        .form-container input[type="number"],
        .form-container input[type="file"],
        .form-container input[type="submit"] {
            display: inline-block;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #cccccc;
        }

        .form-container input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        table{
            width: 400px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <a style="text-decoration: none; color: white; display: inline-block; padding: 14px 16px; background-color: gray;" href="/">< Back</a>

    <div class="form-container">
        <form action="/encoding" method="POST" enctype = "multipart/form-data">
            <div class="drop-zone" id="dropZone">
                <div class="upload-icon">&#8681;</div>
                <div class="upload-text">Drag and drop an image here or click to browse</div>
                <input type="file" name="origin" id="fileInput">
            </div>
            <div style="width: 100%; text-align: center; padding: 10px 0px">
                <label for="b2c">Bits to Change:</label>
                <table>
                    <tr>
                        <th>8</th>
                        <th>7</th>
                        <th>6</th>
                        <th>5</th>
                        <th>4</th>
                        <th>3</th>
                        <th>2</th>
                        <th>1</th>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="b2c" value="8" placeholder="8"></td>
                        <td><input type="checkbox" name="b2c" value="7" placeholder="7"></td>
                        <td><input type="checkbox" name="b2c" value="6" placeholder="6"></td>
                        <td><input type="checkbox" name="b2c" value="5" placeholder="5"></td>
                        <td><input type="checkbox" name="b2c" value="4" placeholder="4"></td>
                        <td><input type="checkbox" name="b2c" value="3" placeholder="3"></td>
                        <td><input type="checkbox" name="b2c" value="2" placeholder="2"></td>
                        <td><input type="checkbox" name="b2c" value="1" placeholder="1"></td>
                    </tr>
                </table>
                <input type="text" name="payload" placeholder="Secret Code">
                <input type="submit" value="Encode">
            </div>
        </form>
    </div>
</body>

<script>
    $(document).ready(function () {
        $('#dropZone').click(function (event) {
            if (!$(event.target).is('#fileInput')) {
                $("#fileInput").click()
            }
        });
    });
</script>

</html>