Permalink
Browse files

Updated index.html to support images for buttons, hid search bar

  • Loading branch information...
1 parent d8d4165 commit d63bee74b3abc4acdec11eae32d6f18e2a7ed84f Josh committed May 15, 2011
View
BIN .DS_Store
Binary file not shown.
View
BIN app/images/history.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN app/images/settings.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
415 app/index.html
@@ -1,115 +1,118 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!doctype html>
<html>
<head>
- <meta charset="UTF-8">
- <title>
- Hwy Hero
- </title>
- <link rel="stylesheet" href="lib/jqtouch/jqtouch.css" type="text/css">
- <link rel="stylesheet" href="lib/themes/jqt/theme.css" type="text/css">
- <link rel="stylesheet" href="lib/TouchScroll/src/touchscroll.css" type="text/css">
- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
- <script src="lib/jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
- <script src="lib/extensions/jqt.scroll.js" type="text/javascript"></script>
- <script src="lib/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
- <script src="lib/Google-Maps-v3-for-jQTouch/javascripts/map.init.js" type="text/javascript"></script>
- <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
- <script src="lib/map.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
- <script src="lib/jquery-ui-touch-punch/jquery.ui.touch-punch.js" type="text/javascript"></script>
- <script src="lib/css-bezier.js" type="text/javascript"></script>
- <script type="text/javascript">
- var viewCallack,
- scroller,
- geo,
- features
- </script>
- <script src="features/yelp.js" type="text/javascript"></script>
- <script type="text/javascript">
-
- navigator.geolocation.getCurrentPosition(function(position) {
- geo = position;
- });
-
- var jQT = new $.jQTouch({
- icon: 'images/iphone_icon.png',
- icon4: 'images/iphone4_icon.png',
- addGlossToIcon: false,
- startupScreen: 'images/loading.png',
- statusBar: 'black',
- preloadImages: [
- 'lib/themes/jqt/img/activeButton.png',
- 'lib/themes/jqt/img/back_button.png',
- 'lib/themes/jqt/img/back_button_clicked.png',
- 'lib/themes/jqt/img/blueButton.png',
- 'lib/themes/jqt/img/button.png',
- 'lib/themes/jqt/img/button_clicked.png',
- 'lib/themes/jqt/img/grayButton.png',
- 'lib/themes/jqt/img/greenButton.png',
- 'lib/themes/jqt/img/redButton.png',
- 'lib/themes/jqt/img/whiteButton.png',
- 'lib/themes/jqt/img/loading.gif'
- ]
- });
+ <meta charset="UTF-8" />
+<!--
+ <script src="http://jsconsole.com/remote.js?"></script>
+ <script src="http://192.168.1.2:8080/target/target-script-min.js"></script>
+-->
+ <title>Hwy Hero</title>
- $(function() {
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <meta name="viewport" content="width=device-width" />
+
+ <style type="text/css" media="screen">@import "lib/jqtouch/jqtouch.css";</style>
+ <style type="text/css" media="screen">@import "lib/themes/jqt/theme.css";</style>
- $('#route').bind("tap",function(){
- map_initialize();
- });
+ <script src="lib/jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
- // Orientation callback event
- $('#jqt').bind('turn', function(e, data){
- $('#orient').html('Orientation: ' + data.orientation);
- });
+ <script src="lib/Google-Maps-v3-for-jQTouch/javascripts/map.init.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+ <script src="map.js" type="text/javascript" charset="utf-8"></script>
+ <!-- <script src="http://maps.google.com/maps?file=api&v=3&sensor=false&key=ABQIAAAADxprL_-jsTEHie_GJ4KjLRSqiVVIFYD-ltFipz3hPkq7YzAwGhTZ-EWb-nRDkG1yslR8CBu3fwI-3w" type="text/javascript"></script> -->
+ <!-- <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=BQIAAAADxprL_-jsTEHie_GJ4KjLRSqiVVIFYD-ltFipz3hPkq7YzAwGhTZ-EWb-nRDkG1yslR8CBu3fwI-3w" type="text/javascript"></script> -->
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
+ <script src="lib/jquery-ui-touch-punch/jquery.ui.touch-punch.js" type="text/javascript" charset="utf-8"></script>
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
+ <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="lib/TouchScroll/src/touchscroll.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script src="lib/extensions/jqt.scroll.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/css-bezier.js" type="text/javascript" charset="utf-8"></script>
+
+ <script type="text/javascript" charset="utf-8">
+ var viewCallack,
+ scroller,
+ geo
+
+ navigator.geolocation.getCurrentPosition(function(position) {
+ //latitude = position.coords.latitude;
+ //longitude = position.coords.longitude;
+ geo = position;
+ console.log(geo)
+ });
+
+ var jQT = new $.jQTouch({
+ icon: 'iphone_icon.png',
+ icon4: 'iphone4_icon.png',
+ addGlossToIcon: false,
+ startupScreen: 'loading.png',
+ statusBar: 'black',
+ preloadImages: [
+ 'lib/themes/jqt/img/activeButton.png',
+ 'lib/themes/jqt/img/back_button.png',
+ 'lib/themes/jqt/img/back_button_clicked.png',
+ 'lib/themes/jqt/img/blueButton.png',
+ 'lib/themes/jqt/img/button.png',
+ 'lib/themes/jqt/img/button_clicked.png',
+ 'lib/themes/jqt/img/grayButton.png',
+ 'lib/themes/jqt/img/greenButton.png',
+ 'lib/themes/jqt/img/redButton.png',
+ 'lib/themes/jqt/img/whiteButton.png',
+ 'lib/themes/jqt/img/loading.gif',
+ 'images/logo.png'
+ ]
+ });
- $(".settings").live("tap",function() { // load the view and any script file associated with it
- var self = this;
- $("#settings-child").load("view." + $(this).attr("view") + ".html",function(msg) {
- jQT.goTo("#settings-child","slideleft");
- if($(this).is(".script")) {
- $.getScript("script." + $(self).attr("view") + ".js",function() {
- if(typeof viewCallback == "function") { viewCallback(); }
- });
- }
- });
- });
+ $(function() {
- $(".doSearch").tap(function() {
- jQT.goTo("#search","slideleft");
+ $('#route').bind("tap",function(){
+ map_initialize();
+ });
- geocoder = new google.maps.Geocoder();
- var latlng = new google.maps.LatLng(geo.coords.latitude, geo.coords.longitude);
- geocoder.geocode( { 'address': $("#searchTerm").val()}, function(results, status) {
- if (status == google.maps.GeocoderStatus.OK) {
- console.log(results)
- var html = "";
- for(var result in results) {
- var name = results[result].formatted_address
- name = name.length>25? name.substr(0,25) + "...": name;
- html+='<li><a href="javascript:;" class="ellipsis" lat="1" long="2">' + name + '</a><small class="counter">2.1</small></li>';
- }
- $("#search .plastic").html(html);
-
- $("#search .plastic li a").tap(function() {
- console.log("clicked")
- $("#routeTo").val($(this).text());
- jQT.goTo("#route","slideleft");
- })
- } else {
- // no results
- }
- });
+ // Orientation callback event
+ $('#jqt').bind('turn', function(e, data){
+ $('#orient').html('Orientation: ' + data.orientation);
+ });
- scroller = new TouchScroll($(".scroll")[0],{
- elastic:true
- });
- });
-
- $(".doRoute").tap(function() {
- jQT.goTo("#map","flip")
- })
- });
+ $(".settings").live("tap",function() {
+ var self = this;
+ $("#settings-child").load("view." + $(this).attr("view") + ".html",function(msg) {
+ jQT.goTo("#settings-child","slideleft");
+ if($(this).is(".script")) {
+ $.getScript("script." + $(self).attr("view") + ".js",function() {
+ if(typeof viewCallback == "function") { viewCallback(); }
+ });
+ }
+ });
+ });
+
+ $(".doSearch").tap(function() {
+ jQT.goTo("#search","slideleft");
+
+ geocoder = new google.maps.Geocoder();
+ var latlng = new google.maps.LatLng(geo.coords.latitude, geo.coords.longitude);
+ geocoder.geocode( { 'address': $("#searchTerm").val()}, function(results, status) {
+ if (status == google.maps.GeocoderStatus.OK) {
+ //console.log(results)
+ var html = "";
+ for(var result in results) {
+ var name = results[result].formatted_address
+ name = name.length>25? name.substr(0,25) + "...": name;
+ html+='<li><a class="ellipsis">' + name + '</a><small class="counter">2.1</small></li>';
+ }
+ $("#search .plastic").html(html)
+ } else {
+ // no results
+ }
+ });
+
+ scroller = new TouchScroll($(".scroll")[0],{
+ elastic:true
+ })
+ });
+ });
</script>
<style type="text/css" media="screen">
#jqt.fullscreen #home .info {
@@ -130,119 +133,121 @@
font-weight: bold;
text-decoration: none;
}
- .scroll {
- height:415px;
- overflow:hidden;
- }
- #jqt ul.plastic li a{
- padding:10px 10px 2px 10px;
- }
- #jqt ul.plastic li .counter {
- position:relative;
- top:4px;
- }
+ .scroll {
+ height:415px;
+ overflow:hidden;
+ }
+ #jqt ul.plastic li a{
+ padding:10px 10px 2px 10px;
+ }
+ #jqt ul.plastic li .counter {
+ position:relative;
+ top:4px;
+ }
+ /*
+ ui.plastic li {
+ width:320px;
+ overflow:hidden;
+ }
+
+ #jqt ul.plastic li .ellipsis {
+ color:#fff;
+ font-weight:normal;
+ overflow:hidden;
+ height:20px;
+ width:80%;
+ white-space:no-wrap;
+ text-overflow:ellipsis;
+ line-height:30px;
+ }
+ .plastic .counter {
+ margin:0 20px 0 0;
+ }
+ */
</style>
</head>
<body>
<div id="jqt">
- <div id="home" class="current">
+ <div id="home" class="current">
<div class="toolbar">
<h1>Hwy Hero</h1>
- </div><img src="images/logo.png" style="margin: 10px 0 -20px 80px">
- <h2>Plan A Trip</h2>
- <ul class="edit rounded">
- <li><input type="search" name="name" placeholder="eg. 'Washington Monument'" value="wilmington" id="searchTerm"></li>
- </ul>
- <ul class="individual">
- <li class="arrow" style="width:100%"><a href="javascript:;" class="doSearch">Search</a></li>
- </ul>
- <ul class="individual">
- <li><a href="#history">Trip History</a></li>
- <li><a href="#settings">Settings</a></li>
- </ul>
- </div>
- <div id="search">
- <div class="toolbar">
- <h1>Search</h1>
- <a class="back" href="#">Back</a>
- </div>
- <div class="scroll">
- <ul class="plastic"><!-- dynamic content --></ul>
- </div>
- </div>
- <div id="route">
- <div class="toolbar">
- <h1>Search</h1>
- <a class="back" href="#">Back</a>
+ <a class="button slideup" id="infoButton" href="#about">About</a>
</div>
- <h2>To</h2>
- <ul class="edit rounded">
- <li><input type="search" name="name" placeholder="eg. 'Washington Monument'" id="routeTo"></li>
- </ul>
- <h2>From</h2>
- <ul class="edit rounded">
- <li><input type="search" name="name" placeholder="eg. 'Washington Monument'" value="Current Location" id="routeFrom"></li>
- </ul>
- <h2>Options</h2>
- <ul class="rounded">
- <li><span class="toggle"><input type="checkbox" checked="checked"></span>Weather</li>
- <li><span class="toggle"><input type="checkbox" checked="checked"></span>Gas Stations</li>
- <li><span class="toggle"><input type="checkbox" checked="checked"></span>Dining</li>
- </ul>
- <ul class="individual">
- <li style="width:100%"><a href="javascript:;" class="doRoute">Go get it!</a></li>
+ <div id="logo"><img src="images/logo.png" <!-- style="margin: 10px 0 -20px 80px" --></div>
+ <h2>Plan A Trip</h2>
+ <ul class="edit rounded">
+ <li><input type="search" name="name" placeholder="eg. 'Washington Monument'" id="searchTerm" /></li>
+ </ul>
+ <ul class="individual">
+ <li class="arrow" style="width:100%"><a href="javascript:;" class="doSearch">Search</a></li>
</ul>
+ <ul class="individual">
+ <li><a href="#history">Trip History</a></li>
+ <li><a href="#settings">Settings</a></li>
+ </ul>
</div>
- <div id="map">
- <div class="toolbar">
- <h1>Trip</h1>
- <a class="back" href="#">Back</a>
- <a class="button" href="#options">Options</a>
- </div>
- <div id="map-overflow" style="overflow: hidden; padding: 0; border: 0;" class="notransform">
- <div id="map_canvas" style="margin-left: -20px; margin-top: -20px;" class="notransform"></div>
- </div>
+ <div id="about" class="selectable">
+ <p></p>
+ <p><strong>Road Trip 5000</strong><br />Version 0.1 beta<br /></p>
+ <p><em>Create powerful mobile apps with<br /> just HTML, CSS, and jQuery.</em></p>
+ <p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
</div>
- <div id="options">
- <div class="toolbar">
- <h1>Options</h1>
- <a class="back" href="#">Back</a>
- <a class="button" href="settings" view="default"></a>
- </div>
- <h2>Trip Options</h2>
- <ul class="rounded">
- <li><span class="toggle"><input type="checkbox" checked="checked"></span>Weather</li>
- <li><span class="toggle"><input type="checkbox" checked="checked"></span>Gas Stations</li>
- <li><span class="toggle"><input type="checkbox" checked="checked"></span>Dining</li>
- </ul>
- </div>
- <div id="settings">
- <div class="toolbar">
- <h1>Settings</h1>
- <a class="back" href="#">Back</a>
- <a class="button" href="settings" view="default"></a>
+ <div id="search">
+ <div class="toolbar">
+ <h1>Search</h1>
+ <a class="back" href="#">Back</a>
+ </div>
+ <div class="scroll">
+ <ul class="plastic">
+ </ul>
+ </div>
+ </div>
+ <div id="newTrip">
+ <div class="toolbar">
+ <h1>New Trip</h1>
+ <a class="back" href="#">Trips</a>
</div>
- <ul class="rounded">
- <li class="forward" view="settings-fuel"><a href="javascript:;">Gas Stations</a></li>
- <li class="forward" view="settings-food"><a href="javascript:;">Food</a></li>
- <li class="forward" view="settings-social"><a href="javascript:;">Connect Your Other Accounts</a></li>
- </ul>
- </div>
- <div id="settings-child">
- <!-- dynamic content -->
- </div>
- <div id="history">
- <div class="toolbar">
- <h1>Options</h1>
- <a class="back" href="#">Back</a>
+ <form>
+ <h2>Start</h2>
+ <ul class="edit rounded">
+ <li><input type="search" name="name" placeholder="Start" id="some_name" /></li>
+ </ul>
+ <h2>Destination</h2>
+ <!-- <ul class="edit rounded">
+ <li><input type="search" name="search" placeholder="Destination" id="some_name" /></li>
+ </ul> -->
+ <ul class="individual">
+ <li><a href="#map" id="route">Start</a></li>
+ <li><a href="javascript:;" class="reset">Reset</a></li>
+ </ul>
+ </form>
+ </div>
+ <div id="map">
+ <div class="toolbar">
+ <h1>Your Trip</h1>
+ <a class="back" href="#">Details</a>
+ <a class="button" href="#settings">Settings</a>
</div>
- <h2>Previous Trips</h2>
- <ul class="rounded">
- <li>Pizza Hut - Jan 21, 2001</li>
- <li>Pizza Hut - Feb 01, 2001</li>
- <li>Pizza Hut - Feb 02, 2001</li>
- </ul>
- </div>
+ <div id="map-overflow" style="overflow: hidden; padding: 0; border: 0;" class="notransform">
+ <div id="map_canvas" style="margin-left: -20px; margin-top: -20px;" class="notransform"></div>
+ </div>
+ </div>
+ <div id="settings">
+ <div class="toolbar">
+ <h1>Settings</h1>
+ <a class="back" href="#">Back</a>
+ <a class="button" href="settings" view="default"></a>
+ </div>
+ <h2>Information</h2>
+ <ul class="rounded">
+ <li class="forward"><a href="javascript:;" class="settings" view="settings-weather"><span class="toggle"><input type="checkbox" /></span> Weather</a></li>
+ <li class="forward"><a href="javascript:;" class="settings" view="settings-fuel"><span class="toggle"><input type="checkbox" /></span> Fuel</a></li>
+ <li class="forward"><a href="javascript:;" class="settings script" view="settings-food"><span class="toggle"><input type="checkbox" /></span> Food</a></li>
+ </ul>
+ <h2>Options</h2>
+ </div>
+ <div id="settings-child">
+ </div>
</div>
</body>
-</html>
+</html>
View
82 app/lib/themes/jqt/theme.css
@@ -1,14 +1,17 @@
+/* @override http://hwyhero.com/app/lib/themes/jqt/theme.css */
+
body {
background: #000;
color: #ddd;
}
#jqt > * {
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#5e5e65));
+ /*background: #5c7a7a;*/
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c7a7a), color-stop(100%,#5c7b7b));
}
#jqt h1, #jqt h2 {
font: bold 18px "Helvetica Neue", Helvetica;
- text-shadow: rgba(255,255,255,.2) 0 1px 1px;
- color: #000;
+ text-shadow: rgba(0,0,0,.2) 0 1px 1px;
+ color: #fff;
margin: 10px 20px 5px;
}
/* @group Toolbar */
@@ -135,7 +138,7 @@ body {
}
#jqt ul {
color: #aaa;
- border: 1px solid #333333;
+ border: 1px solid #454545;
font: bold 18px "Helvetica Neue", Helvetica;
padding: 0;
margin: 15px 10px 17px 10px;
@@ -154,17 +157,17 @@ body {
-webkit-border-bottom-right-radius: 8px;
}
#jqt ul li {
- color: #666;
+ color: #fff;
border-top: 1px solid #333;
border-bottom: #555858;
list-style-type: none;
padding: 10px 10px 10px 10px;
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#787878), to(#666666));
overflow: hidden;
}
#jqt ul li.arrow {
background-color: #4c4d4e !important;
- background-image: url(img/chevron.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
+ background-image: url(img/chevron.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#787878), to(#666666));
background-position: right center !important;
background-repeat: no-repeat !important;
}
@@ -191,7 +194,7 @@ body {
text-shadow: rgba(0,0,0,.2) 0 1px 1px;
}
#jqt ul li a.active, #jqt ul li a.button {
- background-color: #53b401;
+ background: #FF9432;
color: #fff;
}
#jqt ul li a.active.loading {
@@ -255,6 +258,9 @@ body {
display: block;
padding: 0;
}
+#jqt form .white{
+ color: #fff;
+}
/*
@end */
/* @group Forms */
@@ -276,7 +282,7 @@ body {
#jqt ul li input[type="url"],
#jqt ul li textarea,
#jqt ul li select {
- color: #777;
+ color: #fff;
background: transparent url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
border: 0;
font: normal 17px "Helvetica Neue", Helvetica;
@@ -313,6 +319,7 @@ body {
#jqt.android ul li input[type="checkbox"]:after, #jqt.android ul li input[type="radio"]:after {
margin: 3px 0 0 24px;
}
+
/* @end */
/* @group Mini Label */
#jqt ul li small {
@@ -385,11 +392,15 @@ body {
#jqt .toggle {
width: 94px;
position: relative;
+ /*right: 50px;*/
height: 27px;
display: block;
overflow: hidden;
float: right;
}
+#jqt .forward .toggle{
+ right: 50px;
+}
#jqt .toggle input[type="checkbox"]:checked {
background-position: 0 0;
}
@@ -572,3 +583,56 @@ input[type='submit'] {
font-weight: inherit;
padding: 10px;
}
+
+
+/* @group Logo */
+
+#logo{
+ margin: 20px auto;
+ text-align: center;
+ /*display: block;
+ height: 150px;*/
+
+}
+
+#jqt #logo img{
+ -webkit-animation-name: intro;
+ -webkit-animation-duration: 2s;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-direction: alternate;
+ /*-webkit-animation: intro 1.5s 1 alternate;*/
+ position: relative;
+}
+
+@-webkit-keyframes intro {
+ 0%{
+ right: 200%;
+}
+ 10%{
+ right: 190%;
+}
+ 33%{
+ right: 100%;
+}
+ 85%{
+ -webkit-transform: rotate(1deg);
+}
+ 90%{
+ -webkit-transform: rotate(-3deg);
+}
+ 95%{
+ right: 2%;
+}
+ 100%{
+ right: 0;
+ -webkit-transform: rotate(0);
+}
+}
+/* @end */
+
+#home .toolbar h1{
+ font-family: 'Pacifico', arial, serif;
+ font-size: 21px;
+ font-weight: normal;
+ text-shadow: rgba(0,0,0,1) 0 -1px 1px;
+}

0 comments on commit d63bee7

Please sign in to comment.