2024-02-16 22:49:06 +01:00
<!DOCTYPE html>
2024-05-05 15:19:53 +04:00
< html th:lang = "${#locale.language}" th:dir = "#{language.direction}" th:data-language = "${#locale.toString()}"
2024-05-22 21:48:23 +01:00
xmlns:th="https://www.thymeleaf.org">
2024-02-16 22:49:06 +01:00
2024-05-05 15:19:53 +04:00
< head >
< th:block th:insert = "~{fragments/common :: head(title='')}" > < / th:block >
< / head >
< body >
2025-05-08 17:54:58 +01:00
< div id = "page-container" >
< th:block th:insert = "~{fragments/navbar.html :: navbar}" > < / th:block >
< div style = "transform-origin: top;"
id="scale-wrap">
2024-05-05 15:19:53 +04:00
< br class = "d-md-none" >
<!-- Features -->
2024-06-15 23:07:09 +02:00
< script th:src = "@{'/js/homecard.js'}" > < / script >
2025-01-30 18:55:33 +00:00
< div style = "
width: 100%;
display: flex;
2025-05-08 17:54:58 +01:00
flex-direction: column;"
>
2025-01-30 18:55:33 +00:00
< div >
< br >
< div style = "justify-content: center; display: flex;" >
< div style = "margin:0 3rem" >
< div >
2025-02-23 17:19:30 +01:00
< div
style="display:flex; flex-direction: column; justify-content: center; width:100%; margin-bottom:1rem">
2025-01-30 18:55:33 +00:00
< div style = "width:fit-content; margin: 0 auto; padding: 0 3rem" >
< p class = "lead fs-4"
th:text="${@homeText != 'null' and @homeText != null and @homeText != ''} ? ${@homeText} : #{home.desc}">
< / p >
< / div >
< div id = "groupRecent" style = "width: fit-content; margin: 0 auto" >
2025-02-23 17:19:30 +01:00
< div
th:replace="~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.recent})}">
2025-01-30 18:55:33 +00:00
< / div >
< div class = "recent-features" >
< div class = "newfeature"
2025-01-31 11:58:59 +01:00
th:insert="~{fragments/navbarEntryCustom :: navbarEntry('redact', '/images/redact-manual.svg#icon-redact-manual', 'home.redact.title', 'home.redact.desc', 'redact.tags', 'security')}">
2025-01-30 18:55:33 +00:00
< / div >
< div class = "newfeature"
2025-01-31 11:58:59 +01:00
th:insert="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
2025-01-30 18:55:33 +00:00
< / div >
< div class = "newfeature"
2025-05-09 16:42:20 +01:00
th:insert="~{fragments/navbarEntry :: navbarEntry('compress-pdf', 'zoom_in_map', 'home.compressPdfs.title', 'home.compressPdfs.desc', 'compressPDFs.tags', 'advance')}">
2025-01-30 18:55:33 +00:00
< / div >
< / div >
< / div >
< / div >
2024-09-20 14:29:00 +03:00
2025-01-30 18:55:33 +00:00
< / div >
< span class = "material-symbols-rounded search-icon" >
search
< / span >
< input type = "text" id = "searchBar" onkeyup = "filterCards()" th:placeholder = "#{home.searchBar}" autofocus >
2025-01-31 16:22:56 +00:00
< div style = "display: flex; column-gap: 3rem; flex-wrap: wrap; margin-left:1rem" >
2025-01-30 18:55:33 +00:00
< div
2025-02-23 17:19:30 +01:00
style="height:2.5rem; display: flex; align-items: center; cursor: pointer; justify-content: center;">
< label for = "sort-options" th:text = "#{home.sortBy}" > Sort by:< / label >
< select id = "sort-options" style = "border:none;" >
< option value = "alphabetical" th:text = "#{home.alphabetical}" > < / option >
<!-- <option value="personal">Your most used</option> -->
< option value = "global" th:text = "#{home.globalPopularity}" > < / option >
<!-- <option value="server">Popularity in organisation</option> -->
< / select >
< / div >
< div
style="display: flex; align-items: center; flex-wrap: wrap; align-content: flex-start; width: fit-content; max-width: 100%; gap:2rem; justify-content: center;">
< div th:title = "#{home.setFavorites}" style = "display: flex; align-items: center; cursor: pointer;"
onclick="toggleFavoritesMode()">
2025-01-30 18:55:33 +00:00
< span class = "material-symbols-rounded toggle-favourites"
style="font-size: 2rem; margin-left: 0.2rem;">
star
< / span >
< / div >
< div onclick = "toggleFavoritesView()" th:title = "#{home.hideFavorites}" id = "favouritesVisibility"
style="display: flex; align-items: center; cursor: pointer;">
< span id = "toggle-favourites-icon" class = "material-symbols-rounded toggle-favourites"
style="font-size: 2rem; margin-left: 0.2rem;">
visibility
< / span >
< / 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 >
2025-02-23 17:19:30 +01:00
< a th:if = "${@shouldShow}" href = "https://github.com/Stirling-Tools/Stirling-PDF/releases"
target="_blank" id="update-link" rel="noopener" th:title="#{settings.update}"
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;">
update
< / span >
< / a >
2025-01-30 18:55:33 +00:00
< / div >
2024-05-09 17:31:12 +04:00
2025-01-30 18:55:33 +00:00
< / div >
< / div >
< / div >
< / div >
< div >
< / div >
< div class = "features-container" style = " border-top: 1px ;
border-top-style: solid;
border-color: var(--md-nav-color-on-seperator);
margin-top: 1rem;
">
< div class = "feature-rows" >
< div id = "groupFavorites" class = "feature-group" >
< div th:replace = "~{fragments/featureGroupHeader :: featureGroupHeader(groupTitle=#{navbar.favorite})}" >
2024-09-20 14:29:00 +03:00
< / div >
2025-01-30 18:55:33 +00:00
< div class = "nav-group-container" >
2025-01-17 22:18:55 +00:00
< / div >
2024-09-20 14:29:00 +03:00
< / div >
2025-01-30 18:55:33 +00:00
< th:block th:insert = "~{fragments/navElements.html :: navElements}" > < / th:block >
2024-05-05 15:19:53 +04:00
< / div >
2024-02-16 22:49:06 +01:00
< / div >
2025-05-08 17:54:58 +01:00
< th:block th:insert = "~{fragments/footer.html :: footer}" > < / th:block >
2024-02-16 22:49:06 +01:00
< / div >
< / div >
2024-05-05 15:19:53 +04:00
< / div >
2024-09-20 14:29:00 +03:00
2024-06-15 23:07:09 +02:00
<!-- Survey Modal -->
2025-01-09 20:56:52 +00:00
< div class = "modal fade" id = "surveyModal" tabindex = "-1" role = "dialog" aria-labelledby = "surveyModalLabel"
aria-hidden="true">
2025-03-01 20:36:11 +00:00
< div class = "modal-dialog modal-dialog-centered modal-lg" role = "document" >
2024-06-15 23:07:09 +02:00
< 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" >
2025-03-01 20:36:11 +00:00
< 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 >
2024-06-15 23:07:09 +02:00
< p th:text = "#{survey.please}" > Please consider taking our survey!< / p >
2025-01-09 20:56:52 +00:00
< a href = "https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu" target = "_blank" class = "btn btn-primary"
id="takeSurvey" th:text="#{survey.button}">Take Survey< / a >
2024-06-15 23:07:09 +02:00
< / 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 >
2024-09-20 14:29:00 +03:00
2024-06-15 23:07:09 +02:00
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" th:text = "#{close}" > Close< / button >
2024-09-20 14:29:00 +03:00
2024-06-15 23:07:09 +02:00
< / div >
< / div >
< / div >
< / div >
2024-06-12 22:12:42 +01:00
2024-10-14 22:34:41 +01:00
<!-- Analytics Modal -->
2025-01-09 20:56:52 +00:00
< div class = "modal fade" id = "analyticsModal" tabindex = "-1" role = "dialog" aria-labelledby = "analyticsModalLabel"
aria-hidden="true" th:if="${@analyticsPrompt}">
2024-10-14 22:34:41 +01:00
< div class = "modal-dialog modal-dialog-centered" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
2025-01-09 20:56:52 +00:00
< h5 class = "modal-title" id = "analyticsModalLabel" th:text = "#{analytics.title}" > Do you want make Stirling PDF
better?< / h5 >
2024-10-14 22:34:41 +01:00
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
2025-01-09 20:56:52 +00:00
< 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 >
2024-10-14 22:34:41 +01:00
< / div >
2024-10-22 11:10:09 +01:00
< div class = "modal-footer justify-content-between" >
2025-01-09 20:56:52 +00:00
< 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 >
2024-10-14 22:34:41 +01:00
< / div >
< / div >
< / div >
2025-01-30 18:55:33 +00:00
< style >
.favorite-icon {
cursor: pointer;
width: 0rem;
font-size: 2rem;
2024-10-14 22:34:41 +01:00
}
2025-01-30 18:55:33 +00:00
.toggle-favourites {
cursor: pointer;
}
2024-10-14 22:34:41 +01:00
2025-01-30 18:55:33 +00:00
.toggle-favourites.active {
color: gold;
}
< / style >
2025-02-23 01:52:35 +01:00
< script th:src = "@{'/js/fetch-utils.js'}" > < / script >
< script th:inline = "javascript" >
/*< ![CDATA[*/
2025-01-30 18:55:33 +00:00
window.analyticsPromptBoolean = /*[[${@analyticsPrompt}]]*/ false;
2025-02-23 01:52:35 +01:00
/*]]>*/
Add SHOW_SURVEY Environment variable to Docker (#3378)
In the previous implementation, the survey was displayed on the main
screen when the homepage was opened for the 5th, 10th, 15th, 22nd, 30th,
50th, 75th, 100th, 150th, or 200th time, as long as the "Do not show
again" option hadn't been selected.
With this new feature, if the SHOW_SURVEY environment variable is set to
true or not set at all in the Docker configuration, the survey will
continue to be shown as before.
<img width="1679" alt="Screenshot 2025-04-18 at 08 17 37"
src="https://github.com/user-attachments/assets/696b9dc2-9502-4d66-9991-d2b81b52cd02"
/>
However, if the SHOW_SURVEY parameter is explicitly set to false, the
survey will no longer be displayed.
<img width="1707" alt="Screenshot 2025-04-18 at 08 18 39"
src="https://github.com/user-attachments/assets/b57c568a-b5e7-4927-bccf-f9a398bea702"
/>
Closes #1573
---
## Checklist
### General
- [X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [X] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [X] 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)
- [X] I have performed a self-review of my own code
- [X] 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)
- [X] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)
### Testing (if applicable)
- [X] 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.
2025-04-20 13:49:34 +03:00
window.showSurvey = /*[[${showSurveyFromDocker}]]*/ true
2024-06-15 23:07:09 +02:00
< / script >
2025-03-20 08:53:29 +01:00
< script th:src = "@{'/js/pages/home.js'}" th:inline = "javascript" > < / script >
2025-05-08 17:54:58 +01:00
< script >
function applyScale() {
const baseWidth = 1440;
const baseHeight = 1000;
const scaleX = window.innerWidth / baseWidth;
const scaleY = window.innerHeight / baseHeight;
const scale = Math.max(0.9, Math.min(scaleX, scaleY)); // keep aspect ratio, honor minScale
const ui = document.getElementById('scale-wrap');
ui.style.transform = `scale(${scale*0.75})`;
}
window.addEventListener('resize', applyScale);
window.addEventListener('load', applyScale);
< / script >
2024-06-12 22:12:42 +01:00
2024-05-05 15:19:53 +04:00
< / body >
2025-02-23 17:19:30 +01:00
< / html >
