Skip to content

Commit

Permalink
Finalized splash page
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Sita committed Sep 9, 2013
1 parent 7fbbe05 commit 57ac8f8
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 106 deletions.
28 changes: 27 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,29 @@
chromeConnect
=============
TODO

## About
ChromeConnect enables a user to turn their cell phone or tablet into a mouse to control their browser experience in chrome. The functionality currently supports mouse control with clicks, as well as the ability to zoom by pinching and two-finger scrolling up or down the page.

This extension captures gesture interactions taken from a paired mobile or tablet device, and incorporates the gesturing data into the navigation experience within your browser. ChromeConnect is an open source project and is currently in alpha testing phase.

Please vist the website for more info: [chromeconnect.us](http://bit.ly/1d0fY2P)

Download the chrome extension here : [Chrome Web Store](http://bit.ly/15eVEc3)


## Contribute
Please email me if you are interested in contributing. Chris (cs.sita.com)

## Bugs
Please email Chris (cs.sita.com) for bugs / feature improvements.

## Tech Stack
1. Node/Express
2. Socket.io
3. Google Chrome Extensions API
4. Grunt
5. 3rd Party Libaries
* [BootStrap](https://http://getbootstrap.com/)
* [TouchSwipe-Jquery-Plugin](https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)
* [IOCSS](https://github.com/lazd/iOCSS)
* [Zoom.js](http://lab.hakim.se/zoom-js)
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "chromeConnect",
"version": "0.0.1-83",
"version": "0.0.1-84",
"scripts": {
"start": "node app.js"
},
Expand Down
Binary file added public/images/bg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 36 additions & 65 deletions public/splash.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Chrome Connect (Alpha)</title>
<title>chromeConnect (Alpha)</title>
<meta name="description" content="">
<meta name="keywords" content="websockets, chromeConnect, Chrome, webstore, extension">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Expand All @@ -26,96 +26,67 @@

<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="#">Chrome Connect</a>
<a class="navbar-brand">chromeConnect</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://chrome.google.com/webstore/category/extensions" target="ext">Chrome App Store</a></li>
<li><a href="https://github.com/tooseata/" target="ext">Github</a></li>
<ul class="nav navbar-nav pull-right">
<li><a href="http://bit.ly/15eVEc3" target="ext">Download on Chrome Web Store</a></li>
<li><a href="http://bit.ly/186mu8N" target="ext">Contribute to Open Source Project</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Gester Based Browser Control</h1>
<p>Multi direction swip control</p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Zooming / Pinching</h1>
<p>Pitch your glasses and start zooming into text with ease.</p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Native Mouse Control</h1>
<p>Use a presentation mouse to point / click on elements on any webpage</p>
</div>
<header id="head-top">
<div class="jumbotron">
<img class="marquee-image pull-left" style="margin-right:5px" src="http://s21.postimg.org/42vzrb8b7/chrome_Connect_logo.png">
<h2 class="featurette-heading-marquee"> <strong>chromeConnect</strong> <br> <span class="text-muted-marquee">Take control of Chrome from your mobile device</span></h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->



</header>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

<!-- START THE FEATURETTES -->

<hr class="featurette-divider">

<div class="featurette">
<img class="featurette-image img-circle pull-left" src="http://getbootstrap.com/2.3.2/assets/img/examples/browser-icon-chrome.png">
<h2 class="featurette-heading">Chrome Extension <span class="text-muted">Free and open source!</span></h2>
<p class="lead">Control any page from you favortie web browser.</p>
<h2 class="featurette-heading">Turn your touchable phone or tablet device into a mouse <span class="text-muted">to control browsing in Chrome.</span></h2>
<p class="lead">This extension captures gesture interactions taken from a paired mobile or tablet device, and incorporates the gesturing data into the navigation experience within your browser. ChromeConnect is an <a href="https://github.com/tooseata/chromeConnect" target="ext">open source project</a> and is currently in alpha testing phase.</p>
</div>

<hr class="featurette-divider">
<h2 class="featurette-heading">Gestering <span class="text-muted">Feature Support</span></h2>
<div class="row">
<div class="span4">
<h2>One Finger Mouse with Tap Click</h2>
<img class="img-square" src="http://s10.postimg.org/dhuorizc9/mouse.jpg">
<p>On the scroll tab use a one finger drag to move a synthetic mouse pointer around the page. Make sure to enable the pointer first from the settings in the extension drop down. A tap on your controller screen will create a click on any textlink or button within the DOM.</p>
</div><!-- /.span4 -->
<div class="span4">
<h2>Pinch Zoom In / Out</h2>
<img class="img-square" src="http://s16.postimg.org/scv1pfxhx/pinch.jpg">
<p>From the pinch tab on your device a use normal pinch command to zoom into your page. Pinching out will return to the default browser zoom level. A tap on this screen will enable a quick zoom (turn off by performing a double tab command).</p>
</div><!-- /.span4 -->
<div class="span4">
<h2>Two Finger Page Scroll</h2>
<img class="img-square" src="http://s21.postimg.org/6jpsbg34n/scroll.jpg">
<p>Use a two-finger scroll to move up and down the page. Three fingers up or down will bring you to the top / bottom of the page you are viewing.</p>
</div><!-- /.span4 -->
</div><!-- /.row -->

<hr class="featurette-divider">

<!-- <div class="featurette">
<img class="featurette-image img-circle pull-right" src="http://placehold.it/512">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Flatness.</span></h2>
<p class="lead">A big design trend for 2013 is "flat" design. Gone are the days of excessive gradients and shadows. Designers are producing cleaner flat designs, and Bootstrap 3 takes advantage of this minimalist trend.</p>
<h2 class="featurette-heading">Video <span class="text-muted">Demo</span></h2>
<div class="video-container">
<iframe src="//player.vimeo.com/video/73983362" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
-->
<hr class="featurette-divider">

<!-- /END THE FEATURETTES -->

<hr class="featurette-divider">

<!-- FOOTER -->
<footer>
<p>Created by Chris Sita <a href="http://www.linkedin.com/in/chrissita">LinkedIn</a></p>
<p>Created by Chris Sita <a href="http://linkd.in/15Ro1J0" target="ext">LinkedIn</a></p>
</footer>

</div><!-- /.container -->
Expand Down
5 changes: 3 additions & 2 deletions public/stylesheets/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -715,6 +715,7 @@ pre code {
.container {
margin-right: auto;
margin-left: auto;
padding: 5px;
}

.container:before,
Expand Down Expand Up @@ -2884,7 +2885,7 @@ button.close {
font-size: 18px;
font-weight: 500;
line-height: 20px;
color: #777777;
color: #fff;
text-align: center;
}

Expand Down Expand Up @@ -2996,7 +2997,7 @@ button.close {
}

.navbar-inverse .navbar-brand {
color: #999999;
color: #fff;
}

.navbar-inverse .navbar-brand:hover,
Expand Down
113 changes: 76 additions & 37 deletions public/stylesheets/splash.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ body {
color: #5a5a5a;
}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

Expand All @@ -18,55 +21,68 @@ body {
z-index: 10;
}

#head-top {
position: relative;
background: #292C37;
padding-top: 0px;
padding-bottom: 0px;
margin-top: -60px;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
min-height: 750px;
background-image: url(../images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat:no-repeat;
background-position:center
}

#head-top .jumbotron {
background: none;
min-height: 300px;
color: #ffffff;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding-top: 160px;
}

.jumbotron {
padding: 30px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: #eee;


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color:#bbb;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
padding-left: 15px;
padding-right: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
.marketing .span4 {
text-align: center;
margin-bottom: 20px;
}

.marketing .span4 .mouseControl {
background-color: #eee;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
.marketing .span4 p {
margin-left: auto;
margin-right: auto;
max-width: 500px;
}


Expand Down Expand Up @@ -100,11 +116,30 @@ body {
letter-spacing: -1px;
}

.text-muted-marquee{
font-style: italic;
color: #999999;
font-size: 60%;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 979px){
.featurette-image.pull-left, .featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
.featurette-heading{
font-size: 28px;
}

}


@media (min-width: 768px) {

/* Remve the edge padding needed for mobile */
Expand Down Expand Up @@ -135,4 +170,8 @@ body {
pointer-events: all;
}

h2.featurette-heading-marquee{
font-size: 35px;
}

}

0 comments on commit 57ac8f8

Please sign in to comment.