2025-12-11 19:34:14 +05:30
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > Duplicate and Organize PDF Pages - BentoPDF< / title >
< meta name = "description" content = "Reorder, duplicate, and organize PDF pages. Free and secure." >
< link rel = "icon" type = "image/png" href = "/images/favicon.svg" / >
< link rel = "alternate" hreflang = "en" href = "/en/organize-pdf.html" / >
2025-12-12 08:48:47 +07:00
< link rel = "alternate" hreflang = "de" href = "/de/organize-pdf.html" / >
2025-12-12 08:49:23 +07:00
< link rel = "alternate" hreflang = "vi" href = "/vi/organize-pdf.html" / >
2025-12-12 08:48:47 +07:00
< link rel = "alternate" hreflang = "x-default" href = "/en/organize-pdf.html" / >
< link href = "/src/css/styles.css" rel = "stylesheet" / >
2025-12-12 00:19:24 +05:30
< link rel = "icon" href = "/favicon.ico" sizes = "any" / >
2025-12-11 19:34:14 +05:30
< / head >
< body class = "antialiased bg-gray-900" >
< 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 cursor-pointer" id = "home-logo" >
2025-12-14 14:35:26 +05:45
< img src = "/images/favicon.svg" alt = "Bento PDF Logo" class = "h-8 w-8" / >
2025-12-11 19:34:14 +05:30
< span class = "text-white font-bold text-xl ml-2" > < a href = "/" > BentoPDF< / a > < / span >
< / div >
< div class = "hidden md:flex items-center space-x-8 text-white" >
< a href = "/" class = "nav-link" data-i18n = "nav.home" > Home< / a >
< a href = "./about.html" class = "nav-link" > About< / a >
< a href = "/" class = "nav-link" data-i18n = "nav.allTools" > All Tools< / a >
< / div >
< / div >
< / div >
< / nav >
< div id = "uploader" class = "min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900" >
< div id = "tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
< button id = "back-to-tools"
class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
< i data-lucide = "arrow-left" class = "cursor-pointer" > < / i >
< span class = "cursor-pointer" > Back to Tools< / span >
< / button >
< h1 class = "text-2xl font-bold text-white mb-2" data-i18n = "tools:duplicateOrganize.name" > Duplicate and Organize PDF< / h1 >
< p class = "text-gray-400 mb-6" data-i18n = "tools:duplicateOrganize.subtitle" >
Drag pages to reorder them. Use the < i data-lucide = "copy-plus"
class="inline-block w-4 h-4 mx-1 align-text-bottom text-green-500">< / i > icon to duplicate a page or
the < i data-lucide = "x-circle" class = "inline-block w-4 h-4 mx-1 align-text-bottom text-red-400" > < / i > icon
to
delete it.
< / p >
<!-- Drop Zone -->
< div id = "drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
< div class = "flex flex-col items-center justify-center pt-5 pb-6" >
< i data-lucide = "upload-cloud" class = "w-10 h-10 mb-3 text-gray-400" > < / i >
< p class = "mb-2 text-sm text-gray-400" > < span class = "font-semibold" data-i18n = "upload.clickToSelect" > Click to select a file< / span > < span data-i18n = "upload.orDragAndDrop" > or drag and drop< / span > < / p >
< p class = "text-xs text-gray-500" > PDF Documents< / p >
2025-12-11 19:40:57 +05:30
< p class = "text-xs text-gray-500" data-i18n = "upload.filesNeverLeave" > Your files never leave your device.< / p >
2025-12-11 19:34:14 +05:30
< / div >
< input id = "file-input" type = "file" class = "absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf">
< / div >
<!-- File Display -->
< div id = "file-display-area" class = "mt-4 space-y-2" > < / div >
<!-- Page Grid (shown after file upload) -->
< div id = "page-grid" class = "hidden grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 my-6" > < / div >
< button id = "process-btn" class = "hidden btn-gradient w-full mt-6" > Save Changes< / button >
< / div >
< / div >
< div id = "loader-modal" class = "hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50" >
< div 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 >
2025-12-11 19:40:57 +05:30
< p id = "loader-text" class = "text-white text-lg font-medium" data-i18n = "loader.processing" data-i18n = "loader.processing" > Processing...< / p >
2025-12-11 19:34:14 +05:30
< / div >
< / div >
< div id = "alert-modal" class = "fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden" >
< div class = "bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700" >
2025-12-11 19:40:57 +05:30
< h3 id = "alert-title" class = "text-xl font-bold text-white mb-2" data-i18n = "alert.title" data-i18n = "alert.title" > Alert< / h3 >
2025-12-11 19:34:14 +05:30
< p id = "alert-message" class = "text-gray-300 mb-6" > < / p >
< button id = "alert-ok"
2025-12-11 19:40:57 +05:30
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg" data-i18n="alert.ok" data-i18n="alert.ok">OK< / button >
2025-12-11 19:34:14 +05:30
< / div >
< / div >
< script type = "module" src = "/src/js/utils/lucide-init.ts" > < / script >
< script type = "module" src = "/src/js/utils/full-width.ts" > < / script >
< script type = "module" src = "/src/version.ts" > < / script >
< script type = "module" src = "/src/js/logic/organize-pdf-page.ts" > < / script >
< script type = "module" src = "/src/js/mobileMenu.ts" > < / script >
< script type = "module" src = "/src/js/main.ts" > < / script >
< / body >
< / html >
