Skip to content

E
edx-platform
Commit 0b625a6f by David Ormsbee
Options

Merge branch 'ormsbee/verifyuser' into ormsbee/verify2 

Conflicts:
	lms/static/sass/views/_verification.scss
	lms/templates/verify_student/photo_id_upload.html
parents da829b16 b5302a19
Showing with 617 additions and 163 deletions
lms/static/sass/views/_verification.scss
...@@ -2,19 +2,81 @@ ...@@ -2,19 +2,81 @@
// ==================== // ====================
body.register.verification { body.register.verification {
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;
}
p {
margin-bottom: ($baseline*.75);
}
input {
font-style: normal;
font-weight: 400;
}
label {
font-style: normal;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6, p { .faq {
font-family: 'Open Sans', sans-serif; font-size: 12px;
label {
font-size: 12px;
font-weight: bold;
} }
}
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
.content-wrapper {
background: none repeat scroll 0 0 #F7F7F7;
padding-bottom: 0;
}
.container {
background-color: #fff;
padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5);
}
.tip {
@include transition(color 0.15s ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $lighter-base-font-color;
font-size: em(13);
}
.page-header { .page-header {
.title { .title {
@extend .t-title5; @include font-size(18);
margin-bottom: $baseline; margin-bottom: $baseline;
font-weight: bold; border-bottom: 1px solid #ccc;
padding-bottom: 20px;
color: #2F73BC;
font-weight: 300;
text-transform: uppercase;
} }
} }
...@@ -24,141 +86,343 @@ body.register.verification { ...@@ -24,141 +86,343 @@ body.register.verification {
font-weight: bold; font-weight: bold;
} }
.select {
@include clearfix();
.block { .pay-options {
float: left; list-style-type: none;
margin: 0 $baseline $baseline 0; margin: 0;
background-color: #eee; padding: 0;
padding: $baseline;
width: 60%;
.title { li {
@extend .t-title7; 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);
min-height: 25px;
}
&.other2 {
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
} }
} label {
vertical-align: middle;
}
.tips { input {
float: right; vertical-align: middle;
width: 32%; }
} }
} }
.m-btn-primary {
margin-bottom: 0;
padding: 0;
a {
color: $very-light-text;
display: block;
padding: ($baseline*.75) $baseline;
.progress { &:hover {
text-decoration: none;
border: none;
}
}
&.disabled, &[disabled], &.is-disabled {
background-color: #ccc;
box-shadow: none;
pointer-events: none;
&:hover {
background: $action-primary-disabled-bg !important; // needed for IE currently
}
}
&.green {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: rgba(0,136,1,1);
&:hover {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: #029D03;
}
}
}
.progress {
/* background: transparent url('../images/vcert-steps.png') no-repeat 0 0;
height: 50px;
text-indent: -9999px;
*/
.progress-step { .progress-step {
border: 1px solid #eee;
display: inline-block; display: inline-block;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
} }
} }
// for dev placement only
.placeholder-cam,
.placeholder-photo {
height: 300px;
background-color: #eee;
position: relative;
p {
position: absolute;
top: 40%;
left: 40%; // select a track page
color: #ccc; &.select-track {
.select {
@include clearfix();
.divider {
display: block;
clear: both;
width: 60%;
margin: $baseline $baseline 0 $baseline;
border-top: 2px solid #ddd;
p {
position: relative;
top: -$baseline;
width: 40px;
margin: 0 auto;
padding: 0 $baseline;
background-color: #fff;
font-size: 24px;
color: #aaa;
text-align: center;
}
}
.block {
position: relative;
float: left;
margin: 0 $baseline ($baseline*1.5) 0;
border-top: 5px solid #32A5D9;
background-color: #eee;
padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
width: 60%;
&.block-cert {
border-top: 5px solid #008801;
.ribbon {
background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
position: absolute;
top: -($baseline*1.5);
right: $baseline;
display: block;
width: ($baseline*3);
height: ($baseline*4);
}
}
p, li, dl {
color: $lighter-base-font-color;
}
.wrap-copy {
width: 60%;
display: inline-block;
vertical-align: middle;
}
.title {
@extend .t-title7;
}
.m-btn-primary {
position: absolute;
bottom: ($baseline*1.5);
right: ($baseline*1.5);
}
}
hr {
margin: 1em 0 2em 0;
}
.more {
margin-top: ($baseline/2);
border-top: 1px solid #ccc;
}
.tips {
float: right;
width: 32%;
p {
font-size: 14px;
}
}
} }
} }
.block-photo { // requirements page
@include clearfix(); &.requirements {
background-color: $white; .req {
width: 30%;
.title { display: inline-block;
font-weight: bold; margin-right: $baseline;
text-align: center;
vertical-align: top;
} }
.wrapper-up, .next-step {
.wrapper-down { float: right;
@include clearfix();
} }
.cam { }
width: 45%;
float: left; // take and review photos page
padding-right: $baseline; &.photos {
// for dev placement only
.placeholder-cam,
.placeholder-photo {
height: 300px;
background-color: #eee;
position: relative;
p {
position: absolute;
top: 40%;
left: 40%;
color: #ccc;
}
} }
.photo-controls { .block-photo {
background-color: #ddd; @include clearfix();
background-color: $white;
.controls-list { .title {
margin: 0; font-weight: bold;
padding: ($baseline*.25) ($baseline*.75); }
list-style-type: none;
.control { .wrapper-up,
display: inline-block; .wrapper-down {
@include clearfix();
}
.action { .cam {
@extend .button-primary; width: 45%;
display: block; float: left;
background-color: $blue; padding-right: $baseline;
color: $white; }
padding: ($baseline*.25) ($baseline*.5);
border: none; .photo-controls {
background-color: #ddd;
.controls-list {
@include clearfix();
position: relative;
margin: 0;
padding: ($baseline*.25) ($baseline*.75);
list-style-type: none;
.control {
display: inline-block;
.action {
@extend .button-primary;
display: block;
background-color: $blue;
color: $white;
padding: ($baseline*.25) ($baseline*.5);
border: none;
&:hover {
&:hover { }
} }
&.is-hidden {
visibility: hidden;
}
&.is-shown {
visibility: visible;
}
&.control-do {
position: relative;
left: 45%;
}
&.control-redo {
position: absolute;
left: ($baseline/2);
}
&.control-approve {
position: absolute;
right: ($baseline/2);
}
&.approved a {
background-color: $green;
}
} }
} }
} }
.faq {
width: 45%;
float: left;
padding-right: $baseline;
}
} }
.faq { .photo-tips {
width: 45%; width: 45%;
float: left; float: left;
padding-right: $baseline;
dt { ul {
font-weight: bold; margin: 0;
padding: 0 0 ($baseline/2) 0; padding: 0;
} list-style-type: none;
}
dd { li {
margin: 0; margin-bottom: $baseline;
padding: 0 0 $baseline 0; }
}
}
} }
.photo-tips { .next-step {
width: 45%; width: 45%;
float: left; float: right;
} }
.actions { .support {
width: 45%; margin-top: ($baseline*2);
float: right; }
}
.review-photo { .review-photo {
width: 45%; width: 45%;
float: left; float: left;
} }
#review-facephoto { #review-facephoto {
margin-right: $baseline; margin-right: $baseline;
}
} }
} }
lms/templates/verify_student/face_upload.html
...@@ -12,6 +12,37 @@ $(document).ready(function() { ...@@ -12,6 +12,37 @@ $(document).ready(function() {
$( ".carousel-nav" ).addClass('sr'); $( ".carousel-nav" ).addClass('sr');
$('.block-photo .control-redo').addClass('is-hidden');
$('.block-photo .control-approve').addClass('is-hidden');
$('.block-photo .m-btn-primary').addClass('disabled');
$( "#wrapper-facephoto .control-do" ).click(function(e) {
e.preventDefault();
$(this).toggleClass('is-hidden');
$('#wrapper-facephoto .control-redo').toggleClass('is-shown');
$('#wrapper-facephoto .control-approve').toggleClass('is-shown');
});
$( "#wrapper-facephoto .control-approve" ).click(function(e) {
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-facephoto .m-btn-primary').removeClass('disabled');
});
$( "#wrapper-idphoto .control-do" ).click(function(e) {
e.preventDefault();
$(this).toggleClass('is-hidden');
$('#wrapper-idphoto .control-redo').toggleClass('is-shown');
$('#wrapper-idphoto .control-approve').toggleClass('is-shown');
});
$( "#wrapper-idphoto .control-approve" ).click(function(e) {
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-idphoto .m-btn-primary').removeClass('disabled');
});
}); });
...@@ -40,7 +71,7 @@ $(document).ready(function() { ...@@ -40,7 +71,7 @@ $(document).ready(function() {
<section class="wrapper carousel" data-transition="slide"> <section class="wrapper carousel" data-transition="slide">
<div id="wrapper-facephoto" class="block-photo"> <div id="wrapper-facephoto" class="block block-photo">
<h3 class="title">Take Your Photo</h3> <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> <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
...@@ -54,12 +85,12 @@ $(document).ready(function() { ...@@ -54,12 +85,12 @@ $(document).ready(function() {
<div class="controls photo-controls"> <div class="controls photo-controls">
<ul class="controls-list"> <ul class="controls-list">
<li class="control control-do">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-redo"> <li class="control control-redo">
<a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a> <a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li> </li>
<li class="control control-do">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve"> <li class="control control-approve">
<a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a> <a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
</li> </li>
...@@ -82,24 +113,20 @@ $(document).ready(function() { ...@@ -82,24 +113,20 @@ $(document).ready(function() {
<div class="wrapper-down"> <div class="wrapper-down">
<div class="faq facefaq"> <div class="faq facefaq">
<h4 class="sr">Common Questions</h4> <h4 class="sr">Common Questions</h4>
<dl> <dl>
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt> <dt>Why do you need my photo?</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd> <dd>We need your photo to confirm that you are you.</dd>
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt> <dt>What do you do with this picture?</dt>
<dd>Aenean eu leo quam.</dd> <dd>We only use it to verify your identity. It is not displayed anywhere.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt> </dl>
<dd>Maecenas faucibus mollis interdum.</dd>
</dl>
</div> </div>
<div class="actions"> <div class="next-step">
<ul> <p class="m-btn-primary">
<li class="action action-next"> <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a> </p>
<p class="tips">Once you verify your photo looks good, you can move on to step 2.</p> <p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
...@@ -107,7 +134,7 @@ $(document).ready(function() { ...@@ -107,7 +134,7 @@ $(document).ready(function() {
<div id="wrapper-idphoto" class="block-photo"> <div id="wrapper-idphoto" class="block block-photo">
<h3 class="title">Take Your Photo</h3> <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> <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
...@@ -122,12 +149,12 @@ $(document).ready(function() { ...@@ -122,12 +149,12 @@ $(document).ready(function() {
<div class="controls photo-controls"> <div class="controls photo-controls">
<ul class="controls-list"> <ul class="controls-list">
<li class="control control-do">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-redo"> <li class="control control-redo">
<a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a> <a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li> </li>
<li class="control control-do">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve"> <li class="control control-approve">
<a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a> <a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
</li> </li>
...@@ -152,7 +179,7 @@ $(document).ready(function() { ...@@ -152,7 +179,7 @@ $(document).ready(function() {
<div class="faq idfaq"> <div class="faq idfaq">
<h4 class="sr">Common Questions</h4> <h4 class="sr">Common Questions</h4>
<dl> <dl class="faq">
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt> <dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd> <dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt> <dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
...@@ -163,13 +190,11 @@ $(document).ready(function() { ...@@ -163,13 +190,11 @@ $(document).ready(function() {
</dl> </dl>
</div> </div>
<div class="actions"> <div class="next-step">
<ul> <p class="m-btn-primary">
<li class="action action-next"> <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a> </p>
<p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p> <p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
</li>
</ul>
</div> </div>
</div> </div>
...@@ -177,7 +202,7 @@ $(document).ready(function() { ...@@ -177,7 +202,7 @@ $(document).ready(function() {
<div id="wrapper-review" class="block-photo"> <div id="wrapper-review" class="block block-photo">
<h3 class="title">Verify Your Submission</h3> <h3 class="title">Verify Your Submission</h3>
<p>Make sure we can verify your identity with the photos and information below.</p> <p>Make sure we can verify your identity with the photos and information below.</p>
...@@ -215,32 +240,54 @@ $(document).ready(function() { ...@@ -215,32 +240,54 @@ $(document).ready(function() {
</div> </div>
</div> </div>
<hr />
<div class="wrapper-down">
<h3>Check Your Contribution</h3>
<dl>
<dt>
Select your contribution for this course:
</dt>
<dd>
<ul class="pay-options">
<li>
<input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
</li>
<li>
<input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label>
</li>
<li>
<input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
</li>
<li class="other1">
<input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
</li>
<li class="other2">
<label for="contribution-other-amt"><span class="sr">Other Amount</span> $</label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt">
</li>
</ul>
</dd>
</dl>
</div>
<div class="next"> <div class="next-step">
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p> <p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
<input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label> <input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label>
<div class="actions"> <p class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
<ul> <p class="tip">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
<li class="action action-next">
<a href="#">Go to Step 4: Secure Payment</a>
<p class="tips">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
</li>
</ul>
</div>
</div> </div>
</section> </section>
<section class="support"> <section class="support">
<p>More questions? <a rel="external" href="">Check out our FAQs.</a></p> <p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
<p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p> <p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
</section> </section>
......
lms/templates/verify_student/photo_id_upload.html
...@@ -2,68 +2,128 @@ ...@@ -2,68 +2,128 @@
<%! 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 select</%block> <%block name="bodyclass">register verification select-track</%block>
<%block name="js_extra">
<script type="text/javascript">
$(document).ready(function() {
$( ".more" ).slideUp();
$( ".expand" ).click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
});
});
</script>
</%block>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header"> <header class="page-header header-white">
<h2 class="title">You are registering for [coursename] (ID Verified)</h2> <h2 class="title header-white-title">You are registering for [coursename] (ID Verified)</h2>
</header> </header>
<h3 class="title">Select your track:</h3> <h3 class="title">Select your track:</h3>
<div class="select"> <div class="select">
<div class="block block-audit"> <div class="block block-audit">
<h4 class="title">Audit</h4> <div class="wrap-copy">
<p>Sign up to audit this course for free and track your own progress.</p> <h4 class="title">Audit This Course</h4>
<p>Sign up to audit this course for free and track your own progress.</p>
<p class="btn"> </div>
<a href="">Select Audit</a>
</p> <div class="wrap-action">
<p class="m-btn-primary">
<a href="">Select Audit</a>
</p>
</div>
</div> </div>
<div class="divider"><p>or</p></div>
<div class="select"> <div class="select">
<div class="block block-cert"> <div class="block block-cert">
<h4 class="title">Certificate of Achievement</h4> <h4 class="title">Certificate of Achievement</h4>
<span class="ribbon"></span>
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p> <p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
<form>
<dl> <dl>
<dt> <dt>
Select your contribution for this course (in USD): Select your contribution for this course:
</dt> </dt>
<dd> <dd>
<ul> <ul class="pay-options">
<li> <li>
<input type="radio" name="contribution-25" id="contribution"> <label for="contribution-25">$25</label> <input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
</li> </li>
<li> <li>
<input type="radio" name="contribution-50" id="contribution"> <label for="contribution-50">$50</label> <input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label>
</li> </li>
<li> <li>
<input type="radio" name="contribution-100" id="contribution"> <label for="contribution-100">$100</label> <input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
</li> </li>
<li> <li class="other1">
<input type="radio" name="contribution-other" id="contribution"> <label for="contribution-other">Other</label> <input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other">$<span class="sr">Other</span></label>
</li> </li>
<li> <li class="other2">
<label for="contribution-other-amt">Other Amount</label> <input type="text" name="contribution-other" id="contribution-other-amt"> <label for="contribution-other-amt"><span class="sr">Other Amount</span> </label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt">
</li> </li>
</ul> </ul>
</dd> </dd>
</dl> </dl>
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a> <p class="tip tip-input expand">
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a>
</p>
<img src="" /> <div class="more">
<dl class="faq">
<dt>Why do I have to pay?</dt>
<dd>Your payment helps cover the costs of verification. As a non-profit, edX keeps these costs as low as possible, Your payment will also help edX with our mission to provide quality education to anyone.</dd>
<dt>What if I can't afford it?</dt>
<dd>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.
<!--Enter $0 above and explain why you would like the fee waived below. Then click Select Certificate button to move on to the next step.
<dl>
<dt><label class="sr" for="explain">Explain your situation:</label></dt>
<dd><p>Tell us why you need help paying for this course in 180 characters or more.</p>
<textarea name="explain" rows="5" cols="50"></textarea>
<p> </dd>
<a href="">What is an ID Verified Certificate?</a> </dl>
</p> -->
<p class="btn"> </dd>
<a href="${reverse('verify_student/show_requirements')}">Select Certificate</a>
</p> <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>
<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>
</dd>
</dl>
</div>
</form>
<hr />
<p class="tip">
<a href="">What is an ID Verified Certificate?</a>
</p>
<p class="m-btn-primary green">
<a href="${reverse('verify_student/show_requirements')}">Select Certificate</a>
</p>
</div> </div>
<div class="tips"> <div class="tips">
...@@ -75,8 +135,8 @@ ...@@ -75,8 +135,8 @@
</div> </div>
<p><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p> <p class="tip"><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p>
<p>Not the course you wanted? <a href="">Return to our course listings</a>.</p> <p class="tip">Not the course you wanted? <a href="">Return to our course listings</a>.</p>
</section> </section>
......
lms/templates/verify_student/show_requirements.html
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<%! 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 requirements</%block>
<%block name="content"> <%block name="content">
<div class="container">
<section class="wrapper">
<h1>Requirements Page!</h1> <header class="page-header header-white">
<h2 class="title header-white-title">You are registering for [coursename] (ID Verified)</h2>
</header>
<a href="${reverse('verify_student/face_upload')}">Upload Face</a> <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 Photo</li>
<li class="progress-step" id="progress-step2">Step 2 Take ID Photo</li>
<li class="progress-step" id="progress-step3">Step 3 Confirm Submission</li>
<li class="progress-step" id="progress-step4">Step 4 Make Payment</li>
<li class="progress-step" id="progress-step5">Finished Confirmation</li>
</ol>
</section>
<h3 class="title">What You Will Need to Register</h3>
<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>
<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 take the Audit track</a>.</p>
<hr />
<h3>Steps to get Verified</h3>
<div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
</div>
<h4>Step 1: 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>Step 2: 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>Step 3: Verify your submissions</h4>
<p>Review your photos to verify they are correct.</p>
<h4>Step 4: 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>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/face_upload')}">Go to Step 1: Take my Photo</a></p>
</div>
</section>
<section class="support">
<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>
</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