mirror of
https://github.com/alam00000/bentopdf.git
synced 2026-11-12 09:34:01 +01:00
Atharva Bedekar
8e04279c17
Reset, FAQ and Close in PDF Multi Tool and the PDF Workflow toolbar lose their text on small screens, leaving only an icon. Give them a title so the action can still be identified on hover. Multi Tool reuses existing translation keys. PDF Workflow is English only, so its titles are plain text like its labels. Fixes #879
497 lines
17 KiB
HTML
497 lines
17 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="overflow-hidden">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<meta
|
|
name="title"
|
|
content="PDF Multi Tool Online Free - PDF Multi Tool | BentoPDF"
|
|
/>
|
|
<meta
|
|
name="description"
|
|
content="Merge, Split, Organize, Delete, Rotate, Add Blank Pages, Extract and Duplicate in a unified interface. Free, no uploads, no signup. Runs entirely in your browser."
|
|
/>
|
|
<meta name="keywords" content="pdf multi tool, online pdf" />
|
|
<meta name="author" content="BentoPDF" />
|
|
<meta
|
|
name="robots"
|
|
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
|
|
/>
|
|
|
|
<!-- Canonical URL -->
|
|
<link rel="canonical" href="https://www.bentopdf.com/pdf-multi-tool" />
|
|
|
|
<!-- Open Graph / Facebook / LinkedIn -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://www.bentopdf.com/pdf-multi-tool" />
|
|
<meta
|
|
property="og:title"
|
|
content="PDF Multi Tool Online Free - PDF Multi Tool | BentoPDF"
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="Merge, Split, Organize, Delete, Rotate, Add Blank Pages, Extract and Duplicate in a unified interface. Free, no uploads, no signup. Runs entirely in your browser."
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="https://www.bentopdf.com/images/og-pdf-multi-tool.png"
|
|
/>
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:site_name" content="BentoPDF" />
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta
|
|
name="twitter:url"
|
|
content="https://www.bentopdf.com/pdf-multi-tool"
|
|
/>
|
|
<meta name="twitter:title" content="PDF Multi Tool Free" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Merge, Split, Organize, Delete, Rotate, Add Blank Pages, Extract and Duplicate in a unified interface. Free, no uploads, no signup. Runs entirely in your browser."
|
|
/>
|
|
<meta
|
|
name="twitter:image"
|
|
content="https://www.bentopdf.com/images/twitter-pdf-multi-tool.png"
|
|
/>
|
|
<meta name="twitter:site" content="@BentoPDF" />
|
|
|
|
<!-- Mobile Web App -->
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-title" content="PDF Multi Tool" />
|
|
|
|
<title>PDF Multi Tool - BentoPDF</title>
|
|
|
|
<link href="/src/css/styles.css" rel="stylesheet" />
|
|
|
|
<style>
|
|
/* Hide scrollbar for toolbar overflow */
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Fix for mobile toolbar to prevent movement during drag operations */
|
|
.toolbar-container {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Prevent layout shifts during dragging */
|
|
body.dragging {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|
|
<!-- Web App Manifest -->
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
|
|
<!-- Favicons -->
|
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="192x192"
|
|
href="/images/favicon-192x192.png"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="512x512"
|
|
href="/images/favicon-512x512.png"
|
|
/>
|
|
<link
|
|
rel="apple-touch-icon"
|
|
sizes="180x180"
|
|
href="/images/apple-touch-icon.png"
|
|
/>
|
|
<link rel="icon" href="/favicon.ico" sizes="32x32" />
|
|
</head>
|
|
|
|
<body
|
|
class="antialiased bg-gray-900 h-[100dvh] overflow-hidden flex flex-col"
|
|
>
|
|
{{> navbar }}
|
|
|
|
<!-- SEO H1 (visually hidden but present for search engines) -->
|
|
<h1 class="sr-only">PDF Multi Tool Free Online - Edit & Organize PDFs</h1>
|
|
|
|
<!-- Main Container -->
|
|
<div class="flex flex-col flex-1 overflow-hidden relative">
|
|
<!-- Toolbar -->
|
|
<div
|
|
class="bg-gray-800 border-b border-gray-700 flex items-center gap-2 px-2 sm:px-4 py-2 toolbar-container flex-none z-20"
|
|
>
|
|
<button
|
|
id="reset-btn"
|
|
title="Reset"
|
|
data-i18n-title="multiTool.reset"
|
|
style="display: none"
|
|
class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
|
|
>
|
|
<i data-lucide="refresh-ccw" class="w-4 h-4"></i>
|
|
<span class="hidden min-[390px]:inline" data-i18n="multiTool.reset"
|
|
>Reset</span
|
|
>
|
|
</button>
|
|
|
|
<button
|
|
id="export-pdf-btn"
|
|
style="display: none"
|
|
class="flex items-center gap-1.5 bg-indigo-600 hover:bg-indigo-700 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
|
|
>
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
<span data-i18n="multiTool.exportPdf">Export PDF</span>
|
|
</button>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<button
|
|
id="faq-open-btn"
|
|
title="FAQ"
|
|
data-i18n-title="footer.faqLink"
|
|
type="button"
|
|
class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
|
|
aria-label="FAQ"
|
|
aria-haspopup="dialog"
|
|
aria-controls="faq-modal"
|
|
aria-expanded="false"
|
|
>
|
|
<i data-lucide="circle-help" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">FAQ</span>
|
|
</button>
|
|
|
|
<button
|
|
id="close-tool-btn"
|
|
title="Close"
|
|
data-i18n-title="common.close"
|
|
class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline" data-i18n="common.close">Close</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content Area -->
|
|
<div
|
|
id="main-scroll-container"
|
|
class="flex-1 overflow-auto p-3 pb-24 sm:p-4 sm:pb-8 md:pt-4 md:pb-4"
|
|
>
|
|
<div
|
|
id="upload-area"
|
|
class="hidden border-2 border-dashed border-gray-600 rounded-lg p-6 sm:p-12 text-center max-w-full cursor-pointer"
|
|
>
|
|
<i
|
|
class="ph ph-upload-simple inline-block text-5xl sm:text-6xl text-gray-400 mb-3 sm:mb-4"
|
|
></i>
|
|
<p
|
|
class="text-gray-300 text-base sm:text-lg mb-1 sm:mb-2"
|
|
data-i18n="multiTool.uploadPdfFiles"
|
|
>
|
|
Select PDF or image files
|
|
</p>
|
|
<p
|
|
class="text-gray-400 text-xs sm:text-sm mb-3 sm:mb-4"
|
|
data-i18n="multiTool.dragAndDrop"
|
|
>
|
|
Drag and drop PDF or image files here, or click to select
|
|
</p>
|
|
<input
|
|
type="file"
|
|
id="pdf-file-input"
|
|
accept="application/pdf,image/*,.heic,.heif,.jpg,.jpeg,.png,.bmp,.gif,.tiff,.tif,.webp,.svg,.psd,.jp2,.jpx,.jxr,.pnm,.pgm,.pbm,.ppm,.pam"
|
|
multiple
|
|
class="hidden"
|
|
/>
|
|
<button
|
|
id="pdf-file-input-select-btn"
|
|
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 sm:px-6 py-2 rounded text-sm sm:text-base"
|
|
data-i18n="multiTool.selectFiles"
|
|
>
|
|
Select Files
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="organize-viewer" class="hidden flex-1 min-h-0"></div>
|
|
</div>
|
|
|
|
{{> footer-compact }}
|
|
|
|
<!-- Loading Overlay -->
|
|
<div
|
|
id="loading-overlay"
|
|
class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center"
|
|
>
|
|
<div class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4">
|
|
<div class="flex items-center justify-center mb-4">
|
|
<i
|
|
data-lucide="loader"
|
|
class="w-12 h-12 text-indigo-400 animate-spin"
|
|
></i>
|
|
</div>
|
|
<p
|
|
id="loading-text"
|
|
class="text-white text-center text-lg mb-4"
|
|
data-i18n="multiTool.renderingPages"
|
|
>
|
|
Rendering pages...
|
|
</p>
|
|
<div class="w-full bg-gray-700 rounded-full h-2.5">
|
|
<div
|
|
id="loading-progress"
|
|
class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300"
|
|
style="width: 0%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div
|
|
id="modal"
|
|
class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center"
|
|
>
|
|
<div
|
|
class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4 border border-gray-700"
|
|
>
|
|
<div class="flex items-center justify-center mb-4">
|
|
<div id="modal-icon"></div>
|
|
</div>
|
|
<h3
|
|
id="modal-title"
|
|
class="text-xl font-bold text-white text-center mb-2"
|
|
></h3>
|
|
<p id="modal-message" class="text-gray-300 text-center mb-6"></p>
|
|
<button
|
|
id="modal-close-btn"
|
|
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden File Input -->
|
|
<!-- Scripts -->
|
|
<!-- 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"
|
|
>
|
|
<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 pages can also be added
|
|
from the Insert menu.
|
|
</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 Split and choose how to divide the document: by page
|
|
ranges, odd and even pages, every page, bookmarks, every N
|
|
pages, or file size. One part downloads as a PDF; several parts
|
|
download together as a ZIP.
|
|
</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>
|
|
</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">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "PDF Multi Tool - BentoPDF",
|
|
"applicationCategory": "PDF Tool",
|
|
"operatingSystem": "Any - Web Browser",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "USD"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "HowTo",
|
|
"name": "How to pdf multi tool online",
|
|
"description": "Learn how to pdf multi tool using BentoPDF",
|
|
"step": [
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 1,
|
|
"name": "Upload File",
|
|
"text": "Click or drag and drop your file"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 2,
|
|
"name": "Process",
|
|
"text": "Click the process button"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 3,
|
|
"name": "Download",
|
|
"text": "Download your processed file"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "Home",
|
|
"item": "https://www.bentopdf.com"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "PDF Multi Tool",
|
|
"item": "https://www.bentopdf.com/pdf-multi-tool"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|