forked from psiborg/BB10Template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·187 lines (178 loc) · 20.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<!--
Copyright 2012-2013 Research In Motion Limited.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>BB10 Template</title>
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href="css/app.css" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<!-- Swipe-down Application Menu -->
<section id="appMenu" class="appMenu slideDown">
<div class="appMenuBar">
<div class="appMenuButton" data-id="settings">Settings</div>
<div class="appMenuButton" data-id="help">Help</div>
</div>
</section>
<!-- Tab Sidebar Menu -->
<section id="sidebarMenu" class="sidebarMenu slideRight">
<ul>
<li data-id="tab1">Tab 1</li>
<li data-id="tab2">Tab 2</li>
<li data-id="tab3">Tab 3</li>
<li data-id="tab4">Tab 4</li>
<li data-id="tab5">Tab 5</li>
<li data-id="tab6">Tab 6</li>
<li data-id="tab7">Tab 7</li>
<li data-id="tab8">Tab 8</li>
<li data-id="tab9">Tab 9</li>
<li data-id="tab10">Tab 10</li>
<li data-id="tab11">Tab 11</li>
<li data-id="tab12">Tab 12</li>
<li data-id="tab13">Tab 13</li>
<li data-id="tab14">Tab 14</li>
<li data-id="tab15">Tab 15</li>
</ul>
</section>
<section id="main" class="main">
<!-- Main Content -->
<section class="content">
<h1 id="heading">BB10 Template</h1>
<div><input type="button" value="Toggle Application Menu" onclick="app.toggle();"></div>
<div id="tab1" class="tab tab-active">
<h2>Tab 1</h2>
<p><a href="#" data-target="http://www.lipsum.com/">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Nam sodales consequat lacus, ac lacinia odio ultrices at. Morbi congue volutpat hendrerit. In sit amet risus quis quam consectetur dignissim quis a magna. Nam facilisis lorem sit amet leo posuere consequat eget in sapien. Suspendisse in feugiat lacus. Aenean pretium enim non lectus adipiscing ut facilisis ante dictum. Sed laoreet augue ac felis mattis non egestas sapien vulputate. Aliquam condimentum justo non ipsum tristique commodo. Etiam dolor augue, eleifend vitae molestie id, semper consectetur libero. Nunc id sem odio, sed congue ante. Suspendisse pulvinar scelerisque sem, in porta elit tincidunt eu. Praesent suscipit ultrices nisi, id feugiat lacus mattis dapibus.</p>
<p>Vestibulum at mauris sed lacus pretium euismod. Vivamus fermentum viverra iaculis. Vestibulum facilisis justo nisl, at ultrices sapien. Ut vulputate aliquam libero, vitae faucibus eros ultricies id. Nulla facilisi. Sed vehicula purus vitae tortor vestibulum vel volutpat neque volutpat. Praesent turpis purus, sodales quis cursus vitae, ultrices ut massa. Aenean aliquam pretium libero, eu consequat felis iaculis ut. Phasellus sollicitudin metus vitae nulla tincidunt a rhoncus magna gravida. Suspendisse nec urna orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Pellentesque vel tellus in leo commodo aliquet. Nam ut volutpat urna. Aliquam id nibh leo. Pellentesque dignissim porta massa. Praesent nisi risus, blandit in tempus venenatis, interdum molestie est. In viverra nulla a velit venenatis at dignissim mauris pharetra. Nunc venenatis tellus quam, eget auctor magna. Praesent ullamcorper, dolor ornare vehicula malesuada, arcu lacus pretium nisl, at pulvinar est massa vitae eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec porta erat in nisl pulvinar hendrerit. Ut ut leo purus, nec scelerisque orci. Nam bibendum ullamcorper elit, et pharetra odio imperdiet id. Maecenas tempor lobortis velit, non faucibus turpis vestibulum eu. Curabitur suscipit, lorem condimentum bibendum volutpat, tellus mauris tempus elit, a consectetur enim arcu quis felis. In sit amet magna quis tortor dapibus cursus.</p>
<p>Duis nec turpis sapien. Fusce in velit ante, eu fermentum massa. Nunc pretium pellentesque metus pharetra fringilla. Mauris at quam a dui condimentum sodales consectetur non sem. Phasellus in faucibus mauris. Maecenas tincidunt, quam nec hendrerit semper, magna urna volutpat enim, nec ultricies mauris orci ut magna. Cras eu turpis tortor. Nunc consequat malesuada velit ut euismod. Mauris porttitor magna in erat tincidunt auctor eu at quam. Cras in nulla quis nisl egestas sagittis. Proin luctus, augue et fringilla vestibulum, ipsum mauris venenatis libero, ac ullamcorper felis dolor egestas ante. Cras a est auctor risus accumsan aliquet.</p>
<p>Praesent lacinia euismod vehicula. Donec sed ligula eget ligula pretium posuere. Sed vel suscipit sem. Donec semper luctus ipsum a vehicula. Vestibulum erat lacus, auctor porta pharetra vitae, accumsan sit amet justo. Aliquam non tortor in augue blandit feugiat vitae vitae mi. Nunc pharetra consectetur arcu.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce eget lobortis nisl. Donec ornare congue mi ut cursus. Vestibulum sit amet ornare eros. Ut pharetra, elit ac ultricies egestas, sapien sem hendrerit odio, eget luctus justo est sed est. Vivamus vulputate, lacus sed dictum tempus, sem erat viverra nisi, nec volutpat elit libero iaculis dui. Mauris tincidunt lorem nec diam condimentum at euismod diam commodo. Maecenas tincidunt velit vel risus ornare sodales. Sed quis sem dolor, non hendrerit sem. Praesent lectus urna, fringilla in lobortis tempor, congue vitae mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sem sapien, gravida ut eleifend at, consectetur a est. Praesent consectetur fermentum congue. Cras eleifend laoreet lectus vitae vehicula. Donec mollis, magna et gravida facilisis, elit nibh dignissim lorem, vel rhoncus magna arcu eu eros. Nullam placerat odio nec justo sagittis tristique.</p>
<p>Curabitur nunc massa, lacinia quis ullamcorper quis, tempus eget elit. Mauris eu aliquam erat. Fusce dignissim sagittis eros, in sollicitudin lacus interdum non. Quisque velit est, placerat adipiscing fermentum eu, consequat eu purus. Suspendisse sed justo diam. Vestibulum erat justo, egestas eget tempus at, rhoncus eu arcu. Vestibulum non mi massa. Donec dui sem, elementum in pellentesque et, ultricies sit amet dui. Nullam purus ante, dignissim eu luctus non, vulputate eu turpis. Duis sollicitudin vulputate sollicitudin. Aliquam erat volutpat. Nunc tempor nisi eget nisi fermentum in pellentesque lorem feugiat.</p>
<p>Etiam nisi ipsum, lacinia eget rutrum id, rhoncus id nisl. Proin eu sem vel ligula dapibus gravida ut commodo risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris rhoncus aliquet elit, quis bibendum turpis rhoncus dictum. Curabitur pharetra, diam a elementum sollicitudin, nibh nunc tristique lorem, eu sagittis dolor sapien id nulla. Vestibulum hendrerit ligula in ipsum gravida eget cursus velit congue. Vestibulum sollicitudin, urna sit amet gravida pretium, enim felis vehicula erat, sed consectetur metus nunc a risus. Vestibulum eu tortor quam. Aliquam vitae lorem eu nisl imperdiet facilisis nec molestie mi. Fusce convallis laoreet neque quis blandit. Donec nec neque nisi. Donec quis dolor metus, ut rhoncus erat.</p>
<p>Praesent ornare purus quis dui pharetra hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ac magna lectus. Donec nibh mi, euismod eget consectetur et, cursus sed augue. Sed rhoncus interdum ornare. Curabitur vel arcu augue. Sed dapibus leo a ipsum congue at vestibulum dui varius. Aliquam ut ipsum purus, sed scelerisque odio. Integer massa tortor, blandit id aliquam id, pellentesque quis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Praesent eleifend tellus id felis tempus mattis. Nunc fringilla urna purus. Morbi interdum leo et sapien consectetur varius nec blandit magna. Phasellus viverra malesuada elit, eget fringilla nulla feugiat at. Nulla et elit a arcu posuere egestas. Proin dictum orci sed justo dapibus porta sit amet tincidunt lacus. Praesent sit amet mauris risus, vel ullamcorper nisl.</p>
<p>Aliquam sem sapien, congue vitae vestibulum vel, accumsan eget est. Suspendisse dictum lorem at magna pharetra semper. Sed convallis magna in nisi rutrum auctor. Aliquam egestas pellentesque sem non posuere. Mauris ultricies neque tellus. Fusce hendrerit ipsum sed nisl fermentum ac pharetra sem blandit. Ut ut interdum eros. Fusce dictum auctor nisi, quis feugiat purus mattis nec. In suscipit est nec magna vehicula volutpat. Fusce laoreet lacus tellus. Ut pharetra congue tellus, in suscipit eros interdum at. Nullam eget tellus et ipsum vestibulum euismod. Sed consectetur libero et nisl hendrerit ut ultrices libero dignissim. Duis vehicula elit scelerisque diam suscipit sit amet posuere augue interdum.</p>
<p>Ut eget neque nulla. Sed fringilla dui vitae augue luctus sollicitudin. Nulla facilisi. Donec hendrerit feugiat risus sit amet lacinia. Nam molestie ante nec nisi pharetra pellentesque. Vestibulum in mi ac orci semper dapibus vel in orci. Integer eget tellus vel ante mattis ultrices. Vivamus sagittis blandit urna. In porttitor, arcu sed sodales fermentum, magna odio imperdiet metus, a commodo augue ipsum ac felis.</p>
<p>Phasellus quis neque neque. Etiam aliquet ullamcorper mattis. Suspendisse dignissim posuere viverra. Nam mauris nunc, convallis id porta interdum, placerat ac ante. Nunc gravida facilisis nisi, dapibus consequat arcu vestibulum in. Ut laoreet, nisl malesuada volutpat facilisis, lorem risus consequat magna, ut pellentesque leo risus eu risus. Integer ullamcorper metus sit amet erat vulputate lacinia. Nam eget elit neque, lacinia tempus velit. Phasellus eu lorem augue, et elementum sapien. Quisque varius placerat congue. Phasellus dignissim mauris vel eros venenatis adipiscing. Phasellus mollis, felis et molestie consectetur, nisl nisi vehicula magna, eget eleifend eros sem in metus.</p>
<p>Nunc porta eleifend pharetra. Fusce tortor risus, vestibulum aliquet consectetur sed, vestibulum eu dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec mattis commodo nulla. Curabitur vel justo massa. Mauris gravida lacus leo, non porta metus. Fusce enim mi, egestas at commodo id, sagittis id augue. Curabitur eleifend vestibulum magna vitae vestibulum. Integer a mi at dolor imperdiet ultricies et faucibus ligula. Maecenas venenatis, augue a euismod suscipit, arcu purus mollis turpis, vitae elementum mi neque non lectus. Praesent nisi nulla, mattis non aliquet nec, ultrices non sapien. Praesent feugiat mattis mauris, eget vulputate mauris mattis id. Fusce malesuada, metus quis dictum eleifend, dui nisi fermentum mi, nec pellentesque mi nunc sed lacus. Quisque rutrum dolor sed nisl dignissim et luctus nibh varius. Proin laoreet ligula eu sapien pharetra pretium.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae enim est. Nam in nulla ornare ante venenatis iaculis at vel tortor. Nullam sed pretium ante. Praesent eget enim quis nunc eleifend imperdiet. Integer placerat dignissim lorem, ut condimentum tortor mollis vitae. Mauris a magna orci. Aenean elementum tristique tristique. Nulla facilisi. Ut consectetur libero nec nibh aliquet sed semper eros aliquet.</p>
<p>Donec sagittis dolor vel magna fringilla eleifend. Sed a mattis nulla. Vestibulum commodo ultricies nunc sed semper. Duis ut odio orci, a accumsan magna. Sed condimentum faucibus laoreet. Proin mattis arcu non ante aliquam ut sagittis lacus rhoncus. Suspendisse sit amet nibh a augue rutrum dapibus. Sed sit amet mollis leo. Nulla facilisi. Quisque accumsan faucibus urna, vitae vestibulum nunc condimentum ut. Duis vitae rhoncus justo. Vivamus urna orci, placerat vel placerat ut, accumsan quis purus.</p>
<p>Aliquam et nisl nulla, at lacinia lectus. Nam nulla massa, rutrum a venenatis vel, lacinia ut sapien. Curabitur justo est, ultricies vel iaculis eu, pretium ac justo. Nam erat erat, venenatis in accumsan non, laoreet a lorem. Mauris justo massa, bibendum ac scelerisque ac, iaculis in sem. Aliquam pellentesque lacinia est at tincidunt. Phasellus consequat leo et sem semper vitae sodales risus fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer neque nibh, varius at accumsan ut, semper a nulla. Sed id velit sed magna pulvinar elementum rutrum in lorem. Nullam a dapibus metus. Nam scelerisque lectus et elit viverra aliquam. Maecenas rhoncus metus eget nulla faucibus vitae adipiscing lectus pulvinar. Mauris a mi id dolor tempus sollicitudin. Integer pharetra nunc ac neque auctor scelerisque. Nulla nunc neque, faucibus vitae rutrum molestie, aliquam eget urna.</p>
<p>Vestibulum justo purus, dignissim sit amet accumsan et, fermentum sed purus. Donec rutrum turpis sit amet diam cursus pellentesque. Mauris pulvinar convallis dictum. Mauris ac ligula ut nulla adipiscing ornare. Etiam euismod augue eu sapien rhoncus non tincidunt augue vehicula. Cras velit felis, condimentum accumsan egestas a, consectetur et massa. Suspendisse aliquet ante sed quam bibendum in condimentum elit fermentum. Aliquam viverra scelerisque nulla id iaculis. Fusce luctus posuere risus, sit amet aliquet urna dapibus sodales. Aliquam erat volutpat. Etiam in nibh quis lacus bibendum facilisis. Curabitur non orci convallis tortor varius fringilla non vitae tellus. Nulla commodo urna justo. Aliquam dictum arcu at libero convallis eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae nulla id turpis tempor suscipit sit amet ut lectus.</p>
<p>In id tellus nec nisl cursus adipiscing in vitae erat. Phasellus non metus quis quam pharetra mollis. Quisque dolor dui, hendrerit sed facilisis pretium, hendrerit sed urna. Aliquam imperdiet elit tortor. Donec ut scelerisque sem. Donec a pulvinar nisi. Proin augue purus, porta et aliquam sed, volutpat nec dolor. Praesent ut lectus lectus. Quisque dignissim, dolor nec tincidunt scelerisque, lectus erat convallis nunc, sit amet interdum enim arcu id sem. Morbi ornare quam quis velit consequat sit amet ornare eros dapibus. Mauris a purus sagittis lorem rhoncus fermentum.</p>
<p>Aenean facilisis pellentesque sem vel dictum. Duis vel ante lacus. Aliquam sed tristique enim. Fusce vel lacus tellus, vitae accumsan mauris. Fusce volutpat pellentesque arcu sed condimentum. Quisque sit amet magna eu ligula laoreet laoreet tristique a dolor. Morbi mollis ante vitae odio aliquam auctor. Cras ac molestie lectus. Pellentesque vestibulum ipsum a purus ultrices adipiscing. Sed auctor elit et tellus adipiscing iaculis. Maecenas mi augue, malesuada vel porta et, mattis vitae velit. Sed et tortor metus. Proin faucibus ullamcorper eros, et placerat orci suscipit ut. Nulla et ipsum massa, rhoncus bibendum mi. Duis id turpis neque, in tristique nisi. Suspendisse consequat iaculis diam.</p>
</div>
<div id="tab2" class="tab">
<h2>Tab 2</h2>
</div>
<div id="tab3" class="tab">
<h2>Tab 3</h2>
</div>
<div id="tab4" class="tab">
<h2>Tab 4</h2>
</div>
<div id="tab5" class="tab">
<h2>Tab 5</h2>
</div>
<div id="tab6" class="tab">
<h2>Tab 6</h2>
</div>
<div id="tab7" class="tab">
<h2>Tab 7</h2>
</div>
<div id="tab8" class="tab">
<h2>Tab 8</h2>
</div>
<div id="tab9" class="tab">
<h2>Tab 9</h2>
</div>
<div id="tab10" class="tab">
<h2>Tab 10</h2>
</div>
<div id="tab11" class="tab">
<h2>Tab 11</h2>
</div>
<div id="tab12" class="tab">
<h2>Tab 12</h2>
</div>
<div id="tab13" class="tab">
<h2>Tab 13</h2>
</div>
<div id="tab14" class="tab">
<h2>Tab 14</h2>
</div>
<div id="tab15" class="tab">
<h2>Tab 15</h2>
</div>
</section>
<!-- Action Bar -->
<div class="actionBar">
<div id="actionSidebar" class="actionButton actionButtonOverflow"> </div>
<div class="actionBarScroller">
<div id="actionButtons" class="actionBarScrollerContainer">
<div class="actionButton" data-id="item1">Item 1</div>
<div class="actionButton" data-id="item2">Item 2</div>
<div class="actionButton" data-id="item3">Item 3</div>
<div class="actionButton" data-id="item4">Item 4</div>
<div class="actionButton" data-id="item5">Item 5</div>
<div class="actionButton" data-id="item6">Item 6</div>
<div class="actionButton" data-id="item7">Item 7</div>
<div class="actionButton" data-id="item8">Item 8</div>
<div class="actionButton" data-id="item9">Item 9</div>
<div class="actionButton" data-id="item10">Item 10</div>
</div>
</div>
<div id="actionMore" class="actionButton actionMore"> </div>
</div>
<!-- Action Menu -->
<div id="actionMenu" class="actionMenu slideLeft">
<ul>
<li data-id="action1">Action 1</li>
<li data-id="action2">Action 2</li>
<li data-id="action3">Action 3</li>
<li data-id="action4">Action 4</li>
<li data-id="action5">Action 5</li>
<li data-id="action6">Action 6</li>
<li data-id="action7">Action 7</li>
<li data-id="action8">Action 8</li>
<li data-id="action9">Action 9</li>
<li data-id="action10">Action 10</li>
<li data-id="action11">Action 11</li>
<li data-id="action12">Action 12</li>
<li data-id="action13">Action 13</li>
<li data-id="action14">Action 14</li>
<li data-id="action15">Action 15</li>
</ul>
</div>
</section>
<script src="local:///chrome/webworks.js"></script>
<script src="js/api.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
// add load events
if (navigator.userAgent.match(/WebWorks/)) {
window.addEventListener('DOMContentLoaded', function(e) {
document.addEventListener('webworksready', app.init); // BB10
}, false);
}
else {
window.addEventListener('DOMContentLoaded', app.init);
}
</script>
</body>
</html>