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