2023-01-29 18:06:53 +01:00
|
|
|
<!DOCTYPE html>
|
2023-04-03 00:59:22 +02:00
|
|
|
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
|
2023-01-29 18:06:53 +01:00
|
|
|
|
|
|
|
|
|
2023-02-03 21:26:35 +01:00
|
|
|
<th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
|
2023-01-29 18:06:53 +01:00
|
|
|
|
2023-02-04 14:15:03 +01:00
|
|
|
<style>
|
2023-02-11 15:27:15 +01:00
|
|
|
.features-container {
|
2023-04-15 20:55:55 +02:00
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
|
|
|
|
|
gap: 25px 30px;
|
2023-02-11 15:27:15 +01:00
|
|
|
}
|
2023-02-04 15:53:19 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
.feature-card {
|
2023-04-15 20:55:55 +02:00
|
|
|
border: 2px solid rgba(0, 0, 0, .25);
|
|
|
|
|
border-radius: 0.25rem;
|
|
|
|
|
padding: 1.25rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
background: rgba(13, 110, 253, 0.05);
|
|
|
|
|
transition: transform 0.3s, border 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.feature-card a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2023-02-11 15:27:15 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.feature-card .card-text {
|
2023-04-15 20:55:55 +02:00
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.feature-card:hover {
|
2023-04-17 18:16:18 +02:00
|
|
|
border: 1px solid rgba(0, 0, 0, .5);
|
2023-04-15 20:55:55 +02:00
|
|
|
cursor: pointer;
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.feature-card:hover .card-title {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
.card-title.text-primary {
|
2023-04-22 01:08:36 +02:00
|
|
|
color: #000; /* Replace with your desired shade of blue */
|
2023-02-11 15:27:15 +01:00
|
|
|
}
|
2023-04-22 00:32:39 +02:00
|
|
|
|
|
|
|
|
.home-card-icon {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
transform: translateY(-5px);
|
|
|
|
|
}
|
2023-04-22 01:08:36 +02:00
|
|
|
.home-card-icon-colour {
|
|
|
|
|
filter: invert(0.2) sepia(2) saturate(50) hue-rotate(190deg);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
.favorite-icon {
|
2023-05-13 14:15:24 +02:00
|
|
|
display: none;
|
2023-05-12 17:47:43 +02:00
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
right: 10px;
|
2023-05-13 14:15:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Only show the favorite icons when the parent card is being hovered over */
|
|
|
|
|
.feature-card:hover .favorite-icon {
|
|
|
|
|
display: block;
|
2023-05-12 17:47:43 +02:00
|
|
|
}
|
|
|
|
|
.favorite-icon img {
|
|
|
|
|
filter: brightness(0);
|
|
|
|
|
}
|
2023-02-04 14:15:03 +01:00
|
|
|
</style>
|
2023-01-29 18:06:53 +01:00
|
|
|
|
2023-02-03 21:26:35 +01:00
|
|
|
<body>
|
2023-01-29 18:06:53 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<div id="page-container">
|
|
|
|
|
<div id="content-wrap">
|
|
|
|
|
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
|
|
|
|
<!-- Jumbotron -->
|
|
|
|
|
<div class="jumbotron jumbotron-fluid" id="jumbotron">
|
|
|
|
|
<div class="container">
|
2023-04-01 22:02:54 +02:00
|
|
|
<h1 class="display-4" th:text="${@appName}"></h1>
|
2023-04-02 12:51:07 +02:00
|
|
|
<p class="lead" th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}"></p>
|
2023-02-11 15:27:15 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-02-03 21:26:35 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<!-- Features -->
|
|
|
|
|
<div class="features-container container">
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', svgPath='images/tools.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', svgPath='images/union.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', svgPath='images/layout-split.svg')}"></div>
|
2023-04-30 01:48:01 +02:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', svgPath='images/arrow-clockwise.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', svgPath='images/image.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', svgPath='images/image.svg')}"></div>
|
2023-04-30 01:48:01 +02:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', svgPath='images/sort-numeric-down.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', svgPath='images/file-earmark-richtext.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', svgPath='images/droplet.svg')}"></div>
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', svgPath='images/file.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', svgPath='images/file-earmark-x.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', svgPath='images/lock.svg')}"></div>
|
2023-04-30 01:48:01 +02:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', svgPath='images/unlock.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', svgPath='images/file-zip.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', svgPath='images/clipboard-data.svg')}"></div>
|
2023-02-24 23:47:26 +01:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', svgPath='images/shield-lock.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', svgPath='images/search.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', svgPath='images/images.svg')}"></div>
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='pdf-to-pdfa', cardTitle=#{home.pdfToPDFA.title}, cardText=#{home.pdfToPDFA.desc}, cardLink='pdf-to-pdfa', svgPath='images/file-earmark-pdf.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='pdf-to-word', cardTitle=#{home.PDFToWord.title}, cardText=#{home.PDFToWord.desc}, cardLink='pdf-to-word', svgPath='images/file-earmark-word.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='pdf-to-presentation', cardTitle=#{home.PDFToPresentation.title}, cardText=#{home.PDFToPresentation.desc}, cardLink='pdf-to-presentation', svgPath='images/file-earmark-ppt.svg')}"></div>
|
2023-04-16 23:03:30 +02:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='pdf-to-text', cardTitle=#{home.PDFToText.title}, cardText=#{home.PDFToText.desc}, cardLink='pdf-to-text', svgPath='images/filetype-txt.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='pdf-to-html', cardTitle=#{home.PDFToHTML.title}, cardText=#{home.PDFToHTML.desc}, cardLink='pdf-to-html', svgPath='images/filetype-html.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', svgPath='images/filetype-xml.svg')}"></div>
|
2023-04-16 23:03:30 +02:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', svgPath='images/scanner.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', svgPath='images/sign.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', svgPath='images/flatten.svg')}"></div>
|
2023-02-24 23:47:26 +01:00
|
|
|
|
2023-05-12 17:47:43 +02:00
|
|
|
<div th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', svgPath='images/wrench.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', svgPath='images/blank-file.svg')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', svgPath='images/scales.svg')}"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function toggleFavorite(element) {
|
|
|
|
|
var img = element.querySelector('img');
|
|
|
|
|
var card = element.closest('.feature-card');
|
|
|
|
|
var cardId = card.id;
|
|
|
|
|
if (img.src.endsWith('star.svg')) {
|
|
|
|
|
img.src = 'images/star-fill.svg';
|
|
|
|
|
card.classList.add('favorite');
|
|
|
|
|
localStorage.setItem(cardId, 'favorite');
|
|
|
|
|
} else {
|
|
|
|
|
img.src = 'images/star.svg';
|
|
|
|
|
card.classList.remove('favorite');
|
|
|
|
|
localStorage.removeItem(cardId);
|
|
|
|
|
}
|
|
|
|
|
reorderCards();
|
2023-05-12 19:16:47 +02:00
|
|
|
updateFavoritesDropdown();
|
2023-05-12 17:47:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function reorderCards() {
|
|
|
|
|
var container = document.querySelector('.features-container');
|
|
|
|
|
var cards = Array.from(container.getElementsByClassName('feature-card'));
|
|
|
|
|
cards.sort(function(a, b) {
|
|
|
|
|
var aIsFavorite = localStorage.getItem(a.id) === 'favorite';
|
|
|
|
|
var bIsFavorite = localStorage.getItem(b.id) === 'favorite';
|
|
|
|
|
if (aIsFavorite && !bIsFavorite) {
|
|
|
|
|
return -1;
|
|
|
|
|
}
|
|
|
|
|
if (!aIsFavorite && bIsFavorite) {
|
|
|
|
|
return 1;
|
|
|
|
|
}
|
|
|
|
|
return 0;
|
|
|
|
|
});
|
|
|
|
|
cards.forEach(function(card) {
|
|
|
|
|
container.appendChild(card);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
function initializeCards() {
|
|
|
|
|
var cards = document.querySelectorAll('.feature-card');
|
|
|
|
|
cards.forEach(function(card) {
|
|
|
|
|
var cardId = card.id;
|
|
|
|
|
var img = card.querySelector('.favorite-icon img');
|
|
|
|
|
if (localStorage.getItem(cardId) === 'favorite') {
|
|
|
|
|
img.src = 'images/star-fill.svg';
|
|
|
|
|
card.classList.add('favorite');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
reorderCards();
|
2023-05-12 19:16:47 +02:00
|
|
|
updateFavoritesDropdown();
|
2023-05-12 17:47:43 +02:00
|
|
|
}
|
|
|
|
|
window.onload = initializeCards;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
2023-02-11 15:27:15 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
|
|
|
|
</div>
|
2023-01-29 18:06:53 +01:00
|
|
|
</body>
|
|
|
|
|
|
2023-04-17 18:16:00 +02:00
|
|
|
</html>
|
