mirror of
https://github.com/alam00000/bentopdf.git
synced 2026-11-11 09:23:36 +01:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 abdullahalam123
|
f3f6af079f | ||
|
abdullahalam123
|
6e7563d0c2 | ||
|
abdullahalam123
|
b9572dfea8 | ||
|
abdullahalam123
|
e8c0e82d29 | ||
|
abdullahalam123
|
95927cd899 | ||
|
abdullahalam123
|
1e8866018d | ||
|
abdullahalam123
|
83aadb6d98 | ||
|
abdullahalam123
|
1a17cd4e7e | ||
|
abdullahalam123
|
5fecc701c6 | ||
|
Alam
|
77ee986e2c | ||
|
abdullahalam123
|
606a3603f4 | ||
|
abdullahalam123
|
8a8ae3f0c5 |
No files matched your search
@@ -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.
|
||||||
|
|
||||||
 [](https://ko-fi.com/alio0) 
|
 [](https://ko-fi.com/alio0) 
|
||||||
@@ -10,6 +8,17 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📜 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
|
||||||
@@ -62,6 +71,7 @@ BentoPDF offers a comprehensive suite of tools to handle all your PDF needs.
|
|||||||
| Tool Name | Description |
|
| Tool Name | Description |
|
||||||
| :--------------------- | :---------------------------------------------------------- |
|
| :--------------------- | :---------------------------------------------------------- |
|
||||||
| **PDF Editor** | A comprehensive editor to modify your PDFs. |
|
| **PDF Editor** | A comprehensive editor to modify your PDFs. |
|
||||||
|
| **Create Fillable Forms** | Create professional fillable PDF forms with text fields, checkboxes, dropdowns, radio buttons, signatures, and more. Fully compliant with PDF standards for compatibility with all PDF viewers. |
|
||||||
| **Add Page Numbers** | Easily add page numbers with customizable formatting. |
|
| **Add Page Numbers** | Easily add page numbers with customizable formatting. |
|
||||||
| **Add Watermark** | Add text or image watermarks to protect your documents. |
|
| **Add Watermark** | Add text or image watermarks to protect your documents. |
|
||||||
| **Header & Footer** | Add customizable headers and footers. |
|
| **Header & Footer** | Add customizable headers and footers. |
|
||||||
@@ -435,7 +445,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.
|
|
||||||
+259
-320
@@ -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>
|
||||||
© 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">
|
||||||
|
© 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/AP2Y97juZT" 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>
|
||||||
+154
-190
@@ -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>
|
||||||
© 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>
|
© 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/AP2Y97juZT" 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>
|
||||||
@@ -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>
|
||||||
© 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">
|
||||||
|
© 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/AP2Y97juZT" 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>
|
||||||
+147
-2
@@ -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,134 @@
|
|||||||
</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="settings" class="w-6 h-6 text-indigo-400"></i>
|
||||||
|
Settings
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="flex border-b border-gray-700">
|
||||||
|
<button id="shortcuts-tab-btn" class="flex-1 py-3 text-sm font-medium bg-indigo-600 text-white">
|
||||||
|
<i data-lucide="keyboard" class="inline-block w-4 h-4 mr-1"></i>
|
||||||
|
Shortcuts
|
||||||
|
</button>
|
||||||
|
<button id="preferences-tab-btn" class="flex-1 py-3 text-sm font-medium text-gray-300 hover:text-white">
|
||||||
|
<i data-lucide="sliders" class="inline-block w-4 h-4 mr-1"></i>
|
||||||
|
Preferences
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shortcuts Tab Content -->
|
||||||
|
<div id="shortcuts-tab-content" 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>
|
||||||
|
|
||||||
|
<!-- Preferences Tab Content -->
|
||||||
|
<div id="preferences-tab-content" class="hidden p-6 overflow-y-auto flex-grow">
|
||||||
|
<h4 class="text-lg font-semibold text-white mb-4">Display Preferences</h4>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700">
|
||||||
|
<div class="flex-1">
|
||||||
|
<label for="full-width-toggle" class="text-sm font-medium text-gray-200 cursor-pointer">
|
||||||
|
Full Width Mode
|
||||||
|
</label>
|
||||||
|
<p class="text-xs text-gray-400 mt-1">
|
||||||
|
Use the full screen width for all tools instead of a centered container
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer ml-4">
|
||||||
|
<input type="checkbox" id="full-width-toggle" class="sr-only peer">
|
||||||
|
<div
|
||||||
|
class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600">
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl">
|
||||||
|
<div id="shortcuts-tab-footer" 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>
|
||||||
|
<div id="preferences-tab-footer" class="hidden w-full">
|
||||||
|
<p class="text-xs text-gray-400 text-center">Settings are automatically saved</p>
|
||||||
|
</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 -->
|
||||||
@@ -580,6 +715,13 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="signature-ghost" class="hidden"></div>
|
<div id="signature-ghost" class="hidden"></div>
|
||||||
|
|
||||||
|
<!-- Scroll to Top Button -->
|
||||||
|
<button id="scroll-to-top-btn"
|
||||||
|
class="fixed bottom-12 right-8 bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-full shadow-lg transition-all duration-300 opacity-0 translate-y-10 invisible z-40"
|
||||||
|
aria-label="Scroll to top">
|
||||||
|
<i data-lucide="arrow-up" class="w-6 h-6"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
||||||
@@ -616,6 +758,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>
|
||||||
@@ -636,7 +781,7 @@
|
|||||||
clip-rule="evenodd" />
|
clip-rule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://discord.gg/q42xWQmJ" target="_blank" rel="noopener noreferrer"
|
<a href="https://discord.gg/AP2Y97juZT" target="_blank" rel="noopener noreferrer"
|
||||||
class="text-gray-400 hover:text-indigo-400" title="Discord">
|
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">
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
<path
|
<path
|
||||||
|
|||||||
+677
@@ -0,0 +1,677 @@
|
|||||||
|
<!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">
|
||||||
|
<div class="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-3 animate-pulse">
|
||||||
|
LIMITED TIME OFFER
|
||||||
|
</div>
|
||||||
|
<p class="text-white text-2xl font-bold mb-2">Lifetime License</p>
|
||||||
|
<div class="flex items-center justify-center gap-3 mb-3">
|
||||||
|
<span class="text-gray-400 text-2xl line-through">$99</span>
|
||||||
|
<span class="text-indigo-300 text-4xl font-bold">$49</span>
|
||||||
|
<span class="text-lg font-normal text-gray-400">one-time</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-300 text-sm mb-4">Includes all feature updates forever</p>
|
||||||
|
|
||||||
|
<!-- Unlimited Usage Info -->
|
||||||
|
<div class="bg-indigo-900/30 rounded-lg p-4 mb-4 border border-indigo-500/30">
|
||||||
|
<div class="flex items-start gap-3 text-left">
|
||||||
|
<i data-lucide="infinity" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-white font-semibold text-sm mb-2">Unlimited Usage</h4>
|
||||||
|
<p class="text-gray-300 text-xs leading-relaxed">
|
||||||
|
The BentoPDF commercial license permits use on an <strong class="text-white">unrestricted, unlimited number of devices, servers, and user machines</strong> within your organization. There are <strong class="text-white">no per-user, per-machine, or per-seat limitations</strong>. Once you purchase the license, all your internal users may use BentoPDF through your browser-based system without requiring additional licenses.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 hover:shadow-indigo-500/50 transform hover:scale-105 transition-all duration-200">
|
||||||
|
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">
|
||||||
|
© 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/AP2Y97juZT" 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>
|
||||||
+1
-1
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "bento-pdf",
|
"name": "bento-pdf",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.7.6",
|
"version": "1.8.1",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
+263
-303
@@ -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>
|
||||||
© 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">
|
||||||
|
© 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/AP2Y97juZT" 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>
|
||||||
+74
-6
@@ -109,7 +109,7 @@ input[type='file']::file-selector-button {
|
|||||||
border: 2px dashed #4f46e5;
|
border: 2px dashed #4f46e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
#embed-pdf-container > div {
|
#embed-pdf-container>div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@@ -119,7 +119,7 @@ input[type='file']::file-selector-button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.page-thumbnail,
|
.page-thumbnail,
|
||||||
#file-list > li {
|
#file-list>li {
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -495,19 +495,19 @@ footer a {
|
|||||||
color: rgb(165 180 252);
|
color: rgb(165 180 252);
|
||||||
}
|
}
|
||||||
|
|
||||||
details > summary {
|
details>summary {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
details > summary::-webkit-details-marker {
|
details>summary::-webkit-details-marker {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
details > summary .icon {
|
details>summary .icon {
|
||||||
transition: transform 0.2s ease-in-out;
|
transition: transform 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
details[open] > summary .icon {
|
details[open]>summary .icon {
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -521,3 +521,71 @@ 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroll to Top Button Visibility */
|
||||||
|
#scroll-to-top-btn.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
+26
-7
@@ -1,9 +1,29 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from './ui.js';
|
import { showLoader, hideLoader, showAlert } from './ui.js';
|
||||||
|
import { getPDFDocument } from './utils/helpers.js';
|
||||||
import { state } from './state.js';
|
import { state } from './state.js';
|
||||||
import { toolLogic } from './logic/index.js';
|
import { toolLogic } from './logic/index.js';
|
||||||
import { icons, createIcons } from 'lucide';
|
import { icons, createIcons } from 'lucide';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
const editorState = {
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
|
const editorState: {
|
||||||
|
pdf: any;
|
||||||
|
canvas: any;
|
||||||
|
context: any;
|
||||||
|
container: any;
|
||||||
|
currentPageNum: number;
|
||||||
|
pageRendering: boolean;
|
||||||
|
pageNumPending: number | null;
|
||||||
|
scale: number | 'fit';
|
||||||
|
pageSnapshot: any;
|
||||||
|
isDrawing: boolean;
|
||||||
|
startX: number;
|
||||||
|
startY: number;
|
||||||
|
cropBoxes: Record<number, any>;
|
||||||
|
lastInteractionRect: { x: number; y: number; width: number; height: number } | null;
|
||||||
|
} = {
|
||||||
pdf: null,
|
pdf: null,
|
||||||
canvas: null,
|
canvas: null,
|
||||||
context: null,
|
context: null,
|
||||||
@@ -41,7 +61,6 @@ async function renderPage(num: any) {
|
|||||||
try {
|
try {
|
||||||
const page = await editorState.pdf.getPage(num);
|
const page = await editorState.pdf.getPage(num);
|
||||||
|
|
||||||
// @ts-expect-error TS(2367) FIXME: This condition will always return 'false' since th... Remove this comment to see the full error message
|
|
||||||
if (editorState.scale === 'fit') {
|
if (editorState.scale === 'fit') {
|
||||||
editorState.scale = calculateFitScale(page);
|
editorState.scale = calculateFitScale(page);
|
||||||
}
|
}
|
||||||
@@ -185,12 +204,10 @@ export async function setupCanvasEditor(toolId: any) {
|
|||||||
|
|
||||||
const pageNav = document.getElementById('page-nav');
|
const pageNav = document.getElementById('page-nav');
|
||||||
const pdfData = await state.pdfDoc.save();
|
const pdfData = await state.pdfDoc.save();
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
editorState.pdf = await getPDFDocument({ data: pdfData }).promise;
|
||||||
editorState.pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
|
|
||||||
|
|
||||||
editorState.cropBoxes = {};
|
editorState.cropBoxes = {};
|
||||||
editorState.currentPageNum = 1;
|
editorState.currentPageNum = 1;
|
||||||
// @ts-expect-error TS(2322) FIXME: Type 'string' is not assignable to type 'number'.
|
|
||||||
editorState.scale = 'fit';
|
editorState.scale = 'fit';
|
||||||
|
|
||||||
pageNav.textContent = '';
|
pageNav.textContent = '';
|
||||||
@@ -256,11 +273,13 @@ export async function setupCanvasEditor(toolId: any) {
|
|||||||
|
|
||||||
if (toolId === 'crop') {
|
if (toolId === 'crop') {
|
||||||
document.getElementById('zoom-in-btn').onclick = () => {
|
document.getElementById('zoom-in-btn').onclick = () => {
|
||||||
editorState.scale += 0.25;
|
if (typeof editorState.scale === 'number') {
|
||||||
|
editorState.scale += 0.25;
|
||||||
|
}
|
||||||
renderPage(editorState.currentPageNum);
|
renderPage(editorState.currentPageNum);
|
||||||
};
|
};
|
||||||
document.getElementById('zoom-out-btn').onclick = () => {
|
document.getElementById('zoom-out-btn').onclick = () => {
|
||||||
if (editorState.scale > 0.25) {
|
if (typeof editorState.scale === 'number' && editorState.scale > 0.25) {
|
||||||
editorState.scale -= 0.25;
|
editorState.scale -= 0.25;
|
||||||
renderPage(editorState.currentPageNum);
|
renderPage(editorState.currentPageNum);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -161,6 +161,12 @@ export const categories = [
|
|||||||
icon: 'square-pen',
|
icon: 'square-pen',
|
||||||
subtitle: 'Fill in forms directly in the browser. Also supports XFA forms.',
|
subtitle: 'Fill in forms directly in the browser. Also supports XFA forms.',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: '/src/pages/form-creator.html',
|
||||||
|
name: 'Create PDF Form',
|
||||||
|
icon: 'file-input',
|
||||||
|
subtitle: 'Create fillable PDF forms with drag-and-drop text fields.',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'remove-blank-pages',
|
id: 'remove-blank-pages',
|
||||||
name: 'Remove Blank Pages',
|
name: 'Remove Blank Pages',
|
||||||
|
|||||||
@@ -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';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -7,7 +7,7 @@ import {
|
|||||||
renderFileDisplay,
|
renderFileDisplay,
|
||||||
switchView,
|
switchView,
|
||||||
} from '../ui.js';
|
} from '../ui.js';
|
||||||
import { formatIsoDate, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { formatIsoDate, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { setupCanvasEditor } from '../canvasEditor.js';
|
import { setupCanvasEditor } from '../canvasEditor.js';
|
||||||
import { toolLogic } from '../logic/index.js';
|
import { toolLogic } from '../logic/index.js';
|
||||||
import { renderDuplicateOrganizeThumbnails } from '../logic/duplicate-organize.js';
|
import { renderDuplicateOrganizeThumbnails } from '../logic/duplicate-organize.js';
|
||||||
@@ -21,16 +21,26 @@ import {
|
|||||||
} from '../config/pdf-tools.js';
|
} from '../config/pdf-tools.js';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
// Global state for rotation tracking (used by Rotate tool)
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
const rotationState: number[] = [];
|
const rotationState: number[] = [];
|
||||||
let imageSortableInstance: Sortable | null = null;
|
let imageSortableInstance: Sortable | null = null;
|
||||||
const activeImageUrls = new Map<File, string>();
|
const activeImageUrls = new Map<File, string>();
|
||||||
|
|
||||||
// Export getter for rotation state (used by ui.ts)
|
|
||||||
export function getRotationState(): readonly number[] {
|
export function getRotationState(): readonly number[] {
|
||||||
return rotationState;
|
return rotationState;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function updateRotationState(pageIndex: number, rotation: number) {
|
||||||
|
if (pageIndex >= 0 && pageIndex < rotationState.length) {
|
||||||
|
rotationState[pageIndex] = rotation;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resetRotationState() {
|
||||||
|
rotationState.length = 0;
|
||||||
|
}
|
||||||
|
|
||||||
async function handleSinglePdfUpload(toolId, file) {
|
async function handleSinglePdfUpload(toolId, file) {
|
||||||
showLoader('Loading PDF...');
|
showLoader('Loading PDF...');
|
||||||
try {
|
try {
|
||||||
@@ -164,7 +174,7 @@ async function handleSinglePdfUpload(toolId, file) {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const pdfBytes = await readFileAsArrayBuffer(state.files[0]);
|
const pdfBytes = await readFileAsArrayBuffer(state.files[0]);
|
||||||
const pdfjsDoc = await pdfjsLib.getDocument({
|
const pdfjsDoc = await getPDFDocument({
|
||||||
data: pdfBytes as ArrayBuffer,
|
data: pdfBytes as ArrayBuffer,
|
||||||
}).promise;
|
}).promise;
|
||||||
const [metadataResult, fieldObjects] = await Promise.all([
|
const [metadataResult, fieldObjects] = await Promise.all([
|
||||||
@@ -469,6 +479,43 @@ async function handleSinglePdfUpload(toolId, file) {
|
|||||||
toolLogic['page-dimensions']();
|
toolLogic['page-dimensions']();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Setup quality sliders for image conversion tools
|
||||||
|
if (toolId === 'pdf-to-jpg') {
|
||||||
|
const qualitySlider = document.getElementById('jpg-quality') as HTMLInputElement;
|
||||||
|
const qualityValue = document.getElementById('jpg-quality-value');
|
||||||
|
if (qualitySlider && qualityValue) {
|
||||||
|
const updateValue = () => {
|
||||||
|
qualityValue.textContent = `${Math.round(parseFloat(qualitySlider.value) * 100)}%`;
|
||||||
|
};
|
||||||
|
qualitySlider.addEventListener('input', updateValue);
|
||||||
|
updateValue();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (toolId === 'pdf-to-png') {
|
||||||
|
const qualitySlider = document.getElementById('png-quality') as HTMLInputElement;
|
||||||
|
const qualityValue = document.getElementById('png-quality-value');
|
||||||
|
if (qualitySlider && qualityValue) {
|
||||||
|
const updateValue = () => {
|
||||||
|
qualityValue.textContent = `${qualitySlider.value}x`;
|
||||||
|
};
|
||||||
|
qualitySlider.addEventListener('input', updateValue);
|
||||||
|
updateValue();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (toolId === 'pdf-to-webp') {
|
||||||
|
const qualitySlider = document.getElementById('webp-quality') as HTMLInputElement;
|
||||||
|
const qualityValue = document.getElementById('webp-quality-value');
|
||||||
|
if (qualitySlider && qualityValue) {
|
||||||
|
const updateValue = () => {
|
||||||
|
qualityValue.textContent = `${Math.round(parseFloat(qualitySlider.value) * 100)}%`;
|
||||||
|
};
|
||||||
|
qualitySlider.addEventListener('input', updateValue);
|
||||||
|
updateValue();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (toolLogic[toolId] && typeof toolLogic[toolId].setup === 'function') {
|
if (toolLogic[toolId] && typeof toolLogic[toolId].setup === 'function') {
|
||||||
toolLogic[toolId].setup();
|
toolLogic[toolId].setup();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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()
|
||||||
@@ -3,6 +3,7 @@ import {
|
|||||||
downloadFile,
|
downloadFile,
|
||||||
readFileAsArrayBuffer,
|
readFileAsArrayBuffer,
|
||||||
hexToRgb,
|
hexToRgb,
|
||||||
|
resetAndReloadTool,
|
||||||
} from '../utils/helpers.js';
|
} from '../utils/helpers.js';
|
||||||
import { state, resetState } from '../state.js';
|
import { state, resetState } from '../state.js';
|
||||||
|
|
||||||
@@ -40,9 +41,9 @@ export function setupWatermarkUI() {
|
|||||||
opacitySliderText.addEventListener(
|
opacitySliderText.addEventListener(
|
||||||
'input',
|
'input',
|
||||||
() =>
|
() =>
|
||||||
(opacityValueText.textContent = (
|
(opacityValueText.textContent = (
|
||||||
opacitySliderText as HTMLInputElement
|
opacitySliderText as HTMLInputElement
|
||||||
).value)
|
).value)
|
||||||
);
|
);
|
||||||
|
|
||||||
angleSliderText.addEventListener(
|
angleSliderText.addEventListener(
|
||||||
@@ -59,17 +60,17 @@ export function setupWatermarkUI() {
|
|||||||
opacitySliderImage.addEventListener(
|
opacitySliderImage.addEventListener(
|
||||||
'input',
|
'input',
|
||||||
() =>
|
() =>
|
||||||
(opacityValueImage.textContent = (
|
(opacityValueImage.textContent = (
|
||||||
opacitySliderImage as HTMLInputElement
|
opacitySliderImage as HTMLInputElement
|
||||||
).value)
|
).value)
|
||||||
);
|
);
|
||||||
|
|
||||||
angleSliderImage.addEventListener(
|
angleSliderImage.addEventListener(
|
||||||
'input',
|
'input',
|
||||||
() =>
|
() =>
|
||||||
(angleValueImage.textContent = (
|
(angleValueImage.textContent = (
|
||||||
angleSliderImage as HTMLInputElement
|
angleSliderImage as HTMLInputElement
|
||||||
).value)
|
).value)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -175,14 +176,7 @@ export async function addWatermark() {
|
|||||||
'watermarked.pdf'
|
'watermarked.pdf'
|
||||||
);
|
);
|
||||||
|
|
||||||
const toolid = state.activeTool;
|
resetAndReloadTool();
|
||||||
resetState();
|
|
||||||
if (toolid) {
|
|
||||||
const element = document.querySelector(
|
|
||||||
`[data-tool-id="${toolid}"]`
|
|
||||||
) as HTMLElement;
|
|
||||||
if (element) element.click();
|
|
||||||
}
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
showAlert(
|
showAlert(
|
||||||
|
|||||||
@@ -6,11 +6,11 @@ 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';
|
||||||
|
import { truncateFilename, getPDFDocument } from '../utils/helpers.js';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
||||||
import.meta.url
|
|
||||||
).toString();
|
|
||||||
|
|
||||||
const modalContainer = document.getElementById('modal-container');
|
const modalContainer = document.getElementById('modal-container');
|
||||||
|
|
||||||
@@ -453,6 +453,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');
|
||||||
@@ -712,8 +714,10 @@ function handleResize() {
|
|||||||
if (window.innerWidth >= 1024) {
|
if (window.innerWidth >= 1024) {
|
||||||
viewerSection.classList.remove('hidden');
|
viewerSection.classList.remove('hidden');
|
||||||
bookmarksSection.classList.remove('hidden');
|
bookmarksSection.classList.remove('hidden');
|
||||||
showViewerBtn.classList.remove('bg-blue-50', 'text-blue-600');
|
showViewerBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||||
showBookmarksBtn.classList.remove('bg-blue-50', 'text-blue-600');
|
showViewerBtn.classList.add('text-gray-300');
|
||||||
|
showBookmarksBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||||
|
showBookmarksBtn.classList.add('text-gray-300');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -722,15 +726,19 @@ window.addEventListener('resize', handleResize);
|
|||||||
showViewerBtn.addEventListener('click', () => {
|
showViewerBtn.addEventListener('click', () => {
|
||||||
viewerSection.classList.remove('hidden');
|
viewerSection.classList.remove('hidden');
|
||||||
bookmarksSection.classList.add('hidden');
|
bookmarksSection.classList.add('hidden');
|
||||||
showViewerBtn.classList.add('bg-blue-50', 'text-blue-600');
|
showViewerBtn.classList.add('bg-indigo-600', 'text-white');
|
||||||
showBookmarksBtn.classList.remove('bg-blue-50', 'text-blue-600');
|
showViewerBtn.classList.remove('text-gray-300');
|
||||||
|
showBookmarksBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||||
|
showBookmarksBtn.classList.add('text-gray-300');
|
||||||
});
|
});
|
||||||
|
|
||||||
showBookmarksBtn.addEventListener('click', () => {
|
showBookmarksBtn.addEventListener('click', () => {
|
||||||
viewerSection.classList.add('hidden');
|
viewerSection.classList.add('hidden');
|
||||||
bookmarksSection.classList.remove('hidden');
|
bookmarksSection.classList.remove('hidden');
|
||||||
showBookmarksBtn.classList.add('bg-blue-50', 'text-blue-600');
|
showBookmarksBtn.classList.add('bg-indigo-600', 'text-white');
|
||||||
showViewerBtn.classList.remove('bg-blue-50', 'text-blue-600');
|
showBookmarksBtn.classList.remove('text-gray-300');
|
||||||
|
showViewerBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||||
|
showViewerBtn.classList.add('text-gray-300');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Dropdown toggles
|
// Dropdown toggles
|
||||||
@@ -860,8 +868,10 @@ function resetToUploader() {
|
|||||||
// Reset mobile view
|
// Reset mobile view
|
||||||
viewerSection.classList.remove('hidden');
|
viewerSection.classList.remove('hidden');
|
||||||
bookmarksSection.classList.add('hidden');
|
bookmarksSection.classList.add('hidden');
|
||||||
showViewerBtn.classList.add('bg-blue-50', 'text-blue-600');
|
showViewerBtn.classList.add('bg-indigo-600', 'text-white');
|
||||||
showBookmarksBtn.classList.remove('bg-blue-50', 'text-blue-600');
|
showViewerBtn.classList.remove('text-gray-300');
|
||||||
|
showBookmarksBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||||
|
showBookmarksBtn.classList.add('text-gray-300');
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
@@ -1030,7 +1040,7 @@ async function loadPDF(e) {
|
|||||||
if (!file) return;
|
if (!file) return;
|
||||||
|
|
||||||
originalFileName = file.name.replace('.pdf', '');
|
originalFileName = file.name.replace('.pdf', '');
|
||||||
filenameDisplay.textContent = originalFileName;
|
filenameDisplay.textContent = truncateFilename(file.name);
|
||||||
renderFileDisplay(file);
|
renderFileDisplay(file);
|
||||||
const arrayBuffer = await file.arrayBuffer();
|
const arrayBuffer = await file.arrayBuffer();
|
||||||
|
|
||||||
@@ -1043,7 +1053,7 @@ async function loadPDF(e) {
|
|||||||
|
|
||||||
pdfLibDoc = await PDFDocument.load(arrayBuffer, { ignoreEncryption: true });
|
pdfLibDoc = await PDFDocument.load(arrayBuffer, { ignoreEncryption: true });
|
||||||
|
|
||||||
const loadingTask = pdfjsLib.getDocument({
|
const loadingTask = getPDFDocument({
|
||||||
data: new Uint8Array(arrayBuffer),
|
data: new Uint8Array(arrayBuffer),
|
||||||
});
|
});
|
||||||
pdfJsDoc = await loadingTask.promise;
|
pdfJsDoc = await loadingTask.promise;
|
||||||
@@ -1898,45 +1908,64 @@ async function extractExistingBookmarks(doc) {
|
|||||||
console.error('Error building named destinations:', e);
|
console.error('Error building named destinations:', e);
|
||||||
}
|
}
|
||||||
|
|
||||||
function findPageIndex(pageRef) {
|
function findPageIndex(pageRef, resolvedPageRef = null) {
|
||||||
if (!pageRef) return 0;
|
if (!pageRef) return 0;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const resolved = resolveRef(pageRef);
|
// Method 1: Try the resolved page ref first (if provided)
|
||||||
|
if (resolvedPageRef) {
|
||||||
if (pageRef.numberValue !== undefined) {
|
// Check if resolved is a page dictionary - compare to each page's dictionary
|
||||||
const numericIndex = pageRef.numberValue | 0;
|
|
||||||
if (numericIndex >= 0 && numericIndex < pages.length)
|
|
||||||
return numericIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pageRef.objectNumber !== undefined) {
|
|
||||||
const idxByObjNum = pages.findIndex(
|
|
||||||
(p) => p.ref.objectNumber === pageRef.objectNumber
|
|
||||||
);
|
|
||||||
if (idxByObjNum !== -1) return idxByObjNum;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pageRef.toString) {
|
|
||||||
const target = pageRef.toString();
|
|
||||||
const idxByString = pages.findIndex(
|
|
||||||
(p) => p.ref.toString() === target
|
|
||||||
);
|
|
||||||
if (idxByString !== -1) return idxByString;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (resolved && resolved.get) {
|
|
||||||
for (let i = 0; i < pages.length; i++) {
|
for (let i = 0; i < pages.length; i++) {
|
||||||
const pageDict = doc.context.lookup(pages[i].ref);
|
const pageDict = doc.context.lookup(pages[i].ref);
|
||||||
if (pageDict === resolved) return i;
|
if (pageDict === resolvedPageRef) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method 2: Direct PDFRef comparison
|
||||||
|
const directMatch = pages.findIndex((p) => p.ref === pageRef);
|
||||||
|
if (directMatch !== -1) {
|
||||||
|
return directMatch;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method 3: Try resolving if not already resolved
|
||||||
|
if (!resolvedPageRef) {
|
||||||
|
const resolved = resolveRef(pageRef);
|
||||||
|
if (resolved) {
|
||||||
|
// Check if the resolved object matches any page's dictionary
|
||||||
|
for (let i = 0; i < pages.length; i++) {
|
||||||
|
const pageDict = doc.context.lookup(pages[i].ref);
|
||||||
|
if (pageDict === resolved) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method 4: Compare by string representation
|
||||||
|
if (pageRef.toString) {
|
||||||
|
const target = pageRef.toString();
|
||||||
|
const stringMatch = pages.findIndex(
|
||||||
|
(p) => p.ref && p.ref.toString() === target
|
||||||
|
);
|
||||||
|
if (stringMatch !== -1) {
|
||||||
|
return stringMatch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method 5: Try numeric value (for edge cases)
|
||||||
|
if (pageRef.numberValue !== undefined) {
|
||||||
|
const numericIndex = pageRef.numberValue | 0;
|
||||||
|
if (numericIndex >= 0 && numericIndex < pages.length) {
|
||||||
|
return numericIndex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Error finding page:', e);
|
console.error('Error finding page index:', e);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback: keep current behavior but log for diagnostics
|
// If we couldn't find a match, return 0
|
||||||
console.warn('Falling back to page 0 for destination');
|
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1959,7 +1988,24 @@ async function extractExistingBookmarks(doc) {
|
|||||||
try {
|
try {
|
||||||
const name = dest.decodeText ? dest.decodeText() : dest.toString();
|
const name = dest.decodeText ? dest.decodeText() : dest.toString();
|
||||||
if (namedDests.has(name)) {
|
if (namedDests.has(name)) {
|
||||||
dest = namedDests.get(name);
|
const namedDest = namedDests.get(name);
|
||||||
|
|
||||||
|
// Named destinations can be:
|
||||||
|
// 1. A direct array [pageRef, /XYZ, ...]
|
||||||
|
// 2. A dictionary with a 'D' entry containing the array
|
||||||
|
if (namedDest.array) {
|
||||||
|
dest = namedDest;
|
||||||
|
} else if (namedDest.lookup) {
|
||||||
|
// It's a dictionary - extract the 'D' entry
|
||||||
|
const destFromDict = namedDest.lookup(PDFName.of('D'));
|
||||||
|
if (destFromDict) {
|
||||||
|
dest = destFromDict;
|
||||||
|
} else {
|
||||||
|
dest = namedDest;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dest = namedDest;
|
||||||
|
}
|
||||||
} else if (dest.lookup) {
|
} else if (dest.lookup) {
|
||||||
// Some named destinations resolve to a dictionary with 'D' entry
|
// Some named destinations resolve to a dictionary with 'D' entry
|
||||||
const maybeDict = resolveRef(dest);
|
const maybeDict = resolveRef(dest);
|
||||||
@@ -1974,7 +2020,9 @@ async function extractExistingBookmarks(doc) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return resolveRef(dest);
|
// dest is typically an array like [pageRef, /XYZ, x, y, zoom]
|
||||||
|
// Resolving it would corrupt the array structure
|
||||||
|
return dest;
|
||||||
}
|
}
|
||||||
|
|
||||||
function traverse(item) {
|
function traverse(item) {
|
||||||
@@ -1994,7 +2042,8 @@ async function extractExistingBookmarks(doc) {
|
|||||||
|
|
||||||
if (dest && dest.array) {
|
if (dest && dest.array) {
|
||||||
const pageRef = dest.array[0];
|
const pageRef = dest.array[0];
|
||||||
pageIndex = findPageIndex(pageRef);
|
const resolvedPageRef = resolveRef(pageRef);
|
||||||
|
pageIndex = findPageIndex(pageRef, resolvedPageRef);
|
||||||
|
|
||||||
if (dest.array.length > 2) {
|
if (dest.array.length > 2) {
|
||||||
const xObj = resolveRef(dest.array[2]);
|
const xObj = resolveRef(dest.array[2]);
|
||||||
|
|||||||
@@ -3,10 +3,14 @@ import {
|
|||||||
downloadFile,
|
downloadFile,
|
||||||
hexToRgb,
|
hexToRgb,
|
||||||
readFileAsArrayBuffer,
|
readFileAsArrayBuffer,
|
||||||
|
getPDFDocument,
|
||||||
} from '../utils/helpers.js';
|
} from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
|
|
||||||
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
let isRenderingPreview = false;
|
let isRenderingPreview = false;
|
||||||
let renderTimeout: any;
|
let renderTimeout: any;
|
||||||
@@ -16,29 +20,25 @@ async function updateTextColorPreview() {
|
|||||||
isRenderingPreview = true;
|
isRenderingPreview = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const textColorCanvas = document.getElementById('text-color-canvas');
|
const textColorCanvas = document.getElementById('text-color-canvas') as HTMLCanvasElement;
|
||||||
if (!textColorCanvas) return;
|
if (!textColorCanvas) return;
|
||||||
|
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument(
|
||||||
const pdf = await pdfjsLib.getDocument(
|
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
const page = await pdf.getPage(1); // Preview first page
|
const page = await pdf.getPage(1); // Preview first page
|
||||||
const viewport = page.getViewport({ scale: 0.8 });
|
const viewport = page.getViewport({ scale: 0.8 });
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'getContext' does not exist on type 'HTML... Remove this comment to see the full error message
|
|
||||||
const context = textColorCanvas.getContext('2d');
|
const context = textColorCanvas.getContext('2d');
|
||||||
|
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'width' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
|
||||||
textColorCanvas.width = viewport.width;
|
textColorCanvas.width = viewport.width;
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'height' does not exist on type 'HTMLElem... Remove this comment to see the full error message
|
|
||||||
textColorCanvas.height = viewport.height;
|
textColorCanvas.height = viewport.height;
|
||||||
|
|
||||||
await page.render({ canvasContext: context, viewport }).promise;
|
await page.render({ canvasContext: context, viewport, canvas: textColorCanvas }).promise;
|
||||||
const imageData = context.getImageData(
|
const imageData = context.getImageData(
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
(textColorCanvas as HTMLCanvasElement).width,
|
textColorCanvas.width,
|
||||||
(textColorCanvas as HTMLCanvasElement).height
|
textColorCanvas.height
|
||||||
);
|
);
|
||||||
const data = imageData.data;
|
const data = imageData.data;
|
||||||
const colorHex = (
|
const colorHex = (
|
||||||
@@ -78,21 +78,19 @@ export async function setupTextColorTool() {
|
|||||||
renderTimeout = setTimeout(updateTextColorPreview, 250);
|
renderTimeout = setTimeout(updateTextColorPreview, 250);
|
||||||
});
|
});
|
||||||
|
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument(
|
||||||
const pdf = await pdfjsLib.getDocument(
|
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
const page = await pdf.getPage(1);
|
const page = await pdf.getPage(1);
|
||||||
const viewport = page.getViewport({ scale: 0.8 });
|
const viewport = page.getViewport({ scale: 0.8 });
|
||||||
|
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'width' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
(originalCanvas as HTMLCanvasElement).width = viewport.width;
|
||||||
originalCanvas.width = viewport.width;
|
(originalCanvas as HTMLCanvasElement).height = viewport.height;
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'height' does not exist on type 'HTMLElem... Remove this comment to see the full error message
|
|
||||||
originalCanvas.height = viewport.height;
|
|
||||||
|
|
||||||
await page.render({
|
await page.render({
|
||||||
canvasContext: (originalCanvas as HTMLCanvasElement).getContext('2d'),
|
canvasContext: (originalCanvas as HTMLCanvasElement).getContext('2d'),
|
||||||
viewport,
|
viewport,
|
||||||
|
canvas: originalCanvas as HTMLCanvasElement,
|
||||||
}).promise;
|
}).promise;
|
||||||
await updateTextColorPreview();
|
await updateTextColorPreview();
|
||||||
}
|
}
|
||||||
@@ -103,16 +101,14 @@ export async function changeTextColor() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
const colorHex = (document.getElementById('text-color-input') as HTMLInputElement).value;
|
||||||
const colorHex = document.getElementById('text-color-input').value;
|
|
||||||
const { r, g, b } = hexToRgb(colorHex);
|
const { r, g, b } = hexToRgb(colorHex);
|
||||||
const darknessThreshold = 120;
|
const darknessThreshold = 120;
|
||||||
|
|
||||||
showLoader('Changing text color...');
|
showLoader('Changing text color...');
|
||||||
try {
|
try {
|
||||||
const newPdfDoc = await PDFLibDocument.create();
|
const newPdfDoc = await PDFLibDocument.create();
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument(
|
||||||
const pdf = await pdfjsLib.getDocument(
|
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
|
|
||||||
@@ -126,7 +122,7 @@ export async function changeTextColor() {
|
|||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
const context = canvas.getContext('2d');
|
const context = canvas.getContext('2d');
|
||||||
|
|
||||||
await page.render({ canvasContext: context, viewport }).promise;
|
await page.render({ canvasContext: context, viewport, canvas }).promise;
|
||||||
|
|
||||||
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
const data = imageData.data;
|
const data = imageData.data;
|
||||||
@@ -144,16 +140,15 @@ export async function changeTextColor() {
|
|||||||
}
|
}
|
||||||
context.putImageData(imageData, 0, 0);
|
context.putImageData(imageData, 0, 0);
|
||||||
|
|
||||||
const pngImageBytes = await new Promise((resolve) =>
|
const pngImageBytes = await new Promise<Uint8Array>((resolve) =>
|
||||||
canvas.toBlob((blob) => {
|
canvas.toBlob((blob) => {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
// @ts-expect-error TS(2769) FIXME: No overload matches this call.
|
reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer));
|
||||||
reader.onload = () => resolve(new Uint8Array(reader.result));
|
reader.readAsArrayBuffer(blob!);
|
||||||
reader.readAsArrayBuffer(blob);
|
|
||||||
}, 'image/png')
|
}, 'image/png')
|
||||||
);
|
);
|
||||||
|
|
||||||
const pngImage = await newPdfDoc.embedPng(pngImageBytes as ArrayBuffer);
|
const pngImage = await newPdfDoc.embedPng(pngImageBytes);
|
||||||
const newPage = newPdfDoc.addPage([viewport.width, viewport.height]);
|
const newPage = newPdfDoc.addPage([viewport.width, viewport.height]);
|
||||||
newPage.drawImage(pngImage, {
|
newPage.drawImage(pngImage, {
|
||||||
x: 0,
|
x: 0,
|
||||||
|
|||||||
@@ -1,67 +1,208 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, hexToRgb } from '../utils/helpers.js';
|
import { downloadFile, hexToRgb, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
|
|
||||||
import { PDFDocument as PDFLibDocument, rgb } from 'pdf-lib';
|
import { PDFDocument as PDFLibDocument, rgb } from 'pdf-lib';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
document.addEventListener('change', (e) => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
if (target.id === 'add-separator') {
|
||||||
|
const separatorOptions = document.getElementById('separator-options');
|
||||||
|
if (separatorOptions) {
|
||||||
|
const checkbox = target as HTMLInputElement;
|
||||||
|
if (checkbox.checked) {
|
||||||
|
separatorOptions.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
separatorOptions.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
export async function combineToSinglePage() {
|
export async function combineToSinglePage() {
|
||||||
|
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
||||||
|
const orientation = document.getElementById('combine-orientation').value;
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
||||||
const spacing = parseInt(document.getElementById('page-spacing').value) || 0;
|
const spacing = parseInt(document.getElementById('page-spacing').value) || 0;
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
||||||
const backgroundColorHex = document.getElementById('background-color').value;
|
const backgroundColorHex = document.getElementById('background-color').value;
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'checked' does not exist on type 'HTMLEle... Remove this comment to see the full error message
|
// @ts-expect-error TS(2339) FIXME: Property 'checked' does not exist on type 'HTMLEle... Remove this comment to see the full error message
|
||||||
const addSeparator = document.getElementById('add-separator').checked;
|
const addSeparator = document.getElementById('add-separator').checked;
|
||||||
|
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
||||||
|
const separatorThickness = parseFloat(document.getElementById('separator-thickness').value) || 0.5;
|
||||||
|
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
||||||
|
const separatorColorHex = document.getElementById('separator-color').value;
|
||||||
|
|
||||||
const backgroundColor = hexToRgb(backgroundColorHex);
|
const backgroundColor = hexToRgb(backgroundColorHex);
|
||||||
|
const separatorColor = hexToRgb(separatorColorHex);
|
||||||
|
|
||||||
showLoader('Combining pages...');
|
showLoader('Combining pages...');
|
||||||
try {
|
try {
|
||||||
const sourceDoc = state.pdfDoc;
|
const sourceDoc = state.pdfDoc;
|
||||||
const newDoc = await PDFLibDocument.create();
|
const newDoc = await PDFLibDocument.create();
|
||||||
const sourcePages = sourceDoc.getPages();
|
|
||||||
|
|
||||||
|
const pdfBytes = await sourceDoc.save();
|
||||||
|
const pdfjsDoc = await getPDFDocument({ data: pdfBytes }).promise;
|
||||||
|
|
||||||
|
const sourcePages = sourceDoc.getPages();
|
||||||
let maxWidth = 0;
|
let maxWidth = 0;
|
||||||
|
let maxHeight = 0;
|
||||||
|
let totalWidth = 0;
|
||||||
let totalHeight = 0;
|
let totalHeight = 0;
|
||||||
|
|
||||||
sourcePages.forEach((page: any) => {
|
sourcePages.forEach((page: any) => {
|
||||||
const { width, height } = page.getSize();
|
const { width, height } = page.getSize();
|
||||||
if (width > maxWidth) maxWidth = width;
|
if (width > maxWidth) maxWidth = width;
|
||||||
|
if (height > maxHeight) maxHeight = height;
|
||||||
|
totalWidth += width;
|
||||||
totalHeight += height;
|
totalHeight += height;
|
||||||
});
|
});
|
||||||
totalHeight += Math.max(0, sourcePages.length - 1) * spacing;
|
|
||||||
|
|
||||||
const newPage = newDoc.addPage([maxWidth, totalHeight]);
|
let finalWidth, finalHeight;
|
||||||
|
if (orientation === 'horizontal') {
|
||||||
|
finalWidth = totalWidth + Math.max(0, sourcePages.length - 1) * spacing;
|
||||||
|
finalHeight = maxHeight;
|
||||||
|
} else {
|
||||||
|
finalWidth = maxWidth;
|
||||||
|
finalHeight = totalHeight + Math.max(0, sourcePages.length - 1) * spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newPage = newDoc.addPage([finalWidth, finalHeight]);
|
||||||
|
|
||||||
if (backgroundColorHex.toUpperCase() !== '#FFFFFF') {
|
if (backgroundColorHex.toUpperCase() !== '#FFFFFF') {
|
||||||
newPage.drawRectangle({
|
newPage.drawRectangle({
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
width: maxWidth,
|
width: finalWidth,
|
||||||
height: totalHeight,
|
height: finalHeight,
|
||||||
color: rgb(backgroundColor.r, backgroundColor.g, backgroundColor.b),
|
color: rgb(backgroundColor.r, backgroundColor.g, backgroundColor.b),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let currentY = totalHeight;
|
let currentX = 0;
|
||||||
|
let currentY = finalHeight;
|
||||||
|
|
||||||
for (let i = 0; i < sourcePages.length; i++) {
|
for (let i = 0; i < sourcePages.length; i++) {
|
||||||
const sourcePage = sourcePages[i];
|
const sourcePage = sourcePages[i];
|
||||||
const { width, height } = sourcePage.getSize();
|
const { width, height } = sourcePage.getSize();
|
||||||
const embeddedPage = await newDoc.embedPage(sourcePage);
|
|
||||||
|
|
||||||
currentY -= height;
|
try {
|
||||||
const x = (maxWidth - width) / 2;
|
const page = await pdfjsDoc.getPage(i + 1);
|
||||||
|
const scale = 2.0;
|
||||||
|
const viewport = page.getViewport({ scale });
|
||||||
|
|
||||||
newPage.drawPage(embeddedPage, { x, y: currentY, width, height });
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.width = viewport.width;
|
||||||
|
canvas.height = viewport.height;
|
||||||
|
const context = canvas.getContext('2d')!;
|
||||||
|
|
||||||
if (addSeparator && i < sourcePages.length - 1) {
|
await page.render({
|
||||||
const lineY = currentY - spacing / 2;
|
canvasContext: context,
|
||||||
newPage.drawLine({
|
viewport,
|
||||||
start: { x: 0, y: lineY },
|
canvas
|
||||||
end: { x: maxWidth, y: lineY },
|
}).promise;
|
||||||
thickness: 0.5,
|
|
||||||
color: rgb(0.8, 0.8, 0.8),
|
const pngDataUrl = canvas.toDataURL('image/png');
|
||||||
});
|
const pngImage = await newDoc.embedPng(pngDataUrl);
|
||||||
|
|
||||||
|
if (orientation === 'horizontal') {
|
||||||
|
const y = (finalHeight - height) / 2;
|
||||||
|
newPage.drawImage(pngImage, { x: currentX, y, width, height });
|
||||||
|
} else {
|
||||||
|
// Vertical layout: stack top to bottom
|
||||||
|
currentY -= height;
|
||||||
|
const x = (finalWidth - width) / 2; // Center horizontally
|
||||||
|
newPage.drawImage(pngImage, { x, y: currentY, width, height });
|
||||||
|
}
|
||||||
|
} catch (renderError) {
|
||||||
|
console.warn(`Failed to render page ${i + 1} with PDF.js, trying fallback method:`, renderError);
|
||||||
|
|
||||||
|
// Fallback: try to copy and embed the page directly
|
||||||
|
try {
|
||||||
|
const [copiedPage] = await newDoc.copyPages(sourceDoc, [i]);
|
||||||
|
|
||||||
|
if (orientation === 'horizontal') {
|
||||||
|
const y = (finalHeight - height) / 2;
|
||||||
|
const embeddedPage = await newDoc.embedPage(copiedPage);
|
||||||
|
newPage.drawPage(embeddedPage, { x: currentX, y, width, height });
|
||||||
|
} else {
|
||||||
|
currentY -= height;
|
||||||
|
const x = (finalWidth - width) / 2;
|
||||||
|
const embeddedPage = await newDoc.embedPage(copiedPage);
|
||||||
|
newPage.drawPage(embeddedPage, { x, y: currentY, width, height });
|
||||||
|
}
|
||||||
|
} catch (embedError) {
|
||||||
|
console.error(`Failed to process page ${i + 1}:`, embedError);
|
||||||
|
|
||||||
|
if (orientation === 'horizontal') {
|
||||||
|
const y = (finalHeight - height) / 2;
|
||||||
|
newPage.drawRectangle({
|
||||||
|
x: currentX,
|
||||||
|
y,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
borderColor: rgb(0.8, 0, 0),
|
||||||
|
borderWidth: 2,
|
||||||
|
});
|
||||||
|
|
||||||
|
newPage.drawText(`Page ${i + 1} could not be rendered`, {
|
||||||
|
x: currentX + 10,
|
||||||
|
y: y + height / 2,
|
||||||
|
size: 12,
|
||||||
|
color: rgb(0.8, 0, 0),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
currentY -= height;
|
||||||
|
const x = (finalWidth - width) / 2;
|
||||||
|
newPage.drawRectangle({
|
||||||
|
x,
|
||||||
|
y: currentY,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
borderColor: rgb(0.8, 0, 0),
|
||||||
|
borderWidth: 2,
|
||||||
|
});
|
||||||
|
|
||||||
|
newPage.drawText(`Page ${i + 1} could not be rendered`, {
|
||||||
|
x: x + 10,
|
||||||
|
y: currentY + height / 2,
|
||||||
|
size: 12,
|
||||||
|
color: rgb(0.8, 0, 0),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
currentY -= spacing;
|
// Draw separator line
|
||||||
|
if (addSeparator && i < sourcePages.length - 1) {
|
||||||
|
if (orientation === 'horizontal') {
|
||||||
|
const lineX = currentX + width + spacing / 2;
|
||||||
|
newPage.drawLine({
|
||||||
|
start: { x: lineX, y: 0 },
|
||||||
|
end: { x: lineX, y: finalHeight },
|
||||||
|
thickness: separatorThickness,
|
||||||
|
color: rgb(separatorColor.r, separatorColor.g, separatorColor.b),
|
||||||
|
});
|
||||||
|
currentX += width + spacing;
|
||||||
|
} else {
|
||||||
|
const lineY = currentY - spacing / 2;
|
||||||
|
newPage.drawLine({
|
||||||
|
start: { x: 0, y: lineY },
|
||||||
|
end: { x: finalWidth, y: lineY },
|
||||||
|
thickness: separatorThickness,
|
||||||
|
color: rgb(separatorColor.r, separatorColor.g, separatorColor.b),
|
||||||
|
});
|
||||||
|
currentY -= spacing;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (orientation === 'horizontal') {
|
||||||
|
currentX += width + spacing;
|
||||||
|
} else {
|
||||||
|
currentY -= spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const newPdfBytes = await newDoc.save();
|
const newPdfBytes = await newDoc.save();
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { icons, createIcons } from 'lucide';
|
import { icons, createIcons } from 'lucide';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
const state = {
|
const state = {
|
||||||
pdfDoc1: null,
|
pdfDoc1: null,
|
||||||
@@ -122,8 +126,7 @@ async function setupFileInput(inputId: any, docKey: any, displayId: any) {
|
|||||||
try {
|
try {
|
||||||
showLoader(`Loading ${file.name}...`);
|
showLoader(`Loading ${file.name}...`);
|
||||||
const pdfBytes = await readFileAsArrayBuffer(file);
|
const pdfBytes = await readFileAsArrayBuffer(file);
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
state[docKey] = await getPDFDocument(pdfBytes).promise;
|
||||||
state[docKey] = await pdfjsLib.getDocument(pdfBytes).promise;
|
|
||||||
|
|
||||||
if (state.pdfDoc1 && state.pdfDoc2) {
|
if (state.pdfDoc1 && state.pdfDoc2) {
|
||||||
document.getElementById('compare-viewer').classList.remove('hidden');
|
document.getElementById('compare-viewer').classList.remove('hidden');
|
||||||
|
|||||||
+10
-13
@@ -3,12 +3,14 @@ import {
|
|||||||
downloadFile,
|
downloadFile,
|
||||||
readFileAsArrayBuffer,
|
readFileAsArrayBuffer,
|
||||||
formatBytes,
|
formatBytes,
|
||||||
|
getPDFDocument,
|
||||||
} from '../utils/helpers.js';
|
} from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
import { PDFDocument, PDFName, PDFDict, PDFStream, PDFNumber } from 'pdf-lib';
|
import { PDFDocument, PDFName, PDFDict, PDFStream, PDFNumber } from 'pdf-lib';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
function dataUrlToBytes(dataUrl: any) {
|
function dataUrlToBytes(dataUrl: any) {
|
||||||
const base64 = dataUrl.split(',')[1];
|
const base64 = dataUrl.split(',')[1];
|
||||||
const binaryString = atob(base64);
|
const binaryString = atob(base64);
|
||||||
@@ -70,8 +72,8 @@ async function performSmartCompression(arrayBuffer: any, settings: any) {
|
|||||||
const bitsPerComponent =
|
const bitsPerComponent =
|
||||||
stream.dict.get(PDFName.of('BitsPerComponent')) instanceof PDFNumber
|
stream.dict.get(PDFName.of('BitsPerComponent')) instanceof PDFNumber
|
||||||
? (
|
? (
|
||||||
stream.dict.get(PDFName.of('BitsPerComponent')) as PDFNumber
|
stream.dict.get(PDFName.of('BitsPerComponent')) as PDFNumber
|
||||||
).asNumber()
|
).asNumber()
|
||||||
: 8;
|
: 8;
|
||||||
|
|
||||||
if (width > 0 && height > 0) {
|
if (width > 0 && height > 0) {
|
||||||
@@ -183,12 +185,7 @@ async function performSmartCompression(arrayBuffer: any, settings: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function performLegacyCompression(arrayBuffer: any, settings: any) {
|
async function performLegacyCompression(arrayBuffer: any, settings: any) {
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
const pdfJsDoc = await getPDFDocument({ data: arrayBuffer }).promise;
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
||||||
import.meta.url
|
|
||||||
).toString();
|
|
||||||
|
|
||||||
const pdfJsDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
|
||||||
const newPdfDoc = await PDFDocument.create();
|
const newPdfDoc = await PDFDocument.create();
|
||||||
|
|
||||||
for (let i = 1; i <= pdfJsDoc.numPages; i++) {
|
for (let i = 1; i <= pdfJsDoc.numPages; i++) {
|
||||||
@@ -324,13 +321,13 @@ export async function compress() {
|
|||||||
showAlert(
|
showAlert(
|
||||||
'Compression Complete',
|
'Compression Complete',
|
||||||
`Method: **${usedMethod}**. ` +
|
`Method: **${usedMethod}**. ` +
|
||||||
`File size reduced from ${originalSize} to ${compressedSize} (Saved ${savingsPercent}%).`
|
`File size reduced from ${originalSize} to ${compressedSize} (Saved ${savingsPercent}%).`
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
showAlert(
|
showAlert(
|
||||||
'Compression Finished',
|
'Compression Finished',
|
||||||
`Method: **${usedMethod}**. ` +
|
`Method: **${usedMethod}**. ` +
|
||||||
`Could not reduce file size. Original: ${originalSize}, New: ${compressedSize}.`,
|
`Could not reduce file size. Original: ${originalSize}, New: ${compressedSize}.`,
|
||||||
// @ts-expect-error TS(2554) FIXME: Expected 2 arguments, but got 3.
|
// @ts-expect-error TS(2554) FIXME: Expected 2 arguments, but got 3.
|
||||||
'warning'
|
'warning'
|
||||||
);
|
);
|
||||||
@@ -384,13 +381,13 @@ export async function compress() {
|
|||||||
showAlert(
|
showAlert(
|
||||||
'Compression Complete',
|
'Compression Complete',
|
||||||
`Compressed ${state.files.length} PDF(s). ` +
|
`Compressed ${state.files.length} PDF(s). ` +
|
||||||
`Total size reduced from ${formatBytes(totalOriginalSize)} to ${formatBytes(totalCompressedSize)} (Saved ${totalSavingsPercent}%).`
|
`Total size reduced from ${formatBytes(totalOriginalSize)} to ${formatBytes(totalCompressedSize)} (Saved ${totalSavingsPercent}%).`
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
showAlert(
|
showAlert(
|
||||||
'Compression Finished',
|
'Compression Finished',
|
||||||
`Compressed ${state.files.length} PDF(s). ` +
|
`Compressed ${state.files.length} PDF(s). ` +
|
||||||
`Total size: ${formatBytes(totalCompressedSize)}.`
|
`Total size: ${formatBytes(totalCompressedSize)}.`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+128
-130
@@ -1,10 +1,12 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import Cropper from 'cropperjs';
|
import Cropper from 'cropperjs';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
// --- Global State for the Cropper Tool ---
|
// --- Global State for the Cropper Tool ---
|
||||||
const cropperState = {
|
const cropperState = {
|
||||||
pdfDoc: null,
|
pdfDoc: null,
|
||||||
@@ -129,45 +131,44 @@ function enableControls() {
|
|||||||
*/
|
*/
|
||||||
async function performMetadataCrop(pdfToModify: any, cropData: any) {
|
async function performMetadataCrop(pdfToModify: any, cropData: any) {
|
||||||
for (const pageNum in cropData) {
|
for (const pageNum in cropData) {
|
||||||
// @ts-expect-error TS(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
|
const pdfJsPage = await cropperState.pdfDoc.getPage(Number(pageNum));
|
||||||
const page = pdfToModify.getPages()[pageNum - 1];
|
const viewport = pdfJsPage.getViewport({ scale: 1 });
|
||||||
const { width: pageWidth, height: pageHeight } = page.getSize();
|
|
||||||
const rotation = page.getRotation().angle;
|
|
||||||
const crop = cropData[pageNum];
|
const crop = cropData[pageNum];
|
||||||
|
|
||||||
const visualPdfWidth = pageWidth * crop.width;
|
// Man I hate doing math
|
||||||
const visualPdfHeight = pageHeight * crop.height;
|
// Calculate visual crop rectangle in viewport pixels
|
||||||
const visualPdfX = pageWidth * crop.x;
|
const cropX = viewport.width * crop.x;
|
||||||
const visualPdfY = pageHeight * crop.y;
|
const cropY = viewport.height * crop.y;
|
||||||
|
const cropW = viewport.width * crop.width;
|
||||||
|
const cropH = viewport.height * crop.height;
|
||||||
|
|
||||||
let finalX, finalY, finalWidth, finalHeight;
|
// Define the 4 corners of the crop rectangle in visual coordinates (Top-Left origin)
|
||||||
switch (rotation) {
|
const visualCorners = [
|
||||||
case 90:
|
{ x: cropX, y: cropY }, // TL
|
||||||
finalX = visualPdfY;
|
{ x: cropX + cropW, y: cropY }, // TR
|
||||||
finalY = pageWidth - visualPdfX - visualPdfWidth;
|
{ x: cropX + cropW, y: cropY + cropH }, // BR
|
||||||
finalWidth = visualPdfHeight;
|
{ x: cropX, y: cropY + cropH }, // BL
|
||||||
finalHeight = visualPdfWidth;
|
];
|
||||||
break;
|
|
||||||
case 180:
|
// This handles rotation, media box offsets, and coordinate system flips automatically
|
||||||
finalX = pageWidth - visualPdfX - visualPdfWidth;
|
const pdfCorners = visualCorners.map(p => {
|
||||||
finalY = pageHeight - visualPdfY - visualPdfHeight;
|
return viewport.convertToPdfPoint(p.x, p.y);
|
||||||
finalWidth = visualPdfWidth;
|
});
|
||||||
finalHeight = visualPdfHeight;
|
|
||||||
break;
|
// Find the bounding box of the converted points in PDF coordinates
|
||||||
case 270:
|
// convertToPdfPoint returns [x, y] arrays
|
||||||
finalX = pageHeight - visualPdfY - visualPdfHeight;
|
const pdfXs = pdfCorners.map(p => p[0]);
|
||||||
finalY = visualPdfX;
|
const pdfYs = pdfCorners.map(p => p[1]);
|
||||||
finalWidth = visualPdfHeight;
|
|
||||||
finalHeight = visualPdfWidth;
|
const minX = Math.min(...pdfXs);
|
||||||
break;
|
const maxX = Math.max(...pdfXs);
|
||||||
default:
|
const minY = Math.min(...pdfYs);
|
||||||
finalX = visualPdfX;
|
const maxY = Math.max(...pdfYs);
|
||||||
finalY = pageHeight - visualPdfY - visualPdfHeight;
|
|
||||||
finalWidth = visualPdfWidth;
|
// @ts-expect-error TS(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
|
||||||
finalHeight = visualPdfHeight;
|
const page = pdfToModify.getPages()[pageNum - 1];
|
||||||
break;
|
page.setCropBox(minX, minY, maxX - minX, maxY - minY);
|
||||||
}
|
|
||||||
page.setCropBox(finalX, finalY, finalWidth, finalHeight);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -242,107 +243,104 @@ export async function setupCropperTool() {
|
|||||||
if (state.files.length === 0) return;
|
if (state.files.length === 0) return;
|
||||||
|
|
||||||
// Clear pageCrops on new file upload
|
// Clear pageCrops on new file upload
|
||||||
cropperState.pageCrops = {};
|
|
||||||
|
|
||||||
const arrayBuffer = await readFileAsArrayBuffer(state.files[0]);
|
|
||||||
cropperState.originalPdfBytes = arrayBuffer;
|
|
||||||
const arrayBufferForPdfJs = (arrayBuffer as ArrayBuffer).slice(0);
|
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
||||||
import.meta.url
|
|
||||||
).toString();
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const loadingTask = pdfjsLib.getDocument({ data: arrayBufferForPdfJs });
|
// Clear pageCrops on new file upload
|
||||||
|
cropperState.pageCrops = {};
|
||||||
|
|
||||||
|
const arrayBuffer = await readFileAsArrayBuffer(state.files[0]);
|
||||||
|
cropperState.originalPdfBytes = arrayBuffer;
|
||||||
|
const arrayBufferForPdfJs = (arrayBuffer as ArrayBuffer).slice(0);
|
||||||
|
const loadingTask = getPDFDocument({ data: arrayBufferForPdfJs });
|
||||||
|
|
||||||
cropperState.pdfDoc = await loadingTask.promise;
|
cropperState.pdfDoc = await loadingTask.promise;
|
||||||
cropperState.currentPageNum = 1;
|
cropperState.currentPageNum = 1;
|
||||||
|
|
||||||
await displayPageAsImage(cropperState.currentPageNum);
|
await displayPageAsImage(cropperState.currentPageNum);
|
||||||
|
|
||||||
document
|
|
||||||
.getElementById('prev-page')
|
|
||||||
.addEventListener('click', () => changePage(-1));
|
|
||||||
document
|
|
||||||
.getElementById('next-page')
|
|
||||||
.addEventListener('click', () => changePage(1));
|
|
||||||
|
|
||||||
document
|
|
||||||
.getElementById('crop-button')
|
|
||||||
.addEventListener('click', async () => {
|
|
||||||
// Get the last known crop from the active page before processing
|
|
||||||
saveCurrentCrop();
|
|
||||||
|
|
||||||
const isDestructive = (
|
|
||||||
document.getElementById('destructive-crop-toggle') as HTMLInputElement
|
|
||||||
).checked;
|
|
||||||
const isApplyToAll = (
|
|
||||||
document.getElementById('apply-to-all-toggle') as HTMLInputElement
|
|
||||||
).checked;
|
|
||||||
|
|
||||||
let finalCropData = {};
|
|
||||||
if (isApplyToAll) {
|
|
||||||
const currentCrop =
|
|
||||||
cropperState.pageCrops[cropperState.currentPageNum];
|
|
||||||
if (!currentCrop) {
|
|
||||||
showAlert('No Crop Area', 'Please select an area to crop first.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Apply the active page's crop to all pages
|
|
||||||
for (let i = 1; i <= cropperState.pdfDoc.numPages; i++) {
|
|
||||||
finalCropData[i] = currentCrop;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// If not applying to all, only process pages with saved crops
|
|
||||||
finalCropData = Object.keys(cropperState.pageCrops).reduce(
|
|
||||||
(obj, key) => {
|
|
||||||
obj[key] = cropperState.pageCrops[key];
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Object.keys(finalCropData).length === 0) {
|
|
||||||
showAlert(
|
|
||||||
'No Crop Area',
|
|
||||||
'Please select an area on at least one page to crop.'
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
showLoader('Applying crop...');
|
|
||||||
|
|
||||||
try {
|
|
||||||
let finalPdfBytes;
|
|
||||||
if (isDestructive) {
|
|
||||||
const newPdfDoc = await performFlatteningCrop(finalCropData);
|
|
||||||
finalPdfBytes = await newPdfDoc.save();
|
|
||||||
} else {
|
|
||||||
const pdfToModify = await PDFLibDocument.load(
|
|
||||||
cropperState.originalPdfBytes
|
|
||||||
);
|
|
||||||
await performMetadataCrop(pdfToModify, finalCropData);
|
|
||||||
finalPdfBytes = await pdfToModify.save();
|
|
||||||
}
|
|
||||||
|
|
||||||
const fileName = isDestructive
|
|
||||||
? 'flattened_crop.pdf'
|
|
||||||
: 'standard_crop.pdf';
|
|
||||||
downloadFile(
|
|
||||||
new Blob([finalPdfBytes], { type: 'application/pdf' }),
|
|
||||||
fileName
|
|
||||||
);
|
|
||||||
showAlert('Success', 'Crop complete! Your download has started.');
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
showAlert('Error', 'An error occurred during cropping.');
|
|
||||||
} finally {
|
|
||||||
hideLoader();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error setting up cropper tool:', error);
|
console.error('Error setting up cropper tool:', error);
|
||||||
showAlert('Error', 'Failed to load PDF for cropping.');
|
showAlert('Error', 'Failed to load PDF for cropping.');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById('prev-page')
|
||||||
|
.addEventListener('click', () => changePage(-1));
|
||||||
|
document
|
||||||
|
.getElementById('next-page')
|
||||||
|
.addEventListener('click', () => changePage(1));
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById('crop-button')
|
||||||
|
.addEventListener('click', async () => {
|
||||||
|
// Get the last known crop from the active page before processing
|
||||||
|
saveCurrentCrop();
|
||||||
|
|
||||||
|
const isDestructive = (
|
||||||
|
document.getElementById('destructive-crop-toggle') as HTMLInputElement
|
||||||
|
).checked;
|
||||||
|
const isApplyToAll = (
|
||||||
|
document.getElementById('apply-to-all-toggle') as HTMLInputElement
|
||||||
|
).checked;
|
||||||
|
|
||||||
|
let finalCropData = {};
|
||||||
|
if (isApplyToAll) {
|
||||||
|
const currentCrop =
|
||||||
|
cropperState.pageCrops[cropperState.currentPageNum];
|
||||||
|
if (!currentCrop) {
|
||||||
|
showAlert('No Crop Area', 'Please select an area to crop first.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Apply the active page's crop to all pages
|
||||||
|
for (let i = 1; i <= cropperState.pdfDoc.numPages; i++) {
|
||||||
|
finalCropData[i] = currentCrop;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// If not applying to all, only process pages with saved crops
|
||||||
|
finalCropData = Object.keys(cropperState.pageCrops).reduce(
|
||||||
|
(obj, key) => {
|
||||||
|
obj[key] = cropperState.pageCrops[key];
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.keys(finalCropData).length === 0) {
|
||||||
|
showAlert(
|
||||||
|
'No Crop Area',
|
||||||
|
'Please select an area on at least one page to crop.'
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
showLoader('Applying crop...');
|
||||||
|
|
||||||
|
try {
|
||||||
|
let finalPdfBytes;
|
||||||
|
if (isDestructive) {
|
||||||
|
const newPdfDoc = await performFlatteningCrop(finalCropData);
|
||||||
|
finalPdfBytes = await newPdfDoc.save();
|
||||||
|
} else {
|
||||||
|
const pdfToModify = await PDFLibDocument.load(
|
||||||
|
cropperState.originalPdfBytes
|
||||||
|
);
|
||||||
|
await performMetadataCrop(pdfToModify, finalCropData);
|
||||||
|
finalPdfBytes = await pdfToModify.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileName = isDestructive
|
||||||
|
? 'flattened_crop.pdf'
|
||||||
|
: 'standard_crop.pdf';
|
||||||
|
downloadFile(
|
||||||
|
new Blob([finalPdfBytes], { type: 'application/pdf' }),
|
||||||
|
fileName
|
||||||
|
);
|
||||||
|
showAlert('Success', 'Crop complete! Your download has started.');
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
showAlert('Error', 'An error occurred during cropping.');
|
||||||
|
} finally {
|
||||||
|
hideLoader();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,10 +1,13 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile } from '../utils/helpers.js';
|
import { downloadFile, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import { renderPagesProgressively, cleanupLazyRendering } from '../utils/render-utils.js';
|
import { renderPagesProgressively, cleanupLazyRendering } from '../utils/render-utils.js';
|
||||||
import Sortable from 'sortablejs';
|
import Sortable from 'sortablejs';
|
||||||
import { icons, createIcons } from 'lucide';
|
import { icons, createIcons } from 'lucide';
|
||||||
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
const duplicateOrganizeState = {
|
const duplicateOrganizeState = {
|
||||||
sortableInstances: {},
|
sortableInstances: {},
|
||||||
@@ -88,8 +91,7 @@ export async function renderDuplicateOrganizeThumbnails() {
|
|||||||
|
|
||||||
showLoader('Rendering page previews...');
|
showLoader('Rendering page previews...');
|
||||||
const pdfData = await state.pdfDoc.save();
|
const pdfData = await state.pdfDoc.save();
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdfjsDoc = await getPDFDocument({ data: pdfData }).promise;
|
||||||
const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
|
|
||||||
|
|
||||||
grid.textContent = '';
|
grid.textContent = '';
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large.
Load diff
@@ -1,7 +1,11 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile } from '../utils/helpers.js';
|
import { downloadFile, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
export async function invertColors() {
|
export async function invertColors() {
|
||||||
if (!state.pdfDoc) {
|
if (!state.pdfDoc) {
|
||||||
@@ -12,8 +16,7 @@ export async function invertColors() {
|
|||||||
try {
|
try {
|
||||||
const newPdfDoc = await PDFLibDocument.create();
|
const newPdfDoc = await PDFLibDocument.create();
|
||||||
const pdfBytes = await state.pdfDoc.save();
|
const pdfBytes = await state.pdfDoc.save();
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdfjsDoc = await getPDFDocument({ data: pdfBytes }).promise;
|
||||||
const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfBytes }).promise;
|
|
||||||
|
|
||||||
for (let i = 1; i <= pdfjsDoc.numPages; i++) {
|
for (let i = 1; i <= pdfjsDoc.numPages; i++) {
|
||||||
const page = await pdfjsDoc.getPage(i);
|
const page = await pdfjsDoc.getPage(i);
|
||||||
@@ -22,7 +25,7 @@ export async function invertColors() {
|
|||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
await page.render({ canvasContext: ctx, viewport }).promise;
|
await page.render({ canvasContext: ctx, viewport, canvas }).promise;
|
||||||
|
|
||||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
const data = imageData.data;
|
const data = imageData.data;
|
||||||
|
|||||||
@@ -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()
|
||||||
@@ -1,17 +1,14 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.ts';
|
import { showLoader, hideLoader, showAlert } from '../ui.ts';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.ts';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } 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';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
import Sortable from 'sortablejs';
|
import Sortable from 'sortablejs';
|
||||||
|
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
||||||
import.meta.url
|
|
||||||
).toString();
|
|
||||||
|
|
||||||
const mergeState = {
|
const mergeState = {
|
||||||
pdfDocs: {},
|
pdfDocs: {},
|
||||||
@@ -183,7 +180,7 @@ async function renderPageMergeThumbnails() {
|
|||||||
if (!pdfDoc) continue;
|
if (!pdfDoc) continue;
|
||||||
|
|
||||||
const pdfData = await pdfDoc.save();
|
const pdfData = await pdfDoc.save();
|
||||||
const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
|
const pdfjsDoc = await getPDFDocument({ data: pdfData }).promise;
|
||||||
|
|
||||||
// Create a wrapper function that includes the file name
|
// Create a wrapper function that includes the file name
|
||||||
const createWrapperWithFileName = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
const createWrapperWithFileName = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
||||||
@@ -202,7 +199,7 @@ async function renderPageMergeThumbnails() {
|
|||||||
onProgress: (current, total) => {
|
onProgress: (current, total) => {
|
||||||
currentPageNumber++;
|
currentPageNumber++;
|
||||||
showLoader(
|
showLoader(
|
||||||
`Rendering page previews: ${currentPageNumber}/${totalPages}`
|
`Rendering page previews...`
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
onBatchComplete: () => {
|
onBatchComplete: () => {
|
||||||
|
|||||||
@@ -1,10 +1,14 @@
|
|||||||
import { tesseractLanguages } from '../config/tesseract-languages.js';
|
import { tesseractLanguages } from '../config/tesseract-languages.js';
|
||||||
import { showAlert } from '../ui.js';
|
import { showAlert } from '../ui.js';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import Tesseract from 'tesseract.js';
|
import Tesseract from 'tesseract.js';
|
||||||
import { PDFDocument as PDFLibDocument, StandardFonts, rgb } from 'pdf-lib';
|
import { PDFDocument as PDFLibDocument, StandardFonts, rgb } from 'pdf-lib';
|
||||||
import { icons, createIcons } from 'lucide';
|
import { icons, createIcons } from 'lucide';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
let searchablePdfBytes: any = null;
|
let searchablePdfBytes: any = null;
|
||||||
|
|
||||||
@@ -117,8 +121,7 @@ async function runOCR() {
|
|||||||
tessedit_char_whitelist: whitelist,
|
tessedit_char_whitelist: whitelist,
|
||||||
});
|
});
|
||||||
|
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument(
|
||||||
const pdf = await pdfjsLib.getDocument(
|
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
const newPdfDoc = await PDFLibDocument.create();
|
const newPdfDoc = await PDFLibDocument.create();
|
||||||
@@ -136,7 +139,7 @@ async function runOCR() {
|
|||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
const context = canvas.getContext('2d');
|
const context = canvas.getContext('2d');
|
||||||
await page.render({ canvasContext: context, viewport }).promise;
|
await page.render({ canvasContext: context, viewport, canvas }).promise;
|
||||||
|
|
||||||
if (binarize) {
|
if (binarize) {
|
||||||
binarizeCanvas(context);
|
binarizeCanvas(context);
|
||||||
|
|||||||
@@ -1,8 +1,120 @@
|
|||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import { getStandardPageName, convertPoints } from '../utils/helpers.js';
|
import { getStandardPageName, convertPoints } from '../utils/helpers.js';
|
||||||
|
import { icons, createIcons } from 'lucide';
|
||||||
|
|
||||||
let analyzedPagesData: any = []; // Store raw data to avoid re-analyzing
|
let analyzedPagesData: any = []; // Store raw data to avoid re-analyzing
|
||||||
|
|
||||||
|
function calculateAspectRatio(width: number, height: number): string {
|
||||||
|
const ratio = width / height;
|
||||||
|
return ratio.toFixed(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateArea(width: number, height: number, unit: string): string {
|
||||||
|
const areaInPoints = width * height;
|
||||||
|
let convertedArea = 0;
|
||||||
|
let unitSuffix = '';
|
||||||
|
|
||||||
|
switch (unit) {
|
||||||
|
case 'in':
|
||||||
|
convertedArea = areaInPoints / (72 * 72); // 72 points per inch
|
||||||
|
unitSuffix = 'in²';
|
||||||
|
break;
|
||||||
|
case 'mm':
|
||||||
|
convertedArea = areaInPoints / (72 * 72) * (25.4 * 25.4); // Convert to mm²
|
||||||
|
unitSuffix = 'mm²';
|
||||||
|
break;
|
||||||
|
case 'px':
|
||||||
|
const pxPerPoint = 96 / 72;
|
||||||
|
convertedArea = areaInPoints * (pxPerPoint * pxPerPoint);
|
||||||
|
unitSuffix = 'px²';
|
||||||
|
break;
|
||||||
|
default: // 'pt'
|
||||||
|
convertedArea = areaInPoints;
|
||||||
|
unitSuffix = 'pt²';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${convertedArea.toFixed(2)} ${unitSuffix}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getSummaryStats() {
|
||||||
|
const totalPages = analyzedPagesData.length;
|
||||||
|
|
||||||
|
// Count unique page sizes
|
||||||
|
const uniqueSizes = new Map();
|
||||||
|
analyzedPagesData.forEach((pageData: any) => {
|
||||||
|
const key = `${pageData.width.toFixed(2)}x${pageData.height.toFixed(2)}`;
|
||||||
|
const label = `${pageData.standardSize} (${pageData.orientation})`;
|
||||||
|
uniqueSizes.set(key, {
|
||||||
|
count: (uniqueSizes.get(key)?.count || 0) + 1,
|
||||||
|
label: label,
|
||||||
|
width: pageData.width,
|
||||||
|
height: pageData.height
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const hasMixedSizes = uniqueSizes.size > 1;
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalPages,
|
||||||
|
uniqueSizesCount: uniqueSizes.size,
|
||||||
|
uniqueSizes: Array.from(uniqueSizes.values()),
|
||||||
|
hasMixedSizes
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSummary() {
|
||||||
|
const summaryContainer = document.getElementById('dimensions-summary');
|
||||||
|
if (!summaryContainer) return;
|
||||||
|
|
||||||
|
const stats = getSummaryStats();
|
||||||
|
|
||||||
|
let summaryHTML = `
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||||
|
<div class="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
||||||
|
<p class="text-sm text-gray-400 mb-1">Total Pages</p>
|
||||||
|
<p class="text-2xl font-bold text-white">${stats.totalPages}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
||||||
|
<p class="text-sm text-gray-400 mb-1">Unique Page Sizes</p>
|
||||||
|
<p class="text-2xl font-bold text-white">${stats.uniqueSizesCount}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
||||||
|
<p class="text-sm text-gray-400 mb-1">Document Type</p>
|
||||||
|
<p class="text-2xl font-bold ${stats.hasMixedSizes ? 'text-yellow-400' : 'text-green-400'}">
|
||||||
|
${stats.hasMixedSizes ? 'Mixed Sizes' : 'Uniform'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
if (stats.hasMixedSizes) {
|
||||||
|
summaryHTML += `
|
||||||
|
<div class="bg-yellow-900/20 border border-yellow-500/30 rounded-lg p-4 mb-4">
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0"></i>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-yellow-200 font-semibold mb-2">Mixed Page Sizes Detected</h4>
|
||||||
|
<p class="text-sm text-gray-300 mb-3">This document contains pages with different dimensions:</p>
|
||||||
|
<ul class="space-y-1 text-sm text-gray-300">
|
||||||
|
${stats.uniqueSizes.map((size: any) => `
|
||||||
|
<li>• ${size.label}: ${size.count} page${size.count > 1 ? 's' : ''}</li>
|
||||||
|
`).join('')}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
summaryContainer.innerHTML = summaryHTML;
|
||||||
|
|
||||||
|
if (stats.hasMixedSizes) {
|
||||||
|
createIcons({ icons });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders the dimensions table based on the stored data and selected unit.
|
* Renders the dimensions table based on the stored data and selected unit.
|
||||||
* @param {string} unit The unit to display dimensions in ('pt', 'in', 'mm', 'px').
|
* @param {string} unit The unit to display dimensions in ('pt', 'in', 'mm', 'px').
|
||||||
@@ -16,31 +128,89 @@ function renderTable(unit: any) {
|
|||||||
analyzedPagesData.forEach((pageData) => {
|
analyzedPagesData.forEach((pageData) => {
|
||||||
const width = convertPoints(pageData.width, unit);
|
const width = convertPoints(pageData.width, unit);
|
||||||
const height = convertPoints(pageData.height, unit);
|
const height = convertPoints(pageData.height, unit);
|
||||||
|
const aspectRatio = calculateAspectRatio(pageData.width, pageData.height);
|
||||||
|
const area = calculateArea(pageData.width, pageData.height, unit);
|
||||||
|
|
||||||
const row = document.createElement('tr');
|
const row = document.createElement('tr');
|
||||||
|
|
||||||
// Create and append each cell safely using textContent
|
// Page number
|
||||||
const pageNumCell = document.createElement('td');
|
const pageNumCell = document.createElement('td');
|
||||||
pageNumCell.className = 'px-4 py-3 text-white';
|
pageNumCell.className = 'px-4 py-3 text-white';
|
||||||
pageNumCell.textContent = pageData.pageNum;
|
pageNumCell.textContent = pageData.pageNum;
|
||||||
|
|
||||||
|
// Dimensions
|
||||||
const dimensionsCell = document.createElement('td');
|
const dimensionsCell = document.createElement('td');
|
||||||
dimensionsCell.className = 'px-4 py-3 text-gray-300';
|
dimensionsCell.className = 'px-4 py-3 text-gray-300';
|
||||||
dimensionsCell.textContent = `${width} x ${height} ${unit}`;
|
dimensionsCell.textContent = `${width} x ${height} ${unit}`;
|
||||||
|
|
||||||
|
// Standard size
|
||||||
const sizeCell = document.createElement('td');
|
const sizeCell = document.createElement('td');
|
||||||
sizeCell.className = 'px-4 py-3 text-gray-300';
|
sizeCell.className = 'px-4 py-3 text-gray-300';
|
||||||
sizeCell.textContent = pageData.standardSize;
|
sizeCell.textContent = pageData.standardSize;
|
||||||
|
|
||||||
|
// Orientation
|
||||||
const orientationCell = document.createElement('td');
|
const orientationCell = document.createElement('td');
|
||||||
orientationCell.className = 'px-4 py-3 text-gray-300';
|
orientationCell.className = 'px-4 py-3 text-gray-300';
|
||||||
orientationCell.textContent = pageData.orientation;
|
orientationCell.textContent = pageData.orientation;
|
||||||
|
|
||||||
row.append(pageNumCell, dimensionsCell, sizeCell, orientationCell);
|
// Aspect Ratio
|
||||||
|
const aspectRatioCell = document.createElement('td');
|
||||||
|
aspectRatioCell.className = 'px-4 py-3 text-gray-300';
|
||||||
|
aspectRatioCell.textContent = aspectRatio;
|
||||||
|
|
||||||
|
// Area
|
||||||
|
const areaCell = document.createElement('td');
|
||||||
|
areaCell.className = 'px-4 py-3 text-gray-300';
|
||||||
|
areaCell.textContent = area;
|
||||||
|
|
||||||
|
// Rotation
|
||||||
|
const rotationCell = document.createElement('td');
|
||||||
|
rotationCell.className = 'px-4 py-3 text-gray-300';
|
||||||
|
rotationCell.textContent = `${pageData.rotation}°`;
|
||||||
|
|
||||||
|
row.append(pageNumCell, dimensionsCell, sizeCell, orientationCell, aspectRatioCell, areaCell, rotationCell);
|
||||||
tableBody.appendChild(row);
|
tableBody.appendChild(row);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function exportToCSV() {
|
||||||
|
const unitsSelect = document.getElementById('units-select') as HTMLSelectElement;
|
||||||
|
const unit = unitsSelect?.value || 'pt';
|
||||||
|
|
||||||
|
const headers = ['Page #', `Width (${unit})`, `Height (${unit})`, 'Standard Size', 'Orientation', 'Aspect Ratio', `Area (${unit}²)`, 'Rotation'];
|
||||||
|
const csvRows = [headers.join(',')];
|
||||||
|
|
||||||
|
analyzedPagesData.forEach((pageData: any) => {
|
||||||
|
const width = convertPoints(pageData.width, unit);
|
||||||
|
const height = convertPoints(pageData.height, unit);
|
||||||
|
const aspectRatio = calculateAspectRatio(pageData.width, pageData.height);
|
||||||
|
const area = calculateArea(pageData.width, pageData.height, unit);
|
||||||
|
|
||||||
|
const row = [
|
||||||
|
pageData.pageNum,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
pageData.standardSize,
|
||||||
|
pageData.orientation,
|
||||||
|
aspectRatio,
|
||||||
|
area,
|
||||||
|
`${pageData.rotation}°`
|
||||||
|
];
|
||||||
|
csvRows.push(row.join(','));
|
||||||
|
});
|
||||||
|
|
||||||
|
const csvContent = csvRows.join('\n');
|
||||||
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = 'page-dimensions.csv';
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Main function to analyze the PDF and display dimensions.
|
* Main function to analyze the PDF and display dimensions.
|
||||||
* This is called once after the file is loaded.
|
* This is called once after the file is loaded.
|
||||||
@@ -53,28 +223,36 @@ export function analyzeAndDisplayDimensions() {
|
|||||||
|
|
||||||
pages.forEach((page: any, index: any) => {
|
pages.forEach((page: any, index: any) => {
|
||||||
const { width, height } = page.getSize();
|
const { width, height } = page.getSize();
|
||||||
|
const rotation = page.getRotation().angle || 0;
|
||||||
|
|
||||||
analyzedPagesData.push({
|
analyzedPagesData.push({
|
||||||
pageNum: index + 1,
|
pageNum: index + 1,
|
||||||
width, // Store raw width in points
|
width, // Store raw width in points
|
||||||
height, // Store raw height in points
|
height, // Store raw height in points
|
||||||
orientation: width > height ? 'Landscape' : 'Portrait',
|
orientation: width > height ? 'Landscape' : 'Portrait',
|
||||||
standardSize: getStandardPageName(width, height),
|
standardSize: getStandardPageName(width, height),
|
||||||
|
rotation: rotation
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const resultsContainer = document.getElementById('dimensions-results');
|
const resultsContainer = document.getElementById('dimensions-results');
|
||||||
const unitsSelect = document.getElementById('units-select');
|
const unitsSelect = document.getElementById('units-select');
|
||||||
|
|
||||||
|
renderSummary();
|
||||||
|
|
||||||
// Initial render with default unit (points)
|
// Initial render with default unit (points)
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
|
||||||
renderTable(unitsSelect.value);
|
renderTable(unitsSelect.value);
|
||||||
|
|
||||||
// Show the results table
|
|
||||||
resultsContainer.classList.remove('hidden');
|
resultsContainer.classList.remove('hidden');
|
||||||
|
|
||||||
// Add event listener to handle unit changes
|
|
||||||
unitsSelect.addEventListener('change', (e) => {
|
unitsSelect.addEventListener('change', (e) => {
|
||||||
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'EventTarg... Remove this comment to see the full error message
|
// @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'EventTarg... Remove this comment to see the full error message
|
||||||
renderTable(e.target.value);
|
renderTable(e.target.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const exportButton = document.getElementById('export-csv-btn');
|
||||||
|
if (exportButton) {
|
||||||
|
exportButton.addEventListener('click', exportToCSV);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -3,8 +3,9 @@ import { degrees, PDFDocument as PDFLibDocument } from 'pdf-lib';
|
|||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
import JSZip from 'jszip';
|
import JSZip from 'jszip';
|
||||||
import Sortable from 'sortablejs';
|
import Sortable from 'sortablejs';
|
||||||
import { downloadFile } from '../utils/helpers';
|
import { downloadFile, getPDFDocument } 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) {
|
||||||
@@ -341,7 +357,7 @@ async function loadPdfs(files: File[]) {
|
|||||||
const pdfIndex = currentPdfDocs.length - 1;
|
const pdfIndex = currentPdfDocs.length - 1;
|
||||||
|
|
||||||
const pdfBytes = await pdfDoc.save();
|
const pdfBytes = await pdfDoc.save();
|
||||||
const pdfjsDoc = await pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) }).promise;
|
const pdfjsDoc = await getPDFDocument({ data: new Uint8Array(pdfBytes) }).promise;
|
||||||
const numPages = pdfjsDoc.numPages;
|
const numPages = pdfjsDoc.numPages;
|
||||||
|
|
||||||
// Pre-fill allPages with placeholders to maintain order/state
|
// Pre-fill allPages with placeholders to maintain order/state
|
||||||
@@ -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!;
|
||||||
@@ -710,7 +741,7 @@ async function handleInsertPdf(e: Event) {
|
|||||||
|
|
||||||
// Load PDF.js document for rendering
|
// Load PDF.js document for rendering
|
||||||
const pdfBytes = await pdfDoc.save();
|
const pdfBytes = await pdfDoc.save();
|
||||||
const pdfjsDoc = await pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) }).promise;
|
const pdfjsDoc = await getPDFDocument({ data: new Uint8Array(pdfBytes) }).promise;
|
||||||
const numPages = pdfjsDoc.numPages;
|
const numPages = pdfjsDoc.numPages;
|
||||||
|
|
||||||
const newPages: PageData[] = [];
|
const newPages: PageData[] = [];
|
||||||
@@ -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) {
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import JSZip from 'jszip';
|
import JSZip from 'jszip';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a BMP file buffer from raw pixel data (ImageData).
|
* Creates a BMP file buffer from raw pixel data (ImageData).
|
||||||
@@ -53,8 +56,7 @@ function encodeBMP(imageData: any) {
|
|||||||
export async function pdfToBmp() {
|
export async function pdfToBmp() {
|
||||||
showLoader('Converting PDF to BMP images...');
|
showLoader('Converting PDF to BMP images...');
|
||||||
try {
|
try {
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument(
|
||||||
const pdf = await pdfjsLib.getDocument(
|
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
const zip = new JSZip();
|
const zip = new JSZip();
|
||||||
@@ -69,7 +71,7 @@ export async function pdfToBmp() {
|
|||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
|
|
||||||
// Render the PDF page directly to the canvas
|
// Render the PDF page directly to the canvas
|
||||||
await page.render({ canvasContext: context, viewport: viewport }).promise;
|
await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
|
||||||
|
|
||||||
// Get the raw pixel data from this canvas
|
// Get the raw pixel data from this canvas
|
||||||
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile } from '../utils/helpers.js';
|
import { downloadFile, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
import { PDFDocument as PDFLibDocument } from 'pdf-lib';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
export async function pdfToGreyscale() {
|
export async function pdfToGreyscale() {
|
||||||
if (!state.pdfDoc) {
|
if (!state.pdfDoc) {
|
||||||
showAlert('Error', 'PDF not loaded.');
|
showAlert('Error', 'PDF not loaded.');
|
||||||
@@ -13,8 +15,7 @@ export async function pdfToGreyscale() {
|
|||||||
try {
|
try {
|
||||||
const newPdfDoc = await PDFLibDocument.create();
|
const newPdfDoc = await PDFLibDocument.create();
|
||||||
const pdfBytes = await state.pdfDoc.save();
|
const pdfBytes = await state.pdfDoc.save();
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdfjsDoc = await getPDFDocument({ data: pdfBytes }).promise;
|
||||||
const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfBytes }).promise;
|
|
||||||
|
|
||||||
for (let i = 1; i <= pdfjsDoc.numPages; i++) {
|
for (let i = 1; i <= pdfjsDoc.numPages; i++) {
|
||||||
const page = await pdfjsDoc.getPage(i);
|
const page = await pdfjsDoc.getPage(i);
|
||||||
@@ -24,7 +25,7 @@ export async function pdfToGreyscale() {
|
|||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
await page.render({ canvasContext: ctx, viewport }).promise;
|
await page.render({ canvasContext: ctx, viewport, canvas }).promise;
|
||||||
|
|
||||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
const data = imageData.data;
|
const data = imageData.data;
|
||||||
|
|||||||
@@ -1,13 +1,16 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import JSZip from 'jszip';
|
import JSZip from 'jszip';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
export async function pdfToJpg() {
|
export async function pdfToJpg() {
|
||||||
showLoader('Converting to JPG...');
|
showLoader('Converting to JPG...');
|
||||||
try {
|
try {
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument(
|
||||||
const pdf = await pdfjsLib.getDocument(
|
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
const zip = new JSZip();
|
const zip = new JSZip();
|
||||||
@@ -23,7 +26,7 @@ export async function pdfToJpg() {
|
|||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
|
|
||||||
await page.render({ canvasContext: context, viewport: viewport }).promise;
|
await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
|
||||||
|
|
||||||
const blob = await new Promise((resolve) =>
|
const blob = await new Promise((resolve) =>
|
||||||
canvas.toBlob(resolve, 'image/jpeg', quality)
|
canvas.toBlob(resolve, 'image/jpeg', quality)
|
||||||
|
|||||||
@@ -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()
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
|
|
||||||
export async function pdfToMarkdown() {
|
export async function pdfToMarkdown() {
|
||||||
@@ -7,8 +7,7 @@ export async function pdfToMarkdown() {
|
|||||||
try {
|
try {
|
||||||
const file = state.files[0];
|
const file = state.files[0];
|
||||||
const arrayBuffer = await readFileAsArrayBuffer(file);
|
const arrayBuffer = await readFileAsArrayBuffer(file);
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument({ data: arrayBuffer }).promise;
|
||||||
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
|
||||||
let markdown = '';
|
let markdown = '';
|
||||||
|
|
||||||
for (let i = 1; i <= pdf.numPages; i++) {
|
for (let i = 1; i <= pdf.numPages; i++) {
|
||||||
|
|||||||
@@ -1,13 +1,16 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import JSZip from 'jszip';
|
import JSZip from 'jszip';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
export async function pdfToPng() {
|
export async function pdfToPng() {
|
||||||
showLoader('Converting to PNG...');
|
showLoader('Converting to PNG...');
|
||||||
try {
|
try {
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument(
|
||||||
const pdf = await pdfjsLib.getDocument(
|
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
const zip = new JSZip();
|
const zip = new JSZip();
|
||||||
@@ -22,7 +25,7 @@ export async function pdfToPng() {
|
|||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
const context = canvas.getContext('2d');
|
const context = canvas.getContext('2d');
|
||||||
await page.render({ canvasContext: context, viewport: viewport }).promise;
|
await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
|
||||||
const blob = await new Promise((resolve) =>
|
const blob = await new Promise((resolve) =>
|
||||||
canvas.toBlob(resolve, 'image/png')
|
canvas.toBlob(resolve, 'image/png')
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import JSZip from 'jszip';
|
import JSZip from 'jszip';
|
||||||
import UTIF from 'utif';
|
import UTIF from 'utif';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
export async function pdfToTiff() {
|
export async function pdfToTiff() {
|
||||||
showLoader('Converting PDF to TIFF...');
|
showLoader('Converting PDF to TIFF...');
|
||||||
try {
|
try {
|
||||||
const pdf = await pdfjsLib.getDocument(
|
const pdf = await getPDFDocument(
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
const zip = new JSZip();
|
const zip = new JSZip();
|
||||||
|
|||||||
@@ -1,13 +1,16 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import JSZip from 'jszip';
|
import JSZip from 'jszip';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
export async function pdfToWebp() {
|
export async function pdfToWebp() {
|
||||||
showLoader('Converting to WebP...');
|
showLoader('Converting to WebP...');
|
||||||
try {
|
try {
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument(
|
||||||
const pdf = await pdfjsLib.getDocument(
|
|
||||||
await readFileAsArrayBuffer(state.files[0])
|
await readFileAsArrayBuffer(state.files[0])
|
||||||
).promise;
|
).promise;
|
||||||
const zip = new JSZip();
|
const zip = new JSZip();
|
||||||
@@ -18,7 +21,7 @@ export async function pdfToWebp() {
|
|||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
const context = canvas.getContext('2d');
|
const context = canvas.getContext('2d');
|
||||||
await page.render({ canvasContext: context, viewport: viewport }).promise;
|
await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
|
||||||
const qualityInput = document.getElementById('webp-quality') as HTMLInputElement;
|
const qualityInput = document.getElementById('webp-quality') as HTMLInputElement;
|
||||||
const quality = qualityInput ? parseFloat(qualityInput.value) : 0.9;
|
const quality = qualityInput ? parseFloat(qualityInput.value) : 0.9;
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile, parsePageRanges } from '../utils/helpers.js';
|
import { downloadFile, parsePageRanges, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import { PDFDocument, PageSizes } from 'pdf-lib';
|
import { PDFDocument, PageSizes } from 'pdf-lib';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
import { createIcons, icons } from 'lucide';
|
import { createIcons, icons } from 'lucide';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
const posterizeState = {
|
const posterizeState = {
|
||||||
pdfJsDoc: null,
|
pdfJsDoc: null,
|
||||||
pageSnapshots: {},
|
pageSnapshots: {},
|
||||||
@@ -121,7 +123,7 @@ export async function setupPosterizeTool() {
|
|||||||
.getPageCount()
|
.getPageCount()
|
||||||
.toString();
|
.toString();
|
||||||
const pdfBytes = await state.pdfDoc.save();
|
const pdfBytes = await state.pdfDoc.save();
|
||||||
posterizeState.pdfJsDoc = await pdfjsLib.getDocument({ data: pdfBytes })
|
posterizeState.pdfJsDoc = await getPDFDocument({ data: pdfBytes })
|
||||||
.promise;
|
.promise;
|
||||||
posterizeState.pageSnapshots = {};
|
posterizeState.pageSnapshots = {};
|
||||||
posterizeState.currentPage = 1;
|
posterizeState.currentPage = 1;
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile } from '../utils/helpers.js';
|
import { downloadFile, getPDFDocument } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import { PDFDocument } from 'pdf-lib';
|
import { PDFDocument } from 'pdf-lib';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
import { PDFPageProxy } from 'pdfjs-dist/types/src/display/api.js';
|
import { PDFPageProxy } from 'pdfjs-dist/types/src/display/api.js';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
let analysisCache = [];
|
let analysisCache = [];
|
||||||
|
|
||||||
async function isPageBlank(page: PDFPageProxy, threshold: number) {
|
async function isPageBlank(page: PDFPageProxy, threshold: number) {
|
||||||
@@ -38,7 +40,7 @@ async function analyzePages() {
|
|||||||
showLoader('Analyzing for blank pages...');
|
showLoader('Analyzing for blank pages...');
|
||||||
|
|
||||||
const pdfBytes = await state.pdfDoc.save();
|
const pdfBytes = await state.pdfDoc.save();
|
||||||
const pdf = await pdfjsLib.getDocument({ data: pdfBytes }).promise;
|
const pdf = await getPDFDocument({ data: pdfBytes }).promise;
|
||||||
|
|
||||||
analysisCache = [];
|
analysisCache = [];
|
||||||
const promises = [];
|
const promises = [];
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { downloadFile } from '../utils/helpers.js';
|
import { downloadFile, resetAndReloadTool } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import { getRotationState } from '../handlers/fileHandler.js';
|
import { getRotationState, resetRotationState } from '../handlers/fileHandler.js';
|
||||||
|
|
||||||
import { degrees } from 'pdf-lib';
|
import { degrees } from 'pdf-lib';
|
||||||
|
|
||||||
@@ -24,6 +24,10 @@ export async function rotate() {
|
|||||||
new Blob([rotatedPdfBytes], { type: 'application/pdf' }),
|
new Blob([rotatedPdfBytes], { type: 'application/pdf' }),
|
||||||
'rotated.pdf'
|
'rotated.pdf'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
resetAndReloadTool(() => {
|
||||||
|
resetRotationState();
|
||||||
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
showAlert('Error', 'Could not apply rotations.');
|
showAlert('Error', 'Could not apply rotations.');
|
||||||
|
|||||||
@@ -0,0 +1,198 @@
|
|||||||
|
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');
|
||||||
|
|
||||||
|
let key = e.key.toLowerCase();
|
||||||
|
|
||||||
|
if (e.altKey && e.code) {
|
||||||
|
if (e.code.startsWith('Key')) {
|
||||||
|
key = e.code.slice(3).toLowerCase();
|
||||||
|
} else if (e.code.startsWith('Digit')) {
|
||||||
|
key = e.code.slice(5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { PDFDocument } from 'pdf-lib';
|
||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { readFileAsArrayBuffer } from '../utils/helpers.js';
|
import { readFileAsArrayBuffer } from '../utils/helpers.js';
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
@@ -50,7 +51,7 @@ export async function setupSignTool() {
|
|||||||
enablePermissions: false,
|
enablePermissions: false,
|
||||||
};
|
};
|
||||||
localStorage.setItem('pdfjs.preferences', JSON.stringify(newPrefs));
|
localStorage.setItem('pdfjs.preferences', JSON.stringify(newPrefs));
|
||||||
} catch {}
|
} catch { }
|
||||||
|
|
||||||
const viewerUrl = new URL('/pdfjs-viewer/viewer.html', window.location.origin);
|
const viewerUrl = new URL('/pdfjs-viewer/viewer.html', window.location.origin);
|
||||||
const query = new URLSearchParams({ file: blobUrl });
|
const query = new URLSearchParams({ file: blobUrl });
|
||||||
@@ -83,7 +84,7 @@ export async function setupSignTool() {
|
|||||||
try {
|
try {
|
||||||
const highlightBtn = doc.getElementById('editorHighlightButton') as HTMLButtonElement | null;
|
const highlightBtn = doc.getElementById('editorHighlightButton') as HTMLButtonElement | null;
|
||||||
highlightBtn?.click();
|
highlightBtn?.click();
|
||||||
} catch {}
|
} catch { }
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -115,11 +116,41 @@ export async function applyAndSaveSignatures() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Delegate to the built-in download behavior of the base viewer.
|
|
||||||
const app = viewerWindow.PDFViewerApplication;
|
const app = viewerWindow.PDFViewerApplication;
|
||||||
app.eventBus?.dispatch('download', { source: app });
|
const flattenCheckbox = document.getElementById('flatten-signature-toggle') as HTMLInputElement | null;
|
||||||
|
const shouldFlatten = flattenCheckbox?.checked;
|
||||||
|
|
||||||
|
if (shouldFlatten) {
|
||||||
|
showLoader('Flattening and saving PDF...');
|
||||||
|
|
||||||
|
const rawPdfBytes = await app.pdfDocument.saveDocument(app.pdfDocument.annotationStorage);
|
||||||
|
|
||||||
|
const pdfBytes = new Uint8Array(rawPdfBytes);
|
||||||
|
|
||||||
|
const pdfDoc = await PDFDocument.load(pdfBytes);
|
||||||
|
|
||||||
|
pdfDoc.getForm().flatten();
|
||||||
|
|
||||||
|
const flattenedPdfBytes = await pdfDoc.save();
|
||||||
|
|
||||||
|
const blob = new Blob([flattenedPdfBytes as BlobPart], { type: 'application/pdf' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = `signed_flattened_${state.files[0].name}`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
|
||||||
|
hideLoader();
|
||||||
|
} else {
|
||||||
|
// Delegate to the built-in download behavior of the base viewer.
|
||||||
|
app.eventBus?.dispatch('download', { source: app });
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to trigger download in base PDF.js viewer:', error);
|
console.error('Failed to export the signed PDF:', error);
|
||||||
|
hideLoader();
|
||||||
showAlert('Export failed', 'Could not export the signed PDF. Please try again.');
|
showAlert('Export failed', 'Could not export the signed PDF. Please try again.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,9 @@
|
|||||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { createIcons, icons } from 'lucide';
|
import { createIcons, icons } from 'lucide';
|
||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
import { downloadFile } from '../utils/helpers.js';
|
import { downloadFile, getPDFDocument } from '../utils/helpers.js';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
import { state } from '../state.js';
|
import { state } from '../state.js';
|
||||||
import { renderPagesProgressively, cleanupLazyRendering } from '../utils/render-utils.js';
|
import { renderPagesProgressively, cleanupLazyRendering } from '../utils/render-utils.js';
|
||||||
import JSZip from 'jszip';
|
import JSZip from 'jszip';
|
||||||
@@ -27,7 +29,7 @@ async function renderVisualSelector() {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const pdfData = await state.pdfDoc.save();
|
const pdfData = await state.pdfDoc.save();
|
||||||
const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
|
const pdf = await getPDFDocument({ data: pdfData }).promise;
|
||||||
|
|
||||||
// Function to create wrapper element for each page
|
// Function to create wrapper element for each page
|
||||||
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
||||||
|
|||||||
@@ -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();
|
||||||
@@ -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() {
|
||||||
|
|||||||
+526
-6
@@ -1,18 +1,18 @@
|
|||||||
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 = () => {
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
||||||
import.meta.url
|
|
||||||
).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 +134,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 +279,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 +304,507 @@ const init = () => {
|
|||||||
githubStarsElement.textContent = '-';
|
githubStarsElement.textContent = '-';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Initialize Shortcuts System
|
||||||
|
ShortcutsManager.init();
|
||||||
|
|
||||||
|
// Tab switching for settings modal
|
||||||
|
const shortcutsTabBtn = document.getElementById('shortcuts-tab-btn');
|
||||||
|
const preferencesTabBtn = document.getElementById('preferences-tab-btn');
|
||||||
|
const shortcutsTabContent = document.getElementById('shortcuts-tab-content');
|
||||||
|
const preferencesTabContent = document.getElementById('preferences-tab-content');
|
||||||
|
const shortcutsTabFooter = document.getElementById('shortcuts-tab-footer');
|
||||||
|
const preferencesTabFooter = document.getElementById('preferences-tab-footer');
|
||||||
|
const resetShortcutsBtn = document.getElementById('reset-shortcuts-btn');
|
||||||
|
|
||||||
|
if (shortcutsTabBtn && preferencesTabBtn) {
|
||||||
|
shortcutsTabBtn.addEventListener('click', () => {
|
||||||
|
shortcutsTabBtn.classList.add('bg-indigo-600', 'text-white');
|
||||||
|
shortcutsTabBtn.classList.remove('text-gray-300');
|
||||||
|
preferencesTabBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||||
|
preferencesTabBtn.classList.add('text-gray-300');
|
||||||
|
shortcutsTabContent?.classList.remove('hidden');
|
||||||
|
preferencesTabContent?.classList.add('hidden');
|
||||||
|
shortcutsTabFooter?.classList.remove('hidden');
|
||||||
|
preferencesTabFooter?.classList.add('hidden');
|
||||||
|
resetShortcutsBtn?.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
preferencesTabBtn.addEventListener('click', () => {
|
||||||
|
preferencesTabBtn.classList.add('bg-indigo-600', 'text-white');
|
||||||
|
preferencesTabBtn.classList.remove('text-gray-300');
|
||||||
|
shortcutsTabBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||||
|
shortcutsTabBtn.classList.add('text-gray-300');
|
||||||
|
preferencesTabContent?.classList.remove('hidden');
|
||||||
|
shortcutsTabContent?.classList.add('hidden');
|
||||||
|
preferencesTabFooter?.classList.remove('hidden');
|
||||||
|
shortcutsTabFooter?.classList.add('hidden');
|
||||||
|
resetShortcutsBtn?.classList.add('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Full-width toggle functionality
|
||||||
|
const fullWidthToggle = document.getElementById('full-width-toggle') as HTMLInputElement;
|
||||||
|
const toolInterface = document.getElementById('tool-interface');
|
||||||
|
|
||||||
|
// Load saved preference
|
||||||
|
const savedFullWidth = localStorage.getItem('fullWidthMode') === 'true';
|
||||||
|
if (fullWidthToggle) {
|
||||||
|
fullWidthToggle.checked = savedFullWidth;
|
||||||
|
applyFullWidthMode(savedFullWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyFullWidthMode(enabled: boolean) {
|
||||||
|
if (toolInterface) {
|
||||||
|
if (enabled) {
|
||||||
|
toolInterface.classList.remove('max-w-4xl');
|
||||||
|
} else {
|
||||||
|
toolInterface.classList.add('max-w-4xl');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply to all page uploaders
|
||||||
|
const pageUploaders = document.querySelectorAll('#tool-uploader');
|
||||||
|
pageUploaders.forEach((uploader) => {
|
||||||
|
if (enabled) {
|
||||||
|
uploader.classList.remove('max-w-2xl', 'max-w-5xl');
|
||||||
|
} else {
|
||||||
|
// Restore original max-width (most are max-w-2xl, add-stamps is max-w-5xl)
|
||||||
|
if (!uploader.classList.contains('max-w-2xl') && !uploader.classList.contains('max-w-5xl')) {
|
||||||
|
uploader.classList.add('max-w-2xl');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fullWidthToggle) {
|
||||||
|
fullWidthToggle.addEventListener('change', (e) => {
|
||||||
|
const enabled = (e.target as HTMLInputElement).checked;
|
||||||
|
localStorage.setItem('fullWidthMode', enabled.toString());
|
||||||
|
applyFullWidthMode(enabled);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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');
|
||||||
|
|
||||||
|
let key = e.key.toLowerCase();
|
||||||
|
|
||||||
|
if (e.altKey && e.code) {
|
||||||
|
if (e.code.startsWith('Key')) {
|
||||||
|
key = e.code.slice(3).toLowerCase();
|
||||||
|
} else if (e.code.startsWith('Digit')) {
|
||||||
|
key = e.code.slice(5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollToTopBtn = document.getElementById('scroll-to-top-btn');
|
||||||
|
|
||||||
|
if (scrollToTopBtn) {
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const currentScrollY = window.scrollY;
|
||||||
|
|
||||||
|
if (currentScrollY < lastScrollY && currentScrollY > 300) {
|
||||||
|
scrollToTopBtn.classList.add('visible');
|
||||||
|
} else {
|
||||||
|
scrollToTopBtn.classList.remove('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScrollY = currentScrollY;
|
||||||
|
});
|
||||||
|
|
||||||
|
scrollToTopBtn.addEventListener('click', () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'instant'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', init);
|
document.addEventListener('DOMContentLoaded', init);
|
||||||
+79
-15
@@ -1,10 +1,14 @@
|
|||||||
import { resetState } from './state.js';
|
import { resetState } from './state.js';
|
||||||
import { formatBytes } from './utils/helpers.js';
|
import { formatBytes, getPDFDocument } from './utils/helpers.js';
|
||||||
import { tesseractLanguages } from './config/tesseract-languages.js';
|
import { tesseractLanguages } from './config/tesseract-languages.js';
|
||||||
import { renderPagesProgressively, cleanupLazyRendering } from './utils/render-utils.js';
|
import { renderPagesProgressively, cleanupLazyRendering } from './utils/render-utils.js';
|
||||||
import { icons, createIcons } from 'lucide';
|
import { icons, createIcons } from 'lucide';
|
||||||
import Sortable from 'sortablejs';
|
import Sortable from 'sortablejs';
|
||||||
import { getRotationState } from './handlers/fileHandler.js';
|
import { getRotationState, updateRotationState } from './handlers/fileHandler.js';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
|
|
||||||
// Centralizing DOM element selection
|
// Centralizing DOM element selection
|
||||||
export const dom = {
|
export const dom = {
|
||||||
@@ -24,6 +28,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...') => {
|
||||||
@@ -120,8 +137,7 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
|
|||||||
showLoader('Rendering page previews...');
|
showLoader('Rendering page previews...');
|
||||||
|
|
||||||
const pdfData = await pdfDoc.save();
|
const pdfData = await pdfDoc.save();
|
||||||
// @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
|
const pdf = await getPDFDocument({ data: pdfData }).promise;
|
||||||
const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
|
|
||||||
|
|
||||||
// Function to create wrapper element for each page
|
// Function to create wrapper element for each page
|
||||||
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
||||||
@@ -204,10 +220,13 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
|
|||||||
'.page-rotator-item'
|
'.page-rotator-item'
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
const imgEl = card.querySelector('img');
|
const imgEl = card.querySelector('img');
|
||||||
|
const pageIndex = pageNumber - 1;
|
||||||
let currentRotation = parseInt(card.dataset.rotation);
|
let currentRotation = parseInt(card.dataset.rotation);
|
||||||
currentRotation = (currentRotation + 90) % 360;
|
currentRotation = (currentRotation + 90) % 360;
|
||||||
card.dataset.rotation = currentRotation.toString();
|
card.dataset.rotation = currentRotation.toString();
|
||||||
imgEl.style.transform = `rotate(${currentRotation}deg)`;
|
imgEl.style.transform = `rotate(${currentRotation}deg)`;
|
||||||
|
|
||||||
|
updateRotationState(pageIndex, currentRotation);
|
||||||
});
|
});
|
||||||
|
|
||||||
controlsDiv.append(pageNumSpan, rotateBtn);
|
controlsDiv.append(pageNumSpan, rotateBtn);
|
||||||
@@ -617,8 +636,8 @@ export const toolTemplates = {
|
|||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<label for="jpg-quality" class="block mb-2 text-sm font-medium text-gray-300">Image Quality</label>
|
<label for="jpg-quality" class="block mb-2 text-sm font-medium text-gray-300">Image Quality</label>
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<input type="range" id="jpg-quality" min="0.1" max="1.0" step="0.1" value="0.9" class="flex-1">
|
<input type="range" id="jpg-quality" min="0.1" max="1.0" step="0.01" value="1.0" class="flex-1">
|
||||||
<span id="jpg-quality-value" class="text-white font-medium w-16 text-right">90%</span>
|
<span id="jpg-quality-value" class="text-white font-medium w-16 text-right">100%</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-1 text-xs text-gray-400">Higher quality = larger file size</p>
|
<p class="mt-1 text-xs text-gray-400">Higher quality = larger file size</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1301,15 +1320,27 @@ export const toolTemplates = {
|
|||||||
<div id="file-display-area" class="mt-4 space-y-2"></div>
|
<div id="file-display-area" class="mt-4 space-y-2"></div>
|
||||||
|
|
||||||
<div id="dimensions-results" class="hidden mt-6">
|
<div id="dimensions-results" class="hidden mt-6">
|
||||||
<div class="flex justify-end mb-4">
|
<!-- Summary Statistics Panel -->
|
||||||
<label for="units-select" class="text-sm font-medium text-gray-300 self-center mr-3">Display Units:</label>
|
<div id="dimensions-summary" class="mb-6"></div>
|
||||||
<select id="units-select" class="bg-gray-700 border border-gray-600 text-white rounded-lg p-2">
|
|
||||||
<option value="pt" selected>Points (pt)</option>
|
<!-- Controls Row -->
|
||||||
<option value="in">Inches (in)</option>
|
<div class="flex flex-wrap justify-between items-center gap-4 mb-4">
|
||||||
<option value="mm">Millimeters (mm)</option>
|
<div class="flex items-center gap-3">
|
||||||
<option value="px">Pixels (at 96 DPI)</option>
|
<label for="units-select" class="text-sm font-medium text-gray-300">Display Units:</label>
|
||||||
</select>
|
<select id="units-select" class="bg-gray-700 border border-gray-600 text-white rounded-lg p-2">
|
||||||
|
<option value="pt" selected>Points (pt)</option>
|
||||||
|
<option value="in">Inches (in)</option>
|
||||||
|
<option value="mm">Millimeters (mm)</option>
|
||||||
|
<option value="px">Pixels (at 96 DPI)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button id="export-csv-btn" class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
|
||||||
|
<i data-lucide="download" class="w-4 h-4"></i>
|
||||||
|
Export to CSV
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dimensions Table -->
|
||||||
<div class="overflow-x-auto rounded-lg border border-gray-700">
|
<div class="overflow-x-auto rounded-lg border border-gray-700">
|
||||||
<table class="min-w-full divide-y divide-gray-700 text-sm text-left">
|
<table class="min-w-full divide-y divide-gray-700 text-sm text-left">
|
||||||
<thead class="bg-gray-900">
|
<thead class="bg-gray-900">
|
||||||
@@ -1318,6 +1349,9 @@ export const toolTemplates = {
|
|||||||
<th class="px-4 py-3 font-medium text-white">Dimensions (W x H)</th>
|
<th class="px-4 py-3 font-medium text-white">Dimensions (W x H)</th>
|
||||||
<th class="px-4 py-3 font-medium text-white">Standard Size</th>
|
<th class="px-4 py-3 font-medium text-white">Standard Size</th>
|
||||||
<th class="px-4 py-3 font-medium text-white">Orientation</th>
|
<th class="px-4 py-3 font-medium text-white">Orientation</th>
|
||||||
|
<th class="px-4 py-3 font-medium text-white">Aspect Ratio</th>
|
||||||
|
<th class="px-4 py-3 font-medium text-white">Area</th>
|
||||||
|
<th class="px-4 py-3 font-medium text-white">Rotation</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="dimensions-table-body" class="divide-y divide-gray-700">
|
<tbody id="dimensions-table-body" class="divide-y divide-gray-700">
|
||||||
@@ -1327,6 +1361,7 @@ export const toolTemplates = {
|
|||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
|
|
||||||
'n-up': () => `
|
'n-up': () => `
|
||||||
<h2 class="text-2xl font-bold text-white mb-4">N-Up Page Arrangement</h2>
|
<h2 class="text-2xl font-bold text-white mb-4">N-Up Page Arrangement</h2>
|
||||||
<p class="mb-6 text-gray-400">Combine multiple pages from your PDF onto a single sheet. This is great for creating booklets or proof sheets.</p>
|
<p class="mb-6 text-gray-400">Combine multiple pages from your PDF onto a single sheet. This is great for creating booklets or proof sheets.</p>
|
||||||
@@ -1405,11 +1440,19 @@ export const toolTemplates = {
|
|||||||
|
|
||||||
'combine-single-page': () => `
|
'combine-single-page': () => `
|
||||||
<h2 class="text-2xl font-bold text-white mb-4">Combine to a Single Page</h2>
|
<h2 class="text-2xl font-bold text-white mb-4">Combine to a Single Page</h2>
|
||||||
<p class="mb-6 text-gray-400">Stitch all pages of your PDF together vertically to create one continuous, scrollable page.</p>
|
<p class="mb-6 text-gray-400">Stitch all pages of your PDF together vertically or horizontally to create one continuous page.</p>
|
||||||
${createFileInputHTML()}
|
${createFileInputHTML()}
|
||||||
<div id="file-display-area" class="mt-4 space-y-2"></div>
|
<div id="file-display-area" class="mt-4 space-y-2"></div>
|
||||||
|
|
||||||
<div id="combine-options" class="hidden mt-6 space-y-4">
|
<div id="combine-options" class="hidden mt-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label for="combine-orientation" class="block mb-2 text-sm font-medium text-gray-300">Orientation</label>
|
||||||
|
<select id="combine-orientation" class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
|
||||||
|
<option value="vertical" selected>Vertical (Stack pages top to bottom)</option>
|
||||||
|
<option value="horizontal">Horizontal (Stack pages left to right)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label for="page-spacing" class="block mb-2 text-sm font-medium text-gray-300">Spacing Between Pages (in points)</label>
|
<label for="page-spacing" class="block mb-2 text-sm font-medium text-gray-300">Spacing Between Pages (in points)</label>
|
||||||
@@ -1420,12 +1463,25 @@ export const toolTemplates = {
|
|||||||
<input type="color" id="background-color" value="#FFFFFF" class="w-full h-[42px] bg-gray-700 border border-gray-600 rounded-lg p-1 cursor-pointer">
|
<input type="color" id="background-color" value="#FFFFFF" class="w-full h-[42px] bg-gray-700 border border-gray-600 rounded-lg p-1 cursor-pointer">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="flex items-center gap-2 text-sm font-medium text-gray-300">
|
<label class="flex items-center gap-2 text-sm font-medium text-gray-300">
|
||||||
<input type="checkbox" id="add-separator" class="w-4 h-4 rounded text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
|
<input type="checkbox" id="add-separator" class="w-4 h-4 rounded text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
|
||||||
Draw a separator line between pages
|
Draw a separator line between pages
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="separator-options" class="hidden grid grid-cols-1 sm:grid-cols-2 gap-4 p-4 rounded-lg bg-gray-900 border border-gray-700">
|
||||||
|
<div>
|
||||||
|
<label for="separator-thickness" class="block mb-2 text-sm font-medium text-gray-300">Separator Line Thickness (in points)</label>
|
||||||
|
<input type="number" id="separator-thickness" value="0.5" min="0.1" max="10" step="0.1" class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="separator-color" class="block mb-2 text-sm font-medium text-gray-300">Separator Line Color</label>
|
||||||
|
<input type="color" id="separator-color" value="#CCCCCC" class="w-full h-[42px] bg-gray-700 border border-gray-600 rounded-lg p-1 cursor-pointer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button id="process-btn" class="btn-gradient w-full mt-6">Combine Pages</button>
|
<button id="process-btn" class="btn-gradient w-full mt-6">Combine Pages</button>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
@@ -1734,6 +1790,14 @@ export const toolTemplates = {
|
|||||||
<div id="canvas-container-sign" class="relative w-full overflow-auto bg-gray-900 rounded-lg border border-gray-600" style="height: 85vh;">
|
<div id="canvas-container-sign" class="relative w-full overflow-auto bg-gray-900 rounded-lg border border-gray-600" style="height: 85vh;">
|
||||||
<!-- PDF.js viewer iframe will be loaded here -->
|
<!-- PDF.js viewer iframe will be loaded here -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 flex items-center gap-2">
|
||||||
|
<label class="flex items-center gap-2 text-sm font-medium text-gray-300 cursor-pointer">
|
||||||
|
<input type="checkbox" id="flatten-signature-toggle" class="w-4 h-4 rounded text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
|
||||||
|
Flatten PDF (use the Save button below)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button id="process-btn" class="btn-gradient w-full mt-4" style="display:none;">Save & Download Signed PDF</button>
|
<button id="process-btn" class="btn-gradient w-full mt-4" style="display:none;">Save & Download Signed PDF</button>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
// Full-width mode utility
|
||||||
|
// This script applies the full-width preference from localStorage to page uploaders
|
||||||
|
|
||||||
|
export function initFullWidthMode() {
|
||||||
|
const savedFullWidth = localStorage.getItem('fullWidthMode') === 'true';
|
||||||
|
|
||||||
|
if (savedFullWidth) {
|
||||||
|
applyFullWidthMode(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function applyFullWidthMode(enabled: boolean) {
|
||||||
|
// Apply to all page uploaders
|
||||||
|
const pageUploaders = document.querySelectorAll('#tool-uploader');
|
||||||
|
pageUploaders.forEach((uploader) => {
|
||||||
|
if (enabled) {
|
||||||
|
uploader.classList.remove('max-w-2xl', 'max-w-5xl');
|
||||||
|
} else {
|
||||||
|
// Restore original max-width if not already present
|
||||||
|
if (!uploader.classList.contains('max-w-2xl') && !uploader.classList.contains('max-w-5xl')) {
|
||||||
|
uploader.classList.add('max-w-2xl');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-initialize on DOM load
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', initFullWidthMode);
|
||||||
|
} else {
|
||||||
|
initFullWidthMode();
|
||||||
|
}
|
||||||
|
}
|
||||||
+93
-5
@@ -1,6 +1,9 @@
|
|||||||
import createModule from '@neslinesli93/qpdf-wasm';
|
import createModule from '@neslinesli93/qpdf-wasm';
|
||||||
import { showLoader, hideLoader, showAlert } from '../ui';
|
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||||
import { createIcons } from 'lucide';
|
import { createIcons } from 'lucide';
|
||||||
|
import { state, resetState } from '../state.js';
|
||||||
|
import * as pdfjsLib from 'pdfjs-dist'
|
||||||
|
|
||||||
|
|
||||||
const STANDARD_SIZES = {
|
const STANDARD_SIZES = {
|
||||||
A4: { width: 595.28, height: 841.89 },
|
A4: { width: 595.28, height: 841.89 },
|
||||||
@@ -45,16 +48,17 @@ export function convertPoints(points: any, unit: any) {
|
|||||||
return result.toFixed(2);
|
return result.toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const hexToRgb = (hex: any) => {
|
// Convert hex color to RGB
|
||||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
export function hexToRgb(hex: string): { r: number; g: number; b: number } {
|
||||||
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||||
return result
|
return result
|
||||||
? {
|
? {
|
||||||
r: parseInt(result[1], 16) / 255,
|
r: parseInt(result[1], 16) / 255,
|
||||||
g: parseInt(result[2], 16) / 255,
|
g: parseInt(result[2], 16) / 255,
|
||||||
b: parseInt(result[3], 16) / 255,
|
b: parseInt(result[3], 16) / 255,
|
||||||
}
|
}
|
||||||
: { r: 0, g: 0, b: 0 }; // Default to black
|
: { r: 0, g: 0, b: 0 }
|
||||||
};
|
}
|
||||||
|
|
||||||
export const formatBytes = (bytes: any, decimals = 1) => {
|
export const formatBytes = (bytes: any, decimals = 1) => {
|
||||||
if (bytes === 0) return '0 Bytes';
|
if (bytes === 0) return '0 Bytes';
|
||||||
@@ -194,3 +198,87 @@ export function formatStars(num: number) {
|
|||||||
}
|
}
|
||||||
return num.toLocaleString();
|
return num.toLocaleString();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Truncates a filename to a maximum length, adding ellipsis if needed.
|
||||||
|
* Preserves the file extension.
|
||||||
|
* @param filename - The filename to truncate
|
||||||
|
* @param maxLength - Maximum length (default: 30)
|
||||||
|
* @returns Truncated filename with ellipsis if needed
|
||||||
|
*/
|
||||||
|
export function truncateFilename(filename: string, maxLength: number = 25): string {
|
||||||
|
if (filename.length <= maxLength) {
|
||||||
|
return filename;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastDotIndex = filename.lastIndexOf('.');
|
||||||
|
const extension = lastDotIndex !== -1 ? filename.substring(lastDotIndex) : '';
|
||||||
|
const nameWithoutExt = lastDotIndex !== -1 ? filename.substring(0, lastDotIndex) : filename;
|
||||||
|
|
||||||
|
const availableLength = maxLength - extension.length - 3; // 3 for '...'
|
||||||
|
|
||||||
|
if (availableLength <= 0) {
|
||||||
|
return filename.substring(0, maxLength - 3) + '...';
|
||||||
|
}
|
||||||
|
|
||||||
|
return nameWithoutExt.substring(0, availableLength) + '...' + extension;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 ? '' : '+');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resetAndReloadTool(preResetCallback?: () => void) {
|
||||||
|
const toolid = state.activeTool;
|
||||||
|
|
||||||
|
if (preResetCallback) {
|
||||||
|
preResetCallback();
|
||||||
|
}
|
||||||
|
|
||||||
|
resetState();
|
||||||
|
|
||||||
|
if (toolid) {
|
||||||
|
const element = document.querySelector(
|
||||||
|
`[data-tool-id="${toolid}"]`
|
||||||
|
) as HTMLElement;
|
||||||
|
if (element) element.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapper for pdfjsLib.getDocument that adds the required wasmUrl configuration.
|
||||||
|
* Use this instead of calling pdfjsLib.getDocument directly.
|
||||||
|
* @param src The source to load (url string, typed array, or parameters object)
|
||||||
|
* @returns The PDF loading task
|
||||||
|
*/
|
||||||
|
export function getPDFDocument(src: any) {
|
||||||
|
let params = src;
|
||||||
|
|
||||||
|
// Handle different input types similar to how getDocument handles them,
|
||||||
|
// but we ensure we have an object to attach wasmUrl to.
|
||||||
|
if (typeof src === 'string') {
|
||||||
|
params = { url: src };
|
||||||
|
} else if (src instanceof Uint8Array || src instanceof ArrayBuffer) {
|
||||||
|
params = { data: src };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure params is an object
|
||||||
|
if (typeof params !== 'object' || params === null) {
|
||||||
|
params = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add wasmUrl pointing to our public/wasm directory
|
||||||
|
// This is required for PDF.js v5+ to load OpenJPEG for certain images
|
||||||
|
return pdfjsLib.getDocument({
|
||||||
|
...params,
|
||||||
|
wasmUrl: '/pdfjs-viewer/wasm/',
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
import * as pdfjsLib from 'pdfjs-dist';
|
import * as pdfjsLib from 'pdfjs-dist';
|
||||||
|
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Configuration for progressive rendering
|
* Configuration for progressive rendering
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { ShortcutsManager } from '../logic/shortcuts.js';
|
||||||
|
|
||||||
|
export function initializeGlobalShortcuts() {
|
||||||
|
ShortcutsManager.init();
|
||||||
|
|
||||||
|
console.log('Global shortcuts initialized');
|
||||||
|
}
|
||||||
+15
-80
@@ -59,7 +59,8 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
||||||
<div class="bg-gray-800 rounded-xl shadow-xl p-6 max-w-5xl w-full text-gray-200 border border-gray-700">
|
<div id="tool-uploader"
|
||||||
|
class="bg-gray-800 rounded-xl shadow-xl p-6 max-w-5xl w-full text-gray-200 border border-gray-700">
|
||||||
<button id="back-to-tools"
|
<button id="back-to-tools"
|
||||||
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
||||||
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
||||||
@@ -93,99 +94,33 @@
|
|||||||
<h2 class="text-lg font-semibold text-white">Stamp Editor</h2>
|
<h2 class="text-lg font-semibold text-white">Stamp Editor</h2>
|
||||||
<p class="text-xs text-gray-400">Use the toolbar's image stamp tool to place stamps.</p>
|
<p class="text-xs text-gray-400">Use the toolbar's image stamp tool to place stamps.</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="stamp-viewer-container" class="h-[70vh] bg-black/70 flex items-stretch justify-stretch">
|
<div id="stamp-viewer-container" class="h-[70vh] bg-black/70 flex items-stretch justify-stretch">
|
||||||
<!-- iframe injected by add-stamps.ts -->
|
<!-- iframe injected by add-stamps.ts -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="save-stamped-btn"
|
<button id="save-stamped-btn" class="btn-gradient w-full mt-6 flex items-center justify-center gap-2">
|
||||||
class="btn-gradient w-full mt-6 flex items-center justify-center gap-2">
|
|
||||||
<span>Save Stamped PDF</span>
|
<span>Save Stamped PDF</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="mt-16 border-t-2 border-gray-700 py-8 bg-[#111827]">
|
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
||||||
<div class="container mx-auto px-4">
|
<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="flex items-center gap-3 mb-2">
|
||||||
<div class="mb-8 md:mb-0">
|
<img src="../../public/images/favicon.svg" alt="BentoPDF Logo" class="h-8 w-8" />
|
||||||
<div class="flex items-center justify-center md:justify-start mb-4">
|
<span class="text-white font-bold text-xl">BentoPDF</span>
|
||||||
<img src="../../public/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">
|
|
||||||
© 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="../../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.19 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>
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
© 2025 BentoPDF. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 text-xs mt-1">
|
||||||
|
Version <span id="app-version"></span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
||||||
|
<script type="module" src="../js/utils/full-width.ts"></script>
|
||||||
<script type="module" src="../version.ts"></script>
|
<script type="module" src="../version.ts"></script>
|
||||||
<script type="module" src="../js/logic/add-stamps.ts"></script>
|
<script type="module" src="../js/logic/add-stamps.ts"></script>
|
||||||
<script type="module" src="../js/mobileMenu.ts"></script>
|
<script type="module" src="../js/mobileMenu.ts"></script>
|
||||||
|
|||||||
+14
-77
@@ -61,14 +61,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div id="uploader" class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
<div id="uploader" class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
||||||
<div class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-md w-full text-gray-200 border border-gray-700">
|
<div id="tool-uploader"
|
||||||
|
class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
|
||||||
<button id="back-to-tools"
|
<button id="back-to-tools"
|
||||||
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
||||||
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
||||||
<span class="cursor-pointer"> Back to Tools </span>
|
<span class="cursor-pointer"> Back to Tools </span>
|
||||||
</button>
|
</button>
|
||||||
|
<h1 class="text-2xl font-bold text-white mb-2">Edit Bookmarks</h1>
|
||||||
<p class="text-gray-400 mb-6">
|
<p class="text-gray-400 mb-6">
|
||||||
Upload a PDF to begin editing bookmarks
|
Add, edit, import, delete and extract PDF bookmarks.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Drop Zone for Main PDF Upload -->
|
<!-- Drop Zone for Main PDF Upload -->
|
||||||
@@ -410,85 +412,20 @@
|
|||||||
|
|
||||||
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
||||||
<div class="container mx-auto px-4">
|
<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="flex items-center gap-3 mb-2">
|
||||||
<div class="mb-8 md:mb-0">
|
<img src="../../public/images/favicon.svg" alt="BentoPDF Logo" class="h-8 w-8" />
|
||||||
<div class="flex items-center justify-center md:justify-start mb-4">
|
<span class="text-white font-bold text-xl">BentoPDF</span>
|
||||||
<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">
|
|
||||||
© 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="./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>
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
© 2025 BentoPDF. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 text-xs mt-1">
|
||||||
|
Version <span id="app-version"></span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
||||||
|
<script type="module" src="../js/utils/full-width.ts"></script>
|
||||||
<script type="module" src="../version.ts"></script>
|
<script type="module" src="../version.ts"></script>
|
||||||
<script type="module" src="../js/logic/bookmark-pdf.ts"></script>
|
<script type="module" src="../js/logic/bookmark-pdf.ts"></script>
|
||||||
<script type="module" src="../js/mobileMenu.ts"></script>
|
<script type="module" src="../js/mobileMenu.ts"></script>
|
||||||
|
|||||||
@@ -0,0 +1,337 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Create PDF Form - 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">
|
||||||
|
<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="../../public/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
|
||||||
|
<span class="text-white font-bold text-xl ml-2">
|
||||||
|
<a href="/">BentoPDF</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desktop Navigation -->
|
||||||
|
<div class="hidden md:flex items-center space-x-8 text-white">
|
||||||
|
<a href="/" class="nav-link">Home</a>
|
||||||
|
<a href="/about.html" class="nav-link">About</a>
|
||||||
|
<a href="/contact.html" class="nav-link">Contact</a>
|
||||||
|
<a href="/" class="nav-link">All Tools</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||||
|
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||||
|
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu Dropdown -->
|
||||||
|
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
|
||||||
|
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
|
||||||
|
<a href="/" class="mobile-nav-link">Home</a>
|
||||||
|
<a href="/about.html" class="mobile-nav-link">About</a>
|
||||||
|
<a href="/contact.html" class="mobile-nav-link">Contact</a>
|
||||||
|
<a href="/" class="mobile-nav-link">All Tools</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<input type="file" id="pdfUploadInput" accept="application/pdf" class="hidden" />
|
||||||
|
|
||||||
|
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
||||||
|
<!-- Upload Area (shown initially) -->
|
||||||
|
<div id="upload-area"
|
||||||
|
class="bg-gray-800 rounded-xl shadow-xl p-6 max-w-5xl w-full text-gray-200 border border-gray-700">
|
||||||
|
<button id="back-to-tools-upload"
|
||||||
|
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
||||||
|
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
||||||
|
<span class="cursor-pointer">Back to Tools</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold text-white mb-2">Create PDF Form</h1>
|
||||||
|
<p class="text-gray-400 mb-6">
|
||||||
|
Upload an existing PDF or create a blank PDF to start adding form fields.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="relative flex flex-col items-center justify-center w-full h-44 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-700 hover:bg-gray-600 transition-colors duration-300"
|
||||||
|
id="dropZone">
|
||||||
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
||||||
|
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
|
||||||
|
<p class="mb-2 text-sm text-gray-300">
|
||||||
|
<span class="font-semibold">Click to select a PDF</span> or drag and drop
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500">Single PDF file</p>
|
||||||
|
<p class="text-xs text-gray-500">Your files never leave your device.</p>
|
||||||
|
</div>
|
||||||
|
<input type="file" id="pdfFileInput" accept="application/pdf"
|
||||||
|
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="fileList" class="mt-4 hidden text-sm text-gray-200"></div>
|
||||||
|
|
||||||
|
<!-- OR Separator -->
|
||||||
|
<div class="relative my-6">
|
||||||
|
<div class="absolute inset-0 flex items-center">
|
||||||
|
<div class="w-full border-t border-gray-600"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative flex justify-center text-sm">
|
||||||
|
<span class="px-4 bg-gray-800 text-gray-400 font-medium">OR</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button id="blankPdfBtn"
|
||||||
|
class="w-full bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-lg flex items-center justify-center gap-3 transition-colors">
|
||||||
|
<i data-lucide="file-plus" class="w-5 h-5"></i>
|
||||||
|
<span class="font-semibold">Create Blank PDF</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="pageSizeSelector" class="mt-4 hidden">
|
||||||
|
<label class="block text-sm font-semibold text-gray-300 mb-2">Page Size:</label>
|
||||||
|
<select id="pageSizeSelect"
|
||||||
|
class="w-full bg-gray-600 border border-gray-500 text-white rounded px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
|
||||||
|
<option value="letter">Letter (8.5" × 11")</option>
|
||||||
|
<option value="a4">A4 (210mm × 297mm)</option>
|
||||||
|
<option value="a5">A5 (148mm × 210mm)</option>
|
||||||
|
<option value="legal">Legal (8.5" × 14")</option>
|
||||||
|
<option value="tabloid">Tabloid (11" × 17")</option>
|
||||||
|
<option value="a3">A3 (297mm × 420mm)</option>
|
||||||
|
<option value="custom">Custom</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div id="customDimensionsInput" class="mt-3 hidden space-y-2">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<div class="flex-1">
|
||||||
|
<label class="block text-xs text-gray-400 mb-1">Width (pts)</label>
|
||||||
|
<input type="number" id="customWidth" placeholder="612" min="72" max="14400"
|
||||||
|
class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<label class="block text-xs text-gray-400 mb-1">Height (pts)</label>
|
||||||
|
<input type="number" id="customHeight" placeholder="792" min="72" max="14400"
|
||||||
|
class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-500 italic">1 inch = 72 points</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="confirmBlankBtn"
|
||||||
|
class="w-full mt-3 bg-indigo-600 hover:bg-indigo-500 text-white p-2 rounded transition-colors">
|
||||||
|
Start Creating
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tool Container (hidden initially) -->
|
||||||
|
<div id="tool-container"
|
||||||
|
class="bg-gray-800 rounded-xl shadow-xl p-6 w-full text-gray-200 border border-gray-700 hidden">
|
||||||
|
<button id="back-to-tools-creator"
|
||||||
|
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
||||||
|
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
||||||
|
<span class="cursor-pointer">Back to Tools</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold text-white mb-2">Create PDF Form</h1>
|
||||||
|
<p class="text-gray-400 mb-6">
|
||||||
|
Drag and drop fields onto the canvas to create a fillable PDF form. Customize field properties and
|
||||||
|
download your form.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Main Form Creator Area -->
|
||||||
|
<div class="flex flex-col lg:flex-row gap-6">
|
||||||
|
<!-- Sidebar with Properties -->
|
||||||
|
<aside class="lg:w-64 flex-shrink-0 order-2 lg:order-1">
|
||||||
|
<!-- Properties Section -->
|
||||||
|
<div class="bg-gray-700 rounded-lg p-4">
|
||||||
|
<h2 class="font-semibold text-gray-200 mb-3 flex items-center gap-2">
|
||||||
|
<i data-lucide="settings" class="w-4 h-4"></i>
|
||||||
|
Properties
|
||||||
|
</h2>
|
||||||
|
<div id="propertiesPanel" class="space-y-3">
|
||||||
|
<p class="text-gray-500 text-sm">Select a field to edit properties</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Field Count -->
|
||||||
|
<div class="mt-4 bg-gray-700 rounded-lg p-3 text-center">
|
||||||
|
<p class="text-sm text-gray-400">
|
||||||
|
<span id="fieldCount" class="text-indigo-400 font-bold text-lg">0</span> field(s)
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500 mt-1">Press Delete to remove selected field</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Canvas Area -->
|
||||||
|
<main class="flex-1 order-1 lg:order-2 min-w-0">
|
||||||
|
<!-- Page Management Toolbar -->
|
||||||
|
<div class="bg-gray-700 rounded-lg p-3 mb-4 flex flex-wrap gap-2 justify-between items-center">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button id="prevPageBtn"
|
||||||
|
class="bg-gray-600 hover:bg-gray-500 text-white p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
disabled>
|
||||||
|
<i data-lucide="chevron-left" class="w-4 h-4"></i>
|
||||||
|
</button>
|
||||||
|
<span id="pageIndicator" class="text-sm text-gray-300 px-2">Page 1 of 1</span>
|
||||||
|
<button id="nextPageBtn"
|
||||||
|
class="bg-gray-600 hover:bg-gray-500 text-white p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
disabled>
|
||||||
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button id="resetBtn"
|
||||||
|
class="bg-gray-600 hover:bg-gray-500 text-white p-2 px-3 rounded flex items-center gap-2 transition-colors">
|
||||||
|
<i data-lucide="rotate-ccw" class="w-4 h-4"></i>
|
||||||
|
<span class="text-sm">Reset</span>
|
||||||
|
</button>
|
||||||
|
<button id="addPageBtn"
|
||||||
|
class="bg-indigo-600 hover:bg-indigo-500 text-white p-2 px-3 rounded flex items-center gap-2 transition-colors">
|
||||||
|
<i data-lucide="file-plus" class="w-4 h-4"></i>
|
||||||
|
<span class="text-sm">Add Page</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Top Toolbar -->
|
||||||
|
<div class="bg-gray-700 rounded-lg p-2 mb-4">
|
||||||
|
<div class="flex flex-wrap gap-2 justify-center items-center max-w-full overflow-hidden">
|
||||||
|
<div class="text-gray-400 text-sm font-semibold mr-2 flex items-center gap-1">
|
||||||
|
<i data-lucide="wrench" class="w-4 h-4"></i> Fields:
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="text" title="Text Field">
|
||||||
|
<i data-lucide="type" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">Text</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="checkbox" title="Checkbox">
|
||||||
|
<i data-lucide="check-square" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">Checkbox</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="radio" title="Radio Button">
|
||||||
|
<i data-lucide="circle-dot" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">Radio</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="dropdown" title="Dropdown">
|
||||||
|
<i data-lucide="chevron-down-square" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">Dropdown</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="optionlist" title="Option List">
|
||||||
|
<i data-lucide="list" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">List</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="button" title="Button">
|
||||||
|
<i data-lucide="square-mouse-pointer" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">Button</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="signature" title="Signature">
|
||||||
|
<i data-lucide="pen-tool" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">Signature</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="date" title="Date Field">
|
||||||
|
<i data-lucide="calendar" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">Date</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
|
||||||
|
draggable="true" data-type="image" title="Image Field">
|
||||||
|
<i data-lucide="image" class="w-4 h-4"></i>
|
||||||
|
<span class="text-xs">Image</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-700 rounded-lg p-4 mb-4 overflow-auto w-full">
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<div id="pdfCanvasWrapper" class="shadow-2xl relative" style="border: 1px solid #374151;">
|
||||||
|
<div id="pdfCanvas" class="bg-white relative">
|
||||||
|
<!-- Fields will be added here dynamically -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Download Button -->
|
||||||
|
<button id="downloadBtn" class="btn-gradient w-full flex items-center justify-center gap-2 py-3">
|
||||||
|
<span>Download PDF Form</span>
|
||||||
|
</button>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="flex items-center gap-3 mb-2">
|
||||||
|
<img src="../../public/images/favicon.svg" alt="BentoPDF Logo" class="h-8 w-8" />
|
||||||
|
<span class="text-white font-bold text-xl">BentoPDF</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
© 2025 BentoPDF. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 text-xs mt-1">
|
||||||
|
Version <span id="app-version"></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- Custom Modal -->
|
||||||
|
<div id="errorModal" class="hidden fixed inset-0 z-[9999] flex items-center justify-center bg-black bg-opacity-75">
|
||||||
|
<div class="bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 border border-gray-700">
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 id="errorModalTitle" class="text-xl font-bold text-white mb-3">Error</h3>
|
||||||
|
<p id="errorModalMessage" class="text-gray-300 mb-6">An error occurred.</p>
|
||||||
|
<button id="errorModalClose"
|
||||||
|
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition-colors">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
||||||
|
<script type="module" src="../js/utils/full-width.ts"></script>
|
||||||
|
<script type="module" src="../version.ts"></script>
|
||||||
|
<script type="module" src="../js/logic/form-creator.ts"></script>
|
||||||
|
<script type="module" src="../js/mobileMenu.ts"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
+13
-77
@@ -59,7 +59,8 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
||||||
<div class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
|
<div id="tool-uploader"
|
||||||
|
class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
|
||||||
<button id="back-to-tools"
|
<button id="back-to-tools"
|
||||||
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
||||||
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
||||||
@@ -104,88 +105,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="mt-16 border-t-2 border-gray-700 py-8 bg-[#111827]">
|
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
||||||
<div class="container mx-auto px-4">
|
<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="flex items-center gap-3 mb-2">
|
||||||
<div class="mb-8 md:mb-0">
|
<img src="../../public/images/favicon.svg" alt="BentoPDF Logo" class="h-8 w-8" />
|
||||||
<div class="flex items-center justify-center md:justify-start mb-4">
|
<span class="text-white font-bold text-xl">BentoPDF</span>
|
||||||
<img src="../../public/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">
|
|
||||||
© 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="../../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>
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
© 2025 BentoPDF. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 text-xs mt-1">
|
||||||
|
Version <span id="app-version"></span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script type="module" src="../js/logic/json-to-pdf.ts"></script>
|
<script type="module" src="../js/logic/json-to-pdf.ts"></script>
|
||||||
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
||||||
|
<script type="module" src="../js/utils/full-width.ts"></script>
|
||||||
<script type="module" src="../version.ts"></script>
|
<script type="module" src="../version.ts"></script>
|
||||||
<script type="module" src="../js/mobileMenu.ts"></script>
|
<script type="module" src="../js/mobileMenu.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -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()">
|
||||||
|
|||||||
+13
-77
@@ -59,7 +59,8 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
||||||
<div class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
|
<div id="tool-uploader"
|
||||||
|
class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
|
||||||
<button id="back-to-tools"
|
<button id="back-to-tools"
|
||||||
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
||||||
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
||||||
@@ -98,88 +99,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="mt-16 border-t-2 border-gray-700 py-8 bg-[#111827]">
|
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
||||||
<div class="container mx-auto px-4">
|
<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="flex items-center gap-3 mb-2">
|
||||||
<div class="mb-8 md:mb-0">
|
<img src="../../public/images/favicon.svg" alt="BentoPDF Logo" class="h-8 w-8" />
|
||||||
<div class="flex items-center justify-center md:justify-start mb-4">
|
<span class="text-white font-bold text-xl">BentoPDF</span>
|
||||||
<img src="../../public/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">
|
|
||||||
© 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="../../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>
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
© 2025 BentoPDF. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 text-xs mt-1">
|
||||||
|
Version <span id="app-version"></span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script type="module" src="../js/logic/pdf-to-json.ts"></script>
|
<script type="module" src="../js/logic/pdf-to-json.ts"></script>
|
||||||
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
||||||
|
<script type="module" src="../js/utils/full-width.ts"></script>
|
||||||
<script type="module" src="../version.ts"></script>
|
<script type="module" src="../version.ts"></script>
|
||||||
<script type="module" src="../js/mobileMenu.ts"></script>
|
<script type="module" src="../js/mobileMenu.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -61,7 +61,8 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div id="uploader" class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
<div id="uploader" class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
|
||||||
<div class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
|
<div id="tool-uploader"
|
||||||
|
class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
|
||||||
<button id="back-to-tools"
|
<button id="back-to-tools"
|
||||||
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
|
||||||
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
<i data-lucide="arrow-left" class="cursor-pointer"></i>
|
||||||
@@ -170,84 +171,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="mt-16 border-t-2 border-gray-700 py-8 bg-[#111827]">
|
<footer class="mt-16 border-t-2 border-gray-700 py-8">
|
||||||
<div class="container mx-auto px-4">
|
<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="flex items-center gap-3 mb-2">
|
||||||
<div class="mb-8 md:mb-0">
|
<img src="../../public/images/favicon.svg" alt="BentoPDF Logo" class="h-8 w-8" />
|
||||||
<div class="flex items-center justify-center md:justify-start mb-4">
|
<span class="text-white font-bold text-xl">BentoPDF</span>
|
||||||
<img src="../../public/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">
|
|
||||||
© 2025 BentoPDF. All rights reserved.
|
|
||||||
</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="../../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>
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
© 2025 BentoPDF. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 text-xs mt-1">
|
||||||
|
Version <span id="app-version"></span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
<script type="module" src="../js/utils/lucide-init.ts"></script>
|
||||||
|
<script type="module" src="../js/utils/full-width.ts"></script>
|
||||||
<script type="module" src="../js/logic/table-of-contents.ts"></script>
|
<script type="module" src="../js/logic/table-of-contents.ts"></script>
|
||||||
<script type="module" src="../js/mobileMenu.ts"></script>
|
<script type="module" src="../js/mobileMenu.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
+260
-294
@@ -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>
|
||||||
© 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">
|
||||||
|
© 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/AP2Y97juZT" 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>
|
||||||
@@ -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'
|
||||||
@@ -59,6 +60,7 @@ export default defineConfig(({ mode }) => ({
|
|||||||
'json-to-pdf': resolve(__dirname, 'src/pages/json-to-pdf.html'),
|
'json-to-pdf': resolve(__dirname, 'src/pages/json-to-pdf.html'),
|
||||||
'pdf-multi-tool': resolve(__dirname, 'src/pages/pdf-multi-tool.html'),
|
'pdf-multi-tool': resolve(__dirname, 'src/pages/pdf-multi-tool.html'),
|
||||||
'add-stamps': resolve(__dirname, 'src/pages/add-stamps.html'),
|
'add-stamps': resolve(__dirname, 'src/pages/add-stamps.html'),
|
||||||
|
'form-creator': resolve(__dirname, 'src/pages/form-creator.html'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in new issue
Block a user