Spaces:
Running
Running
| <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"> | |
| <!-- material icons --> | |
| <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"> | |
| <!-- Font Awesome --> | |
| <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap" rel="stylesheet"> | |
| <!-- Bootstrap core CSS --> | |
| <link href="/static/vendor/mdbootstrap/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Material Design Bootstrap --> | |
| <link href="/static/vendor/mdbootstrap/mdb.min.css" rel="stylesheet"> | |
| <!-- other css library based on page --> | |
| <link rel="stylesheet" href="/static/vendor/croppie/croppie.min.css"> | |
| <!-- global css --> | |
| <link href="/static/ui/scss/bundle.min.css" rel="stylesheet"> | |
| <!-- css based on page --> | |
| <link rel="stylesheet" href="/static/ui/scss/ocr_file.css"> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <!-- Page Loader --> | |
| <div class="loader"> | |
| <div class="spinner-border" role="status"> | |
| <span class="sr-only"></span> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <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> | |
| <!-- Content --> | |
| <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> | |
| <!--ol class="mb-0 pl-3"> | |
| <li>Environment is not dark or dimmed.</li> | |
| <li>Text and/or image are visible and not cut-off.</li> | |
| <li>Image is clear and not blurred.</li> | |
| </ol--> | |
| </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 --> | |
| <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 %} | |
| <!-- Error Modal --> | |
| <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> | |
| <!-- django js translation --> | |
| <script type="text/javascript" src="/static/jsi18n.js"></script> | |
| <!-- data js --> | |
| <!-- JQuery --> | |
| <script type="text/javascript" src="/static/vendor/mdbootstrap/jquery.min.js"></script> | |
| <!-- Bootstrap tooltips --> | |
| <script type="text/javascript" src="/static/vendor/mdbootstrap/popper.min.js"></script> | |
| <!-- Bootstrap core JavaScript --> | |
| <script type="text/javascript" src="/static/vendor/mdbootstrap/bootstrap.min.js"></script> | |
| <!-- MDB core JavaScript --> | |
| <script type="text/javascript" src="/static/vendor/mdbootstrap/mdb.min.js"></script> | |
| <!-- other js library based on page --> | |
| <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> | |
| <!-- global js --> | |
| <script type="text/javascript" src="/static/ui/js/base.js"></script> | |
| <!-- js based on page --> | |
| <script type="text/javascript" src="/static/ui/js/ocr_file.js"></script> | |
| </body> | |
| </html> |