Merge with Head

.hgignore

@@ -5,3 +5,5 @@ syntax: glob
 *.swp
 *.orig
 *.DS_Store
+#*
+.#*
\ No newline at end of file

6002x-faq.html

@@ -19,9 +19,10 @@ This set of questions and answers accompanies MIT’s February 13,
 </p>
 
 <h2>
-What is <i>MITx</i>? MIT seeks through the development of <i>MITx</i> to improve
+What is <i>MITx</i>?</h2>
+
+<p>  MIT seeks through the development of <i>MITx</i> to improve
 education both on the MIT campus and around the world.
-</h2>
 
 <p> On campus, <i>MITx</i> will be coupled with an Institute-wide research
 initiative on online teaching and learning. The online learning tools

6002x-press-release.html

@@ -70,7 +70,7 @@ be found here.</a></p>
 about 6.002x can be found here.</a></p>
 
 <p>
-<a href="/mitx-overview.html">
+<a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219">
 FAQs about <i>MITx</i> as a whole can be found here.
 </a>
 </p>

activation_active.html

+<%inherit file="marketing.html" />
 
-<%inherit file="main.html" />
+<section class="tos">
+<div>
 
 <section class="activation">
   <h1>Account already active!</h1>
   <!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
   <p> This account has already been activated. We will notify you as
   soon as the course starts.</p>
+  <p>For now you can go to the <a href="https://mitx.mit.edu/">MITx homepage</a> or the <a href="/">6.002x course page</a>.</p>
+</div>
 </section>

activation_complete.html

+<%inherit file="marketing.html" />
 
-<%inherit file="main.html" />
-
-<section class="activation">
+<section class="tos">
+<div>
   <h1>Activation Complete!</h1>
   <!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
   <p>Thanks for activating your email. We will notify you as soon as the course starts.</p>
-  <p>For now you can got to the <a href="/">MITx homepage</a> or the <a href="https://6002x.mitx.mit.edu/">6.002x course page</a>.</p>
+  <p>For now you can go to the <a href="https://mitx.mit.edu/">MITx homepage</a> or the <a href="/">6.002x course page</a>.</p>
+</div>
 </section>

activation_invalid.html

-<%inherit file="main.html" />
-<section class="activation">
+<%inherit file="marketing.html" />
+
+<section class="tos">
+<div>
 <h1>Activation Invalid</h1>
 
 <p>Something went wrong. Check to make sure the URL you went to was
   correct -- e-mail programs will sometimes split it into two
   lines. If you still have issues, e-mail us to let us know what happened
   at <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p>
+
+  <p>Or you can go back to the <a href="/">6.002x course page</a>.</p>
+</div>
 </section>

custom_tags

+../data/custom_tags
\ No newline at end of file

index.html

@@ -31,7 +31,7 @@
 
       <p>If you successfully complete the course, you will receive an electronic certificate of accomplishment from <em>MITx</em>. This certificate will indicate that you earned it from <em>MITx&rsquo;s</em> pilot course. In this prototype version, <em>MITx</em> will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.</p>
 
-<p>The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005.  While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on <a href="http://www.amazon.com/exec/obidos/ASIN/1558607358/ref=nosim" target="_blank">Amazon</a>.</p>
+<p>The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005.  While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on <a href="http://www.amazon.com/exec/obidos/ASIN/1558607358/ref=nosim/mitopencourse-20" target="_blank">Amazon</a>.</p>
     </section>
 
     <section class="requirements">

login.html

 <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
-${ error }
-
 <div id="login_div">
   <header>
     <h1>Log in to MITx</h1>

main.html

@@ -38,7 +38,7 @@
 
 </head>
 
-<body>
+<body class="<%block name="bodyclass"/>">
 
   ${self.body()}
   <%block name="bodyextra"/>

marketing.html

@@ -96,6 +96,7 @@ function postJSON(url, data, callback) {
         <li><a href="/t/tos.html">Terms of Service</a></li>
         <li><a href="/t/privacy.html">Privacy Policy</a></li>
         <li><a href="/t/honor.html">Honor Code</a></li>
+        <li><a href="/t/mitx_help.html">Help</a></li>
       </ul>
     </div>
   </footer>

mitx_global.html

@@ -12,7 +12,7 @@
       </section>
 
     <section class="intro-video">
-      <a rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" alt="" /><span> Watch intro video</span></a>
+      <a id="video-overlay-link" rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" id="video-img" alt="" /><span> Watch intro video</span></a>
     </section>
 
     </section>
@@ -27,7 +27,7 @@
         <li>operates on an open-source, scalable software infrastructure in order to make it continuously improving and readily available to other educational institutions, such as universities and K-12 school systems.</li>
       </ul>
 
-      <p><strong>Press &amp; links:</strong> <a href="/6002x-press-release.html">6.002x Press Release</a>, <a href="/6002x-faq.html">6.002x FAQ</a>, <a href="/mitx-overview.html">MITx overview</a>, <a href="http://www.boston.com/news/local/massachusetts/articles/2011/12/19/mit_to_launch_online_only_graded_courses_free_to_all/?page=full" target="_blank">Boston Globe</a>, <a href="http://www.nytimes.com/2011/12/19/education/mit-expands-free-online-courses-offering-certificates.html?_r=3&hpw=" target="_blank">New York Times</a>,  <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html" target="_blank">MIT Press Release</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219" target="_blank"><em>MITx</em> FAQ</a>  </p>
+      <p><strong>Press &amp; links:</strong> <a href="/6002x-press-release.html">6.002x Press Release</a>, <a href="/6002x-faq.html">6.002x FAQ</a>, <a href="/mitx-overview.html">MITx overview</a>, <a href="http://www.boston.com/news/local/massachusetts/articles/2011/12/19/mit_to_launch_online_only_graded_courses_free_to_all/?page=full" target="_blank">Boston Globe</a>, <a href="http://www.nytimes.com/2011/12/19/education/mit-expands-free-online-courses-offering-certificates.html?_r=3&hpw=" target="_blank">New York Times</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html" target="_blank">MIT Press Release</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219" target="_blank"><em>MITx</em> FAQ</a>, <a href="http://ocw.mit.edu/index.htm" target="_blank">OpenCourseWare</a></p>
     </section>
 
   </section>
@@ -48,12 +48,32 @@
 </section>
 
 <div id="video-overlay" class="leanModal_box">
-  <iframe width="560" height="315" src="http://www.youtube.com/embed/p2Q6BrNhdh8?rel=0" frameborder="0" allowfullscreen></iframe>
+  <iframe id="player" type="text/html" width="560" height="390" src="http://www.youtube.com/embed/p2Q6BrNhdh8?enablejsapi=1" frameborder="0">
+  </iframe>
 </div>
 <script>
 
+var player;
+function onYouTubePlayerAPIReady() {
+  player = new YT.Player('player', {
+  });
+}
+
 $(function() {
 
+    var tag = document.createElement('script');
+    tag.src = "http://www.youtube.com/player_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    $("a#video-overlay-link").click(function(){
+      player.playVideo();
+      $("a.modal_close, #lean_overlay").click(function(){
+        player.pauseVideo();
+      });
+    });
+
+
     // TODO: Clean up as per http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery
 
     /* Handles when the user hits 'enroll'. Grabs form data. Does AJAX.
@@ -89,7 +109,7 @@ $(function() {
           });
         })
 
-
    /*$("sregion"+$("[id^=spinner_]")[1].id.substring(7)) */
 });
+
 </script>

mitx_help.html

+<%inherit file="marketing.html" />
+
+<section class="tos">
+  <div>
+    <section class="help-email">
+      <h2>Help &amp; Feedback</h2>
+      <p> If run into problems signing up for the web site which you
+      cannot resolve on your own, you can reach us at:</p>
+      <dl>
+        <dt>System-related questions</dt>
+        <dd><a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a></dd>
+        <dt>Content-related questions</dt>
+        <dd><a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></dd>
+        <dt>Bug reports</dt>
+        <dd><a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></dd>
+        <dt>Suggestions</dt>
+        <dd><a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></dd>
+      </dl>
+
+      <p> Please bear in mind that while we read them, we do not expect to
+        have time to respond to all e-mails.</p>
+    </section>
+  </div>
+</section>
+

sass/_activation.scss

+body.activation {
+  footer {
+  max-width: 600px;
+  text-align: center;
+
+  p {
+    float: none;
+  }
+
+    ul {
+      display: none;
+    }
+  }
+}
+
 section.activation {
   @extend .wrapper;
   @include box-shadow(0 1px 0 #fff);

sass/_index-extends.scss

@@ -41,6 +41,14 @@
         line-height: lh();
       }
     }
+
+    dl {
+      margin-bottom: lh();
+
+      dd {
+        margin-bottom: lh(.5);
+      }
+    }
   }
 }
 

sass/_index.scss

@@ -57,9 +57,6 @@ header.announcement {
       background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
     }
 
-    // @media screen and (max-width: 1199px) {
-    // }
-
     div {
       padding: lh(10) lh() lh(3);
 

sass/_layout.scss

@@ -133,49 +133,57 @@ html {
       max-width: 100%;
       height: auto;
     }
-  }
-
-  footer {
-    @extend .clearfix;
-    @extend .wrapper;
-    @include box-sizing(border-box);
-    color: #777;
-    margin-top: $body-line-height;
-    padding: 0 $body-line-height;
 
-    p {
-      float: left;
+    footer {
+      @extend .clearfix;
+      @extend .wrapper;
+      @include box-sizing(border-box);
+      color: #777;
+      margin-top: $body-line-height;
+      padding: 0 $body-line-height;
 
-      a {
-        color: #444;
+      p {
+        float: left;
 
-        &:link, &:visited {
+        a {
           color: #444;
-        }
 
-        &:hover, &:focus {
-          color: #000;
+          &:link, &:visited {
+            color: #444;
+          }
+
+          &:hover, &:focus {
+            color: #000;
+          }
         }
       }
-    }
 
-    ul {
-      float: right;
+      ul {
+        float: right;
 
-      li {
-        display: inline-block;
-        margin-right: 20px;
+        li {
+          display: inline-block;
+          margin-right: 20px;
 
-        a {
-          color: #444;
+          a {
+            color: #444;
 
-        &:link, &:visited {
-          color: #444;
-        }
+            &:link, &:visited {
+              color: #444;
+            }
 
-        &:hover, &:focus {
-          color: #000;
+            &:hover, &:focus {
+              color: #000;
+            }
+          }
         }
+      }
+    }
+
+    &.activation {
+      footer {
+        ul {
+          display: none;
         }
       }
     }

video_init.js

@@ -58,15 +58,23 @@ for(var i=0; i<l.length; i++) {
     add_speed(l[i], streams[l[i]])
 }
 
-//toggle video play/pause. the HTML assumes video is always autoplayed
-//initially since it starts with class "pause". may want to set that in
-//javascript
-$("#video_control").click(function(){
-  if ($(this).hasClass("play")){
+function toggleVideo(){
+  if ($("#video_control").hasClass("play")){
     play();
-    $(this).removeClass().addClass("pause");
+    $("#video_control").removeClass().addClass("pause");
   } else {
     pause();
-    $(this).removeClass().addClass("play");
+    $("#video_control").removeClass().addClass("play");
+  }
+}
+
+$("#video_control").click(toggleVideo);
+
+// space bar to pause video
+$(".video-wrapper").keyup(function(e){
+  active = document.activeElement;
+  if (e.which == 32) {
+    e.preventDefault();
+    $("#video_control").click();
   }
 });