added html, css, js

10 files changed, 1087 insertions, 7 deletions

diff --git a/pdf-as-web/src/main/webapp/assets/css/style.css b/pdf-as-web/src/main/webapp/assets/css/style.css
new file mode 100644
index 00000000..8849709f
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/css/style.css
@@ -0,0 +1,82 @@
+html {
+	font-family: Verdana, Geneva, sans-serif;
+}
+
+body {
+	background-image: url("../img/bg.png");
+}
+
+footer {
+	clear: both;
+}
+
+iframe {
+	border: none;
+}
+
+#leftMain {
+	float: left;
+	margin-right: 1em;
+}
+
+#fileSelector {
+	height: 20em;
+}
+
+#dropzone {
+	border-bottom: 2px solid;
+	border-color: #66A3FF;
+	height: 46%;
+}
+
+#traditionalUpload {
+	text-align: center;
+	height: 46%;
+}
+
+#main {
+	height: 900px;
+	width: 800px;
+	float: left;
+}
+
+#content {
+	clear: both;
+	height: 868px;
+	font-size: 150%;
+}
+
+#states {
+	height: 5%;
+}
+
+.center {
+	display: flex;
+	justify-content: center; 
+	align-items: center; 
+}
+
+.container {
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
+	border: 2px solid;
+	border-color: #66A3FF;
+	background: #E8F4FF;
+	box-shadow: 0px 0px 15px #333333;
+	margin-bottom: 1em;
+	width: 20em;
+}
+
+.container h3 {
+	border-top-left-radius: 13px;
+	border-top-right-radius: 13px;
+	background: #66A3FF;
+	color: #FFFFFF;
+	text-align: center;
+	margin: 0px;
+	height: 2em;
+}
+
+.container fieldset {
+	border: none;
+}
diff --git a/pdf-as-web/src/main/webapp/assets/img/bg.png b/pdf-as-web/src/main/webapp/assets/img/bg.png
new file mode 100644
index 00000000..9b594119
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/img/bg.png
diff --git a/pdf-as-web/src/main/webapp/assets/img/signature.png b/pdf-as-web/src/main/webapp/assets/img/signature.png
new file mode 100644
index 00000000..a6a854cc
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/img/signature.png
diff --git a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
new file mode 100644
index 00000000..040b61d0
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
@@ -0,0 +1,112 @@
+
+$(document).ready(function() {
+	registerEventListeners();
+});
+
+function registerEventListeners() {
+	$(document).bind("dragover", function(evt) {
+		evt.preventDefault();
+	});
+	
+	$(document).bind("drop", function(evt) {
+		evt.preventDefault();
+	});
+	
+	$("#dropzone").bind("dragenter", function(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();
+		highlightDropzone();
+	});
+	
+	$("#dropzone").bind("dragover", function(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();
+	});
+	
+	$("#dropzone").bind("dragleave", function(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();
+		unhighlightDropzone();
+	});
+	
+	$("#dropzone").bind("dragend", function(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();
+		unhighlightDropzone();
+	});
+	
+	$("#dropzone").bind("drop", function(evt) {
+		evt.preventDefault();
+		evt.stopPropagation();
+		unhighlightDropzone();
+		
+		var files = evt.originalEvent.dataTransfer.files;
+		if(files == null) {
+			return;
+		}
+		
+		previewFile(files[0]);
+	});
+}
+
+function previewFile(file) {
+	var fr = new FileReader();
+		
+	fr.onload = function(file) {
+		var buffer = fr.result;
+		/*var int8View = new Uint8Array(buffer);
+		var output = document.getElementById("output");
+		output.innerHTML =
+		int8View[0].toString(16)
+		+ int8View[1].toString(16)
+		+ int8View[2].toString(16)
+		+ int8View[3].toString(16);*/
+		displaypdf(buffer);
+	};
+	
+	clearContentDiv();
+	fr.readAsDataURL(file);
+}
+
+function sign() {
+	/*var fd = new FormData();
+	fd.append("pdf-file", files[0]);
+	fd.append("source", "internal");
+	fd.append("connector", "mobilebku");
+	
+	$.ajax({
+		url: "Sign",
+		data: fd,
+		processData: false,
+		contentType: false,
+		type: "POST",
+		success: function(response) {
+			$("html").empty();
+			$("html").html(response);
+		}
+	});*/
+}
+
+function highlightDropzone() {
+	$("#dropzone").css("background", "#D8FFD8");
+}
+
+function unhighlightDropzone() {
+	$("#dropzone").css("background", "#E8F4FF");
+}
+
+function displaypdf(datauri) {
+	$("#content").append("<img src='assets/img/signature.png' alt='Signature' id='signature' draggable='true' style='position: absolute'>");
+	$("#content").append("<iframe src=" + datauri + " width='800px' height='868px'></iframe>");
+	
+	$("#signature").draggable({
+		drag: function() {
+			
+		},
+		containment: "parent"
+	});
+}
+
+function clearContentDiv() {
+	$("#content").empty();
+}
diff --git a/pdf-as-web/src/main/webapp/assets/js/jspdf/examples/basic.htm b/pdf-as-web/src/main/webapp/assets/js/jspdf/examples/basic.htm
new file mode 100644
index 00000000..dea59adf
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/js/jspdf/examples/basic.htm
@@ -0,0 +1,201 @@
+<!doctype>
+<html>
+<head>
+	<title>jsPDF</title>
+	<style type="text/css">
+		* { padding: 0; margin: 0; }
+		body {
+			padding: 30px;
+			font-family: Arial, Helvetica, sans-serif;
+		}
+		h1 {
+			margin-bottom: 1em;
+			border-bottom: 1px solid #ccc;
+		}
+		
+		h2 {
+			margin-bottom: 1em;
+			border-bottom: 1px solid #ccc;
+		}
+		
+		pre {
+			border: 1px dotted #ccc;
+			background: #f7f7f7;
+			padding: 10px;
+			margin-bottom: 1em;
+		}
+        
+        h1 {
+            margin-bottom: 0.7em;
+        }
+        
+        h2 {
+            margin-top: 1em;
+        }
+	</style>
+	<script type="text/javascript" src="../libs/base64.js"></script>
+	<script type="text/javascript" src="../libs/sprintf.js"></script>
+	<script type="text/javascript" src="../jspdf.js"></script>
+</head>
+
+<body>
+
+<h1>jsPDF Demos</h1>
+
+<p>Examples for using jsPDF with Data URIs below. Go <a href="http://jspdf.googlecode.com/">back to project homepage</a>.</p>
+
+<h2>Simple Two-page Text Document</h2>
+<pre>var doc = new jsPDF();
+doc.text(20, 20, 'Hello world!');
+doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
+doc.addPage();
+doc.text(20, 20, 'Do you like that?');
+
+// Output as Data URI
+doc.output('datauri');</pre>
+<a href="javascript:demo1()">Run Code</a>
+
+<h2>Different font sizes</h2>
+<pre>var doc = new jsPDF();
+doc.setFontSize(22);
+doc.text(20, 20, 'This is a title');
+
+doc.setFontSize(16);
+doc.text(20, 30, 'This is some normal sized text underneath.');	
+
+// Output as Data URI
+doc.output('datauri');</pre>
+<a href="javascript:demo2()">Run Code</a>
+
+
+<h2>Adding metadata</h2>
+<pre>var doc = new jsPDF();
+doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
+
+// Optional - set properties on the document
+doc.setProperties({
+	title: 'Title',
+	subject: 'This is the subject',		
+	author: 'James Hall',
+	keywords: 'generated, javascript, web 2.0, ajax',
+	creator: 'MEEE'
+});
+
+// Output as Data URI
+doc.output('datauri');</pre>
+<a href="javascript:demo3()">Run Code</a>
+
+
+<h2>Example of user input</h2>
+<pre>var name = prompt('What is your name?');
+var multiplier = prompt('Enter a number:');
+multiplier = parseInt(multiplier);
+
+var doc = new jsPDF();
+doc.setFontSize(22);	
+doc.text(20, 20, 'Questions');
+doc.setFontSize(16);
+doc.text(20, 30, 'This belongs to: ' + name);
+
+for(var i = 1; i <= 12; i ++) {
+	doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
+}
+
+doc.addPage();
+doc.setFontSize(22);
+doc.text(20, 20, 'Answers');
+doc.setFontSize(16);
+
+for(var i = 1; i <= 12; i ++) {
+	doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
+}	
+doc.output('datauri');</pre>
+<a href="javascript:demo4()">Run Code</a>
+
+
+
+<script type="text/javascript">
+
+function demo1() {
+	var doc = new jsPDF();
+	doc.text(20, 20, 'Hello world!');
+	doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
+	doc.addPage();
+	doc.text(20, 20, 'Do you like that?');
+	
+	// Output as Data URI
+	doc.output('datauri');
+}
+
+function demo2() {
+	var doc = new jsPDF();
+	doc.setFontSize(22);
+	doc.text(20, 20, 'This is a title');
+	
+	doc.setFontSize(16);
+	doc.text(20, 30, 'This is some normal sized text underneath.');	
+	
+	// Output as Data URI
+	doc.output('datauri');
+}
+
+function demo3() {
+	var doc = new jsPDF();
+	doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
+	
+	// Optional - set properties on the document
+	doc.setProperties({
+		title: 'Title',
+		subject: 'This is the subject',		
+		author: 'James Hall',
+		keywords: 'generated, javascript, web 2.0, ajax',
+		creator: 'MEEE'
+	});
+	
+	// Output as Data URI
+	doc.output('datauri');
+}
+
+function demo4() {	
+	var name = prompt('What is your name?');
+	var multiplier = prompt('Enter a number:');
+	multiplier = parseInt(multiplier);
+
+	var doc = new jsPDF();
+	doc.setFontSize(22);	
+	doc.text(20, 20, 'Questions');
+	doc.setFontSize(16);
+	doc.text(20, 30, 'This belongs to: ' + name);
+	
+	for(var i = 1; i <= 12; i ++) {
+		doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
+	}
+	
+	doc.addPage();
+	doc.setFontSize(22);
+	doc.text(20, 20, 'Answers');
+	doc.setFontSize(16);
+	
+	for(var i = 1; i <= 12; i ++) {
+		doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
+	}	
+	doc.output('datauri');
+	
+}
+
+</script>
+
+
+<script type="text/javascript">
+// Google Analytics
+
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script type="text/javascript">
+try {
+var pageTracker = _gat._getTracker("UA-2746979-4");
+pageTracker._trackPageview();
+} catch(err) {}</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/pdf-as-web/src/main/webapp/assets/js/jspdf/examples/jaxer.htm b/pdf-as-web/src/main/webapp/assets/js/jspdf/examples/jaxer.htm
new file mode 100644
index 00000000..fff93e9b
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/js/jspdf/examples/jaxer.htm
@@ -0,0 +1,15 @@
+<script runat="server" type="text/javascript" src="../libs/base64.js"></script>
+<script runat="server" type="text/javascript" src="../libs/sprintf.js"></script>
+<script runat="server" type="text/javascript" src="../jspdf.js"></script>
+<script runat="server" autoload="true">
+
+var doc = new jsPDF();
+doc.text(20, 20, 'Hello world!');
+doc.text(20, 30, 'This is a server-side Jaxer example.');
+content = doc.output();
+
+Jaxer.response.addHeader('Content-Disposition', 'attachment; filename=example.pdf');
+Jaxer.response.addHeader('Content-Type', 'application/pdf');
+Jaxer.response.setContents(content);
+
+</script>
diff --git a/pdf-as-web/src/main/webapp/assets/js/jspdf/jspdf.js b/pdf-as-web/src/main/webapp/assets/js/jspdf/jspdf.js
new file mode 100644
index 00000000..e4d2d6fc
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/js/jspdf/jspdf.js
@@ -0,0 +1,304 @@
+
+/**
+ * jsPDF
+ * (c) 2009 James Hall
+ * 
+ * Some parts based on FPDF.
+ */
+
+var jsPDF = function(){
+	
+	// Private properties
+	var version = '20090504';
+	var buffer = '';
+	
+	var pdfVersion = '1.3'; // PDF Version
+	var defaultPageFormat = 'a4';
+	var pageFormats = { // Size in mm of various paper formats
+		'a3': [841.89, 1190.55],
+		'a4': [595.28, 841.89],
+		'a5': [420.94, 595.28],
+		'letter': [612, 792],
+		'legal': [612, 1008]
+	};
+	var textColor = '0 g';
+	var page = 0;
+	var objectNumber = 2; // 'n' Current object number
+	var state = 0; // Current document state
+	var pages = new Array();
+	var offsets = new Array(); // List of offsets
+	var lineWidth = 0.200025; // 2mm
+	var pageHeight;
+	var k; // Scale factor
+	var unit = 'mm'; // Default to mm for units
+	var fontNumber; // TODO: This is temp, replace with real font handling
+	var documentProperties = {};
+	var fontSize = 16; // Default font size
+	var pageFontSize = 16;
+
+	// Initilisation 
+	if (unit == 'pt') {
+		k = 1;
+	} else if(unit == 'mm') {
+		k = 72/25.4;
+	} else if(unit == 'cm') {
+		k = 72/2.54;
+	} else if(unit == 'in') {
+		k = 72;
+	}
+	
+	// Private functions
+	var newObject = function() {
+		//Begin a new object
+		objectNumber ++;
+		offsets[objectNumber] = buffer.length;
+		out(objectNumber + ' 0 obj');		
+	}
+	
+	
+	var putHeader = function() {
+		out('%PDF-' + pdfVersion);
+	}
+	
+	var putPages = function() {
+		
+		// TODO: Fix, hardcoded to a4 portrait
+		var wPt = pageWidth * k;
+		var hPt = pageHeight * k;
+
+		for(n=1; n <= page; n++) {
+			newObject();
+			out('<</Type /Page');
+			out('/Parent 1 0 R');	
+			out('/Resources 2 0 R');
+			out('/Contents ' + (objectNumber + 1) + ' 0 R>>');
+			out('endobj');
+			
+			//Page content
+			p = pages[n];
+			newObject();
+			out('<</Length ' + p.length  + '>>');
+			putStream(p);
+			out('endobj');					
+		}
+		offsets[1] = buffer.length;
+		out('1 0 obj');
+		out('<</Type /Pages');
+		var kids='/Kids [';
+		for (i = 0; i < page; i++) {
+			kids += (3 + 2 * i) + ' 0 R ';
+		}
+		out(kids + ']');
+		out('/Count ' + page);
+		out(sprintf('/MediaBox [0 0 %.2f %.2f]', wPt, hPt));
+		out('>>');
+		out('endobj');		
+	}
+	
+	var putStream = function(str) {
+		out('stream');
+		out(str);
+		out('endstream');
+	}
+	
+	var putResources = function() {
+		putFonts();
+		putImages();
+		
+		//Resource dictionary
+		offsets[2] = buffer.length;
+		out('2 0 obj');
+		out('<<');
+		putResourceDictionary();
+		out('>>');
+		out('endobj');
+	}	
+	
+	var putFonts = function() {
+		// TODO: Only supports core font hardcoded to Helvetica
+		newObject();
+		fontNumber = objectNumber;
+		name = 'Helvetica';
+		out('<</Type /Font');
+		out('/BaseFont /' + name);
+		out('/Subtype /Type1');
+		out('/Encoding /WinAnsiEncoding');
+		out('>>');
+		out('endobj');
+	}
+	
+	var putImages = function() {
+		// TODO
+	}
+	
+	var putResourceDictionary = function() {
+		out('/ProcSet [/PDF /Text /ImageB /ImageC /ImageI]');
+		out('/Font <<');
+		// Do this for each font, the '1' bit is the index of the font
+        // fontNumber is currently the object number related to 'putFonts'
+		out('/F1 ' + fontNumber + ' 0 R');
+		out('>>');
+		out('/XObject <<');
+		putXobjectDict();
+		out('>>');
+	}
+	
+	var putXobjectDict = function() {
+		// TODO
+		// Loop through images
+	}
+	
+	
+	var putInfo = function() {
+		out('/Producer (jsPDF ' + version + ')');
+		if(documentProperties.title != undefined) {
+			out('/Title (' + pdfEscape(documentProperties.title) + ')');
+		}
+		if(documentProperties.subject != undefined) {
+			out('/Subject (' + pdfEscape(documentProperties.subject) + ')');
+		}
+		if(documentProperties.author != undefined) {
+			out('/Author (' + pdfEscape(documentProperties.author) + ')');
+		}
+		if(documentProperties.keywords != undefined) {
+			out('/Keywords (' + pdfEscape(documentProperties.keywords) + ')');
+		}
+		if(documentProperties.creator != undefined) {
+			out('/Creator (' + pdfEscape(documentProperties.creator) + ')');
+		}		
+		var created = new Date();
+		var year = created.getFullYear();
+		var month = (created.getMonth() + 1);
+		var day = created.getDate();
+		var hour = created.getHours();
+		var minute = created.getMinutes();
+		var second = created.getSeconds();
+		out('/CreationDate (D:' + sprintf('%02d%02d%02d%02d%02d%02d', year, month, day, hour, minute, second) + ')');
+	}
+	
+	var putCatalog = function () {
+		out('/Type /Catalog');
+		out('/Pages 1 0 R');
+		// TODO: Add zoom and layout modes
+		out('/OpenAction [3 0 R /FitH null]');
+		out('/PageLayout /OneColumn');
+	}	
+	
+	function putTrailer() {
+		out('/Size ' + (objectNumber + 1));
+		out('/Root ' + objectNumber + ' 0 R');
+		out('/Info ' + (objectNumber - 1) + ' 0 R');
+	}	
+	
+	var endDocument = function() {
+		state = 1;
+		putHeader();
+		putPages();
+		
+		putResources();
+		//Info
+		newObject();
+		out('<<');
+		putInfo();
+		out('>>');
+		out('endobj');
+		
+		//Catalog
+		newObject();
+		out('<<');
+		putCatalog();
+		out('>>');
+		out('endobj');
+		
+		//Cross-ref
+		var o = buffer.length;
+		out('xref');
+		out('0 ' + (objectNumber + 1));
+		out('0000000000 65535 f ');
+		for (var i=1; i <= objectNumber; i++) {
+			out(sprintf('%010d 00000 n ', offsets[i]));
+		}
+		//Trailer
+		out('trailer');
+		out('<<');
+		putTrailer();
+		out('>>');
+		out('startxref');
+		out(o);
+		out('%%EOF');
+		state = 3;		
+	}
+	
+	var beginPage = function() {
+		page ++;
+		// Do dimension stuff
+		state = 2;
+		pages[page] = '';
+		
+		// TODO: Hardcoded at A4 and portrait
+		pageHeight = pageFormats['a4'][1] / k;
+		pageWidth = pageFormats['a4'][0] / k;
+	}
+	
+	var out = function(string) {
+		if(state == 2) {
+			pages[page] += string + '\n';
+		} else {
+			buffer += string + '\n';
+		}
+	}
+	
+	var _addPage = function() {
+		beginPage();
+		// Set line width
+		out(sprintf('%.2f w', (lineWidth * k)));
+		
+		// Set font - TODO
+		// 16 is the font size
+		pageFontSize = fontSize;
+		out('BT /F1 ' + parseInt(fontSize) + '.00 Tf ET'); 		
+	}
+	
+	// Add the first page automatically
+	_addPage();	
+
+	// Escape text
+	var pdfEscape = function(text) {
+		return text.replace(/\\/g, '\\\\').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
+	}
+	
+	return {
+		addPage: function() {
+			_addPage();
+		},
+		text: function(x, y, text) {
+			// need page height
+			if(pageFontSize != fontSize) {
+				out('BT /F1 ' + parseInt(fontSize) + '.00 Tf ET');
+				pageFontSize = fontSize;
+			}
+			var str = sprintf('BT %.2f %.2f Td (%s) Tj ET', x * k, (pageHeight - y) * k, pdfEscape(text));
+			out(str);
+		},
+		setProperties: function(properties) {
+			documentProperties = properties;
+		},
+		addImage: function(imageData, format, x, y, w, h) {
+		
+		},
+		output: function(type, options) {
+			endDocument();
+			if(type == undefined) {
+				return buffer;
+			}
+			if(type == 'datauri') {
+				document.location.href = 'data:application/pdf;base64,' + Base64.encode(buffer);
+			}
+			// @TODO: Add different output options
+		},
+		setFontSize: function(size) {
+			fontSize = size;
+		}
+	}
+
+};
\ No newline at end of file
diff --git a/pdf-as-web/src/main/webapp/assets/js/jspdf/libs/base64.js b/pdf-as-web/src/main/webapp/assets/js/jspdf/libs/base64.js
new file mode 100644
index 00000000..7d9536a4
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/js/jspdf/libs/base64.js
@@ -0,0 +1,143 @@
+
+/**
+*
+*  Base64 encode / decode
+*  http://www.webtoolkit.info/
+*
+**/
+
+var Base64 = {
+
+	// private property
+	_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+
+	// public method for encoding
+	encode : function (input) {
+		var output = "";
+		var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+		var i = 0;
+
+		input = Base64._utf8_encode(input);
+
+		while (i < input.length) {
+
+			chr1 = input.charCodeAt(i++);
+			chr2 = input.charCodeAt(i++);
+			chr3 = input.charCodeAt(i++);
+
+			enc1 = chr1 >> 2;
+			enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+			enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+			enc4 = chr3 & 63;
+
+			if (isNaN(chr2)) {
+				enc3 = enc4 = 64;
+			} else if (isNaN(chr3)) {
+				enc4 = 64;
+			}
+
+			output = output +
+			this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
+			this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
+
+		}
+
+		return output;
+	},
+
+	// public method for decoding
+	decode : function (input) {
+		var output = "";
+		var chr1, chr2, chr3;
+		var enc1, enc2, enc3, enc4;
+		var i = 0;
+
+		input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+		while (i < input.length) {
+
+			enc1 = this._keyStr.indexOf(input.charAt(i++));
+			enc2 = this._keyStr.indexOf(input.charAt(i++));
+			enc3 = this._keyStr.indexOf(input.charAt(i++));
+			enc4 = this._keyStr.indexOf(input.charAt(i++));
+
+			chr1 = (enc1 << 2) | (enc2 >> 4);
+			chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+			chr3 = ((enc3 & 3) << 6) | enc4;
+
+			output = output + String.fromCharCode(chr1);
+
+			if (enc3 != 64) {
+				output = output + String.fromCharCode(chr2);
+			}
+			if (enc4 != 64) {
+				output = output + String.fromCharCode(chr3);
+			}
+
+		}
+
+		output = Base64._utf8_decode(output);
+
+		return output;
+
+	},
+
+	// private method for UTF-8 encoding
+	_utf8_encode : function (string) {
+		string = string.replace(/\r\n/g,"\n");
+		var utftext = "";
+
+		for (var n = 0; n < string.length; n++) {
+
+			var c = string.charCodeAt(n);
+
+			if (c < 128) {
+				utftext += String.fromCharCode(c);
+			}
+			else if((c > 127) && (c < 2048)) {
+				utftext += String.fromCharCode((c >> 6) | 192);
+				utftext += String.fromCharCode((c & 63) | 128);
+			}
+			else {
+				utftext += String.fromCharCode((c >> 12) | 224);
+				utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+				utftext += String.fromCharCode((c & 63) | 128);
+			}
+
+		}
+
+		return utftext;
+	},
+
+	// private method for UTF-8 decoding
+	_utf8_decode : function (utftext) {
+		var string = "";
+		var i = 0;
+		var c = c1 = c2 = 0;
+
+		while ( i < utftext.length ) {
+
+			c = utftext.charCodeAt(i);
+
+			if (c < 128) {
+				string += String.fromCharCode(c);
+				i++;
+			}
+			else if((c > 191) && (c < 224)) {
+				c2 = utftext.charCodeAt(i+1);
+				string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+				i += 2;
+			}
+			else {
+				c2 = utftext.charCodeAt(i+1);
+				c3 = utftext.charCodeAt(i+2);
+				string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+				i += 3;
+			}
+
+		}
+
+		return string;
+	}
+
+}
diff --git a/pdf-as-web/src/main/webapp/assets/js/jspdf/libs/sprintf.js b/pdf-as-web/src/main/webapp/assets/js/jspdf/libs/sprintf.js
new file mode 100644
index 00000000..1af7bdf6
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/js/jspdf/libs/sprintf.js
@@ -0,0 +1,152 @@
+
+
+function sprintf( ) {
+    // Return a formatted string  
+    // 
+    // version: 903.3016
+    // discuss at: http://phpjs.org/functions/sprintf
+    // +   original by: Ash Searle (http://hexmen.com/blog/)
+    // + namespaced by: Michael White (http://getsprink.com)
+    // +    tweaked by: Jack
+    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+    // +      input by: Paulo Ricardo F. Santos
+    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+    // +      input by: Brett Zamir (http://brettz9.blogspot.com)
+    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+    // *     example 1: sprintf("%01.2f", 123.1);
+    // *     returns 1: 123.10
+    // *     example 2: sprintf("[%10s]", 'monkey');
+    // *     returns 2: '[    monkey]'
+    // *     example 3: sprintf("[%'#10s]", 'monkey');
+    // *     returns 3: '[####monkey]'
+    var regex = /%%|%(\d+\$)?([-+\'#0 ]*)(\*\d+\$|\*|\d+)?(\.(\*\d+\$|\*|\d+))?([scboxXuidfegEG])/g;
+    var a = arguments, i = 0, format = a[i++];
+
+    // pad()
+    var pad = function(str, len, chr, leftJustify) {
+        if (!chr) chr = ' ';
+        var padding = (str.length >= len) ? '' : Array(1 + len - str.length >>> 0).join(chr);
+        return leftJustify ? str + padding : padding + str;
+    };
+
+    // justify()
+    var justify = function(value, prefix, leftJustify, minWidth, zeroPad, customPadChar) {
+        var diff = minWidth - value.length;
+        if (diff > 0) {
+            if (leftJustify || !zeroPad) {
+                value = pad(value, minWidth, customPadChar, leftJustify);
+            } else {
+                value = value.slice(0, prefix.length) + pad('', diff, '0', true) + value.slice(prefix.length);
+            }
+        }
+        return value;
+    };
+
+    // formatBaseX()
+    var formatBaseX = function(value, base, prefix, leftJustify, minWidth, precision, zeroPad) {
+        // Note: casts negative numbers to positive ones
+        var number = value >>> 0;
+        prefix = prefix && number && {'2': '0b', '8': '0', '16': '0x'}[base] || '';
+        value = prefix + pad(number.toString(base), precision || 0, '0', false);
+        return justify(value, prefix, leftJustify, minWidth, zeroPad);
+    };
+
+    // formatString()
+    var formatString = function(value, leftJustify, minWidth, precision, zeroPad, customPadChar) {
+        if (precision != null) {
+            value = value.slice(0, precision);
+        }
+        return justify(value, '', leftJustify, minWidth, zeroPad, customPadChar);
+    };
+
+    // doFormat()
+    var doFormat = function(substring, valueIndex, flags, minWidth, _, precision, type) {
+        var number;
+        var prefix;
+        var method;
+        var textTransform;
+        var value;
+
+        if (substring == '%%') return '%';
+
+        // parse flags
+        var leftJustify = false, positivePrefix = '', zeroPad = false, prefixBaseX = false, customPadChar = ' ';
+        var flagsl = flags.length;
+        for (var j = 0; flags && j < flagsl; j++) switch (flags.charAt(j)) {
+            case ' ': positivePrefix = ' '; break;
+            case '+': positivePrefix = '+'; break;
+            case '-': leftJustify = true; break;
+            case "'": customPadChar = flags.charAt(j+1); break;
+            case '0': zeroPad = true; break;
+            case '#': prefixBaseX = true; break;
+        }
+
+        // parameters may be null, undefined, empty-string or real valued
+        // we want to ignore null, undefined and empty-string values
+        if (!minWidth) {
+            minWidth = 0;
+        } else if (minWidth == '*') {
+            minWidth = +a[i++];
+        } else if (minWidth.charAt(0) == '*') {
+            minWidth = +a[minWidth.slice(1, -1)];
+        } else {
+            minWidth = +minWidth;
+        }
+
+        // Note: undocumented perl feature:
+        if (minWidth < 0) {
+            minWidth = -minWidth;
+            leftJustify = true;
+        }
+
+        if (!isFinite(minWidth)) {
+            throw new Error('sprintf: (minimum-)width must be finite');
+        }
+
+        if (!precision) {
+            precision = 'fFeE'.indexOf(type) > -1 ? 6 : (type == 'd') ? 0 : void(0);
+        } else if (precision == '*') {
+            precision = +a[i++];
+        } else if (precision.charAt(0) == '*') {
+            precision = +a[precision.slice(1, -1)];
+        } else {
+            precision = +precision;
+        }
+
+        // grab value using valueIndex if required?
+        value = valueIndex ? a[valueIndex.slice(0, -1)] : a[i++];
+
+        switch (type) {
+            case 's': return formatString(String(value), leftJustify, minWidth, precision, zeroPad, customPadChar);
+            case 'c': return formatString(String.fromCharCode(+value), leftJustify, minWidth, precision, zeroPad);
+            case 'b': return formatBaseX(value, 2, prefixBaseX, leftJustify, minWidth, precision, zeroPad);
+            case 'o': return formatBaseX(value, 8, prefixBaseX, leftJustify, minWidth, precision, zeroPad);
+            case 'x': return formatBaseX(value, 16, prefixBaseX, leftJustify, minWidth, precision, zeroPad);
+            case 'X': return formatBaseX(value, 16, prefixBaseX, leftJustify, minWidth, precision, zeroPad).toUpperCase();
+            case 'u': return formatBaseX(value, 10, prefixBaseX, leftJustify, minWidth, precision, zeroPad);
+            case 'i':
+            case 'd': {
+                number = parseInt(+value);
+                prefix = number < 0 ? '-' : positivePrefix;
+                value = prefix + pad(String(Math.abs(number)), precision, '0', false);
+                return justify(value, prefix, leftJustify, minWidth, zeroPad);
+            }
+            case 'e':
+            case 'E':
+            case 'f':
+            case 'F':
+            case 'g':
+            case 'G': {
+                number = +value;
+                prefix = number < 0 ? '-' : positivePrefix;
+                method = ['toExponential', 'toFixed', 'toPrecision']['efg'.indexOf(type.toLowerCase())];
+                textTransform = ['toString', 'toUpperCase']['eEfFgG'.indexOf(type) % 2];
+                value = prefix + Math.abs(number)[method](precision);
+                return justify(value, prefix, leftJustify, minWidth, zeroPad)[textTransform]();
+            }
+            default: return substring;
+        }
+    };
+
+    return format.replace(regex, doFormat);
+}
diff --git a/pdf-as-web/src/main/webapp/index.jsp b/pdf-as-web/src/main/webapp/index.jsp
index f3a3b957..0c35bc52 100644
--- a/pdf-as-web/src/main/webapp/index.jsp
+++ b/pdf-as-web/src/main/webapp/index.jsp
@@ -1,14 +1,82 @@
 <%@page import="at.gv.egiz.pdfas.web.config.WebConfiguration"%>
 <%@page import="at.gv.egiz.pdfas.web.helper.PdfAsHelper"%>
+<!doctype html>
 <html>
 <head>
-<title>PDF-Signatur</title>
+	<meta charset="utf-8">
+	<title>PDF-Signatur</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
+	<script src="assets/js/dragNdrop.js"></script>
+	<script src="assets/js/jspdf/jspdf.js"></script>
 </head>
 <body>
-	<form action="Sign" method="POST"
+ <header>
+	<p>header</p>
+</header>
+
+	<div id="leftMain">
+	
+		<div id="fileSelector" class="container">
+			<h3 class="center">File Selector</h3>
+			<div id="dropzone" class="center">
+				Drag and Drop your Document here ...
+			</div>
+			<div id="traditionalUpload">
+				<p>... or select File here</p>
+				<input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
+			</div>
+		</div>
+		
+		<div id="signMethod" class="container">
+			<h3 class="center">Sign Method</h3>
+			<fieldset>
+				<table>
+					<tr>
+						<td><input type="radio" id="handy" name="sign" value="handy"></td>
+						<td><label for="handy">Handy</td>
+						<td><label for="handy"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/></td>
+						
+					</tr>
+					<tr>
+						<td><input type="radio" id="localBKU" name="sign" value="localBKU" checked></td>
+						<td><label for="localBKU">Lokale BKU</label></td>
+						<td><label for="localBKU"><img src="assets/img/onlineBKU.png" alt="Sign via local BKU" /></label></td>
+						
+					</tr>
+					<tr>
+						<td><input type="radio" id="onlineBKU" name="sign" value="onlineBKU"></td>
+						<td><label for="onlineBKU">Online BKU</label></td>
+						<td><label for="onlineBKU"><img src="assets/img/onlineBKU.png" alt="Sign via online BKU"/></label></td>
+						
+					</tr>
+					
+				</table>
+			</fieldset>
+		</div>
+		
+		<div id="language" class="container">
+			<h3 class="center">Language</h3>
+				<fieldset>
+					<input type="radio" id="langEn" name="lang" value="langEn" checked><label>Englisch</label><br>
+					<input type="radio" id="langDe" name="lang" value="langDe"><label>Deutsch</label><br> 
+				</fieldset>
+		</div>
+	</div>
+	
+	
+	<div id="main" class="container">
+		<h3 class="center">Preview</h3>
+		<div id="content" class="center">
+			Please select the pdf file you want to sign!
+		</div>
+	</div>
+	
+	<!--<form action="Sign" method="POST"
 		enctype="multipart/form-data">
 		<input type="hidden" name="source" id="source" value="internal" /> 
-		<input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
+		 <input type="file" name="pdf-file" id="pdf-file" accept="application/pdf"> 
 		<%
 			if (request.getAttribute("FILEERR") != null) {
 		%>
@@ -21,7 +89,7 @@
 		<%
 			if (WebConfiguration.getLocalBKUURL() != null) {
 		%>
-		<img src="assets/img/onlineBKU.png" /> <button type="submit"
+		<img src="assets/img/onlineBKU.png" alt="Sign via local BKU" /> <button type="submit"
 			value="bku" name="connector" id="bku">Lokale BKU
 		</button>
 		<%
@@ -30,7 +98,7 @@
 		<%
 			if (WebConfiguration.getOnlineBKUURL() != null) {
 		%>
-		<img src="assets/img/onlineBKU.png" />
+		<img src="assets/img/onlineBKU.png" alt="Sign via online BKU"/>
 		<button type="submit" value="onlinebku" name="connector"
 			id="onlinebku">Online BKU</button>
 		<%
@@ -39,7 +107,7 @@
 		<%
 			if (WebConfiguration.getHandyBKUURL() != null) {
 		%>
-		<img src="assets/img/mobileBKU.png" />
+		<img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/>
 		<button type="submit" value="mobilebku" name="connector" id="mobilebku">Handy</button>
 		<%
 			}
@@ -68,6 +136,9 @@
 		
 	</form>
 	
-	<p><small>Version: <%= PdfAsHelper.getVersion() %> - <%= PdfAsHelper.getSCMRevision() %></small></p>
+	<p><small>Version: <%= PdfAsHelper.getVersion() %> - <%= PdfAsHelper.getSCMRevision() %></small></p>-->
+	<footer>
+	  <p>footer</p>
+	</footer>
 </body>
 </html>
\ No newline at end of file