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

1
.gitignore vendored
View file

@ -2,3 +2,4 @@ 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

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