This commit is contained in:
Anthony Stirling 2023-08-20 21:57:19 +01:00
parent e88a780efe
commit 7c26c56210
45 changed files with 297 additions and 214 deletions

View file

@ -14,7 +14,7 @@
.features-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
gap: 25px 30px;
}

View file

@ -13,12 +13,12 @@ const DraggableUtils = {
listeners: {
move: (event) => {
const target = event.target;
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
const x = (parseFloat(target.getAttribute('data-bs-x')) || 0) + event.dx;
const y = (parseFloat(target.getAttribute('data-bs-y')) || 0) + event.dy;
target.style.transform = `translate(${x}px, ${y}px)`;
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.setAttribute('data-bs-x', x);
target.setAttribute('data-bs-y', y);
this.onInteraction(target);
},
@ -29,8 +29,8 @@ const DraggableUtils = {
listeners: {
move: (event) => {
var target = event.target
var x = (parseFloat(target.getAttribute('data-x')) || 0)
var y = (parseFloat(target.getAttribute('data-y')) || 0)
var x = (parseFloat(target.getAttribute('data-bs-x')) || 0)
var y = (parseFloat(target.getAttribute('data-bs-y')) || 0)
// check if control key is pressed
if (event.ctrlKey) {
@ -58,8 +58,8 @@ const DraggableUtils = {
target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
target.setAttribute('data-bs-x', x)
target.setAttribute('data-bs-y', y)
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
this.onInteraction(target);
@ -86,8 +86,8 @@ const DraggableUtils = {
const x = 0;
const y = 20;
createdCanvas.style.transform = `translate(${x}px, ${y}px)`;
createdCanvas.setAttribute('data-x', x);
createdCanvas.setAttribute('data-y', y);
createdCanvas.setAttribute('data-bs-x', x);
createdCanvas.setAttribute('data-bs-y', y);
createdCanvas.onclick = e => this.onInteraction(e.target);

View file

@ -3,9 +3,9 @@ document.addEventListener('DOMContentLoaded', function() {
});
function setupFileInput(chooser) {
const elementId = chooser.getAttribute('data-element-id');
const filesSelected = chooser.getAttribute('data-files-selected');
const pdfPrompt = chooser.getAttribute('data-pdf-prompt');
const elementId = chooser.getAttribute('data-bs-element-id');
const filesSelected = chooser.getAttribute('data-bs-files-selected');
const pdfPrompt = chooser.getAttribute('data-bs-pdf-prompt');
let allFiles = [];
let overlay;

View file

@ -10,7 +10,7 @@ function filterCards() {
// Get the navbar tags associated with the card
var navbarItem = document.querySelector(`a.dropdown-item[href="${card.id}"]`);
var navbarTags = navbarItem ? navbarItem.getAttribute('data-tags') : '';
var navbarTags = navbarItem ? navbarItem.getAttribute('data-bs-tags') : '';
var content = title + ' ' + text + ' ' + navbarTags;

View file

@ -14,33 +14,40 @@ document.addEventListener('DOMContentLoaded', function() {
});
function handleDropdownItemClick(event) {
event.preventDefault();
const languageCode = this.dataset.languageCode;
localStorage.setItem('languageCode', languageCode);
event.preventDefault();
const languageCode = event.currentTarget.dataset.bsLanguageCode; // change this to event.currentTarget
if (languageCode) {
localStorage.setItem('languageCode', languageCode);
const currentUrl = window.location.href;
if (currentUrl.indexOf('?lang=') === -1) {
window.location.href = currentUrl + '?lang=' + languageCode;
} else {
window.location.href = currentUrl.replace(/\?lang=\w{2,}/, '?lang=' + languageCode);
}
const currentUrl = window.location.href;
if (currentUrl.indexOf('?lang=') === -1) {
window.location.href = currentUrl + '?lang=' + languageCode;
} else {
window.location.href = currentUrl.replace(/\?lang=\w{2,}/, '?lang=' + languageCode);
}
} else {
console.error("Language code is not set for this item."); // for debugging
}
}
$(document).ready(function() {
$(".nav-item.dropdown").each(function() {
var $dropdownMenu = $(this).find(".dropdown-menu");
if ($dropdownMenu.children().length <= 2 && $dropdownMenu.children("hr.dropdown-divider").length === $dropdownMenu.children().length) {
$(this).prev('.nav-item.nav-item-separator').remove();
$(this).remove();
}
});
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.nav-item.dropdown').forEach((element) => {
const dropdownMenu = element.querySelector(".dropdown-menu");
if (dropdownMenu.children.length <= 2 && dropdownMenu.querySelectorAll("hr.dropdown-divider").length === dropdownMenu.children.length) {
if (element.previousElementSibling && element.previousElementSibling.classList.contains('nav-item') && element.previousElementSibling.classList.contains('nav-item-separator')) {
element.previousElementSibling.remove();
}
element.remove();
}
});
//Sort languages by alphabet
var list = $('.dropdown-menu[aria-labelledby="languageDropdown"]').children("a");
const list = Array.from(document.querySelector('.dropdown-menu[aria-labelledby="languageDropdown"]').children).filter(child => child.matches('a'));
list.sort(function(a, b) {
var A = $(a).text().toUpperCase();
var B = $(b).text().toUpperCase();
return (A < B) ? -1 : (A > B) ? 1 : 0;
})
.appendTo('.dropdown-menu[aria-labelledby="languageDropdown"]');
var A = a.textContent.toUpperCase();
var B = b.textContent.toUpperCase();
return (A < B) ? -1 : (A > B) ? 1 : 0;
}).forEach(node => document.querySelector('.dropdown-menu[aria-labelledby="languageDropdown"]').appendChild(node));
});

View file

@ -241,7 +241,7 @@ document.getElementById('addOperationBtn').addEventListener('click', function()
if (parameter.name === 'fileInput') return;
let parameterDiv = document.createElement('div');
parameterDiv.className = "form-group";
parameterDiv.className = "mb-3";
let parameterLabel = document.createElement('label');
parameterLabel.textContent = `${parameter.name} (${parameter.schema.type}): `;

View file

@ -43,7 +43,7 @@ document.querySelector('#navbarSearchInput').addEventListener('input', function(
var titleElement = item.querySelector('.icon-text');
var iconElement = item.querySelector('.icon');
var itemHref = item.getAttribute('href');
var tags = item.getAttribute('data-tags') || ""; // If no tags, default to empty string
var tags = item.getAttribute('data-bs-tags') || ""; // If no tags, default to empty string
if (titleElement && iconElement && itemHref !== '#') {
var title = titleElement.innerText;

View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
<th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></th:block>
@ -24,15 +24,15 @@
<!-- Change Username Form -->
<h4></h4>
<form action="/change-username" method="post">
<div class="form-group">
<div class="mb-3">
<label for="newUsername" th:text="#{account.changeUsername}">Change Username</label>
<input type="text" class="form-control" name="newUsername" id="newUsername" placeholder="New Username">
</div>
<div class="form-group">
<div class="mb-3">
<label for="currentPassword" th:text="#{password}">Password</label>
<input type="password" class="form-control" name="currentPassword" id="currentPasswordUsername" placeholder="Password">
</div>
<div class="form-group">
<div class="mb-3">
<button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
</div>
</form>
@ -42,19 +42,19 @@
<!-- Change Password Form -->
<h4 th:text="#{account.changePassword}">Change Password?</h4>
<form action="/change-password" method="post">
<div class="form-group">
<div class="mb-3">
<label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
<input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword" th:placeholder="#{account.oldPassword}">
</div>
<div class="form-group">
<div class="mb-3">
<label for="newPassword" th:text="#{account.newPassword}">New Password</label>
<input type="password" class="form-control" name="newPassword" id="newPassword" th:placeholder="#{account.newPassword}">
</div>
<div class="form-group">
<div class="mb-3">
<label for="confirmNewPassword" th:text="#{account.confirmNewPassword}">Confirm New Password</label>
<input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPassword" th:placeholder="#{account.confirmNewPassword}">
</div>
<div class="form-group">
<div class="mb-3">
<button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change Password</button>
</div>
</form>
@ -286,7 +286,7 @@
<div class="form-group mt-4">
<div class="mb-3 mt-4">
<a href="/logout">
<button type="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</button>
</a>

View file

@ -41,15 +41,15 @@
<h2 th:text="#{adminUserSettings.addUser}">Add New User</h2>
<form action="/admin/saveUser" method="post">
<div class="form-group">
<div class="mb-3">
<label for="username" th:text="#{username}">Username</label>
<input type="text" class="form-control" name="username" required>
</div>
<div class="form-group">
<div class="mb-3">
<label for="password" th:text="#{password}">Password</label>
<input type="password" class="form-control" name="password" required>
</div>
<div class="form-group">
<div class="mb-3">
<label for="role" th:text="#{adminUserSettings.role}">Role</label>
<select name="role" class="form-control" required>
<option value="ROLE_ADMIN" th:text="#{adminUserSettings.admin}">Admin</option>

View file

@ -27,7 +27,7 @@
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="duplexMode" id="duplexMode">
<label class="ml-3" for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
<label class="ms-3" for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
</div>
<p><a th:href="@{files/Auto Splitter Divider (minimal).pdf}" download th:text="#{autoSplitPDF.dividerDownload1}"></a></p>
<p><a th:href="@{files/Auto Splitter Divider (with instructions).pdf}" download th:text="#{autoSplitPDF.dividerDownload2}"></a></p>

View file

@ -23,13 +23,13 @@
<div class="form-check">
<input type="checkbox" class="form-check-input" name="stretchToFit" id="stretchToFit">
<label class="ml-3" for="stretchToFit" th:text=#{imageToPDF.selectText.1}></label>
<label class="ms-3" for="stretchToFit" th:text=#{imageToPDF.selectText.1}></label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="autoRotate" id="autoRotate">
<label class="ml-3" for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
<label class="ms-3" for="autoRotate" th:text=#{imageToPDF.selectText.2}></label>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{pdfToImage.colorType}"></label>
<select class="form-control" id="colorType" name="colorType">
<option value="color" th:text="#{pdfToImage.color}"></option>
@ -39,7 +39,7 @@
</div>
<br>
<input type="hidden" id="override" name="override" value="multi">
<div class="form-group">
<div class="mb-3">
<label th:text=#{imageToPDF.selectText.3}></label>
<select class="form-control" id="conversionType" name="conversionType" disabled>
<option value="merge" th:text=#{imageToPDF.selectText.4}></option>

View file

@ -18,7 +18,7 @@
<p th:text="#{processTimeWarning}"></p>
<form method="post" enctype="multipart/form-data" th:action="@{pdf-to-img}">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{pdfToImage.selectText}"></label>
<select class="form-control" name="imageFormat">
<option value="png">PNG</option>
@ -26,14 +26,14 @@
<option value="gif">GIF</option>
</select>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{pdfToImage.singleOrMultiple}"></label>
<select class="form-control" name="singleOrMultiple">
<option value="single" th:text="#{pdfToImage.single}"></option>
<option value="multiple" th:text="#{pdfToImage.multi}"></option>
</select>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{pdfToImage.colorType}"></label>
<select class="form-control" name="colorType">
<option value="color" th:text="#{pdfToImage.color}"></option>
@ -41,7 +41,7 @@
<option value="blackwhite" th:text="#{pdfToImage.blackwhite}"></option>
</select>
</div>
<div class="form-group">
<div class="mb-3">
<label for="dpi">DPI:</label>
<input type="number" name="dpi" class="form-control" id="dpi" min="1" step="1" value="300" required>
</div>

View file

@ -15,7 +15,7 @@
<form method="post" enctype="multipart/form-data" th:action="@{pdf-to-presentation}">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{PDFToPresentation.selectText.1}"></label>
<select class="form-control" name="outputFormat">
<option value="ppt">PPT</option>

View file

@ -15,7 +15,7 @@
<form method="post" enctype="multipart/form-data" th:action="@{pdf-to-text}">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{PDFToText.selectText.1}"></label>
<select class="form-control" name="outputFormat">
<option value="rtf">RTF</option>

View file

@ -15,7 +15,7 @@
<form method="post" enctype="multipart/form-data" th:action="@{pdf-to-word}">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{PDFToWord.selectText.1}"></label>
<select class="form-control" name="outputFormat">
<option value="doc">Doc</option>

View file

@ -16,7 +16,7 @@
<form th:action="@{rearrange-pages}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<input type="hidden" id="customMode" name="customMode" value="">
<div class="form-group">
<div class="mb-3">
<label for="pageOrder" th:text="#{pageOrderPrompt}"></label>
<input type="text" class="form-control" id="pageOrder" name="pageOrder" placeholder="(e.g. 1,2,8 or 4,7,12-16 or 2n-1)" required>
</div>

View file

@ -1,8 +1,8 @@
<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" data-tags="${tags}">
<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" data-bs-tags="${tags}">
<a th:href="${cardLink}">
<div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
<img th:if="${svgPath}" id="card-icon" class="home-card-icon home-card-icon-colour" th:src="${svgPath}" alt="Icon" width="30" height="30">
<h5 class="card-title ml-2" th:text="${cardTitle}"></h5> <!-- Add some margin-left (ml-2) for spacing between SVG and title -->
<h5 class="card-title ms-2" th:text="${cardTitle}"></h5> <!-- Add some margin-left (ms-2) for spacing between SVG and title -->
</div>
<p class="card-text" th:text="${cardText}"></p>
</a>

View file

@ -32,10 +32,11 @@
<script src="js/thirdParty/jszip.min.js"></script>
<!-- Bootstrap -->
<script src="js/thirdParty/popper.min.js"></script>
<script src="js/thirdParty/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<!-- PDF.js -->
<script src="pdfjs/pdf.js"></script>
@ -57,7 +58,7 @@
</head>
<th:block th:fragment="game">
<dialog id="game-container-wrapper" class="game-container-wrapper" data-modal>
<dialog id="game-container-wrapper" class="game-container-wrapper" data-bs-modal>
<script>
console.log("loaded game")
$(document).ready(function() {
@ -116,20 +117,20 @@
</script>
<script src="js/downloader.js"></script>
<div class="custom-file-chooser" th:attr="data-unique-id=${name},
data-element-id=${name+'-input'},
data-files-selected=#{filesSelected},
data-pdf-prompt=#{pdfPrompt}">
<div class="custom-file">
<input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:classappend="${notRequired ? '' : 'required'}">
<label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
</div>
<div class="selected-files"></div>
</div>
<div class="custom-file-chooser" th:attr="data-bs-unique-id=${name},
data-bs-element-id=${name+'-input'},
data-bs-files-selected=#{filesSelected},
data-bs-pdf-prompt=#{pdfPrompt}">
<div class="mb-3">
<input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:classappend="${notRequired ? '' : 'required'}">
</div>
<div class="selected-files"></div>
</div>
<div id="progressBarContainer" style="display: none; position: relative;">
<div class="progress" style="height: 1rem;">
<div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>

View file

@ -24,7 +24,7 @@
<p th:text="${message} + ' for path: ' + ${path}"></p>
<button type="button" class="btn btn-danger" th:if="${trace}" onclick="toggletrace()">Show Stack Trace</button>
<button type="button" class="btn btn-secondary" th:if="${trace}" onclick="copytrace()">Copy Stack Trace</button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="dismissError()">
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()">
<span aria-hidden="true">&times;</span>
</button>
<!-- Stack trace section -->

View file

@ -7,7 +7,7 @@
<button type="button" class="btn btn-danger" onclick="toggletrace()">Show Stack Trace</button>
<button type="button" class="btn btn-secondary" onclick="copytrace()">Copy Stack Trace</button>
<button type="button" class="btn btn-info" onclick="showHelp()">Help</button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="dismissError()">
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close" onclick="dismissError()">
<span aria-hidden="true">&times;</span>
</button>
<!-- Stack trace section -->
@ -29,7 +29,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="helpModalLabel">Help</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@ -47,7 +47,7 @@
<a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" target="_blank">Discord - Submit Support post</a>
</div>
<a href="/" id="home-button">Go to Homepage</a>
<a data-dismiss="modal" id="home-button">Close</a>
<a data-bs-dismiss="modal" id="home-button">Close</a>
</div>
</div>
</div>

View file

@ -0,0 +1,75 @@
<th:block th:fragment="langAndDarkMode">
<script src="js/languageSelection.js"></script>
<script src="js/darkmode.js"></script>
<li class="nav-item">
<a class="nav-link" id="dark-mode-toggle" href="#">
<img class="navbar-icon" id="dark-mode-icon" src="moon.svg" alt="icon" />
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmsns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-globe2" viewBox="0 0 20 20">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
</svg>
</a>
<div class="dropdown-menu" aria-labelledby="languageDropdown">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ar_AR">
<img src="images/flags/sa.svg" alt="icon" width="20" height="15"> العربية
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ca_CA">
<img src="images/flags/es-ct.svg" alt="icon" width="20" height="15"> Català
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="zh_CN">
<img src="images/flags/cn.svg" alt="icon" width="20" height="15"> 简体中文
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="de_DE">
<img src="images/flags/de.svg" alt="icon" width="20" height="15"> Deutsch
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_GB">
<img src="images/flags/gb.svg" alt="icon" width="20" height="15"> English (GB)
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_US">
<img src="images/flags/us.svg" alt="icon" width="20" height="15"> English (US)
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="eu_ES">
<img src="images/flags/eu.svg" alt="icon" width="20" height="15"> Euskara
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="es_ES">
<img src="images/flags/es.svg" alt="icon" width="20" height="15"> Español
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="fr_FR">
<img src="images/flags/fr.svg" alt="icon" width="20" height="15"> Français
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="it_IT">
<img src="images/flags/it.svg" alt="icon" width="20" height="15"> Italiano
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="nl_NL">
<img src="images/flags/nl.svg" alt="icon" width="20" height="15"> Nederlands
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ps_PL">
<img src="images/flags/ps.svg" alt="icon" width="20" height="15"> Polski
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pt_BR">
<img src="images/flags/pt_br.svg" alt="icon" width="20" height="15"> Português (BR)
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ro_RO">
<img src="images/flags/ro.svg" alt="icon" width="20" height="15"> Romanian
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sv_SE">
<img src="images/flags/se.svg" alt="icon" width="20" height="15"> Svenska
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ru_RU">
<img src="images/flags/ru.svg" alt="icon" width="20" height="15"> Русский
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ko_KR">
<img src="images/flags/kr.svg" alt="icon" width="20" height="15"> 한국어
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ja_JP">
<img src="images/flags/jp.svg" alt="icon" width="20" height="15"> 日本語
</a>
</div>
</li>
</th:block>

View file

@ -18,13 +18,13 @@
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto flex-nowrap">
<ul class="navbar-nav me-auto flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="#" th:href="@{multi-tool}" th:classappend="${currentPage}=='multi-tool' ? 'active' : ''" th:title="#{home.multiTool.desc}">
@ -41,7 +41,7 @@
<li class="nav-item nav-item-separator"></li>
<li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='merge-pdfs' OR ${currentPage}=='split-pdfs' OR ${currentPage}=='crop' OR ${currentPage}=='adjust-contrast' OR ${currentPage}=='pdf-organizer' OR ${currentPage}=='rotate-pdf' OR ${currentPage}=='multi-page-layout' OR ${currentPage}=='scale-pages' OR ${currentPage}=='auto-split-pdf' OR ${currentPage}=='extract-page' OR ${currentPage}=='pdf-to-single-page' ? 'active' : ''">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="icon" src="images/file-earmark-pdf.svg" alt="icon">
<span class="icon-text" th:text="#{navbar.pageOps}"></span>
</a>
@ -64,7 +64,7 @@
</div>
</li>
<li class="nav-item nav-item-separator"></li>
<li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='xlsx-to-pdf' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' ? 'active' : ''"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
<li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='xlsx-to-pdf' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' ? 'active' : ''"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img class="icon" src="images/arrow-left-right.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
<span class="icon-text" th:text="#{navbar.convert}"></span>
@ -94,7 +94,7 @@
<li class="nav-item nav-item-separator"></li>
<li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='add-watermark' OR ${currentPage}=='cert-sign' OR ${currentPage}=='sanitize-pdf' ? 'active' : ''">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="icon" src="images/shield-check.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;"> <span class="icon-text" th:text="#{navbar.security}"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
@ -110,7 +110,7 @@
<li class="nav-item nav-item-separator"></li>
<li class="nav-item dropdown" th:classappend="${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='show-javascript' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="icon" src="images/card-list.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
<span class="icon-text" th:text="#{navbar.other}"></span>
@ -137,9 +137,9 @@
</ul>
<ul class="navbar-nav ml-auto flex-nowrap">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="navbar-icon" src="images/star.svg" alt="icon" width="24" height="24">
</a>
<div class="dropdown-menu" id="favoritesDropdown" aria-labelledby="navbarDropdown">
@ -154,64 +154,64 @@
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-globe2" viewBox="0 0 20 20">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
</svg>
</a>
<div class="dropdown-menu" aria-labelledby="languageDropdown">
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ar_AR">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ar_AR">
<img src="images/flags/sa.svg" alt="icon" width="20" height="15"> العربية
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ca_CA">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ca_CA">
<img src="images/flags/es-ct.svg" alt="icon" width="20" height="15"> Català
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="zh_CN">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="zh_CN">
<img src="images/flags/cn.svg" alt="icon" width="20" height="15"> 简体中文
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="de_DE">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="de_DE">
<img src="images/flags/de.svg" alt="icon" width="20" height="15"> Deutsch
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_GB">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_GB">
<img src="images/flags/gb.svg" alt="icon" width="20" height="15"> English (GB)
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_US">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="en_US">
<img src="images/flags/us.svg" alt="icon" width="20" height="15"> English (US)
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="eu_ES">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="eu_ES">
<img src="images/flags/eu.svg" alt="icon" width="20" height="15"> Euskara
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="es_ES">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="es_ES">
<img src="images/flags/es.svg" alt="icon" width="20" height="15"> Español
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="fr_FR">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="fr_FR">
<img src="images/flags/fr.svg" alt="icon" width="20" height="15"> Français
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="it_IT">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="it_IT">
<img src="images/flags/it.svg" alt="icon" width="20" height="15"> Italiano
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="nl_NL">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="nl_NL">
<img src="images/flags/nl.svg" alt="icon" width="20" height="15"> Nederlands
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="pl_PL">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pl_PL">
<img src="images/flags/pl.svg" alt="icon" width="20" height="15"> Polski
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="pt_BR">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="pt_BR">
<img src="images/flags/pt_br.svg" alt="icon" width="20" height="15"> Português (BR)
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ro_RO">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ro_RO">
<img src="images/flags/ro.svg" alt="icon" width="20" height="15"> Romanian
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="sv_SE">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="sv_SE">
<img src="images/flags/se.svg" alt="icon" width="20" height="15"> Svenska
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ru_RU">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ru_RU">
<img src="images/flags/ru.svg" alt="icon" width="20" height="15"> Русский
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ko_KR">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ko_KR">
<img src="images/flags/kr.svg" alt="icon" width="20" height="15"> 한국어
</a>
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ja_JP">
<a class="dropdown-item lang_dropdown-item" href="" data-bs-language-code="ja_JP">
<img src="images/flags/jp.svg" alt="icon" width="20" height="15"> 日本語
</a>
</div>
@ -220,7 +220,7 @@
<li class="nav-item">
<!-- Settings Button -->
<a href="#" class="nav-link" data-toggle="modal" data-target="#settingsModal">
<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">
<img class="navbar-icon" src="images/gear.svg" alt="icon" width="24" height="24">
</a>
@ -305,7 +305,7 @@
<div class="modal-content dark-card">
<div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@ -325,7 +325,7 @@
</div>
<div class="form-group">
<div class="mb-3">
<label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
<select class="form-control" id="downloadOption">
<option value="sameWindow" th:utext="#{settings.downloadOption.1}"></option>
@ -333,12 +333,12 @@
<option value="downloadFile" th:utext="#{settings.downloadOption.3}"></option>
</select>
</div>
<div class="form-group">
<div class="mb-3">
<label for="zipThreshold" th:utext="#{settings.zipThreshold}"></label>
<input type="range" class="custom-range" min="1" max="9" step="1" id="zipThreshold" value="4">
<span id="zipThresholdValue" class="ml-2"></span>
<span id="zipThresholdValue" class="ms-2"></span>
</div>
<div class="form-group">
<div class="mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="boredWaiting">
<label class="custom-control-label" for="boredWaiting" th:text="#{bored}"></label>
@ -356,7 +356,7 @@
<a th:if="${@loginEnabled}" href="/logout">
<button type="button" class="btn btn-danger" th:text="#{settings.signOut}">Sign Out</button>
</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{close}"></button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}"></button>
</div>
</div>

View file

@ -1,5 +1,5 @@
<div th:fragment="navbarEntry (endpoint, imgSrc, titleKey, descKey, tagKey)" th:if="${@endpointConfiguration.isEndpointEnabled(endpoint)}">
<a class="dropdown-item" href="#" th:href="@{${endpoint}}" th:classappend="${endpoint.equals(currentPage)} ? 'active' : ''" th:title="#{${descKey}}" th:data-tags="#{${tagKey}}">
<a class="dropdown-item" href="#" th:href="@{${endpoint}}" th:classappend="${endpoint.equals(currentPage)} ? 'active' : ''" th:title="#{${descKey}}" th:data-bs-tags="#{${tagKey}}">
<img class="icon" th:src="@{${imgSrc}}" alt="icon">
<span class="icon-text" th:text="#{${titleKey}}"></span>
</a>

View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">

View file

@ -1,6 +1,6 @@
<!-- Hi if you have been redirected here when using API then you might need to supply a X-API-KEY key in header to authenticate! -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- Hi if you have been redirected here when using API then you might need to supply a X-API-KEY key in header to authenticate! -->
<head>
<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
@ -26,15 +26,15 @@
<div class="card-body">
<form th:action="@{/login}" method="post">
<div class="form-group">
<div class="mb-3">
<label for="username">Username:</label>
<input type="text" id="username" name="username" class="form-control" required="required" />
</div>
<div class="form-group">
<div class="mb-3">
<label for="password">Password:</label>
<input type="password" id="password" name="password" class="form-control" required="required" />
</div>
<div class="form-group text-center">
<div class="mb-3 text-center">
<input type="submit" value="Login" class="btn btn-primary" />
</div>
</form>

View file

@ -14,15 +14,15 @@
<div class="col-md-6">
<h2 th:text="#{merge.header}"></h2>
<form action="merge-pdfs" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="mb-3">
<label th:text="#{multiPdfDropPrompt}"></label>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true, accept='application/pdf')}"></div>
</div>
<div class="form-group">
<div class="mb-3">
<ul id="selectedFiles" class="list-group"></ul>
</div>
<div class="form-group text-center">
<div class="mb-3 text-center">
<button type="button" id="sortByNameBtn" class="btn btn-info" th:text="#{merge.sortByName}"></button>
<button type="button" id="sortByDateBtn" class="btn btn-info" th:text="#{merge.sortByDate}"></button>
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>

View file

@ -22,7 +22,7 @@
<div
th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<br>
<div class="form-group">
<div class="mb-3">
<label for="customMargin" th:text="#{addPageNumbers.selectText.2}"></label> <select
class="form-control" id="customMargin" name="customMargin"
required>
@ -77,7 +77,7 @@
</style>
<div class="form-group">
<div class="mb-3">
<label for="position" th:text="#{addPageNumbers.selectText.3}"></label>
<div class="a4container">
<div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
@ -94,18 +94,18 @@
<input type="hidden" id="numberInput" name="position" min="1"
max="9" required>
<div class="form-group">
<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" />
</div>
<div class="form-group">
<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}" />
</div>
<div class="form-group">
<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}" />

View file

@ -17,57 +17,57 @@
<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="form-group-inline form-check">
<div class="mb-3-inline form-check">
<input type="checkbox" class="form-check-input" id="deleteAll" name="deleteAll">
<label class="ml-3" for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
<label class="ms-3" for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label>
</div>
<div class="form-group-inline form-check">
<div class="mb-3-inline form-check">
<input type="checkbox" class="form-check-input" id="customModeCheckbox">
<label class="ml-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
<label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label>
</div>
<div class="form-group">
<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">
</div>
<div class="form-group">
<div class="mb-3">
<label class="form-check-label" for="creationDate" th:text="#{changeMetadata.creationDate}"></label>
<input type="text" class="form-control" id="creationDate" name="creationDate" placeholder="2020/12/25 18:30:59">
</div>
<div class="form-group">
<div class="mb-3">
<label class="form-check-label" for="creator" th:text="#{changeMetadata.creator}"></label>
<input type="text" class="form-control" id="creator" name="creator">
</div>
<div class="form-group">
<div class="mb-3">
<label class="form-check-label" for="keywords" th:text="#{changeMetadata.keywords}"></label>
<input type="text" class="form-control" id="keywords" name="keywords">
</div>
<div class="form-group">
<div class="mb-3">
<label class="form-check-label" for="modificationDate" th:text="#{changeMetadata.modDate}"></label>
<input type="text" class="form-control" id="modificationDate" name="modificationDate" placeholder="2020/12/25 18:30:59">
</div>
<div class="form-group">
<div class="mb-3">
<label class="form-check-label" for="producer" th:text="#{changeMetadata.producer}"></label>
<input type="text" class="form-control" id="producer" name="producer">
</div>
<div class="form-group">
<div class="mb-3">
<label class="form-check-label" for="subject" th:text="#{changeMetadata.subject}"></label>
<input type="text" class="form-control" id="subject" name="subject">
</div>
<div class="form-group">
<div class="mb-3">
<label class="form-check-label" for="title" th:text="#{changeMetadata.title}"></label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<div class="mb-3">
<label class="form-check-label" for="trapped" th:text="#{changeMetadata.trapped}"></label>
<select class="form-control" id="trapped" name="trapped">
<option value="True" th:text="#{true}"></option>
@ -77,7 +77,7 @@
</div>
<div id="customMetadata" style="display: none;">
<h3 th:text="#{changeMetadata.selectText.4}"></h3>
<div class="form-group" id="otherMetadataEntries"></div>
<div class="mb-3" id="otherMetadataEntries"></div>
</div>
<div id="customMetadataEntries"></div>
<button type="button" class="btn btn-secondary" id="addMetadataBtn" th:text="#{changeMetadata.selectText.5}"></button>
@ -194,7 +194,7 @@
count = count + 1;
const formGroup = document.createElement("div");
formGroup.className = "form-group";
formGroup.className = "mb-3";
formGroup.appendChild(keyInput);
formGroup.appendChild(valueInput);
@ -227,11 +227,11 @@
continue;
}
const entryDiv = document.createElement('div');
entryDiv.className = 'form-group';
entryDiv.className = 'mb-3';
entryDiv.innerHTML = `<div class="form-group"><label class="form-check-label" for="${key}">${key}:</label><input name="${key}" value="${value}" type="text" class="form-control" id="${key}"></div>`;
entryDiv.innerHTML = `<div class="mb-3"><label class="form-check-label" for="${key}">${key}:</label><input name="${key}" value="${value}" type="text" class="form-control" id="${key}"></div>`;
otherMetadataEntriesDiv.appendChild(entryDiv);
}
} else {

View file

@ -16,27 +16,27 @@
<form id="multiPdfForm" th:action="@{extract-image-scans}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='image/*, application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label for="angleThreshold" th:text="#{ScannerImageSplit.selectText.1}"></label>
<input type="number" class="form-control" id="angleThreshold" name="angle_threshold" value="10">
<small id="angleThresholdHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.2}"></small>
</div>
<div class="form-group">
<div class="mb-3">
<label for="tolerance" th:text="#{ScannerImageSplit.selectText.3}"></label>
<input type="number" class="form-control" id="tolerance" name="tolerance" value="20">
<small id="toleranceHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.4}"></small>
</div>
<div class="form-group">
<div class="mb-3">
<label for="minArea" th:text="#{ScannerImageSplit.selectText.5}"></label>
<input type="number" class="form-control" id="minArea" name="min_area" value="8000">
<small id="minAreaHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.6}"></small>
</div>
<div class="form-group">
<div class="mb-3">
<label for="minContourArea" th:text="#{ScannerImageSplit.selectText.7}"></label>
<input type="number" class="form-control" id="minContourArea" name="min_contour_area" value="500">
<small id="minContourAreaHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.8}"></small>
</div>
<div class="form-group">
<div class="mb-3">
<label for="borderSize" th:text="#{ScannerImageSplit.selectText.9}"></label>
<input type="number" class="form-control" id="borderSize" name="border_size" value="1">
<small id="borderSizeHelp" class="form-text text-muted" th:text="#{ScannerImageSplit.selectText.10}"></small>

View file

@ -16,7 +16,7 @@
<form id="multiPdfForm" th:action="@{extract-images}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{extractImages.selectText}"></label>
<select class="form-control" name="format">
<option value="png">PNG</option>

View file

@ -16,7 +16,7 @@
<h2 th:text="#{pageLayout.header}"></h2>
<form id="multiPdfForm" th:action="@{multi-page-layout}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label for="pagesPerSheet" th:text="#{pageLayout.pagesPerSheet}"></label>
<select id="pagesPerSheet" name="pagesPerSheet" required>
<option value="2">2</option>

View file

@ -40,7 +40,7 @@
<h2 th:text="#{ocr.header}"></h2>
<form th:if="${#lists.size(languages) > 0}" action="#" th:action="@{/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="form-group">
<div class="mb-3">
<label for="languages" class="form-label" th:text="#{ocr.selectText.1}"></label>
<hr>
<div id="languages">
@ -51,7 +51,7 @@
</div>
<hr>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{ocr.selectText.10}"></label>
<select class="form-control" name="ocrType">
<option value="skip-text" th:text="#{ocr.selectText.6}"></option>
@ -83,7 +83,7 @@
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{ocr.selectText.12}"></label>
<select class="form-control" name="ocrRenderType">
<option value="hocr">HOCR (Latin/Roman alphabet only)</option>

View file

@ -16,12 +16,12 @@
<form id="multiPdfForm" th:action="@{remove-blanks}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label for="threshold" th:text="#{removeBlanks.threshold}"></label>
<input type="number" class="form-control" id="threshold" name="threshold" value="10">
<small id="thresholdHelp" class="form-text text-muted" th:text="#{removeBlanks.thresholdDesc}"></small>
</div>
<div class="form-group">
<div class="mb-3">
<label for="whitePercent" th:text="#{removeBlanks.whitePercent}"></label>
<input type="number" class="form-control" id="whitePercent" name="whitePercent" value="99.9" step="0.1">
<small id="whitePercentHelp" class="form-text text-muted" th:text="#{removeBlanks.whitePercentDesc}"></small>

View file

@ -16,7 +16,7 @@
<h2 th:text="#{scalePages.header}"></h2>
<form id="scalePagesFrom" th:action="@{scale-pages}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label for="pageSize" th:text="#{scalePages.pageSize}"></label>
<select id="pageSize" name="pageSize" required>
@ -48,7 +48,7 @@
<option value="LEDGER">Ledger</option>
</select>
</div>
<div class="form-group">
<div class="mb-3">
<label for="scaleFactor" th:text="#{scalePages.scaleFactor}"></label>
<input type="number" id="scaleFactor" name="scaleFactor" step="any" min="0" value="1">
</div>

View file

@ -16,7 +16,7 @@
<form th:action="@{rearrange-pages}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label for="customMode">Mode</label>
<select class="form-control" id="customMode" name="customMode">
<option value="">Custom Page Order</option>
@ -29,7 +29,7 @@
<option value="REMOVE_FIRST_AND_LAST">Remove First and Last</option>
</select>
</div>
<div class="form-group">
<div class="mb-3">
<label for="pageOrder" th:text="#{pageOrderPrompt}"></label>
<input type="text" class="form-control" id="pageOrder" name="pageOrder" placeholder="(e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)" required>
</div>

View file

@ -37,11 +37,11 @@
<div class="row justify-content-center">
<div class="bordered-box">
<div class="text-right text-top">
<div class="text-end text-top">
<button id="uploadPipelineBtn" class="btn btn-primary">Upload
Custom</button>
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#pipelineSettingsModal">Configure</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#pipelineSettingsModal">Configure</button>
</div>
<div class="center-element">
@ -71,7 +71,7 @@
<!-- Modal Header -->
<div class="modal-header">
<h2 class="modal-title">Pipeline Configuration</h2>
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button type="button" class="close" data-bs-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->

View file

@ -16,7 +16,7 @@
<form th:action="@{remove-pages}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label for="pagesToDelete" th:text="#{pageRemover.pagesToDelete}"></label>
<input type="text" class="form-control" id="fileInput" name="pagesToDelete" placeholder="(e.g. 1,2,6 or 1-10,15-30)" required>
</div>

View file

@ -14,27 +14,27 @@
<h2 th:text="#{addPassword.header}"></h2>
<form action="add-password" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="mb-3">
<label th:text="#{addPassword.selectText.1}"></label>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{addPassword.selectText.14}"></label> <input type="password" class="form-control" id="ownerPassword" name="ownerPassword">
<small class="form-text text-muted" th:text="#{addPassword.selectText.15}"></small>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{addPassword.selectText.2}"></label> <input type="password" class="form-control" id="password" name="password">
<small class="form-text text-muted" th:text="#{addPassword.selectText.16}"></small>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{addPassword.selectText.3}"></label> <select class="form-control" id="keyLength" name="keyLength">
<option value="40">40</option>
<option value="128">128</option>
<option value="256">256</option>
</select> <small class="form-text text-muted" th:text="#{addPassword.selectText.4}"></small>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{addPassword.selectText.5}"></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
@ -71,7 +71,7 @@
</div>
<br />
<div class="form-group text-center">
<div class="mb-3 text-center">
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{addPassword.submit}"></button>
</div>

View file

@ -14,14 +14,14 @@
<h2 th:text="#{watermark.header}"></h2>
<form method="post" enctype="multipart/form-data" action="add-watermark">
<div class="form-group">
<div class="mb-3">
<label th:text="#{watermark.selectText.1}"></label>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}">
<input type="file" id="fileInput" name="fileInput" class="form-control-file" accept="application/pdf" required />
</div>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{watermark.selectText.8}"></label>
<select class="form-control" id="watermarkType" name="watermarkType" onchange="toggleFileOption()">
<option value="text">Text</option>
@ -29,21 +29,21 @@
</select>
</div>
<div id="watermarkTextGroup" class="form-group">
<div id="watermarkTextGroup" class="mb-3">
<label for="watermarkText" th:text="#{watermark.selectText.2}"></label>
<input type="text" id="watermarkText" name="watermarkText" class="form-control" placeholder="Stirling-PDF" required />
</div>
<div id="watermarkImageGroup" class="form-group" style="display: none;">
<div id="watermarkImageGroup" class="mb-3" style="display: none;">
<label for="watermarkImage" th:text="#{watermark.selectText.9}"></label>
<input type="file" id="watermarkImage" name="watermarkImage" class="form-control-file" accept="image/*" />
</div>
<div class="form-group">
<div class="mb-3">
<label for="fontSize" th:text="#{watermark.selectText.3}"></label>
<input type="text" id="fontSize" name="fontSize" class="form-control" value="30" />
</div>
<div class="form-group">
<div class="mb-3">
<label for="opacity" th:text="#{watermark.selectText.7}"></label>
<input type="text" id="opacity" name="opacityText" class="form-control" value="50" onblur="updateOpacityValue()" />
<input type="hidden" id="opacityReal" name="opacity" value="0.5">
@ -83,19 +83,19 @@
appendPercentageSymbol();
</script>
<div class="form-group">
<div class="mb-3">
<label for="rotation" th:text="#{watermark.selectText.4}"></label>
<input type="text" id="rotation" name="rotation" class="form-control" value="45" />
</div>
<div class="form-group">
<div class="mb-3">
<label for="widthSpacer" th:text="#{watermark.selectText.5}"></label>
<input type="text" id="widthSpacer" name="widthSpacer" class="form-control" value="50" />
</div>
<div class="form-group">
<div class="mb-3">
<label for="heightSpacer" th:text="#{watermark.selectText.6}"></label>
<input type="text" id="heightSpacer" name="heightSpacer" class="form-control" value="50" />
</div>
<div class="form-group text-center">
<div class="mb-3 text-center">
<input type="submit" id="submitBtn" th:value="#{watermark.submit}" class="btn btn-primary" />
</div>
</form>

View file

@ -18,12 +18,12 @@
<form action="/cert-sign" method="post"
enctype="multipart/form-data">
<div class="form-group">
<div class="mb-3">
<label th:text="#{certSign.selectPDF}"></label>
<div
th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
</div>
<div class="form-group">
<div class="mb-3">
<label for="certType" th:text="#{certSign.certType}"></label> <select
class="form-control" id="certType" name="certType">
<option value="" th:text="#{selectFillter}"></option>
@ -32,50 +32,50 @@
</select>
</div>
<div class="form-group" id="p12Group" style="display: none;">
<div class="mb-3" id="p12Group" style="display: none;">
<label th:text="#{certSign.selectP12}"></label>
<div
th:replace="~{fragments/common :: fileSelector(name='p12', notRequired=true, multiple=false, accept='.p12,.pfx')}"></div>
</div>
<div id="pemGroup" style="display: none;">
<div class="form-group">
<div class="mb-3">
<label th:text="#{certSign.selectKey}"></label>
<div
th:replace="~{fragments/common :: fileSelector(name='key', multiple=false, notRequired=true, accept='.pem,.der')}"></div>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{certSign.selectCert}"></label>
<div
th:replace="~{fragments/common :: fileSelector(name='cert', multiple=false, notRequired=true, accept='.pem,.der')}"></div>
</div>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{certSign.password}"></label> <input
type="password" class="form-control" id="password"
name="password">
</div>
<div class="form-group">
<div class="mb-3">
<label><input type="checkbox" id="showSignature"
name="showSignature" th:text="#{certSign.showSig}"></label>
</div>
<div id="signatureDetails" style="display: none;">
<div class="form-group">
<div class="mb-3">
<label for="reason" th:text="#{certSign.reason}"></label> <input type="text"
class="form-control" id="reason" name="reason">
</div>
<div class="form-group">
<div class="mb-3">
<label for="location" th:text="#{certSign.location}"></label> <input type="text"
class="form-control" id="location" name="location">
</div>
<div class="form-group">
<div class="mb-3">
<label for="name" th:text="#{certSign.name}"></label> <input type="text"
class="form-control" id="name" name="name">
</div>
<div class="form-group">
<div class="mb-3">
<label for="pageNumber" th:text="#{pageNum}"></label> <input
type="number" class="form-control" id="pageNumber"
name="pageNumber" min="1">
@ -120,7 +120,7 @@
</script>
<div class="form-group text-center">
<div class="mb-3 text-center">
<button type="submit" id="submitBtn" class="btn btn-primary"
th:text="#{certSign.submit}"></button>
</div>

View file

@ -15,11 +15,11 @@
<h2 th:text="#{permissions.header}"></h2>
<p th:text="#{permissions.warning}"></p>
<form action="add-password" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="mb-3">
<label th:text="#{permissions.selectText.1}"></label>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{permissions.selectText.2}"></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="canAssembleDocument" name="canAssembleDocument">
@ -56,7 +56,7 @@
</div>
<br />
<div class="form-group text-center">
<div class="mb-3 text-center">
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{permissions.submit}"></button>
</div>

View file

@ -14,16 +14,16 @@
<h2 th:text="#{removePassword.header}"></h2>
<form action="remove-password" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="mb-3">
<label th:text="#{removePassword.selectText.1}"></label>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
</div>
<div class="form-group">
<div class="mb-3">
<label th:text="#{removePassword.selectText.2}"></label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<br />
<div class="form-group text-center">
<div class="mb-3 text-center">
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{removePassword.submit}"></button>
</div>
</form>

View file

@ -14,15 +14,15 @@
<h2 th:text="#{remove-watermark.header}"></h2>
<form method="post" enctype="multipart/form-data" action="remove-watermark">
<div class="form-group">
<div class="mb-3">
<label th:text="#{remove-watermark.selectText.1}"></label>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
</div>
<div class="form-group">
<div class="mb-3">
<label for="watermarkText" th:text="#{remove-watermark.selectText.2}"></label>
<input type="text" id="watermarkText" name="watermarkText" class="form-control" placeholder="Stirling-PDF" required />
</div>
<div class="form-group text-center">
<div class="mb-3 text-center">
<input type="submit" id="submitBtn" th:value="#{remove-watermark.submit}" class="btn btn-primary" />
</div>
</form>

View file

@ -14,7 +14,7 @@
<h2 th:text="#{sanitizePDF.header}"></h2>
<form action="sanitize-pdf" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="mb-3">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
</div>
<div class="form-check">
@ -38,7 +38,7 @@
<label class="form-check-label" for="removeFonts" th:text="#{sanitizePDF.selectText.5}"></label>
</div>
<br />
<div class="form-group text-center">
<div class="mb-3 text-center">
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{sanitizePDF.submit}"></button>
</div>

View file

@ -26,7 +26,7 @@
<form th:action="@{split-pages}" method="post" enctype="multipart/form-data">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div class="form-group">
<div class="mb-3">
<label for="pages" th:text="#{split.splitPages}"></label>
<input type="text" class="form-control" id="pages" name="pages" placeholder="1,3,5-10" required>
</div>