-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
147 lines (133 loc) · 5.96 KB
/
index.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE htm>
<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>Stegify</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik+Iso&family=Tilt+Prism&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="src/bootstrap.min.css"
/>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1>Stegify</h1>
</div>
<div class="nav-elements">
<ul class="nav nav-pills" id="tabs" data-tabs="tabs">
<li role="presentation" class="nav-item active">
<a href="#encode" class="nav-link" data-toggle="tab">Encode</a>
</li>
<li role="presentation" class="nav-item">
<a href="#decode" class="nav-link" data-toggle="tab">Decode</a>
</li>
<li role="presentation" class="nav-item">
<a href="#about" class="nav-link" data-toggle="tab">About</a>
</li>
</ul>
</div>
<div id="my-tab-content" class="container tab-content">
<div class="tab-pane active" id="encode">
<div>
<h2>Encode Message</h2>
<form class="form">
<div class="form-group">
<input class="form-control" type="file" name="baseFile" onchange="previewEncodeImage()" />
</div>
<div class="form-group">
<textarea class="form-control message" rows="8" placeholder="Enter your message here"></textarea>
</div>
<div class="form-group" id="encode-button">
<button class="encode btn btn-default pull-right" onclick="encodeMessage()">
Encode
</button>
</div>
</form>
<div class="clearfix"></div>
</div>
<div class="error" style="display: none"></div>
<div class="binary" style="display: none">
<h3>Binary representation of your message</h3>
<textarea class="form-control message" style="word-wrap: break-word">
</textarea>
</div>
<div class="images" style="display: none">
<div class="original" style="display: none">
<h3>Original</h3>
<canvas></canvas>
</div>
<div class="nulled" style="display: none">
<h3>Normalized</h3>
<canvas></canvas>
</div>
<div class="message" style="display: none">
<h3>
Encoded Image
</h3>
<canvas></canvas>
</div>
<button id="downloadButton" class="hiddenDownloadButton">Download Image</button>
</div>
</div>
<div class="tab-pane" id="decode">
<div>
<h2>Decode Image</h2>
<p class="alert alert-info">
Choose the image from which you want to decode the message.
</p>
<form class="form">
<div class="form-group">
<input class="form-control" type="file" name="decodeFile" onchange="previewDecodeImage()" />
</div>
<div class="form-group">
<button class="decode btn btn-default pull-right" onclick="decodeMessage()">
Decode
</button>
</div>
</form>
<div class="clearfix"></div>
</div>
<div class="binary-decode" style="display: none">
<h3>Hidden message</h3>
<textarea class="form-control message" style="word-wrap: break-word">
</textarea>
</div>
<div class="decode" style="display: none">
<h3>Image</h3>
<canvas></canvas>
</div>
</div>
<div class="tab-pane" id="about">
<div class="text">
<h2> Steganography</h2>
<p class="alert alert-info">
Steganography is the practice of concealing a secret message within an ordinary message or file, without anyone else being aware that there is a hidden message. The goal of steganography is to hide the existence of the message, so that it can be transmitted undetected. Unlike cryptography, which relies on encryption to make a message unreadable to anyone who doesn't have the key, steganography does not alter the message in any way. Instead, it hides the message within the data of another file, such as an image or audio file, by subtly changing certain bits of information. Steganography can be used for a variety of purposes, from covert communication to digital watermarking, and has been used throughout history in various forms.
</p>
<h2> To Encode</h2>
<p class="alert alert-info">
• To encode a message into an image, choose the image you want to
use, enter your text and hit the <strong>Encode</strong> button.<br />
• Keep in mind that the image needs to be larger the more text you wish to conceal. You will be
alerted if the image you selected is too small to convey your message.<br />
• Both the image and the message you conceal won't ever be sent over the internet.
</p>
<h2> To Decode</h2>
<p class="alert alert-info">
• To decode a hidden message from an image, just choose an image and
hit the <strong>Decode</strong> button.<br />
• Both the image and the message you conceal won't ever be sent over the internet.
</p>
</div>
</div>
</div>
</div>
<script src="src/jquery.min.js"></script>
<script src="src/bootstrap.min.js"></script>
<script type="text/JavaScript" src="src/script.js"></script>
</body>
</html>