steganography/index.html at master · pawelgdak/steganography · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Steganography</title>
    <link rel="stylesheet" href="style.css">

    <script>
      if (typeof module === 'object') {window.module = module; module = undefined;}
    </script>

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script>if (window.module) module = window.module;</script>

  </head>
  <body>

    <section>

      <p class="title">Photos</p>

      <div class="photos">
        <div class="photo original">
          <div class="caption">Original photo</div>
          <div class="image"><img id="original-photo" src="" /></div>
          <div class="buttons">
            <div class="buttons-container">
              <button id="load-image">Load image</button>
              <button id="decode">Decode</button>
              <button id="clear-original">Clear</button>
            </div>
            <div id="original-photo-size" class="image-size"></div>
          </div>
        </div>
        <div class="photo modified">
          <div class="caption">Modified photo</div>
          <div class="image"><img id="modified-photo" src="" /></div>
          <div class="buttons">
            <div class="buttons-container">
                <button id="save-image">Save image</button>
                <button id="clear-modified">Clear</button>
              </div>
              <div id="modified-photo-size" class="image-size"></div>
          </div>
        </div>
      </div>
    </section>

    <section class="with-columns">

      <div class="column">
        <p class="title">Settings</p>

        <div class="description">Set how many bits (for every channel) should store the encoded text.</div>
        <div class="settings">
          <div class="bits-count">
            <div class="bit">
              <label for="bit_R">Red</label>
              <div class="display bit_R_display" type="number">2</div>
              <input class="bit_range" type="range" value="2" min="1" max="8" step="1" name="bit_R" id="bit_R" />
            </div>
            <div class="bit">
              <label for="bit_G">Green</label>
              <div class="display bit_G_display" type="number">2</div>
              <input class="bit_range" type="range" value="2" min="1" max="8" step="1" name="bit_G" id="bit_G" />
            </div>
            <div class="bit">
              <label for="bit_B">Blue</label>
              <div class="display bit_B_display" type="number">2</div>
              <input class="bit_range" type="range" value="2" min="1" max="8" step="1" name="bit_B" id="bit_B" />
            </div>
          </div>
        </div>
      </div>

      <div class="column">
        <p class="title">Information</p>

        <p class="information-element">Selected <span id="bits-total">6</span> bits total.</p>
        <p class="information-element">Image has <span id="pixels-total">0</span> pixels.</p>
      </div>

    </section>

    <section>

      <p class="title">Text to hide</p>

      <div class="text-to-hide">
        <textarea id="text" name="text">Sample text</textarea>

        <div>
          <button id="load-text-file">Load text from a file</button>
          <p class="hidden" id="characters-left-info"><span id="characters-left">0</span> characters left</p>
        </div>

      </div>

    </section>

    <section>
      <div class="main-buttons">
        <button id="hide">Hide</button>
      </div>
    </section>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>