Add files via upload
This commit is contained in:
Anthony Stirling
51
src/main/resources/templates/add-image.html
Normal file
51
src/main/resources/templates/add-image.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<head>
|
||||
<th:block th:insert="~{common :: head}"></th:block>
|
||||
<title>S-PDF Add-Image</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:insert="~{navbar.html :: navbar}"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<h2>Add image to PDF</h2>
|
||||
|
||||
|
||||
|
||||
<form method="post" th:action="@{/add-image}"
|
||||
enctype="multipart/form-data">
|
||||
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" required> <label
|
||||
class="custom-file-label" for="fileInput">Choose PDF</label>
|
||||
</div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput2"
|
||||
name="fileInput2" required> <label
|
||||
class="custom-file-label" for="fileInput2">Choose Image</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="x">X</label> <input type="number" class="form-control"
|
||||
id="x" name="x" step="0.01" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="y">Y</label> <input type="number" class="form-control"
|
||||
id="y" name="y" step="0.01" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
<th:block th:insert="~{common :: filelist}"></th:block>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{footer.html :: footer}"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
77
src/main/resources/templates/common.html
Normal file
77
src/main/resources/templates/common.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<head th:fragment="head">
|
||||
<link rel="shortcut icon" href="favicon.svg">
|
||||
<script
|
||||
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<link rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<script
|
||||
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<link rel="stylesheet" th:href="@{dark-mode.css}" id="dark-mode-styles">
|
||||
<script>
|
||||
function toggleDarkMode() {
|
||||
var checkbox = document.getElementById("toggle-dark-mode");
|
||||
var darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
if (checkbox.checked) {
|
||||
localStorage.setItem("dark-mode", "on");
|
||||
darkModeStyles.disabled = false;
|
||||
} else {
|
||||
localStorage.setItem("dark-mode", "off");
|
||||
darkModeStyles.disabled = true;
|
||||
}
|
||||
}
|
||||
$(document).ready(function () {
|
||||
var darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
var checkbox = document.getElementById("toggle-dark-mode");
|
||||
if(localStorage.getItem("dark-mode") == "on"){
|
||||
darkModeStyles.disabled = false;
|
||||
checkbox.checked = true;
|
||||
}
|
||||
if(localStorage.getItem("dark-mode") == "off"){
|
||||
darkModeStyles.disabled = true;
|
||||
checkbox.checked = false;
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="general.css">
|
||||
</head>
|
||||
|
||||
<th:block th:fragment="filelist">
|
||||
<div id="fileList"></div>
|
||||
<div id="fileList2"></div>
|
||||
<script>
|
||||
var input = document.getElementById("fileInput");
|
||||
var output = document.getElementById("fileList");
|
||||
|
||||
input.addEventListener("change", function() {
|
||||
var files = input.files;
|
||||
var fileNames = "";
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
fileNames += (i + 1) + ". " + files[i].name + "<br>";
|
||||
}
|
||||
|
||||
output.innerHTML = fileNames;
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var input2 = document.getElementById("fileInput2");
|
||||
var output2 = document.getElementById("fileList2");
|
||||
if(input2 != null && !input2) {
|
||||
input2.addEventListener("change", function() {
|
||||
var files = input2.files;
|
||||
var fileNames = "";
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
fileNames += (i + 1) + ". " + files[i].name + "<br>";
|
||||
}
|
||||
|
||||
output2.innerHTML = fileNames;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
41
src/main/resources/templates/convert-from-pdf.html
Normal file
41
src/main/resources/templates/convert-from-pdf.html
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<th:block th:insert="~{common :: head}"></th:block>
|
||||
<title>S-PDF ConvertFromPDF</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:insert="~{navbar.html :: navbar}"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<h2>PDF to img</h2>
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
th:action="@{/convert-to-image}">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" required> <label
|
||||
class="custom-file-label" for="fileInput">Choose PDF</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Image Format</label> <select class="form-control"
|
||||
name="imageFormat">
|
||||
<option value="jpg">JPEG</option>
|
||||
<option value="png">PNG</option>
|
||||
<option value="gif">GIF</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Convert</button>
|
||||
</form>
|
||||
<th:block th:insert="~{common :: filelist}"></th:block>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{footer.html :: footer}"></div>
|
||||
</body>
|
||||
</html>
|
||||
33
src/main/resources/templates/convert-to-pdf.html
Normal file
33
src/main/resources/templates/convert-to-pdf.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<th:block th:insert="~{common :: head}"></th:block>
|
||||
<title>S-PDF ConvertToPDF</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:insert="~{navbar.html :: navbar}"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<h2>Image to PDF</h2>
|
||||
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
th:action="@{/convert-to-pdf}">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" required> <label
|
||||
class="custom-file-label" for="fileInput">Choose Image</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Convert</button>
|
||||
|
||||
</form>
|
||||
<th:block th:insert="~{common :: filelist}"></th:block>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{footer.html :: footer}"></div>
|
||||
</body>
|
||||
</html>
|
||||
11
src/main/resources/templates/footer.html
Normal file
11
src/main/resources/templates/footer.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<div th:fragment="footer">
|
||||
<link rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
|
||||
<footer id="footer" class="text-center py-3">
|
||||
<a href="https://github.com/Frooodle" target="_blank" class="mx-1">
|
||||
<i class="fab fa-github fa-2x"></i>
|
||||
</a> <a href="https://hub.docker.com/u/frooodle" target="_blank"
|
||||
class="mx-1"> <i class="fab fa-docker fa-2x"></i>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
84
src/main/resources/templates/home.html
Normal file
84
src/main/resources/templates/home.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<th:block th:insert="~{common :: head}"></th:block>
|
||||
<title>S-PDF</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:insert="~{navbar.html :: navbar}"></div>
|
||||
<!-- Jumbotron -->
|
||||
<div class="jumbotron jumbotron-fluid" id="jumbotron">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Stirling PDF</h1>
|
||||
<p class="lead">Your locally hosted one-stop-shop for all your
|
||||
PDF needs. (Made 100% in ChatGPT in 1 day as a experiment)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="container">
|
||||
<div class="row h-100">
|
||||
<div class="col-4 h-100">
|
||||
<div class="dark-card card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Merge PDFs</h5>
|
||||
<p class="card-text">Easily merge multiple PDFs into one.</p>
|
||||
<a href="#" class="btn btn-primary" th:href="@{/merge-pdfs}">Go</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 h-100">
|
||||
<div class="dark-card card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Split PDFs</h5>
|
||||
<p class="card-text">Split your PDFs into multiple single-page
|
||||
documents or at specific page numbers.</p>
|
||||
<a href="#" class="btn btn-primary" th:href="@{/split-pdfs}">Go</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 h-100">
|
||||
<div class="dark-card card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Convert to PDF</h5>
|
||||
<p class="card-text">Convert images to PDF.</p>
|
||||
<a href="#" class="btn btn-primary" th:href="@{/convert-to-pdf}">Go</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row h-100">
|
||||
<div class="col-4 h-100">
|
||||
<div class="dark-card card">
|
||||
<div class="card-body dark-card">
|
||||
<h5 class="card-title">Convert from PDF</h5>
|
||||
<p class="card-text">Convert PDF to Image.</p>
|
||||
<a href="#" class="btn btn-primary" th:href="@{/convert-from-pdf}">Go</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 h-100">
|
||||
<div class="dark-card card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Add image to PDF</h5>
|
||||
<p class="card-text">Adds image/watermark to a PDF</p>
|
||||
<a href="#" class="btn btn-primary" th:href="@{/add-image}">Go</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 h-100">
|
||||
<div class="dark-card card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">PDF Organizer</h5>
|
||||
<p class="card-text">Rearrange PDF pages into any order (or
|
||||
remove)</p>
|
||||
<a href="#" class="btn btn-primary" th:href="@{/pdf-organizer}">Go</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{footer.html :: footer}"></div>
|
||||
</body>
|
||||
</html>
|
||||
61
src/main/resources/templates/merge-pdfs.html
Normal file
61
src/main/resources/templates/merge-pdfs.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<th:block th:insert="~{common :: head}"></th:block>
|
||||
<title>S-PDF MergePDFs</title>
|
||||
|
||||
<script>
|
||||
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
|
||||
evt.preventDefault();
|
||||
};
|
||||
|
||||
dropContainer.ondrop = function(evt) {
|
||||
// pretty simple -- but not for IE :(
|
||||
fileInput.files = evt.dataTransfer.files;
|
||||
|
||||
// If you want to use some of the dropped files
|
||||
const dT = new DataTransfer();
|
||||
dT.items.add(evt.dataTransfer.files[0]);
|
||||
dT.items.add(evt.dataTransfer.files[3]);
|
||||
fileInput.files = dT.files;
|
||||
|
||||
evt.preventDefault();
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:insert="~{navbar.html :: navbar}"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6" id="dropContainer">
|
||||
<h2>Merge multiple PDFs (2+)</h2>
|
||||
<form action="/merge-pdfs" method="post"
|
||||
enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label>Select (or drag & drop) all PDFs to merge</label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" multiple> <label
|
||||
class="custom-file-label">Choose PDFs</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group text-center">
|
||||
<button type="submit" class="btn btn-primary">Merge</button>
|
||||
</div>
|
||||
</form>
|
||||
<th:block th:insert="~{common :: filelist}"></th:block>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{footer.html :: footer}"></div>
|
||||
</body>
|
||||
</html>
|
||||
47
src/main/resources/templates/navbar.html
Normal file
47
src/main/resources/templates/navbar.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<div th:fragment="navbar">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#" th:href="@{/home}">Stirling PDF</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse"
|
||||
data-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">
|
||||
|
||||
<li class="nav-item"><a class="nav-link" href="#"
|
||||
th:href="@{/merge-pdfs}"
|
||||
th:classappend="${currentPage}=='/merge-pdfs' ? 'active' : ''">Merge
|
||||
PDFs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#"
|
||||
th:href="@{/split-pdfs}"
|
||||
th:classappend="${currentPage}=='/split-pdfs' ? 'active' : ''">Split
|
||||
PDFs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#"
|
||||
th:href="@{/convert-to-pdf}"
|
||||
th:classappend="${currentPage}=='/convert-to-pdf' ? 'active' : ''">Convert
|
||||
to PDF</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#"
|
||||
th:href="@{/convert-from-pdf}"
|
||||
th:classappend="${currentPage}=='/convert-from-pdf' ? 'active' : ''">Convert
|
||||
from PDF</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#"
|
||||
th:href="@{/add-image}"
|
||||
th:classappend="${currentPage}=='/add-image' ? 'active' : ''">Add
|
||||
image to PDF</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#"
|
||||
th:href="@{/pdf-organizer}"
|
||||
th:classappend="${currentPage}=='/pdf-organizer' ? 'active' : ''">PDF
|
||||
Organizer</a></li>
|
||||
|
||||
<input type="checkbox" id="toggle-dark-mode"
|
||||
th:onclick="javascript:toggleDarkMode()">
|
||||
<a class="nav-link" href="#" for="toggle-dark-mode">Dark Mode</a>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
42
src/main/resources/templates/pdf-organizer.html
Normal file
42
src/main/resources/templates/pdf-organizer.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<th:block th:insert="~{common :: head}"></th:block>
|
||||
<title>S-PDF Organizer</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:insert="~{navbar.html :: navbar}"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<h2>PDF Page Organizer</h2>
|
||||
|
||||
|
||||
|
||||
<form th:action="@{/rearrange-pages}" method="post"
|
||||
enctype="multipart/form-data">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" required> <label
|
||||
class="custom-file-label" for="fileInput">Choose PDF</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pageOrder">Page Order (Enter a comma-separated
|
||||
list of page numbers) :</label> <input type="text" class="form-control"
|
||||
id="fileInput" name="pageOrder"
|
||||
placeholder="(e.g. 1,3,2 or 4-8,2,10-12)" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Rearrange
|
||||
Pages</button>
|
||||
</form>
|
||||
<th:block th:insert="~{common :: filelist}"></th:block>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{footer.html :: footer}"></div>
|
||||
</body>
|
||||
</html>
|
||||
49
src/main/resources/templates/split-pdfs.html
Normal file
49
src/main/resources/templates/split-pdfs.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<th:block th:insert="~{common :: head}"></th:block>
|
||||
<title>S-PDF Split PDFs</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:insert="~{navbar.html :: navbar}"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<h1>Split PDF</h1>
|
||||
<p>The numbers you select are the page number you wish to do a
|
||||
split on</p>
|
||||
<p>As such selecting 1,3,7-8 would split a 12 page document into
|
||||
6 separate PDFS with:</p>
|
||||
<p>Document #1: Page 1</p>
|
||||
<p>Document #2: Page 2 and 3</p>
|
||||
<p>Document #3: Page 4, 5 and 6</p>
|
||||
<p>Document #4: Page 7</p>
|
||||
<p>Document #5: Page 8</p>
|
||||
<p>Document #6: Page 9 and 10</p>
|
||||
|
||||
<form th:action="@{/split-pages}" method="post"
|
||||
enctype="multipart/form-data">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" required> <label
|
||||
class="custom-file-label" for="fileInput">Choose PDF</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="pages">Enter pages to split on:</label> <input
|
||||
type="text" class="form-control" id="pages" name="pages"
|
||||
placeholder="1,3,5-10">
|
||||
</div>
|
||||
<br>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
<th:block th:insert="~{common :: filelist}"></th:block>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{footer.html :: footer}"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user