a44449aba7
Updated the footer across various HTML pages to include consistent branding, version information, and improved link structure. Enhanced social media links for better accessibility and user engagement. This change aims to provide a cohesive user experience throughout the application.
243 lines
11 KiB
HTML
243 lines
11 KiB
HTML
<!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" />
|
|
|
|
<style>
|
|
/* Hide scrollbar for toolbar overflow */
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Fix for mobile toolbar to prevent movement during drag operations */
|
|
.toolbar-container {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Prevent layout shifts during dragging */
|
|
body.dragging {
|
|
overflow: hidden;
|
|
}
|
|
</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">
|
|
<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="/">BentoPDF</a>
|
|
</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 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>
|
|
</nav>
|
|
|
|
<!-- 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-3 overflow-x-auto scrollbar-hide toolbar-container sm:sticky sm:top-16 sm:z-20">
|
|
<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="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-5 sm:h-6 mx-1"></div>
|
|
|
|
|
|
<!-- Add Blank -->
|
|
<button id="add-blank-page-btn"
|
|
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 Page</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 md:inline">Edit:</span>
|
|
|
|
|
|
<!-- Undo / Redo / Reset -->
|
|
<button id="undo-btn"
|
|
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="undo-2" 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="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="redo-2" 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="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-5 sm:h-6 mx-1"></div>
|
|
|
|
<!-- Selection -->
|
|
<span class="text-gray-400 text-xs sm:text-sm md:inline">Selection:</span>
|
|
|
|
<button id="select-all-btn"
|
|
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="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-5 sm:h-6 mx-1"></div>
|
|
|
|
<!-- Rotate -->
|
|
<span class="text-gray-400 text-xs sm:text-sm md:inline">Rotate:</span>
|
|
<button id="bulk-rotate-left-btn"
|
|
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">Left</span>
|
|
</button>
|
|
|
|
<button id="bulk-rotate-btn"
|
|
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">Right</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 md:inline">Transform:</span>
|
|
|
|
|
|
<!-- Duplicate / Split -->
|
|
<button id="bulk-duplicate-btn"
|
|
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="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 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 md:inline">Download:</span>
|
|
<button id="bulk-download-btn"
|
|
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>
|
|
|
|
<button id="export-pdf-btn"
|
|
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 xl:inline">Export PDF</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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="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"
|
|
onclick="document.getElementById('pdf-file-input').click()">
|
|
<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="event.stopPropagation(); document.getElementById('pdf-file-input').click()"
|
|
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-3 sm: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> |