refactor: streamline HTML structure and enhance UI components
- Cleaned up the HTML structure in index.html and pdf-multi-tool.html for better readability and maintainability. - Improved the user interface of the PDF multi-tool with responsive button designs and better layout. - Added new CSS styles for button states and cursor behavior. - Updated README with corrected Docker deployment link. - Refactored JavaScript logic to utilize new helper functions for formatting star counts. - Commented out unused attachment functionalities in the logic files for future integration.
This commit is contained in:
abdullahalam123
@@ -32,70 +32,88 @@
|
||||
<!-- 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 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">
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
<div class="border-l border-gray-600 h-6 mx-1"></div>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</button>
|
||||
<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">
|
||||
<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">
|
||||
<i data-lucide="scissors" class="w-3 h-3 sm:w-4 sm:h-4"></i>
|
||||
<span class="hidden xl:inline">Split</span>
|
||||
</button>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
|
||||
Reference in New Issue
Block a user