summaryrefslogtreecommitdiff
path: root/src/main/resources/templates/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/main/resources/templates/index.html')
-rw-r--r--src/main/resources/templates/index.html172
1 files changed, 172 insertions, 0 deletions
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
new file mode 100644
index 0000000..9d63f8b
--- /dev/null
+++ b/src/main/resources/templates/index.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>OCR</title>
+ <style>
+ button { display: none}
+
+ #passport:checked ~ #rus {
+ display: none;
+ }
+ </style>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</head>
+<body>
+ <div class="container col-xl-12 col-xxl-8 px-4 py-5">
+ <div class="form-group mx-sm-3 mb-2 p-md-5 border rounded-3 bg-body-tertiary" th:each="passport, iStat: ${passports}">
+ <div class="form-group row mb-2" th:if="${passport.subtype}">
+ <label th:for="passportSubType + ${iStat.index}" class="col-sm-2 col-form-label">Pasport turi:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportSubtype + ${iStat.index}" th:id="passportSubtype + ${iStat.index}" th:value="|${passport.subtype}|" th:onclick="'copyToClipboard(\'passportSubtype' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[0]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-2">
+ <label th:for="passportIssuer + ${iStat.index}" class="col-sm-2 col-form-label">Bergan davlat/firma:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportIssuer + ${iStat.index}" th:id="passportIssuer + ${iStat.index}" th:value="|${passport.issuer}|" th:onclick="'copyToClipboard(\'passportIssuer' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[0]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-2">
+ <label th:for="passportSurname + ${iStat.index}" class="col-sm-2 col-form-label">Familiyasi:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportSurname + ${iStat.index}" th:id="passportSurname + ${iStat.index}" th:value="|${passport.surname}|" th:onclick="'copyToClipboard(\'passportSurname' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[0]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-2">
+ <label th:for="passportGivenNames + ${iStat.index}" class="col-sm-2 col-form-label">Ismi(-lari):</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportGivenNames + ${iStat.index}" th:id="passportGivenNames + ${iStat.index}" th:value="|${passport.givenNames}|" th:onclick="'copyToClipboard(\'passportGivenNames' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[0]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-2">
+ <label th:for="passportNumber + ${iStat.index}" class="col-sm-2 col-form-label">Pasport raqami:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportNumber + ${iStat.index}" th:id="passportNumber + ${iStat.index}" th:value="|${passport.number}|" th:onclick="'copyToClipboard(\'passportNumber' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[1]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-2">
+ <label th:for="passportNationality + ${iStat.index}" class="col-sm-2 col-form-label">Fuqaroligi:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportNationality + ${iStat.index}" th:id="passportNationality + ${iStat.index}" th:value="|${passport.nationality}|" th:onclick="'copyToClipboard(\'passportNationality' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[1]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-2">
+ <label th:for="passportDateOfBirth + ${iStat.index}" class="col-sm-2 col-form-label">Tug'ilgan sanasi:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportDateOfBirth + ${iStat.index}" th:id="passportDateOfBirth + ${iStat.index}" th:value="|${#temporals.format(passport.dateOfBirth, 'dd.MM.yyyy')}|" th:onclick="'copyToClipboard(\'passportDateOfBirth' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[1]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-2">
+ <label th:for="passportSex + ${iStat.index}" class="col-sm-2 col-form-label">Jinsi:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportSex + ${iStat.index}" th:id="passportSex + ${iStat.index}" th:value="|${passport.sex}|" th:onclick="'copyToClipboard(\'passportSex' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[1]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-2">
+ <label th:for="passportExpirationDate + ${iStat.index}" class="col-sm-2 col-form-label">Amal qilish muddati:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportExpirationDate + ${iStat.index}" th:id="passportExpirationDate + ${iStat.index}" th:value="|${#temporals.format(passport.expirationDate, 'dd.MM.yyyy')}|" th:onclick="'copyToClipboard(\'passportExpirationDate' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[1]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ <div class="form-group row mb-3">
+ <label th:for="passportPersonalNumber + ${iStat.index}" class="col-sm-2 col-form-label">JSHSHIR:</label>
+ <div class="col-sm-9">
+ <input type="text" class="form-control" th:name="passportPersonalNumber + ${iStat.index}" th:id="passportPersonalNumber + ${iStat.index}" th:value="|${passport.personalNumber}|" th:onclick="'copyToClipboard(\'passportPersonalNumber' + ${iStat.index} + '\')'" readonly>
+ </div>
+ <div class="col-sm-1 text-center my-auto" th:text="|(${passport.mrzLinesConfidence[1]}%)|" data-toggle="tooltip" data-placement="top" title="Ishonchlilik darajasi"></div>
+ </div>
+ </div>
+ <a th:href="@{|/api/passport/excel?filename=Dokumentlar.xlsx|}" th:download="|Dokumentlar.xlsx|" th:if="${passports}">
+ <button class="btn btn-lg btn-success mx-sm-3" type="submit">Excel</button>
+ </a>
+ <div class="col-lg-12 text-lg-start" th:each="ocr, iStat: ${ocrs}">
+ <textarea class="form-control mt-3 fs-4 p-4 p-md-5 border rounded-3 bg-body-tertiary" th:name="text + ${iStat.index}" th:id="text + ${iStat.index}" rows="10" th:text="|${ocr}|" readonly></textarea>
+ <button class="mt-2 w-20 btn btn-lg btn-secondary" th:onclick="'copyToClipboard(\'text' + ${iStat.index} + '\')'">Nusxa olish</button>
+ </div>
+ <div class="col-md-10 mx-auto col-lg-5 mt-5">
+ <form class="p-4 p-md-5 border rounded-3 bg-body-tertiary" action="/api/files" method="post" enctype="multipart/form-data">
+ <div class="form-floating mb-3">
+ <input type="file" class="form-control" id="files" name="files" multiple>
+ <label for="files">Fayllar</label>
+ </div>
+ <p>Tilni(-larni) tanlang:</p>
+ <div class="form-check form-check-inline mb-3">
+ <input class="form-check-input" type="checkbox" id="eng" name="eng" value="eng" checked>
+ <label class="form-check-label" for="eng">Ingliz</label>
+ </div>
+ <div class="form-check form-check-inline mb-3">
+ <input class="form-check-input" type="checkbox" id="rus" name="rus" value="rus" checked>
+ <label class="form-check-label" for="rus">Rus</label>
+ </div>
+ <div class="form-check form-check-inline mb-3">
+ <input class="form-check-input" type="checkbox" id="uzb" name="uzb" value="uzb" checked>
+ <label class="form-check-label" for="uzb">Uzbek</label>
+ </div>
+ <div class="form-check form-check-inline mb-3">
+ <input class="form-check-input" type="checkbox" id="uzb_cyrl" name="uzb_cyrl" value="uzb_cyrl" checked>
+ <label class="form-check-label" for="uzb_cyrl">Uzbek (kirilcha)</label>
+ </div>
+ <p>Dokumen turini tanlang:</p>
+ <div class="form-check form-check-inline mb-3">
+ <input class="form-check-input" type="radio" id="other" name="documentType" value="other" onclick="enableAllLanguages()" checked>
+ <label class="form-check-label" for="other">Boshqa</label>
+ </div>
+ <div class="form-check form-check-inline mb-3">
+ <input class="form-check-input" type="radio" id="passport" name="documentType" value="passport" onclick="disableAllLanguages()">
+ <label class="form-check-label" for="passport">Pasport</label>
+ </div>
+ <button class="w-100 btn btn-lg btn-primary" type="submit">Yuborish</button>
+ </form>
+ </div>
+ </div>
+ <script>
+ function copyToClipboard(id) {
+ var text = document.getElementById(id);
+
+ text.select();
+ text.setSelectionRange(0, 99999); // For mobile devices
+
+ navigator.clipboard.writeText(text.value);
+
+ alert("Nusxa olindi!");
+ }
+
+ function disableAllLanguages() {
+ document.getElementById("eng").disabled = true;
+ document.getElementById("rus").disabled = true;
+ document.getElementById("uzb").disabled = true;
+ document.getElementById("uzb_cyrl").disabled = true;
+ }
+
+ function enableAllLanguages() {
+ document.getElementById("eng").disabled = false;
+ document.getElementById("rus").disabled = false;
+ document.getElementById("uzb").disabled = false;
+ document.getElementById("uzb_cyrl").disabled = false;
+ }
+
+ if (document.getElementById('other').checked) {
+ document.getElementById("eng").disabled = false;
+ document.getElementById("rus").disabled = false;
+ document.getElementById("uzb").disabled = false;
+ document.getElementById("uzb_cyrl").disabled = false;
+ } else if (document.getElementById('passport').checked) {
+ document.getElementById("eng").disabled = true;
+ document.getElementById("rus").disabled = true;
+ document.getElementById("uzb").disabled = true;
+ document.getElementById("uzb_cyrl").disabled = true;
+ }
+ </script>
+</body>
+</html> \ No newline at end of file