From 5a807a74663dcf7ea1eae8f37589072bdad1f036 Mon Sep 17 00:00:00 2001
From: fschneider <florian.schneider@student.tugraz.at>
Date: Tue, 1 Sep 2015 11:34:36 +0200
Subject: User Interface nearly finished

---
 pdf-as-web/src/main/webapp/index.jsp | 149 +++++++++--------------------------
 1 file changed, 37 insertions(+), 112 deletions(-)

(limited to 'pdf-as-web/src/main/webapp/index.jsp')

diff --git a/pdf-as-web/src/main/webapp/index.jsp b/pdf-as-web/src/main/webapp/index.jsp
index fe615de9..b0988a4c 100644
--- a/pdf-as-web/src/main/webapp/index.jsp
+++ b/pdf-as-web/src/main/webapp/index.jsp
@@ -11,12 +11,20 @@
 	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
 	<script src="assets/js/pdf.js/build/pdf.js"></script>
 	<script src="assets/js/dragNdrop.js"></script>
+	<script src="assets/js/jquery-lang.js"></script>
+	<script src="assets/js/js.cookie.js"></script>
 	
 	<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
 	<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
     <script src="assets/bootstrap/js/bootstrap.js"></script>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css">
+    <link rel="stylesheet" href="assets/css/flag-icon.min.css">
+    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
+    
+    <!-- Google Font -->
+	<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
+	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     
 </head>
@@ -24,79 +32,63 @@
  <header>
 </header>
 
-	<!-- Old sidebar -->
-	<!-- 
-		<div id="language" class="container">
-			<h3 class="center">Language</h3>
-				<fieldset>
-				  <input type="radio" id="EN" name="locale" value="EN" checked><label for="EN">Englisch</label><br>
-				  <input type="radio" id="DE" name="locale" value="DE"><label for="DE">Deutsch</label><br> 
-				</fieldset>
-		</div>
-	-->
-	
 <div class="container col-lg-8 col-lg-offset-2">
 	<!-- Header -->
+	<div class="row" id="LanguageSwitchContainer">
+	<h2 id="PageTitle" class="pull-left" lang="en">PDF-Signature Online</h2>
+	<h4 id="LanguageDisplay" class="pull-right"><span class="label label-info"><span class="flag-icon flag-icon-de"></span> DE</span></h4>
+	</div>
 <div class="row center">
 	  <div class="" id="navBar">
 	  <ul class="nav nav-wizard">
-	    <li class="active" id="UploadStepButton"><a href="#"><span class="glyphicon glyphicon-open-file" aria-hidden="true"></span><span id="uploadNavText"> Upload</span></a></li>
-	    <li id="PlaceStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-move" aria-hidden="true"></span><span id="placeNavText" style="display:none;"> Place&nbsp;&nbsp;</span></a></li>
-	    <li id="SignStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><span id="signNavText" style="display:none;"> Sign&nbsp;&nbsp;&nbsp;&nbsp;</span></a></li>
-	    <li id="FinishStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-save-file" aria-hidden="true"></span><span id="downloadNavText" style="display:none;"> Finish&nbsp;</span></a></li>
+	    <li class="active" id="UploadStepButton"><a href="#" title="Upload your Document" data-toggle="tooltip"><span class="glyphicon glyphicon-open-file" aria-hidden="true"></span><span id="uploadNavText" class="hidden-xs" lang="en"> Upload</span></a></li>
+	    <li id="PlaceStepButton" style="pointer-events:none;"><a href="#" data-toggle="tooltip" title="Place your Signature"><span class="glyphicon glyphicon-move" aria-hidden="true"></span><span id="placeNavText" style="display:none;" class="hidden-xs" lang="en"> Place</span></a></li>
+	    <li id="SignStepButton" style="pointer-events:none;"><a href="#" data-toggle="tooltip" title="Sign your Document"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><span id="signNavText" style="display:none;" class="hidden-xs" lang="en"> Sign</span></a></li>
+	    <li id="FinishStepButton" style="pointer-events:none;"><a href="#" data-toggle="tooltip" title="Download your signed Document"><span class="glyphicon glyphicon-save-file" aria-hidden="true"></span><span id="downloadNavText" style="display:none;" class="hidden-xs" lang="en"> Finish</span></a></li>
 	  </ul>
 	  </div>
-	   <button id="BackBox" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span></button>
- </div>
- <div id="OuterBackBox" style="display:none;">
- <div id="InnerBackBox" class="col-sm-1 col-md-1 col-md-offset-4 col-lg-1 col-lg-offset-4">
- <p >Back</p>
  </div>
- </div>
-
 	
 <!-- Main Switch Frame -->
 <div class="row center">
-	
 		<div id="DropContainer">
-			<div id="borderBox">
-				<div class="row mainBox center">
+			<div id="borderBox" class="center">
+				<div class="mainBox center">
 					<div id="FormBox" class="">
-						<h5 class="visible-lg-block"> Drop or select your file here</h5>
-						<h5 class="hidden-lg">Upload your File</h5>
+						<h5 class="visible-lg-block" lang="en">Drop or select your file here</h5>
+						<h5 class="hidden-lg" lang="en">Upload your File</h5>
 							<div id="FormDefine" class="form-group has-feedback">
 					            <div class="input-group">
 					                <span class="input-group-btn">
-					                    <span class="btn btn-primary btn-file">
+					                    <span class="btn btn-primary btn-file" lang="en">
 					                     Browse... <input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
 					                    </span>
 					                </span>
-					                <input id= "FileNamePreview" type="text" class="form-control" readonly>
+					                
+					                <input id= "FileNamePreview" type="text" class="form-control" readonly>				                
 					                <span id="BadFeedback" class="glyphicon glyphicon-remove form-control-feedback" style="display: none;" aria-hidden="true"></span>
 					                <span id="GoodFeedback" class="glyphicon glyphicon-ok form-control-feedback" style="display: none;" aria-hidden="true"></span>
 					            </div>
+					            
 					            <div id="fileTypeErrorMessage" class="pull-right">
-					            <p id="noPdfMessage" style="display:none;"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> The file type must be PDF!</p>
+					            <p id="noPdfMessage" style="display:none;" lang="en"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> The file type must be PDF!</p>
 					            </div>
 
 				            </div>	
 				            
-				            <div id="ContinueButtonBox" class="col-md-12 center">
-				            <button id="uploadContinue" class="btn btn-primary btn-lg btn-block" disabled="disabled" >Continue</button>
-				            </div>				        
+				            <div id="ContinueButtonBox" class="col-md-12">
+				            <button id="uploadContinue" class="btn btn-success btn-lg btn-block center" disabled="disabled" title="Place your Signature by yourself">
+				            <p id="ContinueButtonText" lang="en">Continue</p><i style="display:none;" id="MobileSpinner" class="fa fa-spinner fa-pulse fa-lg"></i>
+				            </button>
+				            <button id="uploadContinueQuick" class="btn btn-default btn-lg btn-block" disabled="disabled" title="Signature will be placed at the bottom of your document" lang="en">Quick Sign</button>				           
+				            </div>							       	        
 					</div>
 				</div>
 			</div>	
 		</div>
 
 		<div id="ViewContainer" style="display: none;">
-			<div> <!--  class="center" -->
-				<div id="ViewerExternToolbar" class="center pull-right">
-				<button id="QuickSign" class="btn btn-primary">Quick Sign</button>
-	            <button id="placeContinue" class="btn btn-success">Continue</button>
-                </div>
-             </div>
-			<div id="content" class="">
+			<div id="content" class="" lang="en">
 			Loading your PDF, please wait...
 			</div>
 		</div>
@@ -109,7 +101,7 @@
 						%>
 						
 						<div class="methodChooseContainer">
-							<div class="ImageBox" id="MobilePhoneSubmit"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/>Mobile</div>
+							<div class="ImageBox" id="MobilePhoneSubmit" lang="en"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/>Mobile</div>
 							<div style="display:none;"><input type="radio" id="mobileBKU" name="connector" value="mobilebku" checked></div>
 						</div>
 						<%
@@ -119,7 +111,7 @@
 						if (WebConfiguration.getLocalBKUURL() != null) {
 						%>
 						<div class="methodChooseContainer">
-							<div class="ImageBox" id="LocalBKUSubmit"><img src="assets/img/onlineBKU.png" alt="Sign via local BKU" />Card</div>
+							<div class="ImageBox" id="LocalBKUSubmit" lang="en"><img src="assets/img/onlineBKU.png" alt="Sign via local BKU" />Card</div>
 							<div style="display:none;"><input type="radio" id="localBKU" name="connector" value="bku"></div>
 						</div>
 						<%
@@ -154,81 +146,14 @@
 			<div id="btnSign" style="display:none">
 				<h3 class="center">Sign Document</h3>
 			</div>
-			<div class="center" id="DownloadResultContainer">
-			<input id="DownloadResultButton" value="Download your PDF" class="btn btn-success btn-lg">
+			<div id="DownloadResultContainer">
+				<p align="center" id="ResultInfoText" lang="en">You can download your signed document here:</p>
+					<a id="DownloadResultButton" class="btn btn-success btn-lg" lang="en">Download</a>
 			</div>
 		
 		</div>	
 	</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"> 
-		<%
-			if (request.getAttribute("FILEERR") != null) {
-		%>
-		<p>Bitte die zu signierende PDF Datei angeben.</p>
-		<%
-			}
-		%>
-
-
-		<%
-			if (WebConfiguration.getLocalBKUURL() != null) {
-		%>
-		<img src="assets/img/onlineBKU.png" alt="Sign via local BKU" /> <button type="submit"
-			value="bku" name="connector" id="bku">Lokale BKU
-		</button>
-		<%
-			}
-		%>
-		<%
-			if (WebConfiguration.getOnlineBKUURL() != null) {
-		%>
-		<img src="assets/img/onlineBKU.png" alt="Sign via online BKU"/>
-		<button type="submit" value="onlinebku" name="connector"
-			id="onlinebku">Online BKU</button>
-		<%
-			}
-		%>
-		<%
-			if (WebConfiguration.getHandyBKUURL() != null) {
-		%>
-		<img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/>
-		<button type="submit" value="mobilebku" name="connector" id="mobilebku">Handy</button>
-		<%
-			}
-		%>
-		<%
-			if (WebConfiguration.getKeystoreDefaultEnabled()) {
-		%>
-			<button type="submit" value="jks" name="connector"
-				id="jks">Server Keystore</button>
-		<%
-			}
-		%>
-		<%
-			if (WebConfiguration.getMOASSEnabled()) {
-		%>
-			<button type="submit" value="moa" name="connector"
-				id="moa">MOA-SS</button>
-		<%
-			}
-		%>
-		
-		<select name="locale" id="locale" size="3">
-      		<option>EN</option>
-      		<option>DE</option>
-    	</select>
-		
-	</form>
-	
-	<p><small>Version: <%= PdfAsHelper.getVersion() %> - <%= PdfAsHelper.getSCMRevision() %></small></p>-->
 	<footer>
 	</footer>
 </body>
-- 
cgit v1.2.3