feat: add FAQ modal in PDF Multi Tool and Workflow pages

This commit is contained in:
alam00000 committed 2026-09-05 11:43:12 +05:30
1 parent 2117d70837
commit d931a71589
3 files changed
+324 -227

No files matched your search

+25
View File
@@ -0,0 +1,25 @@
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('faq-modal');
const openBtn = document.getElementById('faq-open-btn');
const closeBtn = document.getElementById('faq-close-btn');
if (!modal || !openBtn) return;
const setOpen = (open: boolean) => {
modal.classList.toggle('hidden', !open);
modal.setAttribute('aria-hidden', open ? 'false' : 'true');
openBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
if (open) closeBtn?.focus();
else openBtn.focus();
};
openBtn.addEventListener('click', () => setOpen(true));
closeBtn?.addEventListener('click', () => setOpen(false));
modal.addEventListener('click', (event) => {
if (event.target === modal) setOpen(false);
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && !modal.classList.contains('hidden')) {
setOpen(false);
}
});
});
+154 -116
View File
@@ -142,13 +142,26 @@
>PDF Multi Tool</span
>
</div>
<button
id="close-tool-btn"
class="flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="x" class="w-4 h-4 sm:w-5 sm:h-5"></i>
<span data-i18n="common.close">Close</span>
</button>
<div class="flex items-center gap-2">
<button
id="faq-open-btn"
type="button"
class="flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
aria-haspopup="dialog"
aria-controls="faq-modal"
aria-expanded="false"
>
<i data-lucide="circle-help" class="w-4 h-4 sm:w-5 sm:h-5"></i>
<span>FAQ</span>
</button>
<button
id="close-tool-btn"
class="flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
>
<i data-lucide="x" class="w-4 h-4 sm:w-5 sm:h-5"></i>
<span data-i18n="common.close">Close</span>
</button>
</div>
</div>
</div>
</nav>
@@ -473,120 +486,145 @@
/>
<!-- Scripts -->
<!-- FAQ Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
<!-- FAQ Modal -->
<div
id="faq-modal"
class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
role="dialog"
aria-modal="true"
aria-labelledby="faq-modal-title"
aria-hidden="true"
>
<div
class="bg-gray-800 rounded-lg w-full max-w-3xl max-h-[85vh] overflow-y-auto relative border border-gray-700 shadow-2xl"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
What can I do with the PDF Multi Tool that the single-purpose tools
can't?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
It puts merging, reordering, rotating, duplicating, deleting,
inserting, and splitting in one page grid, so you can do several of
them in a single pass without downloading and re-uploading between
steps. Every action is covered by undo and redo, so you can
experiment before you export.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I combine pages from several PDFs into one document?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Upload all the source files and their pages appear together in one
grid, in upload order. Drag pages into the order you want, delete
the ones you don't need, and click Export PDF to download the result
as a single file.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I add images as pages?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Drop JPG, PNG, WebP, HEIC, TIFF, BMP, GIF, or SVG files alongside
your PDFs and each image becomes a page you can move, rotate, or
delete like any other. Blank A4 pages can also be appended with the
Add Blank Page button.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I split one PDF into several files?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Click the scissors icon on a page to place a split marker after it;
a dashed line shows where the document will be divided. Export then
produces split-documents.zip containing document - 1.pdf, document -
2.pdf, and so on.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does rotating pages here reduce quality?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Rotation is stored as a page attribute in 90-degree steps rather
than re-rendering the content, so text, vectors, and images are
untouched. For angles other than 90, 180, or 270 degrees, use
<a
href="/rotate-custom"
class="text-indigo-300 hover:text-indigo-400"
>Rotate by Custom Degrees</a
>.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I export only some of the pages?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Tick the checkboxes on the pages you want and use Download selected
to get just those pages as selected-pages.pdf. The workspace stays
as it is, so you can keep working and export the rest later.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What happens to bookmarks when I export?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The export rebuilds the document page by page, so bookmarks from the
source files aren't carried into the new PDF. Page content,
including text and images, is copied as-is.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are my PDFs uploaded when I use the Multi Tool?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Page thumbnails are rendered and the final PDF or ZIP is
assembled in your browser, and damaged files are repaired locally
before loading too. Nothing you drop into the grid leaves your
computer.
</p>
</details>
<button
id="faq-close-btn"
type="button"
class="absolute top-3 right-3 z-10 flex items-center justify-center w-9 h-9 rounded-lg bg-gray-700 hover:bg-gray-600 text-white"
aria-label="Close FAQ"
>
<i data-lucide="x" class="w-5 h-5"></i>
</button>
<section class="max-w-4xl mx-auto px-6 pt-12 pb-8">
<h2
id="faq-modal-title"
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
What can I do with the PDF Multi Tool that the single-purpose
tools can't?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
It puts merging, reordering, rotating, duplicating, deleting,
inserting, and splitting in one page grid, so you can do several
of them in a single pass without downloading and re-uploading
between steps. Every action is covered by undo and redo, so you
can experiment before you export.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I combine pages from several PDFs into one document?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Upload all the source files and their pages appear together in
one grid, in upload order. Drag pages into the order you want,
delete the ones you don't need, and click Export PDF to download
the result as a single file.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I add images as pages?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Drop JPG, PNG, WebP, HEIC, TIFF, BMP, GIF, or SVG files
alongside your PDFs and each image becomes a page you can move,
rotate, or delete like any other. Blank A4 pages can also be
appended with the Add Blank Page button.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I split one PDF into several files?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Click the scissors icon on a page to place a split marker after
it; a dashed line shows where the document will be divided.
Export then produces split-documents.zip containing document -
1.pdf, document - 2.pdf, and so on.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does rotating pages here reduce quality?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Rotation is stored as a page attribute in 90-degree steps
rather than re-rendering the content, so text, vectors, and
images are untouched. For angles other than 90, 180, or 270
degrees, use
<a
href="/rotate-custom"
class="text-indigo-300 hover:text-indigo-400"
>Rotate by Custom Degrees</a
>.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I export only some of the pages?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Tick the checkboxes on the pages you want and use Download
selected to get just those pages as selected-pages.pdf. The
workspace stays as it is, so you can keep working and export the
rest later.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What happens to bookmarks when I export?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The export rebuilds the document page by page, so bookmarks from
the source files aren't carried into the new PDF. Page content,
including text and images, is copied as-is.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are my PDFs uploaded when I use the Multi Tool?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Page thumbnails are rendered and the final PDF or ZIP is
assembled in your browser, and damaged files are repaired
locally before loading too. Nothing you drop into the grid
leaves your computer.
</p>
</details>
</div>
</section>
</div>
</section>
</div>
<script type="module" src="/src/js/logic/pdf-multi-tool.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<script type="module" src="/src/js/faqModal.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
+145 -111
View File
@@ -335,6 +335,17 @@
<i class="ph ph-floppy-disk text-sm"></i>
<span class="hidden md:inline">Save</span>
</button>
<button
id="faq-open-btn"
type="button"
class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
aria-haspopup="dialog"
aria-controls="faq-modal"
aria-expanded="false"
>
<i class="ph ph-question text-sm"></i>
<span class="hidden md:inline">FAQ</span>
</button>
<button
id="load-btn"
class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
@@ -555,123 +566,146 @@
<script type="module">
import '@phosphor-icons/web/regular';
</script>
<!-- FAQ Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
<!-- FAQ Modal -->
<div
id="faq-modal"
class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
role="dialog"
aria-modal="true"
aria-labelledby="faq-modal-title"
aria-hidden="true"
>
<div
class="bg-gray-800 rounded-lg w-full max-w-3xl max-h-[85vh] overflow-y-auto relative border border-gray-700 shadow-2xl"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
What is the PDF Workflow Builder for?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
It chains several PDF operations into one run. Instead of opening a
tool, downloading, and feeding the result into the next tool for
each step, you connect nodes on a canvas, such as PDF Input,
Compress, Watermark, and Download, set each node's options, and
click Run to process everything in sequence.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I run the same workflow on many PDFs at once?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Yes. The PDF Input node accepts multiple files; a Merge node
combines them into one document, while other nodes process each PDF
separately. When more than one file comes out the end, the Download
node bundles them into a ZIP automatically.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Why won't it let me connect two nodes?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Sockets are typed: PDF (a single document), MultiPDF (several
documents), and Image. A node that expects a single PDF won't accept
a MultiPDF output, so put a Merge node in between, and image outputs
only feed nodes that take images. Connections always run from the
bottom of one node to the top of the next.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Why does it complain that Encrypt must be the last step?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Once a PDF is encrypted, later nodes can't read it, so the engine
rejects a workflow where anything other than the output sits after
Encrypt. Move Encrypt to just before Download. Password-protected
inputs are the opposite case: the run pauses and asks for the
password.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What happens if one step fails?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The run stops at that node, which turns red with an error message,
and nothing downstream is produced. Fix the setting or the input and
run again; it's easiest to build a two-node version first and add
steps once that works.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I save a workflow and reuse it later?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Yes. Save stores it as a named template in your browser's local
storage, and Load brings it back in a later session on the same
browser. Export writes the layout to a workflow.json file you can
back up or send to a colleague, and Import restores nodes,
positions, connections, and settings from that file.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does a saved workflow contain my documents?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Templates and exported JSON files hold only the node types,
their settings, positions, and connections; the PDFs are chosen
fresh each time you run. Settings are saved as typed, so avoid
exporting a workflow with a password entered in an Encrypt node if
you plan to share it.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are the files processed on a server?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Every node runs in your browser with the same engines as the
individual tools, and the only network activity is fetching a
processing module such as Ghostscript the first time a node needs
one. Your PDFs never leave the machine, even in a long multi-step
run.
</p>
</details>
<button
id="faq-close-btn"
type="button"
class="absolute top-3 right-3 z-10 flex items-center justify-center w-9 h-9 rounded-lg bg-gray-700 hover:bg-gray-600 text-white"
aria-label="Close FAQ"
>
<i data-lucide="x" class="w-5 h-5"></i>
</button>
<section class="max-w-4xl mx-auto px-6 pt-12 pb-8">
<h2
id="faq-modal-title"
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
What is the PDF Workflow Builder for?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
It chains several PDF operations into one run. Instead of
opening a tool, downloading, and feeding the result into the
next tool for each step, you connect nodes on a canvas, such as
PDF Input, Compress, Watermark, and Download, set each node's
options, and click Run to process everything in sequence.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I run the same workflow on many PDFs at once?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Yes. The PDF Input node accepts multiple files; a Merge node
combines them into one document, while other nodes process each
PDF separately. When more than one file comes out the end, the
Download node bundles them into a ZIP automatically.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Why won't it let me connect two nodes?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Sockets are typed: PDF (a single document), MultiPDF (several
documents), and Image. A node that expects a single PDF won't
accept a MultiPDF output, so put a Merge node in between, and
image outputs only feed nodes that take images. Connections
always run from the bottom of one node to the top of the next.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Why does it complain that Encrypt must be the last step?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Once a PDF is encrypted, later nodes can't read it, so the
engine rejects a workflow where anything other than the output
sits after Encrypt. Move Encrypt to just before Download.
Password-protected inputs are the opposite case: the run pauses
and asks for the password.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What happens if one step fails?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
The run stops at that node, which turns red with an error
message, and nothing downstream is produced. Fix the setting or
the input and run again; it's easiest to build a two-node
version first and add steps once that works.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I save a workflow and reuse it later?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Yes. Save stores it as a named template in your browser's local
storage, and Load brings it back in a later session on the same
browser. Export writes the layout to a workflow.json file you
can back up or send to a colleague, and Import restores nodes,
positions, connections, and settings from that file.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does a saved workflow contain my documents?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Templates and exported JSON files hold only the node types,
their settings, positions, and connections; the PDFs are chosen
fresh each time you run. Settings are saved as typed, so avoid
exporting a workflow with a password entered in an Encrypt node
if you plan to share it.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are the files processed on a server?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Every node runs in your browser with the same engines as the
individual tools, and the only network activity is fetching a
processing module such as Ghostscript the first time a node
needs one. Your PDFs never leave the machine, even in a long
multi-step run.
</p>
</details>
</div>
</section>
</div>
</section>
</div>
<script type="module" src="/src/js/logic/pdf-workflow-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<script type="module" src="/src/js/faqModal.ts"></script>
<script type="application/ld+json">
{