-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (120 loc) · 6.32 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
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Steganography</title>
<meta name='viewport'
content='width=device-width, initial-scale=1, maximum-scale=1'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css' type='text/css' rel='stylesheet'></link>
<script src='sjcl.min.js' type='text/javascript'></script>
<script src='main.js' type='text/javascript'></script>
</head>
<body>
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
<nav class="level">
<p class="level-item has-text-centered">
<img src="my_logo.png" alt="" style="height: 100px;">
</p>
</nav>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child notification is-primary">
<p class="title">Image Steganography</p>
<p class="subtitle"> A steganography tool built for data hiding in images.<br/></p>
<p class="subtitle">See <a href='about.html'>How it works</a>.</p>
</article>
<article class="tile is-child notification is-warning">
<p class="title">Encode</p>
<div class="field">
<div class="control">
<input type='password' id='password' class="input is-primary" type="text" placeholder="Password">
</div>
<p class="help is-info">Optional</p>
</div>
<div class="field">
<div class="control">
<textarea id='message' class="textarea is-focused" placeholder="Enter Message"></textarea>
</div><br/>
<div class="control">
<button id='encode' class='button is-link'>Hide message</button>
</div>
</div>
</article>
</div>
<div id='main' class="tile is-parent">
<article class="tile is-child notification is-info">
<p class="title">Upload Image To Encode/Decode</p>
<p class="subtitle">Choose an image</p>
<div class="field">
<div id='main' class="file is-right is-primary">
<label class="file-label">
<input id='file' class="file-input" type='file'>
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Select file…
</span>
</span>
<span class="file-name">
Upload Image Here ------->
</span>
</label>
</div>
<figure class="image is-4by3">
<img id='preview'/>
</figure>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">What is Steganography?</p>
<p class="subtitle">Steganography is the practice of concealing a file, message, image, or video within another file, message, image, or video. The word steganography combines the Greek words steganos (στεγανός), meaning "covered, concealed, or protected", and graphein (γράφειν) meaning "writing". .The advantage of steganography over cryptography alone is that the intended secret message does not attract attention to itself as an object of scrutiny. Plainly visible encrypted messages, no matter how unbreakable they are, arouse interest and may in themselves be incriminating in countries in which encryption is illegal</p>
<div class="content">
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title">Decode Message</p>
<p class="subtitle">Enter Password</p>
<div class="content">
<input type='password' id='password2' class='input is-info'
placeholder='Password' />
</div>
<button id='decode' class='button is-info'>Reveal message</button>
<!-- Content -->
</div>
<div id='choose' class='section dark hide'>
<div class='sectionbody'>
</div>
</div>
<div id='reveal' class='section dark hide'>
<div class='title'>Hidden message</div>
<div id='messageDecoded' class='subtitle'></div>
</div>
</article>
</div>
</div>
<p class="title">Encoded Image</p>
<canvas id='canvas' class="canvas"></canvas>
</div>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Steganography </strong> by <a href="https://github.comppranitps20">Olive Street Boys</a>.
</p>
</div>
</footer>
</body>
</html>