Commit 4af4b2a0 by Brian Talbot

Verification: add in I8TN support for new templates

parent c77deeec
......@@ -25,7 +25,7 @@ $(document).ready(function() {
<div class=" msg msg-error">
<i class="msg-icon icon-warning-sign"></i>
<div class="msg-content">
<h3 class="title">Sorry, there was an error when trying to register you</h3>
<h3 class="title">${_("Sorry, there was an error when trying to register you")}</h3>
<div class="copy">
<p>${error}</p>
</div>
......@@ -40,7 +40,7 @@ $(document).ready(function() {
<header class="page-header">
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">You are registering for</span>
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id} </span>
</span>
</h2>
......@@ -48,16 +48,16 @@ $(document).ready(function() {
<div class="wrapper-register-choose wrapper-content-main">
<article class="register-choose content-main">
<h3 class="title">Select your track:</h3>
<h3 class="title">${_("Select your track:")}</h3>
<form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
% if "audit" in modes:
<div class="register-choice register-choice-audit">
<div class="wrapper-copy">
<h4 class="title">Audit This Course</h4>
<h4 class="title">${_("Audit This Course")}</h4>
<div class="copy">
<p>Sign up to audit this course for free and track your own progress.</p>
<p>${_("Sign up to audit this course for free and track your own progress.")}</p>
</div>
</div>
......@@ -69,7 +69,7 @@ $(document).ready(function() {
</div>
<span class="deco-divider">
<span class="copy">or</span>
<span class="copy">${_("or")}</span>
</span>
% endif
......@@ -77,14 +77,14 @@ $(document).ready(function() {
<div class="register-choice register-choice-certificate">
<div class="wrapper-copy">
<span class="deco-ribbon"></span>
<h4 class="title">Certificate of Achievement &mdash; ID Verified</h4>
<h4 class="title">${_("Certificate of Achievement (ID Verified)")}</h4>
<div class="copy">
<p>Sign up and work toward a verified Certificate of Achievement.</p>
<p>${_("Sign up and work toward a verified Certificate of Achievement.")}</p>
</div>
</div>
<div class="field field-certificate-contribution">
<h5 class="label">Select your contribution for this course:</h5>
<h5 class="label">${_("Select your contribution for this course:")}</h5>
%if error:
<div class="msg msg-error msg-inline">
......@@ -97,44 +97,44 @@ $(document).ready(function() {
<%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
<div class="help-tip is-expandable">
<h5 class="title title-expand"><i class="icon-caret-down expandable-icon"></i> Why do I have to pay? What if I don't meet all the requirements?</h5>
<h5 class="title title-expand"><i class="icon-caret-down expandable-icon"></i> ${_("Why do I have to pay? What if I don't meet all the requirements?")}</h5>
<div class="copy expandable-area">
<dl class="list-faq">
<dt class="faq-question">Why do I have to pay?</dt>
<dt class="faq-question">${_("Why do I have to pay?")}</dt>
<dd class="faq-answer">
<p>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.</p>
<p>${_("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.")}</p>
</dd>
<dt class="faq-question">I'd like to pay more than the minimum. Is my contribution tax deductible?</dt>
<dt class="faq-question">${_("I'd like to pay more than the minimum. Is my contribution tax deductible?")}</dt>
<dd class="faq-answer">
<p>Please check with your tax advisor to determine whether your contribution is tax deductible.</p>
<p>${_("Please check with your tax advisor to determine whether your contribution is tax deductible.")}</p>
</dd>
% if "honor" in modes:
<dt class="faq-question">What if I can't afford it?</dt>
<dt class="faq-question">${_("What if I can't afford it?")}</dt>
<dd class="faq-answer">
<p>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.</p>
<p>${_("If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.")}</p>
<p>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.</p>
<p>${_("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.")}</p>
<ul class="fields">
<li class="field field-explain">
<label for="explain"><span class="sr">Explain your situation: </span>Tell us why you need help paying for this course in 180 characters or more.</label>
<label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Tell us why you need help paying for this course in 180 characters or more.")}</label>
<textarea name="explain"></textarea>
</li>
</ul>
</dd>
<dt class="faq-question">What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dt class="faq-question">${_("What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?")}</dt>
<dd class="faq-answer">
<p>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>
<p>${_("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>
<ul class="fields">
<li class="field field-explain">
<input type="checkbox" name="honor-code" id="honor-code">
<label for="honor-code">Select Honor Code Certificate</label>
<label for="honor-code">${_("Select Honor Code Certificate")}</label>
</li>
</ul>
</dd>
......@@ -152,10 +152,10 @@ $(document).ready(function() {
</div>
<div class="help help-register">
<h3 class="title">Verified Registration Requirements</h3>
<h3 class="title">${_("Verified Registration Requirements")}</h3>
<div class="copy">
<p>To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. <a href="">View requirements</a></p>
<p>${_("To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID.")} <a href="">${_("View requirements")}</a></p>
</div>
</div>
% endif
......@@ -169,23 +169,23 @@ $(document).ready(function() {
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">What is an ID Verified Certificate?</h3>
<h3 class="title">${_("What is an ID Verified Certificate?")}</h3>
<div class="copy">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>${_("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Have questions?</h3>
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>Please read <a href="${marketing_link('WHAT_IS_VERIFIED_CERT')}">our FAQs to view common questions about our certificates</a>.</p>
<p>${_("Please read ")}<a rel="external" href="">${_("our FAQs to view common questions about our certificates")}</a>${_(".")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Not the course you wanted?</h3>
<h3 class="title">${_("Not the course you wanted?")}</h3>
<div class="copy">
<p><a href="${marketing_link('COURSES')}">Return to our course listings to find another course</a></p>
<p><a href="${marketing_link('COURSES')}">${_("Return to our course listings to find another course")}</a></p>
</div>
</li>
</ul>
......
......@@ -176,12 +176,12 @@
<header class="page-header">
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">You are registering for</span>
<span class="sts-course">${course_id} </span>
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-value">
<span class="context">Registering as:</span> ID Verified
<span class="context">${_("Registering as:")}</span>
</span>
</span>
</h2>
......@@ -189,39 +189,40 @@
<div class="wrapper-progress">
<section class="progress">
<h3 class="sr title">Your Progress</h3>
<h3 class="sr title">${_("Your Progress")}</h3>
<!-- FIXME: Move the "Current Step: " text to the right DOM element -->
<ol class="progress-steps">
<li class="progress-step is-completed" id="progress-step0">
<span class="wrapper-step-number"><span class="step-number">0</span></span>
<span class="step-name">Intro</span>
<span class="step-name">${_("Intro")}</span>
</li>
<li class="progress-step is-current" id="progress-step1">
<span class="wrapper-step-number"><span class="step-number">1</span></span>
<span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
<span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Take Photo")}</span>
</li>
<li class="progress-step" id="progress-step2">
<span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name">Take ID Photo</span>
<span class="step-name">${_("Take ID Photo")}</span>
</li>
<li class="progress-step" id="progress-step3">
<span class="wrapper-step-number"><span class="step-number">3</span></span>
<span class="step-name">Review</span>
<span class="step-name">${_("Review")}</span>
</li>
<li class="progress-step" id="progress-step4">
<span class="wrapper-step-number"><span class="step-number">4</span></span>
<span class="step-name">Make Payment</span>
<span class="step-name">${_("Make Payment")}</span>
</li>
<li class="progress-step" id="progress-step5">
<span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
<span class="step-name">Confirmation</span>
<span class="step-name">${_("Confirmation")}</span>
</li>
</ol>
......@@ -237,9 +238,9 @@
<section class="wrapper carousel" data-transition="slide">
<div id="wrapper-facephoto" class="wrapper-view block-photo">
<div class="facephoto view">
<h3 class="title">Take Your Photo</h3>
<h3 class="title">${_("Take Your Photo")}</h3>
<div class="instruction">
<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>
</div>
<div class="wrapper-task">
......@@ -257,19 +258,19 @@
<ul class="list-controls">
<li class="control control-redo" id="face_reset_button">
<a class="action action-redo" href="">
<i class="icon-undo"></i> <span class="sr">Retake</span>
<i class="icon-undo"></i> <span class="sr">${_("Retake")}</span>
</a>
</li>
<li class="control control-do" id="face_capture_button">
<a class="action action-do" href="">
<i class="icon-camera"></i><span class="sr">Take photo</span>
<i class="icon-camera"></i><span class="sr">${_("Take photo")}</span>
</a>
</li>
<li class="control control-approve" id="face_approve_button">
<a class="action action-approve" href="">
<i class="icon-ok"></i> <span class="sr">Looks good</span>
<i class="icon-ok"></i> <span class="sr">${_("Looks good")}</span>
</a>
</li>
</ul>
......@@ -278,28 +279,28 @@
<div class="wrapper-help">
<div class="help help-task photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4>
<h4 class="title">${_("Tips on taking a successful photo")}</h4>
<div class="copy">
<ul class="list-help">
<li class="help-item">Make sure your face is well-lit</li>
<li class="help-item">Be sure your entire face is inside the frame</li>
<li class="help-item">Can we match the photo you took with the one on your ID?</li>
<li class="help-item">Click the checkmark once you are happy with the photo</li>
<li class="help-item">${_("Make sure your face is well-lit")}</li>
<li class="help-item">${_("Be sure your entire face is inside the frame")}</li>
<li class="help-item">${_("Can we match the photo you took with the one on your ID?")}</li>
<li class="help-item">${_("Click the checkmark once you are happy with the photo")}</li>
</ul>
</div>
</div>
<div class="help help-faq facefaq">
<h4 class="sr title">Common Questions</h4>
<h4 class="sr title">${_("Common Questions")}</h4>
<div class="copy">
<dl class="list-faq">
<dt class="faq-question">Why do you need my photo?</dt>
<dd class="faq-answer">We need your photo to confirm that you are you.</dd>
<dt class="faq-question">${_("Why do you need my photo?")}</dt>
<dd class="faq-answer">${_("We need your photo to confirm that you are you.")}</dd>
<dt class="faq-question">What do you do with this picture?</dt>
<dd class="faq-answer">We only use it to verify your identity. It is not displayed anywhere.</dd>
<dt class="faq-question">${_("What do you do with this picture?")}</dt>
<dd class="faq-answer">${_("We only use it to verify your identity. It is not displayed anywhere.")}</dd>
</dl>
</div>
</div>
......@@ -307,11 +308,11 @@
</div>
<nav class="nav-wizard"> <!-- FIXME: Additional class is-ready, is-not-ready -->
<span class="help help-inline">Once you verify your photo looks good, you can move on to step 2.</span>
<span class="help help-inline">${_("Once you verify your photo looks good, you can move on to step 2.")}</span>
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next action-primary" id="face_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
<a class="next action-primary" id="face_next_button" href="#next" aria-hidden="true" title="Next">${_("Go to Step 2: Take ID Photo")}</a>
</li>
</ol>
</nav>
......@@ -321,9 +322,9 @@
<div id="wrapper-idphoto" class="wrapper-view block-photo">
<div class="idphoto view">
<h3 class="title">Show Us Your ID</h3>
<h3 class="title">${_("Show Us Your ID")}</h3>
<div class="instruction">
<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>
</div>
<div class="wrapper-task">
......@@ -341,19 +342,19 @@
<ul class="list-controls">
<li class="control control-redo" id="photo_id_reset_button">
<a class="action action-redo" href="">
<i class="icon-undo"></i> <span class="sr">Retake</span>
<i class="icon-undo"></i> <span class="sr">${_("Retake")}</span>
</a>
</li>
<li class="control control-do" id="photo_id_capture_button">
<a class="action action-do" href="">
<i class="icon-camera"></i> <span class="sr">Take photo</span>
<i class="icon-camera"></i> <span class="sr">${_("Take photo")}</span>
</a>
</li>
<li class="control control-approve" id="photo_id_approve_button">
<a class="action action-approve" href="">
<i class="icon-ok"></i> <span class="sr">Looks good</span>
<i class="icon-ok"></i> <span class="sr">${_("Looks good")}</span>
</a>
</li>
</ul>
......@@ -362,28 +363,28 @@
<div class="wrapper-help">
<div class="help help-task photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4>
<h4 class="title">${_("Tips on taking a successful photo")}</h4>
<div class="copy">
<ul>
<li>Make sure your ID is well-lit</li>
<li>Check that there isn't any glare</li>
<li>Ensure that you can see your photo and read your name</li>
<li>Try to keep your fingers at the edge to avoid covering important information</li>
<li>${_("Make sure your ID is well-lit")}</li>
<li>${_("Check that there isn't any glare")}</li>
<li>${_("Ensure that you can see your photo and read your name")}</li>
<li>${_("Try to keep your fingers at the edge to avoid covering important information")}</li>
</ul>
</div>
</div>
<div class="help help-faq facefaq">
<h4 class="sr title">Common Questions</h4>
<h4 class="sr title">${_("Common Questions")}</h4>
<div class="copy">
<dl class="list-faq">
<dt class="faq-question">Why do you need a photo of my ID?</dt>
<dd class="faq-answer">We need to match your ID with your photo and name to confirm that you are you.</dd>
<dt class="faq-question">${_("Why do you need a photo of my ID?")}</dt>
<dd class="faq-answer">${_("We need to match your ID with your photo and name to confirm that you are you.")}</dd>
<dt class="faq-question">What do you do with this picture?</dt>
<dd class="faq-answer">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.</dd>
<dt class="faq-question">${_("What do you do with this picture?")}</dt>
<dd class="faq-answer">${_("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.")}</dd>
</dl>
</div>
</div>
......@@ -391,11 +392,11 @@
</div>
<nav class="nav-wizard">
<span class="help help-inline">Once you verify your ID photo looks good, you can move on to step 3.</span>
<span class="help help-inline">${_("Once you verify your ID photo looks good, you can move on to step 3.")}</span>
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next action-primary" id="photo_id_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
<a class="next action-primary" id="photo_id_next_button" href="#next" aria-hidden="true" title="Next">${_("Go to Step 3: Review Your Info")}</a>
</li>
</ol>
</nav>
......@@ -404,32 +405,34 @@
<div id="wrapper-review" class="wrapper-view">
<div class="review view">
<h3 class="title">Verify Your Submission</h3>
<h3 class="title">${_("Verify Your Submission")}</h3>
<div class="instruction">
<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>
</div>
<div class="wrapper-task">
<ol class="review-tasks">
<li class="review-task review-task-name">
<h4 class="title">Check Your Name</h4>
<h4 class="title">${_("Check Your Name")}</h4>
<div class="copy">
<p>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.</p>
<!-- FIXME: not sure how to handle variables w/in translation context -->
${_("Contact {platform_name}").format(platform_name=settings.PLATFORM_NAME)}
<p>${_("Make sure your full name on your edX account, {}, matches your ID. We will also use this as the name on your certificate.").format(user_full_name)}</p>
</div>
<ul class="list-actions">
<li class="action action-editname">
<a rel="modal" class="edit-name" href="#">Edit my name</a>
<a rel="modal" class="edit-name" href="#">${_("Edit my name")}</a>
</li>
</ul>
</li>
<li class="review-task review-task-photos">
<h4 class="title">Review the Photos You've Taken</h4>
<h4 class="title">${_("Review the Photos You've Taken")}</h4>
<div class="copy">
<p>Make sure your full name on your edX account, <strong>${user_full_name}</strong>, matches your ID. We will also use this as the name on your certificate.</p>
<p>${_("Curabitur blandit tempus porttitor. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.")}</p>
</div>
<ol class="wrapper-photos">
......@@ -439,11 +442,11 @@
</div>
<div class="help-tips">
<h5 class="title">The photo above needs to meet the following requirements:</h5>
<h5 class="title">${_("The photo above needs to meet the following requirements:")}</h5>
<ul class="list-help list-tips copy">
<li class="tip">Be well lit</li>
<li class="tip">Show your whole face</li>
<li class="tip">Match your ID</li>
<li class="tip">${_("Be well lit")}</li>
<li class="tip">${_("Show your whole face")}</li>
<li class="tip">${_("Match your ID")}</li>
</ul>
</div>
</li>
......@@ -454,11 +457,11 @@
</div>
<div class="help-tips">
<h5 class="title">The photo above needs to meet the following requirements:</h5>
<h5 class="title">${_("The photo above needs to meet the following requirements:")}</h5>
<ul class="list-help list-tips copy">
<li class="tip">Be readable (not too far away, no glare)</li>
<li class="tip">Show your name</li>
<li class="tip">Match the photo of your face and your name above</li>
<li class="tip">${_("Be readable (not too far away, no glare)")}</li>
<li class="tip">${_("Show your name")}</li>
<li class="tip">${_("Match the photo of your face and your name above")}</li>
</ul>
</div>
</li>
......@@ -466,22 +469,22 @@
<div class="msg msg-retake msg-followup">
<div class="copy">
<p>Photos don't meet the requirements?</p>
<p>${_("Photos don't meet the requirements?")}</p>
</div>
<ul class="list-actions">
<li class="action action-retakephotos">
<a class="retake-photos" href="#">Retake Your Photos</a>
<a class="retake-photos" href="#">${_("Retake Your Photos")}</a>
</li>
</ul>
</div>
</li>
<li class="review-task review-task-contribution">
<h4 class="title">Check Your Contribution Level</h4>
<h4 class="title">${_("Check Your Contribution Level")}</h4>
<div class="copy">
<p>Please confirm your contribution for this course:</p>
<p>${_("Please confirm your contribution for this course:")}</p>
</div>
<%include file="/course_modes/_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
......@@ -491,18 +494,17 @@
</div>
<nav class="nav-wizard">
<span class="help help-inline">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</span>
<span class="help help-inline">${_("Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.")}</span>
<ol class="wizard-steps">
<li class="wizard-step step-match">
<input type="checkbox" name="match" id="confirm_pics_good" />
<label for="confirm_pics_good">Yes! My details all match.</label>
<label for="confirm_pics_good">${_("Yes! My details all match.")}</label>
</li>
<li class="wizard-step step-proceed">
<form id="pay_form" method="post" action="${purchase_endpoint}">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<input type="hidden" name="course_id" value="${course_id | h}" />
<!-- <button class="action-primary" type="submit" id="pay_button">Go to Step 4: Secure Payment</button> -->
<input class="action-primary" type="button" id="pay_button" value="Go to Step 4: Secure Payment" name="payment">
</form>
</li>
......@@ -518,16 +520,16 @@
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">Have questions?</h3>
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>Please read <a rel="external" href="">our FAQs to view common questions about our certificates</a>.</p>
<p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Change your mind?</h3>
<h3 class="title">${_("Change your mind?")}</h3>
<div class="copy">
<p>You can always <a href="${reverse('course_modes_choose', kwargs={'course_id': course_id})}">Audit the course for free</a> without verifying.</p>
<p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
</ul>
......
......@@ -10,9 +10,9 @@
<div class=" msg msg-activate">
<i class="msg-icon icon-warning-sign"></i>
<div class="msg-content">
<h3 class="title">You need to activate your account before proceeding</h3>
<h3 class="title">${_("You need to activate your account before proceeding")}</h3>
<div class="copy">
<p>Please check your email for further instructions on verifying your new account.</p>
<p>${_("Please check your email for further instructions on verifying your new account.")}</p>
</div>
</div>
</div>
......@@ -25,12 +25,12 @@
<header class="page-header">
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">You are registering for</span>
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-value">
<span class="context">Registering as:</span> ID Verified
<span class="context">${_("Registering as: ")}</span> ${_("ID Verified")}
</span>
</span>
</h2>
......@@ -38,39 +38,39 @@
<div class="wrapper-progress">
<section class="progress">
<h3 class="sr title">Your Progress</h3>
<h3 class="sr title">${_("Your Progress")}</h3>
<ol class="progress-steps">
<li class="progress-step is-current" id="progress-step0">
<span class="wrapper-step-number"><span class="step-number">0</span></span>
<span class="step-name">Intro</span>
<span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Intro")}</span>
</li>
<li class="progress-step" id="progress-step1">
<span class="wrapper-step-number"><span class="step-number">1</span></span>
<span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
<span class="step-name">${_("Take Photo")}</span>
</li>
<li class="progress-step" id="progress-step2">
<span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name">Take ID Photo</span>
<span class="step-name">${_("Take ID Photo")}</span>
</li>
<li class="progress-step" id="progress-step3">
<span class="wrapper-step-number"><span class="step-number">3</span></span>
<span class="step-name">Review</span>
<span class="step-name">${_("Review")}</span>
</li>
<li class="progress-step" id="progress-step4">
<span class="wrapper-step-number"><span class="step-number">4</span></span>
<span class="step-name">Make Payment</span>
<span class="step-name">${_("Make Payment")}</span>
</li>
<li class="progress-step" id="progress-step5">
<span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
<span class="step-name">Confirmation</span>
<span class="step-name">${_("Confirmation")}</span>
</li>
</ol>
......@@ -83,31 +83,31 @@
<div class="wrapper-content-main">
<article class="content-main">
<h3 class="title">What You Will Need to Register</h3>
<h3 class="title">${_("What You Will Need to Register")}</h3>
<div class="instruction">
<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>
<ul class="list-reqs ${"account-not-activated" if is_not_active else ""}">
%if is_not_active:
<li class="req req-0 req-activate">
<h4 class="title">Activate Your Account</h4>
<h4 class="title">${_("Activate Your Account")}</h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<div class="copy">
<p>
<span class="copy-super">Check Your Email</span>
<span class="copy-sub">Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
<span class="copy-super">${_("Check Your Email")}</span>
<span class="copy-sub">${_("Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum")}.</span>
</p>
</div>
</li>
%endif
<li class="req req-1 req-id">
<h4 class="title">Identification</h4>
<h4 class="title">${_("Identification")}</h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
......@@ -115,47 +115,47 @@
<div class="copy">
<p>
<span class="copy-super">A photo identification document</span>
<span class="copy-sub">a drivers license, passport, student ID, or other ID with your name and picture on it</span>
<span class="copy-super">${_("A photo identification document")}</span>
<span class="copy-sub">${_("a drivers license, passport, student ID, or other ID with your name and picture on it")}</span>
</p>
</div>
</li>
<li class="req req-2 req-webcam">
<h4 class="title">Webcam</h4>
<h4 class="title">${_("Webcam")}</h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<div class="copy">
<p>
<span class="copy-super">A webcam and a modern browser</span>
<span class="copy-sub">Firefox, Chrome, or Opera</span>
<span class="copy-super">${_("A webcam and a modern browser")}</span>
<span class="copy-sub">${_("Firefox, Chrome, or Opera")}</span>
</p>
</div>
</li>
<li class="req req-3 req-payment">
<h4 class="title">Credit or Debit Card</h4>
<h4 class="title">${_("Credit or Debit Card")}</h4>
<div class="placeholder-art">
<i class="icon-credit-card"></i>
</div>
<div class="copy">
<p>
<span class="copy-super">A major credit or debit card</span>
<span class="copy-sub">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span>
<span class="copy-super">${_("A major credit or debit card")}</span>
<span class="copy-sub">${_("Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club")}</span>
</p>
</div>
</li>
</ul>
<nav class="nav-wizard ${"is-not-ready" if is_not_active else "is-ready"}">
<span class="help help-inline">Missing something? You can always <a href="">audit this course instead</a></span>
<span class="help help-inline">${_("Missing something? You can always {a_start} audit this course instead {a_end}").format(a_start='<a href="">', a_end="</a>")}</span>
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next action-primary ${"disabled" if is_not_active else ""}" id="face_next_button" href="${reverse('verify_student_verify', kwargs={'course_id': course_id})}">Go to Step 1: Take my Photo</a>
<a class="next action-primary ${"disabled" if is_not_active else ""}" id="face_next_button" href="${reverse('verify_student_verify', kwargs={'course_id': course_id})}">${_("Go to Step 1: Take my Photo")}</a>
</li>
</ol>
</nav>
......@@ -166,16 +166,16 @@
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">Have questions?</h3>
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>Please read <a rel="external" href="">our FAQs to view common questions about our certificates</a>.</p>
<p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Change your mind?</h3>
<h3 class="title">${_("Change your mind?")}</h3>
<div class="copy">
<p>You can always <a href="">Audit the course for free</a> without verifying.</p>
<p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
</ul>
......
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