about.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>About Us</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/settings.css" type="text/css"/>
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="lib/jquery.min.js"></script>
</head>
<body>
<div id="app" class=" clear">
	<div id="main">
		<div class="header clear">
			<span class="back-btn"><i class="fa fa-chevron-left"></i></span>
			<span class="page-title">About Us</span>
		</div>
		<div id="container" class="about-page">
			<div class="app-name">Whyyu Books</div>
			<div class="version">version：1.0.0</div>
			<p>Scan to download</p>
			<img src="images/whyyubooks_qr_code.png" class="download-app-qr-code"/>

			<div class="copyright">
				<p><a href="http://www.whyyu.com" target="_system">Children's English online</a></p>

				<p>&copy;2009 - 2014&nbsp;Hundred Lanterns Networks</p>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function () {

		// back to settings page
		$('.header').on('touchend', '.back-btn', function () {
			location.replace('settings.html');
		});

		// hide nav menu when start to touch other part
		$(document).on('touchend', function () {
			$('.nav-menu').hide(0);
		});
	});

	document.addEventListener('deviceready', onDeviceReady, false);

	// handle device events
	function onBackKeyDown() {
		location.replace('settings.html');
	}
	function onDeviceReady() {
		document.addEventListener("backbutton", onBackKeyDown, false);
	}
</script>
</body>
</html>