diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html index d9b7724f51..e4cad6b08c 100644 --- a/common/templates/course_modes/choose.html +++ b/common/templates/course_modes/choose.html @@ -3,28 +3,38 @@ <%inherit file="../main.html" /> <%block name="bodyclass">register verification-process step-select-track +<%block name="title">${("Register for [Course Name] | Choose Your Track")} <%block name="js_extra"> - +}); + <%block name="content">
-
-

You are registering for ${course_name} (ID Verified)

+
+

+ + You are registering for + ${course_id} + + + Registering as: + ID Verified + +

+ %if error:
${error} @@ -34,92 +44,153 @@
- % if "audit" in modes: -
-
-
-

Audit This Course

-

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

+
+
+

Select your track:

+ + + + % if "audit" in modes: +
+
+

Audit This Course

+
+

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

+
+
+ +
    +
  • + +
    • +
-
-

- -

-
-
+ + or + + % endif -

or

- % endif + % if "verified" in modes: +
+
+ +

Certificate of Achievement

+
+

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

+
+
- % if "verified" in modes: -
-
-

Certificate of Achievement

- -

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

+
+
Select your contribution for this course:
- <%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"/> -

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

+ +
+ +
-
-

- What is an ID Verified Certificate? -

-

- -

-
+
+

Verified Registration Requirements

-
-

- To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. View requirements -

-
- % endif -
- - +
+

To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. View requirements

+
+
+ % endif -

Have questions? Check out our FAQs.

-

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

+ + + +
+ +
+ +
diff --git a/lms/static/sass/application.scss.mako b/lms/static/sass/application.scss.mako index c17b23b0dc..2753edda0c 100644 --- a/lms/static/sass/application.scss.mako +++ b/lms/static/sass/application.scss.mako @@ -44,6 +44,7 @@ // base - elements @import 'elements/typography'; +@import 'elements/controls'; // base - specific views @import 'views/verification'; diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 3dd7cb42a2..9e25c863e0 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -41,24 +41,38 @@ @return #{$pxval / $base}em; } -// Line-height +// line-height @function lh($amount: 1) { @return $body-line-height * $amount; } +// ==================== - - - -//----------------- -// Theme Mixin Styles -//----------------- +// theme mixin styles @mixin login_register_h1_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 .text-sr { border: 0; @@ -70,3 +84,39 @@ position: absolute; 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; +} diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 62a6320c11..46ba69d89d 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -15,7 +15,7 @@ $fg-min-width: 810px; // ==================== // FONTS -$sans-serif: 'Open Sans', $verdana; +$sans-serif: 'Open Sans', $verdana, sans-serif; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-family: $sans-serif; $serif: $georgia; @@ -35,7 +35,17 @@ $very-light-text: #fff; // COLORS: misc. $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-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); $pink: rgb(182,37,104); $yellow: rgb(255, 252, 221); @@ -47,6 +57,7 @@ $dark-gray: rgb(51, 51, 51); $border-color: rgb(200, 200, 200); $sidebar-color: rgb(246, 246, 246); $outer-border-color: rgb(170, 170, 170); + $green: rgb(37, 184, 90); // COLORS: old variables @@ -63,11 +74,17 @@ $m-gray-d1: #7D7F83; $m-gray-d2: #707276; $m-gray-d3: #646668; $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-l1: #2BACE6; $m-blue-l2: #42B5E9; $m-blue-l3: #59BEEC; +$m-blue-l4: tint($m-blue,90%); +$m-blue-l5: tint($m-blue,95%); $m-blue-d1: #1790C7; $m-blue-d2: #1580B0; $m-blue-d3: #126F9A; @@ -81,6 +98,30 @@ $m-pink-d1: #A0255B; $m-pink-d2: #8C204F; $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); diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss new file mode 100644 index 0000000000..59ac268f8e --- /dev/null +++ b/lms/static/sass/elements/_controls.scss @@ -0,0 +1,208 @@ +// 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; + } + } diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 477f21565c..d269bfa721 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -171,3 +171,147 @@ .t-icon-solo { @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; +} + diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index f5f162b411..c52ac3e801 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -1,38 +1,79 @@ // lms - views - verification flow // ==================== -// some nasty resets and standard styles -body.register.verification-process { - font-family: 'Open Sans', sans-serif; +// MISC: extends - UI - window +.ui-window { + @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 h1, h2, h3, h4, h5 ,h6 { @extend .t-title; + color: $m-gray-d4; } // reset: typography - copy p, ol, ul, dl, input, select, textarea { font-family: $f-sans-serif; - @extend .t-copy-base; + color: $m-gray-d1; + } + + .copy { + + p, ul, li, dl, blockquote, input, select { + margin-bottom: ($baseline*0.75); + + &:last-child { + margin-bottom: 0; + } + } } // reset: copy/text - p { - 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 { @@ -42,580 +83,1128 @@ body.register.verification-process { } label { + @extend .t-weight4; + font-family: $sans-serif; font-style: normal; - font-family: 'Open Sans', sans-serif; - font-weight: 400; + color: $m-gray-d4; } - .faq { - @extend .t-copy-sub2; - - label { - font-size: 12px; - font-weight: bold; - } + // HACK: nasty override due to our bad input/button styling + button, input[type="submit"], input[type="button"] { + @include font-size(16); + @extend .t-weight3; + text-transform: none; + 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 .content-wrapper { - background: none repeat scroll 0 0 #F7F7F7; + background: $m-gray-l4; padding-bottom: 0; } .container { - background-color: #fff; + background-color: $white; padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5); } - // elements: common UI + // ==================== + + // elements: common copy .title { @extend .t-title5; - margin-bottom: ($baseline/2); - font-weight: 300; + @extend .t-weight1; } - .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; + .copy { + @extend .t-weight1; } - // ==================== - - // elements: header - .page-header { - - .title { - @include font-size(28); - @include line-height(28); - margin-bottom: $baseline; - border-bottom: 1px solid #ccc; - padding-bottom: 20px; - color: #2F73BC; - font-weight: 300; - text-transform: uppercase; - } - } - - // elements: page options - .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); - min-height: 25px; - } - &.other2 { - padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0; - } - - label { - vertical-align: middle; - } - - input { - vertical-align: middle; - } - } - } - - // elements - controls - .m-btn-primary { - 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 { - 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 - } - - } - - // 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); - - &:hover { - box-shadow: 0 2px 1px rgba(2,100,2,1); - background-color: #029D03; - } - - } + .action-primary { + @extend .btn-primary-blue; + border: none; } + .action-confirm { + @extend .btn-primary-green; + border: none; + } // ==================== + // elements: page depth - // nav/status: progress - .progress { - @include clearfix; + // ==================== + + // elements : help + .help { + + } + + .help-item { + + .title { + @extend .hd-lv4; + margin-bottom: ($baseline/4); + } + + .copy { + @extend .copy-detail; + } + } + + .list-help { + + } + + // ==================== + + // UI: page header + .page-header { + width: flex-grid(12,12); + margin: 0 0 $baseline 0; + border-bottom: ($baseline/4) solid $m-gray-l4; + + .title { + @include clearfix(); + width: flex-grid(12,12); + + .wrapper-sts, .sts-track { + display: inline-block; + vertical-align: middle; + } + + .wrapper-sts { + width: flex-grid(9,12); + } + + .sts-track { + width: flex-grid(3,12); + text-align: right; + + .sts-track-label { + @extend .text-sr; + } + + .sts-track-value { + @extend .copy-badge; + color: $white; + background: $m-green-l2; + } + } + + .sts { + @extend .t-title7; + display: block; + color: $m-gray; + } + + .sts-course { + @extend .t-title; + @include font-size(28); + @include line-height(28); + @extend .t-weight4; + display: block; + + } + } + } + + // ==================== + + // UI : progress + .wrapper-progress { position: relative; - margin-bottom: $baseline; - border-bottom: 1px solid #ccc; - padding-bottom: $baseline; + 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; + } + } + + .progress { + width: flex-grid(12,12); + margin: 0 auto; + border-bottom: ($baseline/4) solid $m-gray-l4; .progress-steps { - margin: 0; - padding: 0; + @include clearfix(); + position: relative; + top: ($baseline/4); } .progress-step { - @extend .t-copy-sub1; + @extend .ui-depth2; position: relative; - z-index: 200; - display: inline-block; - width: 15%; - padding: ($baseline/2) 0; + width: flex-grid(2,12); + float: left; + padding: $baseline $baseline ($baseline*1.5) $baseline; text-align: center; - color: #ccc; - &.current { - color: #008801; - - .number { - border: 4px solid #008801; - color: #008801; - } - } - - &.done { - color: #777; - - .number { - border: 4px solid #777; - color: #777; - } - } - } - - .number { - height: 2em; - width: 2em; - display: block; - 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); - } - - -// ==================== - - -// VIEW: select a track - &.step-select-track { - - .select { - @include clearfix(); - - .divider { + .wrapper-step-number, .step-number, .step-name { display: block; - clear: both; - width: 60%; - margin: $baseline $baseline 0 $baseline; - 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; - color: #aaa; - text-align: center; + .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; } } - .block { - position: relative; + .step-name { + @extend .t-title7; + @extend .t-weight4; + color: $m-gray-l1; + } + + // confirmation step w/ icon + &#progress-step5 { + + .step-number { + margin-top: ($baseline/2); + } + } + + // STATE: is completed + &.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; + } + + .step-number, .step-name { + color: $m-gray-d3; + } + } + } + } + + // ==================== + + // UI: slides + .carousel { + + // carousel item + .carousel-item { + opacity: 0.0; + } + + // STATE: active + .carousel-active { + opacity: 1.0; + } + + // indiv slides + .wrapper-view { + padding: 0 $baseline !important; + } + + .view { + width: flex-grid(12,12); + + > .title { + @extend .hd-lv2; + color: $m-blue-d1; + } + + .instruction { + @extend .t-copy-lead1; + margin-bottom: $baseline; + } + } + + .wrapper-task { + @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; + } + + .title { + @extend .hd-lv3; + } + + .copy { + @extend .copy-detail; + } + + // help - general list + .list-help { + + .help-item { + margin-bottom: ($baseline/4); + border-bottom: 1px solid $m-gray-l4; + padding-bottom: ($baseline/4); + + &:last-child { + margin-bottom: 0; + border-bottom: none; + padding-bottom: 0; + } + } + } + + // 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); + } + } + } + } + + .task { + @extend .ui-window; 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%; + width: flex-grid(6,12); + margin-right: flex-gutter(); + } + .controls { + padding: ($baseline*0.75) $baseline; + background: $m-gray-l4; - &.block-cert { - border-top: 5px solid #008801; + .list-controls { + position: relative; + } - .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); + .control { + position: absolute; + + .action { + @extend .btn-primary-blue; + padding: ($baseline/2) ($baseline*0.75); + + *[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 { + + .action { + @extend .btn-primary-green; + } } } - - p, li, dl { - color: $lighter-base-font-color; - } - - .wrap-copy { - width: 60%; - display: inline-block; - vertical-align: middle; - } - - .title { - @extend .t-title4; - font-weight: bold; - } - - .m-btn-primary { + // control - redo + .control-redo { position: absolute; - bottom: ($baseline*1.5); - right: ($baseline*1.5); + left: ($baseline/2); } + // control - take/do + .control-do { + left: 45%; + } - } - - hr { - margin: 1em 0 2em 0; - } - - .more { - margin-top: ($baseline/2); - border-top: 1px solid #ccc; - } - - .tips { - float: right; - width: 32%; - - p { - @extend .t-copy-sub1; + // control - approve + .control-approve { + position: absolute; + right: ($baseline/2); } } + + .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; + } + } + } + + // individual task - photos + .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; + } + } + } + } + } + } + + // individual task - name + .review-task-name { + @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; + } + } + } + + // individual task - contribution + .review-task-contribution { + + .list-fields { + @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; + + .copy { + @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 { + + } + + .help-inline { + @extend .t-copy-sub1; + float: left; + width: flex-grid(6,12); + margin: ($baseline*0.75) flex-gutter() 0 0; + } + + .wizard-steps { + float: right; + width: flex-grid(6,12); + text-align: right; + } + + // STATE: is ready + &.is-ready { + background: $m-blue-l4; + } + + &.is-not-ready { + background: $m-gray-l4; + } + } + + // ==================== + + // 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; + } + + input { + margin-right: ($baseline/4); + } + + .deco-denomination, .label-value, .denomination-name { + 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; + } + + .instruction { + @extend .t-copy-lead1; + margin-bottom: $baseline; + } + } + + // ==================== + + // UI: supplemental content + .wrapper-content-supplementary { + margin: ($baseline*1.5) 0; + border-top: ($baseline/4) solid $m-gray-l4; + } + + .content-supplementary { + width: flex-grid(12,12); + + .list-help { + @include clearfix(); + + .help-item { + width: flex-grid(4,12); + float: left; + margin-right: flex-gutter(); + + &:last-child { + margin-right: 0 + } + } + } + } + + // ==================== + + // VIEW: select a track + &.step-select-track { + + .form-register-choose { + @include clearfix(); + width: flex-grid(12,12); + margin: $baseline 0; + + .deco-divider { + 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; + + .wrapper-copy { + width: flex-grid(5,8); + } + + .list-actions { + width: flex-grid(3,8); + } + + .action-select input { + @extend .btn-primary-blue; + } + } + + .register-choice-certificate { + border-color: $m-green-l1; + position: relative; + + .deco-ribbon { + position: absolute; + top: -($baseline*1.5); + right: $baseline; + 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 { + + } + } + + .help-register { + width: flex-grid(4,12); + + .title { + @extend .hd-lv4; + @extend .t-weight4; + margin-bottom: ($baseline/2); + } + + .copy { + @extend .copy-detail; + } + } + + // 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); + } + } + + .contribution-options { + @include clearfix(); + margin: $baseline 0; + + .field { + float: left; + margin-right: ($baseline/2); + padding: ($baseline/2) ($baseline*0.75); + background: $m-gray-t0; + + input { + width: auto; + } + + &:last-child { + margin-right: 0; + } + } + + #contribution-other-amt { + width: ($baseline*3); + padding: ($baseline/4) ($baseline/2); + } + + .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; + } + } + } + } // VIEW: requirements &.step-requirements { - .section-head .title { - @extend .t-title4; - display: inline-block; - margin: ($baseline/4) 0; + // progress indicator + .progress-sts-value { + width: 0%; } - .reqs { - margin: $baseline $baseline ($baseline*1.5) $baseline; - } + .list-reqs { + @include clearfix(); + width: flex-grid(12,12); - .req { - height: 13em; - width: 27%; - display: inline-block; - margin-right: 1%; - border: 1px solid #ddd; - padding: $baseline 2%; - text-align: center; - vertical-align: top; + .req { + @extend .ui-window; + width: flex-grid(4,12); + min-height: ($baseline*15); + float: left; + margin-right: flex-gutter(); + text-align: center; - [class^="icon-"] { - display: block; - width: 150px; - margin: $baseline auto; - font-size: 75px; - - &.icon-id { - background: transparent url('../images/icon-id.png') no-repeat center center; - height: 70px; + &:last-child { + margin-right: 0; } - } - - } - - .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 { + .title { @extend .t-title5; - font-weight: bold; + @extend .t-weight4; + padding: $baseline; + border-bottom: 1px solid $m-green-l2; + background: $m-green-l4; + } - .number { - @extend .t-title6; - height: 2em; - width: 2em; + .placeholder-art { + position: relative; 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; + margin: $baseline 0 ($baseline/2) 0; + padding: $baseline; + background: $m-green-l2; + border-radius: ($baseline*10); + + *[class^="icon"] { + @extend .t-icon1; + color: $white; + } + + .icon-over, .icon-under { + position: relative; + } + + .icon-under { + @extend .ui-depth1; + } + + .icon-over { + @extend .ui-depth2; + @extend .t-icon5; + position: absolute; + left: 24px; + top: 34px; + background: $m-green-l2; + padding: 3px 5px; + } } .copy { + padding: ($baseline/2) $baseline; + } + + .copy-super, .copy-sub { + display: block; + } + + .copy-super { @extend .t-copy-base; - margin-left: 65px; + margin-bottom: ($baseline/2); + color: $m-green; + } + + .copy-sub { + @extend .t-copy-sub2; + } + + .actions { + padding: ($baseline/2) $baseline; } } } } - - // ==================== - - // VIEW: take and review photos &.step-photos { - // TEMP: for dev placement only - .wrapper-cam, - .wrapper-photo { - height: 375px; - width: 500px; - background-color: #eee; - position: relative; + } - p { - position: absolute; - top: 40%; - left: 40%; - color: #ccc; - } + // VIEW: take cam photo + &.step-photos-cam { + + // progress indicator + .progress-sts-value { + width: 20%; } + } - .block-photo { - @include clearfix(); - background-color: $white; + // VIEW: take id photo + &.step-photos-id { - .title { - @extend .t-title4; + // progress indicator + .progress-sts-value { + width: 40%; + } + } + + // VIEW: review photos + &.step-review { + + .nav-wizard { + + .help-inline { + width: flex-grid(4,12); + margin-top: 0 } - .wrapper-up, - .wrapper-down { - @include clearfix(); - } + .wizard-steps { + float: right; + width: flex-grid(8,12); - .cam { - width: 500px; - float: left; - padding-right: $baseline; - } + .wizard-step { + width: flex-grid(4,8); + margin-right: flex-gutter(); + display: inline-block; + vertical-align: middle; - .photo-controls { - background-color: #ddd; - - .controls-list { - @include clearfix(); - position: relative; - margin: 0; - padding: ($baseline*.25) ($baseline*.75); - list-style-type: none; - height: 60px; - - .control { - display: inline-block; - - .action { - @extend .button-primary; - 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 { - - } - - } - - - &.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; - } + &:last-child { + margin-right: 0; } } } - .faq { - width: 45%; - float: left; - padding-right: $baseline; + .step-match { + + label { + @extend .t-copy-sub1; + } + } + + .step-proceed { + } } - .photo-tips { - @extend .t-copy-sub1; - width: 45%; - float: left; - - .title { - @extend .t-title5; - border-bottom: 1px solid #ddd; - padding-bottom: ($baseline/4); - font-weight: bold; - } - + // progress indicator + .progress-sts-value { + width: 60%; } + } - .next-step { - margin-top: $baseline; + // VIEW: take and review photos + &.step-confirmation { - .tip { - margin-top: $baseline; - } - } - - .support { - margin-top: ($baseline*2); - } - - .review-photo { - width: 500px; - float: left; - - .title { - @extend .t-title5; - margin-top: $baseline; - } - } - - #review-facephoto { - margin-right: $baseline; + // progress indicator + .progress-sts-value { + width: 100%; } } } diff --git a/lms/templates/verify_student/photo_verification.html b/lms/templates/verify_student/photo_verification.html index 4fa982d4db..339434df33 100644 --- a/lms/templates/verify_student/photo_verification.html +++ b/lms/templates/verify_student/photo_verification.html @@ -4,6 +4,7 @@ <%namespace name='static' file='/static_content.html'/> <%block name="bodyclass">register verification-process step-photos +<%block name="title">${("Register for [Course Name] | Verification")} <%block name="js_extra"> @@ -150,238 +151,367 @@ initSnapshotHandler(["photo_id", "face"]); }); - - <%block name="content">
-
-

You are registering for ${course_name} (ID Verified)

-
+
-
-
-

Your Progress

+
+

+ + You are registering for + ${course_id} + + + Registering as: + ID Verified + +

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

Your Progress

-
-
-

Take Your Photo

-

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

+
    +
  1. + 0 + Intro +
    2. -
    +
  2. + 1 + Current Step: Take Photo +
    3. -
    -
    -
    - -
    +
  3. + 2 + Take ID Photo +
    4. -
    - -
    +
  4. + 3 + Review +
    5. -
    +
  5. + 4 + Make Payment +
    6. -
    -

    Tips on taking a successful photo

    -
      -
    • Make sure your face is well-lit
      • -
    • Be sure your entire face is inside the frame
      • -
    • Can we match the photo you took with the one on your ID?
      • -
    • Click the checkmark once you are happy with the photo
      • -
    +
  6. + + + + Confirmation +
    7. +
- -

Common Questions

-
-
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.

-
-
+ + + +
-
-

Take Your Photo

-

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

+
+
-
+
+
+
+

Take Your Photo

+
+

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

+
-
+
+
+
+
+ +
-
-
- -
+
+
+
  • + + Take photo + +
    • -
    -

    Tips on taking a successful photo

    -
      -
    • Make sure your ID is well-lit
      • -
    • Check that there isn't any glare
      • -
    • Ensure that you can see your photo and read your name
      • -
    • Try to keep your fingers at the edge to avoid covering important information
      • -
    +
  • + + Looks good + +
    • + +
    +
    -

    Common Questions

    -
    -
    Why do you need a photo of my ID?
    -
    We need to match your ID with your photo and name to confirm that you are you.
    +
    +
    +

    Tips on taking a successful photo

    -
    What do you do with this picture?
    -
    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.
    -
    +
    +
      +
    • Make sure your face is well-lit
      • +
    • Be sure your entire face is inside the frame
      • +
    • Can we match the photo you took with the one on your ID?
      • +
    • Click the checkmark once you are happy with the photo
      • +
    +
    +
    -
    +
    +

    Common Questions

    -
    +
    +
    +
    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 ID photo looks good, you can move on to step 3.

    -
    -
    +
    +
      +
    1. + +
      2. +
    + + + -
    -

    Verify Your Submission

    -

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

    +
    +
    +

    Show Us Your ID

    +
    +

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

    +
    -
    -

    Check Your Name

    -

    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.

    -

    Edit my name

    -
    +
    +
    +
    +
    + +
    -
    -
    -
    - -
    +
    +
      +
    • + + Retake + +
      • -

      The photo above needs to meet the following requirements:

      -
        -
      • Be well lit
        • -
      • Show your whole face
        • -
      • Match your ID
        • -
      -
    +
  • + + Take photo + +
    • -
    -
    - -
    +
  • + + Looks good + +
    • + +
    +
    -

    The photo above needs to meet the following requirements:

    -
      -
    • Be readable (not too far away, no glare)
      • -
    • Show your name
      • -
    • Match the photo of your face and your name above
      • -
    -
    +
    +
    +

    Tips on taking a successful photo

    +
    +
      +
    • Make sure your ID is well-lit
      • +
    • Check that there isn't any glare
      • +
    • Ensure that you can see your photo and read your name
      • +
    • Try to keep your fingers at the edge to avoid covering important information
      • +
    +
    +
    -
    -

    Photos don't meet the requirements? Retake the photos.

    +
    +

    Common Questions

    -
    +
    +
    +
    Why do you need a photo of my ID?
    +
    We need to match your ID with your photo and name to confirm that you are you.
    -
    -

    Check Your Contribution

    +
    What do you do with this picture?
    +
    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.
    +
    +
    +
    +
    +
    - <%include file="/course_modes/_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/> +
    +
      +
    1. + +
      2. +
    + +
    +
    -
    +
    +
    +

    Verify Your Submission

    +
    +

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

    +
    -
    +
    +
      +
    1. +

      Check Your Name

      -
      - - - -

      - -

      -
      -

      Once you verify your details match the requirements,
      you can move on to step 4, payment on our secure server.

      -
    -
    +
    +

    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.

    +
    + + + + +
  • +

    Review the Photos You've Taken

    + +
    +

    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.

    +
    + +
      +
    1. +
      + +
      + +
      +
      The photo above needs to meet the following requirements:
      +
        +
      • Be well lit
        • +
      • Show your whole face
        • +
      • Match your ID
        • +
      +
      +
      2. + +
    2. +
      + +
      + +
      +
      The photo above needs to meet the following requirements:
      +
        +
      • Be readable (not too far away, no glare)
        • +
      • Show your name
        • +
      • Match the photo of your face and your name above
        • +
      +
      +
      3. +
    + +
    +
    +

    Photos don't meet the requirements?

    +
    + + +
    +
    • + +
  • +

    Check Your Contribution Level

    + +
    +

    Please confirm your contribution for this course:

    +
    + + <%include file="/course_modes/_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/> + +
    • + +
    + + +
    + + + + + +
    + +
    - - - -
    -

    More questions? Check out our FAQs. (not active yet)

    -

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

    -
    - - - - - - diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html index ce8715764e..7fa217917f 100644 --- a/lms/templates/verify_student/show_requirements.html +++ b/lms/templates/verify_student/show_requirements.html @@ -2,70 +2,154 @@ <%! from django.core.urlresolvers import reverse %> <%inherit file="../main.html" /> <%block name="bodyclass">register verification-process step-requirements +<%block name="title">${("Register for [Course Name]")} <%block name="content">
    -
    -

    You are registering for ${course_id} (ID Verified)

    +
    +

    + + You are registering for + ${course_id} + + + Registering as: + ID Verified + +

    +
    +
    +

    Your Progress

    -
    -
    -

    Your Progress

    -
    - -
      -
    1. Current Step: Intro
      2. -
    2. 1 Take Photo
      3. -
    3. 2 Take ID Photo
      4. -
    4. 3 Confirm Submission
      5. -
    5. 4 Make Payment
      6. -
    6. Confirmation
      7. -
    -
    +
      +
    1. + 0 + Intro +
      2. -
      -
      +
    2. + 1 + Current Step: Take Photo +
      3. + +
    3. + 2 + Take ID Photo +
      4. + +
    4. + 3 + Review +
      5. + +
    5. + 4 + Make Payment +
      6. + +
    6. + + + + Confirmation +
      7. +
    + + + + +
    +
    + + +
    +

    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 a drivers license, passport, student ID, or other ID with your name and picture on it

    +
    +

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

    -
    -

    Webcam

    - -

    A webcam and a modern browser Firefox, Chrome, or Opera

    -
    +
      +
    • +

      Identification

      +
      + + +
      -
      -

      Credit or Debit Card

      - -

      A major credit or debit card Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club

      -
      -
    +
    +

    + A photo identification document + a drivers license, passport, student ID, or other ID with your name and picture on it +

    +
    + -
    -

    Go to Step 1: Take my Photo

    -

    Change your mind? You can always Audit.

    -
    -
    +
  • +

    Webcam

    +
    + +
    +
    +

    + A webcam and a modern browser + Firefox, Chrome, or Opera +

    +
    +
    • -
    -

    Missing something? You can always Audit the course.

    -

    More questions? Check out our FAQs.

    -
    +
  • +

    Credit or Debit Card

    +
    + +
    +
    +

    + A major credit or debit card + Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club +

    +
    +
    • + + + + +
    + +
    + +
    -