Skip to content

E
edx-platform
Commit 2f3ff4b3 by Brian Talbot
Options

Verification: revising markup for views

parent e6bfb887
Showing with 123 additions and 48 deletions
lms/templates/verify_student/show_requirements.html
......@@ -7,65 +7,140 @@
<div class="container">
<section class="wrapper">
<header class="page-header header-white">
<h2 class="title header-white-title">You are registering for ${course_id} (ID Verified)</h2>
<header class="page-header">
<h2 class="title">
<span class="status-track">(ID Verified)</span>
<span class="status">You are registering for</span>
<span class="status-course">${course_id} </span>
</h2>
</header>
<div class="wrapper-progress">
<section class="progress">
<h3 class="sr title">Your Progress</h3>
<section class="progress">
<header class="section-head">
<h3 class="sr">Your Progress</h3>
</header>
<!--<span class="progress-line"></span><span class="progress-line-done"></span>-->
<ol>
<li class="progress-step current" id="progress-step0"><span class="sr">Current Step: </span> <span class="mini number"></span> Intro</li>
<li class="progress-step" id="progress-step1"><span class="number">1</span> Take Photo</li>
<li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li>
<li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li>
<li class="progress-step" id="progress-step4"> <span class="number">4</span> Make Payment</li>
<li class="progress-step" id="progress-step5"><span class="number"><i class="icon-ok"></i></span> Confirmation</li>
</ol>
</section>
<section class="reqs-section">
<header class="section-head">
<span class="progress-status">
<span class="progress-status-value"></span>
</span>
<ol class="progress-steps">
<li class="progress-step is-completed" id="progress-step0">
<span class="step-number">0</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step1">
<span class="step-number">1</span>
<span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
</li>
<li class="progress-step" id="progress-step2">
<span class="step-number">2</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step3">
<span class="step-number">3</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step4">
<span class="step-number">4</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step5">
<span class="step-number">5</span>
<span class="step-name">Confirmation</span>
</li>
</ol>
</section>
</div>
<div class="wrapper-content-main">
<article class="content-main">
<h3 class="title">What You Will Need to Register</h3>
</header>
<p>There are a few things you will need to register as an ID verified student:</p>
<div class="reqs">
<div class="req1 req">
<h4>Identification</h4>
<div class="art"><i class="icon-id"></i></div>
<p>A photo identification document <span class="tip">a drivers license, passport, student ID, or other ID with your name and picture on it</span></p>
</div>
<div class="req2 req">
<h4>Webcam</h4>
<i class="icon-facetime-video"></i>
<p>A webcam and a modern browser <span class="tip">Firefox, Chrome, or Opera</span></p>
<div class="instruction">
<p>There are a few things you will need to register as an ID verified student:</p>
</div>
<div class="req3 req">
<h4>Credit or Debit Card</h4>
<i class="icon-credit-card"></i>
<p>A major credit or debit card <span class="tip">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span></p>
</div>
</div>
<ul class="list-reqs">
<li class="req req-1 req-id">
<h4>Identification</h4>
<div class="placeholder-art">
<i class="icon-credit-card"></i>
</div>
<div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a></p>
<p class="tip">Change your mind? <a href="">You can always Audit.</a></p>
</div>
</section>
<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>
</p>
</div>
</li>
<li class="req req-2 req-webcam">
<h4>Webcam</h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<section class="support">
<p class="tip">Missing something? <a href="">You can always Audit the course</a>.</p>
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
</section>
<div class="copy">
<p>
<span class="copy-super">A webcam and a modern browser</span>
<span class="copy-sub">Firefox, Chrome, or Opera</span>
</p>
</div>
</li>
</section>
<li class="req req-3 req-payment">
<h4>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>
</p>
</div>
</li>
</ul>
<nav class="nav-wizard">
<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" id="face_next_button" href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a>
</li>
</ol>
</nav>
</article>
</div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title"><i class="icon-question-sign"></i> Have questions?</h3>
<div class="copy">
<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">Change your mind?</h3>
<div class="copy">
<p>You can always <a href="">Audit the course for free</a> without verifying.</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section>
</div>
</%block>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment