<div class="head"></div>

<h1>embed base64</h1>
<h2>easy, client side base64 encoder</h2>

<div class="upload">
  <div class="inner">
    Click or drop a file here.
  </div>
</div>
			
<br />
<div class="sub">&#9733; <span><a href="http://base64.b1nary.ch">Online/offline app & help</a> &#9733 <a href="https://chrome.google.com/webstore/detail/embed-base64/dihjpdojfllmfmelabhdmgblokahmpdk?hl=de">Chrome extension</a></span> &#9733;</div>

<section id="result" style="display:none;">
  <textarea class="base64"></textarea>
</section>

<form>
  <input type='file' id="image_input" style="display:none;"/></form>

<div class="foot"></div>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,200,300|Lily+Script+One);

body { background-color:#E3E6C8; font-family:Roboto, Helvetica, sans-serif; font-weight:300; padding:0; margin:0; position:absolute; left:0; right:0; top:0; bottom:0; }

h1 { font-size:82px; text-align: center; font-weight:300; padding-bottom:0; margin-bottom:0; font-family: 'Lily Script One', cursive;  }
h2 { font-size:24px; text-align: center; font-weight:200; letter-spacing:3px; margin-top:2px; margin-bottom:2em; }

.upload { background-color: #dcc483; padding:8px; border-radius:10px; cursor: pointer; margin-bottom:3em; width:400px; margin:0 auto; }
.upload .inner { padding:24px; font-size:22px; border-radius:10px; border:4px dashed #B39C5D; text-align: center; font-weight:400; color:#A38E55;
			-webkit-transition: all 200ms ease-in-out;
			-moz-transition: all 200ms ease-in-out;
			-ms-transition: all 200ms ease-in-out;
			-o-transition: all 200ms ease-in-out;
			transition: all 200ms ease-in-out; }
		.upload:hover .inner { color:#94804A; border-color:#94804A; }

.sub { display:block; text-align:center; }
div.sub a { color:#727554; text-decoration:none; }
div.sub a:hover { text-decoration:underline; }
div.sub span { font-weight: 200; font-size: 14px }

textarea { width:100%; height:140px; padding:8px; font-size:90%; font-family:Roboto; font-weight:300; background-color:#efefef; color:#343536; border:1px solid #bbb; border-radius:3px; outline-color: #E3E6C8; }
section { padding:2em; padding-bottom:4em; }

body, html, textarea, section {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.head, .foot { height:24px; position:absolute; top:0; left:0; right:0; background-color: #dcc483; padding:0px; }
.foot { top:auto; bottom:0; position:fixed; }
.head:before, .foot:before { content:" "; display:block; position:absolute; top:10px; left:0; right:0; border-bottom:4px dashed #B39C5D; }

function readURL(input) {
  if (input && input[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
    $("#result .base64").val( e.target.result )
		$("#result").slideDown();
    }
		reader.readAsDataURL(input[0]);
	}
}

$(document).ready(function(){
	$("#image_input").change(function(){
    readURL(this.files);
  });

	$(".upload").click(function(){
		$("#image_input").click();
	});

	$(".upload").on('drop', function(e) {
		e.preventDefault();
		readURL(e.originalEvent.dataTransfer.files);
	}).on('dragover', function(e){
		e.stopPropagation();
		e.preventDefault();
		e.dataTransfer.dropEffect = 'copy';
	});

	$("textarea").focus(function() {
		var $this = $(this);
		$this.select();
		$this.mouseup(function() {
			$this.unbind("mouseup");
			return false;
		});
	});
});