Skip to content
This repository has been archived by the owner on Sep 4, 2019. It is now read-only.

Commit

Permalink
LandingPage: Adding init landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
Jason Scott committed Apr 11, 2013
1 parent 943e446 commit 7db7a44
Show file tree
Hide file tree
Showing 2 changed files with 225 additions and 12 deletions.
237 changes: 225 additions & 12 deletions index.html
View file
@@ -1,6 +1,6 @@
<!DOCTYPE HTML>
<!--
* Copyright 2012 Research In Motion Limited.
* Copyright 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.
Expand All @@ -11,18 +11,231 @@
* 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
* See the License for the specific language governing permissions and
* limitations under the License.
-->


<html>
<head>
<meta charset="utf-8">
<title>BlackBerry 10 Jquery Mobile Kitchensink</title>
<script>
window.location = "kitchenSink/index.html"
</script>
</head>
<body>
</body>
</html>
<head>
<meta charset=utf-8>
<meta name=description content="jQuery Mobile for BlackBerry 10">
<meta name=viewport content="width=device-width, initial-scale=1">


<style type="text/css">
body {
margin: 0;
background-color: #efefef;
font-family: 'TradeGothicNextW01-Regu',Helvetica,Verdana;
font-size: 1.4em;

}

h1 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}

.header {
background: #262626;
color: white;
width: 100%;
height: 4em;
margin-bottom: 1em;
}
.header a {
float: right;
text-decoration: none;
color: white;
padding: 1.2em .7em 1em .7em;
font-size: 1.2em;
border-right: 1px solid;
}

.header a:first-child {
border-right: none;
}

.main {
padding: 0 1em;
}

.ui-title {
display: !inline-block;
}

.column2 {
width: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;

}
img {
max-width: 100%;
}
.content {
width: 100%;
float: right;
}

.btn {
background: #b7429a;
border-radius: .2em;
padding: 1em .75em;
text-decoration: none;
color: white;
white-space: nowrap;
}
.btn:hover {
background: #a43b8a;
}
#gettingStarted{
background: #262626;
color: white;
margin-top: 3em;
}

#gettingStarted div {
padding: 0 2%;
}

#sample, #download {
display: none;
}

pre {
background-color: #606060;
font-size: 1em;
line-height: 1.3;
overflow: auto;
padding: 6px 10px;
max-width: 40em;
-webkit-border-radius: .25em;
-moz-border-radius: .25em;
border-radius: .25em;
}

.highlightCode {
background-color: #606060;
}

#b4b {
margin-top: .8em;
margin-bottom: 3em;
}

#buttons {
white-space: nowrap;
}

.normal {
font-weight: normal;
}

@media screen and (min-width: 50em) {
.column2 {
width: 50%;
}
#sample, #download {
display: inline-block;
}

}

iframe {
-moz-transform: scale(0.3, 0.3);
-webkit-transform: scale(0.3, 0.3);
-o-transform: scale(0.3, 0.3);
-ms-transform: scale(0.3, 0.3);
transform: scale(0.3, 0.3);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}

.z10 {
max-height: 500px;
padding: 87px 0 0 31px;
margin: 0 auto;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: url('site/img/Z10.png') no-repeat;
background-size: 296px;
}
</style>


<title>jQuery Mobile for BlackBerry 10</title>

</head>
<body>

<div class="header">
<a href="https://github.com/blackberry/jQueryMobile-BB10-Theme/tree/master/docs">Docs</a>
<a href="#gettingStarted">Getting Started</a>
</div>

<div class="main">
<div class="column2">
<div id="b4b">
<h1>jQuery Mobile</h1>
<h1><span class="normal">Built for</span> BlackBerry</h1>
</div>
<div id="buttons">
<a id="download" class="btn" href="">Download version 1.0</a>
<a class="btn" href="kitchensink/">Live Demo</a>

</div>
</div>
<div id="sample" class="column2">
<div class="z10">
<iframe src="kitchensink/" width="768" height="1280px"></iframe>
</div>
</div>
</div><!-- /content -->
<div id="gettingStarted" class="content">
<div>
<h2>Getting Started</h2 >
<div class="column2">
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My Page&lt;/title&gt;
&lt;link rel="stylesheet" href="BlackBerry-JQM-all.min.css" /&gt;
&lt;script src="BlackBerry-JQM-all.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div data-role="page"&gt;

&lt;div data-role="header"&gt;
&lt;h1&gt;My Title&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role="content"&gt;
&lt;p&gt;Hello world&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;/div&gt;&lt;!-- /page --&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
<div class="column2">
<p>
You will notice that this example does not include jQuery.js, jQueryMobile.css or jQueryMobile.js, this is because all of the files need are combined into <span class="highlightCode">BlackBerry-JQM-all.min.css</span> and <span class="highlightCode">BlackBerry-JQM-all.min.js</span>, this is done to reduce download overhead on the device and improve overall performance. If you prefer to include each file seperatly please check out the [getting started](/docs/README.md) documentation.
</p>
</div>
</div>
</div>
</body>
</html>
Binary file added site/img/Z10.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7db7a44

Please sign in to comment.