From 01f7d5525c2e55bdb3df4457099a54b3a2fccfb7 Mon Sep 17 00:00:00 2001
From: DarioGii <dariogware@gmail.com>
Date: Sun, 8 Jun 2025 11:29:34 +0100
Subject: [PATCH] correcting files

---
 .../src/main/resources/templates/home.html    | 348 +++++++++---------
 .../resources/templates/misc/fake-scan.html   | 144 +++++++-
 2 files changed, 309 insertions(+), 183 deletions(-)
diff --git a/stirling-pdf/src/main/resources/templates/home.html b/stirling-pdf/src/main/resources/templates/home.html
index 658fbca7e..26597ecd7 100644
--- a/stirling-pdf/src/main/resources/templates/home.html
+++ b/stirling-pdf/src/main/resources/templates/home.html
@@ -1,243 +1,235 @@
 <!DOCTYPE html>
 <html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
-      xmlns:th="https://www.thymeleaf.org">
+  xmlns:th="https://www.thymeleaf.org">
 
 <head>
   <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
 </head>
 
 <body>
-<div id="page-container">
-  <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-  <div style="transform-origin: top;"
-       id="scale-wrap">
-    <br class="d-md-none">
-    <!-- Features -->
-    <script th:src="@{'/js/homecard.js'}"></script>
-    <div style="
+  <div id="page-container">  
+        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+    <div style="transform-origin: top;"
+    id="scale-wrap">
+      <br class="d-md-none">
+      <!-- Features -->
+      <script th:src="@{'/js/homecard.js'}"></script>
+      <div style="
       width: 100%;
       display: flex;
       flex-direction: column;"
-    >
-      <div>
-        <br>
-        <div style="justify-content: center; display: flex;">
-          <div style="margin:0 3rem">
-            <div>
-              <div
-                style="display:flex; flex-direction: column; justify-content: center; width:100%; margin-bottom:1rem">
-                <div style="width:fit-content; margin: 0 auto; padding: 0 3rem">
-                  <p class="lead fs-4"
-                     th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
-                  </p>
-                </div>
-                <div id="groupRecent" style="width: fit-content; margin: 0 auto">
-                  <div
-                    th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.recent})}">
+      >
+        <div>
+          <br>
+          <div style="justify-content: center; display: flex;">
+            <div style="margin:0 3rem">
+              <div>
+                <div
+                  style="display:flex; flex-direction: column; justify-content: center; width:100%; margin-bottom:1rem">
+                  <div style="width:fit-content; margin: 0 auto; padding: 0 3rem">
+                    <p class="lead fs-4"
+                      th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
+                    </p>
                   </div>
-                  <div class="recent-features">
-                    <div class="newfeature"
-                         th:insert="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/redact-manual.svg#icon-redact-manual', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
+                  <div id="groupRecent" style="width: fit-content; margin: 0 auto">
+                    <div
+                      th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.recent})}">
                     </div>
-                    <div class="newfeature"
-                         th:insert="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
-                    </div>
-                    <div class="newfeature"
-                         th:insert="~{fragments/navbarEntry :: navbarEntry('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPDFs.tags', 'advance')}">
+                    <div class="recent-features">
+                      <div class="newfeature"
+                        th:insert="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/redact-manual.svg#icon-redact-manual', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
+                      </div>
+                      <div class="newfeature"
+                        th:insert="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
+                      </div>
+                      <div class="newfeature"
+                        th:insert="~{fragments/navbarEntry :: navbarEntry('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPDFs.tags', 'advance')}">
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
-            </div>
-            <span class="material-symbols-rounded search-icon">
+              </div>
+              <span class="material-symbols-rounded search-icon">
                 search
               </span>
-            <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
+              <input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
 
-            <div style="display: flex; column-gap: 3rem; flex-wrap: wrap; margin-left:1rem">
-              <div
-                style="height:2.5rem;  display: flex; align-items: center; cursor: pointer; justify-content: center;">
-                <label for="sort-options" th:text="#{home.sortBy}">Sort by:</label>
-                <select id="sort-options" style="border:none;">
-                  <option value="alphabetical" th:text="#{home.alphabetical}"></option>
-                  <!-- <option value="personal">Your most used</option> -->
-                  <option value="global" th:text="#{home.globalPopularity}"></option>
-                  <!-- <option value="server">Popularity in organisation</option> -->
-                </select>
-              </div>
-              <div
-                style="display: flex; align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:2rem;  justify-content: center;">
-                <div th:title="#{home.setFavorites}" style="display: flex; align-items: center; cursor: pointer;"
-                     onclick="toggleFavoritesMode()">
+              <div style="display: flex; column-gap: 3rem; flex-wrap: wrap; margin-left:1rem">
+                <div
+                  style="height:2.5rem;  display: flex; align-items: center; cursor: pointer; justify-content: center;">
+                  <label for="sort-options" th:text="#{home.sortBy}">Sort by:</label>
+                  <select id="sort-options" style="border:none;">
+                    <option value="alphabetical" th:text="#{home.alphabetical}"> </option>
+                    <!-- <option value="personal">Your most used</option> -->
+                    <option value="global" th:text="#{home.globalPopularity}"></option>
+                    <!-- <option value="server">Popularity in organisation</option> -->
+                  </select>
+                </div>
+                <div
+                  style="display: flex; align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:2rem;  justify-content: center;">
+                  <div th:title="#{home.setFavorites}" style="display: flex; align-items: center; cursor: pointer;"
+                    onclick="toggleFavoritesMode()">
                     <span class="material-symbols-rounded toggle-favourites"
-                          style="font-size: 2rem;  margin-left: 0.2rem;">
+                      style="font-size: 2rem;  margin-left: 0.2rem;">
                       star
                     </span>
-                </div>
-                <div onclick="toggleFavoritesView()" th:title="#{home.hideFavorites}" id="favouritesVisibility"
-                     style="display: flex; align-items: center; cursor: pointer;">
+                  </div>
+                  <div onclick="toggleFavoritesView()" th:title="#{home.hideFavorites}" id="favouritesVisibility"
+                    style="display: flex; align-items: center; cursor: pointer;">
                     <span id="toggle-favourites-icon" class="material-symbols-rounded toggle-favourites"
-                          style="font-size: 2rem;  margin-left: 0.2rem;">
+                      style="font-size: 2rem;  margin-left: 0.2rem;">
                       visibility
                     </span>
-                </div>
-                <a th:if="${@shouldShow}" href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
-                   target="_blank" id="update-link" rel="noopener" th:title="#{settings.update}"
-                   style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
+                  </div>
+                  <a th:if="${@shouldShow}" href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
+                    target="_blank" id="update-link" rel="noopener" th:title="#{settings.update}"
+                    style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
                     <span class="material-symbols-rounded toggle-favourites"
-                          style="font-size: 2rem; margin-left: 0.2rem;">
+                      style="font-size: 2rem; margin-left: 0.2rem;">
                       update
                     </span>
-                </a>
-              </div>
+                  </a>
+                </div>
 
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div>
-      </div>
-      <div class="features-container" style="  border-top: 1px;
+        <div>
+        </div>
+        <div class="features-container" style="  border-top: 1px;
         border-top-style: solid;
         border-color: var(--md-nav-color-on-seperator);
         margin-top: 1rem;
       ">
-        <div class="feature-rows">
-          <div id="groupFavorites" class="feature-group">
-            <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
-            </div>
-            <div class="nav-group-container">
+          <div class="feature-rows">
+            <div id="groupFavorites" class="feature-group">
+              <div th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
+              </div>
+              <div class="nav-group-container">
+              </div>
             </div>
+            <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
           </div>
-          <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
+
         </div>
+            <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
 
       </div>
-      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
-
     </div>
   </div>
-</div>
 
 
-<!-- Survey Modal -->
-<div class="modal fade" id="surveyModal" tabindex="-1" role="dialog" aria-labelledby="surveyModalLabel"
-     aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="surveyModalLabel" th:text="#{survey.title}">Stirling-PDF Survey</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <p th:text="#{survey.meeting.1}">If you're using Stirling PDF at work, we'd love to speak to you. We're offering free
-          technical support in exchange for a 15 minute user discovery session.</p>
-        <p th:text="#{survey.meeting.2}">This is a chance to:</p>
-        <p><span>🛠️</span><span th:text="#{survey.meeting.3}">Get help with deployment, integrations, or troubleshooting</span>
-        </p>
-        <p><span>📢</span><span th:text="#{survey.meeting.4}">Provide direct feedback on performance, edge cases, and feature gaps</span>
-        </p>
-        <p><span>🔍</span><span th:text="#{survey.meeting.5}">Help us refine Stirling PDF for real-world enterprise use</span>
-        </p>
-        <p th:text="#{survey.meeting.6}">If you're interested, you can book time with our team directly.</p>
-        <p th:text="#{survey.meeting.7}">Looking forward to digging into your use cases and making Stirling PDF even
-          better!</p>
-        <a href="https://calendly.com/d/crsr-tz6-487" target="_blank" class="btn btn-primary" id="takeSurvey2"
-           th:text="#{survey.meeting.button}">Book meeting</a>
-        </br>
-        </br>
-        <p th:text="#{survey.meeting.notInterested}">Not a business and/or interested in a meeting?</p>
-
-        <p th:text="#{survey.please}">Please consider taking our survey!</p>
-        <a href="https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu" target="_blank" class="btn btn-primary"
-           id="takeSurvey" th:text="#{survey.button}">Take Survey</a>
-      </div>
-      <div class="modal-footer">
-        <div class="form-check mb-3">
-          <input type="checkbox" id="dontShowAgain">
-          <label for="dontShowAgain" th:text="#{survey.dontShowAgain}">Don't show again</label>
+  <!-- Survey Modal -->
+  <div class="modal fade" id="surveyModal" tabindex="-1" role="dialog" aria-labelledby="surveyModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="surveyModalLabel" th:text="#{survey.title}">Stirling-PDF Survey</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
+        <div class="modal-body">
+		<p th:text="#{survey.meeting.1}">If you're using Stirling PDF at work, we'd love to speak to you. We're offering free technical support in exchange for a 15 minute user discovery session.</p>
+		<p th:text="#{survey.meeting.2}">This is a chance to:</p>
+		<p><span>🛠️</span><span th:text="#{survey.meeting.3}">Get help with deployment, integrations, or troubleshooting</span></p>
+		<p><span>📢</span><span th:text="#{survey.meeting.4}">Provide direct feedback on performance, edge cases, and feature gaps</span></p>
+		<p><span>🔍</span><span th:text="#{survey.meeting.5}">Help us refine Stirling PDF for real-world enterprise use</span></p>
+		<p th:text="#{survey.meeting.6}">If you're interested, you can book time with our team directly.</p>
+		<p th:text="#{survey.meeting.7}">Looking forward to digging into your use cases and making Stirling PDF even better!</p>
+		<a href="https://calendly.com/d/crsr-tz6-487" target="_blank" class="btn btn-primary" id="takeSurvey2" th:text="#{survey.meeting.button}">Book meeting</a>
+		</br>
+		</br>
+		 <p th:text="#{survey.meeting.notInterested}">Not a business and/or interested in a meeting?</p>
+ 
+          <p th:text="#{survey.please}">Please consider taking our survey!</p>
+          <a href="https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu" target="_blank" class="btn btn-primary"
+            id="takeSurvey" th:text="#{survey.button}">Take Survey</a>
+        </div>
+        <div class="modal-footer">
+          <div class="form-check mb-3">
+            <input type="checkbox" id="dontShowAgain">
+            <label for="dontShowAgain" th:text="#{survey.dontShowAgain}">Don't show again</label>
+          </div>
 
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}">Close</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}">Close</button>
 
+        </div>
       </div>
     </div>
   </div>
-</div>
 
 
-<!-- Analytics Modal -->
-<div class="modal fade" id="analyticsModal" tabindex="-1" role="dialog" aria-labelledby="analyticsModalLabel"
-     aria-hidden="true" th:if="${@analyticsPrompt}">
-  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do you want make Stirling PDF
-          better?</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <p th:text="#{analytics.paragraph1}">Stirling PDF has opt in analytics to help us improve the product. We do
-          not track any personal information or file contents.</p>
-        <p th:text="#{analytics.paragraph2}">Please consider enabling analytics to help Stirling-PDF grow and to allow
-          us to understand our users better.</p>
-        <p th:text="#{analytics.settings}">You can change the settings for analytics in the config/settings.yml file
-        </p>
-      </div>
-      <div class="modal-footer justify-content-between">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="setAnalytics(false)"
-                th:text="#{analytics.disable}">Disable analytics
-        </button>
-        <button type="button" class="btn btn-primary" th:text="#{analytics.enable}"
-                onclick="setAnalytics(true)">Enable analytics
-        </button>
+  <!-- Analytics Modal -->
+  <div class="modal fade" id="analyticsModal" tabindex="-1" role="dialog" aria-labelledby="analyticsModalLabel"
+    aria-hidden="true" th:if="${@analyticsPrompt}">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do you want make Stirling PDF
+            better?</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p th:text="#{analytics.paragraph1}">Stirling PDF has opt in analytics to help us improve the product. We do
+            not track any personal information or file contents.</p>
+          <p th:text="#{analytics.paragraph2}">Please consider enabling analytics to help Stirling-PDF grow and to allow
+            us to understand our users better.</p>
+          <p th:text="#{analytics.settings}">You can change the settings for analytics in the config/settings.yml file
+          </p>
+        </div>
+        <div class="modal-footer justify-content-between">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="setAnalytics(false)"
+            th:text="#{analytics.disable}">Disable analytics</button>
+          <button type="button" class="btn btn-primary" th:text="#{analytics.enable}"
+            onclick="setAnalytics(true)">Enable analytics</button>
+        </div>
       </div>
     </div>
   </div>
-</div>
 
 
-<style>
-  .favorite-icon {
-    cursor: pointer;
-    width: 0rem;
-    font-size: 2rem;
-  }
+  <style>
+    .favorite-icon {
+      cursor: pointer;
+      width: 0rem;
+      font-size: 2rem;
+    }
 
-  .toggle-favourites {
-    cursor: pointer;
-  }
+    .toggle-favourites {
+      cursor: pointer;
+    }
 
-  .toggle-favourites.active {
-    color: gold;
-  }
-</style>
-<script th:src="@{'/js/fetch-utils.js'}"></script>
-<script th:inline="javascript">
-  /*<![CDATA[*/
-  window.analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
-  /*]]>*/
-
-  window.showSurvey = /*[[${showSurveyFromDocker}]]*/ true
-</script>
-<script th:src="@{'/js/pages/home.js'}" th:inline="javascript"></script>
-<script>
-  function applyScale() {
-    const baseWidth = 1440;
-    const baseHeight = 1000;
-    const scaleX = window.innerWidth / baseWidth;
-    const scaleY = window.innerHeight / baseHeight;
-    const scale = Math.max(0.9, Math.min(scaleX, scaleY)); // keep aspect ratio, honor minScale
-    const ui = document.getElementById('scale-wrap');
-    ui.style.transform = `scale(${scale*0.75})`;
-  }
-
-  window.addEventListener('resize', applyScale);
-  window.addEventListener('load', applyScale);
-</script>
+    .toggle-favourites.active {
+      color: gold;
+    }
+  </style>
+  <script th:src="@{'/js/fetch-utils.js'}"></script>
+  <script th:inline="javascript">
+    /*<![CDATA[*/
+    window.analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
+    /*]]>*/
 
+    window.showSurvey = /*[[${showSurveyFromDocker}]]*/ true
+  </script>
+  <script th:src="@{'/js/pages/home.js'}" th:inline="javascript"></script>
+  <script>
+    function applyScale() {
+      const baseWidth = 1440;
+      const baseHeight = 1000;
+      const scaleX = window.innerWidth / baseWidth;
+      const scaleY = window.innerHeight / baseHeight;
+      const scale = Math.max(0.9, Math.min(scaleX, scaleY)); // keep aspect ratio, honor minScale
+      const ui = document.getElementById('scale-wrap');
+      ui.style.transform = `scale(${scale*0.75})`;
+    }
+  
+    window.addEventListener('resize', applyScale);
+    window.addEventListener('load', applyScale);
+  </script>
+  
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/stirling-pdf/src/main/resources/templates/misc/fake-scan.html b/stirling-pdf/src/main/resources/templates/misc/fake-scan.html
index 08821f285..dc625084c 100644
--- a/stirling-pdf/src/main/resources/templates/misc/fake-scan.html
+++ b/stirling-pdf/src/main/resources/templates/misc/fake-scan.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
   <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{fakeScan.title}, header=#{fakeScan.header})}"></th:block>
+    <th:block th:insert="~{fragments/common :: head(title=#{fakeScan.title}, header=#{fakeScan.header})}"></th:block>
   </head>
 
   <body>
@@ -12,12 +12,85 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{fakeScan.header}"></h2>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/misc/fake-scan'}">
+            <div class="col-md-6 bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">scanner</span>
+                <span class="tool-header-text" th:text="#{fakeScan.title}"></span>
+              </div>
+
+              <form method="post" enctype="multipart/form-data" id="uploadForm" th:action="@{'/api/v1/misc/fake-scan'}">
+                <input type="hidden" name="advancedEnabled" id="advancedEnabled" value="false">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
                 <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fakeScan.submit}"></button>
+                <div class="mb-3">
+                  <label for="quality" class="form-label" th:text="#{fakeScan.quality}"></label>
+                  <select class="form-select" id="quality" name="quality">
+                    <option value="low" th:text="#{fakeScan.quality.low}"></option>
+                    <option value="medium" th:text="#{fakeScan.quality.medium}"></option>
+                    <option value="high" th:text="#{fakeScan.quality.high}" selected></option>
+                  </select>
+                </div>
+                <div class="mb-3">
+                  <label for="rotation" class="form-label" th:text="#{fakeScan.rotation}"></label>
+                  <select class="form-select" id="rotation" name="rotation">
+                    <option value="none" th:text="#{fakeScan.rotation.none}"></option>
+                    <option value="slight" th:text="#{fakeScan.rotation.slight}" selected></option>
+                    <option value="moderate" th:text="#{fakeScan.rotation.moderate}"></option>
+                    <option value="severe" th:text="#{fakeScan.rotation.severe}"></option>
+                  </select>
+                </div>
+                <div class="form-check mb-3">
+                  <input class="form-check-input" type="checkbox" id="advancedSettingsToggle">
+                  <label class="form-check-label" for="advancedSettingsToggle" th:text="#{fakeScan.advancedSettings}"></label>
+                </div>
+                <div id="advancedSettings" style="display:none; border:1px solid #eee; padding:1em; border-radius:8px; margin-bottom:1em;">
+                  <div class="mb-3">
+                    <label for="colorspace" class="form-label" th:text="#{fakeScan.colorspace}"></label>
+                    <select class="form-select" id="colorspace" name="colorspace">
+                      <option value="grayscale" th:text="#{fakeScan.colorspace.grayscale}" selected></option>
+                      <option value="color" th:text="#{fakeScan.colorspace.color}"></option>
+                    </select>
+                  </div>
+                  <div class="mb-3">
+                    <label for="border" class="form-label" th:text="#{fakeScan.border}"></label>
+                    <input type="number" class="form-control" id="border" name="border" min="0" max="100" value="20">
+                  </div>
+                  <div class="mb-3">
+                    <label for="rotate" class="form-label" th:text="#{fakeScan.rotate}"></label>
+                    <input type="number" class="form-control" id="rotate" name="rotate" min="-15" max="15" value="0">
+                  </div>
+                  <div class="mb-3">
+                    <label for="rotateVariance" class="form-label" th:text="#{fakeScan.rotateVariance}"></label>
+                    <input type="number" class="form-control" id="rotateVariance" name="rotateVariance" min="0" max="10" value="2">
+                  </div>
+                  <div class="mb-3">
+                    <label for="brightness" class="form-label" th:text="#{fakeScan.brightness}"></label>
+                    <input type="range" class="form-range" id="brightness" name="brightness" min="0.5" max="1.5" step="0.01" value="1.0">
+                  </div>
+                  <div class="mb-3">
+                    <label for="contrast" class="form-label" th:text="#{fakeScan.contrast}"></label>
+                    <input type="range" class="form-range" id="contrast" name="contrast" min="0.5" max="1.5" step="0.01" value="1.0">
+                  </div>
+                  <div class="mb-3">
+                    <label for="blur" class="form-label" th:text="#{fakeScan.blur}"></label>
+                    <input type="range" class="form-range" id="blur" name="blur" min="0" max="5" step="0.1" value="1.0">
+                  </div>
+                  <div class="mb-3">
+                    <label for="noise" class="form-label" th:text="#{fakeScan.noise}"></label>
+                    <input type="range" class="form-range" id="noise" name="noise" min="0" max="20" step="0.1" value="8.0">
+                  </div>
+                  <div class="form-check mb-3">
+                    <input class="form-check-input" type="checkbox" id="yellowish" name="yellowish">
+                    <label class="form-check-label" for="yellowish" th:text="#{fakeScan.yellowish}"></label>
+                  </div>
+                  <div class="mb-3">
+                    <label for="resolution" class="form-label" th:text="#{fakeScan.resolution}"></label>
+                    <input type="number" class="form-control" id="resolution" name="resolution" min="72" max="600" value="300">
+                  </div>
+                </div>
+                <div class="mb-3 text-left">
+                  <button type="submit" class="btn btn-primary" th:text="#{fakeScan.submit}" id="submitBtn"></button>
+                </div>
               </form>
             </div>
           </div>
@@ -25,5 +98,66 @@
       </div>
       <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
+    <script th:src="@{'/js/fetch-utils.js'}"></script>
+    <script th:inline="javascript">
+      // Show/hide advanced settings
+      document.getElementById('advancedSettingsToggle').addEventListener('change', function() {
+        document.getElementById('advancedSettings').style.display = this.checked ? 'block' : 'none';
+      });
+
+      // Form submission handling
+      const form = document.getElementById('uploadForm');
+      if (form) {
+        form.addEventListener('submit', function(e) {
+          // If advanced settings are not enabled, remove advanced fields
+          if (!document.getElementById('advancedSettingsToggle').checked) {
+            const formData = new FormData(form);
+            formData.delete('colorspace');
+            formData.delete('border');
+            formData.delete('rotate');
+            formData.delete('rotateVariance');
+            formData.delete('brightness');
+            formData.delete('contrast');
+            formData.delete('blur');
+            formData.delete('noise');
+            formData.delete('yellowish');
+            formData.delete('resolution');
+          }
+        });
+      }
+
+      // Initialize advanced settings state
+      const advancedSettingsToggle = document.getElementById('advancedSettingsToggle');
+      const advancedSettings = document.getElementById('advancedSettings');
+      if (advancedSettingsToggle && advancedSettings) {
+        // Helper: enable/disable all fields in advanced settings
+        function setAdvancedFieldsEnabled(enabled) {
+          const fields = advancedSettings.querySelectorAll('input, select');
+          fields.forEach(field => {
+            field.disabled = !enabled;
+            // If enabling and value is empty, set to default
+            if (enabled && (field.value === '' || field.value == null)) {
+              if (field.type === 'number' || field.type === 'range') {
+                field.value = field.defaultValue;
+              } else if (field.type === 'checkbox') {
+                field.checked = field.defaultChecked;
+              } else if (field.tagName === 'SELECT') {
+                field.value = field.querySelector('option[selected]')?.value || field.options[0].value;
+              }
+            }
+          });
+        }
+        // Set initial state
+        setAdvancedFieldsEnabled(advancedSettingsToggle.checked);
+        advancedSettings.style.display = advancedSettingsToggle.checked ? 'block' : 'none';
+        document.getElementById('advancedEnabled').value = advancedSettingsToggle.checked ? 'true' : 'false';
+        // Add change listener
+        advancedSettingsToggle.addEventListener('change', function() {
+          advancedSettings.style.display = this.checked ? 'block' : 'none';
+          setAdvancedFieldsEnabled(this.checked);
+          document.getElementById('advancedEnabled').value = this.checked ? 'true' : 'false';
+        });
+      }
+    </script>
   </body>
 </html>
\ No newline at end of file
