mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-11-01 01:21:18 +01:00
Merge pull request #93 from Sf298/main
Added a page for visually editing individual pages of a pdf client-side
This commit is contained in:
Anthony Stirling
GitHub
commit
4422787d4e
@ -0,0 +1,20 @@
|
||||
package stirling.software.SPDF.controller;
|
||||
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
|
||||
@Controller
|
||||
public class PageManagerController {
|
||||
|
||||
private static final Logger logger = LoggerFactory.getLogger(PageManagerController.class);
|
||||
|
||||
@GetMapping("/page-manager")
|
||||
public String hello(Model model) {
|
||||
model.addAttribute("currentPage", "page-manager");
|
||||
return "page-manager";
|
||||
}
|
||||
|
||||
}
|
||||
@ -23,6 +23,7 @@ close=Close
|
||||
#############
|
||||
home.desc=Your locally hosted one-stop-shop for all your PDF needs.
|
||||
|
||||
navbar.pages=Pages
|
||||
navbar.convert=Convert
|
||||
navbar.security=Security
|
||||
navbar.other=Other
|
||||
@ -46,6 +47,9 @@ home.pdfToImage.desc=Convert a PDF to a image. (PNG, JPEG, GIF)
|
||||
home.pdfOrganiser.title=Organise
|
||||
home.pdfOrganiser.desc=Remove/Rearrange pages in any order
|
||||
|
||||
home.pageManager.title=Page Manager
|
||||
home.pageManager.desc=Merge, Rotate, Rearrange, and Remove pages
|
||||
|
||||
home.addImage.title=Add image onto PDF
|
||||
home.addImage.desc=Adds a image onto a set location on the PDF (Work in progress)
|
||||
|
||||
@ -179,6 +183,10 @@ pdfOrganiser.title=Page Organiser
|
||||
pdfOrganiser.header=PDF Page Organiser
|
||||
pdfOrganiser.submit=Rearrange Pages
|
||||
|
||||
#pageManager
|
||||
pageManager.title=Page Manager
|
||||
pageManager.header=PDF Page Manager
|
||||
|
||||
|
||||
#pageRemover
|
||||
pageRemover.title=Page Remover
|
||||
|
||||
16
src/main/resources/static/pdf-lib.min.js
vendored
Normal file
16
src/main/resources/static/pdf-lib.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -22,6 +22,9 @@
|
||||
<!-- PDF.js -->
|
||||
<script src="pdfjs/pdf.js"></script>
|
||||
|
||||
<!-- PDF-Lib -->
|
||||
<script src="pdf-lib.min.js"></script>
|
||||
|
||||
<!-- Custom -->
|
||||
<link rel="stylesheet" href="css/general.css">
|
||||
<link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">
|
||||
|
||||
@ -88,13 +88,18 @@ function compareVersions(version1, version2) {
|
||||
|
||||
<ul class="navbar-nav mr-auto flex-nowrap">
|
||||
|
||||
<li class="nav-item"><a class="nav-link" href="#" th:href="@{merge-pdfs}" th:classappend="${currentPage}=='merge-pdfs' ? 'active' : ''" th:text="#{home.merge.title}"></a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#" th:href="@{page-manager}" th:classappend="${currentPage}=='page-manager' ? 'active' : ''" th:text="#{home.pageManager.title}"></a></li>
|
||||
|
||||
<li class="nav-item"><a class="nav-link" href="#" th:href="@{split-pdfs}" th:classappend="${currentPage}=='split-pdfs' ? 'active' : ''" th:text="#{home.split.title}"></a></li>
|
||||
|
||||
<li class="nav-item"><a class="nav-link" href="#" th:href="@{pdf-organizer}" th:classappend="${currentPage}=='pdf-organizer' ? 'active' : ''" th:text="#{home.pdfOrganiser.title}"></a></li>
|
||||
|
||||
<li class="nav-item"><a class="nav-link" href="#" th:href="@{rotate-pdf}" th:classappend="${currentPage}=='rotate-pdf' ? 'active' : ''" th:text="#{home.rotate.title}"></a></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"
|
||||
aria-haspopup="true" aria-expanded="false" th:text="#{navbar.pages}"></a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<!-- Existing menu items -->
|
||||
<a class="dropdown-item" href="#" th:href="@{merge-pdfs}" th:classappend="${currentPage}=='merge-pdfs' ? 'active' : ''" th:text="#{home.merge.title}"></a>
|
||||
<a class="dropdown-item" href="#" th:href="@{split-pdfs}" th:classappend="${currentPage}=='split-pdfs' ? 'active' : ''" th:text="#{home.split.title}"></a>
|
||||
<a class="dropdown-item" href="#" th:href="@{pdf-organizer}" th:classappend="${currentPage}=='pdf-organizer' ? 'active' : ''" th:text="#{home.pdfOrganiser.title}"></a>
|
||||
<a class="dropdown-item" href="#" th:href="@{rotate-pdf}" th:classappend="${currentPage}=='rotate-pdf' ? 'active' : ''" th:text="#{home.rotate.title}"></a>
|
||||
</div>
|
||||
</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"
|
||||
aria-haspopup="true" aria-expanded="false" th:text="#{navbar.convert}"></a>
|
||||
|
||||
@ -65,6 +65,8 @@
|
||||
<!-- Features -->
|
||||
<div class="features-container container">
|
||||
|
||||
<div th:replace="~{fragments/card :: card(cardTitle=#{home.pageManager.title}, cardText=#{home.pageManager.desc}, cardLink='page-manager')}"></div>
|
||||
|
||||
<div th:replace="~{fragments/card :: card(cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs')}"></div>
|
||||
|
||||
<div th:replace="~{fragments/card :: card(cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs')}"></div>
|
||||
|
||||
375
src/main/resources/templates/page-manager.html
Normal file
375
src/main/resources/templates/page-manager.html
Normal file
@ -0,0 +1,375 @@
|
||||
<!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=#{pageManager.title})}"></th:block>
|
||||
|
||||
|
||||
<body>
|
||||
<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" style="text-align: center">
|
||||
<h2 th:text="#{pageManager.header}"></h2>
|
||||
|
||||
<div id="global-buttons-container">
|
||||
|
||||
<button class="btn btn-primary" onclick="addPdfs()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
|
||||
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-secondary" onclick="rotateAll(-90)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
|
||||
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-secondary" onclick="rotateAll(90)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
|
||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button id="export-button" class="btn btn-primary" onclick="exportPdf()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
|
||||
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
|
||||
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="pages-container"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var myDocument = null;
|
||||
var myRenderer = null;
|
||||
const pagesContainer = document.getElementById("pages-container");
|
||||
|
||||
function addPdfs() {
|
||||
var input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.multiple = true;
|
||||
|
||||
input.onchange = async(e) => {
|
||||
const files = e.target.files;
|
||||
for (var i=0; i < files.length; i++) {
|
||||
addPdfFile(files[i]);
|
||||
}
|
||||
}
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
async function addPdfFile(file) {
|
||||
const { renderer, pdfDocument } = await loadFile(file);
|
||||
for (var i=0; i < renderer.pageCount; i++) {
|
||||
const div = document.createElement('div');
|
||||
div.classList.add("page-container");
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = await renderer.renderPage(i);
|
||||
img.pageIdx = i;
|
||||
img.rend = renderer;
|
||||
img.doc = pdfDocument;
|
||||
div.appendChild(img);
|
||||
|
||||
const buttonContainer = document.createElement('div');
|
||||
buttonContainer.classList.add("button-container");
|
||||
|
||||
const moveUp = document.createElement('button');
|
||||
moveUp.classList.add("move-up-button","btn", "btn-secondary");
|
||||
moveUp.innerHTML = '<i class="bi bi-arrow-up-short"></i>';
|
||||
moveUp.onclick = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
console.log("imgContainer", imgContainer);
|
||||
const sibling = imgContainer.previousSibling;
|
||||
console.log("sibling", sibling);
|
||||
if (sibling) {
|
||||
pagesContainer.removeChild(imgContainer);
|
||||
pagesContainer.insertBefore(imgContainer, sibling);
|
||||
imgContainer.scrollIntoView({
|
||||
behavior: "instant",
|
||||
block: "center",
|
||||
})
|
||||
}
|
||||
}
|
||||
buttonContainer.appendChild(moveUp);
|
||||
|
||||
const moveDown = document.createElement('button');
|
||||
moveDown.classList.add("move-down-button","btn", "btn-secondary");
|
||||
moveDown.innerHTML = '<i class="bi bi-arrow-down-short"></i>';
|
||||
moveDown.onclick = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
console.log("imgContainer", imgContainer);
|
||||
const sibling = imgContainer.nextSibling;
|
||||
console.log("sibling", sibling);
|
||||
if (sibling) {
|
||||
pagesContainer.removeChild(imgContainer);
|
||||
if (sibling.nextSibling) {
|
||||
pagesContainer.insertBefore(imgContainer, sibling.nextSibling);
|
||||
console.log("insert sibling.nextSibling", sibling.nextSibling);
|
||||
} else {
|
||||
pagesContainer.appendChild(imgContainer)
|
||||
console.log("append");
|
||||
}
|
||||
imgContainer.scrollIntoView({
|
||||
behavior: "instant",
|
||||
block: "center",
|
||||
})
|
||||
}
|
||||
}
|
||||
buttonContainer.appendChild(moveDown);
|
||||
|
||||
const rotateCCW = document.createElement('button');
|
||||
rotateCCW.classList.add("btn", "btn-secondary");
|
||||
rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
|
||||
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
|
||||
</svg>`;
|
||||
rotateCCW.onclick = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
const img = imgContainer.querySelector("img");
|
||||
|
||||
rotateElement(img, -90)
|
||||
}
|
||||
buttonContainer.appendChild(rotateCCW);
|
||||
|
||||
const rotateCW = document.createElement('button');
|
||||
rotateCW.classList.add("btn", "btn-secondary");
|
||||
rotateCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
|
||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
|
||||
</svg>`;
|
||||
rotateCW.onclick = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
const img = imgContainer.querySelector("img");
|
||||
|
||||
rotateElement(img, 90)
|
||||
}
|
||||
buttonContainer.appendChild(rotateCW);
|
||||
|
||||
const deletePage = document.createElement('button');
|
||||
deletePage.classList.add("btn", "btn-secondary");
|
||||
deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
|
||||
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
|
||||
</svg>`;
|
||||
deletePage.onclick = e => {
|
||||
var imgContainer = e.target;
|
||||
while (!imgContainer.classList.contains("page-container")) {
|
||||
imgContainer = imgContainer.parentNode;
|
||||
}
|
||||
pagesContainer.removeChild(imgContainer);
|
||||
}
|
||||
buttonContainer.appendChild(deletePage);
|
||||
|
||||
div.appendChild(buttonContainer);
|
||||
|
||||
pagesContainer.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
function rotateElement(element, deg) {
|
||||
var lastTransform = element.style.rotate;
|
||||
if (!lastTransform) {
|
||||
lastTransform = "0";
|
||||
}
|
||||
const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
|
||||
const newAngle = lastAngle + deg;
|
||||
|
||||
element.style.rotate = newAngle + "deg";
|
||||
}
|
||||
|
||||
function rotateAll(deg) {
|
||||
for (var i=0; i<pagesContainer.childNodes.length; i++) {
|
||||
const img = pagesContainer.childNodes[i].querySelector("img");
|
||||
rotateElement(img, deg)
|
||||
}
|
||||
}
|
||||
|
||||
async function exportPdf() {
|
||||
const pdfDoc = await PDFLib.PDFDocument.create();
|
||||
for (var i=0; i<pagesContainer.childNodes.length; i++) {
|
||||
const img = pagesContainer.childNodes[i].querySelector("img");
|
||||
const pages = await pdfDoc.copyPages(img.doc, [img.pageIdx])
|
||||
const page = pages[0];
|
||||
|
||||
const rotation = img.style.rotate;
|
||||
if (rotation) {
|
||||
const rotationAngle = parseInt(rotation.replace(/[^\d-]/g, ''));
|
||||
console.log(img.style.rotate, img.style.rotate.replace(/[^\d-]/g, ''))
|
||||
page.setRotation(PDFLib.degrees(page.getRotation().angle + rotationAngle))
|
||||
}
|
||||
|
||||
pdfDoc.addPage(page);
|
||||
}
|
||||
const pdfBytes = await pdfDoc.save()
|
||||
const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||||
const url = URL.createObjectURL(pdfBlob);
|
||||
|
||||
const downloadLink = document.createElement('a');
|
||||
downloadLink.href = url;
|
||||
downloadLink.download = 'example.pdf';
|
||||
downloadLink.click(); // Simulate a click on the download link to start the download
|
||||
}
|
||||
|
||||
async function loadFile(file) {
|
||||
var objectUrl = URL.createObjectURL(file);
|
||||
var pdfDocument = await toPdfLib(objectUrl);
|
||||
var renderer = await toRenderer(objectUrl);
|
||||
|
||||
myDocument = pdfDocument;
|
||||
myRenderer = renderer;
|
||||
console.log(renderer, pdfDocument)
|
||||
|
||||
return { renderer, pdfDocument };
|
||||
}
|
||||
async function toPdfLib(objectUrl) {
|
||||
const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
|
||||
const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);
|
||||
return pdfDoc;
|
||||
}
|
||||
async function toRenderer(objectUrl) {
|
||||
const pdf = await pdfjsLib.getDocument(objectUrl).promise;
|
||||
return {
|
||||
document: pdf,
|
||||
pageCount: pdf.numPages,
|
||||
renderPage: async function(pageIdx) {
|
||||
const page = await this.document.getPage(pageIdx+1);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
// set the canvas size to the size of the page
|
||||
if (page.rotate == 90 || page.rotate == 270) {
|
||||
canvas.width = page.view[3];
|
||||
canvas.height = page.view[2];
|
||||
} else {
|
||||
canvas.width = page.view[2];
|
||||
canvas.height = page.view[3];
|
||||
}
|
||||
|
||||
// render the page onto the canvas
|
||||
var renderContext = {
|
||||
canvasContext: canvas.getContext("2d"),
|
||||
viewport: page.getViewport({ scale: 1 })
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#global-buttons-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
|
||||
background: rgba(13, 110, 253, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, .25);
|
||||
backdrop-filter: blur(2px);
|
||||
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
z-index: 10;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#global-buttons-container > * {
|
||||
padding: 0.6rem 0.75rem;
|
||||
}
|
||||
#global-buttons-container svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
#export-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#pages-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 0px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 500px;
|
||||
aspect-ratio: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-container img {
|
||||
max-width: calc(100% - 15px);
|
||||
max-height: calc(100% - 15px);
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
translate: -50% -50%;
|
||||
box-shadow: 0 0 10px rgba(0,0,0);
|
||||
transition: rotate .3s;
|
||||
}
|
||||
|
||||
.page-container .button-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
translate: 0 -50%;
|
||||
right: 6px;
|
||||
}
|
||||
.page-container .button-container > * {
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 3px;
|
||||
display: block;
|
||||
}
|
||||
.page-container svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.page-container:first-child .move-up-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
.page-container:last-child .move-down-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#add-pdf-button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user