diff --git a/lms/static/images/vcert-ribbon-s.png b/lms/static/images/vcert-ribbon-s.png new file mode 100644 index 0000000000..adedb7cd31 Binary files /dev/null and b/lms/static/images/vcert-ribbon-s.png differ diff --git a/lms/static/images/vcert-steps.png b/lms/static/images/vcert-steps.png new file mode 100644 index 0000000000..d2aa4c032d Binary files /dev/null and b/lms/static/images/vcert-steps.png differ diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index b99a3b1e7a..f42c7ddfd9 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -2,19 +2,81 @@ // ==================== 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; + } - h1, h2, h3, h4, h5, h6, p { - 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-weight: 400; + } + + .faq { + 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 { .title { - @extend .t-title5; + @include font-size(18); 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 { font-weight: bold; } - .select { - @include clearfix(); - .block { - float: left; - margin: 0 $baseline $baseline 0; - background-color: #eee; - padding: $baseline; - width: 60%; + .pay-options { + list-style-type: none; + margin: 0; + padding: 0; - .title { - @extend .t-title7; + 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); + min-height: 25px; + } + &.other2 { + padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0; } - } + label { + vertical-align: middle; + } - .tips { - float: right; - width: 32%; + input { + vertical-align: middle; + } } } + .m-btn-primary { + margin-bottom: 0; + padding: 0; + + a { + color: $very-light-text; + display: block; + padding: ($baseline*.75) $baseline; + + &: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 { - border: 1px solid #eee; display: inline-block; 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%; - color: #ccc; + + + +// select a track page + &.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 { - @include clearfix(); - background-color: $white; - - .title { - font-weight: bold; +// requirements page + &.requirements { + .req { + width: 30%; + display: inline-block; + margin-right: $baseline; + text-align: center; + vertical-align: top; } - .wrapper-up, - .wrapper-down { + .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; - .cam { - width: 45%; - float: left; - padding-right: $baseline; - } + .title { + font-weight: bold; + } - .photo-controls { - background-color: #ddd; + .wrapper-up, + .wrapper-down { + @include clearfix(); + } - .controls-list { - margin: 0; - padding: ($baseline*.25) ($baseline*.75); - list-style-type: none; + .cam { + width: 45%; + float: left; + padding-right: $baseline; + } - .control { - display: inline-block; + .photo-controls { + background-color: #ddd; - .action { - @extend .button-primary; - display: block; - background-color: $blue; - color: $white; - padding: ($baseline*.25) ($baseline*.5); - border: none; + .controls-list { + @include clearfix(); + position: relative; + margin: 0; + padding: ($baseline*.25) ($baseline*.75); + list-style-type: none; - &:hover { + .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; + } + } - .faq { + .photo-tips { width: 45%; float: left; - padding-right: $baseline; - dt { - font-weight: bold; - padding: 0 0 ($baseline/2) 0; - } + ul { + margin: 0; + padding: 0; + list-style-type: none; + } + + li { + margin-bottom: $baseline; + } + + - dd { - margin: 0; - padding: 0 0 $baseline 0; - } } + .next-step { + width: 45%; + float: right; + } + .support { + margin-top: ($baseline*2); + } + .review-photo { + width: 45%; + float: left; + } + + #review-facephoto { + margin-right: $baseline; + } } - .photo-tips { - width: 45%; - float: left; - } - - .actions { - width: 45%; - float: right; - } - - .review-photo { - width: 45%; - float: left; - } - - #review-facephoto { - margin-right: $baseline; - } - - } diff --git a/lms/templates/verify_student/face_upload.html b/lms/templates/verify_student/face_upload.html index eb9970f86b..bd3845773f 100644 --- a/lms/templates/verify_student/face_upload.html +++ b/lms/templates/verify_student/face_upload.html @@ -12,6 +12,37 @@ $(document).ready(function() { $( ".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() {
-
+

Take Your Photo

Use your webcam to take a picture of your face so we can match it with the picture on your ID.

@@ -54,12 +85,12 @@ $(document).ready(function() {
    -
  • - Take photo -
  • Retake
    • +
  • + Take photo +
  • Looks good
    • @@ -82,24 +113,20 @@ $(document).ready(function() {

    Common Questions

    -
    -
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
    -
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    -
    Vestibulum id ligula porta felis euismod semper.
    -
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    -
    Aenean eu leo quam.
    -
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    -
    Maecenas faucibus mollis interdum.
    -
    +
    +
    Why do you need my photo?
    +
    We need your photo to confirm that you are you.
    + +
    What do you do with this picture?
    +
    We only use it to verify your identity. It is not displayed anywhere.
    +
    -
    - +
    +

    + +

    +

    Once you verify your photo looks good, you can move on to step 2.

    @@ -107,7 +134,7 @@ $(document).ready(function() { -
    +

    Take Your Photo

    Use your webcam to take a picture of your face so we can match it with the picture on your ID.

    @@ -122,12 +149,12 @@ $(document).ready(function() {
      -
    • - Take photo -
    • Retake
      • +
    • + Take photo +
    • Looks good
      • @@ -152,7 +179,7 @@ $(document).ready(function() {

      Common Questions

      -
      +
      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
      Aenean eu leo quam.
      Pellentesque ornare sem lacinia quam venenatis vestibulum.
      @@ -163,13 +190,11 @@ $(document).ready(function() {
      -
      - +
      +

      + +

      +

      Once you verify your ID photo looks good, you can move on to step 3.

      @@ -177,7 +202,7 @@ $(document).ready(function() { -
      +

      Verify Your Submission

      Make sure we can verify your identity with the photos and information below.

      @@ -215,32 +240,54 @@ $(document).ready(function() {
      +
      + +
      +

      Check Your Contribution

      + +
      +
      + Select your contribution for this course: +
      +
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      - -
-

More questions? Check out our FAQs.

-

Change your mind? You can always Audit the course for free without verifying.

+

More questions? Check out our FAQs.

+

Change your mind? You can always Audit the course for free without verifying.

diff --git a/lms/templates/verify_student/photo_id_upload.html b/lms/templates/verify_student/photo_id_upload.html index e530b706a8..3648b3ab6a 100644 --- a/lms/templates/verify_student/photo_id_upload.html +++ b/lms/templates/verify_student/photo_id_upload.html @@ -2,68 +2,128 @@ <%! from django.core.urlresolvers import reverse %> <%inherit file="../main.html" /> -<%block name="bodyclass">register verification select +<%block name="bodyclass">register verification select-track + +<%block name="js_extra"> + + <%block name="content">
-
-

You are registering for [coursename] (ID Verified)

+
+

You are registering for [coursename] (ID Verified)

Select your track:

-

Audit

-

Sign up to audit this course for free and track your own progress.

+
+

Audit This Course

+

Sign up to audit this course for free and track your own progress.

+
-

- Select Audit -

+
+

+ Select Audit +

+
+

or

+

Certificate of Achievement

+

Sign up as a verified student and work toward a Certificate of Achievement.

+ +
- Select your contribution for this course (in USD): + Select your contribution for this course:
-
    +
    • - +
    • - +
    • - +
      • -
    • - +
    • +
      • -
    • - +
    • +
- Why do I have to pay? What if I don't meet all the requirements? - - - -

- What is an ID Verified Certificate? +

+ Why do I have to pay? What if I don't meet all the requirements?

-

- Select Certificate -

+
+
+
Why do I have to pay?
+
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.
+
What if I can't afford it?
+
If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course. + + +
+ +
I'd like to pay more than the minimum. Is my contribution tax deductible?
+
Please check with your tax advisor to determine whether your contribution is tax deductible.
+ +
What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?
+
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. +

+
+
+
+ + + +
+
+ +

+ What is an ID Verified Certificate? +

+ +

+ Select Certificate +

@@ -75,8 +135,8 @@
-

Have questions? Check out our FAQs.

-

Not the course you wanted? Return to our course listings.

+

Have questions? Check out our FAQs.

+

Not the course you wanted? Return to our course listings.

diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html index 5fa00a0145..99b3459105 100644 --- a/lms/templates/verify_student/show_requirements.html +++ b/lms/templates/verify_student/show_requirements.html @@ -1,12 +1,95 @@ <%! from django.utils.translation import ugettext as _ %> <%! from django.core.urlresolvers import reverse %> <%inherit file="../main.html" /> +<%block name="bodyclass">register verification requirements <%block name="content"> +
+
-

Requirements Page!

+
+

You are registering for [coursename] (ID Verified)

+
-Upload Face +
+

Your Progress

+
    +
  1. Current: Step 1 Take Photo
    2. +
  2. Step 2 Take ID Photo
    3. +
  3. Step 3 Confirm Submission
    4. +
  4. Step 4 Make Payment
    5. +
  5. Finished Confirmation
    6. +
+
+ +

What You Will Need to Register

+ +

There are a few things you will need to register as an ID verified student :

+
+
+

Identification

+

A photo identification document like a drivers license, passport, or student ID.

+
+ +
+

Webcam

+

A webcam that connects to your computer and a modern browser.

+
+ +
+

Credit or Debit Card

+

A major credit or debit card.

+
+
+ +

Missing something? You can always take the Audit track.

+ +
+ +

Steps to get Verified

+ +
+

Go to Step 1: Take my Photo

+
+ +

Step 1: Take Your Photo

+

To verify your identity, we need a clear and well-lit photo of your face to match it with your ID.

+ +

Step 2: Take a photo of your ID

+

To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.

+ +

Step 3: Verify your submissions

+

Review your photos to verify they are correct.

+ +

Step 4: Submit payment

+

Pay for your course using a major credit of debit cards.

+
    +
  • Cards accepted:
    • +
  • Visa
    • +
  • Master Card
    • +
  • Maestro
    • +
  • Amex
    • +
  • Discover
    • +
  • JCB (provided it has the Discover logo on the card)
    • +
  • Diners Club
    • +
  • ...need to list several more once firm
    • +
+ +

You're Ready to Start Learning

+ +

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.

+
+

Go to Step 1: Take my Photo

+
+ +
+ +
+

More questions? Check out our FAQs.

+

Change your mind? You can always Audit the course for free without verifying.

+
+ +