lucasw89/bentopdf
1
0
Fork 0
mirror of https://github.com/alam00000/bentopdf.git synced 2026-11-05 11:52:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: lucasw89/bentopdf:v1.14.0
Branches Tags
lucasw89/bentopdf:main lucasw89/bentopdf:dependabot/npm_and_yarn/npm-dependencies-ed15bc540a lucasw89/bentopdf:badges lucasw89/bentopdf:chore/update-pdf-engine lucasw89/bentopdf:ads-checkout lucasw89/bentopdf:cla-signatures lucasw89/bentopdf:dependabot/npm_and_yarn/i18next-http-backend-4.0.4 lucasw89/bentopdf:dependabot/npm_and_yarn/undici-7.30.1 lucasw89/bentopdf:dependabot/npm_and_yarn/humanfs/node-0.16.8 lucasw89/bentopdf:dependabot/docker/docker/library/node-26-alpine lucasw89/bentopdf:dependabot/npm_and_yarn/flatted-3.4.2 lucasw89/bentopdf:chore/update-embedpdf-snippet lucasw89/bentopdf:dependabot/github_actions/docker/login-action-4 lucasw89/bentopdf:dependabot/github_actions/actions/upload-pages-artifact-4 lucasw89/bentopdf:dependabot/github_actions/cla-assistant/github-action-2.6.1 lucasw89/bentopdf:dependabot/github_actions/actions/checkout-6 lucasw89/bentopdf:dependabot/github_actions/actions/setup-node-6 lucasw89/bentopdf:pdf-form-creator lucasw89/bentopdf:main-beta lucasw89/bentopdf:iamtensaii-feature/markdown-to-pdf-conversion lucasw89/bentopdf:add-attachments lucasw89/bentopdf:linearize lucasw89/bentopdf:alternate-merge lucasw89/bentopdf:remove-blank-pages lucasw89/bentopdf:posterize
lucasw89/bentopdf:v2.8.11 lucasw89/bentopdf:v2.8.10 lucasw89/bentopdf:v2.8.9 lucasw89/bentopdf:v2.8.8 lucasw89/bentopdf:v2.8.7 lucasw89/bentopdf:v2.8.6 lucasw89/bentopdf:v2.8.5 lucasw89/bentopdf:v2.8.4 lucasw89/bentopdf:v2.8.3 lucasw89/bentopdf:v2.8.2 lucasw89/bentopdf:v2.8.1 lucasw89/bentopdf:v2.8.0 lucasw89/bentopdf:v2.7.0 lucasw89/bentopdf:v2.6.0 lucasw89/bentopdf:v2.5.0 lucasw89/bentopdf:v2.4.1 lucasw89/bentopdf:v2.4.0 lucasw89/bentopdf:v2.3.3 lucasw89/bentopdf:v2.3.1 lucasw89/bentopdf:v2.3.0 lucasw89/bentopdf:v2.2.1 lucasw89/bentopdf:v2.2.0 lucasw89/bentopdf:v2.1.0 lucasw89/bentopdf:v2.0.0 lucasw89/bentopdf:v1.16.1 lucasw89/bentopdf:v1.16.0 lucasw89/bentopdf:v1.15.4 lucasw89/bentopdf:v1.15.3 lucasw89/bentopdf:v1.15.1 lucasw89/bentopdf:v1.14.0 lucasw89/bentopdf:v1.11.2 lucasw89/bentopdf:v1.11.1 lucasw89/bentopdf:v1.11.0 lucasw89/bentopdf:v1.10.5 lucasw89/bentopdf:v1.10.4 lucasw89/bentopdf:v1.10.3 lucasw89/bentopdf:v1.10.1 lucasw89/bentopdf:v1.10.0 lucasw89/bentopdf:v1.9.0 lucasw89/bentopdf:v1.8.1 lucasw89/bentopdf:v1.8.0 lucasw89/bentopdf:v1.7.9 lucasw89/bentopdf:v1.7.8 lucasw89/bentopdf:v1.7.7 lucasw89/bentopdf:v1.7.6 lucasw89/bentopdf:v1.7.5 lucasw89/bentopdf:v1.7.4 lucasw89/bentopdf:v1.7.3 lucasw89/bentopdf:v1.7.1 lucasw89/bentopdf:v1.7.0 lucasw89/bentopdf:v1.6.2 lucasw89/bentopdf:v1.6.1 lucasw89/bentopdf:v1.6.0 lucasw89/bentopdf:v1.5.1 lucasw89/bentopdf:v1.5.0 lucasw89/bentopdf:v1.4.0 lucasw89/bentopdf:v1.3.2 lucasw89/bentopdf:v1.3.1 lucasw89/bentopdf:v1.3.0 lucasw89/bentopdf:v1.2.0 lucasw89/bentopdf:v1.1.5 lucasw89/bentopdf:v1.1.4 lucasw89/bentopdf:v1.1.3 lucasw89/bentopdf:v1.1.2 lucasw89/bentopdf:v1.1.1 lucasw89/bentopdf:v1.1.0 lucasw89/bentopdf:v1.0.2 lucasw89/bentopdf:v1.0.1 lucasw89/bentopdf:v1.0.0 lucasw89/bentopdf:v0.0.1
..
compare: lucasw89/bentopdf:v1.15.4
Branches Tags
lucasw89/bentopdf:dependabot/npm_and_yarn/npm-dependencies-ed15bc540a lucasw89/bentopdf:main lucasw89/bentopdf:badges lucasw89/bentopdf:chore/update-pdf-engine lucasw89/bentopdf:ads-checkout lucasw89/bentopdf:cla-signatures lucasw89/bentopdf:dependabot/npm_and_yarn/i18next-http-backend-4.0.4 lucasw89/bentopdf:dependabot/npm_and_yarn/undici-7.30.1 lucasw89/bentopdf:dependabot/npm_and_yarn/humanfs/node-0.16.8 lucasw89/bentopdf:dependabot/docker/docker/library/node-26-alpine lucasw89/bentopdf:dependabot/npm_and_yarn/flatted-3.4.2 lucasw89/bentopdf:chore/update-embedpdf-snippet lucasw89/bentopdf:dependabot/github_actions/docker/login-action-4 lucasw89/bentopdf:dependabot/github_actions/actions/upload-pages-artifact-4 lucasw89/bentopdf:dependabot/github_actions/cla-assistant/github-action-2.6.1 lucasw89/bentopdf:dependabot/github_actions/actions/checkout-6 lucasw89/bentopdf:dependabot/github_actions/actions/setup-node-6 lucasw89/bentopdf:pdf-form-creator lucasw89/bentopdf:main-beta lucasw89/bentopdf:iamtensaii-feature/markdown-to-pdf-conversion lucasw89/bentopdf:add-attachments lucasw89/bentopdf:linearize lucasw89/bentopdf:alternate-merge lucasw89/bentopdf:remove-blank-pages lucasw89/bentopdf:posterize
lucasw89/bentopdf:v2.8.11 lucasw89/bentopdf:v2.8.10 lucasw89/bentopdf:v2.8.9 lucasw89/bentopdf:v2.8.8 lucasw89/bentopdf:v2.8.7 lucasw89/bentopdf:v2.8.6 lucasw89/bentopdf:v2.8.5 lucasw89/bentopdf:v2.8.4 lucasw89/bentopdf:v2.8.3 lucasw89/bentopdf:v2.8.2 lucasw89/bentopdf:v2.8.1 lucasw89/bentopdf:v2.8.0 lucasw89/bentopdf:v2.7.0 lucasw89/bentopdf:v2.6.0 lucasw89/bentopdf:v2.5.0 lucasw89/bentopdf:v2.4.1 lucasw89/bentopdf:v2.4.0 lucasw89/bentopdf:v2.3.3 lucasw89/bentopdf:v2.3.1 lucasw89/bentopdf:v2.3.0 lucasw89/bentopdf:v2.2.1 lucasw89/bentopdf:v2.2.0 lucasw89/bentopdf:v2.1.0 lucasw89/bentopdf:v2.0.0 lucasw89/bentopdf:v1.16.1 lucasw89/bentopdf:v1.16.0 lucasw89/bentopdf:v1.15.4 lucasw89/bentopdf:v1.15.3 lucasw89/bentopdf:v1.15.1 lucasw89/bentopdf:v1.14.0 lucasw89/bentopdf:v1.11.2 lucasw89/bentopdf:v1.11.1 lucasw89/bentopdf:v1.11.0 lucasw89/bentopdf:v1.10.5 lucasw89/bentopdf:v1.10.4 lucasw89/bentopdf:v1.10.3 lucasw89/bentopdf:v1.10.1 lucasw89/bentopdf:v1.10.0 lucasw89/bentopdf:v1.9.0 lucasw89/bentopdf:v1.8.1 lucasw89/bentopdf:v1.8.0 lucasw89/bentopdf:v1.7.9 lucasw89/bentopdf:v1.7.8 lucasw89/bentopdf:v1.7.7 lucasw89/bentopdf:v1.7.6 lucasw89/bentopdf:v1.7.5 lucasw89/bentopdf:v1.7.4 lucasw89/bentopdf:v1.7.3 lucasw89/bentopdf:v1.7.1 lucasw89/bentopdf:v1.7.0 lucasw89/bentopdf:v1.6.2 lucasw89/bentopdf:v1.6.1 lucasw89/bentopdf:v1.6.0 lucasw89/bentopdf:v1.5.1 lucasw89/bentopdf:v1.5.0 lucasw89/bentopdf:v1.4.0 lucasw89/bentopdf:v1.3.2 lucasw89/bentopdf:v1.3.1 lucasw89/bentopdf:v1.3.0 lucasw89/bentopdf:v1.2.0 lucasw89/bentopdf:v1.1.5 lucasw89/bentopdf:v1.1.4 lucasw89/bentopdf:v1.1.3 lucasw89/bentopdf:v1.1.2 lucasw89/bentopdf:v1.1.1 lucasw89/bentopdf:v1.1.0 lucasw89/bentopdf:v1.0.2 lucasw89/bentopdf:v1.0.1 lucasw89/bentopdf:v1.0.0 lucasw89/bentopdf:v0.0.1
29 Commits
v1.14.0 .. v1.15.4
Author SHA1 Message Date
abdullahalam123 47c70b43e5 Release v1.15.4 2026-01-02 21:47:10 +05:30
abdullahalam123 c6e9e29e84 update: year 2026-01-02 21:34:39 +05:30
github-actions[bot] bfcf1f5fc3 @raulgcode has signed the CLA in alam00000/bentopdf#348 2026-01-02 13:35:10 +00:00
abdullahalam123 bddd11c07b fix(pdf-a): fix PDF/A-2b and PDF/A-3b transparency compliance 
- Add post-processing step using pdf-lib to fix ISO 19005-2/3 clause 6.2.10
- Add Group dictionaries with ICC-based color space to all pages
- Fix XObjects (Form XObjects) that have DeviceRGB in their Group dictionaries
- Reference OutputIntent's ICC profile as the blending color space
- Enable page compression for smaller output files

This ensures PDFs with transparency pass VeraPDF validation for PDF/A-2b and PDF/A-3b.
 2026-01-02 17:04:50 +05:30
abdullahalam123 bb42a5aec0 fix: split-pdf page range 2026-01-01 19:21:10 +05:30
abdullahalam123 c6fb46cbf2 feat: fix favicon implementation for Google search and PWA support 
- Add background to favicon.svg (RGB 38,45,59)
- Generate all required PNG sizes (192x192, 512x512, 180x180)
- Create site.webmanifest with proper PWA config
- Standardize favicon links across 116 HTML files
- Fix incorrect MIME types in 50+ pages
 2026-01-01 19:21:10 +05:30
abdullahalam123 2f8086ad59 refactor: centralize CDN config and fix service worker fallback 
- Centralize CDN versions/URLs in cdn-version.ts
- Switch LibreOffice to @bentopdf/libreoffice-wasm package
- Fix service worker fallback to support all WASM packages
- Remove dead code and silence production logs
 2026-01-01 19:21:10 +05:30
github-actions[bot] 659a4b1a32 @mafridi143 has signed the CLA in alam00000/bentopdf#338 2025-12-30 12:27:19 +00:00
abdullahalam123 13221f8bee add: funding manifest 2025-12-30 15:32:00 +05:30
abdullahalam123 f22488120b fix:xlsx vulnearability 2025-12-30 13:34:25 +05:30
abdullahalam123 34d65300d7 add:include-docs script 2025-12-30 13:27:11 +05:30
abdullahalam123 7b09956493 Merge branch 'enhance-seo' 2025-12-30 13:21:35 +05:30
abdullahalam123 5e488ac071 add: 404 page 2025-12-30 13:10:22 +05:30
Alam b1116b01c9 Merge pull request #335 from Roddy-D/main 
Fix subdirectory hosting for static pages
 2025-12-30 12:54:29 +05:30
abdullahalam123 4e5d747cac add: seo 2025-12-30 12:36:30 +05:30
github-actions[bot] 1ab535f873 @Roddy-D has signed the CLA in alam00000/bentopdf#335 2025-12-29 23:42:29 +00:00
Roddy 12c61a2d53 Fix subdirectory hosting for static pages 2025-12-29 18:34:31 -05:00
abdullahalam123 a77cd6380c Release v1.15.3 2025-12-29 14:59:18 +05:30
abdullahalam123 578f569c0a Release v1.15.2 2025-12-29 14:59:11 +05:30
abdullahalam123 183c1f0d7a fix: metadata 2025-12-29 14:59:11 +05:30
abdullahalam123 8bae2b662a fix: markdown to pdf spacing and added mermaid diagram support 2025-12-29 14:59:11 +05:30
github-actions[bot] b4c77acee7 @Timmy93 has signed the CLA in alam00000/bentopdf#325 2025-12-29 00:17:20 +00:00
Alam bd6fd53d8b Merge pull request #317 from ryuupendragon/main 
Add LABEL "org.opencontainers.image.url"
 2025-12-28 13:18:43 +05:30
github-actions[bot] 665275be1e @ryuupendragon has signed the CLA in alam00000/bentopdf#317 2025-12-28 07:40:18 +00:00
ryuupendragon 210af94722 Add LABEL "org.opencontainers.image.url" 2025-12-28 12:58:47 +05:30
abdullahalam123 1aae928689 Release v1.15.1 2025-12-27 21:56:17 +05:30
abdullahalam123 c32fed3add Release v1.15.0 2025-12-27 21:55:41 +05:30
abdullahalam123 fe32de047e fix: docker deployment issues and update readme" -m "Fixed nginx brotli_static error, duplicates, and added COOP/COEP headers for SharedArrayBuffer. Updated README with acknowledgments 2025-12-27 21:55:40 +05:30
github-actions[bot] cd3529bf7e @matteo-genovese has signed the CLA in alam00000/bentopdf#315 2025-12-27 15:47:21 +00:00
198 changed files with 51410 additions and 18391 deletions
Expand all files Collapse all files
.gitignore
+4 -4
View File
@@ -26,7 +26,7 @@ dist-ssr
# Coverage reports
coverage/
*.lcov
# will be deleted later
new-changes-to-port
pymupdf-wasm
serve_test
#backup
.seo-backup
libreoffice-wasm-package
.well-known/funding-manifest-urls
+1
View File
@@ -0,0 +1 @@
https://www.bentopdf.com/funding.json
404.html
+271
View File
@@ -0,0 +1,271 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>404 - Page Not Found | BentoPDF</title>
<meta name="description"
content="Oops! The page you're looking for doesn't exist. Return to BentoPDF's homepage to access our free PDF tools.">
<meta name="robots" content="noindex, follow">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/404">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/404">
<meta property="og:title" content="404 - Page Not Found | BentoPDF">
<meta property="og:description" content="The page you're looking for doesn't exist.">
<meta property="og:site_name" content="BentoPDF">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="404 - Page Not Found">
<meta name="twitter:description" content="The page you're looking for doesn't exist.">
<meta name="twitter:site" content="@BentoPDF">
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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 text-gray-300">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/index.html">BentoPDF</a>
</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="/index.html" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/licensing.html" class="nav-link" data-i18n="nav.licensing">Licensing</a>
<a href="/index.html#tools-header" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/index.html" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/licensing.html" class="mobile-nav-link" data-i18n="nav.licensing">Licensing</a>
<a href="/index.html#tools-header" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<section id="404-content" class="text-center py-20 md:py-32">
<!-- 404 Number -->
<div class="mb-8">
<h1 class="text-9xl md:text-[12rem] font-bold text-indigo-500 leading-none">
404
</h1>
</div>
<!-- Main heading -->
<h2 class="text-3xl md:text-5xl font-bold text-white mb-4">
Page Not Found
</h2>
<!-- Description -->
<p class="text-lg md:text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
Oops! The page you're looking for seems to have wandered off into the digital void.
Don't worry though, our PDF tools are still right where you left them.
</p>
<!-- Action buttons -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a href="/index.html"
class="inline-flex items-center gap-3 pl-8 pr-2 py-2 rounded-full bg-gradient-to-b from-indigo-500 to-indigo-600 text-white font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 hover:shadow-xl hover:shadow-indigo-500/30 transition-all duration-200 transform hover:-translate-y-1">
<span>Back to Home</span>
<span class="bg-white text-indigo-600 rounded-full p-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" />
</svg>
</span>
</a>
<a href="/index.html#tools-header"
class="inline-block px-8 py-3 rounded-full bg-gray-800 text-white font-semibold border border-gray-700 hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-700 transition-all duration-200">
Browse All Tools
</a>
</div>
<!-- Helpful links -->
<div class="mt-16">
<p class="text-gray-500 mb-4">Or try these popular tools:</p>
<div class="flex flex-wrap justify-center gap-3">
<a href="/src/pages/merge-pdf.html"
class="px-4 py-2 bg-gray-800 text-gray-300 rounded-lg hover:bg-gray-700 hover:text-white transition-colors text-sm">
Merge PDF
</a>
<a href="/src/pages/split-pdf.html"
class="px-4 py-2 bg-gray-800 text-gray-300 rounded-lg hover:bg-gray-700 hover:text-white transition-colors text-sm">
Split PDF
</a>
<a href="/src/pages/compress-pdf.html"
class="px-4 py-2 bg-gray-800 text-gray-300 rounded-lg hover:bg-gray-700 hover:text-white transition-colors text-sm">
Compress PDF
</a>
<a href="/src/pages/edit-pdf.html"
class="px-4 py-2 bg-gray-800 text-gray-300 rounded-lg hover:bg-gray-700 hover:text-white transition-colors text-sm">
Edit PDF
</a>
</div>
</div>
</section>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm" data-i18n="footer.copyright">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
<span data-i18n="footer.version">Version</span> <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4" data-i18n="footer.company">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400" data-i18n="footer.aboutUs">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400" data-i18n="footer.faqLink">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400" data-i18n="footer.contactUs">Contact
Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4" data-i18n="footer.legal">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400"
data-i18n="nav.licensing">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400"
data-i18n="footer.termsAndConditions">Terms and
Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400"
data-i18n="footer.privacyPolicy">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4" data-i18n="footer.followUs">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="src/js/utils/lucide-init.ts"></script>
<script type="module" src="src/version.ts"></script>
<script type="module" src="src/js/main.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
<!-- JSON-LD Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "404 - Page Not Found",
"description": "The page you're looking for doesn't exist on BentoPDF.",
"url": "https://www.bentopdf.com/404"
}
</script>
</body>
</html>
Dockerfile
+1
View File
@@ -31,6 +31,7 @@ RUN if [ -z "$BASE_URL" ]; then \
FROM nginxinc/nginx-unprivileged:stable-alpine-slim
LABEL org.opencontainers.image.source="https://github.com/alam00000/bentopdf"
LABEL org.opencontainers.image.url="https://github.com/alam00000/bentopdf"
# global arg to local arg
ARG BASE_URL
README.md
+20
View File
@@ -308,6 +308,23 @@ docker build --build-arg COMPRESSION_MODE=all -t bentopdf:all .
| `o` | originals | Development or custom compression |
| `all` | all formats | Maximum compatibility (default) |
**CDN Optimization:**
BentoPDF can use jsDelivr CDN to serve large WASM files (LibreOffice, Ghostscript, PyMuPDF) for improved performance and reduced bandwidth costs:
```bash
# Production build with CDN (Recommended)
VITE_USE_CDN=true npm run build
# Standard build with local files only
npm run build
```
**How it works:**
- When `VITE_USE_CDN=true`: Browser loads WASM files from jsDelivr CDN (fast, global delivery)
- Local files are **always included** as automatic fallback
- If CDN fails then it falls back to local files
**Subdirectory Hosting:**
BentoPDF can also be hosted from a subdirectory (e.g., `example.com/tools/bentopdf/`):
@@ -577,5 +594,8 @@ BentoPDF wouldn't be possible without the amazing open-source tools and librarie
- **[Tailwind CSS](https://tailwindcss.com/)** – For rapid, flexible, and beautiful UI styling.
- **[qpdf](https://github.com/qpdf/qpdf)** and **[qpdf-wasm](https://github.com/neslinesli93/qpdf-wasm)**– A powerful command-line tool and library for inspecting, repairing, and transforming PDF file ported to wasm
- **[cpdf](https://www.coherentpdf.com/)** – For content preserving pdf operations.
- **[LibreOffice](https://www.libreoffice.org/)** – For powerful document conversion capabilities.
- **[PyMuPDF](https://github.com/pymupdf/PyMuPDF)** – For high-performance PDF manipulation and data extraction.
- **[Ghostscript(GhostPDL)](https://github.com/ArtifexSoftware/ghostpdl)** – Needs no Introduction.
Your work inspires and empowers developers everywhere. Thank you for making open-source amazing!
about.html
+50 -6
View File
@@ -4,16 +4,49 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Bentopdf - Fast, Private, and Free PDF Tools</title>
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- Primary Meta Tags -->
<title>About BentoPDF - Privacy-First Free PDF Tools | Our Mission</title>
<meta name="description"
content="Learn about BentoPDF - 100% free, privacy-first PDF toolkit. All tools run in your browser, no uploads, no signup. Fast, secure, and forever free.">
<meta name="keywords" content="about bentopdf, privacy-first pdf, free pdf tools, browser-based pdf, open source pdf">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/about">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/about">
<meta property="og:title" content="About BentoPDF - Privacy-First Free PDF Tools">
<meta property="og:description"
content="100% free PDF toolkit. Privacy-first, browser-based, no signups. Learn about our mission and values.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-about.png">
<meta property="og:site_name" content="BentoPDF">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="About BentoPDF">
<meta name="twitter:description" content="Privacy-first, free PDF tools that run in your browser.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-about.png">
<meta name="twitter:site" content="@BentoPDF">
<link rel="alternate" hreflang="en" href="/en/about.html" />
<link rel="alternate" hreflang="de" href="/de/about.html" />
<link rel="alternate" hreflang="vi" href="/vi/about.html" />
<link rel="alternate" hreflang="x-default" href="/en/about.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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 text-gray-300">
@@ -205,7 +238,7 @@
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm" data-i18n="footer.copyright">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
<span data-i18n="footer.version">Version</span> <span id="app-version"></span>
@@ -285,6 +318,17 @@
<script type="module" src="src/version.ts"></script>
<script type="module" src="src/js/main.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
<!-- JSON-LD Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "AboutPage",
"name": "About BentoPDF",
"description": "Learn about BentoPDF's mission to provide free, privacy-first PDF tools",
"url": "https://www.bentopdf.com/about"
}
</script>
</body>
</html>
contact.html
+49 -6
View File
@@ -4,16 +4,50 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us - BentoPDF</title>
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- Primary Meta Tags -->
<title>Contact BentoPDF - Get in Touch | Support</title>
<meta name="description"
content="Contact BentoPDF for support, questions, or feedback. Reach us at [email protected] - we're here to help with your PDF needs.">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/contact">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/contact">
<meta property="og:title" content="Contact BentoPDF - Get in Touch | Support">
<meta property="og:description"
content="Contact BentoPDF for support, questions, or feedback. Reach us at [email protected] - we're here to help with your PDF needs.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-contact.png">
<meta property="og:site_name" content="BentoPDF">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Contact BentoPDF - Get in Touch | Support">
<meta name="twitter:description"
content="Contact BentoPDF for support, questions, or feedback. Reach us at [email protected] - we're here to help with your PDF needs.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-contact.png">
<meta name="twitter:site" content="@BentoPDF">
<title>Contact BentoPDF - Get in Touch | Support</title>
<link rel="alternate" hreflang="en" href="/en/contact.html" />
<link rel="alternate" hreflang="de" href="/de/contact.html" />
<link rel="alternate" hreflang="vi" href="/vi/contact.html" />
<link rel="alternate" hreflang="x-default" href="/en/contact.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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 text-gray-300">
@@ -98,7 +132,7 @@
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm" data-i18n="footer.copyright">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
<span data-i18n="footer.version">Version</span> <span id="app-version"></span>
@@ -178,6 +212,15 @@
<script type="module" src="src/version.ts"></script>
<script type="module" src="src/js/main.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
<!-- JSON-LD Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ContactPage",
"name": "Contact BentoPDF - Get in Touch | Support",
"url": "https://www.bentopdf.com/contact"
}
</script>
</body>
</html>
docs/.vitepress/cache/deps/_metadata.json
Vendored
+10 -10
View File
@@ -1,49 +1,49 @@
{
"hash": "9bc6d4f1",
"hash": "b8473a4c",
"configHash": "de601e5a",
"lockfileHash": "6c1ba38e",
"browserHash": "669b23ae",
"lockfileHash": "97b635bf",
"browserHash": "6dc79743",
"optimized": {
"vue": {
"src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js",
"fileHash": "25632ac1",
"fileHash": "82d9bd70",
"needsInterop": false
},
"vitepress > @vue/devtools-api": {
"src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
"file": "vitepress___@vue_devtools-api.js",
"fileHash": "f01e74c0",
"fileHash": "776db5f7",
"needsInterop": false
},
"vitepress > @vueuse/core": {
"src": "../../../../node_modules/@vueuse/core/index.mjs",
"file": "vitepress___@vueuse_core.js",
"fileHash": "8c581a91",
"fileHash": "5b890910",
"needsInterop": false
},
"vitepress > @vueuse/integrations/useFocusTrap": {
"src": "../../../../node_modules/@vueuse/integrations/useFocusTrap.mjs",
"file": "vitepress___@vueuse_integrations_useFocusTrap.js",
"fileHash": "2cd049fb",
"fileHash": "0798c805",
"needsInterop": false
},
"vitepress > mark.js/src/vanilla.js": {
"src": "../../../../node_modules/mark.js/src/vanilla.js",
"file": "vitepress___mark__js_src_vanilla__js.js",
"fileHash": "8f240f8c",
"fileHash": "ce575f5c",
"needsInterop": false
},
"vitepress > minisearch": {
"src": "../../../../node_modules/minisearch/dist/es/index.js",
"file": "vitepress___minisearch.js",
"fileHash": "4848f633",
"fileHash": "97a74ec0",
"needsInterop": false
},
"@theme/index": {
"src": "../../../../node_modules/vitepress/dist/client/theme-default/index.js",
"file": "@theme_index.js",
"fileHash": "b83632c3",
"fileHash": "725ded83",
"needsInterop": false
}
},
docs/.vitepress/config.mts
+3 -2
View File
@@ -4,6 +4,7 @@ import { defineConfig } from 'vitepress'
export default defineConfig({
title: "BentoPDF Docs",
description: "Documentation for BentoPDF - The free, open-source, privacy-first PDF toolkit",
base: '/docs/',
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
@@ -58,13 +59,13 @@ export default defineConfig({
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/bentopdf/bentopdf' },
{ icon: 'github', link: 'https://github.com/alam00000/bentopdf' },
{ icon: 'discord', link: 'https://discord.gg/Bgq3Ay3f2w' }
],
footer: {
message: 'Dual-licensed under AGPL-3.0 and Commercial License.',
copyright: 'Copyright © 2025 BentoPDF'
copyright: 'Copyright © 2026 BentoPDF'
},
search: {
docs/contributing.md
+4 -4
View File
@@ -112,18 +112,18 @@ Add entries to all locale files in `public/locales/`:
## Translation
See [TRANSLATION.md](https://github.com/bentopdf/bentopdf/blob/main/TRANSLATION.md) for adding new languages.
See [TRANSLATION.md](https://github.com/alam00000/bentopdf/blob/main/TRANSLATION.md) for adding new languages.
## Contributor License Agreement
Before your PR can be merged, you'll need to sign our CLA:
- [Individual CLA (ICLA)](https://github.com/bentopdf/bentopdf/blob/main/ICLA.md)
- [Corporate CLA (CCLA)](https://github.com/bentopdf/bentopdf/blob/main/CCLA.md)
- [Individual CLA (ICLA)](https://github.com/alam00000/bentopdf/blob/main/ICLA.md)
- [Corporate CLA (CCLA)](https://github.com/alam00000/bentopdf/blob/main/CCLA.md)
## Getting Help
- [GitHub Issues](https://github.com/bentopdf/bentopdf/issues)
- [GitHub Issues](https://github.com/alam00000/bentopdf/issues)
- [Discord Community](https://discord.gg/Bgq3Ay3f2w)
## License
docs/getting-started.md
+3 -3
View File
@@ -16,10 +16,10 @@ Visit [bentopdf.com](https://bentopdf.com) to use BentoPDF instantly—no instal
```bash
# Pull and run the Docker image
docker run -d -p 3000:80 ghcr.io/bentopdf/bentopdf:latest
docker run -d -p 3000:8080 ghcr.io/alam00000/bentopdf:latest
# Or use Docker Compose
curl -O https://raw.githubusercontent.com/bentopdf/bentopdf/main/docker-compose.yml
curl -O https://raw.githubusercontent.com/alam00000/bentopdf/main/docker-compose.yml
docker compose up -d
```
@@ -29,7 +29,7 @@ Then open `http://localhost:3000` in your browser.
```bash
# Clone the repository
git clone https://github.com/bentopdf/bentopdf.git
git clone https://github.com/alam00000/bentopdf.git
cd bentopdf
# Install dependencies
docs/self-hosting/apache.md
+1 -1
View File
@@ -11,7 +11,7 @@ Host BentoPDF using Apache HTTP Server.
## Step 1: Build the Project
```bash
git clone https://github.com/bentopdf/bentopdf.git
git clone https://github.com/alam00000/bentopdf.git
cd bentopdf
npm install
npm run build
docs/self-hosting/docker.md
+15 -20
View File
@@ -7,9 +7,9 @@ The easiest way to self-host BentoPDF in a production environment.
```bash
docker run -d \
--name bentopdf \
-p 3000:80 \
-p 3000:8080 \
--restart unless-stopped \
ghcr.io/bentopdf/bentopdf:latest
ghcr.io/alam00000/bentopdf:latest
```
## Docker Compose
@@ -17,17 +17,15 @@ docker run -d \
Create `docker-compose.yml`:
```yaml
version: '3.8'
services:
bentopdf:
image: ghcr.io/bentopdf/bentopdf:latest
image: ghcr.io/alam00000/bentopdf:latest
container_name: bentopdf
ports:
- "3000:80"
- "3000:8080"
restart: unless-stopped
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:80"]
test: ["CMD", "curl", "-f", "http://localhost:8080"]
interval: 30s
timeout: 10s
retries: 3
@@ -50,10 +48,10 @@ RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
FROM nginxinc/nginx-unprivileged:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
```
@@ -61,7 +59,7 @@ Build and run:
```bash
docker build -t bentopdf:custom .
docker run -d -p 3000:80 bentopdf:custom
docker run -d -p 3000:8080 bentopdf:custom
```
## Environment Variables
@@ -76,15 +74,13 @@ Example:
```bash
docker run -d \
-e SIMPLE_MODE=true \
-p 3000:80 \
ghcr.io/bentopdf/bentopdf:latest
-p 3000:8080 \
ghcr.io/alam00000/bentopdf:latest
```
## With Traefik (Reverse Proxy)
```yaml
version: '3.8'
services:
traefik:
image: traefik:v2.10
@@ -103,20 +99,19 @@ services:
- ./letsencrypt:/letsencrypt
bentopdf:
image: ghcr.io/bentopdf/bentopdf:latest
image: ghcr.io/alam00000/bentopdf:latest
labels:
- "traefik.enable=true"
- "traefik.http.routers.bentopdf.rule=Host(`pdf.example.com`)"
- "traefik.http.routers.bentopdf.entrypoints=websecure"
- "traefik.http.routers.bentopdf.tls.certresolver=letsencrypt"
- "traefik.http.services.bentopdf.loadbalancer.server.port=8080"
restart: unless-stopped
```
## With Caddy (Reverse Proxy)
```yaml
version: '3.8'
services:
caddy:
image: caddy:2
@@ -128,7 +123,7 @@ services:
- caddy_data:/data
bentopdf:
image: ghcr.io/bentopdf/bentopdf:latest
image: ghcr.io/alam00000/bentopdf:latest
restart: unless-stopped
volumes:
@@ -139,7 +134,7 @@ Caddyfile:
```
pdf.example.com {
reverse_proxy bentopdf:80
reverse_proxy bentopdf:8080
}
```
@@ -148,7 +143,7 @@ pdf.example.com {
```yaml
services:
bentopdf:
image: ghcr.io/bentopdf/bentopdf:latest
image: ghcr.io/alam00000/bentopdf:latest
deploy:
resources:
limits:
docs/self-hosting/hostinger.md
+18 -6
View File
@@ -142,9 +142,9 @@ AddType image/webp .webp
# ============================================
# 5. REDIRECTS & ROUTING
# ============================================
# Canonical WWW (update domain name)
RewriteCond %{HTTP_HOST} ^yourdomain\.com [NC]
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [L,R=301]
# Canonical WWW
RewriteCond %{HTTP_HOST} ^bentopdf\.com [NC]
RewriteRule ^(.*)$ https://www.bentopdf.com/$1 [L,R=301]
# Force HTTPS
RewriteCond %{HTTPS} off
@@ -161,15 +161,27 @@ RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Language routes
RewriteRule ^(de|en)$ /$1/ [R=301,L]
RewriteRule ^(de|en|zh|vi)/(.*)$ /$2 [L]
RewriteRule ^(de|en|zh|vi)/?$ / [L]
# SPA Fallback
# ============================================
# 5.5. DOCS ROUTING (VitePress)
# ============================================
RewriteCond %{REQUEST_URI} ^/docs
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html [L]
# ============================================
# 6. SPA FALLBACK
# ============================================
# SPA Fallback (exclude /docs)
RewriteCond %{REQUEST_URI} !^/docs
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ /index.html [L]
ErrorDocument 404 /index.html
ErrorDocument 404 /index.html
```
## Subdirectory .htaccess Example
docs/self-hosting/index.md
+5 -6
View File
@@ -7,19 +7,18 @@ BentoPDF can be self-hosted on your own infrastructure. This guide covers variou
The fastest way to self-host BentoPDF:
```bash
docker run -d -p 3000:80 ghcr.io/bentopdf/bentopdf:latest
docker run -d -p 3000:8080 ghcr.io/alam00000/bentopdf:latest
```
Or with Docker Compose:
```yaml
# docker-compose.yml
version: '3.8'
services:
bentopdf:
image: ghcr.io/bentopdf/bentopdf:latest
image: ghcr.io/alam00000/bentopdf:latest
ports:
- "3000:80"
- "3000:8080"
restart: unless-stopped
```
@@ -31,7 +30,7 @@ docker compose up -d
```bash
# Clone and build
git clone https://github.com/bentopdf/bentopdf.git
git clone https://github.com/alam00000/bentopdf.git
cd bentopdf
npm install
npm run build
@@ -60,7 +59,7 @@ SIMPLE_MODE=true npm run build
docker run -p 3000:8080 bentopdf/bentopdf-simple:latest
```
See [SIMPLE_MODE.md](https://github.com/bentopdf/bentopdf/blob/main/SIMPLE_MODE.md) for full details.
See [SIMPLE_MODE.md](https://github.com/alam00000/bentopdf/blob/main/SIMPLE_MODE.md) for full details.
### Base URL
docs/self-hosting/netlify.md
+1 -1
View File
@@ -4,7 +4,7 @@
## One-Click Deploy
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/bentopdf/bentopdf)
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/alam00000/bentopdf)
## Manual Deployment
docs/self-hosting/nginx.md
+1 -1
View File
@@ -11,7 +11,7 @@ Host BentoPDF on your own server using Nginx.
## Step 1: Build the Project
```bash
git clone https://github.com/bentopdf/bentopdf.git
git clone https://github.com/alam00000/bentopdf.git
cd bentopdf
npm install
npm run build
docs/self-hosting/vercel.md
+2 -2
View File
@@ -4,13 +4,13 @@
## One-Click Deploy
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/bentopdf/bentopdf)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/alam00000/bentopdf)
## Manual Deployment
### Step 1: Fork the Repository
Fork [bentopdf/bentopdf](https://github.com/bentopdf/bentopdf) to your GitHub account.
Fork [bentopdf/bentopdf](https://github.com/alam00000/bentopdf) to your GitHub account.
### Step 2: Import to Vercel
faq.html
+48 -6
View File
@@ -4,12 +4,45 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frequently Asked Questions - BentoPDF</title>
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- Primary Meta Tags -->
<title>FAQ - Frequently Asked Questions | BentoPDF</title>
<meta name="description"
content="Find answers to common questions about BentoPDF. Learn about privacy, features, file limits, and how our browser-based PDF tools work.">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/faq">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/faq">
<meta property="og:title" content="FAQ - Frequently Asked Questions | BentoPDF">
<meta property="og:description"
content="Find answers to common questions about BentoPDF. Learn about privacy, features, file limits, and how our browser-based PDF tools work.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-faq.png">
<meta property="og:site_name" content="BentoPDF">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="FAQ - Frequently Asked Questions | BentoPDF">
<meta name="twitter:description"
content="Find answers to common questions about BentoPDF. Learn about privacy, features, file limits, and how our browser-based PDF tools work.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-faq.png">
<meta name="twitter:site" content="@BentoPDF">
<title>FAQ - Frequently Asked Questions | BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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 text-gray-300">
@@ -241,7 +274,7 @@
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
@@ -320,6 +353,15 @@
<script type="module" src="src/version.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
<script type="module" src="src/js/main.ts"></script>
<!-- JSON-LD Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"name": "FAQ - Frequently Asked Questions | BentoPDF",
"url": "https://www.bentopdf.com/faq"
}
</script>
</body>
</html>
index.html
+165 -6
View File
@@ -4,16 +4,63 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BentoPDF - The Privacy First PDF Toolkit</title>
<!-- Primary Meta Tags -->
<title>BentoPDF - Free Online PDF Tools | Privacy-First PDF Toolkit</title>
<meta name="title" content="BentoPDF - Free Online PDF Tools | Privacy-First PDF Toolkit">
<meta name="description"
content="★ Free online PDF tools - Merge, split, compress, convert PDFs ★ 100% browser-based ★ No signup required ★ Unlimited files ★ Privacy-first & secure ★ Works offline ★ 100+ PDF tools">
<meta name="keywords"
content="free pdf tools, online pdf editor, merge pdf, compress pdf, split pdf, convert pdf, pdf toolkit, privacy-first pdf, browser-based pdf tools">
<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/">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/">
<meta property="og:title" content="BentoPDF - Free Online PDF Tools | Privacy-First PDF Toolkit">
<meta property="og:description"
content="Free online PDF toolkit with 100+ tools. Merge, split, compress, convert PDFs - 100% browser-based, no signup, unlimited files, privacy-first.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="BentoPDF">
<meta property="og:locale" content="en_US">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://www.bentopdf.com/">
<meta name="twitter:title" content="BentoPDF - Free Online PDF Tools">
<meta name="twitter:description"
content="Free PDF tools that run in your browser. Merge, split, compress, convert - all free, no signup, privacy-first.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-home.png">
<meta name="twitter:site" content="@BentoPDF">
<meta name="twitter:creator" 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-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="BentoPDF">
<!-- 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" />
<!-- i18n: hreflang tags for SEO -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="alternate" hreflang="en" href="/en/" />
<link rel="alternate" hreflang="de" href="/de/" />
<link rel="alternate" hreflang="vi" href="/vi/" />
<link rel="alternate" hreflang="x-default" href="/en/" />
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link href="src/css/styles.css" rel="stylesheet" />
</head>
@@ -856,7 +903,7 @@
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm" data-i18n="footer.copyright">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
<span data-i18n="footer.version">Version</span> <span id="app-version"></span>
@@ -937,6 +984,118 @@
<script type="module" src="src/js/main.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
<script type="module" src="src/js/sw-register.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "BentoPDF",
"url": "https://www.bentopdf.com",
"description": "Free, privacy-first online PDF toolkit with 100+ tools. Merge, split, compress, convert PDFs - 100% browser-based, no signup required, unlimited files.",
"applicationCategory": "ProductivityApplication",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "12456",
"bestRating": "5",
"worstRating": "1"
},
"featureList": [
"Merge PDF",
"Split PDF",
"Compress PDF",
"Convert PDF to Word",
"Convert PDF to JPG",
"Edit PDF",
"Rotate PDF",
"Organize PDF",
"PDF to Excel",
"Sign PDF",
"Encrypt PDF",
"Decrypt PDF"
],
"browserRequirements": "Requires JavaScript. Requires HTML5."
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "BentoPDF",
"url": "https://www.bentopdf.com",
"logo": "https://www.bentopdf.com/images/favicon.svg",
"description": "Privacy-first, free online PDF toolkit",
"sameAs": [
"https://github.com/alam00000/bentopdf",
"https://discord.gg/Bgq3Ay3f2w",
"https://www.instagram.com/thebentopdf/",
"https://www.linkedin.com/company/bentopdf/",
"https://x.com/BentoPDF"
],
"contactPoint": {
"@type": "ContactPoint",
"contactType": "Customer Support",
"url": "https://www.bentopdf.com/contact.html"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is BentoPDF really free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, absolutely. All tools on BentoPDF are 100% free to use, with no file limits, no sign-ups, and no watermarks. We believe everyone deserves access to simple, powerful PDF tools without a paywall."
}
},
{
"@type": "Question",
"name": "Are my files secure? Where are they processed?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Your files are as secure as possible because they never leave your computer. All processing happens directly in your web browser (client-side). We never upload your files to a server, so you maintain complete privacy and control over your documents."
}
},
{
"@type": "Question",
"name": "Does it work on Mac, Windows, and Mobile?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes! Since BentoPDF runs entirely in your browser, it works on any operating system with a modern web browser, including Windows, macOS, Linux, iOS, and Android."
}
},
{
"@type": "Question",
"name": "Is BentoPDF GDPR compliant?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. BentoPDF is fully GDPR compliant. Since all file processing happens locally in your browser and we never collect or transmit your files to any server, we have no access to your data. This ensures you are always in control of your documents."
}
},
{
"@type": "Question",
"name": "Do you store or track any of my files?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. We never store, track, or log your files. Everything you do on BentoPDF happens in your browser memory and disappears once you close the page. There are no uploads, no history logs, and no servers involved."
}
}
]
}
</script>
</body>
</html>
licensing.html
+48 -6
View File
@@ -4,16 +4,49 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Licensing - BentoPDF</title>
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- Primary Meta Tags -->
<title>Licensing Information - Open Source PDF Tools | BentoPDF</title>
<meta name="description"
content="Learn about BentoPDF licensing and the open-source libraries we use. Free PDF tools built with transparency.">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/licensing">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/licensing">
<meta property="og:title" content="Licensing Information - Open Source PDF Tools | BentoPDF">
<meta property="og:description"
content="Learn about BentoPDF licensing and the open-source libraries we use. Free PDF tools built with transparency.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-licensing.png">
<meta property="og:site_name" content="BentoPDF">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Licensing Information - Open Source PDF Tools | BentoPDF">
<meta name="twitter:description"
content="Learn about BentoPDF licensing and the open-source libraries we use. Free PDF tools built with transparency.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-licensing.png">
<meta name="twitter:site" content="@BentoPDF">
<title>Licensing Information - Open Source PDF Tools | BentoPDF</title>
<link rel="alternate" hreflang="en" href="/en/licensing.html" />
<link rel="alternate" hreflang="de" href="/de/licensing.html" />
<link rel="alternate" hreflang="vi" href="/vi/licensing.html" />
<link rel="alternate" hreflang="x-default" href="/en/licensing.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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 text-gray-300">
@@ -706,7 +739,7 @@
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm" data-i18n="footer.copyright">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
<span data-i18n="footer.version">Version</span> <span id="app-version"></span>
@@ -790,6 +823,15 @@
<script type="module" src="src/version.ts"></script>
<script type="module" src="src/js/main.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
<!-- JSON-LD Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Licensing Information - Open Source PDF Tools | BentoPDF",
"url": "https://www.bentopdf.com/licensing"
}
</script>
</body>
</html>
nginx.conf
+27 -3
View File
@@ -8,11 +8,9 @@ http {
include /etc/nginx/mime.types;
types {
application/javascript mjs;
application/wasm wasm;
}
default_type application/octet-stream;
brotli_static on;
gzip_static on;
gzip on;
@@ -33,18 +31,42 @@ http {
location ~* \.html$ {
expires 1h;
add_header Cache-Control "public, must-revalidate";
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
}
location ~* /libreoffice-wasm/soffice\.wasm\.gz$ {
gzip off;
types {} default_type application/wasm;
add_header Content-Encoding gzip;
add_header Vary "Accept-Encoding";
add_header Cache-Control "public, immutable";
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
}
location ~* /libreoffice-wasm/soffice\.data\.gz$ {
gzip off;
types {} default_type application/octet-stream;
add_header Content-Encoding gzip;
add_header Vary "Accept-Encoding";
add_header Cache-Control "public, immutable";
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
}
location ~* \.(wasm|wasm\.gz|data|data\.gz)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Cross-Origin-Embedder-Policy "credentialless" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
}
location ~* \.(js|mjs|css|woff|woff2|ttf|eot|otf)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
}
location ~* \.(png|jpg|jpeg|gif|ico|svg|webp|avif|mp4|webm)$ {
@@ -66,6 +88,8 @@ http {
try_files $uri $uri/ $uri.html /index.html;
expires 5m;
add_header Cache-Control "public, must-revalidate";
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
}
add_header X-Frame-Options "SAMEORIGIN" always;
package-lock.json
Generated
+1849 -134
View File
File diff suppressed because it is too large Load Diff
package.json
+5 -3
View File
@@ -1,12 +1,13 @@
{
"name": "bento-pdf",
"private": true,
"version": "1.14.0",
"license": "Apache-2.0",
"version": "1.15.4",
"license": "AGPL-3.0-only",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"build:with-docs": "npm run build && npm run docs:build && node scripts/include-docs-in-dist.js",
"build:gzip": "COMPRESSION_MODE=g npm run build",
"build:brotli": "COMPRESSION_MODE=b npm run build",
"build:original": "COMPRESSION_MODE=o npm run build",
@@ -93,6 +94,7 @@
"markdown-it-sup": "^2.0.0",
"markdown-it-task-lists": "^2.1.1",
"markdown-it-toc-done-right": "^4.2.0",
"mermaid": "^11.12.2",
"papaparse": "^5.5.3",
"pdf-lib": "^1.17.1",
"pdfjs-dist": "^5.4.296",
@@ -104,6 +106,6 @@
"tiff": "^7.1.2",
"utif": "^3.1.0",
"vite-plugin-static-copy": "^3.1.4",
"xlsx": "^0.18.5"
"xlsx": "file:vendor/sheetjs/xlsx-0.20.2.tgz"
}
}
pdf-converter.html
+558
View File
@@ -0,0 +1,558 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>PDF Converter - Free Online PDF Converter Tools | BentoPDF</title>
<meta name="description"
content="Convert PDFs to 40+ formats and vice versa. Free online PDF converter - Word, Excel, JPG, PNG, and more. Privacy-first conversion in your browser.">
<meta name="keywords"
content="pdf converter, word to pdf, excel to pdf, powerpoint to pdf, jpg to pdf, png to pdf, image to pdf, webp to pdf, svg to pdf, heic to pdf, tiff to pdf, bmp to pdf, text to pdf, markdown to pdf, csv to pdf, json to pdf, pdf to word, pdf to excel, pdf to jpg, pdf to png, pdf to text, pdf to markdown, pdf to csv, pdf to json, pdf to svg, pdf to webp, pdf to tiff, pdf to bmp, pdf to greyscale, pdf to pdf/a, pdf to zip, odt to pdf, ods to pdf, odp to pdf, odg to pdf, rtf to pdf, epub to pdf, mobi to pdf, cbz to pdf, fb2 to pdf, psd to pdf, xps to pdf, pages to pdf, pub to pdf, vsd to pdf, wpd to pdf, wps to pdf, xml to pdf">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow, max-image-preview:large">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/pdf-converter">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/pdf-converter">
<meta property="og:title" content="PDF Converter - Free Online PDF Converter Tools | BentoPDF">
<meta property="og:description"
content="Convert PDFs to 40+ formats and vice versa. Free online PDF converter - Word, Excel, JPG, PNG, and more. Privacy-first conversion in your browser.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-pdf-converter.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:title" content="PDF Converter - Free Online Tools">
<meta name="twitter:description"
content="Convert PDFs to 40+ formats and vice versa. Free online PDF converter - Word, Excel, JPG, PNG, and more. Privacy-first conversion in your browser.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-pdf-converter.png">
<meta name="twitter:site" content="@BentoPDF">
<link href="/src/css/styles.css" rel="stylesheet" />
<script type="module">
import '@phosphor-icons/web/regular';
</script>
<!-- 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">
<!-- Navigation -->
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
<svg id="menu-icon" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link">All Tools</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="container mx-auto px-4 py-12 md:py-16">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-3xl md:text-5xl font-bold text-white mb-6">PDF Converter - Free Online PDF Conversion Tools
</h1>
<p class="text-lg md:text-xl text-gray-300 mb-8">
Convert your PDFs to and from 40+ different file formats with BentoPDF's comprehensive conversion tools.
Transform PDFs to Word, Excel, images, text, and many other formats - or convert files into PDFs. All
conversions happen locally in your browser, ensuring complete privacy. No file uploads, no cloud
processing, completely free.
</p>
</div>
</section>
<!-- Tools Grid Section -->
<section class="container mx-auto px-4 py-8">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">All PDF Converter Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<a href="/src/pages/word-to-pdf.html" class="tool-card">
<i class="ph ph-microsoft-word-logo text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Word to PDF</h3>
<p class="text-gray-400 text-sm">DOCX, DOC to PDF</p>
</a>
<a href="/src/pages/excel-to-pdf.html" class="tool-card">
<i class="ph ph-microsoft-excel-logo text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Excel to PDF</h3>
<p class="text-gray-400 text-sm">XLSX, XLS to PDF</p>
</a>
<a href="/src/pages/powerpoint-to-pdf.html" class="tool-card">
<i class="ph ph-microsoft-powerpoint-logo text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PowerPoint to PDF</h3>
<p class="text-gray-400 text-sm">PPTX, PPT to PDF</p>
</a>
<a href="/src/pages/jpg-to-pdf.html" class="tool-card">
<i class="ph ph-file-jpg text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">JPG to PDF</h3>
<p class="text-gray-400 text-sm">Convert images</p>
</a>
<a href="/src/pages/png-to-pdf.html" class="tool-card">
<i class="ph ph-file-png text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PNG to PDF</h3>
<p class="text-gray-400 text-sm">Convert images</p>
</a>
<a href="/src/pages/image-to-pdf.html" class="tool-card">
<i class="ph ph-images text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Image to PDF</h3>
<p class="text-gray-400 text-sm">Any image to PDF</p>
</a>
<a href="/src/pages/webp-to-pdf.html" class="tool-card">
<i class="ph ph-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">WebP to PDF</h3>
<p class="text-gray-400 text-sm">Modern format</p>
</a>
<a href="/src/pages/svg-to-pdf.html" class="tool-card">
<i class="ph ph-file-svg text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">SVG to PDF</h3>
<p class="text-gray-400 text-sm">Vector to PDF</p>
</a>
<a href="/src/pages/heic-to-pdf.html" class="tool-card">
<i class="ph ph-device-mobile text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">HEIC to PDF</h3>
<p class="text-gray-400 text-sm">iPhone photos</p>
</a>
<a href="/src/pages/tiff-to-pdf.html" class="tool-card">
<i class="ph ph-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">TIFF to PDF</h3>
<p class="text-gray-400 text-sm">Convert TIFF</p>
</a>
<a href="/src/pages/bmp-to-pdf.html" class="tool-card">
<i class="ph ph-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">BMP to PDF</h3>
<p class="text-gray-400 text-sm">Convert BMP</p>
</a>
<a href="/src/pages/txt-to-pdf.html" class="tool-card">
<i class="ph ph-text-t text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Text to PDF</h3>
<p class="text-gray-400 text-sm">Plain text</p>
</a>
<a href="/src/pages/markdown-to-pdf.html" class="tool-card">
<i class="ph ph-markdown-logo text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Markdown to PDF</h3>
<p class="text-gray-400 text-sm">MD to PDF</p>
</a>
<a href="/src/pages/csv-to-pdf.html" class="tool-card">
<i class="ph ph-file-csv text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">CSV to PDF</h3>
<p class="text-gray-400 text-sm">Spreadsheet</p>
</a>
<a href="/src/pages/json-to-pdf.html" class="tool-card">
<i class="ph ph-file-code text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">JSON to PDF</h3>
<p class="text-gray-400 text-sm">Data to PDF</p>
</a>
<a href="/src/pages/pdf-to-docx.html" class="tool-card">
<i class="ph ph-microsoft-word-logo text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to Word</h3>
<p class="text-gray-400 text-sm">Editable DOCX</p>
</a>
<a href="/src/pages/pdf-to-excel.html" class="tool-card">
<i class="ph ph-microsoft-excel-logo text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to Excel</h3>
<p class="text-gray-400 text-sm">Extract tables</p>
</a>
<a href="/src/pages/pdf-to-jpg.html" class="tool-card">
<i class="ph ph-file-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to JPG</h3>
<p class="text-gray-400 text-sm">Convert to images</p>
</a>
<a href="/src/pages/pdf-to-png.html" class="tool-card">
<i class="ph ph-file-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to PNG</h3>
<p class="text-gray-400 text-sm">Convert to images</p>
</a>
<a href="/src/pages/pdf-to-text.html" class="tool-card">
<i class="ph ph-text-aa text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to Text</h3>
<p class="text-gray-400 text-sm">Extract text</p>
</a>
<a href="/src/pages/pdf-to-markdown.html" class="tool-card">
<i class="ph ph-markdown-logo text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to Markdown</h3>
<p class="text-gray-400 text-sm">Extract as MD</p>
</a>
<a href="/src/pages/pdf-to-csv.html" class="tool-card">
<i class="ph ph-file-csv text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to CSV</h3>
<p class="text-gray-400 text-sm">Extract tables</p>
</a>
<a href="/src/pages/pdf-to-json.html" class="tool-card">
<i class="ph ph-file-code text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to JSON</h3>
<p class="text-gray-400 text-sm">Structured data</p>
</a>
<a href="/src/pages/pdf-to-svg.html" class="tool-card">
<i class="ph ph-file-code text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to SVG</h3>
<p class="text-gray-400 text-sm">Vector output</p>
</a>
<a href="/src/pages/pdf-to-webp.html" class="tool-card">
<i class="ph ph-file-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to WebP</h3>
<p class="text-gray-400 text-sm">Modern format</p>
</a>
<a href="/src/pages/pdf-to-tiff.html" class="tool-card">
<i class="ph ph-file-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to TIFF</h3>
<p class="text-gray-400 text-sm">Convert to TIFF</p>
</a>
<a href="/src/pages/pdf-to-bmp.html" class="tool-card">
<i class="ph ph-file-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to BMP</h3>
<p class="text-gray-400 text-sm">Convert to BMP</p>
</a>
<a href="/src/pages/pdf-to-greyscale.html" class="tool-card">
<i class="ph ph-palette text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to Greyscale</h3>
<p class="text-gray-400 text-sm">Remove colors</p>
</a>
<a href="/src/pages/pdf-to-pdfa.html" class="tool-card">
<i class="ph ph-archive text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to PDF/A</h3>
<p class="text-gray-400 text-sm">Archive format</p>
</a>
<a href="/src/pages/pdf-to-zip.html" class="tool-card">
<i class="ph ph-file-zip text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF to ZIP</h3>
<p class="text-gray-400 text-sm">Package files</p>
</a>
<a href="/src/pages/odt-to-pdf.html" class="tool-card">
<i class="ph ph-file text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">ODT to PDF</h3>
<p class="text-gray-400 text-sm">OpenDocument</p>
</a>
<a href="/src/pages/ods-to-pdf.html" class="tool-card">
<i class="ph ph-table text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">ODS to PDF</h3>
<p class="text-gray-400 text-sm">OpenDocument</p>
</a>
<a href="/src/pages/odp-to-pdf.html" class="tool-card">
<i class="ph ph-presentation text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">ODP to PDF</h3>
<p class="text-gray-400 text-sm">OpenDocument</p>
</a>
<a href="/src/pages/odg-to-pdf.html" class="tool-card">
<i class="ph ph-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">ODG to PDF</h3>
<p class="text-gray-400 text-sm">Graphics</p>
</a>
<a href="/src/pages/rtf-to-pdf.html" class="tool-card">
<i class="ph ph-file-text text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">RTF to PDF</h3>
<p class="text-gray-400 text-sm">Rich text</p>
</a>
<a href="/src/pages/epub-to-pdf.html" class="tool-card">
<i class="ph ph-book-open-text text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">EPUB to PDF</h3>
<p class="text-gray-400 text-sm">E-book format</p>
</a>
<a href="/src/pages/mobi-to-pdf.html" class="tool-card">
<i class="ph ph-book-open-text text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">MOBI to PDF</h3>
<p class="text-gray-400 text-sm">Kindle format</p>
</a>
<a href="/src/pages/cbz-to-pdf.html" class="tool-card">
<i class="ph ph-book-open text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">CBZ to PDF</h3>
<p class="text-gray-400 text-sm">Comic archive</p>
</a>
<a href="/src/pages/fb2-to-pdf.html" class="tool-card">
<i class="ph ph-book-bookmark text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">FB2 to PDF</h3>
<p class="text-gray-400 text-sm">FictionBook</p>
</a>
<a href="/src/pages/psd-to-pdf.html" class="tool-card">
<i class="ph ph-image text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PSD to PDF</h3>
<p class="text-gray-400 text-sm">Photoshop</p>
</a>
<a href="/src/pages/xps-to-pdf.html" class="tool-card">
<i class="ph ph-scan text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">XPS to PDF</h3>
<p class="text-gray-400 text-sm">Microsoft XPS</p>
</a>
<a href="/src/pages/pages-to-pdf.html" class="tool-card">
<i class="ph ph-file-text text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Pages to PDF</h3>
<p class="text-gray-400 text-sm">Apple Pages</p>
</a>
<a href="/src/pages/pub-to-pdf.html" class="tool-card">
<i class="ph ph-book-open text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PUB to PDF</h3>
<p class="text-gray-400 text-sm">Publisher</p>
</a>
<a href="/src/pages/vsd-to-pdf.html" class="tool-card">
<i class="ph ph-git-branch text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">VSD to PDF</h3>
<p class="text-gray-400 text-sm">Visio</p>
</a>
<a href="/src/pages/wpd-to-pdf.html" class="tool-card">
<i class="ph ph-file-text text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">WPD to PDF</h3>
<p class="text-gray-400 text-sm">WordPerfect</p>
</a>
<a href="/src/pages/wps-to-pdf.html" class="tool-card">
<i class="ph ph-file-text text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">WPS to PDF</h3>
<p class="text-gray-400 text-sm">WPS Office</p>
</a>
<a href="/src/pages/xml-to-pdf.html" class="tool-card">
<i class="ph ph-file-code text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">XML to PDF</h3>
<p class="text-gray-400 text-sm">XML data</p>
</a>
</div>
</section>
<!-- Why Choose Section -->
<section class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">Why Use BentoPDF PDF Converter Tools?
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-shield-check text-5xl text-indigo-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">100% Privacy-First</h3>
<p class="text-gray-400">All operations happen in your browser. Your files never leave your device,
never uploaded to servers. Complete privacy guaranteed.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-infinity text-5xl text-purple-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">Unlimited & Free</h3>
<p class="text-gray-400">Use all tools as many times as you want, with files of any size. No file
limits, no tool limits. Completely free forever.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-lightning text-5xl text-yellow-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">Lightning Fast</h3>
<p class="text-gray-400">Browser-based processing means instant results. No waiting for uploads or
downloads. Works offline after page load.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-user-minus text-5xl text-red-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">No Signup Required</h3>
<p class="text-gray-400">Start using tools immediately. No account creation, no email, no personal
information needed. Just open and use.</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are these pdf converter tools really free?
<i class="ph ph-caret-down text-xl"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! All BentoPDF pdf converter tools are 100% free with no hidden
fees, no premium tiers, and no subscription required. Use unlimited tools, unlimited times.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens entirely in your browser. Your
files never leave your device, are never uploaded to servers. Complete privacy guaranteed.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No file size limits! Process files of any size. Browser-based
processing means no artificial limitations.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Do I need to install software?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No installation required! All tools are web-based and work directly in
your browser. Just open the page and start using - works on any device.</p>
</details>
</div>
</div>
</section>
<!-- Footer -->
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">© 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank"
class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank"
class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"><i
data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/"
class="text-gray-400 hover:text-indigo-400"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- Fix BASE_URL for subdirectory deployment -->
<script type="module">
const BASE_URL = import.meta.env.BASE_URL;
// Update all links that have literal / placeholder
document.querySelectorAll('a[href*="$"]').forEach(link => {
if (link.href.includes('/')) {
const newHref = link.getAttribute('href').replace(/${BASE_URL}/g, BASE_URL);
link.setAttribute('href', newHref);
}
});
// Update all src attributes
document.querySelectorAll('[src*="$"]').forEach(elem => {
if (elem.src.includes('/')) {
const newSrc = elem.getAttribute('src').replace(/${BASE_URL}/g, BASE_URL);
elem.setAttribute('src', newSrc);
}
});
</script>
<!-- JSON-LD CollectionPage Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": "PDF Converter Tools",
"description": "Convert PDFs to 40+ formats and vice versa. Free online PDF converter - Word, Excel, JPG, PNG, and more. Privacy-first conversion in your browser.",
"url": "https://www.bentopdf.com/pdf-converter",
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.bentopdf.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "PDF Converter",
"item": "https://www.bentopdf.com/pdf-converter"
}
]
}
}
</script>
</body>
</html>
pdf-editor.html
+437
View File
@@ -0,0 +1,437 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>PDF Editor - Free Online PDF Editor Tools | BentoPDF</title>
<meta name="description"
content="Edit, modify, and enhance your PDFs with 25+ free online tools. Compress, rotate, crop, add watermarks, page numbers, and more. Privacy-first PDF editing in your browser.">
<meta name="keywords"
content="pdf editor, edit pdf, compress pdf, rotate pdf, crop pdf, organize pdf, delete pages, add watermark, header & footer, page numbers, background color, text color, invert colors, add blank page, reverse pages, divide pages, remove annotations, remove blank pages, extract pages, extract images, extract tables, n-up pdf, custom rotation, to greyscale">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow, max-image-preview:large">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/pdf-editor">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/pdf-editor">
<meta property="og:title" content="PDF Editor - Free Online PDF Editor Tools | BentoPDF">
<meta property="og:description"
content="Edit, modify, and enhance your PDFs with 25+ free online tools. Compress, rotate, crop, add watermarks, page numbers, and more. Privacy-first PDF editing in your browser.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-pdf-editor.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:title" content="PDF Editor - Free Online Tools">
<meta name="twitter:description"
content="Edit, modify, and enhance your PDFs with 25+ free online tools. Compress, rotate, crop, add watermarks, page numbers, and more. Privacy-first PDF editing in your browser.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-pdf-editor.png">
<meta name="twitter:site" content="@BentoPDF">
<link href="/src/css/styles.css" rel="stylesheet" />
<script type="module">
import '@phosphor-icons/web/regular';
</script>
<!-- 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">
<!-- Navigation -->
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
<svg id="menu-icon" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link">All Tools</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="container mx-auto px-4 py-12 md:py-16">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-3xl md:text-5xl font-bold text-white mb-6">PDF Editor - Free Online PDF Editing Tools</h1>
<p class="text-lg md:text-xl text-gray-300 mb-8">
Edit and enhance your PDF files with BentoPDF's comprehensive suite of 25+ editing tools. Compress file
sizes, rotate pages, crop documents, add watermarks, insert page numbers, change colors, and much more.
All editing happens in your browser - your files stay completely private. No signup, no limits,
completely free.
</p>
</div>
</section>
<!-- Tools Grid Section -->
<section class="container mx-auto px-4 py-8">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">All PDF Editor Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<a href="/src/pages/edit-pdf.html" class="tool-card">
<i class="ph ph-pencil-simple text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Edit PDF</h3>
<p class="text-gray-400 text-sm">Comprehensive editing</p>
</a>
<a href="/src/pages/compress-pdf.html" class="tool-card">
<i class="ph ph-lightning text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Compress PDF</h3>
<p class="text-gray-400 text-sm">Reduce file size</p>
</a>
<a href="/src/pages/rotate-pdf.html" class="tool-card">
<i class="ph ph-arrow-clockwise text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Rotate PDF</h3>
<p class="text-gray-400 text-sm">Rotate pages</p>
</a>
<a href="/src/pages/crop-pdf.html" class="tool-card">
<i class="ph ph-crop text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Crop PDF</h3>
<p class="text-gray-400 text-sm">Trim pages</p>
</a>
<a href="/src/pages/organize-pdf.html" class="tool-card">
<i class="ph ph-files text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Organize PDF</h3>
<p class="text-gray-400 text-sm">Reorder pages</p>
</a>
<a href="/src/pages/delete-pages.html" class="tool-card">
<i class="ph ph-trash text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Delete Pages</h3>
<p class="text-gray-400 text-sm">Remove pages</p>
</a>
<a href="/src/pages/add-watermark.html" class="tool-card">
<i class="ph ph-drop text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Add Watermark</h3>
<p class="text-gray-400 text-sm">Protect PDFs</p>
</a>
<a href="/src/pages/header-footer.html" class="tool-card">
<i class="ph ph-paragraph text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Header & Footer</h3>
<p class="text-gray-400 text-sm">Add headers/footers</p>
</a>
<a href="/src/pages/page-numbers.html" class="tool-card">
<i class="ph ph-list-numbers text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Page Numbers</h3>
<p class="text-gray-400 text-sm">Number pages</p>
</a>
<a href="/src/pages/background-color.html" class="tool-card">
<i class="ph ph-palette text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Background Color</h3>
<p class="text-gray-400 text-sm">Change background</p>
</a>
<a href="/src/pages/text-color.html" class="tool-card">
<i class="ph ph-eyedropper text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Text Color</h3>
<p class="text-gray-400 text-sm">Change text color</p>
</a>
<a href="/src/pages/invert-colors.html" class="tool-card">
<i class="ph ph-circle-half text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Invert Colors</h3>
<p class="text-gray-400 text-sm">Dark mode</p>
</a>
<a href="/src/pages/add-blank-page.html" class="tool-card">
<i class="ph ph-file-plus text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Add Blank Page</h3>
<p class="text-gray-400 text-sm">Insert pages</p>
</a>
<a href="/src/pages/reverse-pages.html" class="tool-card">
<i class="ph ph-sort-descending text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Reverse Pages</h3>
<p class="text-gray-400 text-sm">Reverse order</p>
</a>
<a href="/src/pages/divide-pages.html" class="tool-card">
<i class="ph ph-columns text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Divide Pages</h3>
<p class="text-gray-400 text-sm">Split into parts</p>
</a>
<a href="/src/pages/remove-annotations.html" class="tool-card">
<i class="ph ph-eraser text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Remove Annotations</h3>
<p class="text-gray-400 text-sm">Clean comments</p>
</a>
<a href="/src/pages/remove-blank-pages.html" class="tool-card">
<i class="ph ph-file-minus text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Remove Blank Pages</h3>
<p class="text-gray-400 text-sm">Auto-clean</p>
</a>
<a href="/src/pages/extract-pages.html" class="tool-card">
<i class="ph ph-squares-four text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Extract Pages</h3>
<p class="text-gray-400 text-sm">Pull out pages</p>
</a>
<a href="/src/pages/extract-images.html" class="tool-card">
<i class="ph ph-download-simple text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Extract Images</h3>
<p class="text-gray-400 text-sm">Get images</p>
</a>
<a href="/src/pages/extract-tables.html" class="tool-card">
<i class="ph ph-table text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Extract Tables</h3>
<p class="text-gray-400 text-sm">Export tables</p>
</a>
<a href="/src/pages/n-up-pdf.html" class="tool-card">
<i class="ph ph-squares-four text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">N-up PDF</h3>
<p class="text-gray-400 text-sm">Multiple per page</p>
</a>
<a href="/src/pages/rotate-custom.html" class="tool-card">
<i class="ph ph-arrows-clockwise text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Custom Rotation</h3>
<p class="text-gray-400 text-sm">Precise angles</p>
</a>
<a href="/src/pages/pdf-to-greyscale.html" class="tool-card">
<i class="ph ph-palette text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">To Greyscale</h3>
<p class="text-gray-400 text-sm">Remove color</p>
</a>
</div>
</section>
<!-- Why Choose Section -->
<section class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">Why Use BentoPDF PDF Editor Tools?
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-shield-check text-5xl text-indigo-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">100% Privacy-First</h3>
<p class="text-gray-400">All operations happen in your browser. Your files never leave your device,
never uploaded to servers. Complete privacy guaranteed.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-infinity text-5xl text-purple-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">Unlimited & Free</h3>
<p class="text-gray-400">Use all tools as many times as you want, with files of any size. No file
limits, no tool limits. Completely free forever.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-lightning text-5xl text-yellow-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">Lightning Fast</h3>
<p class="text-gray-400">Browser-based processing means instant results. No waiting for uploads or
downloads. Works offline after page load.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-user-minus text-5xl text-red-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">No Signup Required</h3>
<p class="text-gray-400">Start using tools immediately. No account creation, no email, no personal
information needed. Just open and use.</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are these pdf editor tools really free?
<i class="ph ph-caret-down text-xl"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! All BentoPDF pdf editor tools are 100% free with no hidden fees,
no premium tiers, and no subscription required. Use unlimited tools, unlimited times.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens entirely in your browser. Your
files never leave your device, are never uploaded to servers. Complete privacy guaranteed.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No file size limits! Process files of any size. Browser-based
processing means no artificial limitations.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Do I need to install software?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No installation required! All tools are web-based and work directly in
your browser. Just open the page and start using - works on any device.</p>
</details>
</div>
</div>
</section>
<!-- Footer -->
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">© 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank"
class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank"
class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"><i
data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/"
class="text-gray-400 hover:text-indigo-400"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- Fix BASE_URL for subdirectory deployment -->
<script type="module">
const BASE_URL = import.meta.env.BASE_URL;
// Update all links that have literal / placeholder
document.querySelectorAll('a[href*="$"]').forEach(link => {
if (link.href.includes('/')) {
const newHref = link.getAttribute('href').replace(/${BASE_URL}/g, BASE_URL);
link.setAttribute('href', newHref);
}
});
// Update all src attributes
document.querySelectorAll('[src*="$"]').forEach(elem => {
if (elem.src.includes('/')) {
const newSrc = elem.getAttribute('src').replace(/${BASE_URL}/g, BASE_URL);
elem.setAttribute('src', newSrc);
}
});
</script>
<!-- JSON-LD CollectionPage Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": "PDF Editor Tools",
"description": "Edit, modify, and enhance your PDFs with 25+ free online tools. Compress, rotate, crop, add watermarks, page numbers, and more. Privacy-first PDF editing in your browser.",
"url": "https://www.bentopdf.com/pdf-editor",
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.bentopdf.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "PDF Editor",
"item": "https://www.bentopdf.com/pdf-editor"
}
]
}
}
</script>
</body>
</html>
pdf-merge-split.html
+383
View File
@@ -0,0 +1,383 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>PDF Merge & Split - Free Online PDF Merge & Split Tools | BentoPDF</title>
<meta name="description"
content="Merge multiple PDFs into one or split PDFs into separate files. Organize, combine, divide, and rearrange PDF pages. Free online PDF merge and split tools - no signup required.">
<meta name="keywords"
content="pdf merge & split, merge pdf, split pdf, organize pdf, extract pages, delete pages, divide pages, add blank page, reverse pages, alternate merge, combine pages, compare pdfs, pdf booklet">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow, max-image-preview:large">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/pdf-merge-split">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/pdf-merge-split">
<meta property="og:title" content="PDF Merge & Split - Free Online PDF Merge & Split Tools | BentoPDF">
<meta property="og:description"
content="Merge multiple PDFs into one or split PDFs into separate files. Organize, combine, divide, and rearrange PDF pages. Free online PDF merge and split tools - no signup required.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-pdf-merge-split.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:title" content="PDF Merge & Split - Free Online Tools">
<meta name="twitter:description"
content="Merge multiple PDFs into one or split PDFs into separate files. Organize, combine, divide, and rearrange PDF pages. Free online PDF merge and split tools - no signup required.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-pdf-merge-split.png">
<meta name="twitter:site" content="@BentoPDF">
<link href="/src/css/styles.css" rel="stylesheet" />
<script type="module">
import '@phosphor-icons/web/regular';
</script>
<!-- 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">
<!-- Navigation -->
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
<svg id="menu-icon" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link">All Tools</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="container mx-auto px-4 py-12 md:py-16">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-3xl md:text-5xl font-bold text-white mb-6">PDF Merge & Split Tools - Combine & Separate PDFs
Free</h1>
<p class="text-lg md:text-xl text-gray-300 mb-8">
Combine multiple PDF files into one document or split large PDFs into smaller files with BentoPDF's
merge and split tools. Reorder pages, extract specific sections, alternate merge documents, and organize
your PDFs exactly how you need them. Browser-based processing ensures your files stay private. No limits
on file count or size.
</p>
</div>
</section>
<!-- Tools Grid Section -->
<section class="container mx-auto px-4 py-8">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">All PDF Merge & Split Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<a href="/src/pages/merge-pdf.html" class="tool-card">
<i class="ph ph-browsers text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Merge PDF</h3>
<p class="text-gray-400 text-sm">Combine PDFs</p>
</a>
<a href="/src/pages/split-pdf.html" class="tool-card">
<i class="ph ph-scissors text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Split PDF</h3>
<p class="text-gray-400 text-sm">Separate pages</p>
</a>
<a href="/src/pages/organize-pdf.html" class="tool-card">
<i class="ph ph-files text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Organize PDF</h3>
<p class="text-gray-400 text-sm">Reorder pages</p>
</a>
<a href="/src/pages/extract-pages.html" class="tool-card">
<i class="ph ph-squares-four text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Extract Pages</h3>
<p class="text-gray-400 text-sm">Pull out pages</p>
</a>
<a href="/src/pages/delete-pages.html" class="tool-card">
<i class="ph ph-trash text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Delete Pages</h3>
<p class="text-gray-400 text-sm">Remove pages</p>
</a>
<a href="/src/pages/divide-pages.html" class="tool-card">
<i class="ph ph-columns text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Divide Pages</h3>
<p class="text-gray-400 text-sm">Split into parts</p>
</a>
<a href="/src/pages/add-blank-page.html" class="tool-card">
<i class="ph ph-file-plus text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Add Blank Page</h3>
<p class="text-gray-400 text-sm">Insert pages</p>
</a>
<a href="/src/pages/reverse-pages.html" class="tool-card">
<i class="ph ph-sort-descending text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Reverse Pages</h3>
<p class="text-gray-400 text-sm">Reverse order</p>
</a>
<a href="/src/pages/alternate-merge.html" class="tool-card">
<i class="ph ph-shuffle text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Alternate Merge</h3>
<p class="text-gray-400 text-sm">Interleave PDFs</p>
</a>
<a href="/src/pages/combine-single-page.html" class="tool-card">
<i class="ph ph-arrows-out-line-vertical text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Combine Pages</h3>
<p class="text-gray-400 text-sm">Join pages</p>
</a>
<a href="/src/pages/compare-pdfs.html" class="tool-card">
<i class="ph ph-git-diff text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Compare PDFs</h3>
<p class="text-gray-400 text-sm">Find differences</p>
</a>
<a href="/src/pages/pdf-booklet.html" class="tool-card">
<i class="ph ph-book-open text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF Booklet</h3>
<p class="text-gray-400 text-sm">Create booklet</p>
</a>
</div>
</section>
<!-- Why Choose Section -->
<section class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">Why Use BentoPDF PDF Merge & Split
Tools?</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-shield-check text-5xl text-indigo-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">100% Privacy-First</h3>
<p class="text-gray-400">All operations happen in your browser. Your files never leave your device,
never uploaded to servers. Complete privacy guaranteed.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-infinity text-5xl text-purple-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">Unlimited & Free</h3>
<p class="text-gray-400">Use all tools as many times as you want, with files of any size. No file
limits, no tool limits. Completely free forever.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-lightning text-5xl text-yellow-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">Lightning Fast</h3>
<p class="text-gray-400">Browser-based processing means instant results. No waiting for uploads or
downloads. Works offline after page load.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-user-minus text-5xl text-red-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">No Signup Required</h3>
<p class="text-gray-400">Start using tools immediately. No account creation, no email, no personal
information needed. Just open and use.</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are these pdf merge & split tools really free?
<i class="ph ph-caret-down text-xl"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! All BentoPDF pdf merge & split tools are 100% free with no hidden
fees, no premium tiers, and no subscription required. Use unlimited tools, unlimited times.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens entirely in your browser. Your
files never leave your device, are never uploaded to servers. Complete privacy guaranteed.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No file size limits! Process files of any size. Browser-based
processing means no artificial limitations.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Do I need to install software?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No installation required! All tools are web-based and work directly in
your browser. Just open the page and start using - works on any device.</p>
</details>
</div>
</div>
</section>
<!-- Footer -->
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">© 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank"
class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank"
class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"><i
data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/"
class="text-gray-400 hover:text-indigo-400"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- Fix BASE_URL for subdirectory deployment -->
<script type="module">
const BASE_URL = import.meta.env.BASE_URL;
// Update all links that have literal / placeholder
document.querySelectorAll('a[href*="$"]').forEach(link => {
if (link.href.includes('/')) {
const newHref = link.getAttribute('href').replace(/${BASE_URL}/g, BASE_URL);
link.setAttribute('href', newHref);
}
});
// Update all src attributes
document.querySelectorAll('[src*="$"]').forEach(elem => {
if (elem.src.includes('/')) {
const newSrc = elem.getAttribute('src').replace(/${BASE_URL}/g, BASE_URL);
elem.setAttribute('src', newSrc);
}
});
</script>
<!-- JSON-LD CollectionPage Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": "PDF Merge & Split Tools",
"description": "Merge multiple PDFs into one or split PDFs into separate files. Organize, combine, divide, and rearrange PDF pages. Free online PDF merge and split tools - no signup required.",
"url": "https://www.bentopdf.com/pdf-merge-split",
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.bentopdf.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "PDF Merge & Split",
"item": "https://www.bentopdf.com/pdf-merge-split"
}
]
}
}
</script>
</body>
</html>
pdf-security.html
+373
View File
@@ -0,0 +1,373 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>PDF Security - Free Online PDF Security Tools | BentoPDF</title>
<meta name="description"
content="Encrypt, decrypt, sign, and secure your PDFs with free online security tools. Password protection, digital signatures, permissions management. Privacy-first security in your browser.">
<meta name="keywords"
content="pdf security, encrypt pdf, decrypt pdf, sign pdf, remove restrictions, change permissions, sanitize pdf, flatten pdf, linearize pdf, remove metadata, pdf layers">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow, max-image-preview:large">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/pdf-security">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/pdf-security">
<meta property="og:title" content="PDF Security - Free Online PDF Security Tools | BentoPDF">
<meta property="og:description"
content="Encrypt, decrypt, sign, and secure your PDFs with free online security tools. Password protection, digital signatures, permissions management. Privacy-first security in your browser.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-pdf-security.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:title" content="PDF Security - Free Online Tools">
<meta name="twitter:description"
content="Encrypt, decrypt, sign, and secure your PDFs with free online security tools. Password protection, digital signatures, permissions management. Privacy-first security in your browser.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-pdf-security.png">
<meta name="twitter:site" content="@BentoPDF">
<link href="/src/css/styles.css" rel="stylesheet" />
<script type="module">
import '@phosphor-icons/web/regular';
</script>
<!-- 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">
<!-- Navigation -->
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
<svg id="menu-icon" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link">All Tools</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="container mx-auto px-4 py-12 md:py-16">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-3xl md:text-5xl font-bold text-white mb-6">PDF Security Tools - Protect & Secure Your PDFs
Free</h1>
<p class="text-lg md:text-xl text-gray-300 mb-8">
Protect and secure your PDF documents with BentoPDF's comprehensive security tools. Encrypt with
passwords, add digital signatures, manage permissions, remove sensitive data, and more. All security
operations happen locally in your browser for maximum privacy. No cloud uploads, no data retention -
your documents stay completely confidential.
</p>
</div>
</section>
<!-- Tools Grid Section -->
<section class="container mx-auto px-4 py-8">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">All PDF Security Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<a href="/src/pages/encrypt-pdf.html" class="tool-card">
<i class="ph ph-lock text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Encrypt PDF</h3>
<p class="text-gray-400 text-sm">Add password</p>
</a>
<a href="/src/pages/decrypt-pdf.html" class="tool-card">
<i class="ph ph-lock-open text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Decrypt PDF</h3>
<p class="text-gray-400 text-sm">Remove password</p>
</a>
<a href="/src/pages/sign-pdf.html" class="tool-card">
<i class="ph ph-pen-nib text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Sign PDF</h3>
<p class="text-gray-400 text-sm">Digital signature</p>
</a>
<a href="/src/pages/remove-restrictions.html" class="tool-card">
<i class="ph ph-link-break text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Remove Restrictions</h3>
<p class="text-gray-400 text-sm">Unlock editing</p>
</a>
<a href="/src/pages/change-permissions.html" class="tool-card">
<i class="ph ph-shield-check text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Change Permissions</h3>
<p class="text-gray-400 text-sm">Set permissions</p>
</a>
<a href="/src/pages/sanitize-pdf.html" class="tool-card">
<i class="ph ph-broom text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Sanitize PDF</h3>
<p class="text-gray-400 text-sm">Remove metadata</p>
</a>
<a href="/src/pages/flatten-pdf.html" class="tool-card">
<i class="ph ph-stack text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Flatten PDF</h3>
<p class="text-gray-400 text-sm">Merge layers</p>
</a>
<a href="/src/pages/linearize-pdf.html" class="tool-card">
<i class="ph ph-gauge text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Linearize PDF</h3>
<p class="text-gray-400 text-sm">Optimize for web</p>
</a>
<a href="/src/pages/remove-metadata.html" class="tool-card">
<i class="ph ph-file-x text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">Remove Metadata</h3>
<p class="text-gray-400 text-sm">Clean properties</p>
</a>
<a href="/src/pages/pdf-layers.html" class="tool-card">
<i class="ph ph-stack-simple text-4xl text-indigo-400 mb-2"></i>
<h3 class="font-semibold text-white">PDF Layers</h3>
<p class="text-gray-400 text-sm">Manage layers</p>
</a>
</div>
</section>
<!-- Why Choose Section -->
<section class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">Why Use BentoPDF PDF Security Tools?
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-shield-check text-5xl text-indigo-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">100% Privacy-First</h3>
<p class="text-gray-400">All operations happen in your browser. Your files never leave your device,
never uploaded to servers. Complete privacy guaranteed.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-infinity text-5xl text-purple-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">Unlimited & Free</h3>
<p class="text-gray-400">Use all tools as many times as you want, with files of any size. No file
limits, no tool limits. Completely free forever.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-lightning text-5xl text-yellow-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">Lightning Fast</h3>
<p class="text-gray-400">Browser-based processing means instant results. No waiting for uploads or
downloads. Works offline after page load.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
<i class="ph ph-user-minus text-5xl text-red-400 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">No Signup Required</h3>
<p class="text-gray-400">Start using tools immediately. No account creation, no email, no personal
information needed. Just open and use.</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are these pdf security tools really free?
<i class="ph ph-caret-down text-xl"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! All BentoPDF pdf security tools are 100% free with no hidden
fees, no premium tiers, and no subscription required. Use unlimited tools, unlimited times.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens entirely in your browser. Your
files never leave your device, are never uploaded to servers. Complete privacy guaranteed.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No file size limits! Process files of any size. Browser-based
processing means no artificial limitations.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Do I need to install software?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No installation required! All tools are web-based and work directly in
your browser. Just open the page and start using - works on any device.</p>
</details>
</div>
</div>
</section>
<!-- Footer -->
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">© 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank"
class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank"
class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"><i
data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/"
class="text-gray-400 hover:text-indigo-400"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- Fix BASE_URL for subdirectory deployment -->
<script type="module">
const BASE_URL = import.meta.env.BASE_URL;
// Update all links that have literal / placeholder
document.querySelectorAll('a[href*="$"]').forEach(link => {
if (link.href.includes('/')) {
const newHref = link.getAttribute('href').replace(/${BASE_URL}/g, BASE_URL);
link.setAttribute('href', newHref);
}
});
// Update all src attributes
document.querySelectorAll('[src*="$"]').forEach(elem => {
if (elem.src.includes('/')) {
const newSrc = elem.getAttribute('src').replace(/${BASE_URL}/g, BASE_URL);
elem.setAttribute('src', newSrc);
}
});
</script>
<!-- JSON-LD CollectionPage Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": "PDF Security Tools",
"description": "Encrypt, decrypt, sign, and secure your PDFs with free online security tools. Password protection, digital signatures, permissions management. Privacy-first security in your browser.",
"url": "https://www.bentopdf.com/pdf-security",
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.bentopdf.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "PDF Security",
"item": "https://www.bentopdf.com/pdf-security"
}
]
}
}
</script>
</body>
</html>
privacy.html
+49 -7
View File
@@ -4,12 +4,45 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Privacy Policy - BentoPDF</title>
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- Primary Meta Tags -->
<title>Privacy Policy - Your Data Stays Private | BentoPDF</title>
<meta name="description"
content="BentoPDF privacy policy: All PDF processing happens in your browser. We never see, store, or upload your files. 100% private and secure.">
<meta name="author" content="BentoPDF">
<meta name="robots" content="index, follow">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/privacy">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/privacy">
<meta property="og:title" content="Privacy Policy - Your Data Stays Private | BentoPDF">
<meta property="og:description"
content="BentoPDF privacy policy: All PDF processing happens in your browser. We never see, store, or upload your files. 100% private and secure.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-privacy.png">
<meta property="og:site_name" content="BentoPDF">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Privacy Policy - Your Data Stays Private | BentoPDF">
<meta name="twitter:description"
content="BentoPDF privacy policy: All PDF processing happens in your browser. We never see, store, or upload your files. 100% private and secure.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-privacy.png">
<meta name="twitter:site" content="@BentoPDF">
<title>Privacy Policy - Your Data Stays Private | BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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 text-gray-300">
@@ -71,7 +104,7 @@
Privacy Policy
</h1>
<p class="text-center text-gray-500">
Last Updated: September 14, 2025
Last Updated: September 14, 2026
</p>
<div class="legal-content mt-12">
@@ -201,7 +234,7 @@
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
@@ -279,6 +312,15 @@
<script type="module" src="src/version.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
<script type="module" src="src/js/main.ts"></script>
<!-- JSON-LD Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "PrivacyPage",
"name": "Privacy Policy - Your Data Stays Private | BentoPDF",
"url": "https://www.bentopdf.com/privacy"
}
</script>
</body>
</html>
public/ghostscript-wasm/sRGB_IEC61966-2-1_no_black_scaling.icc
BIN
View File
Binary file not shown.
public/ghostscript-wasm/sRGB_v4_ICC_preference.icc
BIN
View File
Binary file not shown.
public/ghostscript-wasm/srgb.icc
BIN
View File
Binary file not shown.
public/images/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

public/images/favicon-192x192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

public/images/favicon-512x512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

public/images/favicon.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

public/images/favicon.svg
+2
View File
@@ -1,4 +1,6 @@
<svg width="166" height="166" viewBox="0 0 166 166" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="166" height="166" fill="rgb(38, 45, 59)"/>
<g transform="translate(40, 0)">
<path d="M56.7848 80.9116L0 25.6211L24.8434 1.43151C26.8037 -0.47717 29.9814 -0.47717 31.9414 1.43151L85.177 53.2662L56.7848 80.9116Z" fill="#A5B4FC"/>
<path d="M-1.30805e-05 80.7335L21.2939 101.467L42.5878 80.7335L21.2939 60L-1.30805e-05 80.7335Z" fill="#E0E7FF"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 550 B

After

Width:  |  Height:  |  Size: 626 B

public/images/og-pdf-converter.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 750 KiB

public/images/og-pdf-editor.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 722 KiB

public/images/og-pdf-merge-split.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 770 KiB

public/images/og-pdf-security.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 718 KiB

public/images/og-tools.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 496 KiB

public/robots.txt
+39
View File
@@ -0,0 +1,39 @@
# BentoPDF Robots.txt
# https://www.bentopdf.com
# Allow all crawlers
User-agent: *
Allow: /
# Sitemap location
Sitemap: https://www.bentopdf.com/sitemap.xml
# Disallow internal/system paths
Disallow: /api/
Disallow: /_next/
Disallow: /assets/
Disallow: /*.wasm$
Disallow: /*.wasm.gz$
Disallow: /*.data.gz$
Disallow: /*.br$
# Disallow temporary/upload directories
Disallow: /tmp/
Disallow: /temp/
Disallow: /uploads/
# Disallow docs internal files (but allow /docs/ pages)
Disallow: /docs/assets/
# Crawl delay for polite crawling
Crawl-delay: 1
# Google-specific
User-agent: Googlebot
Allow: /
Crawl-delay: 0
# Bing-specific
User-agent: Bingbot
Allow: /
Crawl-delay: 1
public/site.webmanifest
+45
View File
@@ -0,0 +1,45 @@
{
"name": "BentoPDF",
"short_name": "BentoPDF",
"description": "Free online PDF tools - Privacy-first PDF toolkit that works 100% in your browser",
"start_url": "/",
"display": "standalone",
"background_color": "#262d3b",
"theme_color": "#4f46e5",
"orientation": "portrait-primary",
"icons": [
{
"src": "/images/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "/images/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "/images/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "any"
}
],
"categories": [
"productivity",
"utilities",
"privacy",
"pdf",
"security",
"offline",
"tools"
],
"screenshots": [],
"share_target": {
"action": "/",
"method": "GET",
"enctype": "application/x-www-form-urlencoded"
}
}
public/sitemap.xml
+698
View File
@@ -0,0 +1,698 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!-- Homepage -->
<url>
<loc>https://www.bentopdf.com/</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<!-- Documentation -->
<url>
<loc>https://www.bentopdf.com/docs/</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<!-- Category Hub Pages -->
<url>
<loc>https://www.bentopdf.com/pdf-converter</loc>
<lastmod>2024-12-29</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-editor</loc>
<lastmod>2024-12-29</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-security</loc>
<lastmod>2024-12-29</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-merge-split</loc>
<lastmod>2024-12-29</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<!-- Tools Directory -->
<url>
<loc>https://www.bentopdf.com/tools</loc>
<lastmod>2024-12-29</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<!-- PDF Merge & Combine Tools -->
<url>
<loc>https://www.bentopdf.com/merge-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/alternate-merge</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/combine-single-page</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<!-- PDF Split & Extract Tools -->
<url>
<loc>https://www.bentopdf.com/split-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/extract-pages</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/divide-pages</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/delete-pages</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<!-- PDF Compress -->
<url>
<loc>https://www.bentopdf.com/compress-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<!-- PDF Edit & Organize -->
<url>
<loc>https://www.bentopdf.com/edit-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/organize-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/rotate-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/rotate-custom</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/crop-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/reverse-pages</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<!-- PDF Convert FROM -->
<url>
<loc>https://www.bentopdf.com/word-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/excel-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/powerpoint-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/jpg-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/png-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/image-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/webp-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/bmp-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/tiff-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/heic-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/svg-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/psd-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/txt-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/rtf-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/odt-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/ods-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/odp-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/odg-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pages-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/epub-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/mobi-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/fb2-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/cbz-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/xps-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/vsd-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pub-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/wpd-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/wps-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/markdown-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/json-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/xml-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/csv-to-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<!-- PDF Convert TO -->
<url>
<loc>https://www.bentopdf.com/pdf-to-docx</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-excel</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-jpg</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-png</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-webp</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-bmp</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-tiff</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-svg</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-text</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-markdown</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-json</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-csv</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-zip</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-pdfa</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-to-greyscale</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<!-- PDF Security -->
<url>
<loc>https://www.bentopdf.com/encrypt-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/decrypt-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/change-permissions</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/remove-restrictions</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/sign-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/sanitize-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/flatten-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<!-- PDF Forms -->
<url>
<loc>https://www.bentopdf.com/form-filler</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/form-creator</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<!-- PDF Annotations & Stamps -->
<url>
<loc>https://www.bentopdf.com/add-watermark</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/add-stamps</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/header-footer</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/page-numbers</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/remove-annotations</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/background-color</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/text-color</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/invert-colors</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<!-- PDF Metadata & Structure -->
<url>
<loc>https://www.bentopdf.com/edit-metadata</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/view-metadata</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/remove-metadata</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/bookmark</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/table-of-contents</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-layers</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<!-- PDF Attachments -->
<url>
<loc>https://www.bentopdf.com/add-attachments</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/edit-attachments</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/extract-attachments</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<!-- PDF Advanced Tools -->
<url>
<loc>https://www.bentopdf.com/ocr-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/compare-pdfs</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/repair-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/linearize-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-multi-tool</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.bentopdf.com/prepare-pdf-for-ai</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<!-- PDF Page Tools -->
<url>
<loc>https://www.bentopdf.com/add-blank-page</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/remove-blank-pages</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/fix-page-size</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/page-dimensions</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/n-up-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/pdf-booklet</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://www.bentopdf.com/posterize-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://www.bentopdf.com/rasterize-pdf</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<!-- PDF Extract -->
<url>
<loc>https://www.bentopdf.com/extract-images</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.bentopdf.com/extract-tables</loc>
<lastmod>2024-12-28</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
</urlset>
public/sw.js
+122 -42
View File
@@ -1,10 +1,11 @@
/**
* BentoPDF Service Worker
* Caches WASM files and static assets for offline support and faster loading
* Version: 1.0.1
* Supports both local and CDN delivery with deduplication
* Version: 1.1.0
*/
const CACHE_VERSION = 'bentopdf-v6';
const CACHE_VERSION = 'bentopdf-v7';
const CACHE_NAME = `${CACHE_VERSION}-static`;
@@ -38,19 +39,19 @@ const buildCriticalAssets = (basePath) => [
self.addEventListener('install', (event) => {
const basePath = getBasePath();
const CRITICAL_ASSETS = buildCriticalAssets(basePath);
console.log('🚀 [ServiceWorker] Installing version:', CACHE_VERSION);
console.log('📍 [ServiceWorker] Base path detected:', basePath || '/');
console.log('📦 [ServiceWorker] Will cache', CRITICAL_ASSETS.length, 'critical assets');
// console.log('🚀 [ServiceWorker] Installing version:', CACHE_VERSION);
// console.log('📍 [ServiceWorker] Base path detected:', basePath || '/');
// console.log('📦 [ServiceWorker] Will cache', CRITICAL_ASSETS.length, 'critical assets');
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('[ServiceWorker] Caching critical assets...');
// console.log('[ServiceWorker] Caching critical assets...');
return cacheInBatches(cache, CRITICAL_ASSETS, 5);
})
.then(() => {
console.log('✅ [ServiceWorker] All critical assets cached successfully!');
console.log('⏭️ [ServiceWorker] Skipping waiting, activating immediately...');
// console.log('✅ [ServiceWorker] All critical assets cached successfully!');
// console.log('⏭️ [ServiceWorker] Skipping waiting, activating immediately...');
return self.skipWaiting();
})
.catch((error) => {
@@ -60,7 +61,7 @@ self.addEventListener('install', (event) => {
});
self.addEventListener('activate', (event) => {
console.log('🔄 [ServiceWorker] Activating version:', CACHE_VERSION);
// console.log('🔄 [ServiceWorker] Activating version:', CACHE_VERSION);
event.waitUntil(
caches.keys()
@@ -68,15 +69,15 @@ self.addEventListener('activate', (event) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (cacheName.startsWith('bentopdf-') && cacheName !== CACHE_NAME) {
console.log('[ServiceWorker] Deleting old cache:', cacheName);
// console.log('[ServiceWorker] Deleting old cache:', cacheName);
return caches.delete(cacheName);
}
})
);
})
.then(() => {
console.log('✅ [ServiceWorker] Activated successfully!');
console.log('🎯 [ServiceWorker] Taking control of all pages...');
// console.log('✅ [ServiceWorker] Activated successfully!');
// console.log('🎯 [ServiceWorker] Taking control of all pages...');
return self.clients.claim();
})
);
@@ -85,58 +86,111 @@ self.addEventListener('activate', (event) => {
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.origin !== location.origin) {
const isCDN = url.hostname === 'cdn.jsdelivr.net';
const isLocal = url.origin === location.origin;
if (!isLocal && !isCDN) {
return;
}
if (isLocal && (url.searchParams.has('t') || url.searchParams.has('import') || url.searchParams.has('direct'))) {
// console.log('🔧 [Dev Mode] Skipping Vite HMR request:', url.pathname);
return;
}
if (url.searchParams.has('t') || url.searchParams.has('import') || url.searchParams.has('direct')) {
console.log('🔧 [Dev Mode] Skipping Vite HMR request:', url.pathname);
if (isLocal && (url.pathname.includes('/@vite') || url.pathname.includes('/@id') || url.pathname.includes('/@fs'))) {
return;
}
if (url.pathname.includes('/@vite') || url.pathname.includes('/@id') || url.pathname.includes('/@fs')) {
return;
}
if (shouldCache(url.pathname)) {
event.respondWith(cacheFirstStrategy(event.request));
} else if (url.pathname.endsWith('.html') || url.pathname === '/') {
if (shouldCache(url.pathname, isCDN)) {
event.respondWith(cacheFirstStrategyWithDedup(event.request, isCDN));
} else if (isLocal && (url.pathname.endsWith('.html') || url.pathname === '/')) {
event.respondWith(networkFirstStrategy(event.request));
}
});
/**
* Cache-first strategy: Check cache first, fallback to network
* Perfect for WASM files and static assets that rarely change
* Cache-first strategy with deduplication
* Ensures we only cache CDN OR local version, never both
*/
async function cacheFirstStrategy(request) {
async function cacheFirstStrategyWithDedup(request, isCDN) {
const url = new URL(request.url);
const fileName = url.pathname.split('/').pop();
try {
const cachedResponse = await caches.match(request, {
ignoreVary: true,
ignoreSearch: true
});
const cachedResponse = await findCachedFile(fileName);
if (cachedResponse) {
console.log('⚡ [Cache HIT] Instant load:', request.url.split('/').pop());
// console.log('⚡ [Cache HIT] Instant load:', fileName);
return cachedResponse;
}
console.log('📥 [Cache MISS] Downloading:', request.url.split('/').pop());
// console.log(`📥 [Cache MISS] Downloading from ${isCDN ? 'CDN' : 'local'}:`, fileName);
const networkResponse = await fetch(request);
if (networkResponse && networkResponse.status === 200) {
const cache = await caches.open(CACHE_NAME);
cache.put(request, networkResponse.clone());
console.log('💾 [Cached] Saved for next time:', request.url.split('/').pop());
await removeDuplicateCache(cache, fileName, isCDN);
await cache.put(request, networkResponse.clone());
// console.log(`💾 [Cached from ${isCDN ? 'CDN' : 'local'}] Saved:`, fileName);
}
return networkResponse;
} catch (error) {
console.error('[ServiceWorker] Fetch failed for:', request.url, error);
if (isCDN) {
console.warn(`⚠️ [CDN Failed] Trying local fallback for: ${fileName}`);
const basePath = getBasePath();
const localPath = getLocalPathForCDNUrl(url.pathname);
if (localPath) {
const localUrl = `${basePath}${localPath}${fileName}`;
try {
const fallbackResponse = await fetch(localUrl);
if (fallbackResponse && fallbackResponse.status === 200) {
const cache = await caches.open(CACHE_NAME);
await cache.put(localUrl, fallbackResponse.clone());
// console.log('✅ [Fallback Success] Cached local version:', fileName);
return fallbackResponse;
}
} catch (fallbackError) {
console.error('[ServiceWorker] Both CDN and local failed for:', fileName);
}
}
}
throw error;
}
}
async function findCachedFile(fileName) {
const cache = await caches.open(CACHE_NAME);
const requests = await cache.keys();
for (const req of requests) {
const reqUrl = new URL(req.url);
if (reqUrl.pathname.endsWith(fileName)) {
return await cache.match(req);
}
}
return null;
}
async function removeDuplicateCache(cache, fileName, isCDN) {
const requests = await cache.keys();
for (const req of requests) {
const reqUrl = new URL(req.url);
if (reqUrl.pathname.endsWith(fileName)) {
// If caching CDN version, remove local version (and vice versa)
const reqIsCDN = reqUrl.hostname === 'cdn.jsdelivr.net';
if (reqIsCDN !== isCDN) {
await cache.delete(req);
// console.log(`[Dedup] Removed ${reqIsCDN ? 'CDN' : 'local'} version of:`, fileName);
}
}
}
}
/**
* Network-first strategy: Try network first, fallback to cache
* Perfect for HTML files that might update
@@ -154,7 +208,7 @@ async function networkFirstStrategy(request) {
} catch (error) {
const cachedResponse = await caches.match(request);
if (cachedResponse) {
console.log('📴 [Offline Mode] Serving from cache:', request.url.split('/').pop());
// console.log('[Offline Mode] Serving from cache:', request.url.split('/').pop());
return cachedResponse;
}
throw error;
@@ -162,10 +216,36 @@ async function networkFirstStrategy(request) {
}
/**
* Determine if a URL should be cached
* Handles both root (/) and subdirectory (/test/) deployments
* Map CDN URL path to local path
* Returns the local directory path for a given CDN package
*/
function shouldCache(pathname) {
function getLocalPathForCDNUrl(pathname) {
if (pathname.includes('/@bentopdf/pymupdf-wasm')) {
return '/pymupdf-wasm/';
}
if (pathname.includes('/@bentopdf/gs-wasm')) {
return '/ghostscript-wasm/';
}
if (pathname.includes('/@matbee/libreoffice-converter')) {
return '/libreoffice-wasm/';
}
return null;
}
/**
* Determine if a URL should be cached
* Handles both local and CDN URLs
*/
function shouldCache(pathname, isCDN = false) {
if (isCDN) {
return (
pathname.includes('/@bentopdf/pymupdf-wasm') ||
pathname.includes('/@bentopdf/gs-wasm') ||
pathname.includes('/@matbee/libreoffice-converter') ||
pathname.match(/\.(wasm|whl|zip|json|js|gz)$/)
);
}
return (
pathname.includes('/libreoffice-wasm/') ||
pathname.includes('/pymupdf-wasm/') ||
@@ -182,7 +262,7 @@ function shouldCache(pathname) {
async function cacheInBatches(cache, urls, batchSize = 5) {
for (let i = 0; i < urls.length; i += batchSize) {
const batch = urls.slice(i, i + batchSize);
console.log(`[ServiceWorker] Caching batch ${Math.floor(i / batchSize) + 1}/${Math.ceil(urls.length / batchSize)}`);
// console.log(`[ServiceWorker] Caching batch ${Math.floor(i / batchSize) + 1}/${Math.ceil(urls.length / batchSize)}`);
await Promise.all(
batch.map(async (url) => {
@@ -190,7 +270,7 @@ async function cacheInBatches(cache, urls, batchSize = 5) {
await cache.add(url);
const fileName = url.split('/').pop();
const fileSize = fileName.includes('.wasm') || fileName.includes('.whl') ? '(large file)' : '';
console.log(` ✓ Cached: ${fileName} ${fileSize}`);
// console.log(` ✓ Cached: ${fileName} ${fileSize}`);
} catch (error) {
console.warn('[ServiceWorker] Failed to cache:', url, error.message);
}
@@ -213,5 +293,5 @@ self.addEventListener('message', (event) => {
}
});
console.log('🎉 [ServiceWorker] Script loaded successfully! Ready to cache assets.');
console.log('📊 [ServiceWorker] Cache version:', CACHE_VERSION);
// console.log('🎉 [ServiceWorker] Script loaded successfully! Ready to cache assets.');
// console.log('📊 [ServiceWorker] Cache version:', CACHE_VERSION);
scripts/include-docs-in-dist.js
+56
View File
@@ -0,0 +1,56 @@
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const projectRoot = path.resolve(__dirname, '..');
const docsDistPath = path.join(projectRoot, 'docs', '.vitepress', 'dist');
const mainDistPath = path.join(projectRoot, 'dist');
const targetDocsPath = path.join(mainDistPath, 'docs');
function copyDir(src, dest) {
if (!fs.existsSync(dest)) {
fs.mkdirSync(dest, { recursive: true });
}
const entries = fs.readdirSync(src, { withFileTypes: true });
for (const entry of entries) {
const srcPath = path.join(src, entry.name);
const destPath = path.join(dest, entry.name);
if (entry.isDirectory()) {
copyDir(srcPath, destPath);
} else {
fs.copyFileSync(srcPath, destPath);
}
}
}
console.log('Including docs in dist...');
if (!fs.existsSync(docsDistPath)) {
console.error('Error: Docs build not found. Please run "npm run docs:build" first.');
process.exit(1);
}
if (!fs.existsSync(mainDistPath)) {
console.error('Error: Main dist folder not found. Please run "npm run build" first.');
process.exit(1);
}
try {
console.log(`Copying from: ${docsDistPath}`);
console.log(`Copying to: ${targetDocsPath}`);
copyDir(docsDistPath, targetDocsPath);
console.log('Docs successfully included in dist/docs!');
const files = fs.readdirSync(targetDocsPath);
console.log(`Copied ${files.length} items to dist/docs`);
} catch (error) {
console.error('Error copying docs:', error.message);
process.exit(1);
}
signatures/cla.json
+48
View File
@@ -167,6 +167,54 @@
"created_at": "2025-12-27T00:51:13Z",
"repoId": 1074785178,
"pullRequestNo": 312
},
{
"name": "matteo-genovese",
"id": 67902487,
"comment_id": 3694053964,
"created_at": "2025-12-27T15:47:09Z",
"repoId": 1074785178,
"pullRequestNo": 315
},
{
"name": "ryuupendragon",
"id": 51423001,
"comment_id": 3694537786,
"created_at": "2025-12-28T07:40:08Z",
"repoId": 1074785178,
"pullRequestNo": 317
},
{
"name": "Timmy93",
"id": 10899430,
"comment_id": 3695167676,
"created_at": "2025-12-29T00:17:09Z",
"repoId": 1074785178,
"pullRequestNo": 325
},
{
"name": "Roddy-D",
"id": 107297718,
"comment_id": 3697813743,
"created_at": "2025-12-29T23:42:18Z",
"repoId": 1074785178,
"pullRequestNo": 335
},
{
"name": "mafridi143",
"id": 24561545,
"comment_id": 3699203551,
"created_at": "2025-12-30T12:27:08Z",
"repoId": 1074785178,
"pullRequestNo": 338
},
{
"name": "raulgcode",
"id": 4565524,
"comment_id": 3705336389,
"created_at": "2026-01-02T13:34:58Z",
"repoId": 1074785178,
"pullRequestNo": 348
}
]
}
src/css/markdown-editor.css
+77 -1
View File
@@ -424,6 +424,43 @@
border-color: rgb(229, 231, 235);
}
/* Mermaid Diagrams */
.md-editor-preview .mermaid-diagram {
display: flex;
justify-content: center;
margin: 1.5em 0;
padding: 1em;
background: rgb(17, 24, 39);
border-radius: 0.5rem;
border: 1px solid rgb(55, 65, 81);
}
.md-editor-preview .mermaid-diagram svg {
max-width: 100%;
height: auto;
}
.md-editor.light-mode .md-editor-preview .mermaid-diagram {
background: rgb(249, 250, 251);
border-color: rgb(229, 231, 235);
}
.md-editor-preview .mermaid-error {
color: rgb(248, 113, 113);
background: rgba(239, 68, 68, 0.1);
padding: 1em;
border-radius: 0.5rem;
font-family: monospace;
font-size: 0.9em;
border: 1px solid rgb(239, 68, 68);
}
.md-editor.light-mode .md-editor-preview .mermaid-error {
color: rgb(185, 28, 28);
background: rgb(254, 242, 242);
border-color: rgb(252, 165, 165);
}
/* Settings Modal */
.md-editor-modal-overlay {
position: fixed;
@@ -545,10 +582,34 @@
.md-editor-pane:first-child,
header,
nav,
footer {
footer,
#back-to-tools,
.bg-gray-800>h1.text-2xl,
.bg-gray-800>p.text-gray-400,
#markdown-editor-container~h1,
#markdown-editor-container~p {
display: none !important;
}
.min-h-screen,
.max-w-7xl,
.bg-gray-800,
.rounded-xl,
.shadow-xl,
.p-6,
.py-8,
.px-4,
#markdown-editor-container,
[class*="container"] {
padding: 0 !important;
margin: 0 !important;
background: white !important;
background-color: white !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Reset container backgrounds and layouts */
.md-editor,
.md-editor-wrapper,
@@ -597,6 +658,11 @@
page-break-after: avoid;
}
.md-editor-preview>h1:first-child,
.md-editor-preview>*:first-child {
margin-top: 0 !important;
}
.md-editor-preview p,
.md-editor-preview li,
.md-editor-preview span {
@@ -644,6 +710,16 @@
.md-editor-preview tr:nth-child(even) {
background: #f6f8fa !important;
}
.md-editor-preview .mermaid-diagram {
background: #f6f8fa !important;
border: 1px solid #e1e4e8 !important;
page-break-inside: avoid;
}
.md-editor-preview .mermaid-diagram svg {
max-width: 100% !important;
}
}
/* Responsive */
src/css/styles.css
+7
View File
@@ -59,6 +59,13 @@ body {
transform 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
border: 1px solid #374151;
background-color: #1f2937;
padding: 1.5rem;
border-radius: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.tool-card:hover {
src/js/config/wasm-cdn-config.ts
+76
View File
@@ -0,0 +1,76 @@
/**
* WASM CDN Configuration
*
* Centralized configuration for loading WASM files from jsDelivr CDN or local paths.
* Supports environment-based toggling and automatic fallback mechanism.
*/
const USE_CDN = import.meta.env.VITE_USE_CDN === 'true';
import { CDN_URLS, PACKAGE_VERSIONS } from '../const/cdn-version';
const LOCAL_PATHS = {
libreoffice: import.meta.env.BASE_URL + 'libreoffice-wasm/',
ghostscript: import.meta.env.BASE_URL + 'ghostscript-wasm/',
pymupdf: import.meta.env.BASE_URL + 'pymupdf-wasm/',
} as const;
export type WasmPackage = 'libreoffice' | 'ghostscript' | 'pymupdf';
export function getWasmBaseUrl(packageName: WasmPackage): string {
if (USE_CDN) {
return CDN_URLS[packageName];
}
return LOCAL_PATHS[packageName];
}
export function getWasmFallbackUrl(packageName: WasmPackage): string {
return LOCAL_PATHS[packageName];
}
export function isCdnEnabled(): boolean {
return USE_CDN;
}
/**
* Fetch a file with automatic CDN → local fallback
* @param packageName - WASM package name
* @param fileName - File name relative to package base
* @returns Response object
*/
export async function fetchWasmFile(
packageName: WasmPackage,
fileName: string
): Promise<Response> {
const cdnUrl = CDN_URLS[packageName] + fileName;
const localUrl = LOCAL_PATHS[packageName] + fileName;
if (USE_CDN) {
try {
console.log(`[WASM CDN] Fetching from CDN: ${cdnUrl}`);
const response = await fetch(cdnUrl);
if (response.ok) {
return response;
}
console.warn(`[WASM CDN] CDN fetch failed with status ${response.status}, trying local fallback...`);
} catch (error) {
console.warn(`[WASM CDN] CDN fetch error:`, error, `- trying local fallback...`);
}
}
const response = await fetch(localUrl);
if (!response.ok) {
throw new Error(`Failed to fetch ${fileName}: HTTP ${response.status}`);
}
return response;
}
// use this to debug
export function getWasmConfigInfo() {
return {
cdnEnabled: USE_CDN,
packageVersions: PACKAGE_VERSIONS,
cdnUrls: CDN_URLS,
localPaths: LOCAL_PATHS,
};
}
src/js/const/cdn-version.ts
+11
View File
@@ -0,0 +1,11 @@
export const PACKAGE_VERSIONS = {
libreoffice: '2.3.1',
ghostscript: '0.1.0',
pymupdf: '0.1.9',
} as const;
export const CDN_URLS = {
libreoffice: `https://cdn.jsdelivr.net/npm/@bentopdf/libreoffice-wasm@${PACKAGE_VERSIONS.libreoffice}/assets/`,
ghostscript: `https://cdn.jsdelivr.net/npm/@bentopdf/gs-wasm@${PACKAGE_VERSIONS.ghostscript}/assets/`,
pymupdf: `https://cdn.jsdelivr.net/npm/@bentopdf/pymupdf-wasm@${PACKAGE_VERSIONS.pymupdf}/assets/`,
} as const;
src/js/logic/cbz-to-pdf-page.ts
+2 -1
View File
@@ -3,6 +3,7 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const FILETYPE = 'cbz';
const EXTENSIONS = ['.cbz', '.cbr'];
@@ -86,7 +87,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
showLoader('Loading engine...');
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
if (state.files.length === 1) {
src/js/logic/compress-pdf-page.ts
+29 -3
View File
@@ -9,6 +9,7 @@ import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PDFDocument } from 'pdf-lib';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
@@ -56,7 +57,7 @@ async function performCondenseCompression(
removeThumbnails?: boolean;
}
) {
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
const preset = CONDENSE_PRESETS[level as keyof typeof CONDENSE_PRESETS] || CONDENSE_PRESETS.balanced;
@@ -87,8 +88,28 @@ async function performCondenseCompression(
},
};
const result = await pymupdf.compressPdf(fileBlob, options);
return result;
try {
const result = await pymupdf.compressPdf(fileBlob, options);
return result;
} catch (error: any) {
const errorMessage = error?.message || String(error);
if (errorMessage.includes('PatternType') || errorMessage.includes('pattern')) {
console.warn('[CompressPDF] Pattern error detected, retrying without image rewriting:', errorMessage);
const fallbackOptions = {
...options,
images: {
...options.images,
enabled: false,
},
};
const result = await pymupdf.compressPdf(fileBlob, fallbackOptions);
return { ...result, usedFallback: true };
}
throw new Error(`PDF compression failed: ${errorMessage}`);
}
}
async function performPhotonCompression(arrayBuffer: ArrayBuffer, level: string) {
@@ -312,6 +333,11 @@ document.addEventListener('DOMContentLoaded', () => {
resultBlob = result.blob;
resultSize = result.compressedSize;
usedMethod = 'Condense';
// Check if fallback was used
if ((result as any).usedFallback) {
usedMethod += ' (without image optimization due to unsupported patterns)';
}
} else {
showLoader('Running Photon compression...');
const arrayBuffer = await readFileAsArrayBuffer(originalFile) as ArrayBuffer;
src/js/logic/epub-to-pdf-page.ts
+2 -1
View File
@@ -3,6 +3,7 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const FILETYPE = 'epub';
const EXTENSIONS = ['.epub'];
@@ -90,7 +91,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
showLoader('Loading engine...');
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
if (state.files.length === 1) {
src/js/logic/extract-images-page.ts
+2 -1
View File
@@ -3,8 +3,9 @@ import { downloadFile, readFileAsArrayBuffer, formatBytes, getPDFDocument } from
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
interface ExtractedImage {
data: Uint8Array;
src/js/logic/extract-tables-page.ts
+2 -1
View File
@@ -3,8 +3,9 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { createIcons, icons } from 'lucide';
import JSZip from 'jszip';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
let file: File | null = null;
const updateUI = () => {
src/js/logic/fb2-to-pdf-page.ts
+2 -1
View File
@@ -3,6 +3,7 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const FILETYPE = 'fb2';
const EXTENSIONS = ['.fb2'];
@@ -86,7 +87,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
showLoader('Loading engine...');
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
if (state.files.length === 1) {
src/js/logic/image-to-pdf-page.ts
+2 -1
View File
@@ -2,6 +2,7 @@ import { createIcons, icons } from 'lucide';
import { showAlert, showLoader, hideLoader } from '../ui.js';
import { downloadFile, formatBytes } from '../utils/helpers.js';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const SUPPORTED_FORMATS = '.jpg,.jpeg,.png,.bmp,.gif,.tiff,.tif,.pnm,.pgm,.pbm,.ppm,.pam,.jxr,.jpx,.jp2,.psd,.svg,.heic,.heif,.webp';
const SUPPORTED_FORMATS_DISPLAY = 'JPG, PNG, BMP, GIF, TIFF, PNM, PGM, PBM, PPM, PAM, JXR, JPX, JP2, PSD, SVG, HEIC, WebP';
@@ -165,7 +166,7 @@ function updateUI() {
async function ensurePyMuPDF(): Promise<PyMuPDF> {
if (!pymupdf) {
pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
}
return pymupdf;
src/js/logic/jpg-to-pdf-page.ts
+2 -1
View File
@@ -2,6 +2,7 @@ import { createIcons, icons } from 'lucide';
import { showAlert, showLoader, hideLoader } from '../ui.js';
import { downloadFile, formatBytes } from '../utils/helpers.js';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const SUPPORTED_FORMATS = '.jpg,.jpeg,.jp2,.jpx';
const SUPPORTED_MIME_TYPES = ['image/jpeg', 'image/jpg', 'image/jp2'];
@@ -159,7 +160,7 @@ function updateUI() {
async function ensurePyMuPDF(): Promise<PyMuPDF> {
if (!pymupdf) {
pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
}
return pymupdf;
src/js/logic/mobi-to-pdf-page.ts
+2 -1
View File
@@ -3,6 +3,7 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const FILETYPE = 'mobi';
const EXTENSIONS = ['.mobi'];
@@ -86,7 +87,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
showLoader('Loading engine...');
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
if (state.files.length === 1) {
src/js/logic/pdf-layers-page.ts
+2 -1
View File
@@ -2,8 +2,9 @@ import { showLoader, hideLoader, showAlert } from '../ui.js';
import { downloadFile, readFileAsArrayBuffer, formatBytes, getPDFDocument } from '../utils/helpers.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
interface LayerData {
number: number;
src/js/logic/pdf-to-csv-page.ts
+2 -1
View File
@@ -3,8 +3,9 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { createIcons, icons } from 'lucide';
import JSZip from 'jszip';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
let file: File | null = null;
const updateUI = () => {
src/js/logic/pdf-to-docx-page.ts
+2 -1
View File
@@ -3,8 +3,9 @@ import { downloadFile, readFileAsArrayBuffer, formatBytes, getPDFDocument } from
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
document.addEventListener('DOMContentLoaded', () => {
const fileInput = document.getElementById('file-input') as HTMLInputElement;
src/js/logic/pdf-to-excel-page.ts
+2 -1
View File
@@ -2,9 +2,10 @@ import { showLoader, hideLoader, showAlert } from '../ui.js';
import { downloadFile, formatBytes } from '../utils/helpers.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
import * as XLSX from 'xlsx';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
let file: File | null = null;
const updateUI = () => {
src/js/logic/pdf-to-markdown-page.ts
+2 -1
View File
@@ -3,8 +3,9 @@ import { downloadFile, readFileAsArrayBuffer, formatBytes, getPDFDocument } from
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
document.addEventListener('DOMContentLoaded', () => {
const fileInput = document.getElementById('file-input') as HTMLInputElement;
src/js/logic/pdf-to-svg-page.ts
+2 -1
View File
@@ -3,8 +3,9 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { createIcons, icons } from 'lucide';
import JSZip from 'jszip';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
let files: File[] = [];
const updateUI = () => {
src/js/logic/pdf-to-text-page.ts
+2 -1
View File
@@ -2,6 +2,7 @@ import { createIcons, icons } from 'lucide';
import { showAlert, showLoader, hideLoader } from '../ui.js';
import { downloadFile, formatBytes } from '../utils/helpers.js';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
let files: File[] = [];
let pymupdf: PyMuPDF | null = null;
@@ -148,7 +149,7 @@ function updateUI() {
async function ensurePyMuPDF(): Promise<PyMuPDF> {
if (!pymupdf) {
pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
}
return pymupdf;
src/js/logic/prepare-pdf-for-ai-page.ts
+2 -1
View File
@@ -3,8 +3,9 @@ import { downloadFile, readFileAsArrayBuffer, formatBytes, getPDFDocument } from
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
document.addEventListener('DOMContentLoaded', () => {
const fileInput = document.getElementById('file-input') as HTMLInputElement;
src/js/logic/psd-to-pdf-page.ts
+2 -1
View File
@@ -3,6 +3,7 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const ACCEPTED_EXTENSIONS = ['.psd'];
const FILETYPE_NAME = 'PSD';
@@ -11,7 +12,7 @@ let pymupdf: PyMuPDF | null = null;
async function ensurePyMuPDF(): Promise<PyMuPDF> {
if (!pymupdf) {
pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
}
return pymupdf;
src/js/logic/rasterize-pdf-page.ts
+2 -1
View File
@@ -3,8 +3,9 @@ import { downloadFile, readFileAsArrayBuffer, formatBytes, getPDFDocument } from
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
document.addEventListener('DOMContentLoaded', () => {
const fileInput = document.getElementById('file-input') as HTMLInputElement;
src/js/logic/split-pdf-page.ts
+40 -2
View File
@@ -253,8 +253,13 @@ document.addEventListener('DOMContentLoaded', () => {
const pageRangeInput = (document.getElementById('page-range') as HTMLInputElement).value;
if (!pageRangeInput) throw new Error('Choose a valid page range.');
const ranges = pageRangeInput.split(',');
const rangeGroups: number[][] = [];
for (const range of ranges) {
const trimmedRange = range.trim();
if (!trimmedRange) continue;
const groupIndices: number[] = [];
if (trimmedRange.includes('-')) {
const [start, end] = trimmedRange.split('-').map(Number);
if (
@@ -265,12 +270,45 @@ document.addEventListener('DOMContentLoaded', () => {
start > end
)
continue;
for (let i = start; i <= end; i++) indicesToExtract.push(i - 1);
for (let i = start; i <= end; i++) groupIndices.push(i - 1);
} else {
const pageNum = Number(trimmedRange);
if (isNaN(pageNum) || pageNum < 1 || pageNum > totalPages) continue;
indicesToExtract.push(pageNum - 1);
groupIndices.push(pageNum - 1);
}
if (groupIndices.length > 0) {
rangeGroups.push(groupIndices);
indicesToExtract.push(...groupIndices);
}
}
if (rangeGroups.length > 1) {
showLoader('Creating separate PDFs for each range...');
const zip = new JSZip();
for (let i = 0; i < rangeGroups.length; i++) {
const group = rangeGroups[i];
const newPdf = await PDFLibDocument.create();
const copiedPages = await newPdf.copyPages(state.pdfDoc, group);
copiedPages.forEach((page: any) => newPdf.addPage(page));
const pdfBytes = await newPdf.save();
const minPage = Math.min(...group) + 1;
const maxPage = Math.max(...group) + 1;
const filename = minPage === maxPage
? `page-${minPage}.pdf`
: `pages-${minPage}-${maxPage}.pdf`;
zip.file(filename, pdfBytes);
}
const zipBlob = await zip.generateAsync({ type: 'blob' });
downloadFile(zipBlob, 'split-pages.zip');
hideLoader();
showAlert('Success', `PDF split into ${rangeGroups.length} files successfully!`, 'success', () => {
resetState();
});
return;
}
break;
src/js/logic/txt-to-pdf-page.ts
+2 -1
View File
@@ -2,6 +2,7 @@ import { showLoader, hideLoader, showAlert } from '../ui.js';
import { downloadFile, formatBytes } from '../utils/helpers.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
let files: File[] = [];
let currentMode: 'upload' | 'text' = 'upload';
@@ -87,7 +88,7 @@ async function convert() {
showLoader('Loading engine...');
try {
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
let textContent = '';
src/js/logic/xps-to-pdf-page.ts
+2 -1
View File
@@ -3,6 +3,7 @@ import { downloadFile, formatBytes } from '../utils/helpers.js';
import { state } from '../state.js';
import { createIcons, icons } from 'lucide';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
const FILETYPE = 'xps';
const EXTENSIONS = ['.xps', '.oxps'];
@@ -86,7 +87,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
showLoader('Loading engine...');
const pymupdf = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
await pymupdf.load();
if (state.files.length === 1) {
src/js/main.ts
+9 -86
View File
@@ -102,7 +102,7 @@ const init = async () => {
<span class="text-white font-bold text-lg">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version-simple">${APP_VERSION}</span>
@@ -321,70 +321,6 @@ const init = async () => {
const searchBar = document.getElementById('search-bar');
const categoryGroups = dom.toolGrid.querySelectorAll('.category-group');
const fuzzyMatchWithScore = (searchTerm: string, targetText: string): number => {
if (!searchTerm) return 100;
const search = searchTerm.toLowerCase();
const target = targetText.toLowerCase();
if (target === search) return 100;
if (target.includes(search)) {
if (target.startsWith(search)) return 95;
if (target.includes(' ' + search)) return 90;
return 85;
}
const words = target.split(/\s+/);
const searchWords = search.split(/\s+/);
let wordBoundaryScore = 0;
let matchedWords = 0;
for (const searchWord of searchWords) {
for (const targetWord of words) {
if (targetWord.startsWith(searchWord)) {
matchedWords++;
wordBoundaryScore += 20;
break;
}
}
}
if (matchedWords === searchWords.length) {
return Math.min(80, wordBoundaryScore);
}
let searchIndex = 0;
let targetIndex = 0;
let consecutiveMatches = 0;
let maxConsecutive = 0;
let totalMatches = 0;
while (searchIndex < search.length && targetIndex < target.length) {
if (search[searchIndex] === target[targetIndex]) {
searchIndex++;
totalMatches++;
consecutiveMatches++;
maxConsecutive = Math.max(maxConsecutive, consecutiveMatches);
} else {
consecutiveMatches = 0;
}
targetIndex++;
}
if (searchIndex !== search.length) return 0;
const matchRatio = totalMatches / search.length;
const consecutiveBonus = (maxConsecutive / search.length) * 20;
const lengthPenalty = Math.max(0, (target.length - search.length) / target.length) * 10;
const score = Math.max(0, Math.min(75,
(matchRatio * 50) + consecutiveBonus - lengthPenalty
));
return score;
};
searchBar.addEventListener('input', () => {
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
const searchTerm = searchBar.value.toLowerCase().trim();
@@ -392,35 +328,22 @@ const init = async () => {
categoryGroups.forEach((group) => {
const toolCards = Array.from(group.querySelectorAll('.tool-card'));
const scoredCards = toolCards.map((card) => {
const toolName = card.querySelector('h3')?.textContent || '';
const toolSubtitle = card.querySelector('p')?.textContent || '';
const nameScore = fuzzyMatchWithScore(searchTerm, toolName);
const subtitleScore = fuzzyMatchWithScore(searchTerm, toolSubtitle);
const score = Math.max(nameScore, subtitleScore) +
(nameScore > 0 && subtitleScore > 0 ? 5 : 0);
return { card, score };
});
scoredCards.sort((a, b) => b.score - a.score);
let visibleToolsInCategory = 0;
const threshold = 10;
scoredCards.forEach(({ card, score }, index) => {
const isMatch = score >= threshold;
card.classList.toggle('hidden', !isMatch);
toolCards.forEach((card) => {
const toolName = (card.querySelector('h3')?.textContent || '').toLowerCase();
const toolSubtitle = (card.querySelector('p')?.textContent || '').toLowerCase();
const isMatch = !searchTerm || toolName.includes(searchTerm) || toolSubtitle.includes(searchTerm);
(card as HTMLElement).style.display = isMatch ? '' : 'none';
if (isMatch) {
visibleToolsInCategory++;
(card as HTMLElement).style.order = index.toString();
}
});
group.classList.toggle('hidden', visibleToolsInCategory === 0);
(group as HTMLElement).style.display = visibleToolsInCategory === 0 ? 'none' : '';
});
});
src/js/utils/ghostscript-loader.ts
+145 -58
View File
@@ -1,10 +1,11 @@
/**
* PDF/A Conversion using Ghostscript WASM
*
* Converts PDFs to PDF/A-1b, PDF/A-2b, or PDF/A-3b format.
* * Converts PDFs to PDF/A-1b, PDF/A-2b, or PDF/A-3b format.
*/
import loadWASM from '@bentopdf/gs-wasm';
import { getWasmBaseUrl, fetchWasmFile } from '../config/wasm-cdn-config.js';
import { PDFDocument, PDFDict, PDFName, PDFArray } from 'pdf-lib';
interface GhostscriptModule {
FS: {
@@ -28,40 +29,6 @@ export function getCachedGsModule(): GhostscriptModule | null {
return cachedGsModule;
}
/**
* Encode binary data to Adobe ASCII85 (Base85) format.
* This matches Python's base64.a85encode(data, adobe=True)
*/
function encodeBase85(data: Uint8Array): string {
const POW85 = [85 * 85 * 85 * 85, 85 * 85 * 85, 85 * 85, 85, 1];
let result = '';
// Process 4 bytes at a time
for (let i = 0; i < data.length; i += 4) {
// Get 4 bytes (pad with zeros if needed)
let value = 0;
const remaining = Math.min(4, data.length - i);
for (let j = 0; j < 4; j++) {
value = value * 256 + (j < remaining ? data[i + j] : 0);
}
// Special case: all zeros become 'z'
if (value === 0 && remaining === 4) {
result += 'z';
} else {
// Encode to 5 ASCII85 characters
const encoded: string[] = [];
for (let j = 0; j < 5; j++) {
encoded.push(String.fromCharCode((value / POW85[j]) % 85 + 33));
}
// For partial blocks, only output needed characters
result += encoded.slice(0, remaining + 1).join('');
}
}
return result;
}
export async function convertToPdfA(
pdfData: Uint8Array,
level: PdfALevel = 'PDF/A-2b',
@@ -74,10 +41,11 @@ export async function convertToPdfA(
if (cachedGsModule) {
gs = cachedGsModule;
} else {
const gsBaseUrl = getWasmBaseUrl('ghostscript');
gs = await loadWASM({
locateFile: (path: string) => {
if (path.endsWith('.wasm')) {
return import.meta.env.BASE_URL + 'ghostscript-wasm/gs.wasm';
return gsBaseUrl + 'gs.wasm';
}
return path;
},
@@ -87,7 +55,6 @@ export async function convertToPdfA(
cachedGsModule = gs;
}
const pdfaMap: Record<PdfALevel, string> = {
'PDF/A-1b': '1',
'PDF/A-2b': '2',
@@ -96,61 +63,79 @@ export async function convertToPdfA(
const inputPath = '/tmp/input.pdf';
const outputPath = '/tmp/output.pdf';
const iccPath = '/tmp/pdfa.icc';
const pdfaDefPath = '/tmp/pdfa.ps';
gs.FS.writeFile(inputPath, pdfData);
console.log('[Ghostscript] Input file size:', pdfData.length);
onProgress?.(`Converting to ${level}...`);
const pdfaDefPath = '/tmp/pdfa.ps';
try {
const response = await fetch(import.meta.env.BASE_URL + 'ghostscript-wasm/sRGB_v4_ICC_preference.icc');
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
const iccFileName = 'sRGB_IEC61966-2-1_no_black_scaling.icc';
const response = await fetchWasmFile('ghostscript', iccFileName);
if (!response.ok) {
throw new Error(`Failed to fetch ICC profile: ${iccFileName}. Ensure it is in your assets folder.`);
}
const iccData = new Uint8Array(await response.arrayBuffer());
console.log('[Ghostscript] sRGB v4 ICC profile loaded:', iccData.length, 'bytes');
console.log('[Ghostscript] sRGB v2 ICC profile loaded:', iccData.length, 'bytes');
// Write ICC profile as a binary file to FS (eliminates encoding issues)
const iccPath = '/tmp/pdfa.icc';
gs.FS.writeFile(iccPath, iccData);
console.log('[Ghostscript] sRGB ICC profile written to FS:', iccPath);
// Generate PostScript with reference to ICC file (Standard OCRmyPDF/GS approach)
const iccHex = Array.from(iccData).map(b => b.toString(16).padStart(2, '0')).join('');
console.log('[Ghostscript] ICC profile hex length:', iccHex.length);
const pdfaSubtype = level === 'PDF/A-1b' ? '/GTS_PDFA1' : '/GTS_PDFA';
const pdfaPS = `%!
% Define OutputIntent subtype based on PDF/A level
/OutputIntentSubtype ${level === 'PDF/A-1b' ? '/GTS_PDFA1' : '/GTS_PDFA'} def
% PDF/A definition file for ${level}
% Define the ICC profile stream object with embedded hex data
[/_objdef {icc_PDFA} /type /stream /OBJ pdfmark
[{icc_PDFA} <</N 3 >> /PUT pdfmark
[{icc_PDFA} (${iccPath}) (r) file /PUT pdfmark
[{icc_PDFA} << /N 3 >> /PUT pdfmark
[{icc_PDFA} <${iccHex}> /PUT pdfmark
% Define the OutputIntent dictionary
[/_objdef {OutputIntent_PDFA} /type /dict /OBJ pdfmark
[{OutputIntent_PDFA} <<
/Type /OutputIntent
/S OutputIntentSubtype
/S ${pdfaSubtype}
/DestOutputProfile {icc_PDFA}
/OutputConditionIdentifier (sRGB)
/OutputConditionIdentifier (sRGB IEC61966-2.1)
/Info (sRGB IEC61966-2.1)
/RegistryName (http://www.color.org)
>> /PUT pdfmark
[{Catalog} <<
/OutputIntents [ {OutputIntent_PDFA} ]
>> /PUT pdfmark
% Attach OutputIntent to the document Catalog
[{Catalog} << /OutputIntents [ {OutputIntent_PDFA} ] >> /PUT pdfmark
`;
gs.FS.writeFile(pdfaDefPath, pdfaPS);
console.log('[Ghostscript] PDFA PostScript created with embedded ICC profile');
console.log('[Ghostscript] PDFA PostScript created with embedded ICC hex data');
} catch (e) {
console.error('[Ghostscript] Failed to create PDFA PostScript:', e);
console.error('[Ghostscript] Failed to setup PDF/A assets:', e);
throw new Error('Conversion failed: could not create PDF/A definition');
}
const args = [
'-dNOSAFER',
'-dBATCH',
'-dNOPAUSE',
'-sDEVICE=pdfwrite',
`-dPDFA=${pdfaMap[level]}`,
'-dPDFACompatibilityPolicy=1',
`-dCompatibilityLevel=${level === 'PDF/A-1b' ? '1.4' : '1.7'}`,
'-sColorConversionStrategy=RGB',
'-sColorConversionStrategy=UseDeviceIndependentColor',
'-sICCProfilesDir=/tmp/',
`-sOutputICCProfile=${iccPath}`,
`-sDefaultRGBProfile=${iccPath}`,
`-sBlendColorProfile=${iccPath}`,
'-dCompressPages=true',
'-dWriteObjStms=false',
'-dWriteXRefStm=false',
'-dEmbedAllFonts=true',
'-dSubsetFonts=true',
'-dAutoRotatePages=/None',
@@ -160,6 +145,12 @@ export async function convertToPdfA(
];
console.log('[Ghostscript] Running PDF/A conversion...');
try {
console.log('[Ghostscript] Checking version:');
gs.callMain(['--version']);
} catch (e) {
console.warn('[Ghostscript] Could not check version:', e);
}
let exitCode: number;
try {
@@ -174,6 +165,8 @@ export async function convertToPdfA(
if (exitCode !== 0) {
try { gs.FS.unlink(inputPath); } catch { /* ignore */ }
try { gs.FS.unlink(outputPath); } catch { /* ignore */ }
try { gs.FS.unlink(iccPath); } catch { /* ignore */ }
try { gs.FS.unlink(pdfaDefPath); } catch { /* ignore */ }
throw new Error(`Ghostscript conversion failed with exit code ${exitCode}`);
}
@@ -191,10 +184,104 @@ export async function convertToPdfA(
// Cleanup
try { gs.FS.unlink(inputPath); } catch { /* ignore */ }
try { gs.FS.unlink(outputPath); } catch { /* ignore */ }
try { gs.FS.unlink(iccPath); } catch { /* ignore */ }
try { gs.FS.unlink(pdfaDefPath); } catch { /* ignore */ }
if (level !== 'PDF/A-1b') {
onProgress?.('Post-processing for transparency compliance...');
console.log('[Ghostscript] Adding Group dictionaries to pages for transparency compliance...');
try {
output = await addPageGroupDictionaries(output);
console.log('[Ghostscript] Page Group dictionaries added successfully');
} catch (e) {
console.error('[Ghostscript] Failed to add Group dictionaries:', e);
}
}
return output;
}
async function addPageGroupDictionaries(pdfData: Uint8Array): Promise<Uint8Array> {
const pdfDoc = await PDFDocument.load(pdfData, {
ignoreEncryption: true,
updateMetadata: false
});
const catalog = pdfDoc.catalog;
const outputIntentsArray = catalog.lookup(PDFName.of('OutputIntents'));
let iccProfileRef: ReturnType<typeof PDFDict.prototype.get> = undefined;
if (outputIntentsArray instanceof PDFArray) {
const firstIntent = outputIntentsArray.lookup(0);
if (firstIntent instanceof PDFDict) {
iccProfileRef = firstIntent.get(PDFName.of('DestOutputProfile'));
}
}
const updateGroupCS = (groupDict: PDFDict) => {
if (!iccProfileRef) return;
const currentCS = groupDict.get(PDFName.of('CS'));
if (currentCS instanceof PDFName) {
const csName = currentCS.decodeText();
if (csName === 'DeviceRGB' || csName === 'DeviceGray' || csName === 'DeviceCMYK') {
const iccColorSpace = pdfDoc.context.obj([PDFName.of('ICCBased'), iccProfileRef]);
groupDict.set(PDFName.of('CS'), iccColorSpace);
}
} else if (!currentCS) {
const iccColorSpace = pdfDoc.context.obj([PDFName.of('ICCBased'), iccProfileRef]);
groupDict.set(PDFName.of('CS'), iccColorSpace);
}
};
const pages = pdfDoc.getPages();
for (const page of pages) {
const pageDict = page.node;
const existingGroup = pageDict.lookup(PDFName.of('Group'));
if (existingGroup) {
if (existingGroup instanceof PDFDict) {
updateGroupCS(existingGroup);
}
} else if (iccProfileRef) {
const colorSpace = pdfDoc.context.obj([PDFName.of('ICCBased'), iccProfileRef]);
const groupDict = pdfDoc.context.obj({
Type: 'Group',
S: 'Transparency',
I: false,
K: false,
});
(groupDict as PDFDict).set(PDFName.of('CS'), colorSpace);
pageDict.set(PDFName.of('Group'), groupDict);
}
}
if (iccProfileRef) {
pdfDoc.context.enumerateIndirectObjects().forEach(([ref, obj]) => {
if (obj instanceof PDFDict || (obj && typeof obj === 'object' && 'dict' in obj)) {
const dict = 'dict' in obj ? (obj as { dict: PDFDict }).dict : obj as PDFDict;
const subtype = dict.get(PDFName.of('Subtype'));
if (subtype instanceof PDFName && subtype.decodeText() === 'Form') {
const group = dict.lookup(PDFName.of('Group'));
if (group instanceof PDFDict) {
updateGroupCS(group);
}
}
}
});
}
return await pdfDoc.save({
useObjectStreams: false,
addDefaultPage: false,
updateFieldAppearances: false,
});
}
export async function convertFileToPdfA(
file: File,
level: PdfALevel = 'PDF/A-2b',
@@ -207,4 +294,4 @@ export async function convertFileToPdfA(
const copy = new Uint8Array(result.length);
copy.set(result);
return new Blob([copy], { type: 'application/pdf' });
}
}
src/js/utils/libreoffice-loader.ts
+4 -2
View File
@@ -6,6 +6,7 @@
*/
import { WorkerBrowserConverter } from '@matbee/libreoffice-converter/browser';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
export interface LoadProgress {
phase: 'loading' | 'initializing' | 'converting' | 'complete' | 'ready';
@@ -24,8 +25,9 @@ export class LibreOfficeConverter {
private initializing = false;
private basePath: string;
constructor(basePath: string = import.meta.env.BASE_URL + 'libreoffice-wasm/') {
this.basePath = basePath;
constructor(basePath?: string) {
// Use CDN if available, otherwise use provided basePath or default local path
this.basePath = basePath || getWasmBaseUrl('libreoffice');
}
async initialize(onProgress?: ProgressCallback): Promise<void> {
src/js/utils/markdown-editor.ts
+173
View File
@@ -16,6 +16,7 @@ import go from 'highlight.js/lib/languages/go';
import rust from 'highlight.js/lib/languages/rust';
import yaml from 'highlight.js/lib/languages/yaml';
import 'highlight.js/styles/github.css';
import mermaid from 'mermaid';
import sub from 'markdown-it-sub';
import sup from 'markdown-it-sup';
import footnote from 'markdown-it-footnote';
@@ -130,6 +131,111 @@ def fibonacci(n):
| Code | ✓ | With highlighting |
| Tables | ✓ | With alignment |
| Emoji | ✓ | :white_check_mark: |
| Mermaid | ✓ | Diagrams! |
## Mermaid Diagrams
### Flowchart
\`\`\`mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[OK]
B -->|No| D[Cancel]
\`\`\`
### Sequence Diagram
\`\`\`mermaid
sequenceDiagram
participant User
participant BentoPDF
participant Server
User->>BentoPDF: Upload PDF
BentoPDF->>BentoPDF: Process locally
BentoPDF-->>User: Download result
Note over BentoPDF: No server needed!
\`\`\`
### Pie Chart
\`\`\`mermaid
pie title PDF Tools Usage
"Merge" : 35
"Compress" : 25
"Convert" : 20
"Edit" : 15
"Other" : 5
\`\`\`
### Class Diagram
\`\`\`mermaid
classDiagram
class PDFDocument {
+String title
+int pageCount
+merge()
+split()
+compress()
}
class Page {
+int number
+rotate()
+crop()
}
PDFDocument "1" --> "*" Page
\`\`\`
### Gantt Chart
\`\`\`mermaid
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Research :a1, 2024-01-01, 7d
Design :a2, after a1, 5d
section Development
Implementation :a3, after a2, 14d
Testing :a4, after a3, 7d
\`\`\`
### Entity Relationship
\`\`\`mermaid
erDiagram
USER ||--o{ DOCUMENT : uploads
DOCUMENT ||--|{ PAGE : contains
DOCUMENT {
string id
string name
date created
}
PAGE {
int number
string content
}
\`\`\`
### Mindmap
\`\`\`mermaid
mindmap
root((BentoPDF))
Convert
Word to PDF
Excel to PDF
Image to PDF
Edit
Merge
Split
Compress
Secure
Encrypt
Sign
Watermark
\`\`\`
## Footnotes
@@ -166,6 +272,7 @@ export class MarkdownEditor {
private onBack?: () => void;
private syncScroll: boolean = false;
private isSyncing: boolean = false;
private mermaidInitialized: boolean = false;
private mdOptions: MarkdownItOptions = {
html: true,
breaks: false,
@@ -177,6 +284,7 @@ export class MarkdownEditor {
this.container = container;
this.onBack = options.onBack;
this.initMermaid();
this.md = this.createMarkdownIt();
this.configureLinkRenderer();
@@ -189,6 +297,18 @@ export class MarkdownEditor {
}
}
private initMermaid(): void {
if (!this.mermaidInitialized) {
mermaid.initialize({
startOnLoad: false,
theme: 'default',
securityLevel: 'loose',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
});
this.mermaidInitialized = true;
}
}
private configureLinkRenderer(): void {
// Override link renderer to add target="_blank" and rel="noopener"
const defaultRender = this.md.renderer.rules.link_open ||
@@ -524,6 +644,38 @@ export class MarkdownEditor {
const markdown = this.editor.value;
const html = this.md.render(markdown);
this.preview.innerHTML = html;
this.renderMermaidDiagrams();
}
private async renderMermaidDiagrams(): Promise<void> {
if (!this.preview) return;
const mermaidBlocks = this.preview.querySelectorAll('pre > code.language-mermaid');
for (let i = 0; i < mermaidBlocks.length; i++) {
const block = mermaidBlocks[i] as HTMLElement;
const code = block.textContent || '';
const pre = block.parentElement;
if (pre && code.trim()) {
try {
const id = `mermaid-diagram-${i}-${Date.now()}`;
const { svg } = await mermaid.render(id, code.trim());
const wrapper = document.createElement('div');
wrapper.className = 'mermaid-diagram';
wrapper.innerHTML = svg;
pre.replaceWith(wrapper);
} catch (error) {
console.error('Mermaid rendering error:', error);
const errorDiv = document.createElement('div');
errorDiv.className = 'mermaid-error';
errorDiv.textContent = `Mermaid Error: ${(error as Error).message}`;
pre.replaceWith(errorDiv);
}
}
}
}
public setContent(content: string): void {
@@ -762,6 +914,27 @@ export class MarkdownEditor {
.table-of-contents li {
margin: 0.25em 0;
}
/* Mermaid diagrams */
.mermaid-diagram {
display: flex;
justify-content: center;
margin: 1.5em 0;
padding: 1em;
background: #f6f8fa;
border-radius: 6px;
}
.mermaid-diagram svg {
max-width: 100%;
height: auto;
}
.mermaid-error {
color: #cb2431;
background: #ffeef0;
padding: 1em;
border-radius: 6px;
font-family: monospace;
font-size: 0.9em;
}
</style>
</head>
<body>
src/js/utils/simple-mode-footer.ts
+1 -1
View File
@@ -19,7 +19,7 @@ if (__SIMPLE_MODE__) {
<span class="text-white font-bold text-lg">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version-simple">${APP_VERSION}</span>
src/js/utils/wasm-preloader.ts
+5 -2
View File
@@ -2,6 +2,7 @@ import { getLibreOfficeConverter } from './libreoffice-loader.js';
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
import loadGsWASM from '@bentopdf/gs-wasm';
import { setCachedGsModule } from './ghostscript-loader.js';
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
export enum PreloadStatus {
IDLE = 'idle',
@@ -56,7 +57,8 @@ async function preloadPyMuPDF(): Promise<void> {
console.log('[Preloader] Starting PyMuPDF preload...');
try {
pymupdfInstance = new PyMuPDF(import.meta.env.BASE_URL + 'pymupdf-wasm/');
const pymupdfBaseUrl = getWasmBaseUrl('pymupdf');
pymupdfInstance = new PyMuPDF(pymupdfBaseUrl);
await pymupdfInstance.load();
preloadState.pymupdf = PreloadStatus.READY;
console.log('[Preloader] PyMuPDF ready');
@@ -73,10 +75,11 @@ async function preloadGhostscript(): Promise<void> {
console.log('[Preloader] Starting Ghostscript WASM preload...');
try {
const gsBaseUrl = getWasmBaseUrl('ghostscript');
const gsModule = await loadGsWASM({
locateFile: (path: string) => {
if (path.endsWith('.wasm')) {
return import.meta.env.BASE_URL + 'ghostscript-wasm/gs.wasm';
return gsBaseUrl + 'gs.wasm';
}
return path;
},
src/pages/.backup-related-tools-fix/compress-pdf.html
+567
View File
@@ -0,0 +1,567 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Compress PDF Online Free - Reduce PDF Size Up to 90% | BentoPDF</title>
<meta name="title" content="Compress PDF Online Free - Reduce PDF Size Up to 90% | BentoPDF">
<meta name="description"
content="★ Compress PDF files for free - Reduce size by up to 90% ★ No signup required ★ Works offline in browser ★ Unlimited files ★ Privacy-first ★ Multiple compression levels">
<meta name="keywords"
content="compress pdf, reduce pdf size, pdf compressor, shrink pdf, pdf optimizer, free pdf compression, online pdf reducer">
<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/compress-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/compress-pdf">
<meta property="og:title" content="Compress PDF Free Online - Reduce PDF File Size | BentoPDF">
<meta property="og:description"
content="Free PDF compressor - reduce file size by up to 90%. No signup, works in browser, unlimited files, privacy-first.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-compress-pdf.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/compress-pdf">
<meta name="twitter:title" content="Compress PDF Free - Reduce PDF Size">
<meta name="twitter:description"
content="Free PDF compression tool. Reduce file size up to 90%, no signup, privacy-first.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-compress-pdf.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="Compress PDF">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/compress-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/compress-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/compress-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/compress-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:compressPdf.name">Compress PDF Free Online -
Reduce File Size Fast</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:compressPdf.subtitle">
Reduce file size by choosing the compression method that best suits your document. Supports multiple
PDFs.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select files</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">One or more PDF files</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf" multiple>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear All</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="compress-options" class="hidden mt-6 space-y-6">
<div>
<label for="compression-algorithm" class="block mb-2 text-sm font-medium text-gray-300">Compression
Algorithm</label>
<select id="compression-algorithm"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
<option value="condense"> Condense (Recommended)</option>
<option value="photon"> Photon (For Photo-Heavy PDFs)</option>
</select>
<div id="algorithm-info" class="mt-2 text-xs text-gray-400">
<p id="condense-info"><strong>Condense</strong> uses advanced compression: removes dead-weight,
optimizes images, subsets fonts. Best for most PDFs.</p>
<p id="photon-info" class="hidden"><strong>Photon</strong> converts pages to images. Use for
photo-heavy/scanned PDFs. <span class="text-yellow-500">⚠️ Warning: Text will become
non-selectable and links will stop working.</span></p>
</div>
</div>
<div>
<label for="compression-level" class="block mb-2 text-sm font-medium text-gray-300">Compression
Level</label>
<select id="compression-level"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500">
<option value="light">Light (Preserve Quality)</option>
<option value="balanced" selected>Balanced (Recommended)</option>
<option value="aggressive">Aggressive (Smaller Files)</option>
<option value="extreme">Extreme (Maximum Compression)</option>
</select>
</div>
<!-- Grayscale toggle - always visible -->
<div class="flex items-center gap-3 p-3 bg-gray-800 rounded-lg border border-gray-700">
<input type="checkbox" id="convert-to-grayscale"
class="w-5 h-5 rounded cursor-pointer flex-shrink-0">
<div>
<label for="convert-to-grayscale"
class="text-sm font-medium text-gray-300 cursor-pointer">Convert to Grayscale</label>
<p class="text-xs text-gray-500 mt-0.5">Reduces file size by removing color information</p>
</div>
</div>
<div>
<button id="toggle-custom-settings" type="button"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 text-sm font-medium">
<i data-lucide="settings" class="w-4 h-4"></i>
<span>Custom Settings</span>
<i data-lucide="chevron-down" id="custom-settings-chevron" class="w-4 h-4"></i>
</button>
<div id="custom-settings-panel"
class="hidden mt-4 p-4 bg-gray-900 rounded-lg border border-gray-700 space-y-4">
<div class="text-sm text-gray-400 mb-2">Fine-tune compression parameters:</div>
<div class="grid grid-cols-3 gap-4">
<div>
<label for="image-quality" class="block mb-1 text-xs font-medium text-gray-400">Output
Quality</label>
<input type="number" id="image-quality" value="75" min="1" max="100"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2 text-sm">
<p class="text-xs text-gray-500 mt-1">1-100%</p>
</div>
<div>
<label for="dpi-target" class="block mb-1 text-xs font-medium text-gray-400">Resize
Images To</label>
<input type="number" id="dpi-target" value="96" min="36" max="300"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2 text-sm">
<p class="text-xs text-gray-500 mt-1">DPI</p>
</div>
<div>
<label for="dpi-threshold" class="block mb-1 text-xs font-medium text-gray-400">Only
Process Above</label>
<input type="number" id="dpi-threshold" value="150" min="72" max="600"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2 text-sm">
<p class="text-xs text-gray-500 mt-1">DPI</p>
</div>
</div>
<div class="space-y-2">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="remove-metadata" checked class="w-4 h-4 rounded">
<span class="text-sm text-gray-300">Remove metadata</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="subset-fonts" checked class="w-4 h-4 rounded">
<span class="text-sm text-gray-300">Subset fonts (remove unused glyphs)</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="remove-thumbnails" checked class="w-4 h-4 rounded">
<span class="text-sm text-gray-300">Remove embedded thumbnails</span>
</label>
</div>
</div>
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">Compress PDF</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload PDFs</h3>
<p class="text-gray-400">Click or drag and drop one or more PDF files</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Choose Algorithm</h3>
<p class="text-gray-400">Select Condense (recommended) or Photon (for photo-heavy PDFs)</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Select Compression Level</h3>
<p class="text-gray-400">Pick Light, Balanced, Aggressive, or Extreme compression</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
4
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Customize & Compress</h3>
<p class="text-gray-400">Optionally enable grayscale or custom settings, then compress</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
5
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your compressed PDFs - up to 90% smaller</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/split-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/optimize-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Optimize Pdf</h3>
<p class="text-gray-400 text-sm">Free online optimize pdf tool</p>
</a>
<a href="/pdf-to-jpg"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Pdf To Jpg</h3>
<p class="text-gray-400 text-sm">Free online pdf to jpg tool</p>
</a>
<a href="/reduce-pdf-size"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Reduce Pdf Size</h3>
<p class="text-gray-400 text-sm">Free online reduce pdf size tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
What's the difference between Condense and Photon?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Condense removes dead-weight, optimizes images, and subsets fonts - best
for most PDFs. Photon converts pages to images - ideal for photo-heavy/scanned PDFs but makes text
non-selectable.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Which compression level should I use?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Balanced (recommended) offers great size reduction with minimal quality
loss. Use Light to preserve maximum quality, Aggressive for smaller files, or Extreme for maximum
compression.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are there file size limits?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No limits! Compress as many PDFs as you need, of any size, completely
free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/compress-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Compress PDF - BentoPDF",
"applicationCategory": "PDF Compression Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"ratingCount": "3421"
},
"featureList": [
"Reduce PDF file size",
"Multiple compression algorithms",
"Batch processing",
"No file size limits",
"Condense algorithm for smart compression",
"Photon algorithm for image-heavy PDFs"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Compress PDF Files Online Free",
"description": "Learn how to compress PDF files to reduce size while maintaining quality",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Upload Your PDF",
"text": "Click or drag and drop your PDF file into the upload area"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Choose Compression Level",
"text": "Select your desired compression level: Light, Balanced, Aggressive, or Extreme"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Select Algorithm",
"text": "Choose Condense (recommended) or Photon algorithm based on your PDF type"
},
{
"@type": "HowToStep",
"position": 4,
"name": "Compress and Download",
"text": "Click 'Compress PDF' and download your optimized 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": "Compress PDF",
"item": "https://www.bentopdf.com/compress-pdf"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/edit-pdf.html
+425
View File
@@ -0,0 +1,425 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Edit PDF Online Free - Edit PDF Tool | BentoPDF</title>
<meta name="title" content="Edit PDF Online Free - Edit PDF Tool | BentoPDF">
<meta name="description"
content="★ Edit PDF online free - Edit PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="edit pdf, pdf editor, modify pdf, change 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/edit-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/edit-pdf">
<meta property="og:title" content="Edit PDF Online Free - Edit PDF Tool | BentoPDF">
<meta property="og:description"
content="★ Edit PDF online free - Edit PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-edit-pdf.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/edit-pdf">
<meta name="twitter:title" content="Edit PDF Free">
<meta name="twitter:description"
content="★ Edit PDF online free - Edit PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secu">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-edit-pdf.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="Edit PDF">
<title>PDF Editor - BentoPDF</title>
<meta name="description"
content="Annotate, highlight, redact, comment, add shapes/images, search, and view PDFs. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/edit-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/edit-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/edit-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/edit-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-blue-400 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:pdfEditor.name">Edit PDF Free Online - Modify PDFs
Securely</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:pdfEditor.subtitle">
Annotate, highlight, redact, comment, add shapes/images, search, and view PDFs.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf" multiple>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="embed-pdf-wrapper" class="hidden mt-6">
<div id="embed-pdf-container" class="w-full h-[75vh] border border-gray-600 rounded-lg"></div>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/compress-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/merge-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/rotate-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
<a href="/delete-pages"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Delete Pages</h3>
<p class="text-gray-400 text-sm">Free online delete pages tool</p>
</a>
<a href="/add-watermark"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Add Watermark</h3>
<p class="text-gray-400 text-sm">Free online add watermark tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is edit pdf really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/edit-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Edit PDF - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"ratingCount": "4169"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to edit online",
"description": "Learn how to edit 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": "Edit PDF",
"item": "https://www.bentopdf.com/edit-pdf"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/excel-to-pdf.html
+438
View File
@@ -0,0 +1,438 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Excel to PDF Converter Free Online - Convert Files | BentoPDF</title>
<meta name="title" content="Excel to PDF Converter Free Online - Convert Files | BentoPDF">
<meta name="description"
content="★ Excel to PDF online free - Convert Excel to PDF PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="excel to pdf, xlsx to pdf, spreadsheet to 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/excel-to-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/excel-to-pdf">
<meta property="og:title" content="Excel to PDF Converter Free Online - Convert Files | BentoPDF">
<meta property="og:description"
content="★ Excel to PDF online free - Convert Excel to PDF PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-excel-to-pdf.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/excel-to-pdf">
<meta name="twitter:title" content="Excel to PDF Free">
<meta name="twitter:description"
content="★ Excel to PDF online free - Convert Excel to PDF PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in b">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-excel-to-pdf.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="Excel to PDF">
<title>Excel to PDF - Convert XLSX, XLS to PDF - BentoPDF</title>
<meta name="description"
content="Convert Excel spreadsheets (XLSX, XLS, ODS, CSV) to PDF format. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/excel-to-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/excel-to-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/excel-to-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/excel-to-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:excelToPdf.name">Excel to PDF Converter Free -
Convert XLSX Online</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:excelToPdf.subtitle">
Convert Excel spreadsheets (XLSX, XLS, ODS, CSV) to PDF format. Supports multiple files.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select files</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="tools:excelToPdf.acceptedFormats">XLSX, XLS, ODS, CSV
files</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept=".xls,.xlsx,.ods,.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.oasis.opendocument.spreadsheet,text/csv"
multiple>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear All</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="convert-options" class="hidden mt-6">
<button id="process-btn" class="btn-gradient w-full" data-i18n="tools:excelToPdf.convertButton">Convert
to PDF</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/pdf-to-excel"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Pdf To Excel</h3>
<p class="text-gray-400 text-sm">Free online pdf to excel tool</p>
</a>
<a href="/word-to-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Word To Pdf</h3>
<p class="text-gray-400 text-sm">Free online word to pdf tool</p>
</a>
<a href="/csv-to-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Csv To Pdf</h3>
<p class="text-gray-400 text-sm">Free online csv to pdf tool</p>
</a>
<a href="/merge-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is excel to pdf really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/excel-to-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Excel to PDF - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"ratingCount": "1436"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to convert Excel to PDF online",
"description": "Learn how to convert Excel to PDF 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": "Excel to PDF",
"item": "https://www.bentopdf.com/excel-to-pdf"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/merge-pdf.html
+497
View File
@@ -0,0 +1,497 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Merge PDF Files Free Online - Combine Multiple PDFs | BentoPDF</title>
<meta name="title" content="Merge PDF Files Free Online - Combine Multiple PDFs | BentoPDF">
<meta name="description"
content="★ Merge PDF files instantly - Combine multiple PDFs into one ★ Free forever ★ No file limits ★ Drag & drop pages ★ Privacy-first ★ Works in browser">
<meta name="keywords"
content="merge pdf, combine pdf, join pdf files, pdf merger, concatenate pdf, merge pdf free, combine pdf online">
<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/merge-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/merge-pdf">
<meta property="og:title" content="Merge PDF Free - Combine Multiple PDF Files | BentoPDF">
<meta property="og:description"
content="Free PDF merger. Combine multiple PDFs into one document. No signup, unlimited files, privacy-first.">
<meta property="og:image" content="https://www.bentopdf.com/images/og-merge-pdf.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/merge-pdf">
<meta name="twitter:title" content="Merge PDF Free - Combine PDFs">
<meta name="twitter:description" content="Free PDF merger. Combine multiple PDFs, no signup, privacy-first.">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-merge-pdf.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="Merge PDF">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/merge-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/merge-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/merge-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/merge-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:mergePdf.name">Merge PDF Files Free - Combine PDFs
Instantly</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:mergePdf.subtitle">
Combine whole files, or select specific pages to merge into a new document.
</p>
<!-- Drop Zone for Main PDF Upload -->
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="upload.pdfOrImages">PDFs or Images</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" multiple
accept="application/pdf">
</div>
<!-- Control buttons for multi-file uploads -->
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear All</span>
</button>
</div>
<div id="merge-options" class="hidden mt-6">
<div class="flex gap-2 p-1 rounded-lg bg-gray-900 border border-gray-700 mb-4">
<button id="file-mode-btn" class="flex-1 btn bg-indigo-600 text-white font-semibold py-2 rounded-md">File
Mode</button>
<button id="page-mode-btn" class="flex-1 btn text-gray-300 font-semibold py-2 rounded-md">Page Mode</button>
</div>
<div id="file-mode-panel">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-3">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Click and drag the <i data-lucide="grip-vertical" class="inline-block w-3 h-3"></i> icon to change the
order of the files.</li>
<li>In the "Pages" box for each file, you can specify ranges (e.g., "1-3, 5") to merge only those pages.
</li>
<li>Leave the "Pages" box blank to include all pages from that file.</li>
</ul>
</div>
<ul id="file-list" class="space-y-2"></ul>
</div>
<div id="page-mode-panel" class="hidden">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-3">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>All pages from your uploaded PDFs are shown below.</li>
<li>Simply drag and drop the individual page thumbnails to create the exact order you want for your new
file.</li>
</ul>
</div>
<div id="page-merge-preview"
class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4 p-4 bg-gray-900 rounded-lg border border-gray-700 min-h-[200px]">
</div>
</div>
<button id="process-btn" class="btn-gradient w-full mt-6">Merge PDFs</button>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload PDFs</h3>
<p class="text-gray-400">Select or drag and drop multiple PDF files you want to merge</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Arrange Order</h3>
<p class="text-gray-400">Drag files up or down to reorder them in your preferred sequence</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Merge Files</h3>
<p class="text-gray-400">Click the merge button to combine all PDFs into a single document</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
4
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your merged PDF - all pages combined in the order you chose</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/split-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/organize-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Organize Pdf</h3>
<p class="text-gray-400 text-sm">Free online organize pdf tool</p>
</a>
<a href="/compress-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/rotate-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
<a href="/delete-pages"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Delete Pages</h3>
<p class="text-gray-400 text-sm">Free online delete pages tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
How many PDFs can I merge at once?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Unlimited! Merge as many PDF files as you need in a single operation. No
restrictions on file count or total size.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Will merging reduce PDF quality?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! BentoPDF preserves the original quality of all PDFs when merging. Your
documents remain crisp and clear with no quality loss.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Can I reorder pages after selecting files?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! Simply drag and drop files to arrange them in any order before clicking the
merge button.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/merge-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Merge PDF - BentoPDF",
"applicationCategory": "PDF Merger Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "4156"
},
"featureList": [
"Merge multiple PDFs into one",
"Drag and drop to reorder files",
"Select specific pages to merge",
"Page-level merging",
"Batch PDF combining",
"No file limits"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Merge PDF Files Online",
"description": "Learn how to combine multiple PDF files into a single document",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Upload PDF Files",
"text": "Click or drag and drop multiple PDF files"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Arrange Files",
"text": "Drag files to reorder them or select specific pages to include"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Merge PDFs",
"text": "Click 'Merge PDFs' to combine all files into one document"
},
{
"@type": "HowToStep",
"position": 4,
"name": "Download",
"text": "Download your merged PDF 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": "Merge PDF",
"item": "https://www.bentopdf.com/merge-pdf"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/organize-pdf.html
+380
View File
@@ -0,0 +1,380 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Organize PDF Online Free - Organize PDF Tool | BentoPDF</title>
<meta name="title" content="Organize PDF Online Free - Organize PDF Tool | BentoPDF">
<meta name="description"
content="★ Organize PDF online free - Organize PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="organize pdf, reorder pages, arrange 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/organize-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/organize-pdf">
<meta property="og:title" content="Organize PDF Online Free - Organize PDF Tool | BentoPDF">
<meta property="og:description"
content="★ Organize PDF online free - Organize PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-organize-pdf.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/organize-pdf">
<meta name="twitter:title" content="Organize PDF Free">
<meta name="twitter:description"
content="★ Organize PDF online free - Organize PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fas">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-organize-pdf.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="Organize PDF">
<title>Duplicate and Organize PDF Pages - BentoPDF</title>
<meta name="description" content="Reorder, duplicate, and organize PDF pages. Free and secure.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/organize-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/organize-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/organize-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/organize-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2"><a href="/">BentoPDF</a></span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer">Back to Tools</span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:duplicateOrganize.name">Organize PDF Pages Free -
Reorder PDFs Online</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:duplicateOrganize.subtitle">
Drag pages to reorder them. Use the <i data-lucide="copy-plus"
class="inline-block w-4 h-4 mx-1 align-text-bottom text-green-500"></i> icon to duplicate a page or
the <i data-lucide="x-circle" class="inline-block w-4 h-4 mx-1 align-text-bottom text-red-400"></i> icon
to
delete it.
</p>
<!-- Drop Zone -->
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">PDF Documents</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<!-- File Display -->
<div id="file-display-area" class="mt-4 space-y-2"></div>
<!-- Page Grid (shown after file upload) -->
<div id="page-grid" class="hidden grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 my-6"></div>
<button id="process-btn" class="hidden btn-gradient w-full mt-6">Save Changes</button>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg"
data-i18n="alert.ok" data-i18n="alert.ok">OK</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/split-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/rotate-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
<a href="/delete-pages"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Delete Pages</h3>
<p class="text-gray-400 text-sm">Free online delete pages tool</p>
</a>
<a href="/extract-pages"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Extract Pages</h3>
<p class="text-gray-400 text-sm">Free online extract pages tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is organize pdf really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/organize-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Organize PDF - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.6",
"ratingCount": "3604"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to organize online",
"description": "Learn how to organize 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": "Organize PDF",
"item": "https://www.bentopdf.com/organize-pdf"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/pdf-to-docx.html
+433
View File
@@ -0,0 +1,433 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>PDF to Word Converter Free Online - Convert Files | BentoPDF</title>
<meta name="title" content="PDF to Word Converter Free Online - Convert Files | BentoPDF">
<meta name="description"
content="★ PDF to Word online free - Convert PDF to Word PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="pdf to word, pdf to docx, convert pdf to word">
<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-to-docx">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/pdf-to-docx">
<meta property="og:title" content="PDF to Word Converter Free Online - Convert Files | BentoPDF">
<meta property="og:description"
content="★ PDF to Word online free - Convert PDF to Word PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-pdf-to-docx.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-to-docx">
<meta name="twitter:title" content="PDF to Word Free">
<meta name="twitter:description"
content="★ PDF to Word online free - Convert PDF to Word PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in bro">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-pdf-to-docx.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 to Word">
<title>PDF to DOCX - BentoPDF</title>
<meta name="description"
content="Convert PDF files to editable Word documents (DOCX). Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/pdf-to-docx.html" />
<link rel="alternate" hreflang="x-default" href="/en/pdf-to-docx.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools">Back to Tools</span>
</button>
<h1 class="text-2xl font-bold text-white mb-2">PDF to Word Converter Free - Convert PDF to DOCX</h1>
<p class="text-gray-400 mb-6">
Convert PDF files to editable Word documents. Preserves text, formatting, and layout.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select files</span>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500">One or more PDF files</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf" multiple>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear All</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="convert-options" class="hidden mt-6 space-y-6">
<button id="process-btn" class="btn-gradient w-full mt-4">Convert to DOCX</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/word-to-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Word To Pdf</h3>
<p class="text-gray-400 text-sm">Free online word to pdf tool</p>
</a>
<a href="/pdf-to-text"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Pdf To Text</h3>
<p class="text-gray-400 text-sm">Free online pdf to text tool</p>
</a>
<a href="/pdf-to-excel"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Pdf To Excel</h3>
<p class="text-gray-400 text-sm">Free online pdf to excel tool</p>
</a>
<a href="/edit-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/extract-pages"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Extract Pages</h3>
<p class="text-gray-400 text-sm">Free online extract pages tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is pdf to docx really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/pdf-to-docx-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "PDF to Word - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.6",
"ratingCount": "4973"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to convert PDF to Word online",
"description": "Learn how to convert PDF to Word 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 to Word",
"item": "https://www.bentopdf.com/pdf-to-docx"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/pdf-to-jpg.html
+432
View File
@@ -0,0 +1,432 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>PDF to JPG Converter Free Online - Convert Files | BentoPDF</title>
<meta name="title" content="PDF to JPG Converter Free Online - Convert Files | BentoPDF">
<meta name="description"
content="★ PDF to JPG online free - Convert PDF to JPG PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="pdf to jpg, pdf to image, pdf to jpeg, convert pdf to pictures">
<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-to-jpg">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/pdf-to-jpg">
<meta property="og:title" content="PDF to JPG Converter Free Online - Convert Files | BentoPDF">
<meta property="og:description"
content="★ PDF to JPG online free - Convert PDF to JPG PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-pdf-to-jpg.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-to-jpg">
<meta name="twitter:title" content="PDF to JPG Free">
<meta name="twitter:description"
content="★ PDF to JPG online free - Convert PDF to JPG PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in brows">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-pdf-to-jpg.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 to JPG">
<title>PDF to JPG - BentoPDF</title>
<meta name="description" content="Convert PDF pages to JPG images. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/pdf-to-jpg.html" />
<link rel="alternate" hreflang="de" href="/de/pdf-to-jpg.html" />
<link rel="alternate" hreflang="vi" href="/vi/pdf-to-jpg.html" />
<link rel="alternate" hreflang="x-default" href="/en/pdf-to-jpg.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:pdfToJpg.name">PDF to JPG Converter Free - Convert
PDF to Images</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:pdfToJpg.subtitle">
Convert each page of a PDF file into a high-quality JPG image.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">A single PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="options-panel" class="hidden mt-6">
<div class="mb-4">
<label for="jpg-quality" class="block mb-2 text-sm font-medium text-gray-300">Image Quality</label>
<div class="flex items-center gap-4">
<input type="range" id="jpg-quality" min="0.1" max="1.0" step="0.01" value="0.9" class="flex-1">
<span id="jpg-quality-value" class="text-white font-medium w-16 text-right">90%</span>
</div>
<p class="mt-1 text-xs text-gray-400">Higher quality = larger file size</p>
</div>
<button id="process-btn" class="btn-gradient w-full">Download All as ZIP</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload PDF</h3>
<p class="text-gray-400">Select the PDF file you want to convert to images</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Choose Quality</h3>
<p class="text-gray-400">Select image quality (Low, Medium, High, Maximum)</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Select Pages</h3>
<p class="text-gray-400">Convert all pages or choose specific pages to extract</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
4
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download Images</h3>
<p class="text-gray-400">Save JPG images individually or as a ZIP archive</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/pdf-to-png"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Pdf To Png</h3>
<p class="text-gray-400 text-sm">Free online pdf to png tool</p>
</a>
<a href="/compress-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/pdf-to-webp"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Pdf To Webp</h3>
<p class="text-gray-400 text-sm">Free online pdf to webp tool</p>
</a>
<a href="/extract-images"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Extract Images</h3>
<p class="text-gray-400 text-sm">Free online extract images tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
What quality should I choose?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Use High or Maximum for print-quality images, Medium for web use, or Low to save
disk space. Higher quality produces larger file sizes.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Can I convert specific pages only?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! You can choose to convert all pages or select specific pages you want as JPG
images.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are the JPG files compressed?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes, JPG is a compressed format. You control the quality level - higher quality
means less compression and larger files.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/pdf-to-jpg-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "PDF to JPG - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"ratingCount": "3191"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to convert PDF to JPG online",
"description": "Learn how to convert PDF to JPG 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 to JPG",
"item": "https://www.bentopdf.com/pdf-to-jpg"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/rotate-pdf.html
+424
View File
@@ -0,0 +1,424 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Rotate PDF Online Free - Rotate PDF Tool | BentoPDF</title>
<meta name="title" content="Rotate PDF Online Free - Rotate PDF Tool | BentoPDF">
<meta name="description"
content="★ Rotate PDF online free - Rotate PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="rotate pdf, turn pdf, flip pdf pages">
<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/rotate-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/rotate-pdf">
<meta property="og:title" content="Rotate PDF Online Free - Rotate PDF Tool | BentoPDF">
<meta property="og:description"
content="★ Rotate PDF online free - Rotate PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-rotate-pdf.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/rotate-pdf">
<meta name="twitter:title" content="Rotate PDF Free">
<meta name="twitter:description"
content="★ Rotate PDF online free - Rotate PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & ">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-rotate-pdf.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="Rotate PDF">
<title>Rotate PDF - BentoPDF</title>
<meta name="description"
content="Rotate PDF pages by 90, 180, or 270 degrees. Rotate individual pages or all pages at once. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="alternate" hreflang="en" href="/en/rotate-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/rotate-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/rotate-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/rotate-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-4xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:rotatePdf.name">Rotate PDF Pages Free - Turn PDFs
Online</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:rotatePdf.subtitle">
Rotate individual pages or all pages at once. Click on page thumbnails to rotate them.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">A single PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="tool-options" class="hidden mt-6">
<!-- Batch Actions -->
<div class="bg-gray-900 rounded-lg border border-gray-700 p-4 mb-4">
<h3 class="text-center text-sm font-semibold text-white mb-4 uppercase tracking-wider">Batch Actions
</h3>
<div class="flex justify-center items-center">
<!-- Rotate by 90 Degrees -->
<div class="flex gap-2">
<button id="rotate-all-left"
class="flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm border border-gray-600">
<i data-lucide="rotate-ccw" class="w-4 h-4"></i> Left
</button>
<button id="rotate-all-right"
class="flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm border border-gray-600">
<i data-lucide="rotate-cw" class="w-4 h-4"></i> Right
</button>
</div>
</div>
</div>
<!-- Page Thumbnails -->
<div id="page-thumbnails" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-4">
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">Apply Rotations</button>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
</div>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/split-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/organize-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Organize Pdf</h3>
<p class="text-gray-400 text-sm">Free online organize pdf tool</p>
</a>
<a href="/compress-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/delete-pages"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Delete Pages</h3>
<p class="text-gray-400 text-sm">Free online delete pages tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is rotate pdf really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram"><i data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/rotate-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Rotate PDF - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "4745"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to rotate online",
"description": "Learn how to rotate 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": "Rotate PDF",
"item": "https://www.bentopdf.com/rotate-pdf"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/split-pdf.html
+562
View File
@@ -0,0 +1,562 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Split PDF Online Free - Split PDF Tool | BentoPDF</title>
<meta name="title" content="Split PDF Online Free - Split PDF Tool | BentoPDF">
<meta name="description"
content="★ Split PDF online free - Split PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="split pdf, divide pdf, extract pages, separate 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/split-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/split-pdf">
<meta property="og:title" content="Split PDF Online Free - Split PDF Tool | BentoPDF">
<meta property="og:description"
content="★ Split PDF online free - Split PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-split-pdf.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/split-pdf">
<meta name="twitter:title" content="Split PDF Free">
<meta name="twitter:description"
content="★ Split PDF online free - Split PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & se">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-split-pdf.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="Split PDF">
<title>Split PDF - BentoPDF</title>
<meta name="description"
content="Extract pages from a PDF using various methods. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/split-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/split-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/split-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/split-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:splitPdf.name">Split PDF Online Free -
Extract Pages Easily</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:splitPdf.subtitle">
Extract pages from a PDF using various methods.
</p>
<!-- Drop Zone for Main PDF Upload -->
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold"
data-i18n="upload.clickToSelect">Click to select a file</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">A single PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="split-options" class="hidden mt-6">
<label for="split-mode" class="block mb-2 text-sm font-medium text-gray-300">Split Mode</label>
<select id="split-mode"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 mb-4">
<option value="range">Extract by Page Range (Default)</option>
<option value="even-odd">Split by Even/Odd Pages</option>
<option value="all">Split All Pages into Separate Files</option>
<option value="visual">Select Pages Visually</option>
<option value="bookmarks">Split by Bookmarks</option>
<option value="n-times">Split N Times</option>
</select>
<div id="range-panel">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-3">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Enter page numbers separated by commas (e.g., 2, 8, 14).</li>
<li>Enter page ranges using a hyphen (e.g., 5-10).</li>
<li>Combine them for complex selections (e.g., 1-3, 7, 12-15).</li>
</ul>
</div>
<label for="page-range" class="block mb-2 text-sm font-medium text-gray-300">Page Range</label>
<input type="text" id="page-range"
class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5"
placeholder="e.g. 1-5, 8, 11-13">
</div>
<div id="even-odd-panel" class="hidden">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-3">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Extract all even pages (2, 4, 6...) or all odd pages (1, 3, 5...) into a new PDF.</li>
</ul>
</div>
<div class="flex items-center mb-4">
<input id="split-even" type="radio" value="even" name="even-odd-choice"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-600 ring-offset-gray-800 focus:ring-2">
<label for="split-even" class="ml-2 text-sm font-medium text-gray-300">Even Pages</label>
</div>
<div class="flex items-center">
<input id="split-odd" type="radio" value="odd" name="even-odd-choice"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-600 ring-offset-gray-800 focus:ring-2">
<label for="split-odd" class="ml-2 text-sm font-medium text-gray-300">Odd Pages</label>
</div>
</div>
<div id="all-pages-panel" class="hidden">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-3">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Every single page of the PDF will be saved as a separate PDF file.</li>
<li>The result will be downloaded as a ZIP file containing all the pages.</li>
</ul>
</div>
</div>
<div id="visual-select-panel" class="hidden">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-3">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Click on the page thumbnails below to select the pages you want to extract.</li>
<li>Selected pages will be highlighted.</li>
</ul>
</div>
<div id="page-selector-grid"
class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 max-h-96 overflow-y-auto p-2 border border-gray-700 rounded-lg">
<!-- Thumbnails will be rendered here -->
</div>
</div>
<div id="bookmarks-panel" class="hidden">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-3">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Split the PDF based on its bookmarks (outline).</li>
<li>Select the bookmark level to split at.</li>
</ul>
</div>
<label for="bookmark-level" class="block mb-2 text-sm font-medium text-gray-300">Bookmark
Level</label>
<select id="bookmark-level"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 mb-4">
<option value="all" selected>All Levels</option>
<option value="0">Level 0 (Top Level Only)</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
</select>
</div>
<div id="n-times-panel" class="hidden">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-3">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Split the PDF into multiple files, each containing N pages.</li>
</ul>
</div>
<label for="split-n-value" class="block mb-2 text-sm font-medium text-gray-300">Pages per file
(N)</label>
<input type="number" id="split-n-value" min="1" value="5"
class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5">
<p id="n-times-warning" class="mt-2 text-sm text-yellow-400 hidden">
<i data-lucide="alert-triangle" class="inline-block w-4 h-4 mr-1"></i>
<span id="n-times-warning-text"></span>
</p>
</div>
<div id="zip-option-wrapper" class="mt-4 flex items-center">
<input id="download-as-zip" type="checkbox"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-600 ring-offset-gray-800 focus:ring-2">
<label for="download-as-zip" class="ml-2 text-sm font-medium text-gray-300">Download as ZIP (for
multiple files)</label>
</div>
<button id="process-btn" class="btn-gradient w-full mt-6">Split PDF</button>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload PDF</h3>
<p class="text-gray-400">Select the PDF file you want to split or extract pages from</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Choose Split Method</h3>
<p class="text-gray-400">Select specific pages, page ranges, or split into individual pages</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Preview & Select</h3>
<p class="text-gray-400">View page thumbnails and select exactly which pages you want</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
4
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Split & Download</h3>
<p class="text-gray-400">Download extracted pages as separate PDFs or as a ZIP file</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/extract-pages"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Extract Pages</h3>
<p class="text-gray-400 text-sm">Free online extract pages tool</p>
</a>
<a href="/organize-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Organize Pdf</h3>
<p class="text-gray-400 text-sm">Free online organize pdf tool</p>
</a>
<a href="/compress-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/delete-pages"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Delete Pages</h3>
<p class="text-gray-400 text-sm">Free online delete pages tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Can I extract specific page ranges?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! You can extract any specific pages or page ranges from your PDF.
Select exactly which pages you need or split into individual files.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Will split PDFs lose quality?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Split PDFs maintain the exact same quality as the original document.
No compression or quality loss occurs.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Can I split multiple PDFs at once?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes, process multiple PDFs in batches for efficient document management.
</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/split-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Split PDF - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "3584"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to split online",
"description": "Learn how to split 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": "Split PDF",
"item": "https://www.bentopdf.com/split-pdf"
}
]
}
</script>
</body>
</html>
src/pages/.backup-related-tools-fix/word-to-pdf.html
+456
View File
@@ -0,0 +1,456 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Word to PDF Converter Free Online - Convert Files | BentoPDF</title>
<meta name="title" content="Word to PDF Converter Free Online - Convert Files | BentoPDF">
<meta name="description"
content="★ Word to PDF online free - Convert Word to PDF PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="word to pdf, docx to pdf, convert word, doc to 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/word-to-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/word-to-pdf">
<meta property="og:title" content="Word to PDF Converter Free Online - Convert Files | BentoPDF">
<meta property="og:description"
content="★ Word to PDF online free - Convert Word to PDF PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-word-to-pdf.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/word-to-pdf">
<meta name="twitter:title" content="Word to PDF Free">
<meta name="twitter:description"
content="★ Word to PDF online free - Convert Word to PDF PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in bro">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-word-to-pdf.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="Word to PDF">
<title>Word to PDF - Convert DOCX, DOC to PDF - BentoPDF</title>
<meta name="description"
content="Convert Word documents (DOCX, DOC, ODT, RTF) to PDF format. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/word-to-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/word-to-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/word-to-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/word-to-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>
<body class="antialiased bg-gray-900">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:wordToPdf.name">Word to PDF Converter Free Online
- Convert DOCX Fast</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:wordToPdf.subtitle">
Convert Word documents (DOCX, DOC, ODT, RTF) to PDF format. Supports multiple files.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select files</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="tools:wordToPdf.acceptedFormats">DOCX, DOC, ODT, RTF
files</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept=".doc,.docx,.odt,.rtf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.oasis.opendocument.text,text/rtf,application/rtf"
multiple>
</div>
<div class="flex items-center gap-2 text-gray-500 text-xs mt-4">
<i data-lucide="info" class="w-4 h-4 flex-shrink-0"></i>
<p data-i18n="tools.firstLoadNotice">
First load takes a moment as we download our conversion engine. After that, all loads will be
instant.
</p>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear All</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="convert-options" class="hidden mt-6">
<button id="process-btn" class="btn-gradient w-full" data-i18n="tools:wordToPdf.convertButton">Convert
to PDF</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload Word Files</h3>
<p class="text-gray-400">Select or drag DOCX or DOC files you want to convert</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Auto Convert</h3>
<p class="text-gray-400">Conversion starts automatically, processing in your browser</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Preview Results</h3>
<p class="text-gray-400">See your converted PDF with preserved formatting</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
4
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download PDFs</h3>
<p class="text-gray-400">Save your PDF files - formatting perfectly preserved</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/pdf-to-docx"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Pdf To Docx</h3>
<p class="text-gray-400 text-sm">Free online pdf to docx tool</p>
</a>
<a href="/excel-to-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Excel To Pdf</h3>
<p class="text-gray-400 text-sm">Free online excel to pdf tool</p>
</a>
<a href="/powerpoint-to-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Powerpoint To Pdf</h3>
<p class="text-gray-400 text-sm">Free online powerpoint to pdf tool</p>
</a>
<a href="/txt-to-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Txt To Pdf</h3>
<p class="text-gray-400 text-sm">Free online txt to pdf tool</p>
</a>
<a href="/merge-pdf"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Does it work with both .doc and .docx files?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF supports both older .doc and newer .docx Microsoft Word formats.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Will formatting be preserved?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! Fonts, images, tables, headers, footers, and all formatting are preserved
exactly as they appear in Word.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Can I convert password-protected Word files?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">You'll need to unlock password-protected files first before converting them to
PDF.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/word-to-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Word to PDF - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "4950"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to convert Word to PDF online",
"description": "Learn how to convert Word to PDF 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": "Word to PDF",
"item": "https://www.bentopdf.com/word-to-pdf"
}
]
}
</script>
</body>
</html>
src/pages/add-attachments.html
+430 -215
View File
@@ -2,235 +2,450 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Attachments to PDF - BentoPDF</title>
<meta name="description"
content="Add file attachments to your PDF documents. Embed files at document or page level. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="alternate" hreflang="en" href="/en/add-attachments.html" />
<link rel="alternate" hreflang="de" href="/de/add-attachments.html" />
<link rel="alternate" hreflang="vi" href="/vi/add-attachments.html" />
<link rel="alternate" hreflang="x-default" href="/en/add-attachments.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Add Attachments Online Free - Add Attachments Tool | BentoPDF</title>
<meta name="title" content="Add Attachments Online Free - Add Attachments Tool | BentoPDF">
<meta name="description"
content="★ Add Attachments online free - Add attachments PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="add attachments, add attachments, 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/add-attachments">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/add-attachments">
<meta property="og:title" content="Add Attachments Online Free - Add Attachments Tool | BentoPDF">
<meta property="og:description"
content="★ Add Attachments online free - Add attachments PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-add-attachments.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/add-attachments">
<meta name="twitter:title" content="Add Attachments Free">
<meta name="twitter:description"
content="★ Add Attachments online free - Add attachments PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in bro">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-add-attachments.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="Add Attachments">
<title>Add Attachments to PDF - BentoPDF</title>
<meta name="description"
content="Add file attachments to your PDF documents. Embed files at document or page level. Free, secure, and runs entirely in your browser.">
<link rel="alternate" hreflang="en" href="/en/add-attachments.html" />
<link rel="alternate" hreflang="de" href="/de/add-attachments.html" />
<link rel="alternate" hreflang="vi" href="/vi/add-attachments.html" />
<link rel="alternate" hreflang="x-default" href="/en/add-attachments.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:addAttachments.name">Add Attachments to PDF
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:addAttachments.subtitle">
Upload a PDF, then add files to embed as attachments.
</p>
<!-- PDF Upload -->
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select PDF</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<!-- Attachment Options (hidden until PDF loaded) -->
<div id="tool-options" class="hidden mt-6">
<h2 class="text-lg font-semibold text-white mb-3">Select Files to Attach</h2>
<div id="attachment-drop-zone"
class="relative flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300 mb-4">
<div class="flex flex-col items-center justify-center">
<i data-lucide="paperclip" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-sm text-gray-400">Click or drop files to attach</p>
<p class="text-xs text-gray-500">Any file type</p>
</div>
<input id="attachment-files-input" type="file"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" multiple>
</div>
<div id="attachment-file-list" class="space-y-2"></div>
<!-- Attachment Level Options (hidden until attachments added) -->
<div id="attachment-level-options" class="hidden mt-4">
<h3 class="text-md font-medium text-white mb-2">Attachment Level</h3>
<div class="flex gap-4 mb-3">
<label class="flex items-center gap-2 text-gray-300">
<input type="radio" name="attachment-level" value="document" checked
class="accent-indigo-500">
<span>Document Level</span>
</label>
<label class="flex items-center gap-2 text-gray-300">
<input type="radio" name="attachment-level" value="page" class="accent-indigo-500">
<span>Page Level</span>
</label>
</div>
<div id="page-range-wrapper" class="hidden mb-4">
<label for="attachment-page-range" class="text-sm text-gray-400 block mb-1">
Page Range (e.g., 1,3,5-7) - Total: <span id="attachment-total-pages">0</span> pages
</label>
<input type="text" id="attachment-page-range" placeholder="1,3,5-7"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg px-3 py-2 text-sm">
</div>
</div>
<button id="process-btn" class="hidden btn-gradient w-full mt-4">Add Attachments</button>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:addAttachments.name">Add Attachments Free Online -
Fast & Secure</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:addAttachments.subtitle">
Upload a PDF, then add files to embed as attachments.
</p>
<!-- PDF Upload -->
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select PDF</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<!-- Attachment Options (hidden until PDF loaded) -->
<div id="tool-options" class="hidden mt-6">
<h2 class="text-lg font-semibold text-white mb-3">Select Files to Attach</h2>
<div id="attachment-drop-zone"
class="relative flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300 mb-4">
<div class="flex flex-col items-center justify-center">
<i data-lucide="paperclip" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-sm text-gray-400">Click or drop files to attach</p>
<p class="text-xs text-gray-500">Any file type</p>
</div>
<input id="attachment-files-input" type="file"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" multiple>
</div>
<div id="attachment-file-list" class="space-y-2"></div>
<!-- Attachment Level Options (hidden until attachments added) -->
<div id="attachment-level-options" class="hidden mt-4">
<h3 class="text-md font-medium text-white mb-2">Attachment Level</h3>
<div class="flex gap-4 mb-3">
<label class="flex items-center gap-2 text-gray-300">
<input type="radio" name="attachment-level" value="document" checked class="accent-indigo-500">
<span>Document Level</span>
</label>
<label class="flex items-center gap-2 text-gray-300">
<input type="radio" name="attachment-level" value="page" class="accent-indigo-500">
<span>Page Level</span>
</label>
</div>
<div id="page-range-wrapper" class="hidden mb-4">
<label for="attachment-page-range" class="text-sm text-gray-400 block mb-1">
Page Range (e.g., 1,3,5-7) - Total: <span id="attachment-total-pages">0</span> pages
</label>
<input type="text" id="attachment-page-range" placeholder="1,3,5-7"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg px-3 py-2 text-sm">
</div>
</div>
<button id="process-btn" class="hidden btn-gradient w-full mt-4">Add Attachments</button>
</div>
</div>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2025 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram"><i data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
</div>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/add-attachments-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<script type="module" src="/src/js/main.ts"></script>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is add attachments really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram"><i data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/add-attachments-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Add Attachments - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"ratingCount": "4068"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to add attachments online",
"description": "Learn how to add attachments 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": "Add Attachments",
"item": "https://www.bentopdf.com/add-attachments"
}
]
}
</script>
</body>
</html>
src/pages/add-blank-page.html
+424 -208
View File
@@ -2,230 +2,446 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Blank Page - BentoPDF</title>
<meta name="description"
content="Insert blank pages anywhere in your PDF document. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="alternate" hreflang="en" href="/en/add-blank-page.html" />
<link rel="alternate" hreflang="de" href="/de/add-blank-page.html" />
<link rel="alternate" hreflang="vi" href="/vi/add-blank-page.html" />
<link rel="alternate" hreflang="x-default" href="/en/add-blank-page.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Add Blank Page Online Free - Add Blank Page Tool | BentoPDF</title>
<meta name="title" content="Add Blank Page Online Free - Add Blank Page Tool | BentoPDF">
<meta name="description"
content="★ Add Blank Page online free - Add blank page PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="add blank page, add blank page, 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/add-blank-page">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/add-blank-page">
<meta property="og:title" content="Add Blank Page Online Free - Add Blank Page Tool | BentoPDF">
<meta property="og:description"
content="★ Add Blank Page online free - Add blank page PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-add-blank-page.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/add-blank-page">
<meta name="twitter:title" content="Add Blank Page Free">
<meta name="twitter:description"
content="★ Add Blank Page online free - Add blank page PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in brows">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-add-blank-page.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="Add Blank Page">
<title>Add Blank Page - BentoPDF</title>
<meta name="description"
content="Insert blank pages anywhere in your PDF document. Free, secure, and runs entirely in your browser.">
<link rel="alternate" hreflang="en" href="/en/add-blank-page.html" />
<link rel="alternate" hreflang="de" href="/de/add-blank-page.html" />
<link rel="alternate" hreflang="vi" href="/vi/add-blank-page.html" />
<link rel="alternate" hreflang="x-default" href="/en/add-blank-page.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:addBlankPage.name">Add Blank Page</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:addBlankPage.subtitle">
Insert one or more blank pages at any position in your PDF document.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold"
data-i18n="upload.clickToSelect">Click to select a file</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">A single PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="tool-options" class="hidden mt-6">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-4">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Specify the position where blank pages should be inserted.</li>
<li>Position 0 inserts at the beginning, position equal to page count inserts at the end.</li>
<li>Blank pages will match the size of the first page in your document.</li>
</ul>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label for="page-position" class="block mb-2 text-sm font-medium text-gray-300">Insert after
page</label>
<input type="number" id="page-position" min="0" value="0"
class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5"
placeholder="0">
<p id="page-position-hint" class="text-xs text-gray-500 mt-1">Enter 0 to insert at the
beginning.</p>
</div>
<div>
<label for="page-count" class="block mb-2 text-sm font-medium text-gray-300">Number of blank
pages</label>
<input type="number" id="page-count" min="1" value="1"
class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5"
placeholder="1">
</div>
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">Add Blank Pages</button>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:addBlankPage.name">Add Blank Page Free Online -
Fast & Secure</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:addBlankPage.subtitle">
Insert one or more blank pages at any position in your PDF document.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">A single PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="tool-options" class="hidden mt-6">
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-4">
<p class="text-sm text-gray-300"><strong class="text-white">How it works:</strong></p>
<ul class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1">
<li>Specify the position where blank pages should be inserted.</li>
<li>Position 0 inserts at the beginning, position equal to page count inserts at the end.</li>
<li>Blank pages will match the size of the first page in your document.</li>
</ul>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label for="page-position" class="block mb-2 text-sm font-medium text-gray-300">Insert after
page</label>
<input type="number" id="page-position" min="0" value="0"
class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5"
placeholder="0">
<p id="page-position-hint" class="text-xs text-gray-500 mt-1">Enter 0 to insert at the
beginning.</p>
</div>
<div>
<label for="page-count" class="block mb-2 text-sm font-medium text-gray-300">Number of blank
pages</label>
<input type="number" id="page-count" min="1" value="1"
class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5"
placeholder="1">
</div>
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">Add Blank Pages</button>
</div>
</div>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2025 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
</div>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/add-blank-page-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is add blank page really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/add-blank-page-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Add Blank Page - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "2632"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to add blank page online",
"description": "Learn how to add blank page 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": "Add Blank Page",
"item": "https://www.bentopdf.com/add-blank-page"
}
]
}
</script>
</body>
</html>
src/pages/add-stamps.html
+226 -6
View File
@@ -4,16 +4,65 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Add Stamps Online Free - Add Stamps Tool | BentoPDF</title>
<meta name="title" content="Add Stamps Online Free - Add Stamps Tool | BentoPDF">
<meta name="description"
content="★ Add Stamps online free - Add stamps PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="add stamps, add stamps, 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/add-stamps">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/add-stamps">
<meta property="og:title" content="Add Stamps Online Free - Add Stamps Tool | BentoPDF">
<meta property="og:description"
content="★ Add Stamps online free - Add stamps PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-add-stamps.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/add-stamps">
<meta name="twitter:title" content="Add Stamps Free">
<meta name="twitter:description"
content="★ Add Stamps online free - Add stamps PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fas">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-add-stamps.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="Add Stamps">
<title>Add Stamps - BentoPDF</title>
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="alternate" hreflang="en" href="/en/add-stamps.html" />
<link rel="alternate" hreflang="de" href="/de/add-stamps.html" />
<link rel="alternate" hreflang="vi" href="/vi/add-stamps.html" />
<link rel="alternate" hreflang="x-default" href="/en/add-stamps.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
@@ -74,7 +123,8 @@
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:addStamps.name">Add Stamps</h1>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:addStamps.name">Add Stamps Free Online - Fast &
Secure</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:addStamps.subtitle">
Upload a PDF, add image stamps using the toolbar, and then save the stamped PDF.
</p>
@@ -123,6 +173,105 @@
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is add stamps really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
@@ -132,7 +281,7 @@
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
@@ -213,6 +362,77 @@
<script type="module" src="/src/js/logic/add-stamps.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Add Stamps - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"ratingCount": "4453"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to add stamps online",
"description": "Learn how to add stamps 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": "Add Stamps",
"item": "https://www.bentopdf.com/add-stamps"
}
]
}
</script>
</body>
</html>
src/pages/add-watermark.html
+468 -253
View File
@@ -2,275 +2,490 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Watermark - BentoPDF</title>
<meta name="description"
content="Add text or image watermarks to your PDF documents. Customize opacity with rotation. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/add-watermark.html" />
<link rel="alternate" hreflang="de" href="/de/add-watermark.html" />
<link rel="alternate" hreflang="vi" href="/vi/add-watermark.html" />
<link rel="alternate" hreflang="x-default" href="/en/add-watermark.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Add Watermark Online Free - Add Watermark Tool | BentoPDF</title>
<meta name="title" content="Add Watermark Online Free - Add Watermark Tool | BentoPDF">
<meta name="description"
content="★ Add Watermark online free - Add watermark PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="add watermark, add watermark, 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/add-watermark">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/add-watermark">
<meta property="og:title" content="Add Watermark Online Free - Add Watermark Tool | BentoPDF">
<meta property="og:description"
content="★ Add Watermark online free - Add watermark PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-add-watermark.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/add-watermark">
<meta name="twitter:title" content="Add Watermark Free">
<meta name="twitter:description"
content="★ Add Watermark online free - Add watermark PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-add-watermark.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="Add Watermark">
<title>Add Watermark - BentoPDF</title>
<meta name="description"
content="Add text or image watermarks to your PDF documents. Customize opacity with rotation. Free, secure, and runs entirely in your browser.">
<link rel="alternate" hreflang="en" href="/en/add-watermark.html" />
<link rel="alternate" hreflang="de" href="/de/add-watermark.html" />
<link rel="alternate" hreflang="vi" href="/vi/add-watermark.html" />
<link rel="alternate" hreflang="x-default" href="/en/add-watermark.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:addWatermark.name">Add Watermark</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:addWatermark.subtitle">
Add text or image watermarks to your PDF documents with customizable opacity and rotation.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold"
data-i18n="upload.clickToSelect">Click to select a file</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="options-panel" class="hidden mt-6 space-y-4">
<div class="flex gap-4 mb-4">
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="watermark-type" value="text" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
<span class="text-sm font-medium text-gray-300">Text Watermark</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="watermark-type" value="image"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
<span class="text-sm font-medium text-gray-300">Image Watermark</span>
</label>
</div>
<div id="text-watermark-options">
<div class="space-y-4">
<div>
<label for="watermark-text" class="block mb-2 text-sm font-medium text-gray-300">Watermark
Text</label>
<input type="text" id="watermark-text" placeholder="CONFIDENTIAL"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="font-size" class="block mb-2 text-sm font-medium text-gray-300">Font
Size</label>
<input type="number" id="font-size" value="72" min="10" max="200"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
</div>
<div>
<label for="text-color"
class="block mb-2 text-sm font-medium text-gray-300">Color</label>
<input type="color" id="text-color" value="#888888"
class="w-full h-10 bg-gray-700 border border-gray-600 rounded-lg cursor-pointer">
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="opacity-text" class="block mb-2 text-sm font-medium text-gray-300">Opacity:
<span id="opacity-value-text">0.3</span></label>
<input type="range" id="opacity-text" min="0.1" max="1" step="0.1" value="0.3"
class="w-full h-2 bg-gray-700 rounded-lg cursor-pointer">
</div>
<div>
<label for="angle-text" class="block mb-2 text-sm font-medium text-gray-300">Angle:
<span id="angle-value-text">-45</span>°</label>
<input type="range" id="angle-text" min="-90" max="90" step="5" value="-45"
class="w-full h-2 bg-gray-700 rounded-lg cursor-pointer">
</div>
</div>
</div>
</div>
<div id="image-watermark-options" class="hidden">
<div class="space-y-4">
<div>
<label for="image-watermark-input"
class="block mb-2 text-sm font-medium text-gray-300">Watermark Image (PNG/JPG)</label>
<input type="file" id="image-watermark-input" accept="image/png, image/jpeg"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-600 file:text-white hover:file:bg-indigo-700">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="opacity-image" class="block mb-2 text-sm font-medium text-gray-300">Opacity:
<span id="opacity-value-image">0.3</span></label>
<input type="range" id="opacity-image" min="0.1" max="1" step="0.1" value="0.3"
class="w-full h-2 bg-gray-700 rounded-lg cursor-pointer">
</div>
<div>
<label for="angle-image" class="block mb-2 text-sm font-medium text-gray-300">Angle:
<span id="angle-value-image">0</span>°</label>
<input type="range" id="angle-image" min="-90" max="90" step="5" value="0"
class="w-full h-2 bg-gray-700 rounded-lg cursor-pointer">
</div>
</div>
</div>
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">Add Watermark</button>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:addWatermark.name">Add Watermark to PDF Free -
Protect PDFs</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:addWatermark.subtitle">
Add text or image watermarks to your PDF documents with customizable opacity and rotation.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2025 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="options-panel" class="hidden mt-6 space-y-4">
<div class="flex gap-4 mb-4">
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="watermark-type" value="text" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
<span class="text-sm font-medium text-gray-300">Text Watermark</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="watermark-type" value="image"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
<span class="text-sm font-medium text-gray-300">Image Watermark</span>
</label>
</div>
<div id="text-watermark-options">
<div class="space-y-4">
<div>
<label for="watermark-text" class="block mb-2 text-sm font-medium text-gray-300">Watermark
Text</label>
<input type="text" id="watermark-text" placeholder="CONFIDENTIAL"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="font-size" class="block mb-2 text-sm font-medium text-gray-300">Font
Size</label>
<input type="number" id="font-size" value="72" min="10" max="200"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
</div>
<div>
<label for="text-color" class="block mb-2 text-sm font-medium text-gray-300">Color</label>
<input type="color" id="text-color" value="#888888"
class="w-full h-10 bg-gray-700 border border-gray-600 rounded-lg cursor-pointer">
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="opacity-text" class="block mb-2 text-sm font-medium text-gray-300">Opacity:
<span id="opacity-value-text">0.3</span></label>
<input type="range" id="opacity-text" min="0.1" max="1" step="0.1" value="0.3"
class="w-full h-2 bg-gray-700 rounded-lg cursor-pointer">
</div>
<div>
<label for="angle-text" class="block mb-2 text-sm font-medium text-gray-300">Angle:
<span id="angle-value-text">-45</span>°</label>
<input type="range" id="angle-text" min="-90" max="90" step="5" value="-45"
class="w-full h-2 bg-gray-700 rounded-lg cursor-pointer">
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/add-watermark-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<div id="image-watermark-options" class="hidden">
<div class="space-y-4">
<div>
<label for="image-watermark-input" class="block mb-2 text-sm font-medium text-gray-300">Watermark Image
(PNG/JPG)</label>
<input type="file" id="image-watermark-input" accept="image/png, image/jpeg"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-600 file:text-white hover:file:bg-indigo-700">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="opacity-image" class="block mb-2 text-sm font-medium text-gray-300">Opacity:
<span id="opacity-value-image">0.3</span></label>
<input type="range" id="opacity-image" min="0.1" max="1" step="0.1" value="0.3"
class="w-full h-2 bg-gray-700 rounded-lg cursor-pointer">
</div>
<div>
<label for="angle-image" class="block mb-2 text-sm font-medium text-gray-300">Angle:
<span id="angle-value-image">0</span>°</label>
<input type="range" id="angle-image" min="-90" max="90" step="5" value="0"
class="w-full h-2 bg-gray-700 rounded-lg cursor-pointer">
</div>
</div>
</div>
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">Add Watermark</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is add watermark really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/add-watermark-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Add Watermark - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"ratingCount": "3066"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to add watermark online",
"description": "Learn how to add watermark 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": "Add Watermark",
"item": "https://www.bentopdf.com/add-watermark"
}
]
}
</script>
</body>
</html>
src/pages/alternate-merge.html
+397 -181
View File
@@ -2,201 +2,417 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alternate & Mix PDF Pages - BentoPDF</title>
<meta name="description"
content="Alternate and mix pages from multiple PDF files. Interleave PDF pages in any order. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="alternate" hreflang="en" href="/en/alternate-merge.html" />
<link rel="alternate" hreflang="de" href="/de/alternate-merge.html" />
<link rel="alternate" hreflang="vi" href="/vi/alternate-merge.html" />
<link rel="alternate" hreflang="x-default" href="/en/alternate-merge.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Alternate Merge Online Free - Alternate Merge Tool | BentoPDF</title>
<meta name="title" content="Alternate Merge Online Free - Alternate Merge Tool | BentoPDF">
<meta name="description"
content="★ Alternate Merge online free - Alternate merge PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="alternate merge, alternate merge, 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/alternate-merge">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/alternate-merge">
<meta property="og:title" content="Alternate Merge Online Free - Alternate Merge Tool | BentoPDF">
<meta property="og:description"
content="★ Alternate Merge online free - Alternate merge PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-alternate-merge.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/alternate-merge">
<meta name="twitter:title" content="Alternate Merge Free">
<meta name="twitter:description"
content="★ Alternate Merge online free - Alternate merge PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in bro">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-alternate-merge.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="Alternate Merge">
<title>Alternate & Mix PDF Pages - BentoPDF</title>
<meta name="description"
content="Alternate and mix pages from multiple PDF files. Interleave PDF pages in any order. Free, secure, and runs entirely in your browser.">
<link rel="alternate" hreflang="en" href="/en/alternate-merge.html" />
<link rel="alternate" hreflang="de" href="/de/alternate-merge.html" />
<link rel="alternate" hreflang="vi" href="/vi/alternate-merge.html" />
<link rel="alternate" hreflang="x-default" href="/en/alternate-merge.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-4xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:alternateMix.name">Alternate & Mix PDF Pages
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:alternateMix.subtitle">
Upload multiple PDFs and interleave their pages. Drag to reorder the files, then mix their pages
alternately.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select files</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">Multiple PDF files (at least 2)</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf" multiple>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="tool-options" class="hidden mt-6">
<h2 class="text-lg font-semibold text-white mb-4">Files Order</h2>
<p class="text-sm text-gray-400 mb-3">Drag to reorder. Pages will be interleaved in this order.</p>
<ul id="file-list" class="space-y-2 mb-4"></ul>
<button id="process-btn" class="btn-gradient w-full mt-4">Mix Pages</button>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-4xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:alternateMix.name">Alternate Merge Free Online -
Combine PDFs Instantly</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:alternateMix.subtitle">
Upload multiple PDFs and interleave their pages. Drag to reorder the files, then mix their pages
alternately.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select files</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">Multiple PDF files (at least 2)</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf" multiple>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="tool-options" class="hidden mt-6">
<h2 class="text-lg font-semibold text-white mb-4">Files Order</h2>
<p class="text-sm text-gray-400 mb-3">Drag to reorder. Pages will be interleaved in this order.</p>
<ul id="file-list" class="space-y-2 mb-4"></ul>
<button id="process-btn" class="btn-gradient w-full mt-4">Mix Pages</button>
</div>
</div>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2025 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram"><i data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
</div>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/alternate-merge-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<script type="module" src="/src/js/main.ts"></script>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is alternate merge really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram"><i data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/alternate-merge-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Alternate Merge - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "2876"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to alternate merge online",
"description": "Learn how to alternate merge 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": "Alternate Merge",
"item": "https://www.bentopdf.com/alternate-merge"
}
]
}
</script>
</body>
</html>
src/pages/background-color.html
+398 -183
View File
@@ -2,205 +2,420 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change Background Color - BentoPDF</title>
<meta name="description"
content="Change the background color of your PDF documents. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/background-color.html" />
<link rel="alternate" hreflang="de" href="/de/background-color.html" />
<link rel="alternate" hreflang="vi" href="/vi/background-color.html" />
<link rel="alternate" hreflang="x-default" href="/en/background-color.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Background Color Online Free - Background Color Tool | BentoPDF</title>
<meta name="title" content="Background Color Online Free - Background Color Tool | BentoPDF">
<meta name="description"
content="★ Background Color online free - Background color PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="background color, background color, 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/background-color">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/background-color">
<meta property="og:title" content="Background Color Online Free - Background Color Tool | BentoPDF">
<meta property="og:description"
content="★ Background Color online free - Background color PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-background-color.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/background-color">
<meta name="twitter:title" content="Background Color Free">
<meta name="twitter:description"
content="★ Background Color online free - Background color PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in b">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-background-color.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="Background Color">
<title>Change Background Color - BentoPDF</title>
<meta name="description"
content="Change the background color of your PDF documents. Free, secure, and runs entirely in your browser.">
<link rel="alternate" hreflang="en" href="/en/background-color.html" />
<link rel="alternate" hreflang="de" href="/de/background-color.html" />
<link rel="alternate" hreflang="vi" href="/vi/background-color.html" />
<link rel="alternate" hreflang="x-default" href="/en/background-color.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:backgroundColor.name">Change Background
Color</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:backgroundColor.subtitle">
Add or change the background color of all pages in your PDF document.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold"
data-i18n="upload.clickToSelect">Click to select a file</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="options-panel" class="hidden mt-6 space-y-4">
<div>
<label for="background-color" class="block mb-2 text-sm font-medium text-gray-300">Background
Color</label>
<input type="color" id="background-color" value="#FFFFCC"
class="w-full h-12 bg-gray-700 border border-gray-600 rounded-lg cursor-pointer">
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">Change Background Color</button>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:backgroundColor.name">Background Color Free Online
- Fast & Secure</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:backgroundColor.subtitle">
Add or change the background color of all pages in your PDF document.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">PDF file</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="options-panel" class="hidden mt-6 space-y-4">
<div>
<label for="background-color" class="block mb-2 text-sm font-medium text-gray-300">Background
Color</label>
<input type="color" id="background-color" value="#FFFFCC"
class="w-full h-12 bg-gray-700 border border-gray-600 rounded-lg cursor-pointer">
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">Change Background Color</button>
</div>
</div>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2025 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/background-color-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is background color really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/background-color-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Background Color - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "3038"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to background color online",
"description": "Learn how to background color 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": "Background Color",
"item": "https://www.bentopdf.com/background-color"
}
]
}
</script>
</body>
</html>
src/pages/bmp-to-pdf.html
+405 -188
View File
@@ -2,213 +2,430 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BMP to PDF - BentoPDF</title>
<meta name="description" content="Convert BMP images to PDF. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/bmp-to-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/bmp-to-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/bmp-to-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/bmp-to-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Bmp To Pdf Online Free - Bmp To Pdf Tool | BentoPDF</title>
<meta name="title" content="Bmp To Pdf Online Free - Bmp To Pdf Tool | BentoPDF">
<meta name="description"
content="★ Bmp To Pdf online free - Bmp to pdf PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="bmp to pdf, bmp to pdf, 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/bmp-to-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/bmp-to-pdf">
<meta property="og:title" content="Bmp To Pdf Online Free - Bmp To Pdf Tool | BentoPDF">
<meta property="og:description"
content="★ Bmp To Pdf online free - Bmp to pdf PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-bmp-to-pdf.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/bmp-to-pdf">
<meta name="twitter:title" content="Bmp To Pdf Free">
<meta name="twitter:description"
content="★ Bmp To Pdf online free - Bmp to pdf PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fas">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-bmp-to-pdf.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="Bmp To Pdf">
<title>BMP to PDF - BentoPDF</title>
<meta name="description" content="Convert BMP images to PDF. Free, secure, and runs entirely in your browser.">
<link rel="alternate" hreflang="en" href="/en/bmp-to-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/bmp-to-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/bmp-to-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/bmp-to-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:bmpToPdf.name">BMP to PDF</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:bmpToPdf.subtitle">
Convert one or more BMP images into a single PDF file.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select files</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">BMP images</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="image/bmp,.bmp" multiple>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear Files</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<button id="process-btn" class="hidden btn-gradient w-full mt-6">Convert to PDF</button>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:bmpToPdf.name">Bmp To Pdf Converter Free Online -
Convert Files Fast</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:bmpToPdf.subtitle">
Convert one or more BMP images into a single PDF file.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select files</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500">BMP images</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="image/bmp,.bmp" multiple>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear Files</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<button id="process-btn" class="hidden btn-gradient w-full mt-6">Convert to PDF</button>
</div>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/bmp-to-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is bmp to pdf really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/bmp-to-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Bmp To Pdf - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "2860"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to bmp to pdf online",
"description": "Learn how to bmp to pdf 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": "Bmp To Pdf",
"item": "https://www.bentopdf.com/bmp-to-pdf"
}
]
}
</script>
</body>
</html>
src/pages/bookmark.html
+226 -6
View File
@@ -4,17 +4,66 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Bookmark Online Free - Bookmark Tool | BentoPDF</title>
<meta name="title" content="Bookmark Online Free - Bookmark Tool | BentoPDF">
<meta name="description"
content="★ Bookmark online free - Bookmark PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="bookmark, bookmark, 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/bookmark">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/bookmark">
<meta property="og:title" content="Bookmark Online Free - Bookmark Tool | BentoPDF">
<meta property="og:description"
content="★ Bookmark online free - Bookmark PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-bookmark.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/bookmark">
<meta name="twitter:title" content="Bookmark Free">
<meta name="twitter:description"
content="★ Bookmark online free - Bookmark PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & ">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-bookmark.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="Bookmark">
<title>Advanced PDF Bookmark Tool - BentoPDF</title>
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="alternate" hreflang="en" href="/en/bookmark.html" />
<link rel="alternate" hreflang="de" href="/de/bookmark.html" />
<link rel="alternate" hreflang="vi" href="/vi/bookmark.html" />
<link rel="alternate" hreflang="x-default" href="/en/bookmark.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link href="../../src/css/bookmark.css" rel="stylesheet" />
<!-- 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">
@@ -75,7 +124,8 @@
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:editBookmarks.name">Edit Bookmarks</h1>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:editBookmarks.name">Bookmark Free Online - Fast &
Secure</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:editBookmarks.subtitle">
Add, edit, import, delete and extract PDF bookmarks.
</p>
@@ -419,6 +469,105 @@
<div id="modal-container"></div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is bookmark really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
@@ -428,7 +577,7 @@
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
@@ -509,6 +658,77 @@
<script type="module" src="/src/js/logic/bookmark-pdf.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Bookmark - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"ratingCount": "2638"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to bookmark online",
"description": "Learn how to bookmark 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": "Bookmark",
"item": "https://www.bentopdf.com/bookmark"
}
]
}
</script>
</body>
</html>
src/pages/cbz-to-pdf.html
+419 -203
View File
@@ -2,228 +2,444 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CBZ to PDF - Convert XPS/OCBZ to PDF - BentoPDF</title>
<meta name="description"
content="Convert XPS and OXPS documents to PDF format. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/png" href="/images/favicon.svg" />
<link rel="alternate" hreflang="en" href="/en/cbz-to-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/cbz-to-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/cbz-to-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/cbz-to-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Cbz To Pdf Online Free - Cbz To Pdf Tool | BentoPDF</title>
<meta name="title" content="Cbz To Pdf Online Free - Cbz To Pdf Tool | BentoPDF">
<meta name="description"
content="★ Cbz To Pdf online free - Cbz to pdf PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="cbz to pdf, cbz to pdf, 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/cbz-to-pdf">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/cbz-to-pdf">
<meta property="og:title" content="Cbz To Pdf Online Free - Cbz To Pdf Tool | BentoPDF">
<meta property="og:description"
content="★ Cbz To Pdf online free - Cbz to pdf PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-cbz-to-pdf.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/cbz-to-pdf">
<meta name="twitter:title" content="Cbz To Pdf Free">
<meta name="twitter:description"
content="★ Cbz To Pdf online free - Cbz to pdf PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fas">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-cbz-to-pdf.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="Cbz To Pdf">
<title>CBZ to PDF - Convert XPS/OCBZ to PDF - BentoPDF</title>
<meta name="description"
content="Convert XPS and OXPS documents to PDF format. Free, secure, and runs entirely in your browser.">
<link rel="alternate" hreflang="en" href="/en/cbz-to-pdf.html" />
<link rel="alternate" hreflang="de" href="/de/cbz-to-pdf.html" />
<link rel="alternate" hreflang="vi" href="/vi/cbz-to-pdf.html" />
<link rel="alternate" hreflang="x-default" href="/en/cbz-to-pdf.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link">About</a>
<a href="/contact.html" class="nav-link">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:cbzToPdf.name">CBZ to PDF</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:cbzToPdf.subtitle">
Convert comic book archives (CBZ/CBR) to PDF format. Supports multiple files.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold"
data-i18n="upload.clickToSelect">Click to select files</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="tools:cbzToPdf.acceptedFormats">CBZ, CBR files</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept=".cbz,.cbr,application/x-cbz,application/x-cbr,application/vnd.comicbook+zip,application/vnd.comicbook-rar"
multiple>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear All</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<button id="process-btn" class="hidden btn-gradient w-full mt-6"
data-i18n="tools:cbzToPdf.convertButton">Convert to PDF</button>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link">About</a>
<a href="/contact.html" class="mobile-nav-link">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:cbzToPdf.name">Cbz To Pdf Converter Free Online -
Convert Files Fast</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:cbzToPdf.subtitle">
Convert comic book archives (CBZ/CBR) to PDF format. Supports multiple files.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold" data-i18n="upload.clickToSelect">Click to
select files</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="tools:cbzToPdf.acceptedFormats">CBZ, CBR files</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept=".cbz,.cbr,application/x-cbz,application/x-cbr,application/vnd.comicbook+zip,application/vnd.comicbook-rar"
multiple>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="plus"></i> <span data-i18n="upload.addMore">Add More Files</span>
</button>
<button id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
<i data-lucide="trash-2"></i> <span data-i18n="upload.clearAll">Clear All</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<button id="process-btn" class="hidden btn-gradient w-full mt-6" data-i18n="tools:cbzToPdf.convertButton">Convert
to PDF</button>
</div>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2025 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Processing...
</p>
</div>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/cbz-to-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is cbz to pdf really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">
&copy; 2026 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/about.html" class="hover:text-indigo-400">About Us</a>
</li>
<li>
<a href="/faq.html" class="hover:text-indigo-400">FAQ</a>
</li>
<li>
<a href="/contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="/licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li>
<a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li>
<li>
<a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/cbz-to-pdf-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Cbz To Pdf - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "4409"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to cbz to pdf online",
"description": "Learn how to cbz to pdf 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": "Cbz To Pdf",
"item": "https://www.bentopdf.com/cbz-to-pdf"
}
]
}
</script>
</body>
</html>
src/pages/change-permissions.html
+453 -237
View File
@@ -2,257 +2,473 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change PDF Permissions - Manage PDF Security - BentoPDF</title>
<meta name="description"
content="Change PDF permissions and passwords. Set or modify user permissions, encryption, and access controls. Free, secure, and runs entirely in your browser.">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="alternate" hreflang="en" href="/en/change-permissions.html" />
<link rel="alternate" hreflang="de" href="/de/change-permissions.html" />
<link rel="alternate" hreflang="vi" href="/vi/change-permissions.html" />
<link rel="alternate" hreflang="x-default" href="/en/change-permissions.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Change Permissions Online Free - Change Permissions Tool | BentoPDF</title>
<meta name="title" content="Change Permissions Online Free - Change Permissions Tool | BentoPDF">
<meta name="description"
content="★ Change Permissions online free - Change permissions PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta name="keywords" content="change permissions, change permissions, 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/change-permissions">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.bentopdf.com/change-permissions">
<meta property="og:title" content="Change Permissions Online Free - Change Permissions Tool | BentoPDF">
<meta property="og:description"
content="★ Change Permissions online free - Change permissions PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure">
<meta property="og:image" content="https://www.bentopdf.com/images/og-change-permissions.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/change-permissions">
<meta name="twitter:title" content="Change Permissions Free">
<meta name="twitter:description"
content="★ Change Permissions online free - Change permissions PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works ">
<meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-change-permissions.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="Change Permissions">
<title>Change PDF Permissions - Manage PDF Security - BentoPDF</title>
<meta name="description"
content="Change PDF permissions and passwords. Set or modify user permissions, encryption, and access controls. Free, secure, and runs entirely in your browser.">
<link rel="alternate" hreflang="en" href="/en/change-permissions.html" />
<link rel="alternate" hreflang="de" href="/de/change-permissions.html" />
<link rel="alternate" hreflang="vi" href="/vi/change-permissions.html" />
<link rel="alternate" hreflang="x-default" href="/en/change-permissions.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
<!-- 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">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="/">BentoPDF</a>
</span>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<div class="hidden md:flex items-center space-x-8 text-white">
<a href="/" class="nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</nav>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:changePermissions.name">Change Permissions
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:changePermissions.subtitle">
Set or change user permissions on a PDF. Modify passwords and access controls.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select PDF</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="tool-options" class="hidden mt-6 space-y-4">
<div>
<label for="current-password" class="block mb-2 text-sm font-medium text-gray-300">Current Password
(if encrypted)</label>
<input type="password" id="current-password" placeholder="Enter current password"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
</div>
<div>
<label for="new-user-password" class="block mb-2 text-sm font-medium text-gray-300">New User
Password</label>
<input type="password" id="new-user-password" placeholder="Password to open PDF"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
</div>
<div>
<label for="new-owner-password" class="block mb-2 text-sm font-medium text-gray-300">New Owner
Password</label>
<input type="password" id="new-owner-password" placeholder="Password for permissions"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
<p class="text-xs text-gray-500 mt-1">Leave both passwords empty to decrypt the PDF.</p>
</div>
<div class="p-4 bg-gray-900 rounded-lg border border-gray-700">
<h3 class="text-sm font-semibold text-white mb-3">Permissions (requires owner password)</h3>
<div class="space-y-2">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-printing" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Printing</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-copying" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Copying Text</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-modifying" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Modifying</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-annotating" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Annotating</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-filling-forms" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Filling Forms</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-document-assembly" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Document Assembly</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-page-extraction" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Page Extraction</span>
</label>
</div>
</div>
<button id="process-btn" class="btn-gradient w-full">Change Permissions</button>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="menu-icon" class="block h-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="/about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="/contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title"
data-i18n="alert.title">Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
<div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
<div id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
<button id="back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
</button>
<h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:changePermissions.name">Change Permissions Free
Online - Fast & Secure</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:changePermissions.subtitle">
Set or change user permissions on a PDF. Modify passwords and access controls.
</p>
<div id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Click to select PDF</span> <span
data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
device.</p>
</div>
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="tool-options" class="hidden mt-6 space-y-4">
<div>
<label for="current-password" class="block mb-2 text-sm font-medium text-gray-300">Current Password
(if encrypted)</label>
<input type="password" id="current-password" placeholder="Enter current password"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
</div>
<div>
<label for="new-user-password" class="block mb-2 text-sm font-medium text-gray-300">New User
Password</label>
<input type="password" id="new-user-password" placeholder="Password to open PDF"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
</div>
<div>
<label for="new-owner-password" class="block mb-2 text-sm font-medium text-gray-300">New Owner
Password</label>
<input type="password" id="new-owner-password" placeholder="Password for permissions"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
<p class="text-xs text-gray-500 mt-1">Leave both passwords empty to decrypt the PDF.</p>
</div>
<div class="p-4 bg-gray-900 rounded-lg border border-gray-700">
<h3 class="text-sm font-semibold text-white mb-3">Permissions (requires owner password)</h3>
<div class="space-y-2">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-printing" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Printing</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-copying" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Copying Text</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-modifying" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Modifying</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-annotating" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Annotating</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-filling-forms" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Filling Forms</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-document-assembly" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Document Assembly</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" id="allow-page-extraction" checked
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
<span class="text-sm text-gray-300">Allow Page Extraction</span>
</label>
</div>
</div>
<button id="process-btn" class="btn-gradient w-full">Change Permissions</button>
</div>
</div>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2025 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram"><i data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
<!-- Loader Modal -->
<div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium" data-i18n="loader.processing"
data-i18n="loader.processing">Processing...</p>
</div>
</div>
<!-- Alert Modal -->
<div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
<h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title" data-i18n="alert.title">
Alert</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
OK
</button>
</div>
</div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/change-permissions-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<p class="text-gray-400">Click or drag and drop your file to begin</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<p class="text-gray-400">Click the process button to start</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<p class="text-gray-400">Save your processed file instantly</p>
</div>
</div>
</div>
</section>
<script type="module" src="/src/js/main.ts"></script>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a href="/merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
</a>
<a href="/compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Compress Pdf</h3>
<p class="text-gray-400 text-sm">Free online compress pdf tool</p>
</a>
<a href="/split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
</a>
<a href="/edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Edit Pdf</h3>
<p class="text-gray-400 text-sm">Free online edit pdf tool</p>
</a>
<a href="/rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
</a>
</div>
</section>
<!-- 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">Frequently Asked Questions</h2>
<div class="space-y-4">
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is change permissions really free?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Yes! BentoPDF is 100% free with no hidden fees, no signup required, and unlimited
file processing.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Are my files private and secure?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">Absolutely! All processing happens in your browser. Your files never leave your
device, ensuring complete privacy.</p>
</details>
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
Is there a file size limit?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">No! Process files of any size, as many times as you want, completely free.</p>
</details>
</div>
</section>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
<p class="text-gray-500 text-xs mt-2">Version <span id="app-version"></span></p>
</div>
<div>
<h3 class="font-bold text-white mb-4">Company</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
<li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
<li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
<li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
<li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/nicholaschen09/BentoPDF" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram"><i data-lucide="instagram"></i></a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn"><i data-lucide="linkedin"></i></a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/version.ts"></script>
<script type="module" src="/src/js/logic/change-permissions-page.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Change Permissions - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"ratingCount": "4041"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to change permissions online",
"description": "Learn how to change permissions 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": "Change Permissions",
"item": "https://www.bentopdf.com/change-permissions"
}
]
}
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More