about.html

<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title>Hypervault</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="shortcut icon" href="/favicon.png">
  <style>
.jslghtbx-ie8.jslghtbx{background-image:url(img/trans-bck.png);display:none}.jslghtbx-ie8.jslghtbx.jslghtbx-active{display:block}.jslghtbx-ie8.jslghtbx .jslghtbx-contentwrapper>img{-ms-filter:"alpha(Opacity=0)";display:block}.jslghtbx-ie8.jslghtbx .jslghtbx-contentwrapper.jslghtbx-wrapper-active>img{-ms-filter:"alpha(Opacity=100)"}.jslghtbx{font-family:sans-serif;overflow:auto;visibility:hidden;position:fixed;z-index:2;left:0;top:0;width:100%;height:100%;background-color:transparent}.jslghtbx.jslghtbx-active{visibility:visible;background-color:rgba(0,0,0,.85)}.jslghtbx-loading-animation{margin-top:-60px;margin-left:-60px;width:120px;height:120px;top:50%;left:50%;display:none;position:absolute;z-index:-1}.jslghtbx-loading-animation>span{display:inline-block;width:20px;height:20px;border-radius:20px;margin:5px;background-color:#fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out}.jslghtbx-loading-animation>span.jslghtbx-active{margin-bottom:60px}.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation{display:block}.jslghtbx-nooverflow{overflow:hidden!important}.jslghtbx-contentwrapper{margin:auto;visibility:hidden}.jslghtbx-contentwrapper>img{background:#fff;padding:.5em;display:none;height:auto;margin-left:auto;margin-right:auto;opacity:0}.jslghtbx-contentwrapper.jslghtbx-wrapper-active{visibility:visible}.jslghtbx-contentwrapper.jslghtbx-wrapper-active>img{display:block;opacity:1}.jslghtbx-caption{display:none;margin:5px auto;max-width:450px;color:#fff;text-align:center;font-size:.9em}.jslghtbx-active .jslghtbx-caption{display:block}.jslghtbx-contentwrapper.jslghtbx-animate>img{opacity:0}.jslghtbx-contentwrapper>img.jslghtbx-animate-transition{-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;-ms-transition:opacity .2s ease-in-out}.jslghtbx-contentwrapper>img.jslghtbx-animate-init,.jslghtbx-contentwrapper>img.jslghtbx-animating-next,.jslghtbx-contentwrapper>img.jslghtbx-animating-prev{opacity:1;-ms-filter:"alpha(Opacity=100)"}.jslghtbx-contentwrapper>img.jslghtbx-animate-transition{cursor:pointer}.jslghtbx-close{position:fixed;right:23px;top:23px;margin-top:-4px;font-size:2em;color:#FFF;cursor:pointer;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out}.jslghtbx-close:hover{text-shadow:0 0 10px #fff}@media screen and (max-width:1060px){.jslghtbx-close{font-size:1.5em}}.jslghtbx-next,.jslghtbx-prev{display:none;position:fixed;top:50%;max-width:6%;max-height:250px;cursor:pointer;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out}.jslghtbx-next.jslghtbx-active,.jslghtbx-prev.jslghtbx-active{display:block}.jslghtbx-next>img,.jslghtbx-prev>img{width:100%}.jslghtbx-next{right:.6em}.jslghtbx-next.jslghtbx-no-img:hover{border-left-color:#787878}@media screen and (min-width:451px){.jslghtbx-next{right:.6em}.jslghtbx-next.jslghtbx-no-img{border-top:110px solid transparent;border-bottom:110px solid transparent;border-left:40px solid #FFF}}@media screen and (max-width:600px){.jslghtbx-next.jslghtbx-no-img{right:5px;padding-left:0;border-top:60px solid transparent;border-bottom:60px solid transparent;border-left:15px solid #FFF}}@media screen and (max-width:450px){.jslghtbx-next{right:.2em;padding-left:20px}}.jslghtbx-prev{left:.6em}.jslghtbx-prev.jslghtbx-no-img:hover{border-right-color:#787878}@media screen and (min-width:451px){.jslghtbx-prev{left:.6em}.jslghtbx-prev.jslghtbx-no-img{border-top:110px solid transparent;border-bottom:110px solid transparent;border-right:40px solid #FFF}}@media screen and (max-width:600px){.jslghtbx-prev.jslghtbx-no-img{left:5px;padding-right:0;border-top:60px solid transparent;border-bottom:60px solid transparent;border-right:15px solid #FFF}}@media screen and (max-width:450px){.jslghtbx-prev{left:.2em;padding-right:20px}}.jslghtbx-thmb{padding:2px;max-width:100%;max-height:140px;cursor:pointer;box-shadow:0 0 3px 0 #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out}@media screen and (min-width:451px){.jslghtbx-thmb{margin:1em}}@media screen and (max-width:450px){.jslghtbx-thmb{margin:1em 0}}.jslghtbx-thmb:hover{box-shadow:0 0 14px 0 #000}
</style>

  <style>
body,input,select,textarea{background:0;border-radius:0;font:16px sans-serif;margin:0}.addon,.btn-sm,.nav,input,select,textarea{outline:0;font-size:14px}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}.btn,h2{font-size:2em}.row{margin:1% 0;overflow:auto}.col,.col-no-collapse{float:left}.c12,.table{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}
</style>

  <style>
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#333}.decryption-container,.encryption-container{display:none}.link-button{background:none!important;border:none;padding:0!important;cursor:pointer;text-decoration:none;color:#FF4136;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.file-size{padding-top:10px}.delete-x{font-size:1em;margin-top:12px}.download-file{font-size:1em;margin-top:10px}A{text-decoration:none}.browsehappy{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.title{font-family:Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:300%;font-weight:lighter;letter-spacing:4px;color:#FF4136}.redText{color:#FF4136;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.thinRed{color:#FF4136;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:100}.orangeText{color:#FF851B;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.title a{color:#FF4136}.intro-text{color:#FF851B;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:100;margin-top:40px}.choose-password-msg{color:#FF4136;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:100;font-size:1.3em}.select-files-msg{color:#FF4136;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:100;font-size:1.3em;text-align:center}.outer{padding:80px}.container{padding:0 30px 50px;margin-left:auto;margin-right:auto;max-width:750px;border:1px solid #FF851B;border-radius:12px}@media (max-width:870px){.outer{padding:25px}}.btn{border-radius:4px;color:#FF4136;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:100;background:#fff;font-size:1.8em;border:1px solid #FF4136;text-decoration:none}.floatLeft{float:left}.btn:hover{background:#fff;color:#FF851B;border:1px solid #FF851B;text-decoration:none}input[type=password],input[type=text]{border:1px solid #FF4136;border-radius:4px;padding:8px;font-size:20px;width:202px}#decrypt-button,#encrypt-button,.full-width{width:100%}#decrypt-password-input{width:220px}.control-container{text-align:center}.control-group{width:220px;margin:auto}@media (max-width:870px){.control-field,.control-group{width:100%}input[type=password]{width:99%;padding:8px 2px}}@media (max-width:650px){input[type=password]{width:98%;padding:8px 2px}}.control-field{margin-top:4px}.horizontal-space{margin-top:16px}input[type=file]{border-radius:4px;height:25px;padding:5px;font-size:14px;width:220px}#dropzone{min-height:130px;border:4px dashed #FF851B;border-radius:4px;padding:10px}#dropzone.hover{border:4px dashed #39CCCC}#selectFilesButton{vertical-align:middle;margin-top:5px}#dragAndDropHere{font-size:1.3em;text-align:center}#drag-msg-and-browse-button{margin-top:5px;text-align:center}#drag-files-here-msg{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:100;font-size:1.7em;color:#FF4136}#or-browse-msg{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:100;font-size:1.2em;color:#FF4136;margin:8px 0}.fileDisplay{border:1px solid #FF4136;border-radius:4px;padding:8px 5px}.fileDisplay span{color:#FF4136;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200}#decrypted-files{min-height:130px;border:1px solid #FF851B;border-radius:4px;padding:10px;display:none}#decrypt-helper-message{padding:4px;font-size:1.2em}#decrypt-progress-summary,#encrypt-progress-summary{text-align:left}#decrypt-progress-summary li,#encrypt-progress-summary li{color:#FF4136;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:100}.validation-error{display:none;color:#FF4136;font-size:.9em;text-align:left}.footer{margin-top:0;text-align:center;color:#AAA;font-size:.8em}.footer-container{width:155px;margin-left:auto;margin-right:auto;font-weight:200;margin-bottom:40px}.footer hr{border:0;border-bottom:1px dashed #ccc;background:#999;margin:2px}.footer a,.footer a:hover,.footer a:visited{color:#FF851B}.help-text{color:#888}.image-thumbnail{max-width:60px;height:46px;display:block;margin-left:auto;margin-right:auto}.modal-bg{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #FF851B;border-radius:12px;width:90%}.modal-close-button,.modal-viewer-close-button{color:#aaa;float:right;font-size:28px;font-weight:700;margin:0}.modal-button-panel{float:right}.modal-close-button:focus,.modal-close-button:hover,.modal-viewer-close-button:focus,.modal-viewer-close-button:hover{color:#000;text-decoration:none;cursor:pointer}#modal-editor-text,#modal-viewer-text{border:1px solid #FF4136;border-radius:4px;width:99%;min-height:100px;padding:8px;margin-right:20px;margin-top:5px;margin-bottom:5px}
</style>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<div class="outer">
  <div class="container">

    <div class="row">
      <div class="col c5">
        <h1 class="title"><a href="https://hypervault.github.io">Hypervault</a></h1>
      </div>

    </div>

    <div class="row">
      <div class="col c12 help-text">
        <h1>What is Hypervault?</h1>
        <ul>
          <li>Hypervault is a file encryption app meant to provide data-at-rest encryption.</li>
          <li>Hypervault is entirely contained in a single .html file. As such, you can save the Hypervault page, and you will have a complete working copy of Hypervault which you can run offline.</li>
          <li>Hypervault outputs another single .html file which contains both the encrypted file data, and a copy of itself.</li>
        </ul>

        <h1>What Hypervault is NOT?</h1>
        <ul>
          <li>Hypervault does NOT provide data-in-transit security. So if you want to transfer a Hypervault, make sure you transfer it over a secured mechanism (like SSL-encrypted email).</li>
        </ul>

        <h1>Supported browsers?</h1>
        <ul>
          <li>It seems to work in most modern desktop browsers</li>
          <li>iOS support is coming soon</li>
          <li>Android is not yet tested</li>
        </ul>

        <h1>How do I use Hypervault?</h1>
        <ol>
          <li>Drag files you want to encrypt into it</li>
          <li>Choose a password with which to lock the hypervault (encrypt the files).</li>
          <li>Click "Lock vault"</li>
          <li>A "locked hypervault" will download to your computer containing your encrypted file data. This can be stored
        </ol>

        <h1>What is a locked vault?</h1>
        <ul>
          <li>A locked vault is a self-contained HTML file which contains both a copy of the Hypervault software and your encrypted file data.</li>
          <li>You can simply open a locked vault in a browser and enter your password to decrypt and recover your files.</li>
        </ul>

        <h1>What's awesome about Hypervault?</h1>
        <ul>
          <li>Secure
            <ul>
              <li>Hypervault uses the <a href="https://github.com/keybase/triplesec">Triplesec</a> library, which uses 3 strong encryption algorithms (<a href="https://en.wikipedia.org/wiki/Advanced_Encryption_Standard">AES</a>, <a href="https://en.wikipedia.org/wiki/Salsa20">Salsa20</a>, and <a href="https://en.wikipedia.org/wiki/Blowfish_(cipher)">Blowfish</a>), so you can rest assured that your data is safe, even if a couple of the ciphers are compromised.</li>
              <li>Since Hypervault runs in a browser (which is sandboxed), you never have to worry that it doing anything nefarious on your computer.</li>
              <li>Zero-knowledge: Hypervault encryption is all client-side, so even if Hypervault's servers are compromised, your data is still safe.</li>
            </ul>
          </li>
          <li>Easy
            <ul>
              <li>No installations necessary, just run in the browser.</li>
            </ul>
          </li>
          <li>Offline
            <ul>
              <li>Since Hypervault is a self-contained HTML file, you save it to your desktop and run it offline.</li>
            </ul>
          </li>
          <li>Always usable
            <ul>
              <li>Since Hypervault packages itself with your encrypted data (in the form of a "locked_vault.html" file, you can always decrypt your data, even if Hypervault goes away.</li>
            </ul>
          </li>
        </ul>

      </div>
    </div>


  </div>

  </form>

</div>

<div class="footer">
  <div class="footer-container">
      <span>
        <a href="https://hypervault.github.io">Home</a> |
        <a href="https://github.com/hypervault/hypervault.github.io">Github</a> |
        <a href="https://hypervault.github.io/about.html">FAQ</a>
      </span>
    <hr />
    <span>Project by <a href="http://calebmadrigal.com">Caleb Madrigal</a></span>
  </div>
</div>

</div>

</body>
</html>