Ghost Messages

Ghost Messages.markdown

Ghost Messages

Steganography for modern magicians. Built by the NuChwezi adept, Nemesis Fixx.

A Pen by Nemesis Fixx on CodePen.

License.

index.html

<div class="content center vertical-center">
  <div class="col-sm-offset-1 col-sm-10">

       <div id="envelope-status" class="status"></div>
       <textarea class="form-control" placeholder="Message for the Uninitiated" id="envelope"></textarea>

  </div>
</div>

script.js

function word_count(s) {
  s = s.replace(/\s\s+/g, ' '); //exclude  any whitespace with single space
  s = s.replace(/[ ]{2,}/gi, " "); //2 or more space to 1
  s = s.replace(/\n /, "\n"); // exclude newline with a start spacing
  return s.split(' ').filter(function(_in) {
    return _in != "";
  }).length;
}

function get_senteces(s) {
  return s.split(/[.\?]/)
}

function decode_envelope(s) {
  var r_non_word = new RegExp("^[.\?]*$");
  return get_senteces(s.trim()).filter(function(_s) {
    return !r_non_word.test(_s);
  }).map(function(_s) {
    return word_count(_s);
  });
}

function kabala_decode_1(a) {
  var alphabet = " abcdefghijklmnopqrstuvwxyz1234567890".split('');
  var decoded = [];
  for (var l = 0; l < a.length; l++)
    decoded[l] = alphabet[(Number(a[l])-1)%alphabet.length];

  return decoded;
}

$(document).ready(function() {

  $('#envelope').keyup(function() {
    var _in = $(this).val();
    var coded = decode_envelope(_in);
    var decoded = kabala_decode_1(coded);
    $('#envelope-status').html("<div class='code'>" + decode_envelope(_in).join(":") + " </div>  | Occult Message for the Initiated: <div class='ghost'>" + decoded.join("") + "</div>");
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background-image: url(http://blog.thornyeternity.com/wp-content/uploads/2012/05/tile-arabesques-dark-preview.jpg);
}

.content {
  margin: 10px;
}

.status {
  color: white;
  font-size: 18px;
}

.ghost {
  color: cyan;
  display:inline;
}

.code {
  color: yellow;
  display:inline;
}

#envelope{
  height:400px;
}

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />