From 0086a054d68b46a38d0d67dfd0414f29a5f09138 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Thu, 22 Aug 2013 11:37:36 -0400
Subject: [PATCH] first pass at select a track for verification

---
 lms/static/sass/views/_verification.scss      | 49 ++++++++++++
 lms/templates/verify_student/face_upload.html | 17 +++--
 .../verify_student/photo_id_upload.html       | 76 ++++++++++++++++++-
 3 files changed, 132 insertions(+), 10 deletions(-)

diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 7c30b44bd2..691652063c 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -13,9 +13,45 @@ body.register.verification {
 
     .title {
       @extend .t-title5;
+      margin-bottom: $baseline;
+      font-weight: bold;
     }
   }
 
+  .title {
+    @extend .t-title9;
+    margin-bottom: ($baseline/2);
+    font-weight: bold;
+  }
+
+  .select {
+    @include clearfix();
+
+
+    .block {
+      float: left;
+      margin: 0 $baseline $baseline 0;
+      background-color: #eee;
+      padding: $baseline;
+      width: 60%;
+
+      .title {
+        @extend .t-title7;
+      }
+
+    }
+
+    .tips {
+      float: right;
+      width: 32%;
+    }
+
+  }
+
+
+
+
+
   .progress {
 
     .progress-step {
@@ -70,6 +106,19 @@ body.register.verification {
 
         .control {
           display: inline-block;
+
+          .action {
+            @extend .button-primary;
+            display: block;
+            background-color: $blue;
+            color: $white;
+            padding: ($baseline*.25) ($baseline*.5);
+            border: none;
+
+            &:hover {
+
+            }
+          }
         }
       }
     }
diff --git a/lms/templates/verify_student/face_upload.html b/lms/templates/verify_student/face_upload.html
index c6cfaf3b35..42328eba0a 100644
--- a/lms/templates/verify_student/face_upload.html
+++ b/lms/templates/verify_student/face_upload.html
@@ -1,7 +1,7 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
-<%block name="bodyclass">register verification</%block>
+<%block name="bodyclass">register verification photos</%block>
 
 <%block name="js_extra">
 <!-- please move link to js/vendor/responsive-carousel/responsive-carousel.js from main.html to here -->
@@ -54,16 +54,17 @@ $(document).ready(function() {
           <div class="controls photo-controls">
             <ul class="controls-list">
               <li class="control control-do">
-                <a class="action action-do" href="">Take photo</a>
+                <a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
               </li>
               <li class="control control-redo">
-                <a class="action action-redo" href="">Retake</a>
+                <a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
               </li>
               <li class="control control-approve">
-                <a class="action action-approve" href="">Looks good</a>
+                <a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
               </li>
             </ul>
           </div>
+
         </div>
 
         <div class="photo-tips facetips">
@@ -121,13 +122,13 @@ $(document).ready(function() {
           <div class="controls photo-controls">
             <ul class="controls-list">
               <li class="control control-do">
-                <a class="action action-do" href="">Take photo</a>
+                <a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
               </li>
               <li class="control control-redo">
-                <a class="action action-redo" href="">Retake</a>
+                <a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
               </li>
               <li class="control control-approve">
-                <a class="action action-approve" href="">Looks good</a>
+                <a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
               </li>
             </ul>
           </div>
@@ -268,7 +269,7 @@ $(document).ready(function() {
       <button class="action action-secondary action-cancel">${_("Cancel")}</button>
     </div>
   </form>
-  <a href="#" rel="view" class="action action-close action-editname-close">
+  <a href="#" data-dismiss="modal" rel="view" class="action action-close action-editname-close">
     <i class="icon-remove-sign"></i>
     <span class="label">close</span>
   </a>
diff --git a/lms/templates/verify_student/photo_id_upload.html b/lms/templates/verify_student/photo_id_upload.html
index b6724656f4..c5fa6d462e 100644
--- a/lms/templates/verify_student/photo_id_upload.html
+++ b/lms/templates/verify_student/photo_id_upload.html
@@ -1,11 +1,83 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
+<%block name="bodyclass">register verification select</%block>
 
 <%block name="content">
+<div class="container">
+  <section class="wrapper">
 
-<h1>Photo ID Upload!</h1>
+  <header class="page-header">
+    <h2 class="title">You are registering for [coursename] (ID Verified)</h2>
+  </header>
 
-<a href="${reverse('verify_student/final_verification')}">Final Verification</a>
+    <h3 class="title">Select your track:</h3>
 
+    <div class="select">
+      <div class="block block-audit">
+        <h4 class="title">Audit</h4>
+        <p>Sign up to audit this course for free and track your own progress.</p>
+
+        <p class="btn">
+          <a href="">Select Audit</a>
+        </p>
+      </div>
+
+    <div class="select">
+      <div class="block block-cert">
+        <h4 class="title">Certificate of Achievement</h4>
+        <p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
+        <dl>
+          <dt>
+            Select your contribution for this course (in USD):
+          </dt>
+          <dd>
+            <ul>
+              <li>
+                <input type="radio" name="contribution-25" id="contribution"> <label for="contribution-25">$25</label>
+              </li>
+              <li>
+                <input type="radio" name="contribution-50" id="contribution"> <label for="contribution-50">$50</label>
+              </li>
+              <li>
+                <input type="radio" name="contribution-100" id="contribution"> <label for="contribution-100">$100</label>
+              </li>
+              <li>
+                <input type="radio" name="contribution-other" id="contribution"> <label for="contribution-other">Other</label>
+              </li>
+              <li>
+                <label for="contribution-other-amt">Other Amount</label> <input type="text" name="contribution-other" id="contribution-other-amt">
+              </li>
+            </ul>
+          </dd>
+        </dl>
+
+        <a href="">Why do I have to pay? What if I don't meet all the requirements?</a>
+
+        <img src="" />
+
+        <p>
+          <a href="">What is an ID Verified Certificate?</a>
+        </p>
+
+        <p class="btn">
+          <a href="${reverse('verify_student/show_requirements')}">Select Certificate</a>
+        </p>
+      </div>
+
+      <div class="tips">
+        <p>
+          To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. <a href="">View requirements</a>
+        </p>
+      </div>
+
+    </div>
+
+
+<p><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p>
+<p>Not the course you wanted? <a href="">Return to our course listings</a>.</p>
+
+
+</section>
+</div>
 </%block>