index2.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>Steganography</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="s1.css" />
    <script src="st.js"></script>
    <style>
      .bg{
      background: url('w2.jpg')no-repeat;
      }
      h5{
        color: white;
        font-size:x-large;
      }
    input{
      background-color: aqua;
    }
    </style>
  </head>
  <body>
    <div class="bg">
    <div class="cont">
      

        <div class="" >
                  <input
          class="ui primary button"
          type="file"
          name="pic"
          accept="image/*"
          onchange="readURL(this);"
        />
        
        <div class="ui input">
          
  
          <input id="text" type="text" placeholder="Enter the message" />
          
        </div>
       
        <button class="ui secondary button" onclick="hideText()">
          Hide Message Into Image
        </button>
        <div class="ui input">
        <input id="keyInput" type="text" placeholder="Enter the key" />
        <button onclick="ok()">key</button>
        </div>
          
        </div>
        <div class="img-cont">
          <div  class="img1">
            <h5>Source Image</h5>

            <img id="image1" src="" alt="" />
          </div>
    

          <div class="">
            <h5>Message Encoded Image</h5>
            <img id="image2" src="" alt="" />
            <a id="downloadEncodedImageBtn" class="ui secondary button" download>Download Encoded Image</a>
            
          </div>

        </div>
    </div>

      
    </div>

    
    <script src="ind.js"></script>
    

    </body>
</html>