-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (60 loc) · 3.26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="steggie.ico">
<title>Steggie - Steganography Calculator</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover">
<div class="cover-heading">
<h1><img src="steggie.ico" alt="logo" />STEGGIE</h1>
</div>
<div class="alert alert-info">
<strong>Hey there!</strong> Type your message into the textbox below (max 511 chars). Select an image from your computer and press 'ENCRYPT' to hide your message. You can then save the altered image by using the download button. To extract a message from an image, upload it and use the 'DECRYPT' button. Your hidden message will be displayed in the same textbox below!
</div>
<div class="alert alert-danger" id="textError" style="display:none">
<strong>Error!</strong> Please restrict message to allowed characters, ensure an image is uploaded prior to encrypting, and make sure your image is large enough to accommodate the message.
</div>
<div class="alert alert-success" id="textSuccess" style="display:none">
<strong>Success!</strong> Your message has been encrypted.
</div>
<p class="lead">
<button id="encryptbtn" type="button" class="btn btn-primary btn-sm">ENCRYPT</button>
<button id="decryptbtn" type="button" class="btn btn-primary btn-sm">DECRYPT</button>
<button type="button" id="helpBtn" class="btn btn-default btn-sm" title="Not working?" data-toggle="popover" data-trigger="focus" data-content="This encryption method currently only works with JPG images. Make sure no compression is applied to the image after it has been encrypted, as the message may be lost.">
<span class="glyphicon glyphicon-question-sign"></span> Issues
</button>
</p>
<p class="lead"><textarea style="resize:none" rows="8" cols="60" id="message" maxlength="511" pattern="/^[ A-Za-z0-9()/"></textarea></p>
<p class="lead">
<label class="btn btn-lg btn-primary">
SELECT IMAGE <input type="file" style="display: none;" accept="image/jpeg">
</label>
<a href="#" class="btn btn-secondary btn-lg" id="downloadbtn" download="steggie-pic.jpg">
<span class="glyphicon glyphicon-download-alt"></span>
</a>
</p>
<canvas id="canvas"></canvas>
</div>
<div class="mastfoot">
<div class="inner">
<p>Steganography calculator, by Karolien Koorts</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</body>
</html>