Change to html5 (#958)

* Change to html5 with Nu Html Checker * Update scale-pages.html * Update sign.html * Update common.html * Update common.html * Update login.html
2024-03-21 21:58:01 +01:00
parent 77354f47bf
commit 67a1529dc7
87 changed files with 825 additions and 844 deletions
--- a/src/main/resources/templates/misc/add-image.html
+++ b/src/main/resources/templates/misc/add-image.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{addImage.title}, header=#{addImage.header})}"></th:block>
    <script src="js/thirdParty/interact.min.js"></script>
@@ -10,7 +10,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -66,42 +66,41 @@
              <div id="box-drag-container" class="show-on-file-selected">
                <canvas id="pdf-canvas"></canvas>
                <script src="js/draggable-utils.js"></script>
-                  <div class="draggable-buttons-box ignore-rtl">
-                    <button class="btn btn-outline-secondary" onclick="DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted())">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
-                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
-                      </svg>
-                    </button>
-                    <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('lang-direction')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()" style="margin-left:auto">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
-                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
-                      </svg>
-                    </button>
-                    <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('lang-direction')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
-                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
-                      </svg>
-                    </button>
-                  </div>
+                <div class="draggable-buttons-box ignore-rtl">
+                  <button class="btn btn-outline-secondary" onclick="DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted())">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                      <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
+                      <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
+                    </svg>
+                  </button>
+                  <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()" style="margin-left:auto">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+                      <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+                    </svg>
+                  </button>
+                  <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+                      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                    </svg>
+                  </button>
                </div>
-
-                <!-- download button -->
-                <div class="margin-auto-parent">
-                  <button id="download-pdf" class="btn btn-primary mb-2 show-on-file-selected margin-center">Download PDF</button>
-                </div>
-                <script>
-                  document.getElementById("download-pdf").addEventListener('click', async() => {
-                    const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
-                    const modifiedPdfBytes = await modifiedPdf.save();
-                    const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
-                    const link = document.createElement('a');
-                    link.href = URL.createObjectURL(blob);
-                    link.download = originalFileName + '_addedImage.pdf';
-                    link.click();
-                  });
-                </script>
              </div>
+
+              <!-- download button -->
+              <div class="margin-auto-parent">
+                <button id="download-pdf" class="btn btn-primary mb-2 show-on-file-selected margin-center">Download PDF</button>
+              </div>
+              <script>
+                document.getElementById("download-pdf").addEventListener('click', async() => {
+                  const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
+                  const modifiedPdfBytes = await modifiedPdf.save();
+                  const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
+                  const link = document.createElement('a');
+                  link.href = URL.createObjectURL(blob);
+                  link.download = originalFileName + '_addedImage.pdf';
+                  link.click();
+                });
+              </script>
            </div>
          </div>
        </div>
@@ -109,4 +108,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
+</html>
--- a/src/main/resources/templates/misc/add-page-numbers.html
+++ b/src/main/resources/templates/misc/add-page-numbers.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{addPageNumbers.title}, header=#{addPageNumbers.header})}"></th:block>
    <style>
      .a4container {
        position: relative;
        width: 50%;
-        aspect-ratio: 0.707;
+        aspect-ratio: 0.707/1;
        border: 1px solid #ddd;
        box-sizing: border-box;
        background-color: white;
@@ -52,7 +52,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -62,7 +62,7 @@
                <br>
                <div class="mb-3">
                  <label for="customMargin" th:text="#{addPageNumbers.selectText.2}"></label>
-                  <select class="form-control" id="customMargin" name="customMargin" required>
+                  <select class="form-control" id="customMargin" name="customMargin">
                    <option value="small" th:text="#{sizes.small}"></option>
                    <option value="medium" selected th:text="#{sizes.medium}"></option>
                    <option value="large" th:text="#{sizes.large}"></option>
@@ -70,7 +70,7 @@
                  </select>
                </div>
                <div class="mb-3">
-                  <label for="position" th:text="#{addPageNumbers.selectText.3}"></label>
+                  <label th:text="#{addPageNumbers.selectText.3}"></label>
                  <div class="a4container">
                    <div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
                    <div class="pageNumber" id="2" style="top: 10%; left: 50%;">2</div>
@@ -83,18 +83,18 @@
                    <div class="pageNumber" id="9" style="top: 90%; left: 90%;">9</div>
                  </div>
                </div>
-                <input type="hidden" id="numberInput" name="position" min="1" max="9" value="8" required />
+                <input type="hidden" id="numberInput" name="position" value="8">
                <div class="mb-3">
                  <label for="startingNumber" th:text="#{addPageNumbers.selectText.4}"></label>
-                  <input type="number" class="form-control" id="startingNumber" name="startingNumber" min="1" required value="1" />
+                  <input type="number" class="form-control" id="startingNumber" name="startingNumber" min="1" required value="1">
                </div>
                <div class="mb-3">
                  <label for="pagesToNumber" th:text="#{addPageNumbers.selectText.5}"></label>
-                  <input type="text" class="form-control" id="pagesToNumber" name="pagesToNumber" th:placeholder="#{addPageNumbers.numberPagesDesc}" />
+                  <input type="text" class="form-control" id="pagesToNumber" name="pagesToNumber" th:placeholder="#{addPageNumbers.numberPagesDesc}">
                </div>
                <div class="mb-3">
                  <label for="customText" th:text="#{addPageNumbers.selectText.6}"></label>
-                  <input type="text" class="form-control" id="customText" name="customText" th:placeholder="#{addPageNumbers.customNumberDesc}" />
+                  <input type="text" class="form-control" id="customText" name="customText" th:placeholder="#{addPageNumbers.customNumberDesc}">
                </div>
                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{addPageNumbers.submit}"></button>
              </form>
@@ -134,4 +134,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
+</html>
--- a/src/main/resources/templates/misc/adjust-contrast.html
+++ b/src/main/resources/templates/misc/adjust-contrast.html
@@ -1,49 +1,49 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{adjustContrast.title}, header=#{adjustContrast.header})}"></th:block>
+    <style>
+      #flex-container {
+        display: flex;
+        align-items: center;
+      }
+      #sliders-container {
+        padding: 0 20px;  /* Add some padding to separate sliders from canvas */
+      }
+    </style>
  </head>

  <body>
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-12">
              <div class="row justify-content-center">
                <div class="col-md-3">
-                    <div id="sliders-container" style="display:none;">
-                      <h4><span th:text="#{adjustContrast.contrast}"></span> <span id="contrast-val">100</span>%</h4>
-                      <input type="range" min="0" max="200" value="100" id="contrast-slider" />
+                  <div id="sliders-container" style="display:none;">
+                    <h4><span th:text="#{adjustContrast.contrast}"></span> <span id="contrast-val">100</span>%</h4>
+                    <input type="range" min="0" max="200" value="100" id="contrast-slider">

-                      <h4><span th:text="#{adjustContrast.brightness}"></span> <span id="brightness-val">100</span>%</h4>
-                      <input type="range" min="0" max="200" value="100" id="brightness-slider" />
+                    <h4><span th:text="#{adjustContrast.brightness}"></span> <span id="brightness-val">100</span>%</h4>
+                    <input type="range" min="0" max="200" value="100" id="brightness-slider">

-                      <h4><span th:text="#{adjustContrast.saturation}"></span> <span id="saturation-val">100</span>%</h4>
-                      <input type="range" min="0" max="200" value="100" id="saturation-slider" />
-                    </div>
+                    <h4><span th:text="#{adjustContrast.saturation}"></span> <span id="saturation-val">100</span>%</h4>
+                    <input type="range" min="0" max="200" value="100" id="saturation-slider">
+                  </div>
                </div>
                <div class="col-md-7">
                  <h2 th:text="#{adjustContrast.header}"></h2>
                  <div class="col-md-8">
                    <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                  </div>
-                  <br />
+                  <br>
                  <canvas id="contrast-pdf-canvas"></canvas>
                  <button id="download-button" class="btn btn-primary" th:text="#{adjustContrast.download}"></button>
                </div>
              </div>
-              <style>
-                #flex-container {
-                  display: flex;
-                  align-items: center;
-                }
-                #sliders-container {
-                  padding: 0 20px;  /* Add some padding to separate sliders from canvas */
-                }
-              </style>

              <script>
                var canvas = document.getElementById('contrast-pdf-canvas');
@@ -69,7 +69,6 @@
                    // Render the first page in the viewer
                    await renderPageAndAdjustImageProperties(1);
                    document.getElementById("sliders-container").style.display = "block";
-
                  };
                  fileReader.readAsArrayBuffer(file);
                }
@@ -130,7 +129,6 @@
                      newImageData.data[i+1] = rgb[1];
                      newImageData.data[i+2] = rgb[2];
                    }
-
                    context.putImageData(newImageData, 0, 0);
                  }
                }
@@ -256,7 +254,6 @@
                  if (pdf !== null) {
                    renderPageAndAdjustImageProperties(1);
                  }
-
                }

                // Event listeners
@@ -292,4 +289,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
+</html>
--- a/src/main/resources/templates/misc/auto-crop.html
+++ b/src/main/resources/templates/misc/auto-crop.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{autoCrop.title}, header=#{autoCrop.header})}"></th:block>
  </head>
@@ -9,7 +9,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
--- a/src/main/resources/templates/misc/auto-rename.html
+++ b/src/main/resources/templates/misc/auto-rename.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{auto-rename.title}, header=#{auto-rename.header})}"></th:block>
  </head>
@@ -9,7 +9,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -26,4 +26,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
+</html>
--- a/src/main/resources/templates/misc/change-metadata.html
+++ b/src/main/resources/templates/misc/change-metadata.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{changeMetadata.title}, header=#{changeMetadata.header})}"></th:block>
  </head>
@@ -8,7 +8,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -25,8 +25,8 @@
                  <label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
                </div>
                <div class="mb-3">
-                    <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label>
-                    <input type="text" class="form-control" id="author" name="author">
+                  <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label>
+                  <input type="text" class="form-control" id="author" name="author">
                </div>

                <div class="mb-3">
@@ -89,12 +89,12 @@

                  deleteAllCheckbox.addEventListener("change", function(event) {
                    inputs.forEach(input => {
-                        // If it's the deleteAllCheckbox or any file input, skip
-                        if (input === deleteAllCheckbox || input.type === "file") {
-                            return;
-                        }
-                        // Disable or enable based on the checkbox state
-                        input.disabled = deleteAllCheckbox.checked;
+                      // If it's the deleteAllCheckbox or any file input, skip
+                      if (input === deleteAllCheckbox || input.type === "file") {
+                        return;
+                      }
+                      // Disable or enable based on the checkbox state
+                      input.disabled = deleteAllCheckbox.checked;
                    });
                  });

@@ -224,4 +224,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
+</html>
--- a/src/main/resources/templates/misc/compare.html
+++ b/src/main/resources/templates/misc/compare.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{compare.title}, header=#{compare.header})}"></th:block>
    <style>
@@ -17,7 +17,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-9">
@@ -184,4 +184,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
+</html>
--- a/src/main/resources/templates/misc/compress-pdf.html
+++ b/src/main/resources/templates/misc/compress-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{compress.title}, header=#{compress.header})}"></th:block>
  </head>
@@ -9,7 +9,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -32,7 +32,7 @@
                  <div class="card-body">
                    <h4 th:text="#{compress.selectText.4}"></h4>
                    <label for="expectedOutputSize" th:text="#{compress.selectText.5}"></label>
-                    <input type="text" name="expectedOutputSize" id="expectedOutputSize" min="1" class="form-control">
+                    <input type="text" name="expectedOutputSize" id="expectedOutputSize" class="form-control">
                  </div>
                </div>
                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{compress.submit}"></button>
--- a/src/main/resources/templates/misc/extract-image-scans.html
+++ b/src/main/resources/templates/misc/extract-image-scans.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{home.ScannerImageSplit.title}, header=#{home.ScannerImageSplit.header})}"></th:block>
  </head>
@@ -9,7 +9,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
--- a/src/main/resources/templates/misc/extract-images.html
+++ b/src/main/resources/templates/misc/extract-images.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{extractImages.title}, header=#{extractImages.header})}"></th:block>
  </head>
@@ -9,7 +9,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
--- a/src/main/resources/templates/misc/flatten.html
+++ b/src/main/resources/templates/misc/flatten.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{flatten.title}, header=#{flatten.header})}"></th:block>
  </head>
@@ -8,7 +8,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -51,5 +51,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-
 </html>
--- a/src/main/resources/templates/misc/ocr-pdf.html
+++ b/src/main/resources/templates/misc/ocr-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{ocr.title}, header=#{ocr.header})}"></th:block>
    <script>
@@ -31,7 +31,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -40,14 +40,14 @@
                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                <div class="mb-3">
                  <label for="languages" class="form-label" th:text="#{ocr.selectText.1}"></label>
-                  <hr />
+                  <hr>
                  <div id="languages">
                    <div th:each="language, iterStat : ${languages}">
                      <input type="checkbox" th:name="languages" th:value="${language}" required th:id="${'language-' + language}" onchange="handleLangSelection()" />
                      <label class="form-check-label" th:for="${'language-' + language}" th:text="${language}"></label>
                    </div>
                  </div>
-                  <hr />
+                  <hr>
                </div>
                <div class="mb-3">
                  <label th:text="#{ocr.selectText.10}"></label>
@@ -246,4 +246,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
+</html>
--- a/src/main/resources/templates/misc/remove-annotations.html
+++ b/src/main/resources/templates/misc/remove-annotations.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{removeAnnotations.title}, header=#{removeAnnotations.header})}"></th:block>
  </head>
@@ -8,7 +8,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
--- a/src/main/resources/templates/misc/remove-blanks.html
+++ b/src/main/resources/templates/misc/remove-blanks.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{removeBlanks.title}, header=#{removeBlanks.header})}"></th:block>
  </head>
@@ -8,7 +8,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -34,5 +34,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
-
+</html>
--- a/src/main/resources/templates/misc/repair.html
+++ b/src/main/resources/templates/misc/repair.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{repair.title}, header=#{repair.header})}"></th:block>
  </head>
@@ -8,7 +8,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
--- a/src/main/resources/templates/misc/show-javascript.html
+++ b/src/main/resources/templates/misc/show-javascript.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{showJS.title}, header=#{showJS.header})}"></th:block>
-    <link href="css/prism.css" rel="stylesheet" />
+    <link href="css/prism.css" rel="stylesheet">
    <script src="js/thirdParty/prism.js"></script>
    <style>
      /* Add a max-height and make it scrollable */
@@ -17,7 +17,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-12">
--- a/src/main/resources/templates/misc/stamp.html
+++ b/src/main/resources/templates/misc/stamp.html
@@ -1,7 +1,17 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" th:language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{AddStampRequest.title}, header=#{AddStampRequest.header})}"></th:block>
+    <style>
+      .a4container {
+        position: relative;
+        width: 50%;
+        aspect-ratio: 0.707/1;
+        border: 1px solid #ddd;
+        box-sizing: border-box;
+        background-color: white;
+      }
+    </style>
  </head>

  <body>
@@ -9,7 +19,7 @@
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br /><br />
+        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-6">
@@ -33,7 +43,7 @@
                </div>

                <div class="mb-3">
-                  <label for="position" th:text="#{AddStampRequest.position}"></label>
+                  <label th:text="#{AddStampRequest.position}"></label>
                  <div class="a4container">
                    <div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
                    <div class="pageNumber" id="2" style="top: 10%; left: 50%;">2</div>
@@ -47,11 +57,11 @@
                  </div>
                </div>

-                <input type="hidden" id="numberInput" name="position" min="1" max="9" value="8" required />
+                <input type="hidden" id="numberInput" name="position" value="8">

                <div class="mb-3">
                  <label for="stampType" class="form-label" th:text="#{AddStampRequest.stampType}">Stamp Type</label>
-                  <select class="form-select" id="stampType" name="stampType" onchange="toggleFileOption()" required>
+                  <select class="form-select" id="stampType" name="stampType" onchange="toggleFileOption()">
                    <option value="text">Text</option>
                    <option value="image">Image</option>
                  </select>
@@ -70,11 +80,11 @@
                <div id="alphabetGroup" class="mb-3">
                  <label for="alphabet" class="form-label" th:text="#{AddStampRequest.alphabet}">Alphabet</label>
                  <select class="form-select" id="alphabet" name="alphabet">
-                      <option value="roman">Roman</option>
-                      <option value="arabic">العربية</option>
-                      <option value="japanese">日本語</option>
-                      <option value="korean">한국어</option>
-                      <option value="chinese">简体中文</option>
+                    <option value="roman">Roman</option>
+                    <option value="arabic">العربية</option>
+                    <option value="japanese">日本語</option>
+                    <option value="korean">한국어</option>
+                    <option value="chinese">简体中文</option>
                  </select>
                </div>

@@ -164,4 +174,4 @@
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
-</html>
+</html>