refinements to the vcert requirements page
This commit is contained in:
Frances Botsford
@@ -4,10 +4,15 @@
|
||||
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;
|
||||
@@ -43,7 +48,7 @@ body.register.verification {
|
||||
}
|
||||
|
||||
|
||||
|
||||
// basic reusable bits
|
||||
.content-wrapper {
|
||||
background: none repeat scroll 0 0 #F7F7F7;
|
||||
padding-bottom: 0;
|
||||
@@ -81,95 +86,6 @@ body.register.verification {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pay-options {
|
||||
@@ -187,6 +103,7 @@ body.register.verification {
|
||||
&.other1 {
|
||||
margin-right: -($baseline/4);
|
||||
padding-right: ($baseline/4);
|
||||
min-height: 25px;
|
||||
}
|
||||
&.other2 {
|
||||
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
|
||||
@@ -204,9 +121,13 @@ body.register.verification {
|
||||
}
|
||||
|
||||
.m-btn-primary {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
color: $very-light-text;
|
||||
display: block;
|
||||
padding: ($baseline*.75) $baseline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -215,7 +136,7 @@ body.register.verification {
|
||||
}
|
||||
|
||||
&.disabled, &[disabled], &.is-disabled {
|
||||
background-color: #A0B6CD;
|
||||
background-color: #ccc;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -250,135 +171,258 @@ body.register.verification {
|
||||
}
|
||||
|
||||
|
||||
// for dev placement only
|
||||
.placeholder-cam,
|
||||
.placeholder-photo {
|
||||
height: 300px;
|
||||
background-color: #eee;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.block-photo {
|
||||
@include clearfix();
|
||||
background-color: $white;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wrapper-up,
|
||||
.wrapper-down {
|
||||
// select a track page
|
||||
&.select-track {
|
||||
|
||||
.select {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.cam {
|
||||
width: 45%;
|
||||
float: left;
|
||||
padding-right: $baseline;
|
||||
}
|
||||
.divider {
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 60%;
|
||||
margin: $baseline $baseline 0 $baseline;
|
||||
border-top: 2px solid #ddd;
|
||||
|
||||
.photo-controls {
|
||||
background-color: #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;
|
||||
}
|
||||
}
|
||||
|
||||
.controls-list {
|
||||
@include clearfix();
|
||||
.block {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: ($baseline*.25) ($baseline*.75);
|
||||
list-style-type: none;
|
||||
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%;
|
||||
|
||||
.control {
|
||||
display: inline-block;
|
||||
|
||||
.action {
|
||||
@extend .button-primary;
|
||||
&.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;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
padding: ($baseline*.25) ($baseline*.5);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
|
||||
}
|
||||
|
||||
width: ($baseline*3);
|
||||
height: ($baseline*4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
p, li, dl {
|
||||
color: $lighter-base-font-color;
|
||||
}
|
||||
|
||||
&.is-shown {
|
||||
visibility: visible;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
&.control-do {
|
||||
position: relative;
|
||||
left: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
&.control-redo {
|
||||
position: absolute;
|
||||
left: ($baseline/2);
|
||||
}
|
||||
hr {
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
|
||||
&.control-approve {
|
||||
position: absolute;
|
||||
right: ($baseline/2);
|
||||
}
|
||||
.more {
|
||||
margin-top: ($baseline/2);
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
&.approved a {
|
||||
background-color: $green;
|
||||
}
|
||||
.tips {
|
||||
float: right;
|
||||
width: 32%;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq {
|
||||
// requirements page
|
||||
&.requirements {
|
||||
.req {
|
||||
width: 30%;
|
||||
display: inline-block;
|
||||
margin-right: $baseline;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.next-step {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// take and review photos page
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
.block-photo {
|
||||
@include clearfix();
|
||||
background-color: $white;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wrapper-up,
|
||||
.wrapper-down {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.cam {
|
||||
width: 45%;
|
||||
float: left;
|
||||
padding-right: $baseline;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.photo-tips {
|
||||
width: 45%;
|
||||
float: left;
|
||||
padding-right: $baseline;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.next-step {
|
||||
width: 45%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.photo-tips {
|
||||
width: 45%;
|
||||
float: left;
|
||||
}
|
||||
.support {
|
||||
margin-top: ($baseline*2);
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 45%;
|
||||
float: right;
|
||||
.review-photo {
|
||||
width: 45%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
#review-facephoto {
|
||||
margin-right: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.support {
|
||||
margin-top: ($baseline*2);
|
||||
}
|
||||
|
||||
.review-photo {
|
||||
width: 45%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#review-facephoto {
|
||||
margin-right: $baseline;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -121,15 +121,11 @@ $(document).ready(function() {
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<div class="next-step">
|
||||
<p class="m-btn-primary">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -193,15 +189,11 @@ $(document).ready(function() {
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<div class="next-step">
|
||||
<p class="m-btn-primary">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -247,7 +239,7 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="wrapper-down">
|
||||
<h3>Check Your Contribution</h3>
|
||||
@@ -279,21 +271,14 @@ $(document).ready(function() {
|
||||
</div>
|
||||
|
||||
|
||||
<div class="next">
|
||||
<div class="next-step">
|
||||
|
||||
<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>
|
||||
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<p class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<%! from django.utils.translation import ugettext as _ %>
|
||||
<%! from django.core.urlresolvers import reverse %>
|
||||
<%inherit file="../main.html" />
|
||||
<%block name="bodyclass">register verification select</%block>
|
||||
<%block name="bodyclass">register verification select-track</%block>
|
||||
|
||||
<%block name="js_extra">
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<%! from django.utils.translation import ugettext as _ %>
|
||||
<%! from django.core.urlresolvers import reverse %>
|
||||
<%inherit file="../main.html" />
|
||||
<%block name="bodyclass">register verification select</%block>
|
||||
<%block name="bodyclass">register verification requirements</%block>
|
||||
|
||||
<%block name="content">
|
||||
<div class="container">
|
||||
@@ -22,61 +22,69 @@
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<h3 class="title">What You Will Need to Register</h3>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<dl>
|
||||
<dt>Identification</dt>
|
||||
<dd>An identification document like a drivers license, passport, student ID, or whatever is acceptable.</dd>
|
||||
<div class="req2 req">
|
||||
<h4>Webcam</h4>
|
||||
<p>A webcam that connects to your computer and a modern browser.</p>
|
||||
</div>
|
||||
|
||||
<dt>Webcam</dt>
|
||||
<dd>A webcam that connects to your computer, a modern browser, and whatever these</dd>
|
||||
<div class="req3 req">
|
||||
<h4>Credit or Debit Card</h4>
|
||||
<p>A major credit or debit card.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dt>credit or debit card</dt>
|
||||
<dd>A credit or debit card that is Mastercard or Visa or whatever the requirements are goes here.</dd>
|
||||
</dl>
|
||||
<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>
|
||||
|
||||
|
||||
<p class="tip">Missing something? You can always take the Audit track.</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>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Steps to get Verified</h3>
|
||||
|
||||
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="support">
|
||||
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
|
||||
|
||||
Reference in New Issue
Block a user