mirror of
https://github.com/alam00000/bentopdf.git
synced 2025-12-23 22:28:49 -05:00
style: enhance PDF multi-tool UI with responsive design and scrollbar adjustments
- Added custom CSS to hide scrollbars for better aesthetics in the toolbar. - Updated button styles for improved responsiveness and consistency across different screen sizes. - Enhanced layout and spacing for toolbar elements and upload area for a cleaner user experience. - Adjusted text sizes and padding for better readability and usability.
This commit is contained in:
abdullahalam123
@@ -594,7 +594,7 @@
|
||||
© 2025 BentoPDF. All rights reserved.
|
||||
</p>
|
||||
<p class="text-gray-500 text-xs mt-2">
|
||||
Version <span id="app-version">1.4.0</span>
|
||||
Version <span id="app-version">1.5.0</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -94,7 +94,7 @@ const init = () => {
|
||||
© 2025 BentoPDF. All rights reserved.
|
||||
</p>
|
||||
<p class="text-gray-500 text-xs mt-2">
|
||||
Version <span id="app-version-simple">1.4.0</span>
|
||||
Version <span id="app-version-simple">1.5.0</span>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -7,9 +7,22 @@
|
||||
<title>PDF Multi Tool - BentoPDF</title>
|
||||
<link rel="icon" type="image/png" href="../../images/favicon.svg" />
|
||||
<link href="../../src/css/styles.css" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
/* Hide scrollbar for toolbar overflow */
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
</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">
|
||||
@@ -19,11 +32,11 @@
|
||||
<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>
|
||||
<span class="text-gray-400 ml-3 text-sm sm:text-base">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
|
||||
class="flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="x" class="w-4 h-4 sm:w-5 sm:h-5"></i> Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,105 +44,145 @@
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="flex flex-col h-[calc(100vh-4rem)]">
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="bg-gray-800 border-b border-gray-700 p-2 sm:p-4 overflow-x-auto">
|
||||
<div class="flex flex-wrap items-center gap-1 sm:gap-2 min-w-max">
|
||||
<div class="bg-gray-800 border-b border-gray-700 p-2 sm:p-3 overflow-x-auto scrollbar-hide">
|
||||
<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">
|
||||
|
||||
<!-- Upload -->
|
||||
<button id="upload-pdfs-btn"
|
||||
class="btn bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded flex items-center gap-1 sm:gap-2 text-sm">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="upload" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden sm:inline">Upload PDFs</span>
|
||||
<span class="sm:hidden">Upload</span>
|
||||
</button>
|
||||
<div class="border-l border-gray-600 h-6 mx-1"></div>
|
||||
|
||||
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
|
||||
|
||||
<!-- Add Blank -->
|
||||
<button id="add-blank-page-btn"
|
||||
class="flex items-center gap-1 btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="file-plus" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden sm:inline">Add Blank</span>
|
||||
<span class="hidden sm:inline">Add Blank Page</span>
|
||||
</button>
|
||||
<div class="border-l border-gray-600 h-6 mx-1"></div>
|
||||
|
||||
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
|
||||
<span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Edit:</span>
|
||||
|
||||
|
||||
<!-- Undo / Redo / Reset -->
|
||||
<button id="undo-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="rotate-ccw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden lg:inline">Undo</span>
|
||||
</button>
|
||||
|
||||
<button id="redo-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="rotate-cw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden lg:inline">Redo</span>
|
||||
</button>
|
||||
|
||||
<button id="reset-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="refresh-ccw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden lg:inline">Reset</span>
|
||||
</button>
|
||||
<div class="border-l border-gray-600 h-6 mx-1"></div>
|
||||
|
||||
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
|
||||
|
||||
<!-- Selection -->
|
||||
<span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Selection:</span>
|
||||
|
||||
<button id="select-all-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="check-square" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden lg:inline">Select All</span>
|
||||
</button>
|
||||
|
||||
<button id="deselect-all-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="square" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden lg:inline">Deselect All</span>
|
||||
</button>
|
||||
<div class="border-l border-gray-600 h-6 mx-1"></div>
|
||||
<span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Bulk:</span>
|
||||
|
||||
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
|
||||
|
||||
<!-- Rotate -->
|
||||
<span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Rotate:</span>
|
||||
<button id="bulk-rotate-left-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="rotate-ccw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden xl:inline">Rotate Left</span>
|
||||
<span class="hidden xl:inline">Left</span>
|
||||
</button>
|
||||
|
||||
<button id="bulk-rotate-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="rotate-cw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden xl:inline">Rotate Right</span>
|
||||
</button>
|
||||
<button id="bulk-delete-btn"
|
||||
class="btn bg-red-600 hover:bg-red-700 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
<i data-lucide="trash-2" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden xl:inline">Delete</span>
|
||||
<span class="hidden xl:inline">Right</span>
|
||||
</button>
|
||||
|
||||
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
|
||||
|
||||
<!-- Duplicate / Split -->
|
||||
<button id="bulk-duplicate-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="copy" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden xl:inline">Duplicate</span>
|
||||
</button>
|
||||
|
||||
<button id="bulk-split-btn"
|
||||
class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="scissors" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden xl:inline">Split</span>
|
||||
</button>
|
||||
|
||||
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
|
||||
<span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Clear:</span>
|
||||
|
||||
|
||||
<!-- Delete -->
|
||||
<button id="bulk-delete-btn"
|
||||
class="flex items-center gap-1 sm:gap-2 bg-red-500 hover:bg-red-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="trash-2" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden xl:inline">Delete</span>
|
||||
</button>
|
||||
|
||||
<div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
|
||||
|
||||
<!-- Download -->
|
||||
<span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Download:</span>
|
||||
<button id="bulk-download-btn"
|
||||
class="btn bg-green-600 hover:bg-green-700 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-green-600 hover:bg-green-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="download" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden xl:inline">Download Selected</span>
|
||||
</button>
|
||||
<div class="flex-1 min-w-[20px]"></div>
|
||||
|
||||
<button id="export-pdf-btn"
|
||||
class="btn bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded flex items-center gap-1 sm:gap-2 text-sm">
|
||||
class="flex items-center gap-1 sm:gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
|
||||
<i data-lucide="download" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden sm:inline">Export PDF</span>
|
||||
<span class="sm:hidden">Export</span>
|
||||
<span class="hidden xl:inline">Export PDF</span>
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
<div class="flex-1 overflow-auto p-3 sm:p-4">
|
||||
<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">
|
||||
<i data-lucide="upload-cloud" class="w-12 h-12 sm:w-16 sm:h-16 mx-auto text-gray-400 mb-3 sm:mb-4"></i>
|
||||
<p class="text-gray-300 text-base sm:text-lg mb-1 sm:mb-2">Upload PDF Files</p>
|
||||
<p class="text-gray-400 text-xs sm:text-sm mb-3 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">
|
||||
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 sm:px-6 py-2 rounded text-sm sm:text-base">
|
||||
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>
|
||||
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user