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

Merge pull request #664 from Skillkiller/translation

Browse Source 
Localize status messages and UI elements across various tools
This commit is contained in:
Alam
2026-05-08 19:44:24 +05:30
committed by GitHub
parent 5f889bcc0a 4e1f8c5a24
commit a45f7fb48e
41 changed files with 1309 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/add-stamps.html
+1 -1
View File
@@ -200,7 +200,7 @@
id="save-stamped-btn"
class="hidden btn-gradient w-full mt-6 flex items-center justify-center gap-2"
>
<span>Save Stamped PDF</span>
<span data-i18n="tools:addStamps.saveButton">Save Stamped PDF</span>
</button>
</div>
</div>
src/pages/bookmark.html
+49 -11
View File
@@ -162,19 +162,26 @@
id="auto-extract-checkbox"
class="w-4 h-4 accent-blue-500"
/>
<span>Auto-extract existing bookmarks</span>
<span data-i18n="tools:editBookmarks.autoExtractExisting"
>Auto-extract existing bookmarks</span
>
</label>
</div>
<!-- Import Bookmarks Section -->
<div class="mt-8 pt-6 border-t border-gray-700">
<h3 class="text-sm font-semibold text-gray-300 mb-4">
<h3
class="text-sm font-semibold text-gray-300 mb-4"
data-i18n="tools:editBookmarks.importSectionTitle"
>
Or Import Bookmarks
</h3>
<!-- CSV Upload -->
<label class="block mb-4">
<span class="text-xs text-gray-500"
<span
class="text-xs text-gray-500"
data-i18n="tools:editBookmarks.csvFormat"
>CSV format: title,page,level</span
>
<div
@@ -183,8 +190,14 @@
<div class="flex flex-col items-center justify-center pt-4 pb-4">
<i data-lucide="sheet" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-xs text-gray-400">
<span class="font-semibold">Click to upload CSV</span> or drag
here
<span
class="font-semibold"
data-i18n="tools:editBookmarks.uploadCsvAction"
>Click to upload CSV</span
>
<span data-i18n="tools:editBookmarks.orDragHere"
>or drag here</span
>
</p>
</div>
<input
@@ -198,15 +211,25 @@
<!-- JSON Upload -->
<label class="block">
<span class="text-xs text-gray-500">JSON format</span>
<span
class="text-xs text-gray-500"
data-i18n="tools:editBookmarks.jsonFormat"
>JSON format</span
>
<div
class="relative flex flex-col items-center justify-center w-full h-32 mt-2 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-800 hover:bg-gray-700 transition-colors duration-300"
>
<div class="flex flex-col items-center justify-center pt-4 pb-4">
<i data-lucide="braces" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-xs text-gray-400">
<span class="font-semibold">Click to upload JSON</span> or
drag here
<span
class="font-semibold"
data-i18n="tools:editBookmarks.uploadJsonAction"
>Click to upload JSON</span
>
<span data-i18n="tools:editBookmarks.orDragHere"
>or drag here</span
>
</p>
</div>
<input
@@ -659,7 +682,12 @@
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="howItWorks.step1Title"
>
Upload File
</h3>
<p class="text-gray-400" data-i18n="howItWorks.step1">
Click or drag and drop your file to begin
</p>
@@ -672,7 +700,12 @@
2
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="howItWorks.step2Title"
>
Process
</h3>
<p class="text-gray-400" data-i18n="howItWorks.step2">
Click the process button to start
</p>
@@ -685,7 +718,12 @@
3
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="howItWorks.step3Title"
>
Download
</h3>
<p class="text-gray-400" data-i18n="howItWorks.step3">
Save your processed file instantly
</p>
src/pages/compare-pdfs.html
+24 -4
View File
@@ -600,8 +600,18 @@
class="flex flex-col items-center justify-center"
>
<i data-lucide="file-text" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-sm text-gray-400">First PDF</p>
<p class="text-xs text-gray-500">Click or drop</p>
<p
class="text-sm text-gray-400"
data-i18n="tools:comparePdfs.firstPdf"
>
First PDF
</p>
<p
class="text-xs text-gray-500"
data-i18n="tools:comparePdfs.clickOrDrop"
>
Click or drop
</p>
</div>
<input
id="file-input-1"
@@ -619,8 +629,18 @@
class="flex flex-col items-center justify-center"
>
<i data-lucide="file-text" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-sm text-gray-400">Second PDF</p>
<p class="text-xs text-gray-500">Click or drop</p>
<p
class="text-sm text-gray-400"
data-i18n="tools:comparePdfs.secondPdf"
>
Second PDF
</p>
<p
class="text-xs text-gray-500"
data-i18n="tools:comparePdfs.clickOrDrop"
>
Click or drop
</p>
</div>
<input
id="file-input-2"
src/pages/digital-sign-pdf.html
+209 -39
View File
@@ -134,10 +134,16 @@
class="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5"
></i>
<div class="text-sm">
<p class="text-blue-300 font-medium">
<p
class="text-blue-300 font-medium"
data-i18n="tools:digitalSignPdf.internetRequiredTitle"
>
Internet connection required
</p>
<p class="text-blue-400/80 mt-1">
<p
class="text-blue-400/80 mt-1"
data-i18n="tools:digitalSignPdf.internetRequiredDescription"
>
Signing may need to fetch certificate chain information from your
certificate issuer's server to validate the signature.
</p>
@@ -180,7 +186,12 @@
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="certificate-section" class="hidden mt-6 space-y-4">
<h2 class="text-lg font-semibold text-white">Certificate</h2>
<h2
class="text-lg font-semibold text-white"
data-i18n="tools:digitalSignPdf.certificateSection"
>
Certificate
</h2>
<div
id="cert-drop-zone"
@@ -188,7 +199,10 @@
>
<div class="flex flex-col items-center justify-center py-4">
<i data-lucide="key" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-sm text-gray-400">
<p
class="text-sm text-gray-400"
data-i18n="tools:digitalSignPdf.uploadCert"
>
Upload certificate (.pfx, .p12, .pem)
</p>
</div>
@@ -206,6 +220,7 @@
<label
for="cert-password"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.certPassword"
>Certificate Password</label
>
<input
@@ -213,24 +228,40 @@
id="cert-password"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="Enter certificate password"
data-i18n-placeholder="tools:digitalSignPdf.certPasswordPlaceholder"
/>
</div>
<div id="cert-info" class="hidden bg-gray-700 rounded-lg p-4">
<h3 class="text-sm font-semibold text-white mb-2">
<h3
class="text-sm font-semibold text-white mb-2"
data-i18n="tools:digitalSignPdf.certInfo"
>
Certificate Information
</h3>
<div class="text-sm text-gray-300 space-y-1">
<p>
<span class="text-gray-400">Subject:</span>
<span
class="text-gray-400"
data-i18n="tools:digitalSignPdf.certSubject"
>Subject:</span
>
<span id="cert-subject">-</span>
</p>
<p>
<span class="text-gray-400">Issuer:</span>
<span
class="text-gray-400"
data-i18n="tools:digitalSignPdf.certIssuer"
>Issuer:</span
>
<span id="cert-issuer">-</span>
</p>
<p>
<span class="text-gray-400">Valid:</span>
<span
class="text-gray-400"
data-i18n="tools:digitalSignPdf.certValidity"
>Valid:</span
>
<span id="cert-validity">-</span>
</p>
</div>
@@ -238,7 +269,10 @@
</div>
<div id="signature-options" class="hidden mt-6 space-y-4">
<h2 class="text-lg font-semibold text-white">
<h2
class="text-lg font-semibold text-white"
data-i18n="tools:digitalSignPdf.signatureDetails"
>
Signature Details (Optional)
</h2>
@@ -246,6 +280,7 @@
<label
for="sign-reason"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.reason"
>Reason</label
>
<input
@@ -253,6 +288,7 @@
id="sign-reason"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="e.g., I approve this document"
data-i18n-placeholder="tools:digitalSignPdf.reasonPlaceholder"
/>
</div>
@@ -260,6 +296,7 @@
<label
for="sign-location"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.location"
>Location</label
>
<input
@@ -267,6 +304,7 @@
id="sign-location"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="e.g., New York, USA"
data-i18n-placeholder="tools:digitalSignPdf.locationPlaceholder"
/>
</div>
@@ -274,6 +312,7 @@
<label
for="sign-contact"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.contactInfo"
>Contact Info</label
>
<input
@@ -281,13 +320,19 @@
id="sign-contact"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="e.g., email@example.com"
data-i18n-placeholder="tools:digitalSignPdf.contactPlaceholder"
/>
</div>
</div>
<div id="visible-signature-section" class="hidden mt-6 space-y-4">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-white">Visible Signature</h2>
<h2
class="text-lg font-semibold text-white"
data-i18n="tools:digitalSignPdf.visibleSignature"
>
Visible Signature
</h2>
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
@@ -299,7 +344,10 @@
></div>
</label>
</div>
<p class="text-xs text-gray-500">
<p
class="text-xs text-gray-500"
data-i18n="tools:digitalSignPdf.visibleSignatureDescription"
>
When enabled, a visible signature box appears on the PDF. You can
upload an image/logo or add text. If neither is provided, the
signer's name from the certificate will be shown automatically.
@@ -307,7 +355,9 @@
<div id="visible-sig-options" class="hidden space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2"
<label
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.signatureImage"
>Signature Image/Logo (Optional)</label
>
<div
@@ -316,7 +366,10 @@
>
<div class="flex flex-col items-center justify-center py-2">
<i data-lucide="image" class="w-6 h-6 mb-1 text-gray-400"></i>
<p class="text-xs text-gray-400">
<p
class="text-xs text-gray-400"
data-i18n="tools:digitalSignPdf.uploadSignatureImage"
>
Upload image (PNG, JPG, WebP)
</p>
</div>
@@ -339,6 +392,7 @@
<button
id="remove-sig-image"
class="text-red-400 hover:text-red-300 text-sm"
data-i18n="tools:digitalSignPdf.remove"
>
Remove
</button>
@@ -350,22 +404,38 @@
<label
for="sig-page"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.page"
>Page</label
>
<select
id="sig-page"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
>
<option value="0">First page</option>
<option value="last">Last page</option>
<option value="all">All pages</option>
<option value="custom">Custom page #</option>
<option value="0" data-i18n="tools:digitalSignPdf.firstPage">
First page
</option>
<option
value="last"
data-i18n="tools:digitalSignPdf.lastPage"
>
Last page
</option>
<option value="all" data-i18n="tools:digitalSignPdf.allPages">
All pages
</option>
<option
value="custom"
data-i18n="tools:digitalSignPdf.customPage"
>
Custom page #
</option>
</select>
</div>
<div id="custom-page-wrapper" class="hidden">
<label
for="sig-custom-page"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.pageNumber"
>Page #</label
>
<input
@@ -383,6 +453,7 @@
<label
for="sig-x"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.xPosition"
>X Position (left)</label
>
<input
@@ -397,6 +468,7 @@
<label
for="sig-y"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.yPosition"
>Y Position (top)</label
>
<input
@@ -414,6 +486,7 @@
<label
for="sig-width"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.width"
>Width</label
>
<input
@@ -428,6 +501,7 @@
<label
for="sig-height"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.height"
>Height</label
>
<input
@@ -447,7 +521,9 @@
id="enable-sig-text"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500"
/>
<span class="text-sm font-medium text-gray-300"
<span
class="text-sm font-medium text-gray-300"
data-i18n="tools:digitalSignPdf.addTextOverlay"
>Add text overlay</span
>
</label>
@@ -458,6 +534,7 @@
<label
for="sig-text"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.text"
>Text</label
>
<input
@@ -465,6 +542,7 @@
id="sig-text"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="e.g., Digitally signed by John Doe"
data-i18n-placeholder="tools:digitalSignPdf.textPlaceholder"
/>
</div>
<div class="grid grid-cols-2 gap-4">
@@ -472,6 +550,7 @@
<label
for="sig-text-color"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.textColor"
>Text Color</label
>
<input type="color" id="sig-text-color" value="#000000" />
@@ -480,6 +559,7 @@
<label
for="sig-text-size"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.fontSize"
>Font Size</label
>
<input
@@ -500,6 +580,7 @@
id="process-btn"
class="btn-gradient w-full mt-6"
style="display: none"
data-i18n="tools:digitalSignPdf.applySignature"
>
Apply Digital Signature
</button>
@@ -514,7 +595,11 @@
class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
>
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
<p
id="loader-text"
class="text-white text-lg font-medium"
data-i18n="loader.processing"
>
Processing...
</p>
</div>
@@ -538,6 +623,7 @@
<button
id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
data-i18n="common.ok"
>
OK
</button>
@@ -559,8 +645,16 @@
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload PDF</h3>
<p class="text-gray-400">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="tools:digitalSignPdf.howToStep1Title"
>
Upload PDF
</h3>
<p
class="text-gray-400"
data-i18n="tools:digitalSignPdf.howToStep1Text"
>
Select the PDF document you want to sign
</p>
</div>
@@ -573,9 +667,14 @@
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">
Upload Certificate
<span data-i18n="tools:digitalSignPdf.howToStep2Title">
Upload Certificate
</span>
</h3>
<p class="text-gray-400">
<p
class="text-gray-400"
data-i18n="tools:digitalSignPdf.howToStep2Text"
>
Provide your .pfx or .p12 certificate file and password
</p>
</div>
@@ -588,9 +687,14 @@
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">
Sign & Download
<span data-i18n="tools:digitalSignPdf.howToStep3Title">
Sign & Download
</span>
</h3>
<p class="text-gray-400">
<p
class="text-gray-400"
data-i18n="tools:digitalSignPdf.howToStep3Text"
>
Apply the digital signature and download your signed PDF
</p>
</div>
@@ -610,36 +714,86 @@
href="encrypt-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Encrypt PDF</h3>
<p class="text-gray-400 text-sm">Password protect your PDF</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:encryptPdf.name"
>
Encrypt PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedEncryptDesc"
>
Password protect your PDF
</p>
</a>
<a
href="decrypt-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Decrypt PDF</h3>
<p class="text-gray-400 text-sm">Remove PDF password</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:decryptPdf.name"
>
Decrypt PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedDecryptDesc"
>
Remove PDF password
</p>
</a>
<a
href="flatten-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Flatten PDF</h3>
<p class="text-gray-400 text-sm">Make annotations permanent</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:flattenPdf.name"
>
Flatten PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedFlattenDesc"
>
Make annotations permanent
</p>
</a>
<a
href="sanitize-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Sanitize PDF</h3>
<p class="text-gray-400 text-sm">Remove hidden data</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:sanitizePdf.name"
>
Sanitize PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedSanitizeDesc"
>
Remove hidden data
</p>
</a>
<a
href="change-permissions.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Change Permissions</h3>
<p class="text-gray-400 text-sm">Set PDF permissions</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:changePermissions.name"
>
Change Permissions
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedPermissionsDesc"
>
Set PDF permissions
</p>
</a>
</div>
</section>
@@ -655,11 +809,15 @@
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary
class="cursor-pointer font-semibold text-white flex items-center justify-between"
data-i18n="tools:digitalSignPdf.faqWhatIsQuestion"
>
What is a digital signature?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">
<p
class="mt-3 text-gray-400"
data-i18n="tools:digitalSignPdf.faqWhatIsAnswer"
>
A digital signature is a cryptographic mechanism that verifies the
authenticity and integrity of a document. Unlike a drawn signature,
it uses public key cryptography (X.509 certificates) to prove the
@@ -669,11 +827,15 @@
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary
class="cursor-pointer font-semibold text-white flex items-center justify-between"
data-i18n="tools:digitalSignPdf.faqFormatsQuestion"
>
What certificate formats are supported?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">
<p
class="mt-3 text-gray-400"
data-i18n="tools:digitalSignPdf.faqFormatsAnswer"
>
We support PKCS#12 format certificates (.pfx, .p12) which contain
both your certificate and private key in a single encrypted file.
These are commonly issued by certificate authorities.
@@ -682,11 +844,15 @@
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary
class="cursor-pointer font-semibold text-white flex items-center justify-between"
data-i18n="tools:digitalSignPdf.faqPrivateKeyQuestion"
>
Is my private key safe?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">
<p
class="mt-3 text-gray-400"
data-i18n="tools:digitalSignPdf.faqPrivateKeyAnswer"
>
Yes! All processing happens entirely in your browser. Your
certificate, private key, and PDF files never leave your device or
get uploaded to any server.
@@ -695,11 +861,15 @@
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary
class="cursor-pointer font-semibold text-white flex items-center justify-between"
data-i18n="tools:digitalSignPdf.faqValidReadersQuestion"
>
Will the signature be valid in PDF readers?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">
<p
class="mt-3 text-gray-400"
data-i18n="tools:digitalSignPdf.faqValidReadersAnswer"
>
Yes, the tool creates standard PKCS#7 detached signatures that are
recognized by all major PDF viewers. For full validation, use a
certificate from a trusted Certificate Authority.
src/pages/form-creator.html
+10 -2
View File
@@ -166,7 +166,11 @@
<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>
<span
class="px-4 bg-gray-800 text-gray-400 font-medium"
data-i18n="tools:createPdfForm.orSeparator"
>OR</span
>
</div>
</div>
@@ -176,7 +180,11 @@
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>
<span
class="font-semibold"
data-i18n="tools:createPdfForm.createBlankPdf"
>Create Blank PDF</span
>
</button>
<div id="pageSizeSelector" class="mt-4 hidden">
src/pages/form-filler.html
+14 -7
View File
@@ -121,7 +121,10 @@
>
PDF Form Filler
</h1>
<p class="text-gray-400 mb-4">
<p
class="text-gray-400 mb-4"
data-i18n="tools:pdfFormFiller.uploadHint"
>
Upload a PDF with form fields. Fill them directly in the viewer below,
then click the button to save and download the filled form. Also
supports XFA forms.
@@ -131,12 +134,16 @@
class="mb-6 p-3 bg-blue-900/20 border border-blue-700/50 rounded-lg"
>
<p class="text-sm text-blue-300">
<strong>Note on XFA Forms:</strong> XFA (XML Forms Architecture) is
a legacy format that's only supported by certain PDF viewers like
BentoPDF and Firefox. If you open an XFA PDF in other software and
see blank pages or no form fields, it means that viewer doesn't
support XFA. To view and fill XFA forms properly, use Firefox or
BentoPDF's Form Filler.
<strong data-i18n="tools:pdfFormFiller.xfaNoteTitle"
>Note on XFA Forms:</strong
>
<span data-i18n="tools:pdfFormFiller.xfaNoteDescription"
>XFA (XML Forms Architecture) is a legacy format that's only
supported by certain PDF viewers like BentoPDF and Firefox. If you
open an XFA PDF in other software and see blank pages or no form
fields, it means that viewer doesn't support XFA. To view and fill
XFA forms properly, use Firefox or BentoPDF's Form Filler.</span
>
</p>
</div>
src/pages/json-to-pdf.html
+18 -5
View File
@@ -120,9 +120,12 @@
class="bg-yellow-900/30 border border-yellow-700 rounded-lg p-3 mb-6"
>
<p class="text-yellow-200 text-sm">
<strong>Note:</strong> Only JSON files created by the PDF-to-JSON
converter tool are supported. Standard JSON files from other tools
will not work.
<strong data-i18n="tools:jsonToPdf.noteLabel">Note:</strong>
<span data-i18n="tools:jsonToPdf.noteText"
>Only JSON files created by the PDF-to-JSON converter tool are
supported. Standard JSON files from other tools will not
work.</span
>
</p>
</div>
@@ -141,7 +144,12 @@
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500">Multiple JSON files</p>
<p
class="text-xs text-gray-500"
data-i18n="tools:jsonToPdf.acceptedFormats"
>
Multiple JSON files
</p>
<p
class="text-xs text-gray-500"
data-i18n="upload.filesNeverLeave"
@@ -161,7 +169,12 @@
<!-- File Display Area -->
<div id="fileList" class="mt-4 hidden"></div>
<button id="convertBtn" disabled class="btn-gradient w-full mt-6">
<button
id="convertBtn"
disabled
class="btn-gradient w-full mt-6"
data-i18n="tools:convertToPdf"
>
Convert to PDF
</button>
</div>
src/pages/ocr-pdf.html
+142 -34
View File
@@ -131,29 +131,58 @@
<!-- How it works info box -->
<div class="p-3 bg-gray-900 rounded-lg border border-gray-700 mb-6">
<p class="text-sm text-gray-300">
<strong class="text-white">How it works:</strong>
<strong class="text-white" data-i18n="tools:ocrPdf.howItWorksTitle"
>How it works:</strong
>
</p>
<ul
class="list-disc list-inside text-xs text-gray-400 mt-1 space-y-1"
>
<li>
<strong class="text-white">Extract Text:</strong> Uses Tesseract
OCR to recognize text from scanned images or PDFs.
<strong
class="text-white"
data-i18n="tools:ocrPdf.extractTextLabel"
>Extract Text:</strong
>
<span data-i18n="tools:ocrPdf.extractTextDescription"
>Uses Tesseract OCR to recognize text from scanned images or
PDFs.</span
>
</li>
<li>
<strong class="text-white">Searchable Output:</strong> Creates a
new PDF with an invisible text layer, making your document fully
searchable while preserving the original appearance.
<strong
class="text-white"
data-i18n="tools:ocrPdf.searchableOutputLabel"
>Searchable Output:</strong
>
<span data-i18n="tools:ocrPdf.searchableOutputDescription"
>Creates a new PDF with an invisible text layer, making your
document fully searchable while preserving the original
appearance.</span
>
</li>
<li>
<strong class="text-white">Character Filtering:</strong> Use
whitelists to filter out unwanted characters and improve accuracy
for specific document types (invoices, forms, etc.).
<strong
class="text-white"
data-i18n="tools:ocrPdf.characterFilteringLabel"
>Character Filtering:</strong
>
<span data-i18n="tools:ocrPdf.characterFilteringDescription"
>Use whitelists to filter out unwanted characters and improve
accuracy for specific document types (invoices, forms,
etc.).</span
>
</li>
<li>
<strong class="text-white">Multi-language Support:</strong> Select
multiple languages for documents containing mixed language
content.
<strong
class="text-white"
data-i18n="tools:ocrPdf.multiLanguageSupportLabel"
>Multi-language Support:</strong
>
<span data-i18n="tools:ocrPdf.multiLanguageSupportDescription"
>Select multiple languages for documents containing mixed
language content.</span
>
</li>
</ul>
</div>
@@ -190,7 +219,9 @@
<!-- OCR Options -->
<div id="tool-options" class="hidden mt-6 space-y-4">
<div>
<label class="block mb-2 text-sm font-medium text-gray-300"
<label
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:ocrPdf.languagesInDocument"
>Languages in Document</label
>
<div class="relative">
@@ -199,6 +230,7 @@
id="lang-search"
class="w-full bg-gray-900 border border-gray-600 text-white rounded-lg p-2.5 mb-2"
placeholder="Search for languages..."
data-i18n-placeholder="tools:ocrPdf.searchLanguagesPlaceholder"
/>
<div
id="lang-list"
@@ -208,8 +240,11 @@
</div>
</div>
<p class="text-xs text-gray-500 mt-1">
Selected:
<span id="selected-langs-display" class="font-semibold"
<span data-i18n="tools:ocrPdf.selectedLabel">Selected:</span>
<span
id="selected-langs-display"
class="font-semibold"
data-i18n="tools:ocrPdf.none"
>None</span
>
</p>
@@ -224,7 +259,9 @@
<summary
class="text-sm font-medium text-gray-300 cursor-pointer flex items-center justify-between"
>
<span>Advanced Settings (Recommended to improve accuracy)</span>
<span data-i18n="tools:ocrPdf.advancedSettingsSummary"
>Advanced Settings (Recommended to improve accuracy)</span
>
<i
data-lucide="chevron-down"
class="w-4 h-4 transition-transform details-icon"
@@ -236,15 +273,29 @@
<label
for="ocr-resolution"
class="block mb-1 text-xs font-medium text-gray-400"
data-i18n="tools:ocrPdf.resolutionLabel"
>Resolution</label
>
<select
id="ocr-resolution"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2 text-sm"
>
<option value="2.0">Standard (192 DPI)</option>
<option value="3.0" selected>High (288 DPI)</option>
<option value="4.0">Ultra (384 DPI)</option>
<option
value="2.0"
data-i18n="tools:ocrPdf.resolutionStandard"
>
Standard (192 DPI)
</option>
<option
value="3.0"
selected
data-i18n="tools:ocrPdf.resolutionHigh"
>
High (288 DPI)
</option>
<option value="4.0" data-i18n="tools:ocrPdf.resolutionUltra">
Ultra (384 DPI)
</option>
</select>
</div>
<!-- Binarization -->
@@ -256,7 +307,9 @@
id="ocr-binarize"
class="w-4 h-4 rounded text-indigo-600 bg-gray-700 border-gray-600"
/>
Binarize Image (Enhance Contrast for Clean Scans)
<span data-i18n="tools:ocrPdf.binarizeLabel"
>Binarize Image (Enhance Contrast for Clean Scans)</span
>
</label>
<label
class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer"
@@ -266,37 +319,69 @@
id="ocr-embed-full-fonts"
class="w-4 h-4 rounded text-indigo-600 bg-gray-700 border-gray-600"
/>
Embed Full Fonts (Larger file, better compatibility)
<span data-i18n="tools:ocrPdf.embedFullFontsLabel"
>Embed Full Fonts (Larger file, better compatibility)</span
>
</label>
<!-- Whitelist Presets -->
<div>
<label
for="whitelist-preset"
class="block mb-1 text-xs font-medium text-gray-400"
data-i18n="tools:ocrPdf.whitelistPresetLabel"
>Character Whitelist Preset</label
>
<select
id="whitelist-preset"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2 text-sm mb-2"
>
<option value="">None (All characters)</option>
<option value="alphanumeric">
<option value="" data-i18n="tools:ocrPdf.whitelistNone">
None (All characters)
</option>
<option
value="alphanumeric"
data-i18n="tools:ocrPdf.whitelistAlphanumeric"
>
Alphanumeric + Basic Punctuation
</option>
<option value="numbers-currency">
<option
value="numbers-currency"
data-i18n="tools:ocrPdf.whitelistNumbersCurrency"
>
Numbers + Currency Symbols
</option>
<option value="letters-only">Letters Only (A-Z, a-z)</option>
<option value="numbers-only">Numbers Only (0-9)</option>
<option value="invoice">
<option
value="letters-only"
data-i18n="tools:ocrPdf.whitelistLettersOnly"
>
Letters Only (A-Z, a-z)
</option>
<option
value="numbers-only"
data-i18n="tools:ocrPdf.whitelistNumbersOnly"
>
Numbers Only (0-9)
</option>
<option
value="invoice"
data-i18n="tools:ocrPdf.whitelistInvoice"
>
Invoice/Receipt (Numbers, $, ., -, /)
</option>
<option value="forms">
<option value="forms" data-i18n="tools:ocrPdf.whitelistForms">
Forms (Alphanumeric + Common Symbols)
</option>
<option value="custom">Custom...</option>
<option
value="custom"
data-i18n="tools:ocrPdf.whitelistCustom"
>
Custom...
</option>
</select>
<p class="text-xs text-gray-500 mt-1">
<p
class="text-xs text-gray-500 mt-1"
data-i18n="tools:ocrPdf.whitelistHelp"
>
Only these characters will be recognized. Leave empty for all
characters.
</p>
@@ -306,6 +391,7 @@
<label
for="ocr-whitelist"
class="block mb-1 text-xs font-medium text-gray-400"
data-i18n="tools:ocrPdf.whitelistInputLabel"
>Character Whitelist (Optional)</label
>
<input
@@ -313,8 +399,12 @@
id="ocr-whitelist"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2 text-sm"
placeholder="e.g., abcdefghijklmnopqrstuvwxyz0123456789$.,"
data-i18n-placeholder="tools:ocrPdf.whitelistInputPlaceholder"
/>
<p class="text-xs text-gray-500 mt-1">
<p
class="text-xs text-gray-500 mt-1"
data-i18n="tools:ocrPdf.whitelistHelp"
>
Only these characters will be recognized. Leave empty for all
characters.
</p>
@@ -326,6 +416,7 @@
id="process-btn"
class="btn-gradient w-full disabled:opacity-50"
disabled
data-i18n="tools:ocrPdf.startButton"
>
Start OCR
</button>
@@ -336,7 +427,13 @@
id="ocr-progress"
class="hidden mt-6 p-4 bg-gray-900 border border-gray-700 rounded-lg"
>
<p id="progress-status" class="text-white mb-2">Initializing...</p>
<p
id="progress-status"
class="text-white mb-2"
data-i18n="tools:ocrPdf.progressInitializing"
>
Initializing...
</p>
<div class="w-full bg-gray-700 rounded-full h-4">
<div
id="progress-bar"
@@ -352,8 +449,16 @@
<!-- Results Section -->
<div id="ocr-results" class="hidden mt-6">
<h3 class="text-xl font-bold text-white mb-2">OCR Complete</h3>
<p class="mb-4 text-gray-400">
<h3
class="text-xl font-bold text-white mb-2"
data-i18n="tools:ocrPdf.resultsTitle"
>
OCR Complete
</h3>
<p
class="mb-4 text-gray-400"
data-i18n="tools:ocrPdf.resultsDescription"
>
Your searchable PDF is ready. You can also copy or download the
extracted text below.
</p>
@@ -368,6 +473,7 @@
id="copy-text-btn"
class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 p-2 rounded-md"
title="Copy to Clipboard"
data-i18n-title="tools:ocrPdf.copyToClipboard"
>
<i data-lucide="clipboard-copy" class="w-4 h-4 text-gray-300"></i>
</button>
@@ -376,12 +482,14 @@
<button
id="download-txt-btn"
class="w-full bg-gray-700 text-white font-semibold py-3 rounded-lg hover:bg-gray-600"
data-i18n="tools:ocrPdf.downloadTxt"
>
Download as .txt
</button>
<button
id="download-searchable-pdf"
class="w-full bg-green-600 text-white font-semibold py-3 rounded-lg hover:bg-green-700"
data-i18n="tools:ocrPdf.downloadSearchablePdf"
>
Download Searchable PDF
</button>
src/pages/organize-pdf.html
+5 -1
View File
@@ -196,7 +196,11 @@
</div>
</div>
<button id="process-btn" class="hidden btn-gradient w-full mt-6">
<button
id="process-btn"
class="hidden btn-gradient w-full mt-6"
data-i18n="tools:duplicateOrganize.saveChanges"
>
Save Changes
</button>
</div>
src/pages/pdf-to-json.html
+6 -1
View File
@@ -157,7 +157,12 @@
<!-- File Display Area -->
<div id="fileList" class="mt-4 hidden"></div>
<button id="convertBtn" disabled class="btn-gradient w-full mt-6">
<button
id="convertBtn"
disabled
class="btn-gradient w-full mt-6"
data-i18n="tools:pdfToJson.convertButton"
>
Convert to JSON
</button>
</div>
src/pages/pdf-to-text.html
+4 -7
View File
@@ -129,14 +129,11 @@
class="bg-amber-900/30 border border-amber-700/50 rounded-lg p-3 mb-6"
>
<p class="text-amber-200 text-sm">
<strong>Note:</strong> This tool works ONLY with digitally created
PDFs. For scanned documents or image-based PDFs, use our
<a
href="ocr-pdf.html"
class="text-indigo-400 hover:text-indigo-300 underline"
>OCR PDF tool</a
<strong data-i18n="tools:pdfToText.noteLabel">Note:</strong>
<span data-i18n="tools:pdfToText.noteText"
>This tool works ONLY with digitally created PDFs. For scanned
documents or image-based PDFs, use our OCR PDF tool instead.</span
>
instead.
</p>
</div>
src/pages/repair-pdf.html
+5 -1
View File
@@ -173,7 +173,11 @@
<!-- File Display Area -->
<div id="file-display-area" class="mt-4 space-y-2"></div>
<button id="process-btn" class="btn-gradient w-full mt-6 hidden">
<button
id="process-btn"
class="btn-gradient w-full mt-6 hidden"
data-i18n="tools:repairPdf.name"
>
Repair PDF
</button>
</div>
src/pages/table-of-contents.html
+23 -6
View File
@@ -169,20 +169,26 @@
<!-- Options Section -->
<div class="mt-6 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">
<label
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:tableOfContents.titleLabel"
>
TOC Title
</label>
<input
type="text"
id="toc-title"
value="Table of Contents"
class="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Table of Contents"
data-i18n-placeholder="tools:tableOfContents.name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">
<label
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:tableOfContents.fontSize"
>
Font Size
</label>
<select
@@ -209,7 +215,10 @@
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">
<label
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:tableOfContents.fontFamily"
>
Font Family
</label>
<select
@@ -238,7 +247,11 @@
checked
class="w-4 h-4 accent-blue-500"
/>
<label for="add-bookmark" class="text-sm text-gray-300">
<label
for="add-bookmark"
class="text-sm text-gray-300"
data-i18n="tools:tableOfContents.addBookmark"
>
Add bookmark for TOC page
</label>
</div>
@@ -246,7 +259,11 @@
<!-- Generate Button -->
<button id="generate-btn" disabled class="btn-gradient w-full mt-6">
<span id="generate-btn-text">Generate Table of Contents</span>
<span
id="generate-btn-text"
data-i18n="tools:tableOfContents.generateButton"
>Generate Table of Contents</span
>
</button>
<!-- Status Message -->
src/pages/txt-to-pdf.html
+21 -4
View File
@@ -133,12 +133,14 @@
<button
id="txt-mode-upload-btn"
class="flex-1 btn bg-indigo-600 text-white font-semibold py-2 rounded-md"
data-i18n="tools:textToPdf.uploadFiles"
>
Upload Files
</button>
<button
id="txt-mode-text-btn"
class="flex-1 btn bg-gray-700 text-gray-300 font-semibold py-2 rounded-md"
data-i18n="tools:textToPdf.typeText"
>
Type Text
</button>
@@ -161,7 +163,12 @@
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500">Text files (.txt)</p>
<p
class="text-xs text-gray-500"
data-i18n="tools:textToPdf.acceptedFormats"
>
Text files (.txt)
</p>
<p
class="text-xs text-gray-500"
data-i18n="upload.filesNeverLeave"
@@ -215,6 +222,7 @@
<label
for="font-family"
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:textToPdf.fontFamily"
>Font Family</label
>
<select
@@ -231,6 +239,7 @@
<label
for="font-size"
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:textToPdf.fontSize"
>Font Size</label
>
<input
@@ -246,6 +255,7 @@
<label
for="text-color"
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:textToPdf.textColor"
>Text Color</label
>
<input type="color" id="text-color" value="#000000" />
@@ -254,6 +264,7 @@
<label
for="page-size"
class="block mb-2 text-sm font-medium text-gray-300"
data-i18n="tools:textToPdf.pageSize"
>Page Size</label
>
<select
@@ -312,11 +323,17 @@
<p class="text-xs text-gray-500 mt-3">
<i data-lucide="info" class="inline w-3 h-3"></i>
RTL languages (Arabic, Urdu, Persian, etc.) are automatically detected
and text direction is adjusted.
<span data-i18n="tools:textToPdf.rtlAutoDetectNote"
>RTL languages (Arabic, Urdu, Persian, etc.) are automatically
detected and text direction is adjusted.</span
>
</p>
<button id="process-btn" class="btn-gradient w-full mt-6">
<button
id="process-btn"
class="btn-gradient w-full mt-6"
data-i18n="tools:textToPdf.createButton"
>
Create PDF
</button>
</div>
src/pages/wasm-settings.html
+96 -23
View File
@@ -79,10 +79,16 @@
</span>
</button>
<h1 class="text-2xl font-bold text-white mb-2">
<h1
class="text-2xl font-bold text-white mb-2"
data-i18n="tools:wasmSettings.title"
>
Advanced Features Settings
</h1>
<p class="text-gray-400 mb-6">
<p
class="text-gray-400 mb-6"
data-i18n="tools:wasmSettings.description"
>
Configure external processing modules to enable advanced PDF features.
These modules are optional and licensed separately.
</p>
@@ -98,10 +104,15 @@
></i>
<div>
<p class="text-green-200 text-sm">
<strong>Pre-configured and ready to use.</strong> Advanced
processing modules are loaded automatically from CDN. You can
override the URLs below if you need to use a custom source
(e.g., for air-gapped or self-hosted deployments).
<strong data-i18n="tools:wasmSettings.preconfiguredTitle"
>Pre-configured and ready to use.</strong
>
<span data-i18n="tools:wasmSettings.preconfiguredDescription"
>Advanced processing modules are loaded automatically from
CDN. You can override the URLs below if you need to use a
custom source (e.g., for air-gapped or self-hosted
deployments).</span
>
</p>
</div>
</div>
@@ -113,16 +124,25 @@
<div class="flex items-center justify-between mb-3">
<div>
<h3 class="font-semibold text-white">PyMuPDF</h3>
<p class="text-xs text-gray-400">Document Processing Engine</p>
<p
class="text-xs text-gray-400"
data-i18n="tools:wasmSettings.pymupdfSubtitle"
>
Document Processing Engine
</p>
</div>
<span
id="pymupdf-status"
class="text-xs px-2 py-1 rounded-full bg-gray-600 text-gray-300"
data-i18n="tools:wasmSettings.status.notConfigured"
>
Not Configured
</span>
</div>
<p class="text-sm text-gray-400 mb-3">
<p
class="text-sm text-gray-400 mb-3"
data-i18n="tools:wasmSettings.pymupdfFeatures"
>
Enables: PDF to Text, Markdown, SVG, DOCX, Excel • Extract
Images/Tables • Format Conversion
</p>
@@ -136,12 +156,17 @@
<button
id="pymupdf-test"
class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded-lg text-sm font-medium transition-colors"
data-i18n="tools:wasmSettings.testButton"
>
Test
</button>
</div>
<div class="flex items-center gap-2 mt-2">
<span class="text-xs text-gray-500">Recommended:</span>
<span
class="text-xs text-gray-500"
data-i18n="tools:wasmSettings.recommendedLabel"
>Recommended:</span
>
<code
class="text-xs text-indigo-400 bg-gray-800 px-2 py-1 rounded flex-1 truncate"
>https://cdn.jsdelivr.net/npm/@bentopdf/pymupdf-wasm@0.11.16/</code
@@ -150,6 +175,7 @@
data-copy="https://cdn.jsdelivr.net/npm/@bentopdf/pymupdf-wasm@0.11.16/"
class="copy-btn p-1.5 bg-gray-600 hover:bg-gray-500 rounded text-gray-300 hover:text-white transition-colors"
title="Copy to clipboard"
data-i18n-title="tools:wasmSettings.copyTitle"
>
<i data-lucide="copy" class="w-3.5 h-3.5"></i>
</button>
@@ -161,16 +187,25 @@
<div class="flex items-center justify-between mb-3">
<div>
<h3 class="font-semibold text-white">Ghostscript</h3>
<p class="text-xs text-gray-400">PDF/A Conversion Engine</p>
<p
class="text-xs text-gray-400"
data-i18n="tools:wasmSettings.ghostscriptSubtitle"
>
PDF/A Conversion Engine
</p>
</div>
<span
id="ghostscript-status"
class="text-xs px-2 py-1 rounded-full bg-gray-600 text-gray-300"
data-i18n="tools:wasmSettings.status.notConfigured"
>
Not Configured
</span>
</div>
<p class="text-sm text-gray-400 mb-3">
<p
class="text-sm text-gray-400 mb-3"
data-i18n="tools:wasmSettings.ghostscriptFeatures"
>
Enables: PDF/A-1b, PDF/A-2b, PDF/A-3b Conversion • Font to Outline
</p>
<div class="flex gap-2">
@@ -183,12 +218,17 @@
<button
id="ghostscript-test"
class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded-lg text-sm font-medium transition-colors"
data-i18n="tools:wasmSettings.testButton"
>
Test
</button>
</div>
<div class="flex items-center gap-2 mt-2">
<span class="text-xs text-gray-500">Recommended:</span>
<span
class="text-xs text-gray-500"
data-i18n="tools:wasmSettings.recommendedLabel"
>Recommended:</span
>
<code
class="text-xs text-indigo-400 bg-gray-800 px-2 py-1 rounded flex-1 truncate"
>https://cdn.jsdelivr.net/npm/@bentopdf/gs-wasm@0.1.1/assets/</code
@@ -197,6 +237,7 @@
data-copy="https://cdn.jsdelivr.net/npm/@bentopdf/gs-wasm@0.1.1/assets/"
class="copy-btn p-1.5 bg-gray-600 hover:bg-gray-500 rounded text-gray-300 hover:text-white transition-colors"
title="Copy to clipboard"
data-i18n-title="tools:wasmSettings.copyTitle"
>
<i data-lucide="copy" class="w-3.5 h-3.5"></i>
</button>
@@ -208,16 +249,25 @@
<div class="flex items-center justify-between mb-3">
<div>
<h3 class="font-semibold text-white">CoherentPDF</h3>
<p class="text-xs text-gray-400">Bookmarks & Metadata Engine</p>
<p
class="text-xs text-gray-400"
data-i18n="tools:wasmSettings.cpdfSubtitle"
>
Bookmarks & Metadata Engine
</p>
</div>
<span
id="cpdf-status"
class="text-xs px-2 py-1 rounded-full bg-gray-600 text-gray-300"
data-i18n="tools:wasmSettings.status.notConfigured"
>
Not Configured
</span>
</div>
<p class="text-sm text-gray-400 mb-3">
<p
class="text-sm text-gray-400 mb-3"
data-i18n="tools:wasmSettings.cpdfFeatures"
>
Enables: Split by Bookmarks • Edit Bookmarks • PDF Metadata
</p>
<div class="flex gap-2">
@@ -230,12 +280,17 @@
<button
id="cpdf-test"
class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded-lg text-sm font-medium transition-colors"
data-i18n="tools:wasmSettings.testButton"
>
Test
</button>
</div>
<div class="flex items-center gap-2 mt-2">
<span class="text-xs text-gray-500">Recommended:</span>
<span
class="text-xs text-gray-500"
data-i18n="tools:wasmSettings.recommendedLabel"
>Recommended:</span
>
<code
class="text-xs text-indigo-400 bg-gray-800 px-2 py-1 rounded flex-1 truncate"
>https://cdn.jsdelivr.net/npm/coherentpdf@2.5.5/dist/</code
@@ -244,6 +299,7 @@
data-copy="https://cdn.jsdelivr.net/npm/coherentpdf@2.5.5/dist/"
class="copy-btn p-1.5 bg-gray-600 hover:bg-gray-500 rounded text-gray-300 hover:text-white transition-colors"
title="Copy to clipboard"
data-i18n-title="tools:wasmSettings.copyTitle"
>
<i data-lucide="copy" class="w-3.5 h-3.5"></i>
</button>
@@ -253,12 +309,17 @@
<!-- Action Buttons -->
<div class="flex gap-3 mt-6">
<button id="save-btn" class="btn-gradient flex-1">
<button
id="save-btn"
class="btn-gradient flex-1"
data-i18n="tools:wasmSettings.saveConfiguration"
>
Save Configuration
</button>
<button
id="clear-btn"
class="px-6 py-2.5 bg-red-600/20 hover:bg-red-600/30 text-red-400 rounded-lg font-medium transition-colors border border-red-600/50"
data-i18n="tools:wasmSettings.resetDefaults"
>
Reset to Defaults
</button>
@@ -269,12 +330,19 @@
class="mt-6 p-4 bg-gray-700/30 rounded-lg border border-gray-600/50"
>
<p class="text-xs text-gray-500">
<strong class="text-gray-400">License Notice:</strong> The external
modules (PyMuPDF, Ghostscript, CoherentPDF) are licensed under
AGPL-3.0 or similar copyleft licenses. By configuring and using
these modules, you agree to their respective license terms. BentoPDF
is compatible with any Ghostscript WASM and PyMuPDF WASM
implementation that follows the expected interface.
<strong
class="text-gray-400"
data-i18n="tools:wasmSettings.licenseTitle"
>License Notice:</strong
>
<span data-i18n="tools:wasmSettings.licenseDescription"
>The external modules (PyMuPDF, Ghostscript, CoherentPDF) are
licensed under AGPL-3.0 or similar copyleft licenses. By
configuring and using these modules, you agree to their respective
license terms. BentoPDF is compatible with any Ghostscript WASM
and PyMuPDF WASM implementation that follows the expected
interface.</span
>
</p>
</div>
</div>
@@ -307,13 +375,18 @@
<div
class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
>
<h3 id="alert-title" class="text-xl font-bold text-white mb-2">
<h3
id="alert-title"
class="text-xl font-bold text-white mb-2"
data-i18n="alert.title"
>
Alert
</h3>
<p id="alert-message" class="text-gray-300 mb-6"></p>
<button
id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
data-i18n="common.ok"
>
OK
</button>