Skip to content
Snippets Groups Projects
Commit 5202bdf8 authored by David Ormsbee's avatar David Ormsbee
Browse files

Merge branch 'ormsbee/verify2' into ormsbee/verifyuser3 

Conflicts:
	common/templates/course_modes/choose.html
	lms/templates/verify_student/photo_verification.html
parents a8d7b997 81a56a35
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2078 additions and 762 deletions
common/templates/course_modes/choose.html
+ 165
− 94
View file @ 5202bdf8
......@@ -3,28 +3,38 @@
<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-select-track</%block>
<%block name="title"><title>${("Register for [Course Name] | Choose Your Track")}</title></%block>
<%block name="js_extra">
<script type="text/javascript">
$(document).ready(function() {
$( ".more" ).hide();
$( ".expand" ).click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
});
});
<script type="text/javascript">
</script>
$(document).ready(function() {
$('.is-expandable .expandable-more').addClass('is-hidden');
$('.is-expandable .title-expand').click(function(e) {
e.preventDefault();
$(this).parent().find('.expandable-more').toggleClass('is-hidden');
});
});
</script>
</%block>
<%block name="content">
<div class="container">
<section class="wrapper">
<header class="page-header header-white">
<h2 class="title header-white-title">You are registering for ${course_name} (ID Verified)</h2>
<header class="page-header">
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">You are registering for</span>
<span class="sts-course">${course_id} </span>
</span>
<span class="sts-track">
<span class="sts-track-label">Registering as: </span>
<span class="sts-track-value">ID Verified</span>
</span>
</h2>
</header>
%if error:
<div class="error">
${error}
......@@ -34,92 +44,153 @@
<form method="post" name="enrollment_mode_form" id="enrollment_mode_form">
% if "audit" in modes:
<div class="select">
<div class="block block-audit">
<div class="wrap-copy">
<h4 class="title">Audit This Course</h4>
<p>Sign up to audit this course for free and track your own progress.</p>
<div class="wrapper-register-choose wrapper-content-main">
<article class="register-choose content-main">
<h3 class="title">Select your track:</h3>
<form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
% if "audit" in modes:
<div class="register-choice register-choice-audit">
<div class="wrapper-copy">
<h4 class="title">Audit This Course</h4>
<div class="copy">
<p>Sign up to audit this course for free and track your own progress.</p>
</div>
</div>
<ul class="list-actions">
<li class="action action-select">
<input type="submit" name="mode" value="Select Audit" />
</li>
</ul>
</div>
<div class="wrap-action">
<p class="m-btn-primary">
<input type="submit" name="mode" value="Select Audit" />
</p>
</div>
</div>
<div class="divider"><p>or</p></div>
% endif
% if "verified" in modes:
<div class="select">
<div class="block block-cert">
<h4 class="title">Certificate of Achievement</h4>
<span class="ribbon"></span>
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
<%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
<p class="tip expand">
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a>
</p>
<div class="more">
<dl class="faq">
<dt>Why do I have to pay?</dt>
<dd>Your payment helps cover the costs of verification. As a non-profit, edX keeps these costs as low as possible, Your payment will also help edX with our mission to provide quality education to anyone.</dd>
<dt>I'd like to pay more than the minimum. Is my contribution tax deductible?</dt>
<dd>Please check with your tax advisor to determine whether your contribution is tax deductible.</dd>
% if "honor" in modes:
<dt>What if I can't afford it?</dt>
<dd>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.
<!--
Enter $0 above and explain why you would like the fee waived below. Then click Select Certificate button to move on to the next step.
<dl>
<dt><label class="sr" for="explain">Explain your situation:</label></dt>
<dd><p>Tell us why you need help paying for this course in 180 characters or more.</p>
<textarea name="explain" rows="5" cols="50"></textarea>
</dd>
</dl>
-->
</dd>
% endif
% if "honor" in modes:
<dt>What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dd>If you don't have a webcam, credit or debit card or acceptable ID, you can opt to simply audit this course, or select to work towards a free Honor Code Certificate of Achievement for this course by checking the box below. Then click the Select Certificate button to complete registration. We won't ask you to verify your identity.
<p><input type="checkbox" name="honor-code" id="honor-code"> <label for="honor-code">Select Honor Code Certificate</label></p>
</dd>
% endif
</dl>
<span class="deco-divider">
<span class="copy">or</span>
</span>
% endif
% if "verified" in modes:
<div class="register-choice register-choice-certificate">
<div class="wrapper-copy">
<span class="deco-ribbon"></span>
<h4 class="title">Certificate of Achievement</h4>
<div class="copy">
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
</div>
</div>
<div class="field field-certificate-contribution">
<h5 class="label">Select your contribution for this course:</h5>
<%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
<div class="help-tip is-expandable">
<h5 class="title title-expand">Why do I have to pay? What if I don't meet all the requirements?</h5>
<div class="copy expandable-more">
<dl class="list-faq">
<dt class="faq-question">Why do I have to pay?</dt>
<dd class="faq-answer">
<p>Your payment helps cover the costs of verification. As a non-profit, edX keeps these costs as low as possible, Your payment will also help edX with our mission to provide quality education to anyone.</p>
</dd>
<dt class="faq-question">I'd like to pay more than the minimum. Is my contribution tax deductible?</dt>
<dd class="faq-answer">
<p>Please check with your tax advisor to determine whether your contribution is tax deductible.</p>
</dd>
% if "honor" in modes:
<dt class="faq-question">What if I can't afford it?</dt>
<dd class="faq-answer">
<p>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.</p>
<p>Enter $0 above and explain why you would like the fee waived below. Then click Select Certificate button to move on to the next step.</p>
<ul class="fields">
<li class="field field-explain">
<label for="explain"><span class="sr">Explain your situation: </span>Tell us why you need help paying for this course in 180 characters or more.</label>
<textarea name="explain"></textarea>
</li>
</ul>
</dd>
<dt class="faq-question">What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dd class="faq-answer">
<p>If you don't have a webcam, credit or debit card or acceptable ID, you can opt to simply audit this course, or select to work towards a free Honor Code Certificate of Achievement for this course by checking the box below. Then click the Select Certificate button to complete registration. We won't ask you to verify your identity.</p>
<ul class="fields">
<li class="field field-explain">
<input type="checkbox" name="honor-code" id="honor-code">
<label for="honor-code">Select Honor Code Certificate</label>
</li>
</ul>
</dd>
% endif
</dl>
</div>
</div>
</div>
<ul class="list-actions">
<li class="action action-intro">
<a href="">What is an ID Verified Certificate?</a>
</li>
<li class="action action-select">
<input type="submit" name="mode" value="Select Certificate" />
</li>
</ul>
</div>
<hr />
<p class="tip">
<a href="${marketing_link('WHAT_IS_VERIFIED_CERT')}">What is an ID Verified Certificate?</a>
</p>
<p class="m-btn-primary green">
<input type="submit" name="mode" value="Select Certificate" />
</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>
% endif
</div>
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
</form>
<p class="tip"><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p>
<p class="tip">Not the course you wanted? <a href="">Return to our course listings</a>.</p>
<div class="help help-register">
<h3 class="title">Verified Registration Requirements</h3>
<div class="copy">
<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>
% endif
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
</form>
</article>
</div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">What is an ID Verified Certificate?</h3>
<div class="copy">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Verified Certificate of Achievement Requirememts</h3>
<div class="copy">
<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>
</li>
<li class="help-item">
<h3 class="title">Have questions?</h3>
<div class="copy">
<p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Not the course you wanted?</h3>
<div class="copy">
<p><a href="">Return to our course listings to find another course</a></p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section>
</div>
</%block>
lms/static/sass/application.scss.mako
+ 1
− 0
View file @ 5202bdf8
......@@ -44,6 +44,7 @@
// base - elements
@import 'elements/typography';
@import 'elements/controls';
// base - specific views
@import 'views/verification';
......
lms/static/sass/base/_mixins.scss
+ 58
− 8
View file @ 5202bdf8
......@@ -41,24 +41,38 @@
@return #{$pxval / $base}em;
}
// Line-height
// line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
// ====================
//-----------------
// Theme Mixin Styles
//-----------------
// theme mixin styles
@mixin login_register_h1_style {}
@mixin footer_references_style {}
// ====================
// extends - UI - visual link
.ui-fake-link {
cursor: pointer;
}
// extends - UI - functional disable
.ui-disabled {
pointer-events: none;
outline: none;
}
// extends - UI - depth levels
.ui-depth0 { z-index: 0; }
.ui-depth1 { z-index: 10; }
.ui-depth2 { z-index: 100; }
.ui-depth3 { z-index: 1000; }
.ui-depth4 { z-index: 10000; }
.ui-depth5 { z-index: 100000; }
// extends -hidden elems - screenreaders
.text-sr {
border: 0;
......@@ -70,3 +84,39 @@
position: absolute;
width: 1px;
}
// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
.ui-no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li, dt, dd {
margin: 0;
padding: 0;
}
}
// extends - text - image-replacement hidden text
.text-hide {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
// extends - text - wrapping
.text-wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
// extends - text - text overflow by ellipsis
.text-truncated {
@include box-sizing(border-box);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
lms/static/sass/base/_variables.scss
+ 42
− 1
View file @ 5202bdf8
......@@ -15,7 +15,7 @@ $fg-min-width: 810px;
// ====================
// FONTS
$sans-serif: 'Open Sans', $verdana;
$sans-serif: 'Open Sans', $verdana, sans-serif;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif;
$serif: $georgia;
......@@ -35,7 +35,17 @@ $very-light-text: #fff;
// COLORS: misc.
$white: rgb(255,255,255);
$white-t0: rgba($white, 0.125);
$white-t1: rgba($white, 0.25);
$white-t2: rgba($white, 0.5);
$white-t3: rgba($white, 0.75);
$black: rgb(0,0,0);
$black-t0: rgba($black, 0.125);
$black-t1: rgba($black, 0.25);
$black-t2: rgba($black, 0.5);
$black-t3: rgba($black, 0.75);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
......@@ -47,6 +57,7 @@ $dark-gray: rgb(51, 51, 51);
$border-color: rgb(200, 200, 200);
$sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170);
$green: rgb(37, 184, 90);
// COLORS: old variables
......@@ -63,11 +74,17 @@ $m-gray-d1: #7D7F83;
$m-gray-d2: #707276;
$m-gray-d3: #646668;
$m-gray-d4: #050505;
$m-gray-t0: rgba($m-gray,0.125);
$m-gray-t1: rgba($m-gray,0.25);
$m-gray-t2: rgba($m-gray,0.50);
$m-gray-t3: rgba($m-gray,0.75);
$m-blue: #1AA1DE;
$m-blue-l1: #2BACE6;
$m-blue-l2: #42B5E9;
$m-blue-l3: #59BEEC;
$m-blue-l4: tint($m-blue,90%);
$m-blue-l5: tint($m-blue,95%);
$m-blue-d1: #1790C7;
$m-blue-d2: #1580B0;
$m-blue-d3: #126F9A;
......@@ -81,6 +98,30 @@ $m-pink-d1: #A0255B;
$m-pink-d2: #8C204F;
$m-pink-d3: #771C44;
$m-green: rgb(0, 136, 1);
$m-green-s1: rgb(96, 188, 97);
$m-green-l1: tint($m-green,20%);
$m-green-l2: tint($m-green,40%);
$m-green-l3: tint($m-green,60%);
$m-green-l4: tint($m-green,90%);
$m-green-l5: tint($m-green,95%);
$m-green-d1: shade($m-green,20%);
$m-green-d2: shade($m-green,40%);
$m-green-d3: shade($m-green,60%);
$m-green-d4: shade($m-green,90%);
$m-green-t0: rgba($m-green,0.125);
$m-green-t1: rgba($m-green,0.25);
$m-green-t2: rgba($m-green,0.50);
$m-green-t3: rgba($m-green,0.75);
// ====================
// shadows
$shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4);
// ====================
$m-base-font-size: em(15);
......
lms/static/sass/elements/_controls.scss 0 → 100644
+ 208
− 0
View file @ 5202bdf8
// lms - elements - controls
// ====================
.btn {
@include box-sizing(border-box);
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
display: inline-block;
cursor: pointer;
text-decoration: none;
&:hover, &:active {
text-decoration: none;
}
&.disabled, &[disabled] {
cursor: default;
pointer-events: none;
}
}
.btn-pill {
border-radius: $baseline/5;
}
.btn-rounded {
border-radius: ($baseline/2);
}
.btn-edged {
border-radius: ($baseline/10);
}
// primary button
.btn-primary {
@extend .t-weight3;
@extend .btn;
@extend .btn-edged;
border: none;
padding: ($baseline*0.75) $baseline;
text-align: center;
&:hover, &:active {
}
&.current, &.active {
&:hover, &:active {
}
}
&.disabled, &.is-disabled, &[disabled] {
background: $m-gray-l2;
color: $white-t3;
}
}
// blue primary gray
.btn-primary-gray {
@extend .btn-primary;
box-shadow: 0 2px 1px 0 $m-gray-d2;
background: $m-gray;
color: $white;
&:hover, &:active {
background: $m-gray-l1;
color: $white;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-gray-d2;
background: $m-gray;
color: $m-gray-l1;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-gray-d3;
color: $m-gray-d3;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// blue primary button
.btn-primary-blue {
@extend .btn-primary;
box-shadow: 0 2px 1px 0 $m-blue-d4;
background: $m-blue-d3;
color: $white;
&:hover, &:active {
background: $m-blue-d1;
color: $white;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-blue-d2;
background: $m-blue;
color: $m-blue-d2;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-blue-d3;
color: $m-blue-d3;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// pink primary button
.btn-primary-pink {
@extend .btn-primary;
box-shadow: 0 2px 1px 0 $m-pink-d2;
background: $m-pink;
color: $white;
&:hover, &:active {
background: $m-pink-l3;
color: $white;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-pink-d1;
background: $m-pink-l2;
color: $m-pink-d1;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-pink-d2;
color: $m-pink-d3;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// green primary button
.btn-primary-green {
@extend .btn-primary;
box-shadow: 0 2px 1px 0 $m-green-d2;
background: $m-green-d1;
color: $white;
&:hover, &:active {
background: $m-green-s1;
color: $white;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-green;
background: $m-green-l2;
color: $m-green;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-green-d1;
color: $m-green-d1;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// ====================
// application: canned actions
.btn {
font-family: $f-sans-serif;
}
.btn-large {
@extend .t-action1;
@extend .t-weight3;
display: block;
padding:($baseline*0.75) ($baseline*1.5);
}
.btn-avg {
@extend .t-action2;
@extend .t-weight3;
}
.btn-blue {
@extend .btn-primary-blue;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
.btn-pink {
@extend .btn-primary-pink;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
lms/static/sass/elements/_typography.scss
+ 144
− 0
View file @ 5202bdf8
......@@ -171,3 +171,147 @@
.t-icon-solo {
@include line-height(0);
}
// ====================
// typography weights
.t-weight1 {
font-weight: 300;
}
.t-weight2 {
font-weight: 400;
}
.t-weight3 {
font-weight: 500;
}
.t-weight4 {
font-weight: 600;
}
.t-weight5 {
font-weight: 700;
}
// ====================
// application: canned headings
.hd-lv1 {
@extend .t-title1;
@extend .t-weight1;
color: $m-gray-d4;
margin: 0 0 ($baseline*2) 0;
}
.hd-lv1-alt {
@extend .t-title2;
@extend .t-weight1;
color: $m-gray-d4;
margin: 0 0 ($baseline*2) 0;
}
.hd-lv2 {
@extend .t-title4;
@extend .t-weight1;
margin: 0 0 ($baseline*0.75) 0;
border-bottom: 1px solid $m-gray-l3;
padding-bottom: ($baseline/2);
color: $m-gray-d4;
}
.hd-lv2-alt {
@extend .t-title4;
@extend .t-weight1;
margin: 0 0 ($baseline*0.75) 0;
border-bottom: 1px solid $m-gray-t1;
padding-bottom: ($baseline/2);
color: $m-blue-d1;
text-transform: uppercase;
}
.hd-lv3 {
@extend .t-title6;
@extend .t-weight4;
margin: 0 0 ($baseline/4) 0;
color: $m-gray-d4;
}
.hd-lv3-alt {
@extend .t-title6;
@extend .t-weight3;
margin: 0 0 ($baseline/4) 0;
color: $m-gray-d4;
}
.hd-lv4 {
@extend .t-title6;
@extend .t-weight2;
margin: 0 0 $baseline 0;
color: $m-gray-d4;
}
.hd-lv4-alt {
@extend .t-title6;
@extend .t-weight4;
margin: 0 0 ($baseline) 0;
color: $m-gray-d4;
text-transform: uppercase;
}
.hd-lv5 {
@extend .t-title7;
@extend .t-weight4;
margin: 0 0 ($baseline/4) 0;
color: $m-gray-d4;
}
// application: canned copy
.copy-base {
@extend .t-copy-base;
color: $m-gray-d2;
}
.copy-lead1 {
@extend .t-copy-lead2;
color: $m-gray;
}
.copy-detail {
@extend .t-copy-sub1;
@extend .t-weight3;
color: $m-gray-d1;
}
.copy-metadata {
@extend .t-copy-sub2;
color: $m-gray-d1;
.copy-metadata-value {
@extend .t-weight2;
}
.copy-metadata-value {
@extend .t-weight4;
}
}
// application: canned links
.copy-link {
border-bottom: 1px dotted transparent;
&:hover, &:active {
border-color: $m-blue-d2;
}
}
.copy-badge {
@extend .t-title8;
@extend .t-weight5;
border-radius: ($baseline/5);
padding: ($baseline/2) $baseline;
text-transform: uppercase;
}
lms/static/sass/views/_verification.scss
+ 978
− 389
View file @ 5202bdf8
This diff is collapsed.
lms/templates/verify_student/photo_verification.html
+ 350
− 222
View file @ 5202bdf8
This diff is collapsed.
lms/templates/verify_student/show_requirements.html
+ 132
− 48
View file @ 5202bdf8
......@@ -2,70 +2,154 @@
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements</%block>
<%block name="title"><title>${("Register for [Course Name]")}</title></%block>
<%block name="content">
<div class="container">
<section class="wrapper">
<header class="page-header header-white">
<h2 class="title header-white-title">You are registering for ${course_id} (ID Verified)</h2>
<header class="page-header">
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">You are registering for</span>
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-label">Registering as: </span>
<span class="sts-track-value">ID Verified</span>
</span>
</h2>
</header>
<div class="wrapper-progress">
<section class="progress">
<h3 class="sr title">Your Progress</h3>
<section class="progress">
<header class="section-head">
<h3 class="sr">Your Progress</h3>
</header>
<!--<span class="progress-line"></span><span class="progress-line-done"></span>-->
<ol>
<li class="progress-step current" id="progress-step0"><span class="sr">Current Step: </span> <span class="mini number"></span> Intro</li>
<li class="progress-step" id="progress-step1"><span class="number">1</span> Take Photo</li>
<li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li>
<li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li>
<li class="progress-step" id="progress-step4"> <span class="number">4</span> Make Payment</li>
<li class="progress-step" id="progress-step5"><span class="number"><i class="icon-ok"></i></span> Confirmation</li>
</ol>
</section>
<section class="reqs-section">
<header class="section-head">
<ol class="progress-steps">
<li class="progress-step is-current" id="progress-step0">
<span class="wrapper-step-number"><span class="step-number">0</span></span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step1">
<span class="wrapper-step-number"><span class="step-number">1</span></span>
<span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
</li>
<li class="progress-step" id="progress-step2">
<span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name">Take ID Photo</span>
</li>
<li class="progress-step" id="progress-step3">
<span class="wrapper-step-number"><span class="step-number">3</span></span>
<span class="step-name">Review</span>
</li>
<li class="progress-step" id="progress-step4">
<span class="wrapper-step-number"><span class="step-number">4</span></span>
<span class="step-name">Make Payment</span>
</li>
<li class="progress-step" id="progress-step5">
<span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
<span class="step-name">Confirmation</span>
</li>
</ol>
<span class="progress-sts">
<span class="progress-sts-value"></span>
</span>
</section>
</div>
<div class="wrapper-content-main">
<article class="content-main">
<h3 class="title">What You Will Need to Register</h3>
</header>
<p>There are a few things you will need to register as an ID verified student:</p>
<div class="reqs">
<div class="req1 req">
<h4>Identification</h4>
<div class="art"><i class="icon-id"></i></div>
<p>A photo identification document <span class="tip">a drivers license, passport, student ID, or other ID with your name and picture on it</span></p>
</div>
<div class="req2 req">
<h4>Webcam</h4>
<i class="icon-facetime-video"></i>
<p>A webcam and a modern browser <span class="tip">Firefox, Chrome, or Opera</span></p>
<div class="instruction">
<p>There are a few things you will need to register as an ID verified student:</p>
</div>
<div class="req3 req">
<h4>Credit or Debit Card</h4>
<i class="icon-credit-card"></i>
<p>A major credit or debit card <span class="tip">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span></p>
</div>
</div>
<ul class="list-reqs">
<li class="req req-1 req-id">
<h4 class="title">Identification</h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a></p>
<p class="tip">Change your mind? <a href="">You can always Audit.</a></p>
</div>
</section>
<div class="copy">
<p>
<span class="copy-super">A photo identification document</span>
<span class="copy-sub">a drivers license, passport, student ID, or other ID with your name and picture on it</span>
</p>
</div>
</li>
<li class="req req-2 req-webcam">
<h4 class="title">Webcam</h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<section class="support">
<p class="tip">Missing something? <a href="">You can always Audit the course</a>.</p>
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
</section>
<div class="copy">
<p>
<span class="copy-super">A webcam and a modern browser</span>
<span class="copy-sub">Firefox, Chrome, or Opera</span>
</p>
</div>
</li>
</section>
<li class="req req-3 req-payment">
<h4 class="title">Credit or Debit Card</h4>
<div class="placeholder-art">
<i class="icon-credit-card"></i>
</div>
<div class="copy">
<p>
<span class="copy-super">A major credit or debit card</span>
<span class="copy-sub">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span>
</p>
</div>
</li>
</ul>
<nav class="nav-wizard">
<span class="help help-inline">Missing something? You can always <a href="">audit this course instead</a></span>
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next action-primary" id="face_next_button" href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a>
</li>
</ol>
</nav>
</article>
</div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">Have questions?</h3>
<div class="copy">
<p>Please read <a rel="external" href="">our FAQs to view common questions about our certificates</a>.</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Change your mind?</h3>
<div class="copy">
<p>You can always <a href="">Audit the course for free</a> without verifying.</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section>
</div>
</%block>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment