<div class="header-panel shadow-z-2 header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <h1 id="heading">
				<span>Protected Text</span>
				<div class="menu">
					<button class="btn btn-lg btn-success btn-save"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span><span class="glyphicon glyphicon-repeat fast-right-spinner"></span> Save</button>
					<button class="btn btn-lg btn-primary btn-change-password"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Change Password</button>
				</div></h1>
      </div>
    </div>
  </div>
</div>
<div id="notes">
  <div class="row">
    <div class="col-xs-12 inner-notes">
      <h3 class="headline">Easiest way to protect your notes online  <small>Try now</small></h3>
      <form class="form-inline form-note" autocomplete="on">
        <div class="form-group">
          <label class="sr-only">Notes</label>
          <p class="form-control-static">Go to your note:</p>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="noteName" placeholder="Note Name" required>
        </div>
        <button class="btn btn-lg btn-info getnote" type="submit"><span class="glyphicon glyphicon-send" aria-hidden="true"></span><span class="glyphicon glyphicon-repeat fast-right-spinner"></span> Go</button>
      </form>
      <form class="form-inline form-password">
        <div class="form-group">
          <p class="form-control-static">Enter Password:</p>
        </div>
        <div class="form-group">
          <input type="password" class="form-control" id="password" placeholder="Password" required>
        </div>
        <button class="btn btn-lg btn-info" type="submit"><i class="fa fa-key" aria-hidden="true"></i> Decrypt</button>
      </form>
      <form class="form-inline form-create-note">
        <div class="form-group">
          <p class="form-control-static">This note does not exists. Set password to own this note</p>
        </div>
        <br>
        <div class="form-group">
          <input type="password" class="form-control" id="create-password" placeholder="New Password" required>
        </div>
        <button class="btn btn-lg btn-info" type="submit"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Set Password</button>
      </form>
      <form class="form-inline form-add-tab">
        <div class="form-group" style="display: block !important; margin-bottom: 15px;">
          <input type="text" class="form-control" id="new-tab-name" placeholder="Tab Name" size=32 required>
        </div>
        <div class="form-group" style="display: block !important; margin-bottom: 15px;">
          <textarea id="new-tab-content" class="form-control" cols="30" rows="4" placeholder="Tab Content"></textarea>
        </div>
        <button class="btn btn-lg btn-info" type="submit"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add tab</button>
        <button class="btn btn-lg btn-warning btn-cancel-add-tab" type="submit"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> Cancel</button>
      </form>
      <form class="form form-inline form-change-password">
        <div class="form-group">
          <p class="form-control-static">Current Password</p>
          <input type="password" class="form-control" id="old-password" placeholder="Current Password" required>
        </div>
        <br>
        <div class="form-group">
          <p class="form-control-static">New Password</p>
          <input type="password" class="form-control" id="new-password" placeholder="New Password" required>
        </div>
        <br>
        <button class="btn btn-lg btn-info btn-change-password-submit" type="submit"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span><span class="glyphicon glyphicon-repeat fast-right-spinner"></span> Change Password</button>
        <button class="btn btn-lg btn-warning" type="button" id="btn-cancel-change-password"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> Cancel</button>
      </form>
    </div>
  </div>
  <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
      <a id="add_tab" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="#" role="button"><span class="ui-button-text"><span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"></span></span></a>
    </ul>
  </div>
</div>
<div id="snackbar"></div>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
.header-panel.header {
  background-color: #3F51B5;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14),
    0 1px 5px 0 rgba(0, 0, 0, .12),
    0 3px 1px -2px rgba(0, 0, 0, .2);
}

.menu {
  display: inline-block;
  float: right;
  position: relative;
}

.header-panel h1 {
  color: #FFF;
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 34px;
  font-weight: 400;
  padding-left: 22px;
}

.header-panel .bttn-group {
  font-size: 15px;
  padding: 15px 16px;
}

button {
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
}

button:focus {
  outline: none !important;
}

.btn {
  border-radius: 2px;
  border: 0;
  transition: .2s ease-out;
  color: #fff;
  margin: 6px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn:hover {
  color: #fff;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
    0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.btn:active, .btn:focus, .btn.active {
  outline: 0;
  color: #fff;
}
/*Primary*/

.btn-primary {
  background: #4285F4;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #5a95f5 !important;
}

.btn-primary.active {
  background-color: #0b51c5 !important;
}
/*Secondary*/

.btn-secondary {
  background-color: #aa66cc;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: #b579d2 !important;
  color: #fff;
}

.btn-secondary.active {
  background-color: #773399 !important;
}

.btn-secondary.active:hover {
  color: #fff;
}

.btn-secondary.active:focus {
  color: #fff;
}
/*Default*/

.btn-default {
  background: #2BBBAD;
}

.btn-default:hover, .btn-default:focus {
  background-color: #30cfc0 !important;
}

.btn-default.active {
  background-color: #186860 !important;
}
/*Success*/

.btn-success {
  background: #00C851;
}

.btn-success:hover, .btn-success:focus {
  background-color: #00d255 !important;
}

.btn-success.active {
  background-color: #006228 !important;
}
/*Info*/

.btn-info {
  background: #33b5e5;
}

.btn-info:hover, .btn-info:focus {
  background-color: #4abde8 !important;
}

.btn-info.active {
  background-color: #14799e !important;
}
/*Warning*/

.btn-warning {
  background: #FF8800;
}

.btn-warning:hover, .btn-warning:focus {
  background-color: #ff961f !important;
}

.btn-warning.active {
  background-color: #cc8800 !important;
}
/*Danger*/

.btn-danger {
  background: #CC0000;
}

.btn-danger:hover, .btn-danger:focus {
  background-color: #db0000 !important;
}

.btn-danger.active {
  background-color: maroon !important;
}
/*Link*/

.btn-link {
  background-color: transparent;
  color: #000;
}

.btn-link:hover, .btn-link:focus {
  background-color: transparent;
  color: #000;
}

h1, h2, h3, h4 {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
}

#dialog label, #dialog input {
  display: block;
}

#dialog label {
  margin-top: 0.5em;
}

#dialog input, #dialog textarea {
  width: 95%;
}

#notes {
  border: 1px solid #ccc;
  margin: 10px 20px;
  border-radius: 4px;
}

.inner-notes {
  padding: 20px 30px 30px 30px;
}

.form-note,
.form-password,
.form-create-note,
.form-add-tab,
.form-change-password {
  padding: 20px 0px;
}

p.form-control-static {
  padding: 10px 0px;
  font-size: 18px;
  line-height: 1.3333333;
  margin-right: 6px;
  font-weight: 500;
}

.note-input {
  /*min-width: 400px;*/
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  height: 44px;
}

#tabs {
  border: 0px solid #eee;
  border-radius: 0px;
}

#tabs li .ui-icon-close {
  float: left;
  margin: 0.4em 0.2em 0 0;
  cursor: pointer;
}

.ui-tabs {
  position: relative;
  padding: 0px;
}

#add_tab {
  cursor: pointer;
  margin-top: 4px;
}

#tabs li .ui-icon-close {
  float: left;
  margin: 2px 0px;
  cursor: pointer;
}

.ui-tabs .ui-tabs-nav {
  border-bottom: 0 solid #ddd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  background: #fefefe;
  padding: 2px 10px 5px;
  border-radius: 0px;
  list-style: none;
  box-sizing: border-box;
}

.ui-widget textarea {
  border-radius: 2px;
}

.ui-tabs .ui-tabs-panel {
  padding: 0px;
}

.ui-tabs .ui-tabs-nav li {
  border-radius: 3px;
  margin: 2px 5px;
  border-bottom-width: 1px;
  border: 0px;
  background: #C5CAE9;
  box-shadow: inset 0px -3px #9FA8DA;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  color: black;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
  outline: 0px;
  cursor: pointer;
  color: white;
}

.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
  cursor: pointer;
  outline: none;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  padding: 8px 8px;
  letter-spacing: 0.5px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
  margin-bottom: 0px;
  padding-bottom: 0px;
  box-shadow: inset 0px -3px #303F9F;
  background: #5C6BC0;
}

span.glyphicon {
  margin: 0px 4px;
  vertical-align: -1px;
}

.ui-widget-overlay {
  background: #000;
  opacity: .5;
  filter: Alpha(Opacity=50);
}

.ui-button:focus {
  outline: 0px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.form-control:focus {
  outline: 0;
  box-shadow: none;
}

.ui-widget textarea {
  min-height: 300px;
}

#dialog textarea {
  min-height: 150px;
}
/* The snackbar - position it at the bottom and in the middle of the screen */

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
li.ui-state-default {
  line-height: 1.5em;
  margin-top: 4px !important;
  
}

.ui-button-text {
  padding: 0.6em !important;
  line-height: 1em;
}

.form-password,
.form-create-note,
.form-change-password,
.form-add-tab,
#tabs,
.menu {
  display: none;
}

.btn-save, .getnote, .btn-change-password-submit {
  position: relative !important;
}

.btn-save .fast-right-spinner,
.getnote .fast-right-spinner,
.btn-change-password-submit .fast-right-spinner {
  display: none;
}

.loading > .glyphicon {
  display: none;
}

.loading > .fast-right-spinner {
  position: initial !important;
  display: inline-block;
}

.fast-right-spinner {
  animation: glyphicon-spin 1s infinite linear;
  -webkit-animation: glyphicon-spin 1s infinite linear;
  -moz-animation: glyphicon-spin 1s infinite linear;
}

@keyframes glyphicon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

#heading {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 95vw;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
input {
  margin: 0px 10px;
}

#heading > span {
  position: relative;
  line-height: 56px;
}

@media screen and (max-width: 700px) {
  .menu {
    float: left;
  }
}

#new-tab-name, #new-tab-content  {
  margin-left: 6px;
  width: 100%;
  min-width: 175px;
  max-width: 500px;
}
$(function() {
  var cryptojs = new Crypt(),
    backbenchURL = "https://mybench-cryptonotes.backbench.io/",
    noteName,
    password,
    ciphertext,
    plaintext,
    notesForm = $(".form-note"),
    passwordForm = $(".form-password"),
    createNoteForm = $(".form-create-note"),
    changePasswordForm = $(".form-change-password"),
    newTabForm = $(".form-add-tab"),
    menu = $(".menu"),
    $tabs = null,
    snackbar = $("#snackbar");

  $tabs = $("#tabs").tabs({
    tabTemplate:
      "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>"
  });

  notesForm.submit(function(event) {
    event.preventDefault();
    noteName = $("#noteName").val();
    $(".getnote").addClass("loading");
    getData(noteName);
  });

  passwordForm.submit(function(event) {
    event.preventDefault();
    password = $("#password").val();
    plaintext = cryptojs.AES.decrypt(ciphertext, password);
    if (plaintext) {
      setTabData(plaintext);
      menu.css("display", "inline-block");
      $("#tabs").show();
      document.title = noteName;
      $("#password").val("");
      $(this).hide();
    } else {
      showSnackbar("Wrong Password");
    }
  });

  createNoteForm.submit(function(event) {
    event.preventDefault();
    password = $("#create-password").val();
    $("#create-password").val("");
    if (password.length >= 4 && password != null) {
      $(this).hide();
      $("#tabs").show();
      menu.css("display", "inline-block");
    } else showSnackbar("Password must be at least 4 characters long");
  });

  changePasswordForm.submit(function(event) {
    event.preventDefault();
    let old_password = $("#old-password").val();
    $(".btn-change-password-submit").addClass("loading");
    returnOldData(noteName, function(err, old_data) {
      if (err) {
        if (password == old_password) {
          plaintext = getTabData();
          password = $("#new-password").val();
          postSave(plaintext, function() {
            showSnackbar("Password changed successfully");
            changePasswordForm.trigger("reset");
            $("#btn-cancel-change-password").click();
            $(".btn-change-password-submit").removeClass("loading");
          });
        } else {
          showSnackbar("Incorrect password entered");
          $(".btn-change-password-submit").removeClass("loading");
        }
      } else if (cryptojs.AES.decrypt(old_data, old_password)) {
        password = $("#new-password").val();
        if (password.length >= 4 && password != null) {
          plaintext = getTabData();
          postSave(plaintext, function() {
            showSnackbar("Password successfully changed");
            $(".btn-change-password-submit").removeClass("loading");
            changePasswordForm.hide();
            menu.css("display", "inline-block");
            $("#tabs").show();
            $("#new-password").val("");
            $("#old-password").val("");
          });
        } else {
          showSnackbar("Password must be at least 4 characters long");
          $(".btn-change-password-submit").removeClass("loading");
        }
      } else {
        showSnackbar("Wrong Password");
        $(".btn-change-password-submit").removeClass("loading");
      }
    });
  });

  $("#add_tab").click(function(event) {
    event.preventDefault();
    newTabForm.show();
    $("#new-tab-name").focus();
  });

  newTabForm.submit(function(event) {
    event.preventDefault();
    createTab($("#new-tab-name").val(), $("#new-tab-content").val());
    $(this).trigger("reset");
    $(this).hide();
  });

  $("#tabs span.ui-icon-close").live("click", function() {
    var index = $("li", $tabs).index($(this).parent());
    $tabs.tabs("remove", index);
  });

  $(".btn-save").click(function(e) {
    if (noteName) {
      plaintext = getTabData();
      $(this).addClass("loading");
      postSave(plaintext, function() {
        showSnackbar("Note saved successfully");
        $(".btn-save").removeClass("loading");
      });
    } else {
      notesForm.show();
      $("#noteName").focus();
    }
  });

  $(".btn-change-password").click(function(e) {
    if (noteName) {
      $("#tabs").hide();
      changePasswordForm.show();
      $("#old-password").focus();
    } else {
      notesForm.show();
      $("#tabs").hide();
      $("#noteName").focus();
    }
  });

  $("#btn-cancel-change-password").click(function(e) {
    changePasswordForm.hide();
    $("#tabs").show();
  });

  $(".btn-cancel-add-tab").click(function(e) {
    newTabForm.hide();
    newTabForm.trigger("reset");
  });

  function getData(noteName) {
    $.ajax({
      url: backbenchURL + noteName,
      type: "GET",
      statusCode: {
        200: processCipher,
        404: makeNewNote,
        409: handle409
      },
      complete: function() {
        $(".getnote").removeClass("loading");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        if (jqXHR.status != 404) showSnackbar("Problem retrieving data");
      }
    });
  }

  function returnOldData(noteName, callback) {
    $.ajax({
      url: backbenchURL + noteName,
      type: "GET",
      success: function(data) {
        callback(null, data);
      },
      error: function(err) {
        callback(err, null);
      }
    });
  }

  function postSave(plaintext, callback) {
    ciphertext = cryptojs.AES.encrypt(JSON.stringify(plaintext), password);
    $.ajax({
      url: backbenchURL + noteName,
      type: "POST",
      data: {
        data: ciphertext
      },
      statusCode: {
        201: callback,
        409: handle409
      },
      error: function() {
        $(".btn-save").removeClass("loading");
        showSnackbar("Problem saving note");
      }
    });
  }

  function processCipher(data, textStatus, jqXHR) {
    notesForm.hide();
    ciphertext = data;
    passwordForm.show();
    $("#password").focus();
  }

  function makeNewNote(jqXHR, textStatus, errorThrown) {
    notesForm.hide();
    createNoteForm.show();
    $("#create-password").focus();
  }

  function handle409(jqXHR, textStatus, errorThrown) {
    showSnackbar("Invalid Request!");
  }

  function getTabData() {
    var tabNames = [];
    var tabContent = [];
    var tabData = [];

    $("#tabs .ui-state-default a").each(function(index) {
      tabNames.push($(this).text());
    });

    $("#tabs .ui-tabs-panel textarea").each(function(index) {
      tabContent.push($(this).val());
    });

    for (var i = 0; i < tabNames.length; i++) {
      var data = {
        tabname: tabNames[i],
        tabcontent: tabContent[i]
      };
      tabData.push(data);
    }
    return tabData;
  }

  function setTabData(plaintext) {
    let jsonData = JSON.parse(plaintext);
    for (let i of jsonData) {
      createTab(i["tabname"], i["tabcontent"]);
    }
  }

  function tabTitleTemplate(tabNumber, tabTitle) {
    return (
      "<li class='ui-state-default ui-corner-top'><a href=#tabs-" +
      tabNumber +
      ">" +
      tabTitle +
      "</a><span class='ui-icon ui-icon-close'>Remove Tab</span></li>"
    );
  }

  function tabContentTemplate(tabNumber, tabContent) {
    return (
      "<div id='tabs-" +
      tabNumber +
      "' class='ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide'><textarea class='form-control'>" +
      tabContent +
      "</textarea></div>"
    );
  }

  function createTab(title, body) {
    let num_tabs = $("div#tabs ul li").length + 1;
    let title_template = tabTitleTemplate(num_tabs, title);
    let content_template = tabContentTemplate(num_tabs, body);
    $("div#tabs ul").append(tabTitleTemplate(num_tabs, title));
    $("div#tabs").append(content_template);
    $("#tabs").tabs("refresh");
    $("#tabs").tabs("option", "active", -1);
  }

  function showSnackbar(message) {
    snackbar.text(message);
    snackbar.addClass("show");
    setTimeout(function() {
      snackbar.removeClass("show");
    }, 3000);
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css
  3. https://code.getmdl.io/1.3.0/material.indigo-pink.min.css
  4. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. http://code.jquery.com/jquery-1.5.2.js
  2. http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js
  3. https://code.getmdl.io/1.3.0/material.min.js
  4. https://codepen.io/backbench/pen/OgvEZz.js