mirror of
https://github.com/alam00000/bentopdf.git
synced 2026-11-09 09:04:18 +01:00
sheing-google
4a23dabd52
This commit introduces a new feature to the "Organize PDF" tool that allows users to reorder pages by providing a comma-separated string of page numbers. An "Advanced Settings" section has been added to the UI, containing a text input for the page order and an "Apply Order" button. The implementation includes validation for the input and updates the page thumbnail grid accordingly.
452 lines
16 KiB
HTML
452 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<title>Organize PDF Online Free - Organize PDF Tool | BentoPDF</title>
|
|
<meta
|
|
name="title"
|
|
content="Organize PDF Online Free - Organize PDF Tool | BentoPDF"
|
|
/>
|
|
<meta
|
|
name="description"
|
|
content="★ Organize PDF online free - Organize PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure"
|
|
/>
|
|
<meta name="keywords" content="organize pdf, reorder pages, arrange pdf" />
|
|
<meta name="author" content="BentoPDF" />
|
|
<meta
|
|
name="robots"
|
|
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
|
|
/>
|
|
|
|
<!-- Canonical URL -->
|
|
<link rel="canonical" href="https://www.bentopdf.com/organize-pdf.html" />
|
|
|
|
<!-- Open Graph / Facebook / LinkedIn -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://www.bentopdf.com/organize-pdf" />
|
|
<meta
|
|
property="og:title"
|
|
content="Organize PDF Online Free - Organize PDF Tool | BentoPDF"
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="★ Organize PDF online free - Organize PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure"
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="https://www.bentopdf.com/images/og-organize-pdf.png"
|
|
/>
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:site_name" content="BentoPDF" />
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:url" content="https://www.bentopdf.com/organize-pdf" />
|
|
<meta name="twitter:title" content="Organize PDF Free" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="★ Organize PDF online free - Organize PDFs easily ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fas"
|
|
/>
|
|
<meta
|
|
name="twitter:image"
|
|
content="https://www.bentopdf.com/images/twitter-organize-pdf.png"
|
|
/>
|
|
<meta name="twitter:site" content="@BentoPDF" />
|
|
|
|
<!-- Mobile Web App -->
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-title" content="Organize PDF" />
|
|
|
|
<title>Duplicate and Organize PDF Pages - BentoPDF</title>
|
|
<meta
|
|
name="description"
|
|
content="Reorder, duplicate, and organize PDF pages. Free and secure."
|
|
/>
|
|
|
|
<link href="/src/css/styles.css" rel="stylesheet" />
|
|
|
|
<!-- Web App Manifest -->
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
|
|
<!-- Favicons -->
|
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="192x192"
|
|
href="/images/favicon-192x192.png"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="512x512"
|
|
href="/images/favicon-512x512.png"
|
|
/>
|
|
<link
|
|
rel="apple-touch-icon"
|
|
sizes="180x180"
|
|
href="/images/apple-touch-icon.png"
|
|
/>
|
|
<link rel="icon" href="/favicon.ico" sizes="32x32" />
|
|
</head>
|
|
|
|
<body class="antialiased bg-gray-900">
|
|
{{> navbar }}
|
|
|
|
<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"
|
|
>
|
|
Organize PDF Pages Free - Reorder PDFs Online
|
|
</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>
|
|
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
|
|
Your files never leave your device.
|
|
</p>
|
|
</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>
|
|
|
|
<!-- Advanced Settings -->
|
|
<div id="advanced-settings" class="hidden mt-6">
|
|
<h3 class="text-lg font-semibold text-white mb-2">Advanced Settings</h3>
|
|
<div class="bg-gray-700 p-4 rounded-lg">
|
|
<label for="page-order-input" class="block text-sm font-medium text-gray-300 mb-2">Page Order (comma-separated)</label>
|
|
<div class="flex gap-2">
|
|
<input type="text" id="page-order-input" class="w-full bg-gray-900 text-white rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 border border-gray-600" placeholder="e.g., 3,1,4,2">
|
|
<button id="apply-order-btn" class="btn-secondary">Apply Order</button>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<p
|
|
id="loader-text"
|
|
class="text-white text-lg font-medium"
|
|
data-i18n="loader.processing"
|
|
data-i18n="loader.processing"
|
|
>
|
|
Processing...
|
|
</p>
|
|
</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"
|
|
>
|
|
<h3
|
|
id="alert-title"
|
|
class="text-xl font-bold text-white mb-2"
|
|
data-i18n="alert.title"
|
|
data-i18n="alert.title"
|
|
>
|
|
Alert
|
|
</h3>
|
|
<p id="alert-message" class="text-gray-300 mb-6"></p>
|
|
<button
|
|
id="alert-ok"
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How It Works Section -->
|
|
<section class="max-w-4xl mx-auto px-4 py-12">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">
|
|
How It Works
|
|
</h2>
|
|
<div class="space-y-6">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
|
|
>
|
|
1
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
|
|
<p class="text-gray-400">
|
|
Click or drag and drop your file to begin
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
|
|
>
|
|
2
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-white mb-1">Process</h3>
|
|
<p class="text-gray-400">Click the process button to start</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
|
|
>
|
|
3
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-white mb-1">Download</h3>
|
|
<p class="text-gray-400">Save your processed file instantly</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Related Tools Section -->
|
|
<section class="max-w-6xl mx-auto px-4 py-12">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">
|
|
Related PDF Tools
|
|
</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
<a
|
|
href="merge-pdf.html"
|
|
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
|
|
>
|
|
<h3 class="text-white font-semibold mb-1">Merge Pdf</h3>
|
|
<p class="text-gray-400 text-sm">Free online merge pdf tool</p>
|
|
</a>
|
|
<a
|
|
href="split-pdf.html"
|
|
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
|
|
>
|
|
<h3 class="text-white font-semibold mb-1">Split Pdf</h3>
|
|
<p class="text-gray-400 text-sm">Free online split pdf tool</p>
|
|
</a>
|
|
<a
|
|
href="rotate-pdf.html"
|
|
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
|
|
>
|
|
<h3 class="text-white font-semibold mb-1">Rotate Pdf</h3>
|
|
<p class="text-gray-400 text-sm">Free online rotate pdf tool</p>
|
|
</a>
|
|
<a
|
|
href="delete-pages.html"
|
|
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
|
|
>
|
|
<h3 class="text-white font-semibold mb-1">Delete Pages</h3>
|
|
<p class="text-gray-400 text-sm">Free online delete pages tool</p>
|
|
</a>
|
|
<a
|
|
href="extract-pages.html"
|
|
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
|
|
>
|
|
<h3 class="text-white font-semibold mb-1">Extract Pages</h3>
|
|
<p class="text-gray-400 text-sm">Free online extract pages tool</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section class="max-w-4xl mx-auto px-4 py-12">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
<div class="space-y-4">
|
|
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
|
|
<summary
|
|
class="cursor-pointer font-semibold text-white flex items-center justify-between"
|
|
>
|
|
Is organize pdf really free?
|
|
<i data-lucide="chevron-down" class="w-5 h-5"></i>
|
|
</summary>
|
|
<p class="mt-3 text-gray-400">
|
|
Yes! BentoPDF is 100% free with no hidden fees, no signup required,
|
|
and unlimited file processing.
|
|
</p>
|
|
</details>
|
|
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
|
|
<summary
|
|
class="cursor-pointer font-semibold text-white flex items-center justify-between"
|
|
>
|
|
Are my files private and secure?
|
|
<i data-lucide="chevron-down" class="w-5 h-5"></i>
|
|
</summary>
|
|
<p class="mt-3 text-gray-400">
|
|
Absolutely! All processing happens in your browser. Your files never
|
|
leave your device, ensuring complete privacy.
|
|
</p>
|
|
</details>
|
|
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
|
|
<summary
|
|
class="cursor-pointer font-semibold text-white flex items-center justify-between"
|
|
>
|
|
Is there a file size limit?
|
|
<i data-lucide="chevron-down" class="w-5 h-5"></i>
|
|
</summary>
|
|
<p class="mt-3 text-gray-400">
|
|
No! Process files of any size, as many times as you want, completely
|
|
free.
|
|
</p>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
{{> footer }}
|
|
<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/js/utils/simple-mode-footer.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>
|
|
|
|
<!-- JSON-LD Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "Organize PDF - BentoPDF",
|
|
"applicationCategory": "PDF Tool",
|
|
"operatingSystem": "Any - Web Browser",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "USD"
|
|
},
|
|
"aggregateRating": {
|
|
"@type": "AggregateRating",
|
|
"ratingValue": "4.6",
|
|
"ratingCount": "3604"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "HowTo",
|
|
"name": "How to organize online",
|
|
"description": "Learn how to organize using BentoPDF",
|
|
"step": [
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 1,
|
|
"name": "Upload File",
|
|
"text": "Click or drag and drop your file"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 2,
|
|
"name": "Process",
|
|
"text": "Click the process button"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 3,
|
|
"name": "Download",
|
|
"text": "Download your processed file"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "Home",
|
|
"item": "https://www.bentopdf.com"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "Organize PDF",
|
|
"item": "https://www.bentopdf.com/organize-pdf"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|