Skip to content

Commit 57fabfb

Browse files
rossengeorgievrossengeorgiev
committed
PoC template completed
SCREEN-SIZES, includes all screens we need to cover test-*.html will contain test bed to test certain before going on the phone. Should make test easier
1 parent a3b3e9b commit 57fabfb

File tree

9 files changed

+313
-0
lines changed

9 files changed

+313
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
resources/*

‎SCREEN-SIZES‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
P = portrait
2+
L = landscape
3+
4+
iPhone 3G
5+
-------
6+
Full mode: 320x480 (P), 480x420 (L)

‎css/main.css‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
/* Habitat Mobile Tracker
2+
* Main style sheet
3+
*
4+
*/
5+
6+
html, body {
7+
margin: 0;
8+
padding: 0;
9+
width: 100%;
10+
height: 100%;
11+
}
12+
13+
header {
14+
padding: 0;
15+
margin: 0;
16+
padding-top: 20px;
17+
height: 50px;
18+
min-height: 50px;
19+
max-height: 50px;
20+
border-bottom: 5px solid #33b5e5;
21+
box-shadow: 0px 5px 3px #ccc;
22+
}
23+
header > div,
24+
#app_name {
25+
height: 50px;
26+
}
27+
28+
#map_canvas {
29+
margin: 0;
30+
padding: 0;
31+
height: 100%;
32+
width: 100%;
33+
}
34+
35+
.nav {
36+
list-style: none outside none;
37+
margin: 0;
38+
padding: 0;
39+
height: 40px;
40+
display: block;
41+
min-width: 40px;
42+
width: auto;
43+
float: left;
44+
margin: 5px 0px;
45+
}
46+
47+
.nav > li {
48+
margin: 0;
49+
padding: 0;
50+
float: left;
51+
width: 40px;
52+
height: 30px;
53+
background: transparent url('../img/menu-icons.png') no-repeat top left;
54+
border-right: 1px solid #33b5e5;
55+
padding: 5px;
56+
cursor: pointer;
57+
}
58+
.nav > li:active { background-color: #33b5e5; }
59+
.nav > li:hover { border-bottom: 5px solid #fff; }
60+
.nav > li.home { background-position: 5px 0px; }
61+
.nav > li.navigation { background-position: 5px -40px; }
62+
.nav > li.chasecar { background-position: 5px -80px; }
63+
.nav > li.stations { background-position: 5px -120px; }
64+
65+
.header i {
66+
float: right;
67+
font-weight: normal;
68+
color: #000;
69+
}
70+
.header i:after { content: "▼"; }
71+
72+
@media only screen and (max-height: 480px) {
73+
.landscape { display: none; }
74+
#map_canvas {
75+
height: 225px;
76+
}
77+
#main {
78+
height: 180px;
79+
}
80+
#main .header {
81+
height: 20px;
82+
padding: 10px;
83+
border-bottom: 2px solid #33b5e5;
84+
}
85+
#main .data {
86+
background-color: #f4f4f4;
87+
height: 140px;
88+
padding: 0px 10px;
89+
}
90+
#main .data .left {
91+
float: left;
92+
width: 220px;
93+
padding-right: 20px;
94+
}
95+
#main .data .right {
96+
float: right;
97+
width: 60px;
98+
}
99+
#main .data dl > dt {
100+
color: #000;
101+
line-height: 11px;
102+
margin-top: 15px;
103+
font-weight: bold;
104+
font-size: 14px;
105+
}
106+
#main .data dl > dd {
107+
padding: 0;
108+
margin: 0;
109+
text-transform:uppercase;
110+
line-height: 11px;
111+
font-size: 11px;
112+
}
113+
#main .data dl > dt.recievers {
114+
font-size: 10px;
115+
font-weight: normal;
116+
}
117+
#main .data dl > dd.recievers {
118+
font-size: 10px;
119+
}
120+
}
121+
@media only screen and (max-height: 320px) {
122+
.portrait { display: none; }
123+
.landscape { display: block; }
124+
.container { width: 460px; }
125+
#map_canvas {
126+
float: right;
127+
height: 245px;
128+
width: 280px;
129+
}
130+
#main {
131+
float: left;
132+
height: 245px;
133+
width: 199px;
134+
border-right: 1px solid #ddd;
135+
overflow: hidden;
136+
}
137+
#main .header {
138+
height: 20px;
139+
padding: 10px;
140+
border-bottom: 2px solid #33b5e5;
141+
}
142+
#main .data {
143+
background-color: #f4f4f4;
144+
height: 140px;
145+
padding: 0px 10px;
146+
}
147+
#main .data .left {
148+
float: right;
149+
width: 160px;
150+
padding-right: 20px;
151+
}
152+
#main .data dl > dt {
153+
color: #000;
154+
line-height: 11px;
155+
margin-top: 15px;
156+
font-weight: bold;
157+
font-size: 14px;
158+
}
159+
#main .data dl > dd {
160+
padding: 0;
161+
margin: 0;
162+
text-transform:uppercase;
163+
line-height: 11px;
164+
font-size: 11px;
165+
}
166+
#main .data dl > dt.recievers {
167+
font-size: 10px;
168+
font-weight: normal;
169+
}
170+
#main .data dl > dd.recievers {
171+
font-size: 10px;
172+
}
173+
}

‎img/menu-icons-large.png‎

8.27 KB
Loading

‎img/menu-icons.png‎

6.59 KB
Loading

‎index.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
3+
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
4+
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
5+
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
6+
<head>
7+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
8+
<title>habitat mobile tracker</title>
9+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
10+
<meta name="apple-mobile-web-app-capable" content="yes" />
11+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
12+
<link rel="stylesheet" href="t/css/base.css"/>
13+
<link rel="stylesheet" href="t/css/skeleton.css"/>
14+
<link rel="stylesheet" href="t/css/layout.css"/>
15+
<!--[if lt IE 9]>
16+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
17+
<![endif]-->
18+
<link rel="shortcut icon" href="t/images/favicon.ico" />
19+
<link rel="stylesheet" href="css/main.css"/>
20+
<script type="text/javascript" language="javascript" src="js/jquery-1.8.3-min.js"></script>
21+
<script type="text/javascript" language="javascript" src="js/app.js"></script>
22+
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
23+
<script>
24+
var map;
25+
function initialize() {
26+
var mapOptions = {
27+
zoom: 8,
28+
center: new google.maps.LatLng(-34.397, 150.644),
29+
mapTypeId: google.maps.MapTypeId.ROADMAP
30+
};
31+
map = new google.maps.Map(document.getElementById('map_canvas'),
32+
mapOptions);
33+
}
34+
35+
google.maps.event.addDomListener(window, 'load', initialize);
36+
</script>
37+
</head>
38+
<body>
39+
<header>
40+
<div class="container">
41+
<ol class="nav">
42+
<li class="home"></li>
43+
<li class="navigation"></li>
44+
<li class="chasecar"></li>
45+
<li class="stations"></li>
46+
</ol>
47+
<span id="app_name"><b>tracker</b></span>
48+
</div>
49+
</header>
50+
51+
52+
<div id="map_canvas"></div>
53+
<div id="main">
54+
<div class="portrait">
55+
<div class="header">Apex Lumia<i class="icon-arrow"></i></div>
56+
<div class="data">
57+
<div class="left">
58+
<dl>
59+
<dt>2012-12-30 20:38:34</dt>
60+
<dd>time</dd>
61+
<dt>48.985682, 19.41762</dt>
62+
<dd>position</dd>
63+
<dt class="recievers">Recieved by:</dt>
64+
<dd class="recievers">You, ApexHAB, M0UPU, ASTILA, LZ1DEV, Tinky Tinky, Dipsy, Laa-Laa</dd>
65+
</dl>
66+
</div>
67+
<div class="right">
68+
<dl>
69+
<dt>5.4 m/s</dt>
70+
<dd>rate</dd>
71+
<dt>11543 m</dt>
72+
<dd>altitude</dd>
73+
<dt>41283 m</dt>
74+
<dd>max alt</dd>
75+
</dl>
76+
</div>
77+
</div>
78+
</div>
79+
<div class="landscape">
80+
<div class="header">Apex Lumia<i class="icon-arrow"></i></div>
81+
<div class="data">
82+
<div class="left">
83+
<dl>
84+
<dt>2012-12-30 20:38:34</dt>
85+
<dd>time</dd>
86+
<dt>48.985682, 19.41762</dt>
87+
<dd>position</dd>
88+
<dt class="recievers">Recieved by:</dt>
89+
<dd class="recievers">You, ApexHAB, M0UPU, ASTILA, LZ1DEV, Tinky Tinky, Dipsy, Laa-Laa</dd>
90+
</dl>
91+
</div>
92+
</div>
93+
<div class="header">PAVA<i class="icon-arrow"></i></div>
94+
<div class="header">TINYv1<i class="icon-arrow"></i></div>
95+
</div>
96+
</div>
97+
</body>
98+
</html>

‎js/app.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
function hideAddressbar()
2+
{
3+
window.scrollTo(0, 1);
4+
}
5+
6+
$(window).ready(function() {
7+
window.onorientationchange = hideAddressbar();
8+
9+
$('.home').click(function() {
10+
var size = "";
11+
size += $(window).width();
12+
size += "x";
13+
size += $(window).height();
14+
15+
alert(size);
16+
});
17+
18+
$('.stations').click(function() {
19+
window.location.href = window.location.href;
20+
});
21+
});

‎js/jquery-1.8.3-min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test-iphone3g.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<title>Test page for iPhone 3G</title>
4+
</head>
5+
<style>
6+
iframe { overflow: hidden; }
7+
</style>
8+
<body>
9+
<iframe src="index.html" width="320px" height="480px"></iframe>
10+
<iframe src="index.html" width="480px" height="320px"></iframe>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)