Skip to content

E
edx-platform
Commit 6bb93607 by David Ormsbee
Options

Merge branch 'ormsbee/verify2' into ormsbee/verifyuser3

parents 0712464f bae9c307
Showing with 336 additions and 199 deletions
common/templates/course_modes/choose.html
......@@ -2,13 +2,13 @@
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification select-track</%block>
<%block name="bodyclass">register verification-process step-select-track</%block>
<%block name="js_extra">
<script type="text/javascript">
$(document).ready(function() {
$( ".more" ).slideUp();
$( ".more" ).hide();
$( ".expand" ).click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
......@@ -54,7 +54,6 @@
<span class="ribbon"></span>
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
<form>
<dl>
<dt>
Select your contribution for this course:
......@@ -78,7 +77,7 @@
</dd>
</dl>
<p class="tip tip-input expand">
<p class="tip expand">
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a>
</p>
......@@ -87,6 +86,10 @@
<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.
......@@ -102,13 +105,10 @@
</dd>
% endif
<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 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"> <label for="honor-code">Select Honor Code Certificate</label></p>
<p><input type="checkbox" name="honor-code"> <label for="honor-code">Select Honor Code Certificate</label></p>
</dd>
% endif
</dl>
......@@ -125,7 +125,7 @@
<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>
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
......
lms/static/sass/base/_mixins.scss
......@@ -4,13 +4,13 @@
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem;
// font-size: ($sizeValue/10) + rem;
}
// mixins - line height
@mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem;
// line-height: (($fontSize/10)*1.48) + rem;
}
// image-replacement hidden text
......
lms/static/sass/base/_variables.scss
// base
$baseline: 20px;
// ====================
// LAYOUT: grid
$gw-column: 80px;
$gw-gutter: 20px;
$fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
// fonts
// ====================
// FONTS
$sans-serif: 'Open Sans', $verdana;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif;
$serif: $georgia;
// ====================
// MISC: base fonts/colors
$body-font-size: em(14);
$body-line-height: golden-ratio(.875em, 1);
$base-font-color: rgb(60,60,60);
......@@ -23,6 +31,9 @@ $base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
$very-light-text: #fff;
// ====================
// COLORS: misc.
$white: rgb(255,255,255);
$black: rgb(0,0,0);
$blue: rgb(29,157,217);
......@@ -38,11 +49,11 @@ $sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170);
$green: rgb(37, 184, 90);
// old variables
// COLORS: old variables
$light-gray: #ddd;
$dark-gray: #333;
// edx.org marketing site variables
// COLORS: edx.org marketing site variables
$m-gray: #8A8C8F;
$m-gray-l1: #97999B;
$m-gray-l2: #A4A6A8;
......@@ -70,6 +81,8 @@ $m-pink-d1: #A0255B;
$m-pink-d2: #8C204F;
$m-pink-d3: #771C44;
// ====================
$m-base-font-size: em(15);
$base-font-color: rgb(60,60,60);
......@@ -90,57 +103,56 @@ $courseware-footer-border: none;
$courseware-footer-shadow: none;
$courseware-footer-margin: 0px;
// ====================
// actions
// ACTIONS: general
$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
$button-bg-color: transparent;
$button-bg-hover-color: #fff;
// actions - primary
// ACTIONS: primary
$action-primary-bg: $m-blue-d3;
$action-primary-fg: $white;
$action-primary-shadow: $m-blue-d4;
// focused - hover/active pseudo states
// ACTIONS: primary - focused - hover/active pseudo states
$action-primary-focused-bg: $m-blue-d1;
$action-primary-focused-fg: $white;
// current or active navigation item
// ACTIONS: primary - current or active navigation item
$action-primary-active-bg: $m-blue;
$action-primary-active-fg: $m-blue-d3;
$action-primary-active-shadow: $m-blue-d2;
$action-primary-active-focused-fg: $m-blue-d4;
$action-primary-active-focused-shadow: $m-blue-d3;
// disabled
// ACTIONS: disabled
$action-primary-disabled-bg: $m-gray-d3;
$action-prmary-disabled-fg: $white;
// actions - secondary
// ACTIONS: secondary
$action-secondary-bg: $m-pink;
$action-secondary-fg: $white;
$action-secondary-shadow: $m-pink-d2;
// focused - hover/active pseudo states
// ACTIONS: secondary - focused - hover/active pseudo states
$action-secondary-focused-bg: $m-pink-l3;
$action-secondary-focused-fg: $white;
// current or active navigation item
// ACTIONS: secondary - current or active navigation item
$action-secondary-active-bg: $m-pink-l2;
$action-secondary-active-fg: $m-pink-d1;
$action-secondary-active-shadow: $m-pink-d1;
$action-secondary-active-focused-fg: $m-pink-d3;
$action-secondary-active-focused-shadow: $m-pink-d2;
// disabled
// ACTIONS: secondary - disabled
$action-secondary-disabled-bg: $m-gray-d3;
$action-secondary-disabled-fg: $white;
// ====================
// MISC: visual horizontal rules
$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));
......@@ -148,51 +160,54 @@ $faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240
$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0));
$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0));
// MISC: dashboard
$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245));
$dashboard-profile-header-color: transparent;
$dashboard-profile-color: rgb(252,252,252);
$dot-color: $light-gray;
// MISC: course assets
$content-wrapper-bg: $white;
$course-bg-color: #d6d6d6;
$course-bg-image: url(../images/bg-texture.png);
$account-content-wrapper-bg: shade($body-bg, 2%);
$course-profile-bg: rgb(245,245,245);
$course-header-bg: rgba(255,255,255, 0.93);
// MISC: borders
$border-color-1: rgb(190,190,190);
$border-color-2: rgb(200,200,200);
$border-color-3: rgb(100,100,100);
$border-color-4: rgb(252,252,252);
// MISC: links and buttons
$link-color: $blue;
$link-color-d1: $m-blue-d2;
$link-hover: $pink;
$site-status-color: $pink;
$button-color: $blue;
$button-archive-color: #eee;
// MISC: shadow, form, modal
$shadow-color: $blue;
$form-bg-color: #fff;
$modal-bg-color: rgb(245,245,245);
// MISC: sidebar
$sidebar-chapter-bg-top: rgba(255, 255, 255, .6);
$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
$sidebar-chapter-bg: #eee;
$sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6);
$form-bg-color: #fff;
$modal-bg-color: rgb(245,245,245);
//TOP HEADER IMAGE MARGIN
// TOP HEADER IMAGE MARGIN
$header_image_margin: -69px;
//FOOTER MARGIN
$footer_margin: ($baseline/4) 0 ($baseline*1.5) 0;
//-----------------
// CSS BG Images
//-----------------
// ====================
// IMAGES: backgrounds
$homepage-bg-image: '../images/homepage-bg.jpg';
$login-banner-image: url(../images/bg-banner-login.png);
......@@ -200,11 +215,11 @@ $register-banner-image: url(../images/bg-banner-register.png);
$video-thumb-url: '../images/courses/video-thumb.jpg';
//-----------------
// Newer variables ported from Studio
//-----------------
// ====================
// SPLINT: new standards
// fonts
// SPLINT: fonts
$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
......
lms/static/sass/elements/_typography.scss
......@@ -134,45 +134,40 @@
// icons
.t-icon1 {
@include font-size(48);
@include line-height(48);
}
.t-icon2 {
@include font-size(36);
@include line-height(36);
}
.t-icon3 {
@include font-size(24);
@include line-height(24);
}
.t-icon4 {
@include font-size(18);
@include line-height(18);
}
.t-icon5 {
@include font-size(16);
@include line-height(16);
}
.t-icon6 {
@include font-size(14);
@include line-height(14);
}
.t-icon7 {
@include font-size(12);
@include line-height(12);
}
.t-icon8 {
@include font-size(11);
@include line-height(11);
}
.t-icon9 {
@include font-size(10);
@include line-height(10);
}
.t-icon-solo {
@include line-height(0);
}
lms/static/sass/views/_verification.scss
// lms - views - verification flow
// ====================
body.register.verification {
// some nasty resets and standard styles
body.register.verification-process {
font-family: 'Open Sans', sans-serif;
// some nasty resets and standard styles
h1, h2, h3, h4, h5, h6, p, input {
font-family: 'Open Sans', sans-serif;
// reset: typography - heading
h1, h2, h3, h4, h5 ,h6 {
@extend .t-title;
}
// reset: typography - copy
p, ol, ul, dl, input, select, textarea {
font-family: $f-sans-serif;
}
// reset: copy/text
p {
margin-bottom: ($baseline*.75);
margin-bottom: ($baseline*0.75);
}
dt {
margin: 0 0 .5em 0;
font-weight: bold;
}
dd {
margin: 0 0 1em 0;
}
dl dl {
margin: ($baseline/4) 0 0 ($baseline/2);
}
// reset: forms
input {
font-style: normal;
font-weight: 400;
margin-right: ($baseline/5);
}
label {
font-style: normal;
font-family: 'Open Sans', sans-serif;
......@@ -26,7 +47,7 @@ body.register.verification {
}
.faq {
font-size: 12px;
@extend .t-copy-sub2;
label {
font-size: 12px;
......@@ -34,21 +55,11 @@ body.register.verification {
}
}
dt {
margin: 0 0 .5em 0;
font-weight: bold;
}
dd {
margin: 0 0 1em 0;
}
dl dl {
margin: ($baseline/4) 0 0 ($baseline/2);
}
// ====================
// basic reusable bits
// elements: layout
.content-wrapper {
background: none repeat scroll 0 0 #F7F7F7;
padding-bottom: 0;
......@@ -59,18 +70,31 @@ body.register.verification {
padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5);
}
// elements: common UI
.title {
@extend .t-title5;
margin-bottom: ($baseline/2);
font-weight: 300;
}
.tip {
@extend .t-copy-sub2;
@include transition(color 0.15s ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $lighter-base-font-color;
font-size: em(13);
}
// ====================
// elements: header
.page-header {
.title {
@include font-size(18);
@include font-size(28);
@include line-height(28);
margin-bottom: $baseline;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
......@@ -80,14 +104,7 @@ body.register.verification {
}
}
.title {
@extend .t-title9;
margin-bottom: ($baseline/2);
font-weight: bold;
}
// elements: page options
.pay-options {
list-style-type: none;
margin: 0;
......@@ -117,17 +134,24 @@ body.register.verification {
vertical-align: middle;
}
}
}
// elements - controls
.m-btn-primary {
margin-bottom: 0;
padding: 0;
a {
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 {
text-decoration: none;
......@@ -146,6 +170,7 @@ body.register.verification {
}
// NOTE: need to change this to a semantic class
&.green {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: rgba(0,136,1,1);
......@@ -159,24 +184,42 @@ body.register.verification {
}
.progress,
.steps {
// ====================
// nav/status: progress
.progress {
@include clearfix;
position: relative;
margin-bottom: $baseline;
border-bottom: 1px solid #ccc;
padding-bottom: $baseline;
ol {
.progress-steps {
margin: 0;
padding: 0;
}
.progress-step {
@extend .t-copy-sub1;
position: relative;
z-index: 200;
display: inline-block;
width: 15%;
padding: ($baseline/2) $baseline;
padding: ($baseline/2) 0;
text-align: center;
font-size: 12px;
color: #ccc;
&.current {
color: #000;
.number {
border: 4px solid #000;
color: #000;
}
}
&.done {
color: #008801;
.number {
......@@ -193,20 +236,45 @@ body.register.verification {
margin: 0 auto ($baseline/2);
border: 4px solid #ddd;
border-radius: 20px;
background-color: #fff;
line-height: 2em;
text-align: center;
color: #ccc;
}
}
.mini {
height: .5em;
width: .5em;
margin-bottom: 1.5em;
}
.progress-line,
.progress-line-done {
position: absolute;
top: 26%;
left: 8%;
height: 2px;
width: 100%;
display: inline-block;
background-color: #ddd;
}
.progress-line-done {
width: 20%;
background-color: #008801;
}
}
.support {
margin-top: ($baseline*2);
}
// ====================
// select a track page
&.select-track {
// VIEW: select a track
&.step-select-track {
.select {
@include clearfix();
......@@ -219,13 +287,13 @@ body.register.verification {
border-top: 2px solid #ddd;
p {
@extend .t-copy-base;
position: relative;
top: -$baseline;
width: 40px;
margin: 0 auto;
padding: 0 $baseline;
background-color: #fff;
font-size: 24px;
color: #aaa;
text-align: center;
}
......@@ -267,7 +335,8 @@ body.register.verification {
}
.title {
@extend .t-title7;
@extend .t-title4;
font-weight: bold;
}
.m-btn-primary {
......@@ -293,31 +362,111 @@ body.register.verification {
width: 32%;
p {
font-size: 14px;
@extend .t-copy-sub1;
}
}
}
}
// requirements page
&.requirements {
// ====================
// VIEW: requirements
&.step-requirements {
.section-head .title {
@extend .t-title4;
display: inline-block;
margin: ($baseline/4) 0;
}
.reqs {
margin: $baseline;
}
.req {
width: 30%;
width: 27%;
display: inline-block;
margin-right: $baseline;
margin-right: 1%;
border: 1px solid #ddd;
padding: $baseline 2%;
text-align: center;
vertical-align: top;
// for placement only
.placeholder-art {
height: 150px;
width: 150px;
margin: $baseline auto;
background-color: #eee;
i {
font-size: 24px;
}
}
}
.next-step {
float: right;
.tip {
margin-top: $baseline;
}
}
hr {
margin: ($baseline*2);
}
.steps-section {
.section-head {
margin-bottom: ($baseline);
}
.step {
width: 60%;
margin-left: 3%;
padding: ($baseline) ($baseline*1.5);
.step-title {
@extend .t-title5;
font-weight: bold;
}
.number {
@extend .t-title6;
height: 2em;
width: 2em;
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 {
@extend .t-copy-base;
margin-left: 65px;
}
}
}
}
// take and review photos page
&.photos {
// for dev placement only
// ====================
// VIEW: take and review photos
&.step-photos {
// TEMP: for dev placement only
.placeholder-cam,
.placeholder-photo {
height: 300px;
......@@ -369,9 +518,13 @@ body.register.verification {
display: block;
background-color: $blue;
color: $white;
padding: ($baseline*.25) ($baseline*.5);
border: none;
i {
padding: ($baseline*.25) ($baseline*.5);
display: block;
}
&:hover {
}
......@@ -415,30 +568,30 @@ body.register.verification {
float: left;
padding-right: $baseline;
}
}
.photo-tips {
width: 45%;
float: left;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin-bottom: $baseline;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin-bottom: $baseline;
}
}
.next-step {
width: 45%;
float: right;
.tip {
margin-top: $baseline;
}
}
.support {
......@@ -454,5 +607,4 @@ body.register.verification {
margin-right: $baseline;
}
}
}
lms/templates/verify_student/photo_verification.html
......@@ -2,7 +2,7 @@
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification photos</%block>
<%block name="bodyclass">register verification-process step-photos</%block>
<%block name="js_extra">
<!-- please move link to js/vendor/responsive-carousel/responsive-carousel.js from main.html to here -->
......@@ -166,24 +166,26 @@
<%block name="content">
<div class="container">
<header class="page-header">
<h2 class="title">You are registering for ${course_name} (ID Verified)</h2>
</header>
<section class="progress">
<h3 class="sr">Your Progress</h3>
<ol>
<li class="progress-step current" id="progress-step1"><span class="sr">Current: </span>Step 1 Take Your Photo</li>
<li class="progress-step" id="progress-step2">Step 2 ID Photo</li>
<li class="progress-step" id="progress-step3">Step 3 Review</li>
<li class="progress-step" id="progress-step4">Step 4 Payment</li>
<li class="progress-step" id="progress-step5">Finished Confirmation</li>
</ol>
<header class="section-head">
<h3 class="sr title">Your Progress</h3>
</header>
<!--<span class="progress-status"></span><span class="progress-status-value"></span>-->
<ol class="progress-steps">
<li class="progress-step done" id="progress-step0"><span class="mini number"></span> Intro</li>
<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>
<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="wrapper carousel" data-transition="slide">
<div id="wrapper-facephoto" class="block-photo">
<h3 class="title">Take Your Photo</h3>
......@@ -213,7 +215,7 @@
</div>
<div class="photo-tips facetips">
<div class="help photo-tips facetips">
<h4>Tips on taking a successful photo</h4>
<ul>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
......@@ -226,7 +228,7 @@
<div class="wrapper-down">
<div class="faq facefaq">
<h4 class="sr">Common Questions</h4>
<h4 class="sr 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>
......
lms/templates/verify_student/show_requirements.html
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification requirements</%block>
<%block name="bodyclass">register verification-process step-requirements</%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>
<section class="progress">
<h3 class="sr">Your Progress</h3>
<ol>
<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>
<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> Finished Confirmation</li>
</ol>
</section>
<section class="needs">
<h3 class="title">What You Will Need to Register</h3>
<header class="page-header header-white">
<h2 class="title header-white-title">You are registering for ${course_id} (ID Verified)</h2>
</header>
<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>
<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>
<p>A photo identification document like a drivers license, passport, or student ID.</p>
</div>
<div class="req2 req">
<h4>Webcam</h4>
<p>A webcam that connects to your computer and a modern browser.</p>
</div>
<section class="reqs-section">
<header class="section-head">
<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="placeholder-art"><i class="icon-credit-card"></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>
<div class="placeholder-art"><i class="icon-facetime-video"></i></div>
<p>A webcam and a modern browser <span class="tip">Firefox, Chrome, or Opera</span></p>
</div>
<div class="req3 req">
<h4>Credit or Debit Card</h4>
<p>A major credit or debit card.</p>
</div>
</div>
<p class="tip">Missing something? <a href="">You can always Audit the course</a>.</p>
</section>
<hr />
<section class="steps">
<h3 class="title">Steps to get Verified</h3>
<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>
<h4>Credit or Debit Card</h4>
<div class="placeholder-art"><i class="icon-credit-card"></i></div>
<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>
<h4 class="step"><span class="number">1</span> Take Your Photo</h4>
<p>To verify your identity, we need a clear and well-lit photo of your face to match it with your ID.</p>
<h4 class="step"><span class="number">2</span>Take a photo of your ID</h4>
<p>To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.</p>
<h4 class="step"><span class="number">3</span> Verify your submissions</h4>
<p>Review your photos to verify they are correct.</p>
<h4 class="step"><span class="number">4</span> Submit payment</h4>
<p>Pay for your course using a major credit of debit cards.</p>
<ul>
<li>Cards accepted:</li>
<li>Visa</li>
<li>Master Card</li>
<li>Maestro</li>
<li>Amex</li>
<li>Discover</li>
<li>JCB (provided it has the Discover logo on the card)</li>
<li>Diners Club</li>
<li>...need to list several more once firm</li>
</ul>
<h4 class="step"><span class="number"><i class="icon-ok"></i></span>You're Ready to Start Learning</h4>
<p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p>
<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>
<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>
<p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
</section>
</section>
......
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