Spaces:

Turing311
/

OpenKYC

Build error

App Files Files Community

OpenKYC / templates /id_file.html

Turing311

Upload 36 files

49e6ff4 verified about 2 years ago

raw

history blame contribute delete

9.58 kB

	<!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">

	<!-- 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" />&emsp;
	<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.download"></script>
	<!-- MDB core JavaScript -->
	<script type="text/javascript" src="/static/vendor/mdbootstrap/mdb.min.js.download"></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>