initial rough skeleton for verification flow
This commit is contained in:
Frances Botsford
@@ -3,9 +3,249 @@
|
||||
<%inherit file="../main.html" />
|
||||
|
||||
<%block name="content">
|
||||
<div class="container">
|
||||
|
||||
<h1>Face Upload!</h1>
|
||||
<header class="page-header">
|
||||
<h2 class="title">You are registering for [coursename] (ID Verified)</h2>
|
||||
</header>
|
||||
|
||||
<a href="${reverse('verify_student/photo_id_upload')}">Upload Photo ID</a>
|
||||
<section class="progress">
|
||||
<h3 class="sr">Your Progress</h3>
|
||||
<ol>
|
||||
<li class="progress-step1"><span class="current">Current: </span>Step 1 Take Your Photo</li>
|
||||
<li class="progress-step2">Step 2 ID Photo</li>
|
||||
<li class="progress-step3">Step 3 Review</li>
|
||||
<li class="progress-step4">Step 4 Payment</li>
|
||||
<li class="progress-step5">Finished Confirmation</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="wrapper">
|
||||
<div id="wrapper-facephoto">
|
||||
<h3>Take Your Photo</h3>
|
||||
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
|
||||
|
||||
<div id="facecam">
|
||||
|
||||
<div class="placeholder-cam">
|
||||
<!-- cam image -->
|
||||
</div>
|
||||
|
||||
<div class="controls photo-controls">
|
||||
<ul>
|
||||
<li class="ctrl-do">
|
||||
<a class="action action-do" href="">Take photo</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li class="ctrl-redo">
|
||||
<a class="action action-redo" href="">Retake</a>
|
||||
</li>
|
||||
<li class="ctrl-approve">
|
||||
<a class="action action-approve" href="">Looks good</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li class="ctrl-redo">
|
||||
<a class="action action-redo" href="">Retake</a>
|
||||
</li>
|
||||
<li class="ctrl-approve is-approved">
|
||||
<a class="action action-approve" href="">Looks good</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tips facetips">
|
||||
<h4>Tips on taking a successful photo</h4>
|
||||
<ul>
|
||||
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
|
||||
<li>Maecenas faucibus mollis interdum.</li>
|
||||
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
|
||||
<li>Cras mattis consectetur purus sit amet fermentum.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="faq facefaq">
|
||||
<h4 class="sr">Common Questions</h4>
|
||||
<dl>
|
||||
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
|
||||
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
|
||||
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
|
||||
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
|
||||
<dd>Aenean eu leo quam.</dd>
|
||||
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
|
||||
<dd>Maecenas faucibus mollis interdum.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<a href="#">Go to Step 2: Take ID Photo</a>
|
||||
<p class="tips">Once you verify your photo looks good, you can move on to step 2.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="wrapper-idphoto">
|
||||
<h3>Take Your Photo</h3>
|
||||
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
|
||||
|
||||
<div id="idcam">
|
||||
|
||||
<div class="placeholder-cam">
|
||||
<!-- cam image -->
|
||||
</div>
|
||||
|
||||
<div class="controls photo-controls">
|
||||
<a href="">Take photo</a>
|
||||
|
||||
<a href="">Retake</a>
|
||||
<a class="" href="">Looks good</a>
|
||||
|
||||
<a class="clicked" href="">Looks good</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tips idtips">
|
||||
<h4>Tips on taking a successful photo</h4>
|
||||
<ul>
|
||||
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
|
||||
<li>Maecenas faucibus mollis interdum.</li>
|
||||
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
|
||||
<li>Cras mattis consectetur purus sit amet fermentum.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="faq idfaq">
|
||||
<h4 class="sr">Common Questions</h4>
|
||||
<dl>
|
||||
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
|
||||
<dd>Aenean eu leo quam.</dd>
|
||||
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
|
||||
<dd>Maecenas faucibus mollis interdum.</dd>
|
||||
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
|
||||
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
|
||||
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<a href="#">Go to Step 3: Review Your Info</a>
|
||||
<p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="wrapper-review">
|
||||
<h3>Verify Your Submission</h3>
|
||||
<p>Make sure we can verify your identity with the photos and information below.</p>
|
||||
|
||||
<div class="review-name">
|
||||
<h3>Check Your Name</h3>
|
||||
<p>Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.</p>
|
||||
<p><a href="#">Edit my name</a></p>
|
||||
|
||||
<section id="edit-name" class="modal">
|
||||
<header>
|
||||
<h4>${_("Edit Your Full Name")}</h4>
|
||||
</header>
|
||||
<form id="course-checklists" class="course-checklists" method="post" action="">
|
||||
<div role="alert" class="status message submission-error" tabindex="-1">
|
||||
<p class="message-title">${_("The following error occured while editing your name:")}
|
||||
<span class="message-copy"> </span>
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
<label for="name">${_('Full Name')}</label>
|
||||
<input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
|
||||
</p>
|
||||
|
||||
<div class="actions">
|
||||
<button class="action action-primary" type="submit">${_("Save")}</button>
|
||||
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
|
||||
</div>
|
||||
</form>
|
||||
<a href="#" rel="view" class="action action-close action-editname-close">
|
||||
<i class="icon-remove-sign"></i>
|
||||
<span class="label">close</span>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="review-facephoto">
|
||||
<div class="placeholder-photo">
|
||||
<!-- photo image -->
|
||||
</div>
|
||||
|
||||
<h4>The photo above needs to meet the following requirements:</h4>
|
||||
<ul>
|
||||
<li>Be well lit</li>
|
||||
<li>Show your whole face</li>
|
||||
<li>Match your ID</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="review-facephoto">
|
||||
<div class="placeholder-photo">
|
||||
<!-- photo image -->
|
||||
</div>
|
||||
|
||||
<h4>The photo above needs to meet the following requirements:</h4>
|
||||
<ul>
|
||||
<li>Be readable (not too far away, no glare)</li>
|
||||
<li>Show your name</li>
|
||||
<li>Match the photo of your face and your name above</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="next">
|
||||
|
||||
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
|
||||
|
||||
|
||||
<input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label>
|
||||
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<a href="#">Go to Step 4: Secure Payment</a>
|
||||
<p class="tips">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="support">
|
||||
<p>More questions? <a rel="external" href="">Check out our FAQs.</a></p>
|
||||
<p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!--<a href="${reverse('verify_student/photo_id_upload')}">Upload Photo ID</a>-->
|
||||
</div>
|
||||
|
||||
</%block>
|
||||
|
||||
Reference in New Issue
Block a user