210 lines
10 KiB
HTML
210 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||
|
|
xmlns:th="http://www.thymeleaf.org"
|
||
|
|
layout:decorate="~{layouts/blank-layout}">
|
||
|
|
<title th:text="${pageTitle}">Collect MR</title>
|
||
|
|
</head>
|
||
|
|
<div layout:fragment="page_subtitle">
|
||
|
|
<h1 class="title mb-1" th:text="${pageTitle}"></h1>
|
||
|
|
<h3 class="mt-0" th:text="#{Fingerprint Verification}"></h3>
|
||
|
|
</div>
|
||
|
|
<body layout:fragment="page_content" id="page_expat">
|
||
|
|
<form id="mcWorkerFrom" name="mcWorkerFrom" th:action="@{''}"
|
||
|
|
autocomplete="off" th:method="POST"
|
||
|
|
enctype="multipart/form-data" th:object="${mcWorkerFrom}">
|
||
|
|
<div class="card-body">
|
||
|
|
<th:block th:include="page/mc/profile-details" />
|
||
|
|
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-5">
|
||
|
|
<div class="card card-blog">
|
||
|
|
<div class="card-body">
|
||
|
|
<h6 class="category text-info" th:text="#{1. Finger Selection}"></h6>
|
||
|
|
<h4 class="card-title">
|
||
|
|
Please select any one good finger from both hand
|
||
|
|
</h4>
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
<svg version="1.0"
|
||
|
|
width="485.000000pt" height="187pt" viewBox="0 0 485.000000 350.000000"
|
||
|
|
preserveAspectRatio="xMidYMid meet">
|
||
|
|
<g>
|
||
|
|
<text x="25" y="80" font-size="13" font-weight="bold" fill="blue" id="left_little_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.leftLittle}+#{'%'}"></th:block>
|
||
|
|
</text>
|
||
|
|
<rect x="34" y="90" rx="10" ry="10" id="left_little_finger" class="fingers" width="20" height="60" fill="white"></rect>
|
||
|
|
|
||
|
|
<text x="55" y="50" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="left_ring_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.leftRing}+#{'%'}"></th:block>
|
||
|
|
</text>
|
||
|
|
<rect x="64" y="60" rx="10" ry="10" id="left_ring_finger" class="fingers"width="20" height="80" fill="white"></rect>
|
||
|
|
|
||
|
|
<text x="96" y="30" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="left_middle_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.leftMiddle}+#{'%'}"></th:block> </text>
|
||
|
|
<rect x="96" y="40" rx="10" ry="10" id="left_middle_finger" class="fingers" width="20" height="90" fill="white"></rect>
|
||
|
|
|
||
|
|
<text x="132" y="58" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="left_index_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.leftIndex}+#{'%'}"></th:block> </text>
|
||
|
|
<rect x="132" y="68" rx="10" ry="10" id="left_index_finger" class="fingers done" width="20" height="70" fill="white"></rect>
|
||
|
|
|
||
|
|
<text x="192" y="130" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="left_thumb_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.leftThumb}+#{'%'}"></th:block> </text>
|
||
|
|
<rect x="235" y="-48" rx="10" ry="10" id="left_thumb_finger" class="fingers" width="25" height="60" fill="white"></rect>
|
||
|
|
|
||
|
|
<text x="262" y="130" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="right_thumb_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.rightThumb}+#{'%'}"></th:block> </text>
|
||
|
|
|
||
|
|
<text x="315" y="58" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="right_index_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.rightIndex}+#{'%'}"></th:block> </text>
|
||
|
|
<rect x="324" y="68" rx="10" ry="10" id="right_index_finger" class="fingers" width="20" height="70" fill="white"></rect>
|
||
|
|
|
||
|
|
<text x="364" y="30" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="right_middle_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.rightMiddle}+#{'%'}"></th:block> </text>
|
||
|
|
<rect x="358" y="40" rx="10" ry="10" id="right_middle_finger" class="fingers" width="20" height="90" fill="white"></rect>
|
||
|
|
|
||
|
|
<text x="394" y="52" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="right_ring_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.rightRing}+#{'%'}"></th:block> </text>
|
||
|
|
<rect x="390" y="62" rx="10" ry="10" id="right_ring_finger" class="fingers" width="20" height="80" fill="white"></rect>
|
||
|
|
|
||
|
|
<text x="428" y="78" font-family="Verdana" font-size="13" font-weight="bold" fill="blue" id="right_little_finger_pect">
|
||
|
|
<th:block th:text="${fingersQuality.rightLittle}+#{'%'}"></th:block> </text>
|
||
|
|
<rect x="420" y="88" rx="10" ry="10" id="right_little_finger" class="fingers" width="20" height="60" fill="white"></rect>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform = "translate(100, 100) rotate(315 70 70)">
|
||
|
|
<rect x="145" y="120" rx="10" ry="10" id="right_thumb_finger" class="fingers" width="25" height="60" fill="white"></rect>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(0.000000,350) scale(0.100000,-0.100000)"
|
||
|
|
fill="#000000" stroke="none">
|
||
|
|
<path d="M1020 3143 c-24 -9 -60 -45 -78 -78 -15 -26 -18 -87 -22 -495 -4
|
||
|
|
-404 -7 -465 -20 -465 -13 0 -16 52 -20 385 -4 280 -8 391 -17 407 -7 11 -29
|
||
|
|
31 -49 43 -75 47 -174 3 -194 -86 -5 -21 -10 -216 -10 -431 0 -386 0 -393 -20
|
||
|
|
-393 -19 0 -20 7 -20 263 0 230 -2 266 -18 296 -52 103 -182 103 -235 0 -16
|
||
|
|
-32 -17 -75 -14 -624 3 -580 3 -591 26 -670 79 -279 231 -399 552 -435 269
|
||
|
|
-31 545 79 688 274 32 44 247 383 403 636 26 41 68 95 93 120 91 88 109 176
|
||
|
|
49 229 -25 21 -35 23 -86 18 -123 -11 -258 -106 -355 -250 -32 -47 -57 -73
|
||
|
|
-71 -75 l-22 -3 0 478 c0 435 -2 481 -18 513 -51 103 -201 108 -262 8 -19 -31
|
||
|
|
-20 -51 -20 -364 0 -340 -1 -349 -37 -337 -10 4 -13 107 -13 471 0 448 -1 468
|
||
|
|
-20 500 -28 46 -76 72 -130 71 -25 0 -52 -3 -60 -6z m95 -69 c43 -17 45 -38
|
||
|
|
45 -524 l0 -462 29 -29 c41 -40 91 -40 132 0 l29 29 0 337 0 337 29 29 c16 16
|
||
|
|
39 29 51 29 12 0 35 -13 51 -29 l29 -29 0 -494 c0 -552 -2 -538 66 -538 61 0
|
||
|
|
105 33 161 119 70 110 187 198 286 215 71 13 63 -46 -18 -129 -30 -31 -71 -84
|
||
|
|
-91 -118 -177 -295 -410 -649 -458 -697 -168 -167 -409 -224 -691 -165 -197
|
||
|
|
42 -315 161 -365 368 -19 77 -20 119 -20 663 0 438 3 583 12 592 7 7 23 12 38
|
||
|
|
12 55 0 55 4 60 -300 l5 -282 33 -29 c18 -16 44 -29 58 -29 35 0 80 28 93 57
|
||
|
|
7 16 11 160 11 433 0 397 1 411 20 430 25 25 41 25 71 1 l24 -19 3 -386 3
|
||
|
|
-385 30 -25 c51 -43 115 -32 144 24 13 25 15 98 15 490 l0 461 25 24 c24 24
|
||
|
|
57 31 90 19z"/>
|
||
|
|
<path d="M3596 3131 c-16 -11 -38 -34 -50 -53 -20 -32 -21 -47 -26 -503 -4
|
||
|
|
-409 -7 -470 -20 -470 -13 0 -16 46 -20 335 -5 302 -7 338 -23 365 -33 53 -65
|
||
|
|
70 -134 70 -55 0 -65 -3 -94 -30 -60 -57 -59 -50 -59 -565 0 -483 0 -485 -37
|
||
|
|
-462 -7 4 -30 35 -52 69 -91 140 -229 239 -349 250 -58 5 -62 4 -91 -25 -25
|
||
|
|
-25 -31 -39 -31 -74 0 -49 11 -68 86 -150 28 -31 69 -85 90 -120 60 -102 282
|
||
|
|
-455 349 -558 104 -159 219 -253 375 -307 167 -58 324 -63 520 -16 182 44 313
|
||
|
|
165 375 348 41 122 45 186 45 771 l0 561 -23 34 c-66 99 -204 78 -236 -37 -7
|
||
|
|
-23 -11 -138 -11 -286 0 -241 -1 -248 -20 -248 -20 0 -20 7 -20 407 0 385 -1
|
||
|
|
409 -20 448 -11 22 -33 48 -49 58 -55 33 -136 14 -176 -41 -19 -26 -20 -47
|
||
|
|
-25 -412 -4 -333 -7 -385 -20 -385 -13 0 -16 61 -20 470 -6 518 -3 501 -70
|
||
|
|
550 -43 32 -120 35 -164 6z m128 -72 l26 -20 0 -452 c0 -274 4 -466 10 -488
|
||
|
|
12 -41 46 -69 85 -69 41 0 82 27 94 61 7 21 11 157 11 400 l0 369 26 17 c24
|
||
|
|
15 29 15 53 2 l26 -15 5 -428 5 -428 33 -29 c36 -32 69 -36 111 -15 48 25 51
|
||
|
|
46 51 328 0 229 2 264 17 280 19 21 66 24 82 4 9 -11 11 -170 9 -623 l-3 -608
|
||
|
|
-28 -79 c-83 -234 -241 -328 -557 -329 -144 -1 -213 14 -328 70 -144 71 -180
|
||
|
|
115 -488 613 -70 113 -133 216 -142 229 -8 13 -41 52 -72 86 -63 68 -78 98
|
||
|
|
-60 120 26 31 153 -19 231 -92 28 -26 73 -80 100 -120 54 -79 78 -100 126
|
||
|
|
-109 47 -9 78 2 91 31 9 19 12 162 12 511 l0 486 30 30 c36 35 71 33 108 -8
|
||
|
|
22 -25 22 -27 22 -365 l0 -340 26 -24 c48 -44 132 -24 153 37 8 22 11 174 11
|
||
|
|
487 l-1 456 26 23 c33 28 65 28 99 1z"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5">
|
||
|
|
<div class="card card-blog">
|
||
|
|
<div class="card-body">
|
||
|
|
<h6 class="category text-success" th:text="#{2. Capture Fingerprint}"></h6>
|
||
|
|
<h4 class="card-title" th:text="#{Please place fingerprint and start Verify}"></h4>
|
||
|
|
<img class="card-img-top worker-img" th:src="${baseUrl}+@{/images/users/fp-animation.gif}"
|
||
|
|
id="fingerprintBoth"
|
||
|
|
style="width: 100%; height: 211px;border: 1px solid #555;" />
|
||
|
|
<div id="verificationStatus"></div>
|
||
|
|
<div class="col d-flex justify-content-center">
|
||
|
|
<button type="button"
|
||
|
|
th:onclick="resetFingerPrint('')"
|
||
|
|
class="btn btn-danger btn-sm">
|
||
|
|
<i class="material-icons">autorenew</i> Reset
|
||
|
|
</button>
|
||
|
|
<button type="button"
|
||
|
|
th:onclick="verifyFingerPrint('')"
|
||
|
|
id="btnScanPassFront" class="btn btn-success btn-sm">
|
||
|
|
<i class="material-icons">aspect_ratio</i> Verify
|
||
|
|
</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<th:block th:each="doc, row : ${mcWorkerFrom?.thumbNails}">
|
||
|
|
<input type="hidden" th:id="${# strings.replace (doc.filename, ' ', '_')}" th:value="${doc?.base64Content}">
|
||
|
|
</th:block>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<th:block th:if="${mcWorkerFrom != null}">
|
||
|
|
<input type="hidden" th:field="*{wrkrRegId}">
|
||
|
|
</th:block>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<button type="button" class="btn btn-primary" th:onclick="|window.location.href='@{#{url.worker.search}}'|">Back</button>
|
||
|
|
<div class="pull-right">
|
||
|
|
<th:block th:if="${(mcWorkerFrom.status!=null && mcWorkerFrom.status.statusCd=='PND')}">
|
||
|
|
<input type="submit" class="btn btn-fill btn-primary btn-wd" value="Submit" disabled ="true" id="submitBtnId">
|
||
|
|
</th:block>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
rect{
|
||
|
|
cursor: pointer;
|
||
|
|
/* fill: green; */
|
||
|
|
}
|
||
|
|
#left_thumb_finger{
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.done {
|
||
|
|
/* animation: blinkingBackground 5s infinite; */
|
||
|
|
fill: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes blinkingBackground{
|
||
|
|
0% { background: #55b559;}
|
||
|
|
25% { background: #55b559;}
|
||
|
|
50% { background: #55b559;}
|
||
|
|
75% { background: #55b559;}
|
||
|
|
100% { background: #55b559;}
|
||
|
|
}
|
||
|
|
|
||
|
|
.watermark {
|
||
|
|
position: absolute; /* Position the background text */
|
||
|
|
bottom: 55px; /* At the bottom. Use top:0 to append it to the top */
|
||
|
|
/* background: rgba(0, 0, 0, 0.5); */ /* Black background with 0.5 opacity */
|
||
|
|
color: #f1f1f1; /* Grey text */
|
||
|
|
width: 61%; /* Full width */
|
||
|
|
padding: 1px; /* Some padding */
|
||
|
|
}
|
||
|
|
</style>
|