Merge pull request #79 from Petja/master

New UI to webapp
This commit is contained in:
Sean Owen 2014-03-06 12:12:43 +00:00
commit a3e2a52ccc
6 changed files with 114 additions and 77 deletions

3
.gitignore vendored
View file

@ -1,4 +1,5 @@
target target
private private
.idea .idea
*.iml *.iml
Thumbs.db

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 B

View file

@ -0,0 +1,25 @@
body{
background-color:#404040;
text-align:center;
color:#FFF;
font-size: 20px;
font-family: 'Droid Sans',sans-serif;
background-image:url("img/bg.png");
}
a img{
border:0;
}
a{
color:#0080FF;
text-decoration:none;
outline:0;
}
small{
font-size:75%;
}
#logo{
height:128px;
}
#installed,#error{
display:none;
}

View file

@ -1,80 +1,91 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>App Installation</title>
<title>Zebra Crossing</title>
<link rel="stylesheet" href="/style.css" type="text/css"/> <meta charset="UTF-8" />
</head> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans" />
<link rel="stylesheet" href="scan.css" />
</head>
<body> <body>
<div id="header"> <img src="img/app.png" id="logo" alt="ZXing" />
<h1>Zebra Crossing <span>from the ZXing Project</span></h1> <br />
</div> <div id="info">
<p>To scan code with your mobile camera you need to install free Barcode Scanner -app</p>
<table> <br />
<tr> <a href="https://play.google.com/store/apps/details?id=com.google.zxing.client.android" target="_blank" class="playLink"><img alt="Get it on Google Play" src="img/badge.png" /></a>
<td style="vertical-align:top;padding:4px;margin:8px"> <br />
<img src="/zxingiconsmall.png" width="48" height="48" alt="ZXing"/> <small><a href="#" id="man">or enter code manually</a></small>
</td> </div>
<td style="vertical-align:top;padding:4px;margin:8px"> <div id="installed">
<p>A web page you are viewing would like to scan a barcode with your camera phone. To do <br />
this, you need to install a new application.</p> <b>Thank you for installing!</b>
<p>If you are using an Android device, <p>To scan barcode and return to webpage <a href="">click here</a></p>
<a href="market://details?id=com.google.zxing.client.android">click here</a> to <br />
install Barcode Scanner. Once installed, it will launch automatically the next time you <small style="opacity:0.5">Remember to give 5 stars to our app on Google Play</small>
click on the hyperlink which brought you here.</p> </div>
</td> <div id="error">
</tr> <br />
<b>Something went wrong :-(</b>
<script type="text/javascript"> <p>You clicked link, but app can't start. Make sure that you have installed Barcode Scanner -app.</p>
<!-- <a href="https://play.google.com/store/apps/details?id=com.google.zxing.client.android" target="_blank" class="playLink">Try downloading again</a>
function getQueryParameter(name) { </div>
var query; <br />
query = window.location.search.substring(1);
if (query.length <= 0) <script type="text/javascript">
return null; $(function(){
name += "="; // If device is Android, change URI to Android-friendly. Otherwise use HTTP URI.
var head; if(navigator.userAgent.toLowerCase().indexOf("android") !== -1) {
head = query.indexOf(name); $(".playLink").attr("src","market://details?id=com.google.zxing.client.android");
if (head < 0) }
return null;
head += name.length; // Detect GET-parameters from URL
var tail; GET = {};
tail = query.indexOf ( "&" , head ); $.each(location.search.substr(1).split("&"),function(k,v){
if (tail < 0) var prm = v.split("=");
tail = query.length; GET[prm[0]] = prm[1];
return decodeURIComponent(query.substring(head, tail)); });
}
function process(form) { // Check is it possible to use manual mode
if (window.ret == null) if(GET.ret == "" || GET.ret == void(0) || GET.ret.indexOf("http") == -1){
return false; $("#man").hide();
var code; }
code = form['{CODE}'].value;
if (code == null || code.length == 0) // When Google Play -badge is clicked ...
return false; $(".playLink").click(function(){
var url; $("#info").hide();
url = window.ret.replace('{CODE}', encodeURIComponent(code)); $("#error").hide();
window.location = url; $("#installed").show();
return false; var url = location.href;
} if(url.indexOf("?") == -1) url = url + "?";
window.ret = getQueryParameter("ret"); url = url + "&installed=1";
// We COULD allow any protocol, but this is a we $("#installed a").attr("href",url);
if (window.ret != null && window.ret.indexOf("http") == 0) { });
document.write('<tr><td valign="top"></td><td valign="top">');
document.write('<form onsubmit="process(this); return false">'); // When manual-button is clicked ...
document.write('<input type="text" name="{CODE}" size="13"/>'); $("#man").click(function(e){
document.write('<input type="submit" value="Enter Manually"/>'); e.preventDefault();
document.write('</form>'); var man = prompt("Please type barcode below");
document.write('</td></tr>'); if(man){
} var url = GET.ret;
// --> if(url.indexOf("?") == -1) url = url + "?";
</script> url = url + "&{CODE}=" + man;
location = url;
</table> }
});
<div id="footer">
<a href="http://github.com/zxing/zxing/">ZXing Project Home Page</a> // If app isn't installed after visiting on Google Play, show error
</div> if(GET.installed !== void(0)){
</body> $("#info").hide();
</html> $("#error").show();
}
});
</script>
</body>
</html>