djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: enhance PDF tools with new features and UI improvements

Browse Source 
- Added 'Extract Attachments' and 'Edit Attachments' functionalities to manage embedded files in PDFs.
- Introduced new splitting options: by bookmarks and by a specified number of pages (N times).
- Updated the user interface to include new options and improved layout for better usability.
- Enhanced the GitHub link display with dynamic star count retrieval.
- Bumped version to 1.4.0 and updated footer to reflect the new version.
- Refactored existing code for better maintainability and added new TypeScript definitions for the new features.
This commit is contained in:
abdullahalam123
2025-11-10 18:41:48 +05:30
parent 4b5b29bf9a
commit 0634600073
20 changed files with 3719 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/pages/pdf-multi-tool.html Normal file
View File

@@ -0,0 +1,153 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PDF Multi Tool - 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 h-screen overflow-hidden">
<!-- Navigation -->
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center">
<img src="../../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="../../index.html">BentoPDF</a>
</span>
<span class="text-gray-400 ml-4">PDF Multi Tool</span>
</div>
<button id="close-tool-btn"
class="flex items-center gap-1 btn bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded">
<i data-lucide="x" class="w-5 h-5"></i> Close
</button>
</div>
</div>
</nav>
<!-- Main Container -->
<div class="flex flex-col h-[calc(100vh-4rem)]">
<!-- Toolbar -->
<div class="bg-gray-800 border-b border-gray-700 p-4 flex flex-wrap items-center gap-2 overflow-x-auto">
<button id="upload-pdfs-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded flex items-center gap-2">
<i data-lucide="upload" class="w-4 h-4"></i> Upload PDFs
</button>
<div class="border-l border-gray-600 h-6 mx-2"></div>
<button id="add-blank-page-btn"
class="flex items-center gap-1 btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm">
<i data-lucide="file-plus" class="w-4 h-4"></i> Add Blank
</button>
<div class="border-l border-gray-600 h-6 mx-2"></div>
<button id="undo-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="rotate-ccw" class="w-4 h-4"></i> Undo
</button>
<button id="redo-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="rotate-cw" class="w-4 h-4"></i> Redo
</button>
<button id="reset-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="refresh-ccw" class="w-4 h-4"></i> Reset
</button>
<div class="border-l border-gray-600 h-6 mx-2"></div>
<span class="text-gray-400 text-sm">Selection:</span>
<button id="select-all-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="check-square" class="w-4 h-4"></i> Select All
</button>
<button id="deselect-all-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="square" class="w-4 h-4"></i> Deselect All
</button>
<div class="border-l border-gray-600 h-6 mx-2"></div>
<span class="text-gray-400 text-sm">Bulk Actions:</span>
<button id="bulk-rotate-left-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="rotate-ccw" class="w-4 h-4"></i> Rotate Left
</button>
<button id="bulk-rotate-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="rotate-cw" class="w-4 h-4"></i> Rotate Right
</button>
<button id="bulk-delete-btn"
class="btn bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="trash-2" class="w-4 h-4"></i> Delete
</button>
<button id="bulk-duplicate-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="copy" class="w-4 h-4"></i> Duplicate
</button>
<button id="bulk-split-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="scissors" class="w-4 h-4"></i> Split
</button>
<button id="bulk-download-btn"
class="btn bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded text-sm flex items-center gap-2">
<i data-lucide="download" class="w-4 h-4"></i> Download Selected
</button>
<div class="flex-1"></div>
<button id="export-pdf-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded flex items-center gap-2">
<i data-lucide="download" class="w-4 h-4"></i> Export PDF
</button>
</div>
<!-- Content Area -->
<div class="flex-1 overflow-auto p-4">
<div id="upload-area" class="hidden border-2 border-dashed border-gray-600 rounded-lg p-12 text-center">
<i data-lucide="upload-cloud" class="w-16 h-16 mx-auto text-gray-400 mb-4"></i>
<p class="text-gray-300 text-lg mb-2">Upload PDF Files</p>
<p class="text-gray-400 text-sm mb-4">Drag and drop PDF files here, or click to select</p>
<input type="file" id="pdf-file-input" accept="application/pdf" multiple class="hidden">
<button onclick="document.getElementById('pdf-file-input').click()"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded">
Select Files
</button>
</div>
<div id="pages-container"
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"></div>
</div>
</div>
<!-- Loading Overlay -->
<div id="loading-overlay" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center">
<div class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4">
<div class="flex items-center justify-center mb-4">
<i data-lucide="loader" class="w-12 h-12 text-indigo-400 animate-spin"></i>
</div>
<p id="loading-text" class="text-white text-center text-lg mb-4">Rendering pages...</p>
<div class="w-full bg-gray-700 rounded-full h-2.5">
<div id="loading-progress" class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300"
style="width: 0%"></div>
</div>
</div>
</div>
<!-- Modal -->
<div id="modal" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center">
<div class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4 border border-gray-700">
<div class="flex items-center justify-center mb-4">
<div id="modal-icon"></div>
</div>
<h3 id="modal-title" class="text-xl font-bold text-white text-center mb-2"></h3>
<p id="modal-message" class="text-gray-300 text-center mb-6"></p>
<button id="modal-close-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded">
Close
</button>
</div>
</div>
<!-- Hidden File Input -->
<input type="file" id="insert-pdf-input" accept="application/pdf" class="hidden">
<!-- Scripts -->
<script type="module" src="../js/logic/pdf-multi-tool.ts"></script>
</body>
</html>