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 > Delete PDF Pages - BentoPDF< / title >
< meta name = "description" content = "Remove specific pages from your PDF file. Free and secure." >
< link rel = "icon" type = "image/png" href = "/images/favicon.svg" / >
< link rel = "alternate" hreflang = "en" href = "/en/delete-pages.html" / >
2025-12-12 08:49:23 +07:00
< link rel = "alternate" hreflang = "de" href = "/de/delete-pages.html" / >
< link rel = "alternate" hreflang = "vi" href = "/vi/delete-pages.html" / >
2025-12-11 19:34:14 +05:30
< link rel = "alternate" hreflang = "x-default" href = "/en/delete-pages.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:deletePages.name" > Delete Pages< / h1 >
< p class = "text-gray-400 mb-6" data-i18n = "tools:deletePages.subtitle" > Remove specific pages or ranges of pages from your PDF file.< / p >
< 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 >
< / 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 >
< div id = "file-display-area" class = "mt-4 space-y-2" > < / div >
< div id = "delete-options" class = "hidden mt-6" >
< p class = "mb-2 font-medium text-white" > Total Pages: < span id = "total-pages" > < / span > < / p >
< label for = "pages-to-delete" class = "block mb-2 text-sm font-medium text-gray-300" > Enter pages to delete
(e.g., 2, 4-6, 9):< / label >
< input type = "text" id = "pages-to-delete"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 mb-4"
placeholder="e.g., 2, 4-6, 9">
< div id = "delete-pages-preview" class = "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 my-6" > < / div >
< button id = "process-btn" class = "btn-gradient w-full" > Delete Pages & Download< / button >
< / div >
< / 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/delete-pages-page.ts" > < / script >
< script type = "module" src = "/src/js/mobileMenu.ts" > < / script >
< script type = "module" src = "/src/js/main.ts" > < / script >
< / body >
< / html >
