mirror of
				https://github.com/Frooodle/Stirling-PDF.git
				synced 2025-11-01 01:21:18 +01:00 
			
		
		
		
	remove legacy homepage (#3518)
# Description of Changes Please provide a summary of the changes, including: - What was changed - Why the change was made - Any challenges encountered Closes #(issue_number) --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing) for more details.
This commit is contained in:
		
							parent
							
								
									bef86b44e4
								
							
						
					
					
						commit
						70349fb7e3
					
				@ -77,9 +77,8 @@ public class HomeWebController {
 | 
				
			|||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    @GetMapping("/home-legacy")
 | 
					    @GetMapping("/home-legacy")
 | 
				
			||||||
    public String homeLegacy(Model model) {
 | 
					    public String redirectHomeLegacy() {
 | 
				
			||||||
        model.addAttribute("currentPage", "home-legacy");
 | 
					        return "redirect:/";
 | 
				
			||||||
        return "home-legacy";
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    @GetMapping(value = "/robots.txt", produces = MediaType.TEXT_PLAIN_VALUE)
 | 
					    @GetMapping(value = "/robots.txt", produces = MediaType.TEXT_PLAIN_VALUE)
 | 
				
			||||||
 | 
				
			|||||||
@ -1,229 +0,0 @@
 | 
				
			|||||||
#searchBar {
 | 
					 | 
				
			||||||
    color: var(--md-sys-color-on-surface);
 | 
					 | 
				
			||||||
    background-color: var(--md-sys-color-surface-container-low);
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
    font-size: 16px;
 | 
					 | 
				
			||||||
    margin-bottom: 2rem;
 | 
					 | 
				
			||||||
    padding: 0.75rem 3.5rem;
 | 
					 | 
				
			||||||
    border: 1px solid var(--md-sys-color-outline-variant);
 | 
					 | 
				
			||||||
    border-radius: 3rem;
 | 
					 | 
				
			||||||
    outline-color: var(--md-sys-color-outline-variant);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  #filtersContainer {
 | 
					 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
    align-items: center;
 | 
					 | 
				
			||||||
    justify-content: center;
 | 
					 | 
				
			||||||
    gap: 10px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .filter-button {
 | 
					 | 
				
			||||||
    color: var(--md-sys-color-secondary);
 | 
					 | 
				
			||||||
    user-select: none;
 | 
					 | 
				
			||||||
    cursor: pointer;
 | 
					 | 
				
			||||||
    transition: transform 0.3s;
 | 
					 | 
				
			||||||
    transform-origin: center center;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .filter-button:hover {
 | 
					 | 
				
			||||||
    transform: scale(1.08);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .search-icon {
 | 
					 | 
				
			||||||
    position: absolute;
 | 
					 | 
				
			||||||
    margin: 0.75rem 1rem;
 | 
					 | 
				
			||||||
    border: 0.1rem solid transparent;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .features-container {
 | 
					 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    flex-direction: column;
 | 
					 | 
				
			||||||
    gap: 30px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-group-legacy {
 | 
					 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    flex-direction: column;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-group-header {
 | 
					 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    align-items: center;
 | 
					 | 
				
			||||||
    justify-content: flex-start;
 | 
					 | 
				
			||||||
    color: var(--md-sys-color-on-surface);
 | 
					 | 
				
			||||||
    margin-bottom: 15px;
 | 
					 | 
				
			||||||
    user-select: none;
 | 
					 | 
				
			||||||
    cursor: pointer;
 | 
					 | 
				
			||||||
    gap: 10px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-group-container {
 | 
					 | 
				
			||||||
    display: grid;
 | 
					 | 
				
			||||||
    grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
 | 
					 | 
				
			||||||
    gap: 30px 30px;
 | 
					 | 
				
			||||||
    overflow: hidden;
 | 
					 | 
				
			||||||
    margin: -20px;
 | 
					 | 
				
			||||||
    padding: 20px;
 | 
					 | 
				
			||||||
    box-sizing:content-box;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-group-container.animated-group {
 | 
					 | 
				
			||||||
    transition: 0.5s all;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-group-legacy.collapsed>.feature-group-container {
 | 
					 | 
				
			||||||
    max-height: 0 !important;
 | 
					 | 
				
			||||||
    margin: 0;
 | 
					 | 
				
			||||||
    padding: 0;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .header-expand-button {
 | 
					 | 
				
			||||||
    transition: 0.5s all;
 | 
					 | 
				
			||||||
    transform: rotate(90deg);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .header-expand-button.collapsed {
 | 
					 | 
				
			||||||
    transform: rotate(0deg);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-card {
 | 
					 | 
				
			||||||
    border: 1px solid var(--md-sys-color-surface-5);
 | 
					 | 
				
			||||||
    border-radius: 1.75rem;
 | 
					 | 
				
			||||||
    padding: 1.25rem;
 | 
					 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    flex-direction: column;
 | 
					 | 
				
			||||||
    align-items: flex-start;
 | 
					 | 
				
			||||||
    background: var(--md-sys-color-surface-5);
 | 
					 | 
				
			||||||
    transition:
 | 
					 | 
				
			||||||
      transform 0.3s,
 | 
					 | 
				
			||||||
      border 0.3s;
 | 
					 | 
				
			||||||
    transform-origin: center center;
 | 
					 | 
				
			||||||
    outline: 0px solid transparent;
 | 
					 | 
				
			||||||
    position:relative;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-card a {
 | 
					 | 
				
			||||||
    text-decoration: none;
 | 
					 | 
				
			||||||
    color: var(--md-sys-color-on-surface);
 | 
					 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    flex-direction: column;
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
    height: 100%;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-card .card-text {
 | 
					 | 
				
			||||||
    font-size: .875rem;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .feature-card:hover {
 | 
					 | 
				
			||||||
    cursor: pointer;
 | 
					 | 
				
			||||||
    transform: scale(1.08);
 | 
					 | 
				
			||||||
    box-shadow: var(--md-sys-elevation-2);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .card-title.text-primary {
 | 
					 | 
				
			||||||
    color: #000;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .home-card-icon {
 | 
					 | 
				
			||||||
    width: 3rem;
 | 
					 | 
				
			||||||
    height: 3rem;
 | 
					 | 
				
			||||||
    transform: translateY(-5px);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .favorite-icon {
 | 
					 | 
				
			||||||
    display: none !important;
 | 
					 | 
				
			||||||
    position: absolute;
 | 
					 | 
				
			||||||
    top: 10px;
 | 
					 | 
				
			||||||
    right: 10px;
 | 
					 | 
				
			||||||
    color: var(--md-sys-color-secondary);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  #tool-icon {
 | 
					 | 
				
			||||||
    height: 100%;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  #tool-text {
 | 
					 | 
				
			||||||
    margin: 0.0rem 0 0 1.25rem;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .card-title {
 | 
					 | 
				
			||||||
    margin-bottom: 1rem;
 | 
					 | 
				
			||||||
    font-size: 1.1rem;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  /* Only show the favorite icons when the parent card is being hovered over */
 | 
					 | 
				
			||||||
  .feature-card:hover .favorite-icon {
 | 
					 | 
				
			||||||
    display: block  !important;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .favorite-icon img {
 | 
					 | 
				
			||||||
    filter: brightness(0) invert(var(--md-theme-filter-color));
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .favorite-icon:hover .material-symbols-rounded {
 | 
					 | 
				
			||||||
    transform: scale(1.2);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .favorite-icon .material-symbols-rounded.fill{
 | 
					 | 
				
			||||||
    color: #f5c000;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .jumbotron {
 | 
					 | 
				
			||||||
    padding: 3rem 3rem;
 | 
					 | 
				
			||||||
    /* Reduce vertical padding */
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .lookatme {
 | 
					 | 
				
			||||||
    opacity: 1;
 | 
					 | 
				
			||||||
    position: relative;
 | 
					 | 
				
			||||||
    display: inline-block;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .lookatme::after {
 | 
					 | 
				
			||||||
    color: #e33100;
 | 
					 | 
				
			||||||
    text-shadow: 0 0 5px #e33100;
 | 
					 | 
				
			||||||
    /* in the html, the data-lookatme-text attribute must */
 | 
					 | 
				
			||||||
    /* contain the same text as the .lookatme element */
 | 
					 | 
				
			||||||
    content: attr(data-lookatme-text);
 | 
					 | 
				
			||||||
    padding: inherit;
 | 
					 | 
				
			||||||
    position: absolute;
 | 
					 | 
				
			||||||
    inset: 0 0 0 0;
 | 
					 | 
				
			||||||
    z-index: 1;
 | 
					 | 
				
			||||||
    /* 20 steps / 2 seconds = 10fps */
 | 
					 | 
				
			||||||
    -webkit-animation: 2s infinite Pulse steps(20);
 | 
					 | 
				
			||||||
    animation: 2s infinite Pulse steps(20);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  @keyframes Pulse {
 | 
					 | 
				
			||||||
    from {
 | 
					 | 
				
			||||||
      opacity: 0;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    50% {
 | 
					 | 
				
			||||||
      opacity: 1;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    to {
 | 
					 | 
				
			||||||
      opacity: 0;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .update-notice {
 | 
					 | 
				
			||||||
    animation: scale 1s infinite alternate;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  @keyframes scale {
 | 
					 | 
				
			||||||
    0% {
 | 
					 | 
				
			||||||
      transform: scale(0.96);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    100% {
 | 
					 | 
				
			||||||
      transform: scale(1);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .hidden {
 | 
					 | 
				
			||||||
    visibility: hidden;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
@ -126,11 +126,7 @@ function addToFavorites(entryId) {
 | 
				
			|||||||
    localStorage.setItem('favoritesList', JSON.stringify(favoritesList));
 | 
					    localStorage.setItem('favoritesList', JSON.stringify(favoritesList));
 | 
				
			||||||
    updateFavoritesDropdown();
 | 
					    updateFavoritesDropdown();
 | 
				
			||||||
    updateFavoriteIcons();
 | 
					    updateFavoriteIcons();
 | 
				
			||||||
    const currentPath = window.location.pathname;
 | 
					 
 | 
				
			||||||
    if (currentPath.includes('home-legacy')) {
 | 
					 | 
				
			||||||
      syncFavoritesLegacy();
 | 
					 | 
				
			||||||
    } else {
 | 
					 | 
				
			||||||
      initializeCards();
 | 
					      initializeCards();
 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
@ -1,266 +0,0 @@
 | 
				
			|||||||
function filterCardsLegacy() {
 | 
					 | 
				
			||||||
  var input = document.getElementById('searchBar');
 | 
					 | 
				
			||||||
  var filter = input.value.toUpperCase();
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  let featureGroups = document.querySelectorAll('.feature-group-legacy');
 | 
					 | 
				
			||||||
  const collapsedGroups = getCollapsedGroups();
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  for (const featureGroup of featureGroups) {
 | 
					 | 
				
			||||||
    var cards = featureGroup.querySelectorAll('.feature-card');
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    let groupMatchesFilter = false;
 | 
					 | 
				
			||||||
    for (var i = 0; i < cards.length; i++) {
 | 
					 | 
				
			||||||
      var card = cards[i];
 | 
					 | 
				
			||||||
      var title = card.querySelector('h5.card-title').innerText;
 | 
					 | 
				
			||||||
      var text = card.querySelector('p.card-text').innerText;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // Get the navbar tags associated with the card
 | 
					 | 
				
			||||||
      var navbarItem = document.querySelector(`a.dropdown-item[href="${card.id}"]`);
 | 
					 | 
				
			||||||
      var navbarTags = navbarItem ? navbarItem.getAttribute('data-bs-tags') : '';
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      var content = title + ' ' + text + ' ' + navbarTags;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      if (content.toUpperCase().indexOf(filter) > -1) {
 | 
					 | 
				
			||||||
        card.style.display = '';
 | 
					 | 
				
			||||||
        groupMatchesFilter = true;
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        card.style.display = 'none';
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    if (!groupMatchesFilter) {
 | 
					 | 
				
			||||||
      featureGroup.style.display = 'none';
 | 
					 | 
				
			||||||
    } else {
 | 
					 | 
				
			||||||
      featureGroup.style.display = '';
 | 
					 | 
				
			||||||
      resetOrTemporarilyExpandGroup(featureGroup, filter, collapsedGroups);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function getCollapsedGroups() {
 | 
					 | 
				
			||||||
  return localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function resetOrTemporarilyExpandGroup(featureGroup, filterKeywords = '', collapsedGroups = []) {
 | 
					 | 
				
			||||||
  const shouldResetCollapse = filterKeywords.trim() === '';
 | 
					 | 
				
			||||||
  if (shouldResetCollapse) {
 | 
					 | 
				
			||||||
    // Resetting the group's expand/collapse to its original state (as in collapsed groups)
 | 
					 | 
				
			||||||
    const isCollapsed = collapsedGroups.indexOf(featureGroup.id) != -1;
 | 
					 | 
				
			||||||
    expandCollapseToggle(featureGroup, !isCollapsed);
 | 
					 | 
				
			||||||
  } else {
 | 
					 | 
				
			||||||
    // Temporarily expands feature group without affecting the actual/stored collapsed groups
 | 
					 | 
				
			||||||
    featureGroup.classList.remove('collapsed');
 | 
					 | 
				
			||||||
    featureGroup.querySelector('.header-expand-button').classList.remove('collapsed');
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function updateFavoritesSectionLegacy() {
 | 
					 | 
				
			||||||
  const favoritesContainer = document.getElementById('groupFavorites').querySelector('.feature-group-container');
 | 
					 | 
				
			||||||
  favoritesContainer.innerHTML = '';
 | 
					 | 
				
			||||||
  const cards = Array.from(document.querySelectorAll('.feature-card:not(.duplicate)'));
 | 
					 | 
				
			||||||
  const addedCardIds = new Set();
 | 
					 | 
				
			||||||
  let favoritesAmount = 0;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  cards.forEach((card) => {
 | 
					 | 
				
			||||||
    const favouritesList = JSON.parse(localStorage.getItem('favoritesList') || '[]');
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    if (favouritesList.includes(card.id) && !addedCardIds.has(card.id)) {
 | 
					 | 
				
			||||||
      const duplicate = card.cloneNode(true);
 | 
					 | 
				
			||||||
      duplicate.classList.add('duplicate');
 | 
					 | 
				
			||||||
      favoritesContainer.appendChild(duplicate);
 | 
					 | 
				
			||||||
      addedCardIds.add(card.id);
 | 
					 | 
				
			||||||
      favoritesAmount++;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (favoritesAmount === 0) {
 | 
					 | 
				
			||||||
    document.getElementById('groupFavorites').style.display = 'none';
 | 
					 | 
				
			||||||
  } else {
 | 
					 | 
				
			||||||
    document.getElementById('groupFavorites').style.display = 'flex';
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  reorderCards(favoritesContainer);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function syncFavoritesLegacy() {
 | 
					 | 
				
			||||||
  const cards = Array.from(document.querySelectorAll('.feature-card'));
 | 
					 | 
				
			||||||
  cards.forEach((card) => {
 | 
					 | 
				
			||||||
    const isFavorite = localStorage.getItem(card.id) === 'favorite';
 | 
					 | 
				
			||||||
    const starIcon = card.querySelector('.favorite-icon span.material-symbols-rounded');
 | 
					 | 
				
			||||||
    if (starIcon) {
 | 
					 | 
				
			||||||
      if (isFavorite) {
 | 
					 | 
				
			||||||
        starIcon.classList.remove('no-fill');
 | 
					 | 
				
			||||||
        starIcon.classList.add('fill');
 | 
					 | 
				
			||||||
        card.classList.add('favorite');
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        starIcon.classList.remove('fill');
 | 
					 | 
				
			||||||
        starIcon.classList.add('no-fill');
 | 
					 | 
				
			||||||
        card.classList.remove('favorite');
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
  updateFavoritesSectionLegacy();
 | 
					 | 
				
			||||||
  updateFavoritesDropdown();
 | 
					 | 
				
			||||||
  filterCardsLegacy();
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function reorderCards(container) {
 | 
					 | 
				
			||||||
  var cards = Array.from(container.querySelectorAll('.feature-card'));
 | 
					 | 
				
			||||||
  cards.forEach(function (card) {
 | 
					 | 
				
			||||||
    container.removeChild(card);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
  cards.sort(function (a, b) {
 | 
					 | 
				
			||||||
    var aIsFavorite = localStorage.getItem(a.id) === 'favorite';
 | 
					 | 
				
			||||||
    var bIsFavorite = localStorage.getItem(b.id) === 'favorite';
 | 
					 | 
				
			||||||
    if (a.id === 'update-link') {
 | 
					 | 
				
			||||||
      return -1;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    if (b.id === 'update-link') {
 | 
					 | 
				
			||||||
      return 1;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    if (aIsFavorite && !bIsFavorite) {
 | 
					 | 
				
			||||||
      return -1;
 | 
					 | 
				
			||||||
    } else if (!aIsFavorite && bIsFavorite) {
 | 
					 | 
				
			||||||
      return 1;
 | 
					 | 
				
			||||||
    } else {
 | 
					 | 
				
			||||||
      return a.id > b.id;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
  cards.forEach(function (card) {
 | 
					 | 
				
			||||||
    container.appendChild(card);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function reorderAllCards() {
 | 
					 | 
				
			||||||
  const containers = Array.from(document.querySelectorAll('.feature-group-container'));
 | 
					 | 
				
			||||||
  containers.forEach(function (container) {
 | 
					 | 
				
			||||||
    reorderCards(container);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function initializeCardsLegacy() {
 | 
					 | 
				
			||||||
  reorderAllCards();
 | 
					 | 
				
			||||||
  updateFavoritesSectionLegacy();
 | 
					 | 
				
			||||||
  updateFavoritesDropdown();
 | 
					 | 
				
			||||||
  filterCardsLegacy();
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function showFavoritesOnly() {
 | 
					 | 
				
			||||||
  const groups = Array.from(document.querySelectorAll('.feature-group-legacy'));
 | 
					 | 
				
			||||||
  if (localStorage.getItem('favoritesOnly') === 'true') {
 | 
					 | 
				
			||||||
    groups.forEach((group) => {
 | 
					 | 
				
			||||||
      if (group.id !== 'groupFavorites') {
 | 
					 | 
				
			||||||
        group.style.display = 'none';
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  } else {
 | 
					 | 
				
			||||||
    groups.forEach((group) => {
 | 
					 | 
				
			||||||
      if (group.id !== 'groupFavorites') {
 | 
					 | 
				
			||||||
        group.style.display = 'flex';
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function toggleFavoritesOnly() {
 | 
					 | 
				
			||||||
  if (localStorage.getItem('favoritesOnly') === 'true') {
 | 
					 | 
				
			||||||
    localStorage.setItem('favoritesOnly', 'false');
 | 
					 | 
				
			||||||
  } else {
 | 
					 | 
				
			||||||
    localStorage.setItem('favoritesOnly', 'true');
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  showFavoritesOnly();
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// Expands a feature group on true, collapses it on false and toggles state on null.
 | 
					 | 
				
			||||||
function expandCollapseToggle(group, expand = null) {
 | 
					 | 
				
			||||||
  if (expand === null) {
 | 
					 | 
				
			||||||
    group.classList.toggle('collapsed');
 | 
					 | 
				
			||||||
    group.querySelector('.header-expand-button').classList.toggle('collapsed');
 | 
					 | 
				
			||||||
  } else if (expand) {
 | 
					 | 
				
			||||||
    group.classList.remove('collapsed');
 | 
					 | 
				
			||||||
    group.querySelector('.header-expand-button').classList.remove('collapsed');
 | 
					 | 
				
			||||||
  } else {
 | 
					 | 
				
			||||||
    group.classList.add('collapsed');
 | 
					 | 
				
			||||||
    group.querySelector('.header-expand-button').classList.add('collapsed');
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
 | 
					 | 
				
			||||||
  const groupIndex = collapsed.indexOf(group.id);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (group.classList.contains('collapsed')) {
 | 
					 | 
				
			||||||
    if (groupIndex === -1) {
 | 
					 | 
				
			||||||
      collapsed.push(group.id);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  } else {
 | 
					 | 
				
			||||||
    if (groupIndex !== -1) {
 | 
					 | 
				
			||||||
      collapsed.splice(groupIndex, 1);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  localStorage.setItem('collapsedGroups', JSON.stringify(collapsed));
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function expandCollapseAll(expandAll) {
 | 
					 | 
				
			||||||
  const groups = Array.from(document.querySelectorAll('.feature-group-legacy'));
 | 
					 | 
				
			||||||
  groups.forEach((group) => {
 | 
					 | 
				
			||||||
    expandCollapseToggle(group, expandAll);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
window.onload = function () {
 | 
					 | 
				
			||||||
  initializeCardsLegacy();
 | 
					 | 
				
			||||||
  syncFavoritesLegacy(); // Ensure everything is in sync on page load
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
document.addEventListener('DOMContentLoaded', function () {
 | 
					 | 
				
			||||||
  const materialIcons = new FontFaceObserver('Material Symbols Rounded');
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  materialIcons
 | 
					 | 
				
			||||||
    .load()
 | 
					 | 
				
			||||||
    .then(() => {
 | 
					 | 
				
			||||||
      document.querySelectorAll('.feature-card.hidden').forEach((el) => {
 | 
					 | 
				
			||||||
        el.classList.remove('hidden');
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    })
 | 
					 | 
				
			||||||
    .catch(() => {
 | 
					 | 
				
			||||||
      console.error('Material Symbols Rounded font failed to load.');
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  Array.from(document.querySelectorAll('.feature-group-header-legacy')).forEach((header) => {
 | 
					 | 
				
			||||||
    const parent = header.parentNode;
 | 
					 | 
				
			||||||
    const container = header.parentNode.querySelector('.feature-group-container');
 | 
					 | 
				
			||||||
    if (parent.id !== 'groupFavorites') {
 | 
					 | 
				
			||||||
      // container.style.maxHeight = container.scrollHeight + 'px';
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    header.onclick = () => {
 | 
					 | 
				
			||||||
      expandCollapseToggle(parent);
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  const collapsed = localStorage.getItem('collapsedGroups') ? JSON.parse(localStorage.getItem('collapsedGroups')) : [];
 | 
					 | 
				
			||||||
  const groupsArray = Array.from(document.querySelectorAll('.feature-group-legacy'));
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  groupsArray.forEach((group) => {
 | 
					 | 
				
			||||||
    if (collapsed.indexOf(group.id) !== -1) {
 | 
					 | 
				
			||||||
      expandCollapseToggle(group, false);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  // Necessary in order to not fire the transition animation on page load, which looks wrong.
 | 
					 | 
				
			||||||
  // The timeout isn't doing anything visible to the user, so it's not making the page load look slower.
 | 
					 | 
				
			||||||
  setTimeout(() => {
 | 
					 | 
				
			||||||
    groupsArray.forEach((group) => {
 | 
					 | 
				
			||||||
      const container = group.querySelector('.feature-group-container');
 | 
					 | 
				
			||||||
      container.classList.add('animated-group');
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }, 500);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  Array.from(document.querySelectorAll('.feature-group-header')).forEach((header) => {
 | 
					 | 
				
			||||||
    const parent = header.parentNode;
 | 
					 | 
				
			||||||
    header.onclick = () => {
 | 
					 | 
				
			||||||
      expandCollapseToggle(parent);
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  showFavoritesOnly();
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
@ -55,10 +55,6 @@ hideCookieBanner();
 | 
				
			|||||||
updateFavoriteIcons();
 | 
					updateFavoriteIcons();
 | 
				
			||||||
const contentPath = /*[[${@contextPath}]]*/ '';
 | 
					const contentPath = /*[[${@contextPath}]]*/ '';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const defaultView = localStorage.getItem('defaultView') || 'home'; // Default to "home"
 | 
					 | 
				
			||||||
if (defaultView === 'home-legacy') {
 | 
					 | 
				
			||||||
  window.location.href = contentPath + 'home-legacy'; // Redirect to legacy view
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
document.addEventListener('DOMContentLoaded', function () {
 | 
					document.addEventListener('DOMContentLoaded', function () {
 | 
				
			||||||
  const surveyVersion = '3.0';
 | 
					  const surveyVersion = '3.0';
 | 
				
			||||||
 | 
				
			|||||||
@ -1,6 +0,0 @@
 | 
				
			|||||||
<div th:fragment="featureGroupHeader" class="feature-group-header">
 | 
					 | 
				
			||||||
  <h3 class="menu-title" th:text="${groupTitle}"></h3>
 | 
					 | 
				
			||||||
  <span class="material-symbols-rounded header-expand-button">
 | 
					 | 
				
			||||||
    chevron_right
 | 
					 | 
				
			||||||
  </span>
 | 
					 | 
				
			||||||
</div>
 | 
					 | 
				
			||||||
@ -1,528 +0,0 @@
 | 
				
			|||||||
<!DOCTYPE html>
 | 
					 | 
				
			||||||
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
 | 
					 | 
				
			||||||
  xmlns:th="https://www.thymeleaf.org">
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<head>
 | 
					 | 
				
			||||||
  <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
 | 
					 | 
				
			||||||
</head>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<body>
 | 
					 | 
				
			||||||
  <div id="page-container">
 | 
					 | 
				
			||||||
    <div id="content-wrap">
 | 
					 | 
				
			||||||
      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
 | 
					 | 
				
			||||||
      <!-- Jumbotron -->
 | 
					 | 
				
			||||||
      <div class="p-5 rounded d-none d-md-block" id="jumbotron">
 | 
					 | 
				
			||||||
        <div class="container">
 | 
					 | 
				
			||||||
          <h1 class="display-4 fw-normal" th:text="${@appName}"></h1>
 | 
					 | 
				
			||||||
          <p class="lead fs-4"
 | 
					 | 
				
			||||||
            th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
 | 
					 | 
				
			||||||
          </p>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
      <br class="d-md-none">
 | 
					 | 
				
			||||||
      <!-- Features -->
 | 
					 | 
				
			||||||
      <script th:src="@{'/js/homecard-legacy.js'}"></script>
 | 
					 | 
				
			||||||
      <div class=" container">
 | 
					 | 
				
			||||||
        <br>
 | 
					 | 
				
			||||||
        <span class="material-symbols-rounded search-icon">
 | 
					 | 
				
			||||||
          search
 | 
					 | 
				
			||||||
        </span>
 | 
					 | 
				
			||||||
        <input type="text" id="searchBar" onkeyup="filterCardsLegacy()" th:placeholder="#{home.searchBar}" autofocus>
 | 
					 | 
				
			||||||
        <div style="display: flex; align-items: center;">
 | 
					 | 
				
			||||||
          <a href="home" onclick="setAsDefault('home')"
 | 
					 | 
				
			||||||
            style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
 | 
					 | 
				
			||||||
            <span th:text="#{home.newHomePage}">
 | 
					 | 
				
			||||||
            </span>
 | 
					 | 
				
			||||||
            <span class="material-symbols-rounded toggle-favourites" style="font-size: 2rem; margin-left: 0.2rem;">
 | 
					 | 
				
			||||||
              home
 | 
					 | 
				
			||||||
            </span>
 | 
					 | 
				
			||||||
          </a>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
        <div id="filtersContainer">
 | 
					 | 
				
			||||||
          <span class="material-symbols-rounded filter-button" onclick="toggleFavoritesOnly()">
 | 
					 | 
				
			||||||
            star
 | 
					 | 
				
			||||||
          </span>
 | 
					 | 
				
			||||||
          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(true)">
 | 
					 | 
				
			||||||
            expand_all
 | 
					 | 
				
			||||||
          </span>
 | 
					 | 
				
			||||||
          <span class="material-symbols-rounded filter-button" onclick="expandCollapseAll(false)">
 | 
					 | 
				
			||||||
            collapse_all
 | 
					 | 
				
			||||||
          </span>
 | 
					 | 
				
			||||||
          <span class="material-symbols-rounded filter-button hidden" onclick="switchViewMode()">
 | 
					 | 
				
			||||||
            dashboard
 | 
					 | 
				
			||||||
          </span>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <div class="features-container">
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div th:if="${@shouldShow}" class="feature-card favorite update-notice visually-hidden" id="update-link-legacy">
 | 
					 | 
				
			||||||
            <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
 | 
					 | 
				
			||||||
              <div class="d-flex align-items-center">
 | 
					 | 
				
			||||||
                <div id="tool-icon" class="advance" alt="icon">
 | 
					 | 
				
			||||||
                  <span class="material-symbols-rounded nav-icon">update</span>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div id="tool-text">
 | 
					 | 
				
			||||||
                  <h5 class="card-title" th:text="#{settings.update}"></h5>
 | 
					 | 
				
			||||||
                  <p class="card-text" id="app-update"></p>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </a>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div id="groupFavorites" class="feature-group-legacy">
 | 
					 | 
				
			||||||
            <div
 | 
					 | 
				
			||||||
              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.favorite})}">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="feature-group-container">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div id="popularTools" class="feature-group-legacy">
 | 
					 | 
				
			||||||
            <div
 | 
					 | 
				
			||||||
              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.popular})}">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="feature-group-container">
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div id="groupOrganize" class="feature-group-legacy">
 | 
					 | 
				
			||||||
            <div
 | 
					 | 
				
			||||||
              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.organize})}">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="feature-group-container">
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='multi-tool', cardTitle=#{home.multiTool.title}, cardText=#{home.multiTool.desc}, cardLink='multi-tool', toolIcon='construction', tags=#{multiTool.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='merge-pdfs', cardTitle=#{home.merge.title}, cardText=#{home.merge.desc}, cardLink='merge-pdfs', toolIcon='add_to_photos', tags=#{merge.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='split-pdfs', cardTitle=#{home.split.title}, cardText=#{home.split.desc}, cardLink='split-pdfs', toolIcon='cut', tags=#{split.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='rotate-pdf', cardTitle=#{home.rotate.title}, cardText=#{home.rotate.desc}, cardLink='rotate-pdf', toolIcon='rotate_right', tags=#{rotate.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='crop', cardTitle=#{home.crop.title}, cardText=#{home.crop.desc}, cardLink='crop', toolIcon='crop', tags=#{crop.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-organizer', cardTitle=#{home.pdfOrganiser.title}, cardText=#{home.pdfOrganiser.desc}, cardLink='pdf-organizer', toolIcon='format_list_bulleted', tags=#{pdfOrganiser.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='remove-pages', cardTitle=#{home.removePages.title}, cardText=#{home.removePages.desc}, cardLink='remove-pages', toolIcon='delete', tags=#{removePages.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='multi-page-layout', cardTitle=#{home.pageLayout.title}, cardText=#{home.pageLayout.desc}, cardLink='multi-page-layout', toolIcon='dashboard', tags=#{pageLayout.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='scale-pages', cardTitle=#{home.scalePages.title}, cardText=#{home.scalePages.desc}, cardLink='scale-pages', toolIcon='fullscreen', tags=#{scalePages.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', toolIcon='upload', tags=#{extractPage.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', toolIcon='looks_one', tags=#{PdfToSinglePage.tags}, toolGroup='organize')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div id="groupConvertTo" class="feature-group-legacy">
 | 
					 | 
				
			||||||
            <div
 | 
					 | 
				
			||||||
              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.convertTo})}">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="feature-group-container">
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='img-to-pdf', cardTitle=#{home.imageToPdf.title}, cardText=#{home.imageToPdf.desc}, cardLink='img-to-pdf', toolIcon='picture_as_pdf', tags=#{imageToPdf.tags}, toolGroup='image')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='file-to-pdf', cardTitle=#{home.fileToPDF.title}, cardText=#{home.fileToPDF.desc}, cardLink='file-to-pdf', toolIcon='draft', tags=#{fileToPDF.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='url-to-pdf', cardTitle=#{home.URLToPDF.title}, cardText=#{home.URLToPDF.desc}, cardLink='url-to-pdf', toolIcon='link', tags=#{URLToPDF.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='html-to-pdf', cardTitle=#{home.HTMLToPDF.title}, cardText=#{home.HTMLToPDF.desc}, cardLink='html-to-pdf', toolIcon='html', tags=#{HTMLToPDF.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='markdown-to-pdf', cardTitle=#{home.MarkdownToPDF.title}, cardText=#{home.MarkdownToPDF.desc}, cardLink='markdown-to-pdf', toolIcon='markdown', tags=#{MarkdownToPDF.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div id="groupConvertFrom" class="feature-group-legacy">
 | 
					 | 
				
			||||||
            <div
 | 
					 | 
				
			||||||
              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.convertFrom})}">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="feature-group-container">
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-img', cardTitle=#{home.pdfToImage.title}, cardText=#{home.pdfToImage.desc}, cardLink='pdf-to-img', toolIcon='photo_library', tags=#{pdfToImage.tags}, toolGroup='image')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-pdfa', cardTitle=#{home.pdfToPDFA.title}, cardText=#{home.pdfToPDFA.desc}, cardLink='pdf-to-pdfa', toolIcon='picture_as_pdf', tags=#{pdfToPDFA.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-word', cardTitle=#{home.PDFToWord.title}, cardText=#{home.PDFToWord.desc}, cardLink='pdf-to-word', toolIcon='description', tags=#{PDFToWord.tags}, toolGroup='word')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-presentation', cardTitle=#{home.PDFToPresentation.title}, cardText=#{home.PDFToPresentation.desc}, cardLink='pdf-to-presentation', toolIcon='slideshow', tags=#{PDFToPresentation.tags}, toolGroup='ppt')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-text', cardTitle=#{home.PDFToText.title}, cardText=#{home.PDFToText.desc}, cardLink='pdf-to-text', toolIcon='text_fields', tags=#{PDFToText.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-html', cardTitle=#{home.PDFToHTML.title}, cardText=#{home.PDFToHTML.desc}, cardLink='pdf-to-html', toolIcon='html', tags=#{PDFToHTML.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-xml', cardTitle=#{home.PDFToXML.title}, cardText=#{home.PDFToXML.desc}, cardLink='pdf-to-xml', toolIcon='code', tags=#{PDFToXML.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pdf-to-csv', cardTitle=#{home.tableExtraxt.title}, cardText=#{home.tableExtraxt.desc}, cardLink='pdf-to-csv', toolIcon='csv', tags=#{tableExtraxt.tags}, toolGroup='convert')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div id="groupSecurity" class="feature-group-legacy">
 | 
					 | 
				
			||||||
            <div
 | 
					 | 
				
			||||||
              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.security})}">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="feature-group-container">
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='add-password', cardTitle=#{home.addPassword.title}, cardText=#{home.addPassword.desc}, cardLink='add-password', toolIcon='lock', tags=#{addPassword.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='remove-password', cardTitle=#{home.removePassword.title}, cardText=#{home.removePassword.desc}, cardLink='remove-password', toolIcon='lock_open_right', tags=#{removePassword.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='change-permissions', cardTitle=#{home.permissions.title}, cardText=#{home.permissions.desc}, cardLink='change-permissions', toolIcon='encrypted', tags=#{permissions.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='sign', cardTitle=#{home.sign.title}, cardText=#{home.sign.desc}, cardLink='sign', toolIcon='signature', tags=#{sign.tags}, toolGroup='sign')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='cert-sign', cardTitle=#{home.certSign.title}, cardText=#{home.certSign.desc}, cardLink='cert-sign', toolIcon='workspace_premium', tags=#{certSign.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='validate-signature', cardTitle=#{home.validateSignature.title}, cardText=#{home.validateSignature.desc}, cardLink='validate-signature', toolIcon='verified', tags=#{validateSignature.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='remove-cert-sign', cardTitle=#{home.removeCertSign.title}, cardText=#{home.removeCertSign.desc}, cardLink='remove-cert-sign', toolIcon='remove_moderator', tags=#{removeCertSign.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='sanitize-pdf', cardTitle=#{home.sanitizePdf.title}, cardText=#{home.sanitizePdf.desc}, cardLink='sanitize-pdf', toolIcon='sanitizer', tags=#{sanitizePdf.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='auto-redact', cardTitle=#{home.autoRedact.title}, cardText=#{home.autoRedact.desc}, cardLink='auto-redact', toolIcon='ink_eraser', tags=#{autoRedact.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='redact', cardTitle=#{home.redact.title}, cardText=#{home.redact.desc}, cardLink='redact', toolIcon='playlist_remove', tags=#{redact.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='stamp', cardTitle=#{home.AddStampRequest.title}, cardText=#{home.AddStampRequest.desc}, cardLink='stamp', toolIcon='approval', tags=#{AddStampRequest.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='add-watermark', cardTitle=#{home.watermark.title}, cardText=#{home.watermark.desc}, cardLink='add-watermark', toolIcon='water_drop', tags=#{watermark.tags}, toolGroup='security')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div id="groupView" class="feature-group-legacy">
 | 
					 | 
				
			||||||
            <div
 | 
					 | 
				
			||||||
              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.edit})}">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="feature-group-container">
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='view-pdf', cardTitle=#{home.viewPdf.title}, cardText=#{home.viewPdf.desc}, cardLink='view-pdf', toolIcon='menu_book', tags=#{viewPdf.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='add-page-numbers', cardTitle=#{home.add-page-numbers.title}, cardText=#{home.add-page-numbers.desc}, cardLink='add-page-numbers', toolIcon='123', tags=#{add-page-numbers.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='add-image', cardTitle=#{home.addImage.title}, cardText=#{home.addImage.desc}, cardLink='add-image', toolIcon='add_photo_alternate', tags=#{addImage.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='change-metadata', cardTitle=#{home.changeMetadata.title}, cardText=#{home.changeMetadata.desc}, cardLink='change-metadata', toolIcon='assignment', tags=#{changeMetadata.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='ocr-pdf', cardTitle=#{home.ocr.title}, cardText=#{home.ocr.desc}, cardLink='ocr-pdf', toolIcon='quick_reference_all', tags=#{ocr.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='extract-images', cardTitle=#{home.extractImages.title}, cardText=#{home.extractImages.desc}, cardLink='extract-images', toolIcon='wallpaper', tags=#{extractImages.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='flatten', cardTitle=#{home.flatten.title}, cardText=#{home.flatten.desc}, cardLink='flatten', toolIcon='layers_clear', tags=#{flatten.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='remove-blanks', cardTitle=#{home.removeBlanks.title}, cardText=#{home.removeBlanks.desc}, cardLink='remove-blanks', toolIcon='scan_delete', tags=#{removeBlanks.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='remove-annotations', cardTitle=#{home.removeAnnotations.title}, cardText=#{home.removeAnnotations.desc}, cardLink='remove-annotations', toolIcon='thread_unread', tags=#{removeAnnotations.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='compare', cardTitle=#{home.compare.title}, cardText=#{home.compare.desc}, cardLink='compare', toolIcon='compare', tags=#{compare.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', toolIcon='info', tags=#{getPdfInfo.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='remove-image-pdf', cardTitle=#{home.removeImagePdf.title}, cardText=#{home.removeImagePdf.desc}, cardLink='remove-image-pdf', toolIcon='remove_selection', tags=#{removeImagePdf.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='replace-and-invert-color-pdf', cardTitle=#{home.replaceColorPdf.title}, cardText=#{home.replaceColorPdf.desc}, cardLink='replace-and-invert-color-pdf', toolIcon='format_color_fill', tags=#{replaceColorPdf.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='unlock-pdf-forms', cardTitle=#{home.unlockPDFForms.title}, cardText=#{home.unlockPDFForms.desc}, cardLink='unlock-pdf-forms', toolIcon='preview_off', tags=#{unlockPDFForms.tags}, toolGroup='other')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
          <div id="groupAdvanced" class="feature-group-legacy">
 | 
					 | 
				
			||||||
            <div
 | 
					 | 
				
			||||||
              th:replace="~{fragments/featureGroupHeaderLegacy :: featureGroupHeader(groupTitle=#{navbar.sections.advance})}">
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="feature-group-container">
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='pipeline', cardTitle=#{home.pipeline.title}, cardText=#{home.pipeline.desc}, cardLink='pipeline', toolIcon='family_history', tags=#{pipeline.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='adjust-contrast', cardTitle=#{home.adjust-contrast.title}, cardText=#{home.adjust-contrast.desc}, cardLink='adjust-contrast', toolIcon='palette', tags=#{adjust-contrast.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='compress-pdf', cardTitle=#{home.compressPdfs.title}, cardText=#{home.compressPdfs.desc}, cardLink='compress-pdf', toolIcon='zoom_in_map', tags=#{compressPdfs.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='extract-image-scans', cardTitle=#{home.ScannerImageSplit.title}, cardText=#{home.ScannerImageSplit.desc}, cardLink='extract-image-scans', toolIcon='scanner', tags=#{ScannerImageSplit.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='repair', cardTitle=#{home.repair.title}, cardText=#{home.repair.desc}, cardLink='repair', toolIcon='build', tags=#{repair.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='auto-rename', cardTitle=#{home.auto-rename.title}, cardText=#{home.auto-rename.desc}, cardLink='auto-rename', toolIcon='text_fields_alt', tags=#{auto-rename.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='auto-split-pdf', cardTitle=#{home.autoSplitPDF.title}, cardText=#{home.autoSplitPDF.desc}, cardLink='auto-split-pdf', toolIcon='cut', tags=#{autoSplitPDF.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', toolIcon='javascript', tags=#{showJS.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='split-by-size-or-count', cardTitle=#{home.autoSizeSplitPDF.title}, cardText=#{home.autoSizeSplitPDF.desc}, cardLink='split-by-size-or-count', toolIcon='vertical_split', tags=#{autoSizeSplitPDF.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='overlay-pdf', cardTitle=#{home.overlay-pdfs.title}, cardText=#{home.overlay-pdfs.desc}, cardLink='overlay-pdf', toolIcon='layers', tags=#{overlay-pdfs.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='split-pdf-by-sections', cardTitle=#{home.split-by-sections.title}, cardText=#{home.split-by-sections.desc}, cardLink='split-pdf-by-sections', toolIcon='grid_on', tags=#{split-by-sections.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div
 | 
					 | 
				
			||||||
                th:replace="~{fragments/card :: card(id='split-pdf-by-chapters', cardTitle=#{home.splitPdfByChapters.title}, cardText=#{home.splitPdfByChapters.desc}, cardLink='split-pdf-by-chapters', toolIcon='book', tags=#{splitPdfByChapters.tags}, toolGroup='advance')}">
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  <!-- Survey Modal -->
 | 
					 | 
				
			||||||
  <div class="modal fade" id="surveyModal" tabindex="-1" role="dialog" aria-labelledby="surveyModalLabel"
 | 
					 | 
				
			||||||
    aria-hidden="true">
 | 
					 | 
				
			||||||
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
 | 
					 | 
				
			||||||
      <div class="modal-content">
 | 
					 | 
				
			||||||
        <div class="modal-header">
 | 
					 | 
				
			||||||
          <h5 class="modal-title" id="surveyModalLabel" th:text="#{survey.title}">Stirling-PDF Survey</h5>
 | 
					 | 
				
			||||||
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
        <div class="modal-body">
 | 
					 | 
				
			||||||
		<p th:text="#{survey.meeting.1}">If you're using Stirling PDF at work, we'd love to speak to you. We're offering free technical support in exchange for a 15 minute user discovery session.</p>
 | 
					 | 
				
			||||||
		<p th:text="#{survey.meeting.2}">This is a chance to:</p>
 | 
					 | 
				
			||||||
		<p><span>🛠️</span><span th:text="#{survey.meeting.3}">Get help with deployment, integrations, or troubleshooting</span></p>
 | 
					 | 
				
			||||||
		<p><span>📢</span><span th:text="#{survey.meeting.4}">Provide direct feedback on performance, edge cases, and feature gaps</span></p>
 | 
					 | 
				
			||||||
		<p><span>🔍</span><span th:text="#{survey.meeting.5}">Help us refine Stirling PDF for real-world enterprise use</span></p>
 | 
					 | 
				
			||||||
		<p th:text="#{survey.meeting.6}">If you're interested, you can book time with our team directly.</p>
 | 
					 | 
				
			||||||
		<p th:text="#{survey.meeting.7}">Looking forward to digging into your use cases and making Stirling PDF even better!</p>
 | 
					 | 
				
			||||||
		<a href="https://calendly.com/d/cm4p-zz5-yy8/stirling-pdf-15-minute-group-discussion" target="_blank" class="btn btn-primary" id="takeSurvey2" th:text="#{survey.meeting.button}">Book meeting</a>
 | 
					 | 
				
			||||||
		</br>
 | 
					 | 
				
			||||||
		</br>
 | 
					 | 
				
			||||||
		 <p th:text="#{survey.meeting.notInterested}">Not a business and/or interested in a meeting?</p>
 | 
					 | 
				
			||||||
 
 | 
					 | 
				
			||||||
          <p th:text="#{survey.please}">Please consider taking our survey!</p>
 | 
					 | 
				
			||||||
          <a href="https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu" target="_blank" class="btn btn-primary"
 | 
					 | 
				
			||||||
            id="takeSurvey" th:text="#{survey.button}">Take Survey</a>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
        <div class="modal-footer">
 | 
					 | 
				
			||||||
          <div class="form-check mb-3">
 | 
					 | 
				
			||||||
            <input type="checkbox" id="dontShowAgain">
 | 
					 | 
				
			||||||
            <label for="dontShowAgain" th:text="#{survey.dontShowAgain}">Don't show again</label>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{close}">Close</button>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  <!-- Analytics Modal -->
 | 
					 | 
				
			||||||
  <div class="modal fade" id="analyticsModal" tabindex="-1" role="dialog" aria-labelledby="analyticsModalLabel"
 | 
					 | 
				
			||||||
    aria-hidden="true" th:if="${@analyticsPrompt}">
 | 
					 | 
				
			||||||
    <div class="modal-dialog modal-dialog-centered" role="document">
 | 
					 | 
				
			||||||
      <div class="modal-content">
 | 
					 | 
				
			||||||
        <div class="modal-header">
 | 
					 | 
				
			||||||
          <h5 class="modal-title" id="analyticsModalLabel" th:text="#{analytics.title}">Do you want make Stirling PDF
 | 
					 | 
				
			||||||
            better?</h5>
 | 
					 | 
				
			||||||
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
        <div class="modal-body">
 | 
					 | 
				
			||||||
          <p th:text="#{analytics.paragraph1}">Stirling PDF has opt in analytics to help us improve the product. We do
 | 
					 | 
				
			||||||
            not track any personal information or file contents.</p>
 | 
					 | 
				
			||||||
          <p th:text="#{analytics.paragraph2}">Please consider enabling analytics to help Stirling-PDF grow and to allow
 | 
					 | 
				
			||||||
            us to understand our users better.</p>
 | 
					 | 
				
			||||||
          <p th:text="#{analytics.settings}">You can change the settings for analytics in the config/settings.yml file
 | 
					 | 
				
			||||||
          </p>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
        <div class="modal-footer justify-content-between">
 | 
					 | 
				
			||||||
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="setAnalytics(false)"
 | 
					 | 
				
			||||||
            th:text="#{analytics.disable}">Disable analytics</button>
 | 
					 | 
				
			||||||
          <button type="button" class="btn btn-primary" th:text="#{analytics.enable}"
 | 
					 | 
				
			||||||
            onclick="setAnalytics(true)">Enable analytics</button>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  <script th:src="@{'/js/fetch-utils.js'}"></script>
 | 
					 | 
				
			||||||
  <script th:inline="javascript">
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    /*<![CDATA[*/
 | 
					 | 
				
			||||||
    const analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    document.addEventListener('DOMContentLoaded', function () {
 | 
					 | 
				
			||||||
      if (analyticsPromptBoolean) {
 | 
					 | 
				
			||||||
        const analyticsModal = new bootstrap.Modal(document.getElementById('analyticsModal'));
 | 
					 | 
				
			||||||
        analyticsModal.show();
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
    /*]]>*/
 | 
					 | 
				
			||||||
    function setAnalytics(enabled) {
 | 
					 | 
				
			||||||
      fetchWithCsrf('api/v1/settings/update-enable-analytics', {
 | 
					 | 
				
			||||||
        method: 'POST',
 | 
					 | 
				
			||||||
        headers: {
 | 
					 | 
				
			||||||
          'Content-Type': 'application/json'
 | 
					 | 
				
			||||||
        },
 | 
					 | 
				
			||||||
        body: JSON.stringify(enabled)
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
        .then(response => {
 | 
					 | 
				
			||||||
          if (response.status === 200) {
 | 
					 | 
				
			||||||
            console.log('Analytics setting updated successfully');
 | 
					 | 
				
			||||||
            bootstrap.Modal.getInstance(document.getElementById('analyticsModal')).hide();
 | 
					 | 
				
			||||||
          } else if (response.status === 208) {
 | 
					 | 
				
			||||||
            console.log('Analytics setting has already been set. Please edit /config/settings.yml to change it.', response);
 | 
					 | 
				
			||||||
            alert('Analytics setting has already been set. Please edit /config/settings.yml to change it.');
 | 
					 | 
				
			||||||
          } else {
 | 
					 | 
				
			||||||
            throw new Error('Unexpected response status: ' + response.status);
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
        .catch(error => {
 | 
					 | 
				
			||||||
          console.error('Error updating analytics setting:', error);
 | 
					 | 
				
			||||||
          alert('An error occurred while updating the analytics setting. Please try again.');
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    document.addEventListener("DOMContentLoaded", function () {
 | 
					 | 
				
			||||||
      const surveyVersion = "3.0";
 | 
					 | 
				
			||||||
      const modal = new bootstrap.Modal(document.getElementById('surveyModal'));
 | 
					 | 
				
			||||||
      const dontShowAgain = document.getElementById('dontShowAgain');
 | 
					 | 
				
			||||||
      const takeSurveyButton = document.getElementById('takeSurvey');
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      const viewThresholds = [5, 10, 15, 22, 30, 50, 75, 100, 150, 200];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // Check if survey version changed and reset page views if it did
 | 
					 | 
				
			||||||
      const storedVersion = localStorage.getItem('surveyVersion');
 | 
					 | 
				
			||||||
      if (storedVersion && storedVersion !== surveyVersion) {
 | 
					 | 
				
			||||||
        localStorage.setItem('pageViews', '0');
 | 
					 | 
				
			||||||
        localStorage.setItem('surveyVersion', surveyVersion);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      let pageViews = parseInt(localStorage.getItem('pageViews') || '0');
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      pageViews++;
 | 
					 | 
				
			||||||
      localStorage.setItem('pageViews', pageViews.toString());
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      function shouldShowSurvey() {
 | 
					 | 
				
			||||||
        if (localStorage.getItem('dontShowSurvey') === 'true' ||
 | 
					 | 
				
			||||||
          localStorage.getItem('surveyTaken') === 'true') {
 | 
					 | 
				
			||||||
          return false;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        // If survey version changed and we hit a threshold, show the survey
 | 
					 | 
				
			||||||
        if (localStorage.getItem('surveyVersion') !== surveyVersion &&
 | 
					 | 
				
			||||||
          viewThresholds.includes(pageViews)) {
 | 
					 | 
				
			||||||
          return true;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        return viewThresholds.includes(pageViews);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      if (shouldShowSurvey()) {
 | 
					 | 
				
			||||||
        modal.show();
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      dontShowAgain.addEventListener('change', function () {
 | 
					 | 
				
			||||||
        if (this.checked) {
 | 
					 | 
				
			||||||
          localStorage.setItem('dontShowSurvey', 'true');
 | 
					 | 
				
			||||||
          localStorage.setItem('surveyVersion', surveyVersion);
 | 
					 | 
				
			||||||
        } else {
 | 
					 | 
				
			||||||
          localStorage.removeItem('dontShowSurvey');
 | 
					 | 
				
			||||||
          localStorage.removeItem('surveyVersion');
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      takeSurveyButton.addEventListener('click', function () {
 | 
					 | 
				
			||||||
        localStorage.setItem('surveyTaken', 'true');
 | 
					 | 
				
			||||||
        localStorage.setItem('surveyVersion', surveyVersion);
 | 
					 | 
				
			||||||
        modal.hide();
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      if (localStorage.getItem('dontShowSurvey')) {
 | 
					 | 
				
			||||||
        modal.hide();
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    function setAsDefault(value) {
 | 
					 | 
				
			||||||
      localStorage.setItem('defaultView', value);
 | 
					 | 
				
			||||||
      console.log(`Default view set to: ${value}`);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    
 | 
					 | 
				
			||||||
    
 | 
					 | 
				
			||||||
  </script>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
</body>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
</html>
 | 
					 | 
				
			||||||
@ -82,13 +82,6 @@
 | 
				
			|||||||
                      visibility
 | 
					                      visibility
 | 
				
			||||||
                    </span>
 | 
					                    </span>
 | 
				
			||||||
                  </div>
 | 
					                  </div>
 | 
				
			||||||
                  <a href="home" onclick="setAsDefault('home-legacy')" th:title="#{home.legacyHomepage}"
 | 
					 | 
				
			||||||
                    style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
 | 
					 | 
				
			||||||
                    <span class="material-symbols-rounded toggle-favourites"
 | 
					 | 
				
			||||||
                      style="font-size: 2rem; margin-left: 0.2rem;">
 | 
					 | 
				
			||||||
                      home
 | 
					 | 
				
			||||||
                    </span>
 | 
					 | 
				
			||||||
                  </a>
 | 
					 | 
				
			||||||
                  <a th:if="${@shouldShow}" href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
 | 
					                  <a th:if="${@shouldShow}" href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
 | 
				
			||||||
                    target="_blank" id="update-link" rel="noopener" th:title="#{settings.update}"
 | 
					                    target="_blank" id="update-link" rel="noopener" th:title="#{settings.update}"
 | 
				
			||||||
                    style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
 | 
					                    style="text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center;">
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user