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

Compare commits

base: lucasw89/bentopdf:v1.7.6
lucasw89/bentopdf:main lucasw89/bentopdf:dependabot/npm_and_yarn/npm-dependencies-839052b80b lucasw89/bentopdf:chore/update-sponsors lucasw89/bentopdf:badges lucasw89/bentopdf:dependabot/npm_and_yarn/vite-8.3.6 lucasw89/bentopdf:chore/update-pdf-engine lucasw89/bentopdf:ads-checkout lucasw89/bentopdf:cla-signatures 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.7.8
lucasw89/bentopdf:dependabot/npm_and_yarn/npm-dependencies-839052b80b lucasw89/bentopdf:main lucasw89/bentopdf:chore/update-sponsors lucasw89/bentopdf:badges lucasw89/bentopdf:dependabot/npm_and_yarn/vite-8.3.6 lucasw89/bentopdf:chore/update-pdf-engine lucasw89/bentopdf:ads-checkout lucasw89/bentopdf:cla-signatures 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
5 Commits
v1.7.6 ... v1.7.8
Author SHA1 Message Date
abdullahalam123 1a17cd4e7e Release v1.7.8 2025-11-21 17:11:15 +05:30
abdullahalam123 5fecc701c6 feat: Implement keyboard shortcuts system with UI management, add txt-to-pdf tests, and introduce a generic warning modal. 2025-11-21 17:10:56 +05:30
Alam 77ee986e2c Update index.html 
The script that counts the number of anonymous users visiting BentoPDF's live website was added by mistake and is now removed
 2025-11-20 20:14:12 +05:30
abdullahalam123 606a3603f4 Release v1.7.7 2025-11-20 19:58:46 +05:30
abdullahalam123 8a8ae3f0c5 feat: Add licensing page and FAQ script, update site content and navigation, and refine PDF tool logic for multi tool 2025-11-20 19:58:41 +05:30
27 changed files with 2929 additions and 1527 deletions
Expand all files Collapse all files

No files matched your search

README.md
+11 -6
View File
@@ -1,8 +1,6 @@
<p align="center"><img src="public/images/favicon.svg" width="80"></p> <p align="center"><img src="public/images/favicon.svg" width="80"></p>
<h1 align="center">BentoPDF</h1> <h1 align="center">BentoPDF</h1>
<hr>
**BentoPDF** is a powerful, privacy-first, client-side PDF toolkit that is self hostable and allows you to manipulate, edit, merge, and process PDF files directly in your browser. No server-side processing is required, ensuring your files remain secure and private. **BentoPDF** is a powerful, privacy-first, client-side PDF toolkit that is self hostable and allows you to manipulate, edit, merge, and process PDF files directly in your browser. No server-side processing is required, ensuring your files remain secure and private.
![Docker Pulls](https://img.shields.io/docker/pulls/bentopdf/bentopdf) [![Ko-fi](https://img.shields.io/badge/Buy%20me%20a%20Coffee-yellow?logo=kofi&style=flat-square)](https://ko-fi.com/alio0) ![GitHub Stars](https://img.shields.io/github/stars/alam00000/bentopdf?style=social) ![Docker Pulls](https://img.shields.io/docker/pulls/bentopdf/bentopdf) [![Ko-fi](https://img.shields.io/badge/Buy%20me%20a%20Coffee-yellow?logo=kofi&style=flat-square)](https://ko-fi.com/alio0) ![GitHub Stars](https://img.shields.io/github/stars/alam00000/bentopdf?style=social)
@@ -10,6 +8,17 @@
![BentoPDF Tools](public/images/bentopdf-tools.png) ![BentoPDF Tools](public/images/bentopdf-tools.png)
---
## 📜 Licensing
BentoPDF is dual-licensed:
- **AGPL-3.0** for open-source projects where you share your full source code publicly
- **Commercial License** for proprietary/closed-source applications - **[Get Lifetime License for $49](https://ko-fi.com/s/f32ca4cb75)** (a one-time lifetime purchase, includes all feature updates forever)
For more details, see our [Licensing Page](https://bentopdf.com/licensing.html)
<hr> <hr>
## ⭐ Stargazers over time ## ⭐ Stargazers over time
@@ -435,7 +444,3 @@ BentoPDF wouldn't be possible without the amazing open-source tools and librarie
- **[cpdf](https://www.coherentpdf.com/)** – For content preserving pdf operations. - **[cpdf](https://www.coherentpdf.com/)** – For content preserving pdf operations.
Your work inspires and empowers developers everywhere. Thank you for making open-source amazing! Your work inspires and empowers developers everywhere. Thank you for making open-source amazing!
## 📜 License
This project is licensed under the **GNU AGPLv3**. See the [LICENSE](https://github.com/alam00000/bentopdf/blob/main/LICENSE) file for details.
about.html
+259 -320
View File
@@ -1,337 +1,276 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<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 href="/src/css/styles.css" rel="stylesheet" />
</head>
<body class="antialiased bg-gray-900 text-gray-300"> <head>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <meta charset="UTF-8" />
<div class="container mx-auto px-4"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="flex justify-between items-center h-16"> <title>About Bentopdf - Fast, Private, and Free PDF Tools</title>
<div <link href="/src/css/styles.css" rel="stylesheet" />
class="flex-shrink-0 flex items-center cursor-pointer" </head>
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 --> <body class="antialiased bg-gray-900 text-gray-300">
<div class="hidden md:flex items-center space-x-8"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<a href="index.html" class="nav-link">Home</a> <div class="container mx-auto px-4">
<a href="./about.html" class="nav-link">About</a> <div class="flex justify-between items-center h-16">
<a href="./contact.html" class="nav-link">Contact</a> <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
</div> <span class="text-white font-bold text-xl ml-2">
<a href="index.html">BentoPDF</a>
</span>
</div>
<!-- Mobile Hamburger Button --> <!-- Desktop Navigation -->
<div class="md:hidden flex items-center"> <div class="hidden md:flex items-center space-x-8">
<button <a href="index.html" class="nav-link">Home</a>
id="mobile-menu-button" <a href="./about.html" class="nav-link">About</a>
type="button" <a href="./contact.html" class="nav-link">Contact</a>
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" <a href="./licensing.html" class="nav-link">Licensing</a>
aria-controls="mobile-menu" <a href="index.html#tools-header" class="nav-link">All Tools</a>
aria-expanded="false" </div>
>
<span class="sr-only">Open main menu</span> <!-- Mobile Hamburger Button -->
<!-- Hamburger Icon --> <div class="md:hidden flex items-center">
<svg <button id="mobile-menu-button" type="button"
id="menu-icon" 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"
class="block h-6 w-6" aria-controls="mobile-menu" aria-expanded="false">
xmlns="http://www.w3.org/2000/svg" <span class="sr-only">Open main menu</span>
fill="none" <!-- Hamburger Icon -->
viewBox="0 0 24 24" <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" stroke="currentColor" aria-hidden="true">
aria-hidden="true" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
> </svg>
<path <!-- Close Icon -->
stroke-linecap="round" <svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
stroke-linejoin="round" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
d="M4 6h16M4 12h16M4 18h16" </svg>
/> </button>
</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>
</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">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link"
>All Tools</a
>
</div>
</div>
</nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<section id="about-hero" class="text-center py-16 md:py-24">
<h1 class="text-3xl md:text-6xl font-bold text-white mb-4">
We believe PDF tools should be
<span class="marker-slanted">fast, private, and free.</span>
</h1>
<p class="text-lg md:text-xl text-gray-400">No compromises.</p>
</section>
<div class="section-divider"></div>
<section id="mission-section" class="py-16 max-w-4xl mx-auto">
<div class="text-center">
<i
data-lucide="rocket"
class="w-16 h-16 text-indigo-400 mx-auto mb-6"
></i>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
Our Mission
</h2>
<p class="text-lg text-gray-400 leading-relaxed">
To provide the most comprehensive PDF toolbox that respects your
privacy and never asks for payment. We believe essential document
tools should be accessible to everyone, everywhere, without
barriers.
</p>
</div>
</section>
<div
class="bg-gray-800 rounded-xl p-8 md:p-12 my-16 border border-gray-700"
>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="text-center md:text-left">
<span class="text-indigo-400 font-bold uppercase"
>Our Core Philosophy</span
>
<h2 class="text-3xl md:text-4xl font-bold text-white mt-2 mb-4">
Privacy First. Always.
</h2>
<p class="text-gray-400 leading-relaxed">
In an era where data is a commodity, we take a different approach.
All processing for Bentopdf tools happens locally in your browser.
This means your files never touch our servers, we never see your
documents, and we don't track what you do. Your documents remain
completely and unequivocally private. It's not just a feature;
it's our foundation.
</p>
</div>
<div class="flex justify-center">
<div class="relative w-48 h-48">
<div
class="absolute inset-0 bg-indigo-500 rounded-full opacity-20 animate-pulse"
></div>
<div
class="absolute inset-4 bg-indigo-500 rounded-full opacity-30 animate-pulse delay-500"
></div>
<i
data-lucide="shield-check"
class="w-48 h-48 text-indigo-400"
></i>
</div>
</div>
</div>
</div>
<section id="why-Bentopdf" class="py-16">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12">
Why <span class="marker-slanted">Bentopdf?</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i
data-lucide="zap"
class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"
></i>
<div>
<h3 class="text-xl font-bold text-white">Built for Speed</h3>
<p class="text-gray-400 mt-2">
No waiting for uploads or downloads to a server. By processing
files directly in your browser using modern web technologies
like WebAssembly, we offer unparalleled speed for all our tools.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i
data-lucide="badge-dollar-sign"
class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"
></i>
<div>
<h3 class="text-xl font-bold text-white">Completely Free</h3>
<p class="text-gray-400 mt-2">
No trials, no subscriptions, no hidden fees, and no "premium"
features held hostage. We believe powerful PDF tools should be a
public utility, not a profit center.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i
data-lucide="user-plus"
class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"
></i>
<div>
<h3 class="text-xl font-bold text-white">No Account Required</h3>
<p class="text-gray-400 mt-2">
Start using any tool immediately. We don't need your email, a
password, or any personal information. Your workflow should be
frictionless and anonymous.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i
data-lucide="code-2"
class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"
></i>
<div>
<h3 class="text-xl font-bold text-white">Open Source Spirit</h3>
<p class="text-gray-400 mt-2">
Built with transparency in mind. We leverage incredible
open-source libraries like PDF-lib and PDF.js, and believe in
the community-driven effort to make powerful tools accessible to
everyone.
</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<section id="cta-section" class="text-center py-16">
<h2 class="text-3xl font-bold text-white mb-4">
Ready to get started?
</h2>
<p class="text-lg text-gray-400 mb-8 max-w-2xl mx-auto">
Join thousands of users who trust Bentopdf for their daily document
needs. Experience the difference that privacy and performance can
make.
</p>
<a
href="index.html#tools-header"
class="inline-block px-8 py-3 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"
>
Explore All Tools
</a>
</section>
</div> </div>
<footer class="mt-16 border-t-2 border-gray-700 py-8"> <!-- Mobile Menu Dropdown -->
<div class="container mx-auto px-4"> <div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left"> <div class="px-2 pt-2 pb-3 space-y-1 text-center">
<div class="mb-8 md:mb-0"> <a href="index.html" class="mobile-nav-link">Home</a>
<div class="flex items-center justify-center md:justify-start mb-4"> <a href="./about.html" class="mobile-nav-link">About</a>
<img src="images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" /> <a href="./contact.html" class="mobile-nav-link">Contact</a>
<span class="text-xl font-bold text-white">BentoPDF</span> <a href="./licensing.html" class="mobile-nav-link">Licensing</a>
</div> <a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
<p class="text-gray-400 text-sm"> </div>
&copy; 2025 BentoPDF. All rights reserved. </div>
</p> </nav>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div> <div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<h3 class="font-bold text-white mb-4">Company</h3> <section id="about-hero" class="text-center py-16 md:py-24">
<ul class="space-y-2 text-gray-400"> <h1 class="text-3xl md:text-6xl font-bold text-white mb-4">
<li> We believe PDF tools should be
<a href="./about.html" class="hover:text-indigo-400">About Us</a> <span class="marker-slanted">fast, private, and free.</span>
</li> </h1>
<li> <p class="text-lg md:text-xl text-gray-400">No compromises.</p>
<a href="./faq.html" class="hover:text-indigo-400">FAQ</a> </section>
</li>
<li>
<a href="./contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div> <div class="section-divider"></div>
<h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400">
<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> <section id="mission-section" class="py-16 max-w-4xl mx-auto">
<h3 class="font-bold text-white mb-4">Follow Us</h3> <div class="text-center">
<div class="flex justify-center md:justify-start space-x-4"> <i data-lucide="rocket" class="w-16 h-16 text-indigo-400 mx-auto mb-6"></i>
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer" <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
class="text-gray-400 hover:text-indigo-400" title="GitHub"> Our Mission
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> </h2>
<path fill-rule="evenodd" <p class="text-lg text-gray-400 leading-relaxed">
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" To provide the most comprehensive PDF toolbox that respects your
clip-rule="evenodd" /> privacy and never asks for payment. We believe essential document
</svg> tools should be accessible to everyone, everywhere, without
</a> barriers.
<a href="https://discord.gg/q42xWQmJ" target="_blank" rel="noopener noreferrer" </p>
class="text-gray-400 hover:text-indigo-400" title="Discord"> </div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> </section>
<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" /> <div class="bg-gray-800 rounded-xl p-8 md:p-12 my-16 border border-gray-700">
</svg> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
</a> <div class="text-center md:text-left">
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400" <span class="text-indigo-400 font-bold uppercase">Our Core Philosophy</span>
title="Instagram"> <h2 class="text-3xl md:text-4xl font-bold text-white mt-2 mb-4">
<i data-lucide="instagram"></i> Privacy First. Always.
</a> </h2>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400" <p class="text-gray-400 leading-relaxed">
title="LinkedIn"> In an era where data is a commodity, we take a different approach.
<i data-lucide="linkedin"></i> All processing for Bentopdf tools happens locally in your browser.
</a> This means your files never touch our servers, we never see your
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)"> documents, and we don't track what you do. Your documents remain
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> completely and unequivocally private. It's not just a feature;
<path it's our foundation.
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" /> </p>
</svg> </div>
</a> <div class="flex justify-center">
</div> <div class="relative w-48 h-48">
<div class="absolute inset-0 bg-indigo-500 rounded-full opacity-20 animate-pulse"></div>
<div class="absolute inset-4 bg-indigo-500 rounded-full opacity-30 animate-pulse delay-500"></div>
<i data-lucide="shield-check" class="w-48 h-48 text-indigo-400"></i>
</div> </div>
</div> </div>
</div> </div>
</footer> </div>
<section id="why-Bentopdf" class="py-16">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12">
Why <span class="marker-slanted">Bentopdf?</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i data-lucide="zap" class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-xl font-bold text-white">Built for Speed</h3>
<p class="text-gray-400 mt-2">
No waiting for uploads or downloads to a server. By processing
files directly in your browser using modern web technologies
like WebAssembly, we offer unparalleled speed for all our tools.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i data-lucide="badge-dollar-sign" class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-xl font-bold text-white">Completely Free</h3>
<p class="text-gray-400 mt-2">
No trials, no subscriptions, no hidden fees, and no "premium"
features held hostage. We believe powerful PDF tools should be a
public utility, not a profit center.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i data-lucide="user-plus" class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-xl font-bold text-white">No Account Required</h3>
<p class="text-gray-400 mt-2">
Start using any tool immediately. We don't need your email, a
password, or any personal information. Your workflow should be
frictionless and anonymous.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i data-lucide="code-2" class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-xl font-bold text-white">Open Source Spirit</h3>
<p class="text-gray-400 mt-2">
Built with transparency in mind. We leverage incredible
open-source libraries like PDF-lib and PDF.js, and believe in
the community-driven effort to make powerful tools accessible to
everyone.
</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<section id="cta-section" class="text-center py-16">
<h2 class="text-3xl font-bold text-white mb-4">
Ready to get started?
</h2>
<p class="text-lg text-gray-400 mb-8 max-w-2xl mx-auto">
Join thousands of users who trust Bentopdf for their daily document
needs. Experience the difference that privacy and performance can
make.
</p>
<a href="index.html#tools-header"
class="inline-block px-8 py-3 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">
Explore All Tools
</a>
</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">
&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/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/q42xWQmJ" 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/mobileMenu.ts"></script>
</body>
<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>
</body>
</html> </html>
contact.html
+154 -190
View File
@@ -1,209 +1,173 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us - BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
</head>
<body class="antialiased bg-gray-900 text-gray-300"> <head>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <meta charset="UTF-8" />
<div class="container mx-auto px-4"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="flex justify-between items-center h-16"> <title>Contact Us - BentoPDF</title>
<div <link href="/src/css/styles.css" rel="stylesheet" />
class="flex-shrink-0 flex items-center cursor-pointer" </head>
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 --> <body class="antialiased bg-gray-900 text-gray-300">
<div class="hidden md:flex items-center space-x-8"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<a href="index.html" class="nav-link">Home</a> <div class="container mx-auto px-4">
<a href="./about.html" class="nav-link">About</a> <div class="flex justify-between items-center h-16">
<a href="./contact.html" class="nav-link">Contact</a> <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
</div> <span class="text-white font-bold text-xl ml-2">
<a href="index.html">BentoPDF</a>
<!-- Mobile Hamburger Button --> </span>
<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>
</div>
<!-- Mobile Menu Dropdown --> <!-- Desktop Navigation -->
<div <div class="hidden md:flex items-center space-x-8">
id="mobile-menu" <a href="index.html" class="nav-link">Home</a>
class="hidden md:hidden bg-gray-800 border-t border-gray-700" <a href="./about.html" class="nav-link">About</a>
> <a href="./contact.html" class="nav-link">Contact</a>
<div class="px-2 pt-2 pb-3 space-y-1 text-center"> <a href="./licensing.html" class="nav-link">Licensing</a>
<a href="index.html" class="mobile-nav-link">Home</a> <a href="index.html#tools-header" class="nav-link">All Tools</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link"
>All Tools</a
>
</div> </div>
</div>
</nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8"> <!-- Mobile Hamburger Button -->
<section id="contact-hero" class="text-center py-16 md:py-24"> <div class="md:hidden flex items-center">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4"> <button id="mobile-menu-button" type="button"
Get in Touch 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"
</h1> aria-controls="mobile-menu" aria-expanded="false">
<p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto"> <span class="sr-only">Open main menu</span>
We'd love to hear from you. Whether you have a question, feedback, or <!-- Hamburger Icon -->
a feature request, please don't hesitate to reach out. <svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
</p> stroke="currentColor" aria-hidden="true">
</section> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<div class="max-w-2xl mx-auto text-center py-8"> <!-- Close Icon -->
<p class="text-lg text-gray-400"> <svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
You can reach us directly by email at: viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<a <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
href="mailto:contact@bentopdf.com" </svg>
class="text-indigo-400 underline hover:text-indigo-300" </button>
>contact@bentopdf.com</a </div>
>
</p>
</div> </div>
</div> </div>
<footer class="mt-16 border-t-2 border-gray-700 py-8"> <!-- Mobile Menu Dropdown -->
<div class="container mx-auto px-4"> <div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left"> <div class="px-2 pt-2 pb-3 space-y-1 text-center">
<div class="mb-8 md:mb-0"> <a href="index.html" class="mobile-nav-link">Home</a>
<div class="flex items-center justify-center md:justify-start mb-4"> <a href="./about.html" class="mobile-nav-link">About</a>
<img src="images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" /> <a href="./contact.html" class="mobile-nav-link">Contact</a>
<span class="text-xl font-bold text-white">BentoPDF</span> <a href="./licensing.html" class="mobile-nav-link">Licensing</a>
</div> <a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
<p class="text-gray-400 text-sm"> </div>
&copy; 2025 BentoPDF. All rights reserved. </div>
</p> </nav>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div> <div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<h3 class="font-bold text-white mb-4">Company</h3> <section id="contact-hero" class="text-center py-16 md:py-24">
<ul class="space-y-2 text-gray-400"> <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
<li> Get in Touch
<a href="./about.html" class="hover:text-indigo-400">About Us</a> </h1>
</li> <p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto">
<li> We'd love to hear from you. Whether you have a question, feedback, or
<a href="./faq.html" class="hover:text-indigo-400">FAQ</a> a feature request, please don't hesitate to reach out.
</li> </p>
<li> </section>
<a href="./contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div> <div class="max-w-2xl mx-auto text-center py-8">
<h3 class="font-bold text-white mb-4">Legal</h3> <p class="text-lg text-gray-400">
<ul class="space-y-2 text-gray-400"> You can reach us directly by email at:
<li> <a href="mailto:contact@bentopdf.com"
<a href="./terms.html" class="hover:text-indigo-400">Terms and Conditions</a> class="text-indigo-400 underline hover:text-indigo-300">contact@bentopdf.com</a>
</li> </p>
<li> </div>
<a href="./privacy.html" class="hover:text-indigo-400">Privacy Policy</a> </div>
</li>
</ul>
</div>
<div> <footer class="mt-16 border-t-2 border-gray-700 py-8">
<h3 class="font-bold text-white mb-4">Follow Us</h3> <div class="container mx-auto px-4">
<div class="flex justify-center md:justify-start space-x-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer" <div class="mb-8 md:mb-0">
class="text-gray-400 hover:text-indigo-400" title="GitHub"> <div class="flex items-center justify-center md:justify-start mb-4">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<path fill-rule="evenodd" <span class="text-xl font-bold text-white">BentoPDF</span>
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" </div>
clip-rule="evenodd" /> <p class="text-gray-400 text-sm">
</svg> &copy; 2025 BentoPDF. All rights reserved.
</a> </p>
<a href="https://discord.gg/q42xWQmJ" target="_blank" rel="noopener noreferrer" <p class="text-gray-500 text-xs mt-2">
class="text-gray-400 hover:text-indigo-400" title="Discord"> Version <span id="app-version"></span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> </p>
<path </div>
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> <div>
</a> <h3 class="font-bold text-white mb-4">Company</h3>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400" <ul class="space-y-2 text-gray-400">
title="Instagram"> <li>
<i data-lucide="instagram"></i> <a href="./about.html" class="hover:text-indigo-400">About Us</a>
</a> </li>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400" <li>
title="LinkedIn"> <a href="./faq.html" class="hover:text-indigo-400">FAQ</a>
<i data-lucide="linkedin"></i> </li>
</a> <li>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)"> <a href="./contact.html" class="hover:text-indigo-400">Contact Us</a>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> </li>
<path </ul>
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" /> </div>
</svg>
</a> <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/q42xWQmJ" 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>
</div> </div>
</footer> </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>
</body>
<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>
</body>
</html> </html>
faq.html
+303 -378
View File
@@ -1,395 +1,320 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frequently Asked Questions - BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
</head>
<body class="antialiased bg-gray-900 text-gray-300"> <head>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <meta charset="UTF-8" />
<div class="container mx-auto px-4"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="flex justify-between items-center h-16"> <title>Frequently Asked Questions - BentoPDF</title>
<div <link href="/src/css/styles.css" rel="stylesheet" />
class="flex-shrink-0 flex items-center cursor-pointer" </head>
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 --> <body class="antialiased bg-gray-900 text-gray-300">
<div class="hidden md:flex items-center space-x-8"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<a href="index.html" class="nav-link">Home</a> <div class="container mx-auto px-4">
<a href="./about.html" class="nav-link">About</a> <div class="flex justify-between items-center h-16">
<a href="./contact.html" class="nav-link">Contact</a> <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
</div> <span class="text-white font-bold text-xl ml-2">
<a href="index.html">BentoPDF</a>
</span>
</div>
<!-- Mobile Hamburger Button --> <!-- Desktop Navigation -->
<div class="md:hidden flex items-center"> <div class="hidden md:flex items-center space-x-8">
<button <a href="index.html" class="nav-link">Home</a>
id="mobile-menu-button" <a href="./about.html" class="nav-link">About</a>
type="button" <a href="./contact.html" class="nav-link">Contact</a>
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" <a href="./licensing.html" class="nav-link">Licensing</a>
aria-controls="mobile-menu" <a href="index.html#tools-header" class="nav-link">All Tools</a>
aria-expanded="false" </div>
>
<span class="sr-only">Open main menu</span> <!-- Mobile Hamburger Button -->
<!-- Hamburger Icon --> <div class="md:hidden flex items-center">
<svg <button id="mobile-menu-button" type="button"
id="menu-icon" 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"
class="block h-6 w-6" aria-controls="mobile-menu" aria-expanded="false">
xmlns="http://www.w3.org/2000/svg" <span class="sr-only">Open main menu</span>
fill="none" <!-- Hamburger Icon -->
viewBox="0 0 24 24" <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" stroke="currentColor" aria-hidden="true">
aria-hidden="true" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
> </svg>
<path <!-- Close Icon -->
stroke-linecap="round" <svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
stroke-linejoin="round" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
d="M4 6h16M4 12h16M4 18h16" </svg>
/> </button>
</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>
</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">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link"
>All Tools</a
>
</div>
</div>
</nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<section id="faq-hero" class="text-center py-16 md:py-24">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
Frequently Asked Questions
</h1>
<p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto">
Have questions? We've got answers. Here are some of the most common
things people ask about BentoPDF.
</p>
</section>
<div class="max-w-4xl mx-auto space-y-4">
<details
class="bg-gray-800 border border-gray-700 rounded-lg p-5 group"
>
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Are my files safe and private?
</h3>
<i
data-lucide="plus"
class="w-6 h-6 text-indigo-400 icon flex-shrink-0"
></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
<strong>Absolutely.</strong> This is the most important feature of
BentoPDF. All processing happens 100% locally in your web browser.
Your files are never uploaded to any server, which means we—or
anyone else—can never see them. Your privacy is guaranteed.
</p>
</div>
</details>
<details
class="bg-gray-800 border border-gray-700 rounded-lg p-5 group"
>
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Is BentoPDF really free? What's the catch?
</h3>
<i
data-lucide="plus"
class="w-6 h-6 text-indigo-400 icon flex-shrink-0"
></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
Yes, it's completely free, and there's no catch. There are no
hidden fees, no subscription plans, no usage limits, and no
premium-only features. We believe essential tools should be
accessible to everyone.
</p>
</div>
</details>
<details
class="bg-gray-800 border border-gray-700 rounded-lg p-5 group"
>
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Do I need an internet connection to use the tools?
</h3>
<i
data-lucide="plus"
class="w-6 h-6 text-indigo-400 icon flex-shrink-0"
></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
After you load the website for the first time, most tools will
work completely offline! Because all the processing libraries are
loaded into your browser, you can disconnect from the internet and
continue to merge, split, compress, and edit your PDFs securely.
Some niche tools that require external data (like Markdown to PDF
with web images) may need a connection.
</p>
</div>
</details>
<details
class="bg-gray-800 border border-gray-700 rounded-lg p-5 group"
>
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Are there any file size or usage limitations?
</h3>
<i
data-lucide="plus"
class="w-6 h-6 text-indigo-400 icon flex-shrink-0"
></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
No, we do not impose any artificial limits on file size, the
number of files, or how many times you can use a tool. The only
practical limitation is the processing power and memory of your
own computer, as very large or complex files may take longer to
process.
</p>
</div>
</details>
<details
class="bg-gray-800 border border-gray-700 rounded-lg p-5 group"
>
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Why did my PDF fail to process?
</h3>
<i
data-lucide="plus"
class="w-6 h-6 text-indigo-400 icon flex-shrink-0"
></i>
</summary>
<div class="mt-4 text-gray-400">
<p>Failures are rare but can happen for a few reasons:</p>
<ul class="list-disc list-inside mt-2 space-y-1">
<li>
The PDF might be corrupted or not compliant with standard
specifications.
</li>
<li>
The file could be encrypted with a password you don't have.
Please use our Decrypt tool first.
</li>
<li>
The file might be a special "XFA" or dynamic form-based PDF,
which some of our tools cannot process.
</li>
</ul>
</div>
</details>
<details
class="bg-gray-800 border border-gray-700 rounded-lg p-5 group"
>
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Do you track my activity on BentoPDF?
</h3>
<i
data-lucide="plus"
class="w-6 h-6 text-indigo-400 icon flex-shrink-0"
></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
We care about your privacy. BentoPDF does not track personal
information. We use
<a
href="https://simpleanalytics.com"
class="text-indigo-400 hover:underline"
target="_blank"
rel="noopener noreferrer"
>Simple Analytics</a
>
solely to see anonymous visit counts. This means we can know how
many users visit our site, but
<strong>we never know who you are</strong>. Simple Analytics is
fully GDPR-compliant and respects your privacy.
</p>
</div>
</details>
<details
class="bg-gray-800 border border-gray-700 rounded-lg p-5 group"
>
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
What technology does BentoPDF use?
</h3>
<i
data-lucide="plus"
class="w-6 h-6 text-indigo-400 icon flex-shrink-0"
></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
BentoPDF is built on the power of modern web technologies. We
primarily use JavaScript libraries like
<strong>PDF-lib.js</strong> and <strong>PDFKit.js</strong> that
are compiled to run efficiently in your browser via WebAssembly.
This allows for powerful, server-like processing without your data
ever leaving your machine.
</p>
</div>
</details>
</div>
<div class="section-divider mt-16"></div>
<section id="contact-section" class="text-center py-16">
<h2 class="text-3xl font-bold text-white mb-4">
Still have questions?
</h2>
<p class="text-lg text-gray-400 mb-8 max-w-2xl mx-auto">
If you can't find the answer you're looking for, feel free to reach
out to our support team. We're always Bento to help.
</p>
<a
href="contact.html"
class="inline-block px-8 py-3 rounded-full bg-gray-700 text-white font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 hover:bg-gray-600 transition-colors duration-200"
>
Contact Us
</a>
</section>
</div> </div>
<footer class="mt-16 border-t-2 border-gray-700 py-8"> <!-- Mobile Menu Dropdown -->
<div class="container mx-auto px-4"> <div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left"> <div class="px-2 pt-2 pb-3 space-y-1 text-center">
<div class="mb-8 md:mb-0"> <a href="index.html" class="mobile-nav-link">Home</a>
<div class="flex items-center justify-center md:justify-start mb-4"> <a href="./about.html" class="mobile-nav-link">About</a>
<img src="images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" /> <a href="./contact.html" class="mobile-nav-link">Contact</a>
<span class="text-xl font-bold text-white">BentoPDF</span> <a href="./licensing.html" class="mobile-nav-link">Licensing</a>
</div> <a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
<p class="text-gray-400 text-sm"> </div>
&copy; 2025 BentoPDF. All rights reserved. </div>
</p> </nav>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div> <div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<h3 class="font-bold text-white mb-4">Company</h3> <section id="faq-hero" class="text-center py-16 md:py-24">
<ul class="space-y-2 text-gray-400"> <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
<li> Frequently Asked Questions
<a href="./about.html" class="hover:text-indigo-400">About Us</a> </h1>
</li> <p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto">
<li> Have questions? We've got answers. Here are some of the most common
<a href="./faq.html" class="hover:text-indigo-400">FAQ</a> things people ask about BentoPDF.
</li> </p>
<li> </section>
<a href="./contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div> <div class="max-w-4xl mx-auto space-y-4">
<h3 class="font-bold text-white mb-4">Legal</h3> <details class="bg-gray-800 border border-gray-700 rounded-lg p-5 group">
<ul class="space-y-2 text-gray-400"> <summary class="flex items-center justify-between cursor-pointer">
<li> <h3 class="font-semibold text-white text-lg">
<a href="./terms.html" class="hover:text-indigo-400">Terms and Conditions</a> Are my files safe and private?
</li> </h3>
<li> <i data-lucide="plus" class="w-6 h-6 text-indigo-400 icon flex-shrink-0"></i>
<a href="./privacy.html" class="hover:text-indigo-400">Privacy Policy</a> </summary>
</li> <div class="mt-4 text-gray-400">
</ul> <p>
</div> <strong>Absolutely.</strong> This is the most important feature of
BentoPDF. All processing happens 100% locally in your web browser.
Your files are never uploaded to any server, which means we—or
anyone else—can never see them. Your privacy is guaranteed.
</p>
</div>
</details>
<div> <details class="bg-gray-800 border border-gray-700 rounded-lg p-5 group">
<h3 class="font-bold text-white mb-4">Follow Us</h3> <summary class="flex items-center justify-between cursor-pointer">
<div class="flex justify-center md:justify-start space-x-4"> <h3 class="font-semibold text-white text-lg">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer" Is BentoPDF really free? What's the catch?
class="text-gray-400 hover:text-indigo-400" title="GitHub"> </h3>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <i data-lucide="plus" class="w-6 h-6 text-indigo-400 icon flex-shrink-0"></i>
<path fill-rule="evenodd" </summary>
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" <div class="mt-4 text-gray-400">
clip-rule="evenodd" /> <p>
</svg> Yes, it's completely free, and there's no catch. There are no
</a> hidden fees, no subscription plans, no usage limits, and no
<a href="https://discord.gg/q42xWQmJ" target="_blank" rel="noopener noreferrer" premium-only features. We believe essential tools should be
class="text-gray-400 hover:text-indigo-400" title="Discord"> accessible to everyone.
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> </p>
<path </div>
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" /> </details>
</svg>
</a> <details class="bg-gray-800 border border-gray-700 rounded-lg p-5 group">
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400" <summary class="flex items-center justify-between cursor-pointer">
title="Instagram"> <h3 class="font-semibold text-white text-lg">
<i data-lucide="instagram"></i> Do I need an internet connection to use the tools?
</a> </h3>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400" <i data-lucide="plus" class="w-6 h-6 text-indigo-400 icon flex-shrink-0"></i>
title="LinkedIn"> </summary>
<i data-lucide="linkedin"></i> <div class="mt-4 text-gray-400">
</a> <p>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)"> After you load the website for the first time, most tools will
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> work completely offline! Because all the processing libraries are
<path loaded into your browser, you can disconnect from the internet and
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" /> continue to merge, split, compress, and edit your PDFs securely.
</svg> Some niche tools that require external data (like Markdown to PDF
</a> with web images) may need a connection.
</div> </p>
</div>
</details>
<details class="bg-gray-800 border border-gray-700 rounded-lg p-5 group">
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Are there any file size or usage limitations?
</h3>
<i data-lucide="plus" class="w-6 h-6 text-indigo-400 icon flex-shrink-0"></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
No, we do not impose any artificial limits on file size, the
number of files, or how many times you can use a tool. The only
practical limitation is the processing power and memory of your
own computer, as very large or complex files may take longer to
process.
</p>
</div>
</details>
<details class="bg-gray-800 border border-gray-700 rounded-lg p-5 group">
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Why did my PDF fail to process?
</h3>
<i data-lucide="plus" class="w-6 h-6 text-indigo-400 icon flex-shrink-0"></i>
</summary>
<div class="mt-4 text-gray-400">
<p>Failures are rare but can happen for a few reasons:</p>
<ul class="list-disc list-inside mt-2 space-y-1">
<li>
The PDF might be corrupted or not compliant with standard
specifications.
</li>
<li>
The file could be encrypted with a password you don't have.
Please use our Decrypt tool first.
</li>
<li>
The file might be a special "XFA" or dynamic form-based PDF,
which some of our tools cannot process.
</li>
</ul>
</div>
</details>
<details class="bg-gray-800 border border-gray-700 rounded-lg p-5 group">
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
Do you track my activity on BentoPDF?
</h3>
<i data-lucide="plus" class="w-6 h-6 text-indigo-400 icon flex-shrink-0"></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
We care about your privacy. BentoPDF does not track personal
information. We use
<a href="https://simpleanalytics.com" class="text-indigo-400 hover:underline" target="_blank"
rel="noopener noreferrer">Simple Analytics</a>
solely to see anonymous visit counts. This means we can know how
many users visit our site, but
<strong>we never know who you are</strong>. Simple Analytics is
fully GDPR-compliant and respects your privacy.
</p>
</div>
</details>
<details class="bg-gray-800 border border-gray-700 rounded-lg p-5 group">
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-white text-lg">
What technology does BentoPDF use?
</h3>
<i data-lucide="plus" class="w-6 h-6 text-indigo-400 icon flex-shrink-0"></i>
</summary>
<div class="mt-4 text-gray-400">
<p>
BentoPDF is built on the power of modern web technologies. We
primarily use JavaScript libraries like
<strong>PDF-lib.js</strong> and <strong>PDFKit.js</strong> that
are compiled to run efficiently in your browser via WebAssembly.
This allows for powerful, server-like processing without your data
ever leaving your machine.
</p>
</div>
</details>
</div>
<div class="section-divider mt-16"></div>
<section id="contact-section" class="text-center py-16">
<h2 class="text-3xl font-bold text-white mb-4">
Still have questions?
</h2>
<p class="text-lg text-gray-400 mb-8 max-w-2xl mx-auto">
If you can't find the answer you're looking for, feel free to reach
out to our support team. We're always Bento to help.
</p>
<a href="contact.html"
class="inline-block px-8 py-3 rounded-full bg-gray-700 text-white font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 hover:bg-gray-600 transition-colors duration-200">
Contact Us
</a>
</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">
&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/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/q42xWQmJ" 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>
</div> </div>
</footer> </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>
</body>
<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>
</body>
</html> </html>
index.html
+99 -1
View File
@@ -25,6 +25,7 @@
<a href="index.html" class="nav-link">Home</a> <a href="index.html" class="nav-link">Home</a>
<a href="./about.html" class="nav-link">About</a> <a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a> <a href="./contact.html" class="nav-link">Contact</a>
<a href="./licensing.html" class="nav-link">Licensing</a>
<a href="index.html#tools-header" class="nav-link">All Tools</a> <a href="index.html#tools-header" class="nav-link">All Tools</a>
</div> </div>
@@ -55,6 +56,7 @@
<a href="index.html" class="mobile-nav-link">Home</a> <a href="index.html" class="mobile-nav-link">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a> <a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a> <a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="./licensing.html" class="mobile-nav-link">Licensing</a>
<a href="index.html#tools-header" class="mobile-nav-link">All Tools</a> <a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
</div> </div>
</div> </div>
@@ -189,8 +191,13 @@
<input type="text" id="search-bar" <input type="text" id="search-bar"
class="w-full pl-10 pr-4 py-3 bg-gray-700 text-white border border-gray-600 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" class="w-full pl-10 pr-4 py-3 bg-gray-700 text-white border border-gray-600 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Search for a tool (e.g., 'split', 'organize'...)" /> placeholder="Search for a tool (e.g., 'split', 'organize'...)" />
<span class="absolute inset-y-0 right-0 flex items-center rounded-lg pr-2"> <span class="absolute inset-y-0 right-0 flex items-center rounded-lg pr-2 gap-2">
<kbd id="shortcut" class="bg-gray-800 px-1 rounded-lg"></kbd> <kbd id="shortcut" class="bg-gray-800 px-1 rounded-lg"></kbd>
<button id="open-shortcuts-btn"
class="p-1 hover:bg-gray-600 rounded-md text-gray-400 hover:text-white transition-colors hidden-on-touch"
title="Keyboard Shortcuts">
<i data-lucide="settings" class="w-4 h-4"></i>
</button>
</span> </span>
</div> </div>
</div> </div>
@@ -252,6 +259,94 @@
</div> </div>
</div> </div>
<!-- Shortcuts Modal -->
<div id="shortcuts-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
<div class="bg-gray-800 w-full max-w-2xl rounded-xl border border-gray-700 shadow-2xl flex flex-col max-h-[80vh]">
<div class="p-6 border-b border-gray-700 flex justify-between items-center">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="keyboard" class="w-6 h-6 text-indigo-400"></i>
Keyboard Shortcuts
</h3>
<button id="close-shortcuts-modal" class="text-gray-400 hover:text-white transition-colors">
<i data-lucide="x" class="w-6 h-6"></i>
</button>
</div>
<div class="p-6 overflow-y-auto flex-grow">
<div class="flex justify-between items-center mb-6">
<div class="relative flex-grow mr-4">
<i data-lucide="search"
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500"></i>
<input type="text" id="shortcut-search" placeholder="Search shortcuts..."
class="w-full bg-gray-900 border border-gray-700 text-white rounded-lg pl-10 pr-4 py-2 focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
<div class="mb-4 p-3 bg-indigo-900/20 border border-indigo-500/30 rounded-lg flex items-start gap-3">
<i data-lucide="info" class="w-5 h-5 text-indigo-400 flex-shrink-0 mt-0.5"></i>
<p class="text-sm text-indigo-200">
Press and hold keys to set a shortcut. Changes are <strong>auto-saved</strong>.
<br><span class="text-yellow-300">⚠️ Avoid common browser shortcuts (Cmd/Ctrl+W, Cmd/Ctrl+T, Cmd/Ctrl+N
etc.) as they
may not work reliably.</span>
</p>
</div>
<div id="shortcuts-list" class="space-y-2">
<!-- Shortcuts will be populated here -->
</div>
</div>
<div class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl">
<div class="flex gap-3">
<button id="import-shortcuts-btn"
class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors">
<i data-lucide="upload" class="w-4 h-4"></i> Import
</button>
<button id="export-shortcuts-btn"
class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors">
<i data-lucide="download" class="w-4 h-4"></i> Export
</button>
</div>
<button id="reset-shortcuts-btn"
class="text-red-400 hover:text-red-300 text-sm font-medium transition-colors">
Reset to Defaults
</button>
</div>
</div>
</div>
<!-- Warning Modal -->
<div id="warning-modal"
class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
<div
class="bg-gray-800 rounded-xl border border-gray-700 shadow-2xl max-w-md w-full overflow-hidden animate-scale-in">
<div class="p-6">
<div class="flex items-start gap-4 mb-4">
<div id="warning-icon"
class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-500/10 flex-shrink-0">
<i data-lucide="alert-triangle" class="w-6 h-6 text-yellow-500"></i>
</div>
<div class="flex-1">
<h3 id="warning-title" class="text-xl font-bold text-white mb-2">Warning</h3>
<p id="warning-message" class="text-gray-300 text-sm leading-relaxed"></p>
</div>
</div>
</div>
<div class="flex gap-3 p-4 bg-gray-850 border-t border-gray-700">
<button id="warning-cancel-btn"
class="flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors">
Cancel
</button>
<button id="warning-confirm-btn"
class="flex-1 px-4 py-2.5 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg font-medium transition-colors">
Proceed
</button>
</div>
</div>
</div>
<div class="section-divider hide-section mb-20 mt-10"></div> <div class="section-divider hide-section mb-20 mt-10"></div>
<!-- COMPLIANCE SECTION START --> <!-- COMPLIANCE SECTION START -->
@@ -616,6 +711,9 @@
<div> <div>
<h3 class="font-bold text-white mb-4">Legal</h3> <h3 class="font-bold text-white mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400"> <ul class="space-y-2 text-gray-400">
<li>
<a href="./licensing.html" class="hover:text-indigo-400">Licensing</a>
</li>
<li> <li>
<a href="./terms.html" class="hover:text-indigo-400">Terms and Conditions</a> <a href="./terms.html" class="hover:text-indigo-400">Terms and Conditions</a>
</li> </li>
licensing.html
+656
View File
@@ -0,0 +1,656 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Licensing - BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
</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">Home</a>
<a href="./about.html" class="nav-link">About</a>
<a href="./contact.html" class="nav-link">Contact</a>
<a href="./licensing.html" class="nav-link">Licensing</a>
<a href="index.html#tools-header" class="nav-link">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">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="./licensing.html" class="mobile-nav-link">Licensing</a>
<a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
</div>
</div>
</nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<section id="licensing-hero" class="text-center py-16 md:py-24">
<h1 class="text-3xl md:text-6xl font-bold text-white mb-4">
Licensing for
<span class="marker-slanted">BentoPDF</span>
</h1>
<p class="text-lg md:text-xl text-gray-400">
Choose the license that fits your needs.
</p>
</section>
<div class="section-divider"></div>
<section id="licensing-options" class="py-16 max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Open Source License -->
<div class="bg-gray-800 rounded-xl p-8 border border-gray-700">
<div class="flex items-center gap-4 mb-6">
<i data-lucide="code-2" class="w-12 h-12 text-green-400 flex-shrink-0"></i>
<h2 class="text-3xl font-bold text-white">Open Source</h2>
</div>
<p class="text-gray-400 mb-6 leading-relaxed">
BentoPDF is licensed under the
<strong class="text-white">GNU Affero General Public License v3.0 (AGPL-3.0)</strong>.
You are free to use, modify, and distribute BentoPDF in your open-source projects.
</p>
<div class="space-y-4">
<div class="flex items-start gap-3">
<i data-lucide="check-circle" class="w-6 h-6 text-green-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-1">Free to Use</h3>
<p class="text-gray-400 text-sm">
Use BentoPDF for free in open-source projects where you
make your source code publicly available.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<i data-lucide="check-circle" class="w-6 h-6 text-green-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-1">
Modify & Distribute
</h3>
<p class="text-gray-400 text-sm">
Modify the source code and distribute your version, as long
as you comply with AGPL-3.0 requirements.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<i data-lucide="alert-circle" class="w-6 h-6 text-yellow-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-1">Share Alike</h3>
<p class="text-gray-400 text-sm">
Any modifications or derivative works must also be licensed
under AGPL-3.0 and made publicly available.
</p>
</div>
</div>
</div>
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="inline-block mt-8 px-6 py-3 rounded-lg bg-green-600 text-white font-semibold hover:bg-green-700 transition-colors">
View on GitHub
</a>
</div>
<!-- Commercial License -->
<div class="bg-gray-800 rounded-xl p-8 border border-indigo-500">
<div class="flex items-center gap-4 mb-6">
<i data-lucide="briefcase" class="w-12 h-12 text-indigo-400 flex-shrink-0"></i>
<h2 class="text-3xl font-bold text-white">Commercial</h2>
</div>
<p class="text-gray-400 mb-6 leading-relaxed">
If you want to use BentoPDF in a
<strong class="text-white">closed-source or proprietary application</strong>
without sharing your source code, you must purchase a commercial license.
</p>
<div class="space-y-4">
<div class="flex items-start gap-3">
<i data-lucide="lock" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-1">
Proprietary Use
</h3>
<p class="text-gray-400 text-sm">
Use BentoPDF in closed-source applications without the
obligation to disclose your source code.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<i data-lucide="shield-check" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-1">
Enterprise Support
</h3>
<p class="text-gray-400 text-sm">
Get priority support, custom features, and assistance with
integration.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<i data-lucide="zap" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-1">
Early Access to New Features
</h3>
<p class="text-gray-400 text-sm">
Commercial license holders get early access to new features and updates.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<i data-lucide="file-check" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-1">
Flexible Terms
</h3>
<p class="text-gray-400 text-sm">
Licensing terms tailored to your business needs and project
requirements.
</p>
</div>
</div>
</div>
<div
class="mt-8 bg-gradient-to-r from-indigo-900/40 to-purple-900/40 rounded-lg p-6 border border-indigo-500/50">
<div class="text-center">
<p class="text-white text-2xl font-bold mb-2">Lifetime License</p>
<p class="text-indigo-300 text-4xl font-bold mb-3">$49 <span
class="text-lg font-normal text-gray-400">one-time</span></p>
<p class="text-gray-300 text-sm mb-4">Includes all feature updates forever</p>
<a href="https://ko-fi.com/s/f32ca4cb75" target="_blank" rel="noopener noreferrer"
class="inline-block px-8 py-3 rounded-lg bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition-colors shadow-lg">
Purchase Lifetime License
</a>
</div>
</div>
<p class="mt-4 text-sm text-gray-400 italic text-center">
💡 Custom requests and development are available for separate charges. <a href="./contact.html"
class="text-indigo-400 hover:underline">Contact us</a> for details.
</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<section id="license-comparison" class="py-16 max-w-6xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-4">
Do I Need a <span class="marker-slanted">Commercial License?</span>
</h2>
<p class="text-center text-gray-400 mb-12 max-w-3xl mx-auto">
Use this quick reference chart to determine if your use case requires a commercial license.
</p>
<div class="overflow-x-auto">
<table class="w-full bg-gray-800 rounded-xl overflow-hidden border border-gray-700">
<thead>
<tr class="bg-gray-700">
<th class="px-6 py-4 text-left text-white font-semibold border-b border-gray-600">Use Case
</th>
<th class="px-6 py-4 text-center text-white font-semibold border-b border-gray-600 w-48">
License Required</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr class="hover:bg-gray-750 transition-colors">
<td class="px-6 py-4 text-gray-300">Personal use (not hosting as a service)</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-green-900/30 text-green-400 rounded-full text-sm font-semibold">
<i data-lucide="check" class="w-4 h-4"></i> AGPL (Free)
</span>
</td>
</tr>
<tr class="hover:bg-gray-750 transition-colors">
<td class="px-6 py-4 text-gray-300">Open-source project with publicly available source code
</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-green-900/30 text-green-400 rounded-full text-sm font-semibold">
<i data-lucide="check" class="w-4 h-4"></i> AGPL (Free)
</span>
</td>
</tr>
<tr class="hover:bg-gray-750 transition-colors">
<td class="px-6 py-4 text-gray-300">Public website where you share your full modified source
code under AGPL</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-green-900/30 text-green-400 rounded-full text-sm font-semibold">
<i data-lucide="check" class="w-4 h-4"></i> AGPL (Free)
</span>
</td>
</tr>
<tr class="hover:bg-gray-750 transition-colors">
<td class="px-6 py-4 text-gray-300">Educational/research project with publicly shared code
</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-green-900/30 text-green-400 rounded-full text-sm font-semibold">
<i data-lucide="check" class="w-4 h-4"></i> AGPL (Free)
</span>
</td>
</tr>
<tr class="bg-red-900/10 hover:bg-red-900/20 transition-colors">
<td class="px-6 py-4 text-gray-300 font-medium">SaaS or web application (closed-source)</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-red-900/30 text-red-400 rounded-full text-sm font-semibold">
<i data-lucide="shopping-cart" class="w-4 h-4"></i> Commercial
</span>
</td>
</tr>
<tr class="bg-red-900/10 hover:bg-red-900/20 transition-colors">
<td class="px-6 py-4 text-gray-300 font-medium">Internal company tool/dashboard (source not
shared with users)</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-red-900/30 text-red-400 rounded-full text-sm font-semibold">
<i data-lucide="shopping-cart" class="w-4 h-4"></i> Commercial
</span>
</td>
</tr>
<tr class="bg-red-900/10 hover:bg-red-900/20 transition-colors">
<td class="px-6 py-4 text-gray-300 font-medium">Commercial product (keeping source code
private)</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-red-900/30 text-red-400 rounded-full text-sm font-semibold">
<i data-lucide="shopping-cart" class="w-4 h-4"></i> Commercial
</span>
</td>
</tr>
<tr class="bg-red-900/10 hover:bg-red-900/20 transition-colors">
<td class="px-6 py-4 text-gray-300 font-medium">Network service where source code is not
accessible to users</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-red-900/30 text-red-400 rounded-full text-sm font-semibold">
<i data-lucide="shopping-cart" class="w-4 h-4"></i> Commercial
</span>
</td>
</tr>
<tr class="bg-red-900/10 hover:bg-red-900/20 transition-colors">
<td class="px-6 py-4 text-gray-300 font-medium">Any app where you want to keep modifications
private</td>
<td class="px-6 py-4 text-center">
<span
class="inline-flex items-center gap-2 px-3 py-1 bg-red-900/30 text-red-400 rounded-full text-sm font-semibold">
<i data-lucide="shopping-cart" class="w-4 h-4"></i> Commercial
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 text-center">
<p class="text-gray-400 text-sm">
Still not sure? <a href="./contact.html"
class="text-indigo-400 hover:underline font-semibold">Contact us</a> to discuss your specific
use case.
</p>
</div>
</section>
<div class="section-divider"></div>
<section id="agpl-requirements" class="py-16 max-w-6xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12">
AGPL <span class="marker-slanted">Requirements</span>
</h2>
<div class="bg-gray-800 rounded-xl p-8 border border-gray-700 mb-8">
<p class="text-gray-300 mb-6 leading-relaxed">
When using BentoPDF under AGPL-3.0, you must comply with the following requirements:
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex items-start gap-3">
<i data-lucide="file-text" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-2">Producer Line & Copyright</h3>
<p class="text-gray-400 text-sm">
You should mention our open-source and include AGPL license details in the PDF metadata.
You should also retain the producer line in all PDFs created or modified using our
open-source.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<i data-lucide="code" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-2">Code Modifications</h3>
<p class="text-gray-400 text-sm">
Any modifications to our open-source must be disclosed under the AGPL. This includes
sharing the modified code with any users interacting with it.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<i data-lucide="check-circle-2" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-2">AGPL-Compliant Environments Only</h3>
<p class="text-gray-400 text-sm">
Usage of our open-source Community Edition must be limited to AGPL-compliant
environments, where all AGPL requirements are fully respected.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<i data-lucide="git-branch" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-white font-semibold mb-2">Source Code Disclosure</h3>
<p class="text-gray-400 text-sm">
You cannot deploy our open-source as part of a server-based application or service
without disclosing your own application's full source code under AGPL to any users
interacting with it.
</p>
</div>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<section id="agpl-compliance" class="py-16 max-w-6xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12">
What is <span class="marker-slanted">AGPL-Compliant?</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- AGPL-Compliant -->
<div class="bg-green-900/20 border-2 border-green-500/30 rounded-xl p-6">
<div class="flex items-center gap-3 mb-4">
<i data-lucide="check-circle" class="w-8 h-8 text-green-400"></i>
<h3 class="text-2xl font-bold text-white">AGPL-Compliant</h3>
</div>
<ul class="space-y-3">
<li class="flex items-start gap-2">
<i data-lucide="check" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Open-source projects where you share your full source
code publicly</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="check" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Personal use where you're not distributing or hosting it
as a service</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="check" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Publicly hosted tools where you provide the complete
source code (including modifications) under AGPL</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="check" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Educational or research projects that make all code
publicly available</span>
</li>
</ul>
</div>
<!-- NOT AGPL-Compliant -->
<div class="bg-red-900/20 border-2 border-red-500/30 rounded-xl p-6">
<div class="flex items-center gap-3 mb-4">
<i data-lucide="x-circle" class="w-8 h-8 text-red-400"></i>
<h3 class="text-2xl font-bold text-white">NOT AGPL-Compliant</h3>
</div>
<ul class="space-y-3">
<li class="flex items-start gap-2">
<i data-lucide="x" class="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Proprietary/closed-source SaaS applications</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="x" class="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Internal company tools where source code is not shared
with users</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="x" class="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Commercial products that don't disclose the full source
code</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="x" class="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Network services that don't provide source code access
to users</span>
</li>
<li class="flex items-start gap-2">
<i data-lucide="x" class="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5"></i>
<span class="text-gray-300 text-sm">Any application where you want to keep your source code
private</span>
</li>
</ul>
<p class="mt-4 text-sm text-yellow-400 italic">
⚠️ These use cases require a commercial license.
</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<section id="licensing-faq" class="py-16 max-w-4xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12">
Licensing <span class="marker-slanted">FAQs</span>
</h2>
<div id="faq-accordion" class="space-y-4">
<div class="faq-item bg-gray-800 rounded-lg border border-gray-700">
<button class="faq-question w-full flex justify-between items-center text-left p-6">
<span class="text-lg font-semibold text-white">Do I need a commercial license if I'm using
BentoPDF on my
website?</span>
<i data-lucide="chevron-down" class="faq-icon w-6 h-6 text-gray-400 transition-transform"></i>
</button>
<div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
<p class="p-6 pt-0 text-gray-400">
If you're using BentoPDF on a public website and have not modified the
source code, you do not need a commercial license. However, if you modify
BentoPDF in any way and make it available to users over a network, the
AGPLv3 requires you to provide your modified source code to those users.
If you want to keep your modifications closed-source, or if you are
integrating BentoPDF into a proprietary or commercial product, you will
need a commercial license. Contact us to discuss your specific use case.
</p>
</div>
</div>
<div class="faq-item bg-gray-800 rounded-lg border border-gray-700">
<button class="faq-question w-full flex justify-between items-center text-left p-6">
<span class="text-lg font-semibold text-white">Can I use BentoPDF for internal company
tools?</span>
<i data-lucide="chevron-down" class="faq-icon w-6 h-6 text-gray-400 transition-transform"></i>
</button>
<div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
<p class="p-6 pt-0 text-gray-400">
If your internal tool is closed-source and not shared publicly,
you will need a commercial license. The AGPL-3.0 license
requires that you make the source code of any network-accessible
service using BentoPDF available to its users. If you cannot or
do not want to do that, a commercial license is the right
choice.
</p>
</div>
</div>
<div class="faq-item bg-gray-800 rounded-lg border border-gray-700">
<button class="faq-question w-full flex justify-between items-center text-left p-6">
<span class="text-lg font-semibold text-white">What if I modify BentoPDF for my own use?</span>
<i data-lucide="chevron-down" class="faq-icon w-6 h-6 text-gray-400 transition-transform"></i>
</button>
<div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
<p class="p-6 pt-0 text-gray-400">
If you modify BentoPDF and deploy it as a network service
(e.g., a web application), you must make your modified source
code available under AGPL-3.0. If you do not want to share your
modifications, you must obtain a commercial license.
</p>
</div>
</div>
<div class="faq-item bg-gray-800 rounded-lg border border-gray-700">
<button class="faq-question w-full flex justify-between items-center text-left p-6">
<span class="text-lg font-semibold text-white">How do I purchase a commercial license?</span>
<i data-lucide="chevron-down" class="faq-icon w-6 h-6 text-gray-400 transition-transform"></i>
</button>
<div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
<p class="p-6 pt-0 text-gray-400">
BentoPDF is available under a lifetime, one-time purchase commercial license.
You can purchase it directly here:
<a href="https://ko-fi.com/s/f32ca4cb75" class="text-indigo-400 hover:underline">Buy Commercial License</a>.
<br><br>
If you have specific requirements or want a custom licensing arrangement,
feel free to <a href="./contact.html" class="text-indigo-400 hover:underline">contact us</a>
with details about your use case, company size, and deployment needs.
We're happy to work with you to find the best fit.
</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<section id="cta-section" class="text-center py-16">
<h2 class="text-3xl font-bold text-white mb-4">
Still have questions?
</h2>
<p class="text-lg text-gray-400 mb-8 max-w-2xl mx-auto">
We're here to help. Reach out to discuss your licensing needs.
</p>
<a href="./contact.html"
class="inline-block px-8 py-3 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">
Contact Us
</a>
</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">
&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/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/q42xWQmJ" 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/faq.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
</body>
</html>
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "bento-pdf", "name": "bento-pdf",
"private": true, "private": true,
"version": "1.7.6", "version": "1.7.8",
"license": "Apache-2.0", "license": "Apache-2.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
privacy.html
+263 -303
View File
@@ -1,319 +1,279 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Privacy Policy - BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
</head>
<body class="antialiased bg-gray-900 text-gray-300"> <head>
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <meta charset="UTF-8" />
<div class="container mx-auto px-4"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="flex justify-between items-center h-16"> <title>Privacy Policy - BentoPDF</title>
<div <link href="/src/css/styles.css" rel="stylesheet" />
class="flex-shrink-0 flex items-center cursor-pointer" </head>
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 --> <body class="antialiased bg-gray-900 text-gray-300">
<div class="hidden md:flex items-center space-x-8"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<a href="index.html" class="nav-link">Home</a> <div class="container mx-auto px-4">
<a href="./about.html" class="nav-link">About</a> <div class="flex justify-between items-center h-16">
<a href="./contact.html" class="nav-link">Contact</a> <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<a href="index.html#tools-header" class="nav-link">All Tools</a> <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
</div> <span class="text-white font-bold text-xl ml-2">
<a href="index.html">BentoPDF</a>
</span>
</div>
<!-- Mobile Hamburger Button --> <!-- Desktop Navigation -->
<div class="md:hidden flex items-center"> <div class="hidden md:flex items-center space-x-8">
<button <a href="index.html" class="nav-link">Home</a>
id="mobile-menu-button" <a href="./about.html" class="nav-link">About</a>
type="button" <a href="./contact.html" class="nav-link">Contact</a>
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" <a href="./licensing.html" class="nav-link">Licensing</a>
aria-controls="mobile-menu" <a href="index.html#tools-header" class="nav-link">All Tools</a>
aria-expanded="false" </div>
>
<span class="sr-only">Open main menu</span> <!-- Mobile Hamburger Button -->
<!-- Hamburger Icon --> <div class="md:hidden flex items-center">
<svg <button id="mobile-menu-button" type="button"
id="menu-icon" 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"
class="block h-6 w-6" aria-controls="mobile-menu" aria-expanded="false">
xmlns="http://www.w3.org/2000/svg" <span class="sr-only">Open main menu</span>
fill="none" <!-- Hamburger Icon -->
viewBox="0 0 24 24" <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" stroke="currentColor" aria-hidden="true">
aria-hidden="true" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
> </svg>
<path <!-- Close Icon -->
stroke-linecap="round" <svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
stroke-linejoin="round" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
d="M4 6h16M4 12h16M4 18h16" </svg>
/> </button>
</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>
</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">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link"
>All Tools</a
>
</div>
</div>
</nav>
<div id="app" class="container mx-auto p-4 md:p-8">
<section class="max-w-4xl mx-auto py-12">
<h1 class="text-4xl md:text-5xl font-bold text-center text-white mb-4">
Privacy Policy
</h1>
<p class="text-center text-gray-500">
Last Updated: September 14, 2025
</p>
<div class="legal-content mt-12">
<h2>1. Our Commitment to Privacy</h2>
<p>
BentoPDF ("we", "us", "our") is fundamentally a privacy-focused
service. This Privacy Policy outlines our unwavering commitment to
protecting your privacy. Our core principle is simple:
<strong>your files are your files</strong>. We do not and cannot
view, access, store, or share your documents. All PDF processing
occurs entirely on your own computer, within your web browser
(client-side).
</p>
<h3>1.1 The Client-Side Principle</h3>
<p>
Unlike other online PDF services, BentoPDF does not upload your
files to a server for processing. The tools you use are powered by
JavaScript and WebAssembly libraries that run directly on your
device. This means your data never leaves your computer, providing
you with the highest level of privacy and security.
</p>
<h2>2. Information We Do Not Collect</h2>
<p>
Because of our client-side architecture, we are technically
incapable of collecting the following information:
</p>
<ul>
<li>
The content of your PDF files or any other documents you use with
our tools.
</li>
<li>Any personal data contained within your documents.</li>
<li>Filenames of your documents.</li>
<li>
Any derived information or metadata from your files, beyond what
is necessary for the tool to function during your active session
(and this is immediately discarded).
</li>
</ul>
<h2>3. Information We May Collect (Non-Personal Data)</h2>
<p>
To improve our website and services, we may collect anonymous,
non-personally identifiable information. This type of data helps us
understand how users interact with our site, which tools are most
popular, and how we can improve the user experience. This includes:
</p>
<ul>
<li>
<strong>Usage Analytics:</strong> Anonymized data such as which
tools are used, how often they are used, and which features are
accessed. This is aggregated and cannot be tied back to an
individual user or document.
</li>
<li>
<strong>Performance Data:</strong> Anonymized error reports or
performance metrics to help us identify and fix bugs. This data
contains no personal information or file content.
</li>
</ul>
<p>
We use privacy-respecting analytics platforms for this purpose.
Specifically, we use
<a
href="https://simpleanalytics.com"
target="_blank"
rel="noopener noreferrer"
class="text-indigo-400 hover:underline"
>Simple Analytics</a
>
to track anonymous visit counts. This means we can see how many
users visit our site, but
<strong
>we never collect personal information or identify individual
users</strong
>. Simple Analytics is fully GDPR-compliant and respects user
privacy. We do not use tracking cookies for advertising or
cross-site profiling.
</p>
<h2>4. Third-Party Libraries</h2>
<p>
BentoPDF is built using powerful, open-source libraries like
PDF-lib.js and PDF.js. These libraries are trusted by developers
worldwide and operate under the same client-side principle. While we
have vetted these libraries, we encourage you to review their
respective privacy policies for your own peace of mind.
</p>
<h2>5. Security</h2>
<p>
Since your files are never transmitted over the internet to our
servers, you are protected from potential data breaches during
transit or storage on a server. The security of your documents is in
your hands and protected by the security of your own computer and
web browser.
</p>
<h2>6. Children's Privacy</h2>
<p>
Our services are not directed at individuals under the age of 13. We
do not knowingly collect any personal information from children. If
you believe a child has provided us with personal information,
please contact us, and we will take steps to delete such
information.
</p>
<h2>7. Changes to This Privacy Policy</h2>
<p>
We may update this Privacy Policy from time to time. We will notify
you of any changes by posting the new policy on this page and
updating the "Last Updated" date at the top. You are advised to
review this Privacy Policy periodically for any changes.
</p>
<h2>8. Contact Us</h2>
<p>
If you have any questions about this Privacy Policy, please contact
us at
<a href="mailto:contact@bentopdf.com">contact@bentopdf.com</a>.
</p>
</div>
</section>
</div> </div>
<footer class="mt-16 border-t-2 border-gray-700 py-8"> <!-- Mobile Menu Dropdown -->
<div class="container mx-auto px-4"> <div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left"> <div class="px-2 pt-2 pb-3 space-y-1 text-center">
<div class="mb-8 md:mb-0"> <a href="index.html" class="mobile-nav-link">Home</a>
<div class="flex items-center justify-center md:justify-start mb-4"> <a href="./about.html" class="mobile-nav-link">About</a>
<img src="images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" /> <a href="./contact.html" class="mobile-nav-link">Contact</a>
<span class="text-xl font-bold text-white">BentoPDF</span> <a href="./licensing.html" class="mobile-nav-link">Licensing</a>
</div> <a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
<p class="text-gray-400 text-sm"> </div>
&copy; 2025 BentoPDF. All rights reserved. </div>
</p> </nav>
<p class="text-gray-500 text-xs mt-2">
Version <span id="app-version"></span>
</p>
</div>
<div> <div id="app" class="container mx-auto p-4 md:p-8">
<h3 class="font-bold text-white mb-4">Company</h3> <section class="max-w-4xl mx-auto py-12">
<ul class="space-y-2 text-gray-400"> <h1 class="text-4xl md:text-5xl font-bold text-center text-white mb-4">
<li> Privacy Policy
<a href="./about.html" class="hover:text-indigo-400">About Us</a> </h1>
</li> <p class="text-center text-gray-500">
<li> Last Updated: September 14, 2025
<a href="./faq.html" class="hover:text-indigo-400">FAQ</a> </p>
</li>
<li>
<a href="./contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div> <div class="legal-content mt-12">
<h3 class="font-bold text-white mb-4">Legal</h3> <h2>1. Our Commitment to Privacy</h2>
<ul class="space-y-2 text-gray-400"> <p>
<li> BentoPDF ("we", "us", "our") is fundamentally a privacy-focused
<a href="./terms.html" class="hover:text-indigo-400">Terms and Conditions</a> service. This Privacy Policy outlines our unwavering commitment to
</li> protecting your privacy. Our core principle is simple:
<li> <strong>your files are your files</strong>. We do not and cannot
<a href="./privacy.html" class="hover:text-indigo-400">Privacy Policy</a> view, access, store, or share your documents. All PDF processing
</li> occurs entirely on your own computer, within your web browser
</ul> (client-side).
</div> </p>
<div> <h3>1.1 The Client-Side Principle</h3>
<h3 class="font-bold text-white mb-4">Follow Us</h3> <p>
<div class="flex justify-center md:justify-start space-x-4"> Unlike other online PDF services, BentoPDF does not upload your
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer" files to a server for processing. The tools you use are powered by
class="text-gray-400 hover:text-indigo-400" title="GitHub"> JavaScript and WebAssembly libraries that run directly on your
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> device. This means your data never leaves your computer, providing
<path fill-rule="evenodd" you with the highest level of privacy and security.
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" </p>
clip-rule="evenodd" />
</svg> <h2>2. Information We Do Not Collect</h2>
</a> <p>
<a href="https://discord.gg/q42xWQmJ" target="_blank" rel="noopener noreferrer" Because of our client-side architecture, we are technically
class="text-gray-400 hover:text-indigo-400" title="Discord"> incapable of collecting the following information:
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> </p>
<path <ul>
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" /> <li>
</svg> The content of your PDF files or any other documents you use with
</a> our tools.
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400" </li>
title="Instagram"> <li>Any personal data contained within your documents.</li>
<i data-lucide="instagram"></i> <li>Filenames of your documents.</li>
</a> <li>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400" Any derived information or metadata from your files, beyond what
title="LinkedIn"> is necessary for the tool to function during your active session
<i data-lucide="linkedin"></i> (and this is immediately discarded).
</a> </li>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)"> </ul>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path <h2>3. Information We May Collect (Non-Personal Data)</h2>
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" /> <p>
</svg> To improve our website and services, we may collect anonymous,
</a> non-personally identifiable information. This type of data helps us
</div> understand how users interact with our site, which tools are most
popular, and how we can improve the user experience. This includes:
</p>
<ul>
<li>
<strong>Usage Analytics:</strong> Anonymized data such as which
tools are used, how often they are used, and which features are
accessed. This is aggregated and cannot be tied back to an
individual user or document.
</li>
<li>
<strong>Performance Data:</strong> Anonymized error reports or
performance metrics to help us identify and fix bugs. This data
contains no personal information or file content.
</li>
</ul>
<p>
We use privacy-respecting analytics platforms for this purpose.
Specifically, we use
<a href="https://simpleanalytics.com" target="_blank" rel="noopener noreferrer"
class="text-indigo-400 hover:underline">Simple Analytics</a>
to track anonymous visit counts. This means we can see how many
users visit our site, but
<strong>we never collect personal information or identify individual
users</strong>. Simple Analytics is fully GDPR-compliant and respects user
privacy. We do not use tracking cookies for advertising or
cross-site profiling.
</p>
<h2>4. Third-Party Libraries</h2>
<p>
BentoPDF is built using powerful, open-source libraries like
PDF-lib.js and PDF.js. These libraries are trusted by developers
worldwide and operate under the same client-side principle. While we
have vetted these libraries, we encourage you to review their
respective privacy policies for your own peace of mind.
</p>
<h2>5. Security</h2>
<p>
Since your files are never transmitted over the internet to our
servers, you are protected from potential data breaches during
transit or storage on a server. The security of your documents is in
your hands and protected by the security of your own computer and
web browser.
</p>
<h2>6. Children's Privacy</h2>
<p>
Our services are not directed at individuals under the age of 13. We
do not knowingly collect any personal information from children. If
you believe a child has provided us with personal information,
please contact us, and we will take steps to delete such
information.
</p>
<h2>7. Changes to This Privacy Policy</h2>
<p>
We may update this Privacy Policy from time to time. We will notify
you of any changes by posting the new policy on this page and
updating the "Last Updated" date at the top. You are advised to
review this Privacy Policy periodically for any changes.
</p>
<h2>8. Contact Us</h2>
<p>
If you have any questions about this Privacy Policy, please contact
us at
<a href="mailto:contact@bentopdf.com">contact@bentopdf.com</a>.
</p>
</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">
&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/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/q42xWQmJ" 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>
</div> </div>
</footer> </div>
<script type="module" src="src/js/utils/lucide-init.ts"></script> </footer>
<script type="module" src="src/version.ts"></script> <script type="module" src="src/js/utils/lucide-init.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script> <script type="module" src="src/version.ts"></script>
</body> <script type="module" src="src/js/mobileMenu.ts"></script>
</body>
</html> </html>
src/css/styles.css
+60
View File
@@ -521,3 +521,63 @@ button:disabled,
.btn:disabled { .btn:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
/* Keyboard Shortcuts Styles */
.shortcut-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.25rem;
font-size: 0.75rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
line-height: 1;
color: #e5e7eb;
background-color: #374151;
border: 1px solid #4b5563;
border-radius: 0.25rem;
box-shadow: 0 1px 0 0 #1f2937;
}
.shortcut-input {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
letter-spacing: 0.05em;
}
.shortcut-input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
/* Custom Scrollbar for Modal Content */
#shortcuts-list::-webkit-scrollbar {
width: 6px;
}
#shortcuts-list::-webkit-scrollbar-track {
background: #1f2937;
}
#shortcuts-list::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 3px;
}
#shortcuts-list::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
/* Hide elements on touch devices */
@media (pointer: coarse) {
.hidden-on-touch {
display: none !important;
}
}
/* Also hide on very small screens just in case */
@media (max-width: 640px) {
.hidden-on-touch {
display: none !important;
}
}
src/js/faq.ts
+23
View File
@@ -0,0 +1,23 @@
// Simple FAQ accordion handler for standalone pages
document.addEventListener('DOMContentLoaded', () => {
const faqAccordion = document.getElementById('faq-accordion');
if (faqAccordion) {
faqAccordion.addEventListener('click', (e) => {
const questionButton = (e.target as HTMLElement).closest('.faq-question');
if (!questionButton) return;
const faqItem = questionButton.parentElement;
const answer = faqItem?.querySelector('.faq-answer') as HTMLElement;
if (!faqItem || !answer) return;
faqItem.classList.toggle('open');
if (faqItem.classList.contains('open')) {
answer.style.maxHeight = answer.scrollHeight + 'px';
} else {
answer.style.maxHeight = '0px';
}
});
}
});
src/js/logic/add-stamps.ts
+5 -2
View File
@@ -1,4 +1,5 @@
import { formatBytes, readFileAsArrayBuffer } from '../utils/helpers' import { formatBytes, readFileAsArrayBuffer } from '../utils/helpers'
import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js'
let selectedFile: File | null = null let selectedFile: File | null = null
let viewerIframe: HTMLIFrameElement | null = null let viewerIframe: HTMLIFrameElement | null = null
@@ -67,7 +68,7 @@ async function loadPdfInViewer(file: File) {
enablePermissions: false, enablePermissions: false,
} }
localStorage.setItem('pdfjs.preferences', JSON.stringify(newPrefs)) localStorage.setItem('pdfjs.preferences', JSON.stringify(newPrefs))
} catch {} } catch { }
const iframe = document.createElement('iframe') const iframe = document.createElement('iframe')
iframe.className = 'w-full h-full border-0' iframe.className = 'w-full h-full border-0'
@@ -103,7 +104,7 @@ function setupAnnotationViewer(iframe: HTMLIFrameElement) {
try { try {
const stampBtn = doc.getElementById('editorStampButton') as HTMLButtonElement | null const stampBtn = doc.getElementById('editorStampButton') as HTMLButtonElement | null
stampBtn?.click() stampBtn?.click()
} catch {} } catch { }
}) })
} }
@@ -174,3 +175,5 @@ if (backToToolsBtn) {
window.location.href = '/' window.location.href = '/'
}) })
} }
initializeGlobalShortcuts()
src/js/logic/bookmark-pdf.ts
+3
View File
@@ -6,6 +6,7 @@ import * as pdfjsLib from 'pdfjs-dist';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import { createIcons, icons } from 'lucide'; import { createIcons, icons } from 'lucide';
import '../../css/bookmark.css'; import '../../css/bookmark.css';
import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs', 'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -453,6 +454,8 @@ function cancelDestinationPicking() {
// Setup canvas click handler for destination picking // Setup canvas click handler for destination picking
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initializeGlobalShortcuts();
const canvas = document.getElementById('pdf-canvas'); const canvas = document.getElementById('pdf-canvas');
const canvasWrapper = document.getElementById('pdf-canvas-wrapper'); const canvasWrapper = document.getElementById('pdf-canvas-wrapper');
const cancelPickingBtn = document.getElementById('cancel-picking-btn'); const cancelPickingBtn = document.getElementById('cancel-picking-btn');
src/js/logic/json-to-pdf.ts
+6 -5
View File
@@ -1,5 +1,6 @@
import JSZip from 'jszip' import JSZip from 'jszip'
import { downloadFile, formatBytes, readFileAsArrayBuffer } from '../utils/helpers'; import { downloadFile, formatBytes, readFileAsArrayBuffer } from '../utils/helpers';
import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js';
const worker = new Worker(new URL('/workers/json-to-pdf.worker.js', import.meta.url)); const worker = new Worker(new URL('/workers/json-to-pdf.worker.js', import.meta.url));
@@ -17,10 +18,10 @@ function showStatus(
) { ) {
statusMessage.textContent = message statusMessage.textContent = message
statusMessage.className = `mt-4 p-3 rounded-lg text-sm ${type === 'success' statusMessage.className = `mt-4 p-3 rounded-lg text-sm ${type === 'success'
? 'bg-green-900 text-green-200' ? 'bg-green-900 text-green-200'
: type === 'error' : type === 'error'
? 'bg-red-900 text-red-200' ? 'bg-red-900 text-red-200'
: 'bg-blue-900 text-blue-200' : 'bg-blue-900 text-blue-200'
}` }`
statusMessage.classList.remove('hidden') statusMessage.classList.remove('hidden')
} }
@@ -155,4 +156,4 @@ convertBtn.addEventListener('click', convertJSONsToPDF)
// Initialize // Initialize
showStatus('Select JSON files to get started', 'info') showStatus('Select JSON files to get started', 'info')
initializeGlobalShortcuts()
src/js/logic/merge.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { showLoader, hideLoader, showAlert } from '../ui.ts'; import { showLoader, hideLoader, showAlert } from '../ui.ts';
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.ts'; import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.ts';
import { state } from '../state.ts'; import { state } from '../state.ts';
import { renderPagesProgressively, cleanupLazyRendering } from '../utils/render-utils.ts'; import { renderPagesProgressively, cleanupLazyRendering, createPlaceholder } from '../utils/render-utils.ts';
import { createIcons, icons } from 'lucide'; import { createIcons, icons } from 'lucide';
import { PDFDocument as PDFLibDocument } from 'pdf-lib'; import { PDFDocument as PDFLibDocument } from 'pdf-lib';
@@ -202,7 +202,7 @@ async function renderPageMergeThumbnails() {
onProgress: (current, total) => { onProgress: (current, total) => {
currentPageNumber++; currentPageNumber++;
showLoader( showLoader(
`Rendering page previews: ${currentPageNumber}/${totalPages}` `Rendering page previews...`
); );
}, },
onBatchComplete: () => { onBatchComplete: () => {
src/js/logic/pdf-multi-tool.ts
+44 -7
View File
@@ -5,6 +5,7 @@ import JSZip from 'jszip';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import { downloadFile } from '../utils/helpers'; import { downloadFile } from '../utils/helpers';
import { renderPagesProgressively, cleanupLazyRendering, renderPageToCanvas, createPlaceholder } from '../utils/render-utils'; import { renderPagesProgressively, cleanupLazyRendering, renderPageToCanvas, createPlaceholder } from '../utils/render-utils';
import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs', 'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -20,6 +21,7 @@ interface PageData {
canvas: HTMLCanvasElement | null; canvas: HTMLCanvasElement | null;
pdfDoc: PDFLibDocument; pdfDoc: PDFLibDocument;
originalPageIndex: number; originalPageIndex: number;
fileName: string; // Added for lazy loading identification
} }
function generateId(): string { function generateId(): string {
@@ -104,7 +106,7 @@ function showLoading(current: number, total: number) {
loader.classList.remove('hidden'); loader.classList.remove('hidden');
const percentage = Math.round((current / total) * 100); const percentage = Math.round((current / total) * 100);
progress.style.width = `${percentage}%`; progress.style.width = `${percentage}%`;
text.textContent = `Rendering pages... ${current} of ${total}`; text.textContent = `Rendering pages...`;
} }
async function withButtonLoading(buttonId: string, action: () => Promise<void>) { async function withButtonLoading(buttonId: string, action: () => Promise<void>) {
@@ -146,6 +148,8 @@ function initializeTool() {
console.log('PDF Multi Tool: Initializing...'); console.log('PDF Multi Tool: Initializing...');
createIcons({ icons }); createIcons({ icons });
initializeGlobalShortcuts();
document.getElementById('close-tool-btn')?.addEventListener('click', () => { document.getElementById('close-tool-btn')?.addEventListener('click', () => {
window.location.href = '/'; window.location.href = '/';
}); });
@@ -198,6 +202,18 @@ function initializeTool() {
}); });
}); });
document.getElementById('select-all-btn')?.addEventListener('click', () => {
if (isRendering) return;
snapshot();
selectAll();
});
document.getElementById('deselect-all-btn')?.addEventListener('click', () => {
if (isRendering) return;
snapshot();
deselectAll();
});
document.getElementById('export-pdf-btn')?.addEventListener('click', () => { document.getElementById('export-pdf-btn')?.addEventListener('click', () => {
if (isRendering) return; if (isRendering) return;
if (allPages.length === 0) { if (allPages.length === 0) {
@@ -356,6 +372,7 @@ async function loadPdfs(files: File[]) {
canvas: null, // Will be filled when rendered canvas: null, // Will be filled when rendered
pdfDoc, pdfDoc,
originalPageIndex: i, originalPageIndex: i,
fileName: file.name,
}); });
} }
@@ -402,6 +419,9 @@ async function loadPdfs(files: File[]) {
if (renderCancelled) { if (renderCancelled) {
renderCancelled = false; renderCancelled = false;
} }
if (allPages.length === 0) {
resetAll();
}
} }
} }
@@ -431,14 +451,22 @@ function createPageElement(canvas: HTMLCanvasElement | null, index: number): HTM
card.className = 'bg-gray-800 rounded-lg border-2 border-gray-700 p-2 relative group cursor-move'; card.className = 'bg-gray-800 rounded-lg border-2 border-gray-700 p-2 relative group cursor-move';
card.dataset.pageIndex = index.toString(); card.dataset.pageIndex = index.toString();
card.dataset.pageId = pageData.id; // Set ID for reconciliation card.dataset.pageId = pageData.id; // Set ID for reconciliation
// Add attributes for lazy loading identification
card.dataset.pageNumber = (pageData.pageIndex + 1).toString();
if (pageData.fileName) {
card.dataset.fileName = pageData.fileName;
}
if (!pageData.canvas) {
card.dataset.lazyLoad = 'true';
}
if (selectedPages.has(index)) { if (selectedPages.has(index)) {
card.classList.add('border-indigo-500', 'ring-2', 'ring-indigo-500'); card.classList.add('border-indigo-500', 'ring-2', 'ring-indigo-500');
} }
const preview = document.createElement('div'); const preview = document.createElement('div');
preview.className = 'bg-white rounded mb-2 overflow-hidden w-full flex items-center justify-center relative'; preview.className = 'bg-white rounded mb-2 overflow-hidden w-full flex items-center justify-center relative h-36 sm:h-64';
preview.style.minHeight = '160px';
preview.style.height = '250px';
if (canvas) { if (canvas) {
const previewCanvas = canvas; const previewCanvas = canvas;
@@ -574,6 +602,9 @@ function setupSortable() {
fallbackTolerance: 3, fallbackTolerance: 3,
delay: 200, delay: 200,
delayOnTouchOnly: true, delayOnTouchOnly: true,
scroll: document.getElementById('main-scroll-container'),
scrollSensitivity: 100, // Increase sensitivity for smoother scrolling
bubbleScroll: false, // Prevent bubbling scroll to parent
onEnd: (evt) => { onEnd: (evt) => {
const oldIndex = evt.oldIndex!; const oldIndex = evt.oldIndex!;
const newIndex = evt.newIndex!; const newIndex = evt.newIndex!;
@@ -724,6 +755,7 @@ async function handleInsertPdf(e: Event) {
canvas: null, // Placeholder canvas: null, // Placeholder
pdfDoc, pdfDoc,
originalPageIndex: i, originalPageIndex: i,
fileName: file.name,
}); });
} }
@@ -752,9 +784,7 @@ async function handleInsertPdf(e: Event) {
if (preview) { if (preview) {
// Re-create the preview content // Re-create the preview content
preview.innerHTML = ''; preview.innerHTML = '';
preview.className = 'bg-white rounded mb-2 overflow-hidden w-full flex items-center justify-center relative'; preview.className = 'bg-white rounded mb-2 overflow-hidden w-full flex items-center justify-center relative h-36 sm:h-64';
(preview as HTMLElement).style.minHeight = '160px';
(preview as HTMLElement).style.height = '250px';
const previewCanvas = canvas; const previewCanvas = canvas;
previewCanvas.className = 'max-w-full max-h-full object-contain'; previewCanvas.className = 'max-w-full max-h-full object-contain';
@@ -814,6 +844,7 @@ function addBlankPage() {
canvas, canvas,
pdfDoc: null as any, pdfDoc: null as any,
originalPageIndex: -1, originalPageIndex: -1,
fileName: '', // Blank page has no file
}; };
allPages.push(blankPageData); allPages.push(blankPageData);
@@ -1066,6 +1097,12 @@ function updatePageDisplay() {
}; };
} }
// Update visual rotation
const canvas = card.querySelector('canvas');
if (canvas) {
canvas.style.transform = `rotate(${pageData.visualRotation}deg)`;
}
// Update action buttons // Update action buttons
const actionsInner = card.querySelector('.flex.items-center.gap-1.bg-gray-900\\/90'); const actionsInner = card.querySelector('.flex.items-center.gap-1.bg-gray-900\\/90');
if (actionsInner) { if (actionsInner) {
src/js/logic/pdf-to-json.ts
+6 -6
View File
@@ -1,5 +1,6 @@
import JSZip from 'jszip' import JSZip from 'jszip'
import { downloadFile, formatBytes, readFileAsArrayBuffer } from '../utils/helpers'; import { downloadFile, formatBytes, readFileAsArrayBuffer } from '../utils/helpers';
import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js';
const worker = new Worker(new URL('/workers/pdf-to-json.worker.js', import.meta.url)); const worker = new Worker(new URL('/workers/pdf-to-json.worker.js', import.meta.url));
@@ -17,10 +18,10 @@ function showStatus(
) { ) {
statusMessage.textContent = message statusMessage.textContent = message
statusMessage.className = `mt-4 p-3 rounded-lg text-sm ${type === 'success' statusMessage.className = `mt-4 p-3 rounded-lg text-sm ${type === 'success'
? 'bg-green-900 text-green-200' ? 'bg-green-900 text-green-200'
: type === 'error' : type === 'error'
? 'bg-red-900 text-red-200' ? 'bg-red-900 text-red-200'
: 'bg-blue-900 text-blue-200' : 'bg-blue-900 text-blue-200'
}` }`
statusMessage.classList.remove('hidden') statusMessage.classList.remove('hidden')
} }
@@ -149,6 +150,5 @@ if (backToToolsBtn) {
convertBtn.addEventListener('click', convertPDFsToJSON) convertBtn.addEventListener('click', convertPDFsToJSON)
// Initialize
showStatus('Select PDF files to get started', 'info') showStatus('Select PDF files to get started', 'info')
initializeGlobalShortcuts()
src/js/logic/shortcuts.ts
+189
View File
@@ -0,0 +1,189 @@
import { setupToolInterface } from '../handlers/toolSelectionHandler.js';
import { categories } from '../config/tools.js';
export class ShortcutsManager {
private static STORAGE_KEY = 'bentopdf_shortcuts';
private static shortcuts: Map<string, string> = new Map();
private static defaultShortcuts: Map<string, string> = new Map();
private static getToolId(tool: any): string {
if (tool.id) return tool.id;
if (tool.href) {
// Extract filename without extension from href
const match = tool.href.match(/\/([^/]+)\.html$/);
return match ? match[1] : tool.href;
}
return 'unknown';
}
static init() {
this.loadDefaults();
this.loadFromStorage();
this.setupGlobalListener();
}
private static loadDefaults() {
this.defaultShortcuts.set('merge', 'mod+shift+m');
this.defaultShortcuts.set('split', 'mod+shift+s');
this.defaultShortcuts.set('compress', 'mod+shift+c');
}
private static loadFromStorage() {
const stored = localStorage.getItem(this.STORAGE_KEY);
if (stored) {
try {
const parsed = JSON.parse(stored);
this.shortcuts = new Map(Object.entries(parsed));
const allTools = categories.flatMap(c => c.tools);
const validToolIds = allTools.map(t => this.getToolId(t));
for (const [toolId, _] of this.shortcuts.entries()) {
if (!validToolIds.includes(toolId)) {
this.shortcuts.delete(toolId);
}
}
if (this.shortcuts.size !== Object.keys(parsed).length) {
this.save();
}
} catch (e) {
console.error('Failed to parse shortcuts from local storage', e);
this.shortcuts = new Map(this.defaultShortcuts);
}
} else {
this.shortcuts = new Map(this.defaultShortcuts);
}
}
static save() {
const obj = Object.fromEntries(this.shortcuts);
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(obj));
}
static reset() {
this.shortcuts = new Map(this.defaultShortcuts);
this.save();
// Dispatch event to update UI if needed
window.dispatchEvent(new CustomEvent('shortcuts-updated'));
}
static getShortcut(toolId: string): string | undefined {
return this.shortcuts.get(toolId);
}
static findToolByShortcut(key: string): string | undefined {
for (const [id, k] of this.shortcuts.entries()) {
if (k === key) {
return id;
}
}
return undefined;
}
static setShortcut(toolId: string, key: string) {
if (key) {
this.shortcuts.set(toolId, key);
} else {
this.shortcuts.delete(toolId);
}
this.save();
window.dispatchEvent(new CustomEvent('shortcuts-updated'));
}
static getAllShortcuts(): Map<string, string> {
return this.shortcuts;
}
static exportSettings() {
// Create a map with all tools, defaulting to empty string if not set
const exportObj: Record<string, string> = {};
const allTools = categories.flatMap(c => c.tools);
allTools.forEach(tool => {
const toolId = this.getToolId(tool);
exportObj[toolId] = this.shortcuts.get(toolId) || '';
});
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj, null, 2));
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", "bentopdf_shortcuts.json");
document.body.appendChild(downloadAnchorNode);
downloadAnchorNode.click();
downloadAnchorNode.remove();
}
static importSettings(jsonString: string): boolean {
try {
const parsed = JSON.parse(jsonString);
for (const key in parsed) {
if (typeof parsed[key] !== 'string') {
throw new Error('Invalid shortcut format');
}
}
this.shortcuts = new Map(Object.entries(parsed));
this.save();
window.dispatchEvent(new CustomEvent('shortcuts-updated'));
return true;
} catch (e) {
console.error('Import failed', e);
return false;
}
}
private static setupGlobalListener() {
window.addEventListener('keydown', (e) => {
// Ignore if typing in an input or textarea
const target = e.target as HTMLElement;
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
return;
}
// Build key string
const keys: string[] = [];
const isMac = navigator.userAgent.toUpperCase().includes('MAC');
// On Mac: metaKey = Command, ctrlKey = Control
// On Windows/Linux: metaKey is rare, ctrlKey = Ctrl
if (isMac) {
if (e.metaKey) keys.push('mod'); // Command on Mac
if (e.ctrlKey) keys.push('ctrl'); // Control on Mac (separate from Command)
} else {
if (e.ctrlKey || e.metaKey) keys.push('mod'); // Ctrl on Windows/Linux
}
if (e.altKey) keys.push('alt');
if (e.shiftKey) keys.push('shift');
const key = e.key.toLowerCase();
if (!['control', 'shift', 'alt', 'meta'].includes(key)) {
keys.push(key);
}
const combo = keys.join('+');
for (const [toolId, shortcut] of this.shortcuts.entries()) {
if (shortcut === combo) {
e.preventDefault();
e.stopPropagation();
// Find the tool in categories
const allTools = categories.flatMap(c => c.tools);
const tool = allTools.find(t => this.getToolId(t) === toolId);
if (tool && (tool as any).href) {
const href = (tool as any).href;
window.location.href = href.startsWith('/') ? href : `/${href}`;
} else if (tool && (tool as any).id) {
if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
setupToolInterface(toolId);
} else {
window.location.href = `/#tool-${toolId}`;
}
}
return;
}
}
}, { capture: true });
}
}
src/js/logic/table-of-contents.ts
+8 -4
View File
@@ -1,4 +1,6 @@
import { downloadFile, formatBytes } from "../utils/helpers"; import { downloadFile, formatBytes } from "../utils/helpers";
import { initializeGlobalShortcuts } from "../utils/shortcuts-init.js";
const worker = new Worker('/workers/table-of-contents.worker.js'); const worker = new Worker('/workers/table-of-contents.worker.js');
@@ -54,10 +56,10 @@ function showStatus(
) { ) {
statusMessage.textContent = message; statusMessage.textContent = message;
statusMessage.className = `mt-4 p-3 rounded-lg text-sm ${type === 'success' statusMessage.className = `mt-4 p-3 rounded-lg text-sm ${type === 'success'
? 'bg-green-900 text-green-200' ? 'bg-green-900 text-green-200'
: type === 'error' : type === 'error'
? 'bg-red-900 text-red-200' ? 'bg-red-900 text-red-200'
: 'bg-blue-900 text-blue-200' : 'bg-blue-900 text-blue-200'
}`; }`;
statusMessage.classList.remove('hidden'); statusMessage.classList.remove('hidden');
} }
@@ -202,3 +204,5 @@ if (backToToolsBtn) {
} }
generateBtn.addEventListener('click', generateTableOfContents); generateBtn.addEventListener('click', generateTableOfContents);
initializeGlobalShortcuts();
src/js/logic/txt-to-pdf.ts
+5
View File
@@ -154,6 +154,11 @@ export async function setupTxtToPdfTool() {
uploadBtn.addEventListener('click', switchToUpload); uploadBtn.addEventListener('click', switchToUpload);
textBtn.addEventListener('click', switchToText); textBtn.addEventListener('click', switchToText);
const processBtn = document.getElementById('process-btn');
if (processBtn) {
processBtn.onclick = txtToPdf;
}
} }
export async function txtToPdf() { export async function txtToPdf() {
src/js/main.ts
+413 -2
View File
@@ -1,10 +1,12 @@
import { categories } from './config/tools.js'; import { categories } from './config/tools.js';
import { dom, switchView, hideAlert } from './ui.js'; import { dom, switchView, hideAlert, showLoader, hideLoader, showAlert } from './ui.js';
import { setupToolInterface } from './handlers/toolSelectionHandler.js'; import { setupToolInterface } from './handlers/toolSelectionHandler.js';
import { state, resetState } from './state.js';
import { ShortcutsManager } from './logic/shortcuts.js';
import { createIcons, icons } from 'lucide'; import { createIcons, icons } from 'lucide';
import * as pdfjsLib from 'pdfjs-dist'; import * as pdfjsLib from 'pdfjs-dist';
import '../css/styles.css'; import '../css/styles.css';
import { formatStars } from './utils/helpers.js'; import { formatShortcutDisplay, formatStars } from './utils/helpers.js';
import { APP_VERSION, injectVersion } from '../version.js'; import { APP_VERSION, injectVersion } from '../version.js';
const init = () => { const init = () => {
@@ -13,6 +15,7 @@ const init = () => {
import.meta.url import.meta.url
).toString(); ).toString();
// Handle simple mode - hide branding sections but keep logo and copyright
// Handle simple mode - hide branding sections but keep logo and copyright // Handle simple mode - hide branding sections but keep logo and copyright
if (__SIMPLE_MODE__) { if (__SIMPLE_MODE__) {
const hideBrandingSections = () => { const hideBrandingSections = () => {
@@ -134,6 +137,16 @@ const init = () => {
hideBrandingSections(); hideBrandingSections();
} }
// Hide shortcuts button on touch devices
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
if (isTouchDevice) {
const shortcutsBtn = document.getElementById('open-shortcuts-btn');
if (shortcutsBtn) {
shortcutsBtn.style.display = 'none';
}
}
dom.toolGrid.textContent = ''; dom.toolGrid.textContent = '';
categories.forEach((category) => { categories.forEach((category) => {
@@ -269,9 +282,18 @@ const init = () => {
}); });
} }
if (window.location.hash.startsWith('#tool-')) {
const toolId = window.location.hash.substring(6);
setTimeout(() => {
setupToolInterface(toolId);
history.replaceState(null, '', window.location.pathname);
}, 100);
}
createIcons({ icons }); createIcons({ icons });
console.log('Please share our tool and share the love!'); console.log('Please share our tool and share the love!');
const githubStarsElement = document.getElementById('github-stars'); const githubStarsElement = document.getElementById('github-stars');
if (githubStarsElement && !__SIMPLE_MODE__) { if (githubStarsElement && !__SIMPLE_MODE__) {
fetch('https://api.github.com/repos/alam00000/bentopdf') fetch('https://api.github.com/repos/alam00000/bentopdf')
@@ -285,6 +307,395 @@ const init = () => {
githubStarsElement.textContent = '-'; githubStarsElement.textContent = '-';
}); });
} }
// Initialize Shortcuts System
ShortcutsManager.init();
// Shortcuts UI Handlers
if (dom.openShortcutsBtn) {
dom.openShortcutsBtn.addEventListener('click', () => {
renderShortcutsList();
dom.shortcutsModal.classList.remove('hidden');
});
}
if (dom.closeShortcutsModalBtn) {
dom.closeShortcutsModalBtn.addEventListener('click', () => {
dom.shortcutsModal.classList.add('hidden');
});
}
// Close modal on outside click
if (dom.shortcutsModal) {
dom.shortcutsModal.addEventListener('click', (e) => {
if (e.target === dom.shortcutsModal) {
dom.shortcutsModal.classList.add('hidden');
}
});
}
if (dom.resetShortcutsBtn) {
dom.resetShortcutsBtn.addEventListener('click', async () => {
const confirmed = await showWarningModal(
'Reset Shortcuts',
'Are you sure you want to reset all shortcuts to default?<br><br>This action cannot be undone.',
true
);
if (confirmed) {
ShortcutsManager.reset();
renderShortcutsList();
}
});
}
if (dom.exportShortcutsBtn) {
dom.exportShortcutsBtn.addEventListener('click', () => {
ShortcutsManager.exportSettings();
});
}
if (dom.importShortcutsBtn) {
dom.importShortcutsBtn.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = async (e) => {
const content = e.target?.result as string;
if (ShortcutsManager.importSettings(content)) {
renderShortcutsList();
await showWarningModal(
'Import Successful',
'Shortcuts imported successfully!',
false
);
} else {
await showWarningModal(
'Import Failed',
'Failed to import shortcuts. Invalid file format.',
false
);
}
};
reader.readAsText(file);
}
};
input.click();
});
}
if (dom.shortcutSearch) {
dom.shortcutSearch.addEventListener('input', (e) => {
const term = (e.target as HTMLInputElement).value.toLowerCase();
const sections = dom.shortcutsList.querySelectorAll('.category-section');
sections.forEach((section) => {
const items = section.querySelectorAll('.shortcut-item');
let visibleCount = 0;
items.forEach((item) => {
const text = item.textContent?.toLowerCase() || '';
if (text.includes(term)) {
item.classList.remove('hidden');
visibleCount++;
} else {
item.classList.add('hidden');
}
});
if (visibleCount === 0) {
section.classList.add('hidden');
} else {
section.classList.remove('hidden');
}
});
});
}
// Reserved shortcuts that commonly conflict with browser/OS functions
const RESERVED_SHORTCUTS: Record<string, { mac?: string; windows?: string }> = {
'mod+w': { mac: 'Closes tab', windows: 'Closes tab' },
'mod+t': { mac: 'Opens new tab', windows: 'Opens new tab' },
'mod+n': { mac: 'Opens new window', windows: 'Opens new window' },
'mod+shift+n': { mac: 'Opens incognito window', windows: 'Opens incognito window' },
'mod+q': { mac: 'Quits application (cannot be overridden)' },
'mod+m': { mac: 'Minimizes window' },
'mod+h': { mac: 'Hides window' },
'mod+r': { mac: 'Reloads page', windows: 'Reloads page' },
'mod+shift+r': { mac: 'Hard reloads page', windows: 'Hard reloads page' },
'mod+l': { mac: 'Focuses address bar', windows: 'Focuses address bar' },
'mod+d': { mac: 'Bookmarks page', windows: 'Bookmarks page' },
'mod+shift+t': { mac: 'Reopens closed tab', windows: 'Reopens closed tab' },
'mod+shift+w': { mac: 'Closes window', windows: 'Closes window' },
'mod+tab': { mac: 'Switches tabs', windows: 'Switches apps' },
'alt+f4': { windows: 'Closes window' },
'ctrl+tab': { mac: 'Switches tabs', windows: 'Switches tabs' },
};
function getReservedShortcutWarning(combo: string, isMac: boolean): string | null {
const reserved = RESERVED_SHORTCUTS[combo];
if (!reserved) return null;
const description = isMac ? reserved.mac : reserved.windows;
if (!description) return null;
return description;
}
function showWarningModal(title: string, message: string, confirmMode: boolean = true): Promise<boolean> {
return new Promise((resolve) => {
if (!dom.warningModal || !dom.warningTitle || !dom.warningMessage || !dom.warningCancelBtn || !dom.warningConfirmBtn) {
resolve(confirmMode ? confirm(message) : (alert(message), true));
return;
}
dom.warningTitle.textContent = title;
dom.warningMessage.innerHTML = message;
dom.warningModal.classList.remove('hidden');
dom.warningModal.classList.add('flex');
if (confirmMode) {
dom.warningCancelBtn.style.display = '';
dom.warningConfirmBtn.textContent = 'Proceed';
} else {
dom.warningCancelBtn.style.display = 'none';
dom.warningConfirmBtn.textContent = 'OK';
}
const handleConfirm = () => {
cleanup();
resolve(true);
};
const handleCancel = () => {
cleanup();
resolve(false);
};
const cleanup = () => {
dom.warningModal?.classList.add('hidden');
dom.warningModal?.classList.remove('flex');
dom.warningConfirmBtn?.removeEventListener('click', handleConfirm);
dom.warningCancelBtn?.removeEventListener('click', handleCancel);
};
dom.warningConfirmBtn.addEventListener('click', handleConfirm);
dom.warningCancelBtn.addEventListener('click', handleCancel);
// Close on backdrop click
dom.warningModal.addEventListener('click', (e) => {
if (e.target === dom.warningModal) {
if (confirmMode) {
handleCancel();
} else {
handleConfirm();
}
}
}, { once: true });
});
}
function getToolId(tool: any): string {
if (tool.id) return tool.id;
if (tool.href) {
const match = tool.href.match(/\/([^/]+)\.html$/);
return match ? match[1] : tool.href;
}
return 'unknown';
}
function renderShortcutsList() {
if (!dom.shortcutsList) return;
dom.shortcutsList.innerHTML = '';
const allShortcuts = ShortcutsManager.getAllShortcuts();
const isMac = navigator.userAgent.toUpperCase().includes('MAC');
const allTools = categories.flatMap(c => c.tools);
categories.forEach(category => {
const section = document.createElement('div');
section.className = 'category-section mb-6 last:mb-0';
const header = document.createElement('h3');
header.className = 'text-gray-400 text-xs font-bold uppercase tracking-wider mb-3 pl-1';
header.textContent = category.name;
section.appendChild(header);
const itemsContainer = document.createElement('div');
itemsContainer.className = 'space-y-2';
section.appendChild(itemsContainer);
let hasTools = false;
category.tools.forEach(tool => {
hasTools = true;
const toolId = getToolId(tool);
const currentShortcut = allShortcuts.get(toolId) || '';
const item = document.createElement('div');
item.className = 'shortcut-item flex items-center justify-between p-3 bg-gray-900 rounded-lg border border-gray-700 hover:border-gray-600 transition-colors';
const left = document.createElement('div');
left.className = 'flex items-center gap-3';
const icon = document.createElement('i');
icon.className = 'w-5 h-5 text-indigo-400';
icon.setAttribute('data-lucide', tool.icon);
const name = document.createElement('span');
name.className = 'text-gray-200 font-medium';
name.textContent = tool.name;
left.append(icon, name);
const right = document.createElement('div');
right.className = 'relative';
const input = document.createElement('input');
input.type = 'text';
input.className = 'shortcut-input w-32 bg-gray-800 border border-gray-600 text-white text-center text-sm rounded px-2 py-1 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all';
input.placeholder = 'Click to set';
input.value = formatShortcutDisplay(currentShortcut, isMac);
input.readOnly = true;
const clearBtn = document.createElement('button');
clearBtn.className = 'absolute -right-2 -top-2 bg-gray-700 hover:bg-red-600 text-white rounded-full p-0.5 hidden group-hover:block shadow-sm';
clearBtn.innerHTML = '<i data-lucide="x" class="w-3 h-3"></i>';
if (currentShortcut) {
right.classList.add('group');
}
clearBtn.onclick = (e) => {
e.stopPropagation();
ShortcutsManager.setShortcut(toolId, '');
renderShortcutsList();
};
input.onkeydown = async (e) => {
e.preventDefault();
e.stopPropagation();
if (e.key === 'Backspace' || e.key === 'Delete') {
ShortcutsManager.setShortcut(toolId, '');
renderShortcutsList();
return;
}
const keys: string[] = [];
// On Mac: metaKey = Command, ctrlKey = Control
// On Windows/Linux: metaKey is rare, ctrlKey = Ctrl
if (isMac) {
if (e.metaKey) keys.push('mod'); // Command on Mac
if (e.ctrlKey) keys.push('ctrl'); // Control on Mac (separate from Command)
} else {
if (e.ctrlKey || e.metaKey) keys.push('mod'); // Ctrl on Windows/Linux
}
if (e.altKey) keys.push('alt');
if (e.shiftKey) keys.push('shift');
const key = e.key.toLowerCase();
const isModifier = ['control', 'shift', 'alt', 'meta'].includes(key);
const isDeadKey = key === 'dead' || key.startsWith('dead');
// Ignore dead keys (used for accented characters on Mac with Option key)
if (isDeadKey) {
input.value = formatShortcutDisplay(ShortcutsManager.getShortcut(toolId) || '', isMac);
return;
}
if (!isModifier) {
keys.push(key);
}
const combo = keys.join('+');
input.value = formatShortcutDisplay(combo, isMac);
if (!isModifier) {
const existingToolId = ShortcutsManager.findToolByShortcut(combo);
if (existingToolId && existingToolId !== toolId) {
const existingTool = allTools.find(t => getToolId(t) === existingToolId);
const existingToolName = existingTool?.name || existingToolId;
const displayCombo = formatShortcutDisplay(combo, isMac);
await showWarningModal(
'Shortcut Already in Use',
`<strong>${displayCombo}</strong> is already assigned to:<br><br>` +
`<em>"${existingToolName}"</em><br><br>` +
`Please choose a different shortcut.`,
false
);
input.value = formatShortcutDisplay(ShortcutsManager.getShortcut(toolId) || '', isMac);
input.classList.remove('border-indigo-500', 'text-indigo-400');
input.blur();
return;
}
// Check if this is a reserved shortcut
const reservedWarning = getReservedShortcutWarning(combo, isMac);
if (reservedWarning) {
const displayCombo = formatShortcutDisplay(combo, isMac);
const shouldProceed = await showWarningModal(
'Reserved Shortcut Warning',
`<strong>${displayCombo}</strong> is commonly used for:<br><br>` +
`"<em>${reservedWarning}</em>"<br><br>` +
`This shortcut may not work reliably or might conflict with browser/system behavior.<br><br>` +
`Do you want to use it anyway?`
);
if (!shouldProceed) {
// Revert display
input.value = formatShortcutDisplay(ShortcutsManager.getShortcut(toolId) || '', isMac);
input.classList.remove('border-indigo-500', 'text-indigo-400');
input.blur();
return;
}
}
ShortcutsManager.setShortcut(toolId, combo);
// Re-render to update all inputs (show conflicts in real-time)
renderShortcutsList();
}
};
input.onkeyup = (e) => {
// If the user releases a modifier without pressing a main key, revert to saved
const key = e.key.toLowerCase();
if (['control', 'shift', 'alt', 'meta'].includes(key)) {
const currentSaved = ShortcutsManager.getShortcut(toolId);
}
};
input.onfocus = () => {
input.value = 'Press keys...';
input.classList.add('border-indigo-500', 'text-indigo-400');
};
input.onblur = () => {
input.value = formatShortcutDisplay(ShortcutsManager.getShortcut(toolId) || '', isMac);
input.classList.remove('border-indigo-500', 'text-indigo-400');
};
right.append(input);
if (currentShortcut) right.append(clearBtn);
item.append(left, right);
itemsContainer.appendChild(item);
});
if (hasTools) {
dom.shortcutsList.appendChild(section);
}
});
createIcons({ icons });
}
}; };
document.addEventListener('DOMContentLoaded', init); document.addEventListener('DOMContentLoaded', init);
src/js/ui.ts
+13
View File
@@ -24,6 +24,19 @@ export const dom = {
toolsHeader: document.getElementById('tools-header'), toolsHeader: document.getElementById('tools-header'),
dividers: document.querySelectorAll('.section-divider'), dividers: document.querySelectorAll('.section-divider'),
hideSections: document.querySelectorAll('.hide-section'), hideSections: document.querySelectorAll('.hide-section'),
shortcutsModal: document.getElementById('shortcuts-modal'),
closeShortcutsModalBtn: document.getElementById('close-shortcuts-modal'),
shortcutsList: document.getElementById('shortcuts-list'),
shortcutSearch: document.getElementById('shortcut-search'),
resetShortcutsBtn: document.getElementById('reset-shortcuts-btn'),
importShortcutsBtn: document.getElementById('import-shortcuts-btn'),
exportShortcutsBtn: document.getElementById('export-shortcuts-btn'),
openShortcutsBtn: document.getElementById('open-shortcuts-btn'),
warningModal: document.getElementById('warning-modal'),
warningTitle: document.getElementById('warning-title'),
warningMessage: document.getElementById('warning-message'),
warningCancelBtn: document.getElementById('warning-cancel-btn'),
warningConfirmBtn: document.getElementById('warning-confirm-btn'),
}; };
export const showLoader = (text = 'Processing...') => { export const showLoader = (text = 'Processing...') => {
src/js/utils/helpers.ts
+12
View File
@@ -194,3 +194,15 @@ export function formatStars(num: number) {
} }
return num.toLocaleString(); return num.toLocaleString();
}; };
export function formatShortcutDisplay(shortcut: string, isMac: boolean): string {
if (!shortcut) return '';
return shortcut
.replace('mod', isMac ? '⌘' : 'Ctrl')
.replace('ctrl', isMac ? '^' : 'Ctrl') // Control key on Mac shows as ^
.replace('alt', isMac ? '⌥' : 'Alt')
.replace('shift', 'Shift')
.split('+')
.map(k => k.charAt(0).toUpperCase() + k.slice(1))
.join(isMac ? '' : '+');
}
src/js/utils/shortcuts-init.ts
+7
View File
@@ -0,0 +1,7 @@
import { ShortcutsManager } from '../logic/shortcuts.js';
export function initializeGlobalShortcuts() {
ShortcutsManager.init();
console.log('Global shortcuts initialized');
}
src/pages/pdf-multi-tool.html
+6 -6
View File
@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="overflow-hidden">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -36,10 +36,10 @@
</style> </style>
</head> </head>
<body class="antialiased bg-gray-900 h-screen overflow-hidden"> <body class="antialiased bg-gray-900 h-[100dvh] overflow-hidden flex flex-col">
<!-- Navigation --> <!-- Navigation -->
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30"> <nav class="bg-gray-800 border-b border-gray-700 flex-none z-30">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center"> <div class="flex-shrink-0 flex items-center">
@@ -58,10 +58,10 @@
</nav> </nav>
<!-- Main Container --> <!-- Main Container -->
<div class="flex flex-col h-[calc(100vh-4rem)]"> <div class="flex flex-col flex-1 overflow-hidden relative">
<!-- Toolbar --> <!-- Toolbar -->
<div class="bg-gray-800 border-b border-gray-700 p-2 sm:p-3 overflow-x-auto scrollbar-hide toolbar-container sm:sticky sm:top-16 sm:z-20"> <div class="bg-gray-800 border-b border-gray-700 p-2 sm:p-3 toolbar-container flex-none z-20">
<div <div
class="flex flex-wrap items-center justify-center sm:justify-start gap-2 bg-gray-900 p-2 sm:p-4 rounded-lg w-full"> class="flex flex-wrap items-center justify-center sm:justify-start gap-2 bg-gray-900 p-2 sm:p-4 rounded-lg w-full">
@@ -186,7 +186,7 @@
</div> </div>
<!-- Content Area --> <!-- Content Area -->
<div class="flex-1 overflow-auto p-3 sm:p-4 sm:pt-20 sm:pb-8 md:pt-4 md:pb-4"> <div id="main-scroll-container" class="flex-1 overflow-auto p-3 pb-24 sm:p-4 sm:pb-8 md:pt-4 md:pb-4">
<div id="upload-area" <div id="upload-area"
class="hidden border-2 border-dashed border-gray-600 rounded-lg p-6 sm:p-12 text-center max-w-full cursor-pointer" class="hidden border-2 border-dashed border-gray-600 rounded-lg p-6 sm:p-12 text-center max-w-full cursor-pointer"
onclick="document.getElementById('pdf-file-input').click()"> onclick="document.getElementById('pdf-file-input').click()">
src/tests/txt-to-pdf.test.ts
+120
View File
@@ -0,0 +1,120 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { txtToPdf, setupTxtToPdfTool } from '@/js/logic/txt-to-pdf';
import * as ui from '@/js/ui';
import * as helpers from '@/js/utils/helpers';
import { state } from '@/js/state';
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
// Mocks
vi.mock('@/js/ui', () => ({
showLoader: vi.fn(),
hideLoader: vi.fn(),
showAlert: vi.fn(),
}));
vi.mock('@/js/utils/helpers', () => ({
downloadFile: vi.fn(),
hexToRgb: vi.fn(() => ({ r: 0, g: 0, b: 0 })),
}));
vi.mock('pdf-lib', () => ({
PDFDocument: {
create: vi.fn(),
},
StandardFonts: {
Helvetica: 'Helvetica',
},
PageSizes: {
A4: [595.28, 841.89],
},
rgb: vi.fn(),
}));
vi.mock('jszip', () => {
return {
default: vi.fn().mockImplementation(() => ({
file: vi.fn(),
generateAsync: vi.fn().mockResolvedValue(new Blob()),
})),
};
});
describe('Text to PDF Tool', () => {
let mockPdfDoc: any;
let mockPage: any;
let mockFont: any;
beforeEach(() => {
document.body.innerHTML = `
<button id="txt-mode-upload-btn"></button>
<button id="txt-mode-text-btn"></button>
<div id="txt-upload-panel"></div>
<div id="txt-text-panel" class="hidden"></div>
<button id="process-btn"></button>
<select id="font-family"><option value="Helvetica">Helvetica</option></select>
<input id="font-size" value="12" />
<select id="page-size"><option value="A4">A4</option></select>
<input id="text-color" value="#000000" />
<textarea id="text-input"></textarea>
`;
mockPage = {
getSize: vi.fn(() => ({ width: 595.28, height: 841.89 })),
drawText: vi.fn(),
getHeight: vi.fn(() => 841.89),
};
mockFont = {
widthOfTextAtSize: vi.fn(() => 10),
};
mockPdfDoc = {
embedFont: vi.fn().mockResolvedValue(mockFont),
addPage: vi.fn(() => mockPage),
save: vi.fn().mockResolvedValue(new Uint8Array([])),
};
vi.mocked(PDFLibDocument.create).mockResolvedValue(mockPdfDoc);
state.files = [];
});
afterEach(() => {
vi.clearAllMocks();
});
it('setupTxtToPdfTool should attach onclick listener to process-btn', async () => {
const processBtn = document.getElementById('process-btn');
expect(processBtn?.onclick).toBeNull();
await setupTxtToPdfTool();
expect(processBtn?.onclick).toBeDefined();
});
it('txtToPdf should handle text input mode', async () => {
// Switch to text mode (simulate UI state)
document.getElementById('txt-upload-panel')?.classList.add('hidden');
document.getElementById('txt-text-panel')?.classList.remove('hidden');
(document.getElementById('text-input') as HTMLTextAreaElement).value = 'Hello World';
await txtToPdf();
expect(ui.showLoader).toHaveBeenCalled();
expect(PDFLibDocument.create).toHaveBeenCalled();
expect(mockPdfDoc.addPage).toHaveBeenCalled();
expect(mockPage.drawText).toHaveBeenCalled();
expect(helpers.downloadFile).toHaveBeenCalled();
expect(ui.hideLoader).toHaveBeenCalled();
});
it('txtToPdf should show alert if text input is empty', async () => {
document.getElementById('txt-upload-panel')?.classList.add('hidden');
document.getElementById('txt-text-panel')?.classList.remove('hidden');
(document.getElementById('text-input') as HTMLTextAreaElement).value = ' ';
await txtToPdf();
expect(ui.showAlert).toHaveBeenCalledWith('Input Required', 'Please enter some text to convert.');
expect(PDFLibDocument.create).not.toHaveBeenCalled();
});
});
terms.html
+260 -294
View File
@@ -1,309 +1,275 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Terms and Conditions - Bentopdf</title>
<link rel="icon" type="image/png" href="images/favicon.svg" />
<link href="/src/css/styles.css" rel="stylesheet" />
</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 --> <head>
<div class="hidden md:flex items-center space-x-8"> <meta charset="UTF-8" />
<a href="index.html" class="nav-link">Home</a> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<a href="./about.html" class="nav-link">About</a> <title>Terms and Conditions - Bentopdf</title>
<a href="./contact.html" class="nav-link">Contact</a> <link rel="icon" type="image/png" href="images/favicon.svg" />
<a href="index.html#tools-header" class="nav-link">All Tools</a> <link href="/src/css/styles.css" rel="stylesheet" />
</div> </head>
<!-- Mobile Hamburger Button --> <body class="antialiased bg-gray-900 text-gray-300">
<div class="md:hidden flex items-center"> <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<button <div class="container mx-auto px-4">
id="mobile-menu-button" <div class="flex justify-between items-center h-16">
type="button" <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
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" <img src="images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
aria-controls="mobile-menu" <span class="text-white font-bold text-xl ml-2">
aria-expanded="false" <a href="index.html">BentoPDF</a>
> </span>
<span class="sr-only">Open main menu</span> </div>
<!-- Hamburger Icon -->
<svg <!-- Desktop Navigation -->
id="menu-icon" <div class="hidden md:flex items-center space-x-8">
class="block h-6 w-6" <a href="index.html" class="nav-link">Home</a>
xmlns="http://www.w3.org/2000/svg" <a href="./about.html" class="nav-link">About</a>
fill="none" <a href="./contact.html" class="nav-link">Contact</a>
viewBox="0 0 24 24" <a href="./licensing.html" class="nav-link">Licensing</a>
stroke="currentColor" <a href="index.html#tools-header" class="nav-link">All Tools</a>
aria-hidden="true" </div>
>
<path <!-- Mobile Hamburger Button -->
stroke-linecap="round" <div class="md:hidden flex items-center">
stroke-linejoin="round" <button id="mobile-menu-button" type="button"
stroke-width="2" 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"
d="M4 6h16M4 12h16M4 18h16" aria-controls="mobile-menu" aria-expanded="false">
/> <span class="sr-only">Open main menu</span>
</svg> <!-- Hamburger Icon -->
<!-- Close 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"
<svg stroke="currentColor" aria-hidden="true">
id="close-icon" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
class="hidden h-6 w-6" </svg>
xmlns="http://www.w3.org/2000/svg" <!-- Close Icon -->
fill="none" <svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
stroke="currentColor" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
aria-hidden="true" </svg>
> </button>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div> </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">Home</a>
<a href="./about.html" class="mobile-nav-link">About</a>
<a href="./contact.html" class="mobile-nav-link">Contact</a>
<a href="index.html#tools-header" class="mobile-nav-link"
>All Tools</a
>
</div>
</div>
</nav>
<div id="app" class="container mx-auto p-4 md:p-8">
<section class="max-w-4xl mx-auto py-12">
<h1 class="text-4xl md:text-5xl font-bold text-center text-white mb-4">
Terms and Conditions
</h1>
<p class="text-center text-gray-500">
Last Updated: September 14, 2025
</p>
<div class="legal-content mt-12">
<h2>1. Acceptance of Terms</h2>
<p>
By accessing and using Bentopdf (the "Service"), you accept and
agree to be bound by the terms and provision of this agreement. If
you do not agree to abide by these terms, please do not use this
service.
</p>
<h2>2. Description of Service</h2>
<p>
Bentopdf provides a suite of client-side tools for processing and
manipulating Portable Document Format (PDF) files. All operations
performed by the Service are executed locally within your web
browser.
<strong
>No files or data are uploaded to or stored on our
servers.</strong
>
</p>
<h2>3. User Conduct and Responsibilities</h2>
<p>
You are solely responsible for the content of the files you process
with our Service. You agree not to use the Service for any unlawful
purpose, including but not limited to:
</p>
<ul>
<li>
Processing any material that infringes on the copyright,
trademark, or intellectual property rights of others.
</li>
<li>
Processing any material that is defamatory, libelous, obscene, or
otherwise illegal.
</li>
<li>
Attempting to reverse-engineer, decompile, or otherwise disrupt
the functionality of the Service.
</li>
</ul>
<h2>4. Disclaimer of Warranties</h2>
<p>
The Service is provided "as is" and "as available" without any
warranties of any kind, express or implied. We do not warrant that
the service will be error-free, uninterrupted, or that the results
obtained from using the tools will be accurate, complete, or
reliable. You acknowledge that you use the Service at your own risk.
</p>
<p>
Specifically, we do not guarantee that file conversions,
compressions, or modifications will be perfect. Data loss or
corruption, while unlikely, is a possibility. It is your
responsibility to maintain backups of your original files.
</p>
<h2>5. Limitation of Liability</h2>
<p>
To the fullest extent permitted by applicable law, in no event shall
Bentopdf, its developers, or its affiliates be liable for any
indirect, incidental, special, consequential, or punitive damages,
including but not limited to, loss of profits, data, use, goodwill,
or other intangible losses, resulting from:
</p>
<ul>
<li>
Your access to or use of or inability to access or use the
Service.
</li>
<li>Any conduct or content of any third party on the Service.</li>
<li>Any content obtained from the Service.</li>
<li>
Unauthorized access, use, or alteration of your transmissions or
content.
</li>
</ul>
<p>
Our total liability to you for any and all claims arising out of
your use of this free service shall not exceed the amount of zero
dollars ($0.00).
</p>
<h2>6. Intellectual Property</h2>
<p>
The visual interfaces, graphics, design, compilation, information,
computer code, products, software, services, and all other elements
of the Service provided by Bentopdf are protected by intellectual
property and other laws. All materials contained on the Service are
the property of Bentopdf or our third-party licensors.
</p>
<h2>7. Governing Law</h2>
<p>
These Terms shall be governed and construed in accordance with the
laws of India, without regard to its conflict of law provisions.
</p>
<h2>8. Changes to Terms</h2>
<p>
We reserve the right, at our sole discretion, to modify or replace
these Terms at any time. We will provide notice of changes by
updating the "Last Updated" date at the top of this page. By
continuing to access or use our Service after those revisions become
effective, you agree to be bound by the revised terms.
</p>
<h2>9. Contact Us</h2>
<p>
If you have any questions about these Terms, please contact us at
<a href="mailto:contact@bentopdf.com">contact@bentopdf.com</a>.
</p>
</div>
</section>
</div> </div>
<footer class="mt-16 border-t-2 border-gray-700 py-8"> <!-- Mobile Menu Dropdown -->
<div class="container mx-auto px-4"> <div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left"> <div class="px-2 pt-2 pb-3 space-y-1 text-center">
<div class="mb-8 md:mb-0"> <a href="index.html" class="mobile-nav-link">Home</a>
<div class="flex items-center justify-center md:justify-start mb-4"> <a href="./about.html" class="mobile-nav-link">About</a>
<img src="images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" /> <a href="./contact.html" class="mobile-nav-link">Contact</a>
<span class="text-xl font-bold text-white">BentoPDF</span> <a href="./licensing.html" class="mobile-nav-link">Licensing</a>
</div> <a href="index.html#tools-header" class="mobile-nav-link">All Tools</a>
<p class="text-gray-400 text-sm"> </div>
&copy; 2025 BentoPDF. All rights reserved. </div>
</p> </nav>
<p class="text-gray-500 text-xs mt-2"> <div id="app" class="container mx-auto p-4 md:p-8">
Version <span id="app-version"></span> <section class="max-w-4xl mx-auto py-12">
</p> <h1 class="text-4xl md:text-5xl font-bold text-center text-white mb-4">
</div> Terms and Conditions
</h1>
<p class="text-center text-gray-500">
Last Updated: September 14, 2025
</p>
<div> <div class="legal-content mt-12">
<h3 class="font-bold text-white mb-4">Company</h3> <h2>1. Acceptance of Terms</h2>
<ul class="space-y-2 text-gray-400"> <p>
<li> By accessing and using Bentopdf (the "Service"), you accept and
<a href="./about.html" class="hover:text-indigo-400">About Us</a> agree to be bound by the terms and provision of this agreement. If
</li> you do not agree to abide by these terms, please do not use this
<li> service.
<a href="./faq.html" class="hover:text-indigo-400">FAQ</a> </p>
</li>
<li>
<a href="./contact.html" class="hover:text-indigo-400">Contact Us</a>
</li>
</ul>
</div>
<div> <h2>2. Description of Service</h2>
<h3 class="font-bold text-white mb-4">Legal</h3> <p>
<ul class="space-y-2 text-gray-400"> Bentopdf provides a suite of client-side tools for processing and
<li> manipulating Portable Document Format (PDF) files. All operations
<a href="./terms.html" class="hover:text-indigo-400">Terms and Conditions</a> performed by the Service are executed locally within your web
</li> browser.
<li> <strong>No files or data are uploaded to or stored on our
<a href="./privacy.html" class="hover:text-indigo-400">Privacy Policy</a> servers.</strong>
</li> </p>
</ul>
</div>
<div> <h2>3. User Conduct and Responsibilities</h2>
<h3 class="font-bold text-white mb-4">Follow Us</h3> <p>
<div class="flex justify-center md:justify-start space-x-4"> You are solely responsible for the content of the files you process
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer" with our Service. You agree not to use the Service for any unlawful
class="text-gray-400 hover:text-indigo-400" title="GitHub"> purpose, including but not limited to:
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> </p>
<path fill-rule="evenodd" <ul>
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" <li>
clip-rule="evenodd" /> Processing any material that infringes on the copyright,
</svg> trademark, or intellectual property rights of others.
</a> </li>
<a href="https://discord.gg/q42xWQmJ" target="_blank" rel="noopener noreferrer" <li>
class="text-gray-400 hover:text-indigo-400" title="Discord"> Processing any material that is defamatory, libelous, obscene, or
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> otherwise illegal.
<path </li>
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" /> <li>
</svg> Attempting to reverse-engineer, decompile, or otherwise disrupt
</a> the functionality of the Service.
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400" </li>
title="Instagram"> </ul>
<i data-lucide="instagram"></i>
</a> <h2>4. Disclaimer of Warranties</h2>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400" <p>
title="LinkedIn"> The Service is provided "as is" and "as available" without any
<i data-lucide="linkedin"></i> warranties of any kind, express or implied. We do not warrant that
</a> the service will be error-free, uninterrupted, or that the results
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)"> obtained from using the tools will be accurate, complete, or
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> reliable. You acknowledge that you use the Service at your own risk.
<path </p>
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" /> <p>
</svg> Specifically, we do not guarantee that file conversions,
</a> compressions, or modifications will be perfect. Data loss or
</div> corruption, while unlikely, is a possibility. It is your
responsibility to maintain backups of your original files.
</p>
<h2>5. Limitation of Liability</h2>
<p>
To the fullest extent permitted by applicable law, in no event shall
Bentopdf, its developers, or its affiliates be liable for any
indirect, incidental, special, consequential, or punitive damages,
including but not limited to, loss of profits, data, use, goodwill,
or other intangible losses, resulting from:
</p>
<ul>
<li>
Your access to or use of or inability to access or use the
Service.
</li>
<li>Any conduct or content of any third party on the Service.</li>
<li>Any content obtained from the Service.</li>
<li>
Unauthorized access, use, or alteration of your transmissions or
content.
</li>
</ul>
<p>
Our total liability to you for any and all claims arising out of
your use of this free service shall not exceed the amount of zero
dollars ($0.00).
</p>
<h2>6. Intellectual Property</h2>
<p>
The visual interfaces, graphics, design, compilation, information,
computer code, products, software, services, and all other elements
of the Service provided by Bentopdf are protected by intellectual
property and other laws. All materials contained on the Service are
the property of Bentopdf or our third-party licensors.
</p>
<h2>7. Governing Law</h2>
<p>
These Terms shall be governed and construed in accordance with the
laws of India, without regard to its conflict of law provisions.
</p>
<h2>8. Changes to Terms</h2>
<p>
We reserve the right, at our sole discretion, to modify or replace
these Terms at any time. We will provide notice of changes by
updating the "Last Updated" date at the top of this page. By
continuing to access or use our Service after those revisions become
effective, you agree to be bound by the revised terms.
</p>
<h2>9. Contact Us</h2>
<p>
If you have any questions about these Terms, please contact us at
<a href="mailto:contact@bentopdf.com">contact@bentopdf.com</a>.
</p>
</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">
&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/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/q42xWQmJ" 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>
</div> </div>
</footer> </div>
<script type="module" src="src/js/utils/lucide-init.ts"></script> </footer>
<script type="module" src="src/version.ts"></script> <script type="module" src="src/js/utils/lucide-init.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script> <script type="module" src="src/version.ts"></script>
</body> <script type="module" src="src/js/mobileMenu.ts"></script>
</body>
</html> </html>
vite.config.ts
+1
View File
@@ -51,6 +51,7 @@ export default defineConfig(({ mode }) => ({
privacy: resolve(__dirname, 'privacy.html'), privacy: resolve(__dirname, 'privacy.html'),
terms: resolve(__dirname, 'terms.html'), terms: resolve(__dirname, 'terms.html'),
bookmark: resolve(__dirname, 'src/pages/bookmark.html'), bookmark: resolve(__dirname, 'src/pages/bookmark.html'),
licensing: resolve(__dirname, 'licensing.html'),
'table-of-contents': resolve( 'table-of-contents': resolve(
__dirname, __dirname,
'src/pages/table-of-contents.html' 'src/pages/table-of-contents.html'