Skip to content

E
edx-platform
Commit 5202bdf8 by David Ormsbee
Options

Merge branch 'ormsbee/verify2' into ormsbee/verifyuser3 

Conflicts:
	common/templates/course_modes/choose.html
	lms/templates/verify_student/photo_verification.html
parents a8d7b997 81a56a35
Showing with 2078 additions and 762 deletions
common/templates/course_modes/choose.html
...@@ -3,28 +3,38 @@ ...@@ -3,28 +3,38 @@
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-select-track</%block> <%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"> <%block name="js_extra">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() {
$( ".more" ).hide();
$( ".expand" ).click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
});
});
</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>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header header-white"> <header class="page-header">
<h2 class="title header-white-title">You are registering for ${course_name} (ID Verified)</h2> <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> </header>
%if error: %if error:
<div class="error"> <div class="error">
${error} ${error}
...@@ -34,92 +44,153 @@ ...@@ -34,92 +44,153 @@
<form method="post" name="enrollment_mode_form" id="enrollment_mode_form"> <form method="post" name="enrollment_mode_form" id="enrollment_mode_form">
% if "audit" in modes: <div class="wrapper-register-choose wrapper-content-main">
<div class="select"> <article class="register-choose content-main">
<div class="block block-audit"> <h3 class="title">Select your track:</h3>
<div class="wrap-copy">
<h4 class="title">Audit This Course</h4> <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
<p>Sign up to audit this course for free and track your own progress.</p>
% 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>
<div class="wrap-action"> <span class="deco-divider">
<p class="m-btn-primary"> <span class="copy">or</span>
<input type="submit" name="mode" value="Select Audit" /> </span>
</p> % endif
</div>
</div> % if "verified" in modes:
<div class="register-choice register-choice-certificate">
<div class="divider"><p>or</p></div> <div class="wrapper-copy">
% endif <span class="deco-ribbon"></span>
<h4 class="title">Certificate of Achievement</h4>
% if "verified" in modes: <div class="copy">
<div class="select"> <p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
<div class="block block-cert"> </div>
<h4 class="title">Certificate of Achievement</h4> </div>
<span class="ribbon"></span>
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p> <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"/>
<%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> <div class="help-tip is-expandable">
</p> <h5 class="title title-expand">Why do I have to pay? What if I don't meet all the requirements?</h5>
<div class="more"> <div class="copy expandable-more">
<dl class="faq"> <dl class="list-faq">
<dt>Why do I have to pay?</dt> <dt class="faq-question">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> <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>
<dt>I'd like to pay more than the minimum. Is my contribution tax deductible?</dt> </dd>
<dd>Please check with your tax advisor to determine whether your contribution is tax deductible.</dd>
<dt class="faq-question">I'd like to pay more than the minimum. Is my contribution tax deductible?</dt>
% if "honor" in modes: <dd class="faq-answer">
<dt>What if I can't afford it?</dt> <p>Please check with your tax advisor to determine whether your contribution is tax deductible.</p>
<dd>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course. </dd>
<!-- % if "honor" in modes:
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. <dt class="faq-question">What if I can't afford it?</dt>
<dl> <dd class="faq-answer">
<dt><label class="sr" for="explain">Explain your situation:</label></dt> <p>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.</p>
<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> <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>
</dd> <ul class="fields">
</dl> <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>
</dd> <textarea name="explain"></textarea>
% endif </li>
</ul>
% if "honor" in modes: </dd>
<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. <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>
<p><input type="checkbox" name="honor-code" id="honor-code"> <label for="honor-code">Select Honor Code Certificate</label></p>
</dd> <dd class="faq-answer">
% endif <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>
</dl>
<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> </div>
<hr /> <div class="help help-register">
<p class="tip"> <h3 class="title">Verified Registration Requirements</h3>
<a href="${marketing_link('WHAT_IS_VERIFIED_CERT')}">What is an ID Verified Certificate?</a>
</p> <div class="copy">
<p class="m-btn-primary green"> <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>
<input type="submit" name="mode" value="Select Certificate" /> </div>
</p> </div>
</div> % endif
<div class="tips"> <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<p> </form>
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> </article>
</p> </div> <!-- /wrapper-content-main -->
</div>
% endif <div class="wrapper-content-supplementary">
</div> <aside class="content-supplementary">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> <ul class="list-help">
</form> <li class="help-item">
<h3 class="title">What is an ID Verified Certificate?</h3>
<p class="tip"><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p> <div class="copy">
<p class="tip">Not the course you wanted? <a href="">Return to our course listings</a>.</p> <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> </section>
</div> </div>
</%block> </%block>
lms/static/sass/application.scss.mako
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
// base - elements // base - elements
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/controls';
// base - specific views // base - specific views
@import 'views/verification'; @import 'views/verification';
......
lms/static/sass/base/_mixins.scss
...@@ -41,24 +41,38 @@ ...@@ -41,24 +41,38 @@
@return #{$pxval / $base}em; @return #{$pxval / $base}em;
} }
// Line-height // line-height
@function lh($amount: 1) { @function lh($amount: 1) {
@return $body-line-height * $amount; @return $body-line-height * $amount;
} }
// ====================
// theme mixin styles
//-----------------
// Theme Mixin Styles
//-----------------
@mixin login_register_h1_style {} @mixin login_register_h1_style {}
@mixin footer_references_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 // extends -hidden elems - screenreaders
.text-sr { .text-sr {
border: 0; border: 0;
...@@ -70,3 +84,39 @@ ...@@ -70,3 +84,39 @@
position: absolute; position: absolute;
width: 1px; 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
...@@ -15,7 +15,7 @@ $fg-min-width: 810px; ...@@ -15,7 +15,7 @@ $fg-min-width: 810px;
// ==================== // ====================
// FONTS // FONTS
$sans-serif: 'Open Sans', $verdana; $sans-serif: 'Open Sans', $verdana, sans-serif;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif; $body-font-family: $sans-serif;
$serif: $georgia; $serif: $georgia;
...@@ -35,7 +35,17 @@ $very-light-text: #fff; ...@@ -35,7 +35,17 @@ $very-light-text: #fff;
// COLORS: misc. // COLORS: misc.
$white: rgb(255,255,255); $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: 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); $blue: rgb(29,157,217);
$pink: rgb(182,37,104); $pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
...@@ -47,6 +57,7 @@ $dark-gray: rgb(51, 51, 51); ...@@ -47,6 +57,7 @@ $dark-gray: rgb(51, 51, 51);
$border-color: rgb(200, 200, 200); $border-color: rgb(200, 200, 200);
$sidebar-color: rgb(246, 246, 246); $sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170); $outer-border-color: rgb(170, 170, 170);
$green: rgb(37, 184, 90); $green: rgb(37, 184, 90);
// COLORS: old variables // COLORS: old variables
...@@ -63,11 +74,17 @@ $m-gray-d1: #7D7F83; ...@@ -63,11 +74,17 @@ $m-gray-d1: #7D7F83;
$m-gray-d2: #707276; $m-gray-d2: #707276;
$m-gray-d3: #646668; $m-gray-d3: #646668;
$m-gray-d4: #050505; $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: #1AA1DE;
$m-blue-l1: #2BACE6; $m-blue-l1: #2BACE6;
$m-blue-l2: #42B5E9; $m-blue-l2: #42B5E9;
$m-blue-l3: #59BEEC; $m-blue-l3: #59BEEC;
$m-blue-l4: tint($m-blue,90%);
$m-blue-l5: tint($m-blue,95%);
$m-blue-d1: #1790C7; $m-blue-d1: #1790C7;
$m-blue-d2: #1580B0; $m-blue-d2: #1580B0;
$m-blue-d3: #126F9A; $m-blue-d3: #126F9A;
...@@ -81,6 +98,30 @@ $m-pink-d1: #A0255B; ...@@ -81,6 +98,30 @@ $m-pink-d1: #A0255B;
$m-pink-d2: #8C204F; $m-pink-d2: #8C204F;
$m-pink-d3: #771C44; $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); $m-base-font-size: em(15);
......
lms/static/sass/elements/_controls.scss 0 → 100644
// 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
...@@ -171,3 +171,147 @@ ...@@ -171,3 +171,147 @@
.t-icon-solo { .t-icon-solo {
@include line-height(0); @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
// lms - views - verification flow // lms - views - verification flow
// ==================== // ====================
// some nasty resets and standard styles // MISC: extends - UI - window
body.register.verification-process { .ui-window {
font-family: 'Open Sans', sans-serif; @include clearfix();
border-radius: ($baseline/10);
box-shadow: 0 1px 2px 1px $shadow-l1;
margin-bottom: $baseline;
border: 1px solid $m-gray-l3;
background: $white;
}
// MISC: extends - UI - well
.ui-well {
box-shadow: inset 0 1px 2px 1px $shadow-l1;
padding: ($baseline*0.75) $baseline;
}
// MISC: custom link
.custom-link {
@extend .ui-fake-link;
}
// MISC: expandable UI
.is-expandable {
.title-expand {
}
.expandable-more {
display: block;
&.is-hidden {
display: none;
}
}
}
.register.verification-process {
// reset: box-sizing (making things so right its scary)
* {
@include box-sizing(border-box);
}
// reset: typography
font-family: $sans-serif;
// reset: typography - heading // reset: typography - heading
h1, h2, h3, h4, h5 ,h6 { h1, h2, h3, h4, h5 ,h6 {
@extend .t-title; @extend .t-title;
color: $m-gray-d4;
} }
// reset: typography - copy // reset: typography - copy
p, ol, ul, dl, input, select, textarea { p, ol, ul, dl, input, select, textarea {
font-family: $f-sans-serif; font-family: $f-sans-serif;
@extend .t-copy-base; color: $m-gray-d1;
} }
// reset: copy/text .copy {
p {
margin-bottom: ($baseline*0.75);
}
dt { p, ul, li, dl, blockquote, input, select {
margin: 0 0 .5em 0; margin-bottom: ($baseline*0.75);
font-weight: bold;
}
dd { &:last-child {
margin: 0 0 1em 0; margin-bottom: 0;
}
}
} }
dl dl { // reset: copy/text
margin: ($baseline/4) 0 0 ($baseline/2);
}
// reset: forms // reset: forms
input { input {
...@@ -42,580 +83,1128 @@ body.register.verification-process { ...@@ -42,580 +83,1128 @@ body.register.verification-process {
} }
label { label {
@extend .t-weight4;
font-family: $sans-serif;
font-style: normal; font-style: normal;
font-family: 'Open Sans', sans-serif; color: $m-gray-d4;
font-weight: 400;
} }
.faq { // HACK: nasty override due to our bad input/button styling
@extend .t-copy-sub2; button, input[type="submit"], input[type="button"] {
@include font-size(16);
label { @extend .t-weight3;
font-size: 12px; text-transform: none;
font-weight: bold; text-shadow: none;
} letter-spacing: 0;
} }
// reset: lists
.list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group {
@extend .ui-no-list;
}
// ==================== // ====================
// elements: layout // elements: layout
.content-wrapper { .content-wrapper {
background: none repeat scroll 0 0 #F7F7F7; background: $m-gray-l4;
padding-bottom: 0; padding-bottom: 0;
} }
.container { .container {
background-color: #fff; background-color: $white;
padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5); padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5);
} }
// elements: common UI // ====================
// elements: common copy
.title { .title {
@extend .t-title5; @extend .t-title5;
margin-bottom: ($baseline/2); @extend .t-weight1;
font-weight: 300;
} }
.tip { .copy {
@extend .t-copy-sub2; @extend .t-weight1;
@include transition(color 0.15s ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $lighter-base-font-color;
} }
// ====================
// elements - controls
.action-primary {
@extend .btn-primary-blue;
border: none;
}
.action-confirm {
@extend .btn-primary-green;
border: none;
}
// ==================== // ====================
// elements: page depth
// elements: header // ====================
.page-header {
// elements : help
.help {
}
.help-item {
.title { .title {
@include font-size(28); @extend .hd-lv4;
@include line-height(28); margin-bottom: ($baseline/4);
margin-bottom: $baseline; }
border-bottom: 1px solid #ccc;
padding-bottom: 20px; .copy {
color: #2F73BC; @extend .copy-detail;
font-weight: 300;
text-transform: uppercase;
} }
} }
// elements: page options .list-help {
.pay-options {
list-style-type: none;
margin: 0;
padding: 0;
li { }
display: inline-block;
background-color: $light-gray;
padding: ($baseline/2) ($baseline*.75);
margin-right: ($baseline/4);
vertical-align: middle;
&.other1 { // ====================
margin-right: -($baseline/4);
padding-right: ($baseline/4); // UI: page header
min-height: 25px; .page-header {
} width: flex-grid(12,12);
&.other2 { margin: 0 0 $baseline 0;
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0; border-bottom: ($baseline/4) solid $m-gray-l4;
}
.title {
@include clearfix();
width: flex-grid(12,12);
label { .wrapper-sts, .sts-track {
display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
input { .wrapper-sts {
vertical-align: middle; width: flex-grid(9,12);
} }
}
}
.sts-track {
width: flex-grid(3,12);
text-align: right;
// elements - controls .sts-track-label {
.m-btn-primary { @extend .text-sr;
margin-bottom: 0; }
padding: 0;
a, input {
background: none;
border: none;
box-shadow: none;
color: $very-light-text;
display: block;
padding: ($baseline*.75) $baseline;
text-transform: none;
text-shadow: none;
letter-spacing: 0;
&:hover { .sts-track-value {
text-decoration: none; @extend .copy-badge;
border: none; color: $white;
background: $m-green-l2;
}
} }
}
&.disabled, &[disabled], &.is-disabled {
background-color: #ccc;
box-shadow: none;
pointer-events: none;
&:hover { .sts {
background: $action-primary-disabled-bg !important; // needed for IE currently @extend .t-title7;
display: block;
color: $m-gray;
} }
} .sts-course {
@extend .t-title;
// NOTE: need to change this to a semantic class @include font-size(28);
&.green { @include line-height(28);
box-shadow: 0 2px 1px rgba(2,100,2,1); @extend .t-weight4;
background-color: rgba(0,136,1,1); display: block;
&:hover {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: #029D03;
} }
} }
} }
// ==================== // ====================
// UI : progress
.wrapper-progress {
position: relative;
margin-bottom: ($baseline*1.5);
}
.progress-sts {
@include size(($baseline/4));
@extend .ui-depth1;
position: absolute;
top: 43px;
left: 70px;
display: block;
width: 77%;
margin: 0 auto;
background: $m-gray-l4;
.progress-sts-value {
width: 0%;
height: 100%;
display: block;
background: $m-green-l3;
}
}
// nav/status: progress
.progress { .progress {
@include clearfix; width: flex-grid(12,12);
position: relative; margin: 0 auto;
margin-bottom: $baseline; border-bottom: ($baseline/4) solid $m-gray-l4;
border-bottom: 1px solid #ccc;
padding-bottom: $baseline;
.progress-steps { .progress-steps {
margin: 0; @include clearfix();
padding: 0; position: relative;
top: ($baseline/4);
} }
.progress-step { .progress-step {
@extend .t-copy-sub1; @extend .ui-depth2;
position: relative; position: relative;
z-index: 200; width: flex-grid(2,12);
display: inline-block; float: left;
width: 15%; padding: $baseline $baseline ($baseline*1.5) $baseline;
padding: ($baseline/2) 0;
text-align: center; text-align: center;
color: #ccc;
&.current { .wrapper-step-number, .step-number, .step-name {
color: #008801; display: block;
}
.wrapper-step-number {
@include size(($baseline*2) ($baseline*2));
margin: 0 auto ($baseline/2) auto;
border-radius: ($baseline*10);
border: ($baseline/5) solid $m-gray-l4;
background: $white;
.step-number {
@extend .t-title7;
@extend .t-weight4;
@include line-height(0);
margin: 16px auto 0 auto;
color: $m-gray-l1;
}
}
.step-name {
@extend .t-title7;
@extend .t-weight4;
color: $m-gray-l1;
}
// confirmation step w/ icon
&#progress-step5 {
.number { .step-number {
border: 4px solid #008801; margin-top: ($baseline/2);
color: #008801;
} }
} }
&.done { // STATE: is completed
color: #777; &.is-completed {
border-bottom: ($baseline/5) solid $m-green-l2;
.wrapper-step-number {
border-color: $m-green-l2;
}
.step-number, .step-name {
color: $m-gray-l3;
}
}
// STATE: is current
&.is-current {
border-bottom: ($baseline/5) solid $m-blue-d1;
opacity: 1.0;
.wrapper-step-number {
border-color: $m-blue-d1;
}
.number { .step-number, .step-name {
border: 4px solid #777; color: $m-gray-d3;
color: #777;
} }
} }
} }
}
.number { // ====================
height: 2em;
width: 2em; // UI: slides
display: block; .carousel {
margin: 0 auto ($baseline/2);
border: 4px solid #ddd; // carousel item
border-radius: 20px; .carousel-item {
background-color: #fff; opacity: 0.0;
line-height: 2em;
text-align: center;
color: #ccc;
} }
.mini { // STATE: active
height: .5em; .carousel-active {
width: .5em; opacity: 1.0;
margin-bottom: 1.5em;
} }
.progress-line, // indiv slides
.progress-line-done { .wrapper-view {
position: absolute; padding: 0 $baseline !important;
top: 26%;
left: 8%;
height: 2px;
width: 100%;
display: inline-block;
background-color: #ddd;
} }
.progress-line-done { .view {
width: 20%; width: flex-grid(12,12);
background-color: #008801;
> .title {
@extend .hd-lv2;
color: $m-blue-d1;
}
.instruction {
@extend .t-copy-lead1;
margin-bottom: $baseline;
}
} }
}
.support { .wrapper-task {
margin-top: ($baseline*2); @include clearfix();
} width: flex-grid(12,12);
margin: ($baseline*2) 0 $baseline 0;
.wrapper-help {
float: right;
width: flex-grid(6,12);
padding: ($baseline*0.75) $baseline;
// ==================== .help {
margin-bottom: ($baseline*1.5);
&:last-child {
margin-bottom: 0;
}
// VIEW: select a track .title {
&.step-select-track { @extend .hd-lv3;
}
.select { .copy {
@include clearfix(); @extend .copy-detail;
}
.divider { // help - general list
display: block; .list-help {
clear: both;
width: 60%;
margin: $baseline $baseline 0 $baseline;
border-top: 2px solid #ddd;
p { .help-item {
@extend .t-copy-base; margin-bottom: ($baseline/4);
position: relative; border-bottom: 1px solid $m-gray-l4;
top: -$baseline; padding-bottom: ($baseline/4);
width: 40px;
margin: 0 auto; &:last-child {
padding: 0 $baseline; margin-bottom: 0;
background-color: #fff; border-bottom: none;
color: #aaa; padding-bottom: 0;
text-align: center; }
}
}
// help - faq
.list-faq {
margin-bottom: $baseline;
.faq-question {
@extend .hd-lv3;
border-bottom: 1px solid $m-gray-l4;
padding-bottom: ($baseline/4);
}
.faq-answer {
margin-bottom: ($baseline*1.25);
}
}
} }
} }
.block { .task {
position: relative; @extend .ui-window;
float: left; float: left;
margin: 0 $baseline ($baseline*1.5) 0; width: flex-grid(6,12);
border-top: 5px solid #32A5D9; margin-right: flex-gutter();
background-color: #eee; }
padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
width: 60%;
.controls {
padding: ($baseline*0.75) $baseline;
background: $m-gray-l4;
&.block-cert { .list-controls {
border-top: 5px solid #008801; position: relative;
}
.ribbon { .control {
background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0; position: absolute;
position: absolute;
top: -($baseline*1.5); .action {
right: $baseline; @extend .btn-primary-blue;
display: block; padding: ($baseline/2) ($baseline*0.75);
width: ($baseline*3);
height: ($baseline*4); *[class^="icon-"] {
@extend .t-icon4;
padding: ($baseline*.25) ($baseline*.5);
display: block;
}
}
// STATE: hidden
&.is-hidden {
visibility: hidden;
}
// STATE: shown
&.is-shown {
visibility: visible;
} }
}
// STATE: approved
&.approved {
p, li, dl { .action {
color: $lighter-base-font-color; @extend .btn-primary-green;
}
}
} }
.wrap-copy { // control - redo
width: 60%; .control-redo {
display: inline-block; position: absolute;
vertical-align: middle; left: ($baseline/2);
} }
.title { // control - take/do
@extend .t-title4; .control-do {
font-weight: bold; left: 45%;
} }
.m-btn-primary { // control - approve
.control-approve {
position: absolute; position: absolute;
bottom: ($baseline*1.5); right: ($baseline/2);
right: ($baseline*1.5); }
}
.msg {
@include clearfix();
margin-top: ($baseline*2);
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.list-actions {
position: relative;
top: -($baseline/2);
float: left;
width: flex-grid(4,12);
text-align: right;
.action-retakephotos a {
@extend .btn-primary-gray;
}
}
}
.msg-followup {
border-top: ($baseline/10) solid $m-gray-t0;
padding-top: $baseline;
}
}
// indiv slides - photo
#wrapper-facephoto {
}
// indiv slides - ID
#wrapper-idphoto {
}
// indiv slides - review
#wrapper-review {
.review-task {
margin-bottom: ($baseline*1.5);
padding: ($baseline*0.75) $baseline;
border-radius: ($baseline/10);
background: $m-gray-l4;
&:last-child {
margin-bottom: 0;
}
> .title {
@extend .hd-lv3;
} }
.copy {
@extend .copy-base;
strong {
@extend .t-weight5;
color: $m-gray-d4;
}
}
} }
hr { // individual task - photos
margin: 1em 0 2em 0; .review-task-photos {
.wrapper-photos {
@include clearfix();
width: flex-grid(12,12);
margin: $baseline 0;
.wrapper-photo {
float: left;
width: flex-grid(6,12);
margin-right: flex-gutter();
&:last-child {
margin-right: 0;
}
.placeholder-photo {
@extend .ui-window;
padding: ($baseline*0.75) $baseline;
img {
display: block;
width: 100%;
margin: 0 auto;
}
}
}
.help-tips {
.title {
@extend .hd-lv5;
}
.copy {
@extend .copy-detail;
}
// help - general list
.list-tips {
.tip {
margin-bottom: ($baseline/4);
border-bottom: 1px solid $m-gray-t0;
padding-bottom: ($baseline/4);
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
}
}
}
}
} }
.more { // individual task - name
margin-top: ($baseline/2); .review-task-name {
border-top: 1px solid #ccc; @include clearfix();
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.list-actions {
position: relative;
top: -($baseline);
float: left;
width: flex-grid(4,12);
text-align: right;
.action-editname a {
@extend .btn-primary-gray;
}
}
} }
.tips { // individual task - contribution
float: right; .review-task-contribution {
width: 32%;
p { .list-fields {
@extend .t-copy-sub1; @include clearfix();
margin: $baseline 0;
.field {
float: left;
margin-right: ($baseline/2);
padding: ($baseline/2) ($baseline*0.75);
background: $m-gray-t0;
&:last-child {
margin-right: 0;
}
}
.field-group-other {
.contribution-option {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
&:last-child {
margin-right: 0;
}
}
.contribution-option-other1 label, .contribution-option-other2 label {
@extend .text-sr;
}
}
} }
} }
} }
} }
// UI: camera states
.cam {
.placeholder-cam {
@include size(500px 375px);
margin: $baseline auto;
background: $m-blue-d1;
}
.controls {
height: ($baseline*4);
}
}
// ==================== // ====================
// UI: deco - divider
.deco-divider {
position: relative;
display: block;
margin: $baseline 0 ($baseline*2) 0;
border-top: ($baseline/5) solid $m-gray-l4;
// VIEW: requirements .copy {
&.step-requirements { @extend .t-copy-lead1;
@extend .t-weight4;
position: absolute;
top: -($baseline*1.25);
left: 45%;
padding: ($baseline/2) ($baseline*1.5);
background: white;
text-align: center;
color: $m-gray-l2;
}
}
// ====================
// UI: nav - wizard
.nav-wizard {
@extend .ui-well;
@include clearfix;
width: flex-grid(12,12);
margin: $baseline 0;
border-radius: ($baseline/10);
background: $m-gray-l4;
.help-inline, .wizard-steps {
.section-head .title {
@extend .t-title4;
display: inline-block;
margin: ($baseline/4) 0;
} }
.reqs { .help-inline {
margin: $baseline $baseline ($baseline*1.5) $baseline; @extend .t-copy-sub1;
float: left;
width: flex-grid(6,12);
margin: ($baseline*0.75) flex-gutter() 0 0;
} }
.req { .wizard-steps {
height: 13em; float: right;
width: 27%; width: flex-grid(6,12);
display: inline-block; text-align: right;
margin-right: 1%; }
border: 1px solid #ddd;
padding: $baseline 2%;
text-align: center;
vertical-align: top;
[class^="icon-"] { // STATE: is ready
display: block; &.is-ready {
width: 150px; background: $m-blue-l4;
margin: $baseline auto; }
font-size: 75px;
&.icon-id { &.is-not-ready {
background: transparent url('../images/icon-id.png') no-repeat center center; background: $m-gray-l4;
height: 70px; }
} }
// ====================
// UI: forms - payment
.contribution-options {
.contribution-option {
border-radius: ($baseline/5);
.label, label, input {
display: inline-block;
vertical-align: middle;
} }
} .label, label {
margin-bottom: 0;
}
.next-step { input {
float: right; margin-right: ($baseline/4);
}
.tip { .deco-denomination, .label-value, .denomination-name {
margin-top: $baseline; display: inline-block;
vertical-align: middle;
}
.deco-denomination {
} }
.label-value {
@extend .t-weight4;
}
.denomination-name {
@include font-size(14);
color: $m-gray-l1;
}
// specific fields
#contribution-other-amt {
position: relative;
top: -($baseline/4);
width: ($baseline*3);
padding: ($baseline/4) ($baseline/2);
}
}
}
// ====================
// UI: main content
.wrapper-content-main {
}
.content-main {
width: flex-grid(12,12);
> .title {
@extend .hd-lv2;
color: $m-blue-d1;
} }
hr { .instruction {
margin: ($baseline*2); @extend .t-copy-lead1;
margin-bottom: $baseline;
} }
}
.steps-section { // ====================
.section-head { // UI: supplemental content
margin-bottom: ($baseline); .wrapper-content-supplementary {
} margin: ($baseline*1.5) 0;
border-top: ($baseline/4) solid $m-gray-l4;
}
.step { .content-supplementary {
width: 60%; width: flex-grid(12,12);
margin-left: 3%;
padding: ($baseline) ($baseline*1.5);
.step-title { .list-help {
@extend .t-title5; @include clearfix();
font-weight: bold;
}
.number { .help-item {
@extend .t-title6; width: flex-grid(4,12);
height: 2em; float: left;
width: 2em; margin-right: flex-gutter();
display: inline-block;
margin: 0 ($baseline/2) 0 0;
border: 3px solid #000;
border-radius: 30px;
font-weight: bold;
line-height: 2em;
text-align: center;
color: #000;
}
.copy { &:last-child {
@extend .t-copy-base; margin-right: 0
margin-left: 65px;
} }
} }
} }
} }
// ==================== // ====================
// VIEW: select a track
&.step-select-track {
.form-register-choose {
@include clearfix();
width: flex-grid(12,12);
margin: $baseline 0;
// VIEW: take and review photos .deco-divider {
&.step-photos { width: flex-grid(8,12);
float: left;
}
}
.register-choice, .help-register {
float: left;
}
.register-choice {
width: flex-grid(8,12);
margin: 0 flex-gutter() $baseline 0;
border-top: ($baseline/4) solid $m-gray-d4;
padding: $baseline ($baseline*1.5);
background: $m-gray-l4;
&:last-child {
margin-bottom: none;
}
.wrapper-copy, .list-actions {
display: inline-block;
vertical-align: middle;
}
.wrapper-copy {
width: flex-grid(8,8);
}
.list-actions {
width: flex-grid(8,8);
text-align: right;
}
.title {
@extend .t-title5;
@extend .t-weight5;
margin-bottom: ($baseline/2);
}
.copy {
@extend .t-copy-base;
}
.action-select input {
@extend .t-weight4;
}
}
.register-choice-audit {
border-color: $m-blue-d1;
// TEMP: for dev placement only .wrapper-copy {
.wrapper-cam, width: flex-grid(5,8);
.wrapper-photo { }
height: 375px;
width: 500px; .list-actions {
background-color: #eee; width: flex-grid(3,8);
}
.action-select input {
@extend .btn-primary-blue;
}
}
.register-choice-certificate {
border-color: $m-green-l1;
position: relative; position: relative;
p { .deco-ribbon {
position: absolute; position: absolute;
top: 40%; top: -($baseline*1.5);
left: 40%; right: $baseline;
color: #ccc; display: block;
width: ($baseline*3);
height: ($baseline*4);
background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
}
.list-actions {
margin-top: $baseline;
border-top: ($baseline/10) solid $m-gray-t1;
padding-top: $baseline;
}
.action-intro, .action-select {
display: inline-block;
vertical-align: middle;
}
.action-intro {
@extend .copy-detail;
width: flex-grid(3,8);
text-align: left;
}
.action-select {
width: flex-grid(5,8);
}
.action-select input {
@extend .btn-primary-green;
}
.action-intro {
} }
} }
.block-photo { .help-register {
@include clearfix(); width: flex-grid(4,12);
background-color: $white;
.title { .title {
@extend .t-title4; @extend .hd-lv4;
@extend .t-weight4;
margin-bottom: ($baseline/2);
} }
.wrapper-up, .copy {
.wrapper-down { @extend .copy-detail;
@include clearfix(); }
}
// progress indicator
.progress-sts-value {
width: 0%;
}
.wrapper-content-supplementary .content-supplementary .help-item {
width: flex-grid(3,12);
}
// contribution selection
.field-certificate-contribution {
margin: $baseline 0;
.label {
@extend .hd-lv4;
@extend .t-weight4;
margin-bottom: ($baseline/2);
} }
}
.cam { .contribution-options {
width: 500px; @include clearfix();
margin: $baseline 0;
.field {
float: left; float: left;
padding-right: $baseline; margin-right: ($baseline/2);
padding: ($baseline/2) ($baseline*0.75);
background: $m-gray-t0;
input {
width: auto;
}
&:last-child {
margin-right: 0;
}
} }
.photo-controls { #contribution-other-amt {
background-color: #ddd; width: ($baseline*3);
padding: ($baseline/4) ($baseline/2);
}
.controls-list { .field-group-other {
@include clearfix();
position: relative;
margin: 0;
padding: ($baseline*.25) ($baseline*.75);
list-style-type: none;
height: 60px;
.control { .contribution-option {
display: inline-block; display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
.action { &:last-child {
@extend .button-primary; margin-right: 0;
display: block; }
background-color: $blue; }
color: $white;
border: 3px solid #1A74A0;
border-radius: 40px;
padding: 10px 5px;
text-align: center;
i {
padding: ($baseline*.25) ($baseline*.5);
display: block;
}
&:hover { .contribution-option-other1 label, .contribution-option-other2 label {
@extend .text-sr;
}
}
}
}
} // VIEW: requirements
&.step-requirements {
} // progress indicator
.progress-sts-value {
width: 0%;
}
.list-reqs {
@include clearfix();
width: flex-grid(12,12);
&.is-hidden { .req {
visibility: hidden; @extend .ui-window;
} width: flex-grid(4,12);
min-height: ($baseline*15);
float: left;
margin-right: flex-gutter();
text-align: center;
&.is-shown { &:last-child {
visibility: visible; margin-right: 0;
} }
.title {
@extend .t-title5;
@extend .t-weight4;
padding: $baseline;
border-bottom: 1px solid $m-green-l2;
background: $m-green-l4;
&.control-do { }
position: relative;
left: 45%;
}
&.control-redo { .placeholder-art {
position: absolute; position: relative;
left: ($baseline/2); display: inline-block;
} margin: $baseline 0 ($baseline/2) 0;
padding: $baseline;
background: $m-green-l2;
border-radius: ($baseline*10);
*[class^="icon"] {
@extend .t-icon1;
color: $white;
}
&.control-approve { .icon-over, .icon-under {
position: absolute; position: relative;
right: ($baseline/2); }
}
&.approved a { .icon-under {
background-color: $green; @extend .ui-depth1;
} }
.icon-over {
@extend .ui-depth2;
@extend .t-icon5;
position: absolute;
left: 24px;
top: 34px;
background: $m-green-l2;
padding: 3px 5px;
} }
} }
}
.faq { .copy {
width: 45%; padding: ($baseline/2) $baseline;
float: left; }
padding-right: $baseline;
.copy-super, .copy-sub {
display: block;
}
.copy-super {
@extend .t-copy-base;
margin-bottom: ($baseline/2);
color: $m-green;
}
.copy-sub {
@extend .t-copy-sub2;
}
.actions {
padding: ($baseline/2) $baseline;
}
} }
} }
}
.photo-tips { // VIEW: take and review photos
@extend .t-copy-sub1; &.step-photos {
width: 45%;
float: left;
.title { }
@extend .t-title5;
border-bottom: 1px solid #ddd; // VIEW: take cam photo
padding-bottom: ($baseline/4); &.step-photos-cam {
font-weight: bold;
}
// progress indicator
.progress-sts-value {
width: 20%;
} }
}
.next-step { // VIEW: take id photo
margin-top: $baseline; &.step-photos-id {
.tip { // progress indicator
margin-top: $baseline; .progress-sts-value {
} width: 40%;
} }
}
.support { // VIEW: review photos
margin-top: ($baseline*2); &.step-review {
}
.review-photo { .nav-wizard {
width: 500px;
float: left;
.title { .help-inline {
@extend .t-title5; width: flex-grid(4,12);
margin-top: $baseline; margin-top: 0
}
.wizard-steps {
float: right;
width: flex-grid(8,12);
.wizard-step {
width: flex-grid(4,8);
margin-right: flex-gutter();
display: inline-block;
vertical-align: middle;
&:last-child {
margin-right: 0;
}
}
}
.step-match {
label {
@extend .t-copy-sub1;
}
} }
.step-proceed {
}
}
// progress indicator
.progress-sts-value {
width: 60%;
} }
}
#review-facephoto { // VIEW: take and review photos
margin-right: $baseline; &.step-confirmation {
// progress indicator
.progress-sts-value {
width: 100%;
} }
} }
} }
lms/templates/verify_student/photo_verification.html
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<%namespace name='static' file='/static_content.html'/> <%namespace name='static' file='/static_content.html'/>
<%block name="bodyclass">register verification-process step-photos</%block> <%block name="bodyclass">register verification-process step-photos</%block>
<%block name="title"><title>${("Register for [Course Name] | Verification")}</title></%block>
<%block name="js_extra"> <%block name="js_extra">
<script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.js')}"></script> <script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.js')}"></script>
...@@ -150,238 +151,367 @@ ...@@ -150,238 +151,367 @@
initSnapshotHandler(["photo_id", "face"]); initSnapshotHandler(["photo_id", "face"]);
}); });
</script> </script>
</%block> </%block>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
<header class="page-header"> <section class="wrapper">
<h2 class="title">You are registering for ${course_name} (ID Verified)</h2>
</header> <header class="page-header">
<h2 class="title">
<section class="progress"> <span class="wrapper-sts">
<header class="section-head"> <span class="sts">You are registering for</span>
<h3 class="sr title">Your Progress</h3> <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> </header>
<!--<span class="progress-status"></span><span class="progress-status-value"></span>--> <div class="wrapper-progress">
<ol class="progress-steps"> <section class="progress">
<li class="progress-step done" id="progress-step0"><span class="mini number"></span> Intro</li> <h3 class="sr title">Your Progress</h3>
<li class="progress-step current" id="progress-step1"><span class="sr">Current Step: </span> <span class="number">1</span> Take Photo</li>
<li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li> <ol class="progress-steps">
<li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li> <li class="progress-step is-completed" id="progress-step0">
<li class="progress-step" id="progress-step4"> <span class="number">4</span> Make Payment</li> <span class="wrapper-step-number"><span class="step-number">0</span></span>
<li class="progress-step" id="progress-step5"><span class="number"><i class="icon-ok"></i></span> Confirmation</li> <span class="step-name">Intro</span>
</ol> </li>
</section>
<li class="progress-step is-current" id="progress-step1">
<section class="wrapper carousel" data-transition="slide"> <span class="wrapper-step-number"><span class="step-number">1</span></span>
<div id="wrapper-facephoto" class="block-photo"> <span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
<h3 class="title">Take Your Photo</h3> </li>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
<li class="progress-step" id="progress-step2">
<div class="wrapper-up"> <span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name">Take ID Photo</span>
<div id="facecam" class="cam"> </li>
<div class="wrapper-cam">
<video id="face_video" width="500" height="375" autoplay></video><br/> <li class="progress-step" id="progress-step3">
<canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas> <span class="wrapper-step-number"><span class="step-number">3</span></span>
</div> <span class="step-name">Review</span>
</li>
<div class="controls photo-controls">
<ul class="controls-list"> <li class="progress-step" id="progress-step4">
<li class="control control-redo" id="face_reset_button"> <span class="wrapper-step-number"><span class="step-number">4</span></span>
<a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a> <span class="step-name">Make Payment</span>
</li> </li>
<li class="control control-do" id="face_capture_button">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a> <li class="progress-step" id="progress-step5">
</li> <span class="wrapper-step-number"><span class="step-number">
<li class="control control-approve" id="face_approve_button"> <i class="icon-ok"></i>
<a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a> </span></span>
</li> <span class="step-name">Confirmation</span>
</ul> </li>
</div> </ol>
</div> <span class="progress-sts">
<span class="progress-sts-value"></span>
<div class="help photo-tips facetips"> </span>
<h4 class="title">Tips on taking a successful photo</h4> </section>
<ul>
<li>Make sure your face is well-lit</li>
<li>Be sure your entire face is inside the frame</li>
<li>Can we match the photo you took with the one on your ID?</li>
<li>Click the checkmark once you are happy with the photo</li>
</ul>
<h4 class="title">Common Questions</h4>
<dl>
<dt>Why do you need my photo?</dt>
<dd>We need your photo to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt>
<dd>We only use it to verify your identity. It is not displayed anywhere.</dd>
</dl>
</div>
</div>
<div class="wrapper-down">
<div class="next-step">
<p class="m-btn-primary" id="face_next_button">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
</p>
<p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
</div>
</div>
</div>
<div id="wrapper-idphoto" class="block block-photo">
<h3 class="title">Take Your Photo</h3>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
<div class="wrapper-up">
<div id="idcam" class="cam">
<div class="wrapper-cam">
<video id="photo_id_video" width="500" height="375" autoplay></video><br/>
<canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
<div class="controls photo-controls">
<ul class="controls-list">
<li class="control control-redo" id="photo_id_reset_button">
<a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li>
<li class="control control-do" id="photo_id_capture_button">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve" id="photo_id_approve_button">
<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 idtips">
<h4 class="title">Tips on taking a successful photo</h4>
<ul>
<li>Make sure your ID is well-lit</li>
<li>Check that there isn't any glare</li>
<li>Ensure that you can see your photo and read your name</li>
<li>Try to keep your fingers at the edge to avoid covering important information</li>
</ul>
<h4 class="title">Common Questions</h4>
<dl>
<dt>Why do you need a photo of my ID?</dt>
<dd>We need to match your ID with your photo and name to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt>
<dd>We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed.</dd>
</dl>
</div>
</div>
<div class="wrapper-down">
<div class="next-step">
<p class="m-btn-primary" id="photo_id_next_button">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
</p>
<p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
</div>
</div>
</div>
<div id="wrapper-review" class="block block-photo">
<h3 class="title">Verify Your Submission</h3>
<p>Make sure we can verify your identity with the photos and information below.</p>
<div class="review-name">
<h3>Check Your Name</h3>
<p>Make sure your full name on your edX account, <b>${user_full_name}</b>, matches your ID. We will also use this as the name on your certificate.</p>
<p><a href="#">Edit my name</a></p>
</div>
<div class="wrapper-up">
<div id="review-facephoto" class="review-photo">
<div class="wrapper-photo">
<img id="face_image" width="500" height="375" src=""/>
</div>
<h4 class="title">The photo above needs to meet the following requirements:</h4>
<ul>
<li>Be well lit</li>
<li>Show your whole face</li>
<li>Match your ID</li>
</ul>
</div>
<div id="review-idphoto" class="review-photo">
<div class="wrapper-photo">
<img id="photo_id_image" width="500" height="375" src=""/>
</div>
<h4 class="title">The photo above needs to meet the following requirements:</h4>
<ul>
<li>Be readable (not too far away, no glare)</li>
<li>Show your name</li>
<li>Match the photo of your face and your name above</li>
</ul>
</div>
</div>
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
<hr />
<div class="wrapper-down">
<h3>Check Your Contribution</h3>
<%include file="/course_modes/_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
</div>
<hr />
<div class="next-step">
<form id="pay_form" method="post" action="${purchase_endpoint}">
<!-- <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> -->
<input type="checkbox" name="match" id="confirm_pics_good" /> <label for="match">Yes! My details all match.</label>
<input type="hidden" name="course_id" value="${course_id | h}" />
<p class="m-btn-primary" id="pay_button_frame">
<input type="button" id="pay_button" value="Go to Step 4: Secure Payment" name="payment">
</p>
</form>
<p class="tip">Once you verify your details match the requirements, <br />you can move on to step 4, payment on our secure server.</p>
</div>
</div> </div>
</section>
<div class="wrapper-content-main">
<article class="content-main">
<section class="support">
<p class="tip">More questions? <a rel="external" href="#">Check out our FAQs. (not active yet)</a></p> <section class="wrapper carousel" data-transition="slide">
<p class="tip">Change your mind? <a href="${reverse('course_modes_choose') + '?course_id=' + course_id }">You can always Audit the course for free without verifying.</a></p> <div id="wrapper-facephoto" class="wrapper-view block-photo">
<div class="facephoto view">
<h3 class="title">Take Your Photo</h3>
<div class="instruction">
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
</div>
<div class="wrapper-task">
<div id="facecam" class="task cam">
<div class="placeholder-cam">
<video id="face_video" width="500" height="375" autoplay></video><br/>
<canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
<div class="controls photo-controls">
<ul class="list-controls">
<li class="control control-redo" id="face_reset_button">
<a class="action action-redo" href="">
<i class="icon-undo"></i> <span class="sr">Retake</span>
</a>
</li>
<li class="control control-do" id="face_capture_button">
<a class="action action-do" href="">
<i class="icon-camera"></i><span class="sr">Take photo</span>
</a>
</li>
<li class="control control-approve" id="face_approve_button">
<a class="action action-approve" href="">
<i class="icon-ok"></i> <span class="sr">Looks good</span>
</a>
</li>
</ul>
</div>
</div>
<div class="wrapper-help">
<div class="help help-task photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4>
<div class="copy">
<ul class="list-help">
<li class="help-item">Make sure your face is well-lit</li>
<li class="help-item">Be sure your entire face is inside the frame</li>
<li class="help-item">Can we match the photo you took with the one on your ID?</li>
<li class="help-item">Click the checkmark once you are happy with the photo</li>
</ul>
</div>
</div>
<div class="help help-faq facefaq">
<h4 class="sr title">Common Questions</h4>
<div class="copy">
<dl class="list-faq">
<dt class="faq-question">Why do you need my photo?</dt>
<dd class="faq-answer">We need your photo to confirm that you are you.</dd>
<dt class="faq-question">What do you do with this picture?</dt>
<dd class="faq-answer">We only use it to verify your identity. It is not displayed anywhere.</dd>
</dl>
</div>
</div>
</div>
</div>
<nav class="nav-wizard">
<span class="help help-inline">Once you verify your photo looks good, you can move on to step 2.</span>
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next action-primary" id="face_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
</li>
</ol>
</nav>
</div> <!-- /view -->
</div> <!-- /wrapper-view -->
<div id="wrapper-idphoto" class="wrapper-view block-photo">
<div class="idphoto view">
<h3 class="title">Show Us Your ID</h3>
<div class="instruction">
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
</div>
<div class="wrapper-task">
<div id="idcam" class="task cam">
<div class="placeholder-cam">
<video id="photo_id_video" width="500" height="375" autoplay></video><br/>
<canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
<div class="controls photo-controls">
<ul class="list-controls">
<li class="control control-redo" id="photo_id_reset_button">
<a class="action action-redo" href="">
<i class="icon-undo"></i> <span class="sr">Retake</span>
</a>
</li>
<li class="control control-do" id="photo_id_capture_button">
<a class="action action-do" href="">
<i class="icon-camera"></i> <span class="sr">Take photo</span>
</a>
</li>
<li class="control control-approve" id="photo_id_approve_button">
<a class="action action-approve" href="">
<i class="icon-ok"></i> <span class="sr">Looks good</span>
</a>
</li>
</ul>
</div>
</div>
<div class="wrapper-help">
<div class="help help-task photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4>
<div class="copy">
<ul>
<li>Make sure your ID is well-lit</li>
<li>Check that there isn't any glare</li>
<li>Ensure that you can see your photo and read your name</li>
<li>Try to keep your fingers at the edge to avoid covering important information</li>
</ul>
</div>
</div>
<div class="help help-faq facefaq">
<h4 class="sr title">Common Questions</h4>
<div class="copy">
<dl class="list-faq">
<dt class="faq-question">Why do you need a photo of my ID?</dt>
<dd class="faq-answer">We need to match your ID with your photo and name to confirm that you are you.</dd>
<dt class="faq-question">What do you do with this picture?</dt>
<dd class="faq-answer">We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed.</dd>
</dl>
</div>
</div>
</div>
</div>
<nav class="nav-wizard">
<span class="help help-inline">Once you verify your ID photo looks good, you can move on to step 3.</span>
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next action-primary" id="photo_id_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
</li>
</ol>
</nav>
</div> <!-- /view -->
</div> <!-- /wrapper-view -->
<div id="wrapper-review" class="wrapper-view">
<div class="review view">
<h3 class="title">Verify Your Submission</h3>
<div class="instruction">
<p>Make sure we can verify your identity with the photos and information below.</p>
</div>
<div class="wrapper-task">
<ol class="review-tasks">
<li class="review-task review-task-name">
<h4 class="title">Check Your Name</h4>
<div class="copy">
<p>Make sure your full name on your edX account, ${user_full_name}, matches your ID. We will also use this as the name on your certificate.</p>
</div>
<ul class="list-actions">
<li class="action action-editname">
<a rel="modal" class="edit-name" href="#">Edit my name</a>
</li>
</ul>
</li>
<li class="review-task review-task-photos">
<h4 class="title">Review the Photos You've Taken</h4>
<div class="copy">
<p>Make sure your full name on your edX account, <strong>${user_full_name}</strong>, matches your ID. We will also use this as the name on your certificate.</p>
</div>
<ol class="wrapper-photos">
<li class="wrapper-photo">
<div class="placeholder-photo">
<img id="face_image" src=""/>
</div>
<div class="help-tips">
<h5 class="title">The photo above needs to meet the following requirements:</h5>
<ul class="list-help list-tips copy">
<li class="tip">Be well lit</li>
<li class="tip">Show your whole face</li>
<li class="tip">Match your ID</li>
</ul>
</div>
</li>
<li class="wrapper-photo">
<div class="placeholder-photo">
<img id="photo_id_image" src=""/>
</div>
<div class="help-tips">
<h5 class="title">The photo above needs to meet the following requirements:</h5>
<ul class="list-help list-tips copy">
<li class="tip">Be readable (not too far away, no glare)</li>
<li class="tip">Show your name</li>
<li class="tip">Match the photo of your face and your name above</li>
</ul>
</div>
</li>
</ol>
<div class="msg msg-retake msg-followup">
<div class="copy">
<p>Photos don't meet the requirements?</p>
</div>
<ul class="list-actions">
<li class="action action-retakephotos">
<a class="retake-photos" href="#">Retake Your Photos</a>
</li>
</ul>
</div>
</li>
<li class="review-task review-task-contribution">
<h4 class="title">Check Your Contribution Level</h4>
<div class="copy">
<p>Please confirm your contribution for this course:</p>
</div>
<%include file="/course_modes/_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
</li>
</ol>
</div>
<nav class="nav-wizard">
<span class="help help-inline">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</span>
<ol class="wizard-steps">
<li class="wizard-step step-match">
<input type="checkbox" name="match" id="confirm_pics_good" />
<label for="confirm_pics_good">Yes! My details all match.</label>
</li>
<li class="wizard-step step-proceed">
<form id="pay_form" method="post" action="${purchase_endpoint}">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<input type="hidden" name="course_id" value="${course_id | h}" />
<button type="submit" class="action-primary" id="pay_button">Go to Step 4: Secure Payment</button>
<!-- <input class="action-primary" type="button" id="pay_button" value="Go to Step 4: Secure Payment" name="payment"> -->
</form>
</li>
</ol>
</nav>
</div> <!-- /view -->
</div> <!-- /wrapper-view -->
</section>
</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> </section>
</div> </div>
<section id="edit-name" class="modal"> <section id="edit-name" class="modal">
<header> <header>
<h4>${_("Edit Your Full Name")}</h4> <h4>${_("Edit Your Full Name")}</h4>
...@@ -407,6 +537,4 @@ ...@@ -407,6 +537,4 @@
<span class="label">close</span> <span class="label">close</span>
</a> </a>
</section> </section>
</%block> </%block>
lms/templates/verify_student/show_requirements.html
...@@ -2,70 +2,154 @@ ...@@ -2,70 +2,154 @@
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements</%block> <%block name="bodyclass">register verification-process step-requirements</%block>
<%block name="title"><title>${("Register for [Course Name]")}</title></%block>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header header-white"> <header class="page-header">
<h2 class="title header-white-title">You are registering for ${course_id} (ID Verified)</h2> <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> </header>
<div class="wrapper-progress">
<section class="progress">
<h3 class="sr title">Your Progress</h3>
<section class="progress"> <ol class="progress-steps">
<header class="section-head"> <li class="progress-step is-current" id="progress-step0">
<h3 class="sr">Your Progress</h3> <span class="wrapper-step-number"><span class="step-number">0</span></span>
</header> <span class="step-name">Intro</span>
<!--<span class="progress-line"></span><span class="progress-line-done"></span>--> </li>
<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">
<li class="progress-step" id="progress-step1"><span class="number">1</span> Take Photo</li> <span class="wrapper-step-number"><span class="step-number">1</span></span>
<li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li> <span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
<li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li> </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> <li class="progress-step" id="progress-step2">
</ol> <span class="wrapper-step-number"><span class="step-number">2</span></span>
</section> <span class="step-name">Take ID Photo</span>
</li>
<section class="reqs-section">
<header class="section-head"> <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> <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"> <div class="instruction">
<h4>Webcam</h4> <p>There are a few things you will need to register as an ID verified student:</p>
<i class="icon-facetime-video"></i>
<p>A webcam and a modern browser <span class="tip">Firefox, Chrome, or Opera</span></p>
</div> </div>
<div class="req3 req"> <ul class="list-reqs">
<h4>Credit or Debit Card</h4> <li class="req req-1 req-id">
<i class="icon-credit-card"></i> <h4 class="title">Identification</h4>
<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 class="placeholder-art">
</div> <i class="icon-list-alt icon-under"></i>
</div> <i class="icon-user icon-over"></i>
</div>
<div class="next-step"> <div class="copy">
<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>
<p class="tip">Change your mind? <a href="">You can always Audit.</a></p> <span class="copy-super">A photo identification document</span>
</div> <span class="copy-sub">a drivers license, passport, student ID, or other ID with your name and picture on it</span>
</section> </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"> <div class="copy">
<p class="tip">Missing something? <a href="">You can always Audit the course</a>.</p> <p>
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p> <span class="copy-super">A webcam and a modern browser</span>
</section> <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> </div>
</%block> </%block>
Markdown is supported
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