154 lines
5.3 KiB
HTML
154 lines
5.3 KiB
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=#{autoCrop.title})}"></th:block>
|
|
|
|
|
|
<body>
|
|
<th:block th:insert="~{fragments/common :: game}"></th:block>
|
|
<div id="page-container">
|
|
<div id="content-wrap">
|
|
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
|
<br> <br>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<h2 th:text="#{addPageNumbers.header}"></h2>
|
|
<form method="post" enctype="multipart/form-data"
|
|
th:action="@{add-page-numbers}">
|
|
<div
|
|
th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
|
|
<br>
|
|
<div class="form-group">
|
|
<label for="customMargin" th:text="#{addPageNumbers.selectText.2}"></label> <select
|
|
class="form-control" id="customMargin" name="customMargin"
|
|
required>
|
|
<option value="small" th:text="#{sizes.small}"></option>
|
|
<option value="medium" selected th:text="#{sizes.medium}"></option>
|
|
<option value="large" th:text="#{sizes.large}"></option>
|
|
<option value="x-large" th:text="#{sizes.x-large}"></option>
|
|
</select>
|
|
</div>
|
|
<style>
|
|
.a4container {
|
|
position: relative;
|
|
width: 50%;
|
|
aspect-ratio: 0.707;
|
|
border: 1px solid #ddd;
|
|
box-sizing: border-box;
|
|
background-color: white;
|
|
}
|
|
|
|
.pageNumber {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1em;
|
|
color: #333;
|
|
cursor: pointer;
|
|
background-color: #ccc;
|
|
width: 15%;
|
|
height: 15%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.pageNumber:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
#myForm {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.selectedPosition {
|
|
background-color: #0a0;
|
|
}
|
|
|
|
.selectedPosition.selectedHovered {
|
|
background-color: #006600;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="form-group">
|
|
<label for="position" th:text="#{addPageNumbers.selectText.3}"></label>
|
|
<div class="a4container">
|
|
<div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
|
|
<div class="pageNumber" id="2" style="top: 10%; left: 50%;">2</div>
|
|
<div class="pageNumber" id="3" style="top: 10%; left: 90%;">3</div>
|
|
<div class="pageNumber" id="4" style="top: 50%; left: 10%;">4</div>
|
|
<div class="pageNumber" id="5" style="top: 50%; left: 50%;">5</div>
|
|
<div class="pageNumber" id="6" style="top: 50%; left: 90%;">6</div>
|
|
<div class="pageNumber" id="7" style="top: 90%; left: 10%;">7</div>
|
|
<div class="pageNumber" id="8" style="top: 90%; left: 50%;">8</div>
|
|
<div class="pageNumber" id="9" style="top: 90%; left: 90%;">9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" id="numberInput" name="position" min="1"
|
|
max="9" required>
|
|
<div class="form-group">
|
|
<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">
|
|
<label for="pagesToNumber" th:text="#{addPageNumbers.selectText.5}"></label> <input
|
|
type="text" class="form-control" id="pagesToNumber"
|
|
name="pagesToNumber"
|
|
placeholder="Which pages to number, default 'all', also accepts 1-5 or 2,5,9 etc" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="customText" th:text="#{addPageNumbers.selectText.6}"></label> <input type="text"
|
|
class="form-control" id="customText" name="customText"
|
|
placeholder="Default just number, also accepts 'Page {n} of {total}', 'Tag-{n}' etc" />
|
|
</div>
|
|
<button type="submit" id="submitBtn" class="btn btn-primary"
|
|
th:text="#{addPageNumbers.submit}"></button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let cells = document.querySelectorAll('.pageNumber');
|
|
let inputField = document.getElementById('numberInput');
|
|
|
|
cells.forEach(cell => {
|
|
cell.addEventListener('click', function(e) {
|
|
cells.forEach(cell => {
|
|
cell.classList.remove('selectedPosition'); // Remove selected class from all cells
|
|
cell.classList.remove('selectedHovered'); // Also remove selectedHovered class
|
|
});
|
|
let selectedLocation = e.target.id;
|
|
inputField.value = selectedLocation;
|
|
e.target.classList.add('selectedPosition'); // Add selected class to clicked cell
|
|
e.target.classList.add('selectedHovered'); // Add selectedHovered class
|
|
});
|
|
|
|
cell.addEventListener('mouseenter', function(e) {
|
|
if(e.target.classList.contains('selectedPosition')) {
|
|
e.target.classList.add('selectedHovered');
|
|
}
|
|
});
|
|
|
|
cell.addEventListener('mouseleave', function(e) {
|
|
if(e.target.classList.contains('selectedPosition')) {
|
|
e.target.classList.remove('selectedHovered');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|