Update: updated all pages to new theme system

src/main/resources/templates/misc/add-image.html

@@ -13,8 +13,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{addImage.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">add_photo_alternate</span>
+                <span class="tool-header-text" th:text="#{addImage.header}"></span>
+              </div>
 
               <!-- pdf selector -->
               <div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multiple=false, accept='application/pdf')}"></div>

src/main/resources/templates/misc/add-page-numbers.html

@@ -55,8 +55,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{addPageNumbers.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">123</span>
+                <span class="tool-header-text" th:text="#{addPageNumbers.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/add-page-numbers}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>

src/main/resources/templates/misc/adjust-contrast.html

@@ -20,7 +20,7 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-12">
+            <div class="col-md-12" id="bg-card">
               <div class="row justify-content-center">
                 <div class="col-md-3">
                   <div id="sliders-container" style="display:none;">
@@ -35,7 +35,10 @@
                   </div>
                 </div>
                 <div class="col-md-7">
-                  <h2 th:text="#{adjustContrast.header}"></h2>
+                  <div class="tool-header">
+                    <span class="material-symbols-rounded tool-header-icon advance">palette</span>
+                    <span class="tool-header-text" th:text="#{adjustContrast.header}"></span>
+                  </div>
                   <div class="col-md-8">
                     <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                   </div>

src/main/resources/templates/misc/auto-crop.html

@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{autoCrop.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">crop</span>
+                <span class="tool-header-text" th:text="#{autoCrop.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-crop}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>

src/main/resources/templates/misc/auto-rename.html

@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{auto-rename.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">text_fields_alt</span>
+                <span class="tool-header-text" th:text="#{auto-rename.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/auto-rename}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>

src/main/resources/templates/misc/change-metadata.html

@@ -11,18 +11,21 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{changeMetadata.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">assignment</span>
+                <span class="tool-header-text" th:text="#{changeMetadata.header}"></span>
+              </div>
               <form method="post" id="form1" enctype="multipart/form-data" th:action="@{api/v1/misc/update-metadata}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <p class="text-muted" th:text="#{changeMetadata.selectText.1}"></p>
-                <div class="mb-3-inline form-check">
-                  <input type="checkbox" class="form-check-input" id="deleteAll" name="deleteAll">
-                  <label class="ms-3" for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
+                <div class="form-check mb-3-inline ms-3">
+                  <input type="checkbox" id="deleteAll" name="deleteAll">
+                  <label for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
                 </div>
-                <div class="mb-3-inline form-check">
-                  <input type="checkbox" class="form-check-input" id="customModeCheckbox">
-                  <label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
+                <div class="form-check mb-3-inline ms-3">
+                  <input type="checkbox" id="customModeCheckbox">
+                  <label 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>

src/main/resources/templates/misc/compare.html

@@ -20,8 +20,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-9">
-              <h2 th:text="#{compare.header}"></h2>
+            <div class="col-md-9" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">compare</span>
+                <span class="tool-header-text" th:text="#{compare.header}"></span>
+              </div>
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
               <div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
               <button class="btn btn-primary"  onclick="comparePDFs()" th:text="#{compare.submit}"></button>

src/main/resources/templates/misc/compress-pdf.html

@@ -1,47 +1,55 @@
 <!DOCTYPE html>
-<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>
+<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
+  xmlns:th="http://www.thymeleaf.org">
 
-  <body>
-    <th:block th:insert="~{fragments/common :: game}"></th:block>
-    <div id="page-container">
-      <div id="content-wrap">
-        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-        <br><br>
-        <div class="container">
-          <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{compress.header}"></h2>
-              <form action="#" th:action="@{api/v1/misc/compress-pdf}" method="post" enctype="multipart/form-data">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
-                <div class="card mb-3">
-                  <div class="card-body">
-                    <h4 th:text="#{compress.selectText.1}"></h4>
-                    <label for="optimizeLevel" th:text="#{compress.selectText.2}"></label>
-                    <select name="optimizeLevel" id="optimizeLevel" class="form-control">
-                      <option value="1">1</option>
-                      <option value="2" selected>2</option>
-                      <option value="3">3</option>
-                      <option value="4" th:text="#{compress.selectText.3}"></option>
-                    </select>
-                  </div>
-                </div>
-                <div class="card mb-3">
-                  <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" class="form-control">
-                  </div>
-                </div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{compress.submit}"></button>
-              </form>
+<head>
+  <th:block th:insert="~{fragments/common :: head(title=#{compress.title}, header=#{compress.header})}"></th:block>
+</head>
+
+<body>
+  <th:block th:insert="~{fragments/common :: game}"></th:block>
+  <div id="page-container">
+    <div id="content-wrap">
+      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+      <br><br>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6" id="bg-card">
+            <div class="tool-header">
+              <span class="material-symbols-rounded tool-header-icon advance">zoom_in_map</span>
+              <span class="tool-header-text" th:text="#{compress.header}"></span>
             </div>
+            <form action="#" th:action="@{api/v1/misc/compress-pdf}" method="post" enctype="multipart/form-data">
+              <div
+                th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
+              </div>
+              <div class="card mb-3">
+                <div class="card-body">
+                  <h4 th:text="#{compress.selectText.1}"></h4>
+                  <label for="optimizeLevel" th:text="#{compress.selectText.2}"></label>
+                  <select name="optimizeLevel" id="optimizeLevel" class="form-control">
+                    <option value="1">1</option>
+                    <option value="2" selected>2</option>
+                    <option value="3">3</option>
+                    <option value="4" th:text="#{compress.selectText.3}"></option>
+                  </select>
+                </div>
+              </div>
+              <div class="card mb-3">
+                <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" class="form-control">
+                </div>
+              </div>
+              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{compress.submit}"></button>
+            </form>
           </div>
         </div>
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-  </body>
+    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+  </div>
+</body>
+
 </html>

src/main/resources/templates/misc/extract-image-scans.html

@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{home.ScannerImageSplit.title}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">scanner</span>
+                <span class="tool-header-text" th:text="#{home.ScannerImageSplit.title}"></span>
+              </div>
 
               <form id="multiPdfForm" th:action="@{api/v1/misc/extract-image-scans}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='image/*, application/pdf')}"></div>

src/main/resources/templates/misc/extract-images.html

@@ -12,8 +12,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{extractImages.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">photo_library</span>
+                <span class="tool-header-text" th:text="#{extractImages.header}"></span>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/extract-images}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">

src/main/resources/templates/misc/flatten.html

@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{flatten.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">layers_clear</span>
+                <span class="tool-header-text" th:text="#{flatten.header}"></span>
+              </div>
               <form id="pdfForm" class="mb-3">
                 <div class="custom-file">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>

src/main/resources/templates/misc/ocr-pdf.html

@@ -34,17 +34,20 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{ocr.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">quick_reference_all</span>
+                <span class="tool-header-text" th:text="#{ocr.header}"></span>
+              </div>
               <form th:if="${#lists.size(languages) > 0}" action="#" th:action="@{api/v1/misc/ocr-pdf}" method="post" enctype="multipart/form-data" class="mb-3">
                 <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>
                   <div id="languages">
-                    <div th:each="language, iterStat : ${languages}">
+                    <div class="form-check" 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>
+                      <label th:for="${'language-' + language}" th:text="${language}"></label>
                     </div>
                   </div>
                   <hr>
@@ -59,25 +62,25 @@
                 </div>
                 <br>
                 <label for="languages" class="form-label" th:text="#{ocr.selectText.9}"></label>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="sidecar" id="sidecar" />
-                  <label class="form-check-label" for="sidecar" th:text="#{ocr.selectText.2}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="sidecar" id="sidecar" />
+                  <label for="sidecar" th:text="#{ocr.selectText.2}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="deskew" id="deskew" />
-                  <label class="form-check-label" for="deskew" th:text="#{ocr.selectText.3}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="deskew" id="deskew" />
+                  <label for="deskew" th:text="#{ocr.selectText.3}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="clean" id="clean" />
-                  <label class="form-check-label" for="clean" th:text="#{ocr.selectText.4}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="clean" id="clean" />
+                  <label for="clean" th:text="#{ocr.selectText.4}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="clean-final" id="clean-final" />
-                  <label class="form-check-label" for="clean-final" th:text="#{ocr.selectText.5}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="clean-final" id="clean-final" />
+                  <label for="clean-final" th:text="#{ocr.selectText.5}"></label>
                 </div>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" name="removeImagesAfter" id="removeImagesAfter" />
-                  <label class="form-check-label" for="removeImagesAfter" th:text="#{ocr.selectText.11}"></label>
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="removeImagesAfter" id="removeImagesAfter" />
+                  <label for="removeImagesAfter" th:text="#{ocr.selectText.11}"></label>
                 </div>
                 <div class="mb-3">
                   <label th:text="#{ocr.selectText.12}"></label>

src/main/resources/templates/misc/remove-annotations.html

@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{removeAnnotations.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">thread_unread</span>
+                <span class="tool-header-text" th:text="#{removeAnnotations.header}"></span>
+              </div>
               <form id="pdfForm" class="mb-3">
                 <div class="custom-file">
                   <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>

src/main/resources/templates/misc/remove-blanks.html

@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{removeBlanks.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon other">scan_delete</span>
+                <span class="tool-header-text" th:text="#{removeBlanks.header}"></span>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/remove-blanks}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <div class="mb-3">

src/main/resources/templates/misc/repair.html

@@ -11,8 +11,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{repair.header}"></h2>
+            <div class="col-md-6" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">build</span>
+                <span class="tool-header-text" th:text="#{repair.header}"></span>
+              </div>
               <form id="multiPdfForm" th:action="@{api/v1/misc/repair}" method="post" enctype="multipart/form-data">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{repair.submit}"></button>

src/main/resources/templates/misc/show-javascript.html

@@ -20,8 +20,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-12">
-              <h2 th:text="#{showJS.header}"></h2>
+            <div class="col-md-12" id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">javascript</span>
+                <span class="tool-header-text" th:text="#{showJS.header}"></span>
+              </div>
               <form id="pdfInfoForm" method="post" enctype="multipart/form-data" th:action="@{show-javascript}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, remoteCall='false', accept='application/pdf')}"></div>
                 <br>

src/main/resources/templates/misc/stamp.html

@@ -22,8 +22,11 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{AddStampRequest.header}"></h2>
+            <div class="col-md-6"  id="bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon security">approval</span>
+                <span class="tool-header-text" th:text="#{AddStampRequest.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{api/v1/misc/add-stamp}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                 <br>