|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> |
|
<meta http-equiv="Pragma" content="no-cache"> |
|
<meta http-equiv="Expires" content="0"> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
<title>FaceOnLive OpenKYC</title> |
|
<link rel="shortcut icon" href="/static/img/favicon.ico"> |
|
|
|
|
|
<link |
|
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" |
|
rel="stylesheet"> |
|
|
|
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> |
|
|
|
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap" rel="stylesheet"> |
|
|
|
<link href="/static/vendor/mdbootstrap/bootstrap.min.css" rel="stylesheet"> |
|
|
|
<link href="/static/vendor/mdbootstrap/mdb.min.css" rel="stylesheet"> |
|
|
|
|
|
|
|
<link rel="stylesheet" href="/static/vendor/croppie/croppie.min.css"> |
|
|
|
|
|
<link href="/static/ui/scss/bundle.min.css" rel="stylesheet"> |
|
|
|
<link rel="stylesheet" href="/static/ui/scss/ocr_file.css"> |
|
|
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div class="wrapper"> |
|
|
|
|
|
|
|
<div class="loader"> |
|
<div class="spinner-border" role="status"> |
|
<span class="sr-only"></span> |
|
</div> |
|
</div> |
|
|
|
<header> |
|
|
|
<div class="header-left"> |
|
<div class="container"> |
|
<a href="/id_type/" class="btn btn-link" id="btn-back"><span |
|
class="material-icons-outlined">arrow_back_ios</span></a> |
|
</div> |
|
</div> |
|
<div class="header-middle"> |
|
<div class="container"> |
|
|
|
</div> |
|
</div> |
|
<div class="header-right"> |
|
<div class="container"> |
|
|
|
</div> |
|
</div> |
|
|
|
</header> |
|
|
|
<main> |
|
<form method="post" id="form-ocr" autocomplete="off"> |
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> |
|
<div class="row page-header"> |
|
<div class="col-12 text-center"> |
|
{% if id_type == 'ic_front' %} |
|
ID Card - Front Side |
|
{% elif id_type == 'ic_back' %} |
|
ID Card - Back Side |
|
{% else %} |
|
Passport |
|
{% endif %} |
|
</div> |
|
</div> |
|
<div class="row page-subheader"> |
|
<div class="col-12"> |
|
<div class="default-container"> |
|
<p class="mb-0 text-center"> |
|
Frame your ID Document and capture.<br/> |
|
All corners should be visible. Avoid the shadow zone. |
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
<div class="webcam-container text-center" style="display: none;"> |
|
Please adjust the ID to ensure all information is within the box. |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row page-content"> |
|
<div class="col-12 d-flex justify-content-center"> |
|
<input type="hidden" name="ocr_file" id="id_ocr_file"> |
|
<div class="default-container"> |
|
{% if id_type == 'ic_front' %} |
|
<lottie-player src="/static/img/lottie/ocr_id_front.json" background="transparent" speed="1" |
|
style="width: 300px; height: 300px;" loop autoplay></lottie-player> |
|
{% elif id_type == 'ic_back' %} |
|
<lottie-player src="/static/img/lottie/ocr_id_back.json" background="transparent" speed="1" |
|
style="width: 300px; height: 300px;" loop autoplay></lottie-player> |
|
{% else %} |
|
<lottie-player src="/static/img/lottie/ocr_passport.json" background="transparent" speed="1" |
|
style="width: 300px; height: 300px;" loop autoplay></lottie-player> |
|
{% endif %} |
|
</div> |
|
<div class="preview-container" style="display: none;"> |
|
<img id="img-preview"> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row page-footer"> |
|
<div class="col-12"> |
|
<div class="row default-container"> |
|
<div class="col-6"> |
|
<label class="btn btn-outline-primary btn-side"> |
|
Upload |
|
<input type="file" class="file-upload" accept="image/*" hidden> |
|
</label> |
|
</div> |
|
<div class="col-6"> |
|
<label class="btn btn-primary btn-side"> |
|
Take |
|
<input type="file" class="file-capture" accept="image/*" capture="camera" hidden> |
|
</label> |
|
</div> |
|
</div> |
|
<div class="row preview-container" style="display: none;"> |
|
<div class="col-6 mb-3 d-flex justify-content-center"> |
|
<label class="btn btn-outline-primary btn-side"> |
|
Retake |
|
<input type="file" class="file-capture" accept="image/*" capture="camera" hidden> |
|
</label> |
|
</div> |
|
<div class="col-6 mb-3 d-flex justify-content-center"> |
|
<button type="button" class="btn btn-primary btn-side" id="btn-next">Next</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</form> |
|
|
|
</main> |
|
|
|
<footer> |
|
|
|
<div class="container powered"> |
|
<img src="/static/img/faceonlive.png" width="42" />  |
|
<div> |
|
<span class="text-c-neutral">Powered by</span><br /> |
|
<a href="https://www.faceonlive.com" target="_blank" rel="noopener noreferrer">FaceOnLive</a> |
|
</div> |
|
</div> |
|
|
|
</footer> |
|
{% if error_model %} |
|
|
|
<div class="modal fade auto-show" id="error-modal-0" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true"> |
|
<div class="modal-dialog modal-dialog-centered modal-sm"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<div class="modal-title mx-auto">Please Retake ID</div> |
|
</div> |
|
<div class="modal-body"> |
|
<p>Error parsing ID Document, please ensure there is no obstacles or glare and All corners should be visible.</p> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-primary mx-auto" data-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
<script type="text/javascript" src="/static/jsi18n.js"></script> |
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="/static/vendor/mdbootstrap/jquery.min.js"></script> |
|
|
|
<script type="text/javascript" src="/static/vendor/mdbootstrap/popper.min.js"></script> |
|
|
|
<script type="text/javascript" src="/static/vendor/mdbootstrap/bootstrap.min.js"></script> |
|
|
|
<script type="text/javascript" src="/static/vendor/mdbootstrap/mdb.min.js"></script> |
|
|
|
|
|
|
|
<script type="text/javascript" src="/static/vendor/compressorjs/compressor.min.js"></script> |
|
<script type="text/javascript" src="/static/vendor/croppie/croppie.min.js"></script> |
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> |
|
|
|
|
|
<script type="text/javascript" src="/static/ui/js/base.js"></script> |
|
|
|
<script type="text/javascript" src="/static/ui/js/ocr_file.js"></script> |
|
</body> |
|
|
|
</html> |
