/
index-en.html
109 lines (105 loc) · 5.17 KB
/
index-en.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
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>☆゚.*・。゚ ☆゚.*・。゚</title>
<link rel="stylesheet" href="css/style.css">
<meta property="og:title" content="steganography playground for images">
<meta property="og:image" content="https://steganography.solquemal.com/demo.gif">
<link rel="image_src" href="/demo.gif">
<meta name="description" content="Interactive playground for hiding and decoding messages within your images.This implementation runs on the GPU enabling real-time editing.">
<meta property="og:description" content="Interactive playground for hiding and decoding messages within your images.This implementation runs on the GPU enabling real-time editing.">
<meta name="author" content="solsarratea">
<!--Twitter config-->
<meta name="twitter:title" content="steganography playground for images">
<meta name="twitter:description" content="Interactive playground for hiding and decoding messages within your images.This implementation runs on the GPU enabling real-time editing.">
<meta name="twitter:image" content="https://steganography.solquemal.com/demo.gif">
<meta name="twitter:card" content="summary_large_image">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/libs/fileSaver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js" integrity="sha512-yNJzAsg5JyP91u+sLHlUDULMBd3hmEiVkYeeN1cQBKaLZ7EyT6oH2u5THNIRM2Fu6VKcZJv+F/QAp1h/qzy9Ow==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<a id="info" class="info" >
<span class="fab fas fa-info-circle"></span>
<span class="text">About</span>
</a>
<a id="screenshot" class="info" >
<span class="fab fas fa-camera-retro fa-2x"></span>
<span class="text">Save image</span>
</a>
<a id="btn" class="info">
<span class="fab fas fa-plus-circle "></span>
<span class="text">Add visible image</span>
</a>
<a id="btn2" class="info" style="color: #585858;">
<span class="fab fas fa-plus-circle "></span>
<span class="text">Add image to be hidden</span>
</a>
<div id="addSourceImage" class="modal">
<div class="modal-header">
<p>Visible Image</p>
<span class="close">×
</span>
</div>
<div class="modal-content">
<form enctype="multipart/form-data">
<input class="button" id="uploadSource" type="file"/>
<label for="uploadSource">Upload image that will be visible</label>
</form>
</div>
</div>
<div id="addHiddenImage" class="modal">
<div class="modal-header">
<p>Hidden Image</p>
<span class="close">×
</span>
</div>
<div class="modal-content">
<form enctype="multipart/form-data">
<input class="button" id="uploadHidden" type="file"/>
<label for="uploadHidden">Upload image that will be hidden </label>
</form>
</div>
</div>
<div id="showInfo" class="modal">
<div class="modal-header">
<p>Steganography Playground</p>
<span class="close">×
</span>
</div>
<div class="modal-content">
<form enctype="multipart/form-data">
<p> This tool was created for the <a href="https://hyperlink.academy/courses/digital-alchemy/89">Digital Alchemy Course</a>.
It uses the <a href="https://wiki.bi0s.in/forensics/lsb/">LSB Encoding </a> Algorithm for hidding one image into another.</p>
<p>This implementation runs on the GPU enabling real-time editing. See how much bits do you choose for hiding information, and what happens if you decide to shift them.</p>
<p><a href="/decode">G0 HERE </a> for decoding an image with hidden message. </p>
</form>
</div>
</div>
<a href="https://github.com/solsarratea/steganography" class="info"
title="View source on Github" target="_blank">
<span class="fab fa-github"></span>
<span class="text">View source</span>
</a>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="info" id="tweetB" target="_blank">
<i class="fab fa-twitter"></i>
<span class="text">Share</span>
</a>
<a href='https://ko-fi.com/Q5Q62LLVG' class="info" target="_blank">
<span class="fab fa-gratipay"></span>
<span class="text">Support </span>
</a>
<!-- <a href="https://forms.gle/bA6HMw27b2w5LyXW8" class="info" target="_blank"> -->
<!-- <span class="fas fa-comment-dots "></span> -->
<!-- <span class="text">Send feedback!</span> -->
<!-- </a> -->
<canvas id="canvas"></canvas>
<script src="js/sceneSubjects/Shader.js"></script>
<script src="js/SceneManager.js"></script>
<script src="js/main.js"></script>
</body>
</html>