redid encode ui

This commit is contained in:
Kevin Froman 2021-02-11 22:58:54 +00:00
parent 0bc9b831d3
commit 7110f986c0
2 changed files with 62 additions and 82 deletions

View File

@ -1,90 +1,23 @@
<!DOCTYPE HTML> <!doctype html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset="UTF-8">
<!-- Snow10 - Whitespace steganography. electronic invisible ink. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Copyright (C) 2017 Kevin Froman https://ChaosWebs.net/ <link rel="stylesheet" href="theme.css">
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name='description' content="Perform Whitespace steganography with encryption and zero width characters">
<meta name='author' content='Kevin Froman'>
<title>Snow10</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap-theme.min.css">
<link rel="stylesheet" href="./font-awesome.min.css">
<link rel='stylesheet' href='./theme.css'>
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
<script src="./clipboard.min.js"></script>
<script src="./jquery.bootstrap-growl.min.js"></script>
<script src='./aes.min.js'></script>
</head> </head>
<body> <body>
<a href="https://github.com/beardog108/snow10/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a> <div class="container main">
<div class="modal" id="outputModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <h1>Snow10 ☃</h1>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title center" id="myModalLabel">Your Text Is Ready!</h4>
</div>
<div class="modal-body">
<br>
<pre id='output'></pre>
<div class='center'><button class="btn btn-success" data-clipboard-action="copy" data-clipboard-target="#output">Copy to Clipboard</button></div>
<div id='copyFeedback' class='center'></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id='modalClose'>Close</button>
</div>
</div>
</div>
</div>
<div class='container'> <form class="encode">
<label for="hideText">Non-secret message: <input type="text" name="hideText"></label>
<div class='page-header'>
<h1 class='center'>Snow10 ☃</h1>
</div>
<p>Snow10 is a simple web app for converting text to whitespace characters, which can be hidden in normal messages.</p>
<p>It is inspired by the <a href='http://darkside.com.au/snow/'>original program</a> published in 1998.</p>
<div id='dataArea'>
<textarea id='text' placeholder=''></textarea>
</div>
<div class='center'><button class='btn btn-sm btn-default dataItem' id='clearInputButton'>Clear Input <i class='fa fa-cross'></i></button></div>
<br><br>
<div class='center'>
<label>Use Zero-Width Characters <input type='checkbox' id='useZeroWidthCharacters' checked></label>
<br><br>
<label>Use Encryption <input type='checkbox' id='useEncrypt'></label>
<br><br>
<span id='encryptArea'>
<input type='password' id='password' placeholder='Encryption password' class='dataItem'>
<br> <br>
<input type='password' id='confirmPass' placeholder='Confirm password' class='dataItem'> <h1>Secret message</h1>
<br> <textarea name="input" required></textarea>
</span> <h1>Output</h1>
<div class="btn-group" role="group" aria-label="..." id='encodeDecodeArea'> <textarea name="output" readonly></textarea>
<button type="button" class="btn btn-primary" id="encode">Encode <i class='fa fa-lock'></i></button> <input type="button" value="Hide - Unhide">
<button type="button" class="btn btn-primary" id="decode">Decode <i class='fa fa-unlock'></i></button> </form>
</div> </div>
<br>
</div>
</div>
<footer class='center'>made with <i class='fa fa-heart'></i> by <a href='https://www.chaoswebs.net/'>Kevin Froman</a></footer>
<script src='./main.js'></script>
</body> </body>
</html> </html>

View File

@ -15,3 +15,50 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
h1, p, label{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
textarea{
width: 35%;
height: 10em;
}
input[type="button"]{
display: block;
margin-top: 2em;
}
@media only screen and (max-width: 1000px) {
textarea{
width: 75%;
}
}
input[type="button"] {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
background-color:#768d87;
border-radius:5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
}
input[type="button"]:hover {
background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
background-color:#6c7c7c;
}
input[type="button"]:active {
position:relative;
top:1px;
}