diff options
Diffstat (limited to 'src/main/resources/templates/index.html')
-rw-r--r-- | src/main/resources/templates/index.html | 172 |
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 |