index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Steganography Tool</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body class="prevent-select">
    <nav class="gradient-background">
        <img src="graphics/grid-masonry-svgrepo-com.svg" height="40" width="50"> 
        <h1>Image Steganography Tool</h1>
    </nav>
    <div class="container">
        <h1>Select Option:</h1>
        <div class="buttons">
            <button id="encodeBtn"> <img src="graphics/icons8-encoding.svg" height="30" width="30"> Encode Text </button>
            <button id="decodeBtn"><img src="graphics/icons8-decoding.svg" height="30" width="30"> Decode Text</button>
        </div>

        <div id="encodeSection" class="section">
            <h2>Encode Text into Image</h2>
            <label>Choose an Image: </label>
            <input type="file" id="imageInput" accept="image/*">
            <label>Enter the text to hide: </label>
            <textarea id="textInput" spellcheck="false" placeholder="Enter text to hide..."></textarea>
            <label>Enter Password: </label>
            <input type="password" id="encodePassword" placeholder="Enter a password" />
            <button id="encodeImageBtn">Encode Image</button>
            <button id="visualizeBtn" style="display: none;">Visualize Changes</button>
            <canvas id="canvas" style="display:none;"></canvas>
            <canvas id="visualizationCanvas" style="display:none;"></canvas>
        </div>

        <div id="decodeSection" class="section" style="display:none;">
            <h2>Decode Text from Image</h2>
            <label>Choose an Image: </label>
            <input type="file" id="decodeImageInput" accept="image/*">
            <label>Enter Password: </label>
            <input type="password" id="decodePassword" placeholder="Enter the password" />
            <button id="decodeImageBtn">Decode Image</button>
            <p id="decodedText"></p>
        </div>
    </div>
    
    <!-- <footer>
        <p>&copy; 2024 Image Steganography Tool. All rights reserved.</p>
    </footer> -->
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="script.js"></script>
</body>

</html>