JSFiddle - React, Tailwind, and code Playground

File Encryption App with JavaScript http://tutorialzine.com/2013/11/javascript-file-encrypter/

by Jennifer Perrin

HTML

<a class="back"></a>

		<div id="stage">

			<div id="step1">
				<div class="content">
					<h1>What do you want to do?</h1>
					<a class="button encrypt green">Encrypt a file</a>
					<a class="button decrypt magenta">Decrypt a file</a>
				</div>
			</div>

			<div id="step2">

				<div class="content if-encrypt">
					<h1>Choose which file to encrypt</h1>
					<h2>An encrypted copy of the file will be generated. No data is sent to our server.</h2>
					<a class="button browse blue">Browse</a>

					<input type="file" id="encrypt-input" />
				</div>

				<div class="content if-decrypt">
					<h1>Choose which file to decrypt</h1>
					<h2>Only files encrypted by this tool are accepted.</h2>
					<a class="button browse blue">Browse</a>

					<input type="file" id="decrypt-input" />
				</div>

			</div>

			<div id="step3">

				<div class="content if-encrypt">
					<h1>Enter a pass phrase</h1>
					<h2>This phrase will be used as an encryption key. Write it down or remember it; you won't be able to restore the file without it. </h2>

					<input type="password" />
					<a class="button process red">Encrypt!</a>
				</div>

				<div class="content if-decrypt">
					<h1>Enter the pass phrase</h1>
					<h2>Enter the pass phrase that was used to encrypt this file. It is not possible to decrypt it without it.</h2>

					<input type="password" />
					<a class="button process red">Decrypt!</a>
				</div>

			</div>

			<div id="step4">

				<div class="content">
					<h1>Your file is ready!</h1>
					<a class="button download green">Download</a>
				</div>

			</div>
		</div>

		<footer>

        </footer>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);

/*-------------------------
	Simple reset
--------------------------*/


*{
	margin:0;
	padding:0;
}


/*-------------------------
	General Styles
--------------------------*/


html{
	overflow:hidden;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside{
	display: block;
}


/*-------------------------
	The main page elements
--------------------------*/


body{
	font:15px/1.3 'Raleway', sans-serif;
	color: #fff;
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
}

#stage{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;

	transition:top 0.4s;
}

#stage > div{  /* The step divs */
	height:100%;
	position:relative;
}


#stage h1{
	font-weight:normal;
	font-size:48px;
	text-align:center;
	color:#fff;
	margin-bottom:60px;
}

#stage h2{
	font-weight: normal;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	margin: -40px 0 45px;
	font-style: italic;
}

.content{
	position:absolute;
	text-align:center;
	left:0;
	top:50%;
	width:100%;
}

.content input[type=file]{
	display:none;
}

a.back{
	width: 32px;
	height: 32px;
	background: url('http://demo.tutorialzine.com/2013/11/javascript-file-encrypter/assets/img/icons.svg') no-repeat -192px 0;
	position: absolute;
	cursor: pointer;
	top: 50px;
	left: 50%;
	z-index: 10;
	opacity: 0.8;
	margin-left: -16px;
	display:none;
}

a.back:hover{
	opacity:1;
}


/*-------------------------
	Conditional classes
--------------------------*/


[class*="if-"]{
	display:none;
}

body.encrypt .if-encrypt{
	display:block;
}

body.decrypt .if-decrypt{
	display:block;
}


/*-------------------------
	Button styles
--------------------------*/


.button{
	width:240px;
	height:70px;
	text-align:center;
	text-decoration: none !important;
	color:#fff !important;
	text-transform: uppercase;
	font-weight:...

JavaScript

/*
CryptoJS v3.1.2
code.google.com/p/crypto-js
(c) 2009-2013 by Jeff Mott. All rights reserved.
code.google.com/p/crypto-js/wiki/License
*/
var CryptoJS = CryptoJS || function (u, p) {
        var d = {}, l = d.lib = {}, s = function () {}, t = l.Base = {
            extend: function (a) {
                s.prototype = this;
                var c = new s;
                a && c.mixIn(a);
                c.hasOwnProperty("init") || (c.init = function () {
                    c.$super.init.apply(this, arguments)
                });
                c.init.prototype = c;
                c.$super = this;
                return c
            },
            create: function () {
                var a = this.extend();
                a.init.apply(a, arguments);
                return a
            },
            init: function () {},
            mixIn: function (a) {
                for (var c in a) a.hasOwnProperty(c) && (this[c] = a[c]);
                a.hasOwnProperty("toString") && (this.toString = a.toString)
            },
            clone: function () {
                return this.init.prototype.extend(this)
            }
        },
        r = l.WordArray = t.extend({
            init: function (a, c) {
                a = this.words = a || [];
                this.sigBytes = c != p ? c : 4 * a.length
            },
            toString: function (a) {
                return (a || v).stringify(this)
            },
            concat: function (a) {
                var c = this.words,
                    e = a.words,
                    j = this.sigBytes;
                a = a.sigBytes;
                this.clamp();
                if (j % 4) for (var k = 0; k < a; k++) c[j + k >>> 2] |= (e[k >>> 2] >>> 24 - 8 * (k % 4) & 255) << 24 - 8 * ((j + k) % 4);
                else if (65535 < e.length) for (k = 0; k < a; k += 4) c[j + k >>> 2] = e[k >>> 2];
                else c.push.apply(c, e);
                this.sigBytes += a;
                return this
        ...