Permalink
Browse files

@aarondruck:

I linked the steps to the slides. I also added a red border rule for the active one that obviously needs to be re-styled. We also need to hint that the steps are linked to the current slide. 

Should we add next & back buttons? I don't want it to auto-cycle.

Also of note, I had to fix indentation stuff, is your editor still set to use spaces instead of tabs?
  • Loading branch information...
simonwex committed Apr 5, 2013
1 parent 642e62e commit 2cd91813bb54c57d3cceb02c89e004a2eb373bf4
Showing with 71 additions and 63 deletions.
  1. +8 −2 app/http/public/application.js
  2. +18 −4 app/http/public/style.css
  3. +45 −57 app/http/views/site/index.ejs
@@ -15,8 +15,14 @@ $(function(){
$("#year").text((new Date).getFullYear());
- $('.carousel').carousel({
- interval: 0
+ var carousel = $('.carousel').carousel({
+ interval: false
+ });
+
+ $('ol#how_it_works_indicators li').click(function(a,b,c){
+ carousel.carousel(parseInt($(this).attr('data-slide-index')));
+ $('ol#how_it_works_indicators li').removeClass('active');
+ $(this).addClass('active');
});
var cursorPositions = [
View
@@ -204,6 +204,7 @@ p.main-text {
margin-top:50px;
color:#fff;
}
+
#introduction h1 strong {
font-style:normal;
font-weight: 500;
@@ -227,11 +228,16 @@ p.main-text {
font-weight:normal;
line-height:1.5;
padding:5px 0px;
- font-family:
- openSansLight;
+ font-family: openSansLight;
letter-spacing:-0.01px;
color:#fff;
}
+#introduction .lead strong {
+ font-family: openSans;
+ font-weight: normal;
+ font-size: 22px;
+ letter-spacing: +0.01;
+}
a#btn-tryitout {
background:rgb(101, 147, 36);border-radius:2px;font-size:17px;font-weight:normal;line-height:1.5;text-shadow:0px 1px 0px rgba(0,0,0,0.3);font-family:openSansLight;letter-spacing:-0.01px;
@@ -267,12 +273,20 @@ a#btn-tryitout {
#how_it_works li h2 {
margin:0px;
}
-#how_it_works .how_it_works_list_box img{
+#how_it_works ol#how_it_works_indicators {
+ cursor: pointer;
+}
+
+#how_it_works ol#how_it_works_indicators .active{
+ border: 1px solid red;
+}
+
+#how_it_works ol#how_it_works_indicators img{
height:30px;
padding-top:5px;
}
-#how_it_works .how_it_works_list_box p{
+#how_it_works ol#how_it_works_indicators p{
padding:10px 10px 10px 0px;
}
@@ -10,66 +10,64 @@
<img src="/images/towtruck-logo-lrg.png" alt="Logo">
TowTruck
</h1>
- <p class="lead">A service for your website that makes it surprisingly easy to collaborate in real-time.</p>
- <p class="lead"><a class="btn btn-large btn-primary" href="/example" id="btn-tryitout">Try it out here</a></p>
+ <p class="lead">A <strong>service</strong> for your <strong>website</strong> that makes it surprisingly easy to <strong>collaborate</strong> in <strong>real-time</strong>.</p>
+ <p class="lead"><a class="btn btn-large btn-primary" href="/example" id="btn-tryitout">Try it out here</a></p>
</div>
<div class="span7">
<a id="show_video_modal" href="#video_modal" role="button" data-toggle="modal">
<img src="images/site-product-shot.png" alt="Product shot">
</a>
</div>
- <div id="video_modal" class="modal hide fade" tabindex="-1" role="dialog">
- <button type="button" id="close_vimeo_modal" class="close" data-dismiss="modal">
+ <div id="video_modal" class="modal hide fade" tabindex="-1" role="dialog">
+ <button type="button" id="close_vimeo_modal" class="close" data-dismiss="modal">
<img src="/images/icn-close-btn-wht.png" alt="close button">
</button>
<div class="modal-body">
<iframe id="modal_vimeo_iframe" src="https://player.vimeo.com/video/57992755?portrait=0&amp;byline=0&amp;api=1&amp;player_id=modal_vimeo_iframe"></iframe>
</div>
</div>
- </div>
+ </div>
</div>
</div>
-
<div id="how_it_works" class="section">
<div class="container">
<h1 class="main-header">How it Works</h1>
<div class="row">
- <div class="span5">
- <div class="how_it_works_list_box">
- <div class="col-left">
- <img src="images/site-howitworks-01.png" alt="Step 1">
- </div>
- <div class="col-right">
- <h2 class="subheader">Click the TowTruck button</h2>
- <p class="main-text">When on a TowTruck-enabled site, collaboration is only a click away.</p>
- </div>
- <div class="clear"></div>
- </div>
- <div class="how_it_works_list_box">
- <div class="col-left">
- <img src="images/site-howitworks-02.png" alt="Step 2">
- </div>
- <div class="col-right">
- <h2 class="subheader">Share the TowTruck link</h2>
- <p class="main-text">Copy and paste the TowTruck link and send to a friend.</p>
- </div>
- <div class="clear"></div>
- </div>
- <div class="how_it_works_list_box">
- <div class="col-left">
- <img src="images/site-howitworks-03.png" alt="Step 3">
- </div>
- <div class="col-right">
- <h2 class="subheader">Wait for your friend to join</h2>
- <p class="main-text">
- You'll see a notification when your friend joins your session, and you can then collaborate in real-time!</p>
- </div>
- <div class="clear"></div>
- </div>
- </div>
+ <ol class="span5" id="how_it_works_indicators">
+ <li data-slide-index="0" class="active">
+ <div class="col-left">
+ <img src="images/site-howitworks-01.png" alt="Step 1">
+ </div>
+ <div class="col-right">
+ <h2 class="subheader">Click the TowTruck button</h2>
+ <p class="main-text">When on a TowTruck-enabled site, collaboration is only a click away.</p>
+ </div>
+ <div class="clear"></div>
+ </li>
+ <li data-slide-index="1">
+ <div class="col-left">
+ <img src="images/site-howitworks-02.png" alt="Step 2">
+ </div>
+ <div class="col-right">
+ <h2 class="subheader">Share the TowTruck link</h2>
+ <p class="main-text">Copy and paste the TowTruck link and send to a friend.</p>
+ </div>
+ <div class="clear"></div>
+ </li>
+ <li data-slide-index="2">
+ <div class="col-left">
+ <img src="images/site-howitworks-03.png" alt="Step 3">
+ </div>
+ <div class="col-right">
+ <h2 class="subheader">Wait for your friend to join</h2>
+ <p class="main-text">
+ You'll see a notification when your friend joins your session, and you can then collaborate in real-time!</p>
+ </div>
+ <div class="clear"></div>
+ </li>
+ </ol>
<div class="span7">
<div id="how_it_works_carousel" class="carousel slide">
- <!-- Carousel items -->
<div class="carousel-inner">
<div class="a active item">
<img src="/images/sections/how_it_works/carousel-a.png" alt="Click the TowTruck Button" />
@@ -85,19 +83,11 @@
<img src="/images/sections/how_it_works/carousel-c.png" alt="Click the TowTruck Button" />
</div>
</div>
- <ol class="carousel-indicators">
- <li data-target="#how_it_works_carousel" data-slide-to="0" class="active"></li>
- <li data-target="#how_it_works_carousel" data-slide-to="1"></li>
- <li data-target="#how_it_works_carousel" data-slide-to="2"></li>
- </ol>
</div>
</div>
- <script>
- $('.carousel').carousel('cycle');
- </script>
</div>
</div>
- <hr style="width:50%;margin:50px auto 0px;">
+ <hr style="width:50%;margin:50px auto 0px;">
</div>
<div id="selector">
@@ -113,8 +103,8 @@
<div id="features" class="section">
<div class="container">
- <h1 class="main-header">Features</h1>
- <div class="span4 far-left">
+ <h1 class="main-header">Features</h1>
+ <div class="span4 far-left">
<img class="main-img" src="images/site-features-01.png" alt="Browser Header Shared Image">
<h2 class="subheader">Cursor-mirroring</h2>
<p class="main-text">See your friend's cursors in real-time to help point to areas on the page.</p>
@@ -133,7 +123,7 @@
<p></p>
</div><!-- /.span4 -->
</div>
- <hr style="width:50%;margin:20px auto 0px;">
+ <hr style="width:50%;margin:20px auto 0px;">
</div>
<div id="how_to_install" class="section">
@@ -154,7 +144,7 @@
<form>
<fieldset>
<textarea class="span6 copy-input"><button onclick=&quot;TowTruck(this); return false;&quot;>Start TowTruck</button></textarea>
-</fieldset>
+ </fieldset>
</form>
</div>
</div>
@@ -169,10 +159,8 @@
<div id="tryitout" class="section">
<div class="container">
- <h1 class="main-header">Try out TowTruck today!</h1>
- <p class="lead"><a class="btn btn-large btn-primary" id="btn-tryitout" href="/example">Try it out here</a></p>
+ <h1 class="main-header">Try out TowTruck today!</h1>
+ <p class="lead"><a class="btn btn-large btn-primary" id="btn-tryitout" href="/example">Try it out here</a></p>
</div>
</div>
-
-
</div>

1 comment on commit 2cd9181

Contributor

aarondruck commented on 2cd9181 Apr 5, 2013

@simonwex So my intent for the design here was to keep the circle slide indicators. When a user scrolls to this position on the page, the slider starts. It start's automatically. But only goes through once.

The "Click the TowTruck button" section has an opacity of 1. The other sections have an opacity of 0.5. When it moves to the next slide, the next 2nd circle indicator is on, and the "Share the TowTruck link" has an opacity of 1 and the rest have an opacity of 0.5. And so on.

Let me know if you want to talk about it on Skype.

Please sign in to comment.