stegosaur/imageselect.html at master · sskhandek/stegosaur · 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
<style>

.steg-wrapper {
  display: table;
}

.form-control {
  padding: .5rem .75rem;
  font-size: 1rem;
  line-height: 1.25;
  max-width: 20%;
  color: #464a4c;
  background-color: #fff;
  background-image: none;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

#steg-image {
  max-height: 30px;
  vertical-align: middle;
}

#steg-canvas {

}

#steg-recipient-select {
  max-width: 100%;
}

</style>

<div class="steg-wrapper">
  <form style="padding-left: 5px">
    <div class="form-group">
      <input style="display: inline-block; width: 35%; max-width: 35%; height: 30px; padding: 0; padding-left: 10px" type="text" class="form-control" id="steg-address" placeholder="Image Link">
      <input style="display: inline-block; width: 35%; max-width: 35%; height: 30px; padding: 0; padding-left: 10px" type="text" class="form-control" id="steg-message" placeholder="Secret Message"></textarea>
      <br>
      <button type="submit" id="steg-insert" class="btn btn-primary T-I J-J5-Ji aoO T-I-atl L3" style="display: inline-block; max-width: 25%" tooltip="test">Encrypt!</button>
      <select style="display: inline-block;  width: 35%; max-width: 35%" id="steg-recipient-select"></select>
      <br>
      <img id="steg-image"/>
      <canvas id="steg-canvas" width=500 height=500></canvas>
    </div>
  </form>


</div>