split.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#f7f8ff" />
  <meta name="description" content="Split PDF files and extract selected pages in your browser with PDFix." />
  <title>Split PDF Files Online — PDFix</title>
  <style>
    :root {
      --bg:#f7f8ff; --ink:#17182d; --muted:#71738a; --line:#e7e8f2;
      --primary:#635bff; --primary-dark:#4c43e8; --green:#119b82; --danger:#d94765;
      --shadow:0 18px 55px rgba(47,43,112,.09);
    }
    *{box-sizing:border-box}
    body{margin:0;min-height:100vh;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;background:radial-gradient(circle at 85% 5%,rgba(177,171,255,.19),transparent 25rem),radial-gradient(circle at 4% 35%,rgba(115,221,211,.12),transparent 22rem),var(--bg)}
    a{color:inherit;text-decoration:none} button,input{font:inherit} button{cursor:pointer}
    .container{width:min(1040px,calc(100% - 32px));margin:0 auto}
    header{padding:20px 0}.nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
    .brand{display:inline-flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:850;letter-spacing:-1px}
    .brand-mark{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,#766dff,#4c43e8);box-shadow:0 8px 20px rgba(99,91,255,.25)}
    .brand-mark svg{width:23px;height:23px}.brand-name span{color:var(--primary)}
    .back-link{color:#65677d;font-weight:650;font-size:.92rem}.back-link:hover{color:var(--primary)}
    main{padding:42px 0 70px}.intro{text-align:center;max-width:700px;margin:0 auto 28px}
    .eyebrow{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border:1px solid #e4e1ff;border-radius:99px;background:rgba(255,255,255,.8);color:#5a52e9;font-size:.82rem;font-weight:750}
    h1{margin:18px 0 12px;font-size:clamp(2.4rem,5vw,4rem);line-height:1.06;letter-spacing:-2.7px}h1 span{color:var(--primary)}
    .intro p{margin:0;color:var(--muted);font-size:1.05rem}
    .workspace{max-width:820px;margin:0 auto;border:1px solid rgba(99,91,255,.14);border-radius:24px;padding:12px;background:rgba(255,255,255,.9);box-shadow:var(--shadow)}
    .dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:210px;padding:26px 18px;text-align:center;border:2px dashed #cbc8ff;border-radius:17px;background:linear-gradient(135deg,rgba(238,237,255,.72),rgba(239,253,251,.5));transition:.2s ease}
    .dropzone.dragover{border-color:var(--primary);background:#efedff;transform:scale(.995)}
    .upload-icon{width:54px;height:54px;display:grid;place-items:center;margin-bottom:13px;border-radius:17px;color:var(--primary);background:#fff;box-shadow:0 7px 18px rgba(71,64,160,.1)}
    .upload-icon svg{width:28px;height:28px}.dropzone strong{font-size:1.1rem}.dropzone p{margin:5px 0 16px;color:var(--muted);font-size:.9rem}
    .btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;border-radius:13px;font-weight:750;transition:.2s ease}
    .btn-primary{color:#fff;background:var(--primary);box-shadow:0 8px 18px rgba(99,91,255,.22)}.btn-primary:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}
    .btn-light{color:#4b4d64;background:#fff;border:1px solid var(--line)}.btn-light:hover{border-color:#c9c5ff;color:var(--primary)}
    button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}input[type=file]{display:none}
    .file-panel{display:none;padding:22px 10px 8px}.file-panel.visible{display:block}
    .file-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff}
    .file-icon{width:42px;height:46px;display:grid;place-items:center;border-radius:11px;color:#e6536a;background:#fff0f2}.file-icon svg{width:23px;height:23px}
    .file-meta{min-width:0}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:.92rem}.file-size{color:var(--muted);font-size:.8rem;margin-top:3px}
    .controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
    .field{padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff}.field label{display:block;margin-bottom:8px;font-size:.9rem;font-weight:750}
    .field input,.field select{width:100%;border:1px solid #dfe0ec;border-radius:10px;padding:11px 12px;outline:none;background:#fff;color:var(--ink)}
    .field input:focus,.field select:focus{border-color:#aaa5ff;box-shadow:0 0 0 3px rgba(99,91,255,.1)}
    .hint{margin:7px 0 0;color:var(--muted);font-size:.8rem}
    .panel-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:17px}
    .privacy{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.82rem}.privacy svg{width:17px;height:17px;color:var(--green);flex-shrink:0}
    .status{display:none;margin-top:17px;padding:13px 15px;border-radius:12px;font-size:.9rem}.status.show{display:block}.status.info{background:#efedff;color:#4c43c9}.status.success{background:#e6fbf3;color:#087d68}.status.error{background:#fff0f2;color:#b52b49}
    .tips{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-width:820px;margin:24px auto 0}
    .tip{padding:18px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.72)}.tip b{display:block;margin-bottom:5px;font-size:.92rem}.tip p{margin:0;color:var(--muted);font-size:.84rem}
    footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted);font-size:.85rem}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
    .toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,18px);opacity:0;pointer-events:none;padding:12px 17px;border-radius:13px;background:#20213a;color:#fff;box-shadow:var(--shadow);z-index:10;transition:.22s ease;max-width:calc(100% - 28px);text-align:center;font-size:.9rem}.toast.show{opacity:1;transform:translate(-50%,0)}
    @media(max-width:650px){main{padding-top:30px}h1{letter-spacing:-1.8px}.tips{grid-template-columns:1fr}.controls{grid-template-columns:1fr}.file-row{grid-template-columns:auto minmax(0,1fr)}.panel-actions{align-items:stretch;flex-direction:column}.panel-actions .btn{width:100%}}
  </style>
</head>
<body>
<header><div class="container nav">
  <a class="brand" href="index.html" aria-label="PDFix homepage">
    <span class="brand-mark"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 3.5h7l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 20V5A1.5 1.5 0 0 1 7.5 3.5Z" stroke="currentColor" stroke-width="1.8"/><path d="M14 3.8V8h4M8.5 12h7M8.5 15.5h7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
    <span class="brand-name">PDF<span>ix</span></span>
  </a>
  <a class="back-link" href="index.html">← Back to all tools</a>
</div></header>

<main><div class="container">
  <div class="intro">
    <div class="eyebrow">✦ PDFix PDF tools</div>
    <h1>Split <span>PDF files</span></h1>
    <p>Extract the pages you need from a PDF. Enter page numbers or a range, then download your selected pages as a new PDF.</p>
  </div>

  <div class="workspace">
    <div class="dropzone" id="dropzone" tabindex="0" role="button" aria-label="Choose or drop a PDF file">
      <div class="upload-icon"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 14.5v4A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
      <strong>Drop one PDF file here</strong>
      <p>Select a PDF to extract specific pages.</p>
      <button type="button" class="btn btn-primary" id="chooseFile">Select PDF file <span aria-hidden="true">↑</span></button>
      <input id="fileInput" type="file" accept=".pdf,application/pdf" />
    </div>

    <div class="file-panel" id="filePanel">
      <div class="file-row">
        <div class="file-icon"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6.5 3.5h8l4 4V20a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5.5 20V5A1.5 1.5 0 0 1 7 3.5Z" stroke="currentColor" stroke-width="1.7"/><path d="M14.5 3.8V8h4M8 12h8M8 15h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
        <div class="file-meta"><div class="file-name" id="fileName">document.pdf</div><div class="file-size" id="fileSize"></div></div>
        <button class="btn btn-light" id="changeFile" type="button">Change</button>
      </div>

      <div class="controls">
        <div class="field">
          <label for="pageRange">Pages to extract</label>
          <input id="pageRange" type="text" placeholder="e.g. 1-3, 5, 8-10" autocomplete="off" />
          <p class="hint">Use commas for separate pages and hyphens for ranges.</p>
        </div>
        <div class="field">
          <label for="splitMode">Output mode</label>
          <select id="splitMode">
            <option value="selected">One PDF with selected pages</option>
            <option value="each">Separate PDF for each selected page</option>
          </select>
          <p class="hint">For separate files, each selected page downloads individually.</p>
        </div>
      </div>
      <div class="panel-actions">
        <div class="privacy"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3 19 6v5c0 4.5-2.9 7.7-7 10-4.1-2.3-7-5.5-7-10V6l7-3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> Your PDF is processed in your browser.</div>
        <button type="button" class="btn btn-primary" id="splitBtn" disabled>Split PDF <span aria-hidden="true">→</span></button>
      </div>
      <div class="status" id="status" role="status" aria-live="polite"></div>
    </div>
  </div>

  <div class="tips">
    <article class="tip"><b>① Choose a PDF</b><p>Select the document whose pages you want to extract.</p></article>
    <article class="tip"><b>② Enter page numbers</b><p>For example, type 1-3, 5 to select pages 1, 2, 3, and 5.</p></article>
    <article class="tip"><b>③ Download your pages</b><p>Save the extracted pages as one PDF or as separate files.</p></article>
  </div>
</div></main>

<footer><div class="container footer-inner"><a class="brand" href="index.html"><span class="brand-name">PDF<span>ix</span></span></a><span>© <span id="year"></span> PDFix · Your documents, made simple.</span></div></footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>

<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
<script>
  const fileInput = document.getElementById('fileInput');
  const dropzone = document.getElementById('dropzone');
  const filePanel = document.getElementById('filePanel');
  const pageRange = document.getElementById('pageRange');
  const splitBtn = document.getElementById('splitBtn');
  const statusBox = document.getElementById('status');
  const toast = document.getElementById('toast');
  let selectedFile = null;
  let toastTimer;

  document.getElementById('year').textContent = new Date().getFullYear();

  function showToast(message) {
    toast.textContent = message;
    toast.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => toast.classList.remove('show'), 3000);
  }
  function setStatus(message, type='info') {
    statusBox.textContent = message;
    statusBox.className = `status show ${type}`;
  }
  function clearStatus() {
    statusBox.textContent = '';
    statusBox.className = 'status';
  }
  function formatSize(bytes) {
    return bytes < 1024*1024 ? `${Math.max(1,Math.round(bytes/1024))} KB` : `${(bytes/(1024*1024)).toFixed(2)} MB`;
  }
  function choosePdf(files) {
    const file = Array.from(files || []).find(f => f.name.toLowerCase().endsWith('.pdf') || f.type === 'application/pdf');
    if (!file) { showToast('Please select a PDF file.'); return; }
    selectedFile = file;
    document.getElementById('fileName').textContent = file.name;
    document.getElementById('fileName').title = file.name;
    document.getElementById('fileSize').textContent = formatSize(file.size);
    filePanel.style.display = 'block';
    filePanel.classList.add('visible');
    splitBtn.disabled = false;
    clearStatus();
    pageRange.value = '';
  }
  function parsePageRange(input, pageCount) {
    const text = input.trim();
    if (!text) throw new Error('Enter the page numbers or range you want to extract.');
    const pages = new Set();
    const parts = text.split(',');
    for (const rawPart of parts) {
      const part = rawPart.trim();
      if (!part) throw new Error('Check the page range format. Example: 1-3, 5, 8-10.');
      if (/^\d+$/.test(part)) {
        const page = Number(part);
        if (page < 1 || page > pageCount) throw new Error(`Page ${page} is outside this PDF. It has ${pageCount} pages.`);
        pages.add(page - 1);
      } else {
        const match = part.match(/^(\d+)\s*-\s*(\d+)$/);
        if (!match) throw new Error('Invalid page range. Use a format such as 1-3, 5, 8-10.');
        const start = Number(match[1]);
        const end = Number(match[2]);
        if (start < 1 || end < 1 || start > end || end > pageCount) {
          throw new Error(`Invalid range "${part}". Use page numbers from 1 to ${pageCount}.`);
        }
        for (let page = start; page <= end; page++) pages.add(page - 1);
      }
    }
    return Array.from(pages).sort((a,b) => a-b);
  }
  function downloadBytes(bytes, filename) {
    const blob = new Blob([bytes], {type:'application/pdf'});
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    link.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1500);
  }
  function safeBaseName(name) {
    return name.replace(/\.pdf$/i,'').replace(/[^\w\-]+/g,'_').slice(0,70) || 'document';
  }

  document.getElementById('chooseFile').addEventListener('click', e => { e.stopPropagation(); fileInput.click(); });
  document.getElementById('changeFile').addEventListener('click', () => fileInput.click());
  dropzone.addEventListener('click', e => { if (!e.target.closest('button')) fileInput.click(); });
  dropzone.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); }
  });
  fileInput.addEventListener('change', () => { choosePdf(fileInput.files); fileInput.value = ''; });
  ['dragenter','dragover'].forEach(type => dropzone.addEventListener(type, e => {
    e.preventDefault(); dropzone.classList.add('dragover');
  }));
  ['dragleave','drop'].forEach(type => dropzone.addEventListener(type, e => {
    e.preventDefault(); dropzone.classList.remove('dragover');
  }));
  dropzone.addEventListener('drop', e => choosePdf(e.dataTransfer.files));

  splitBtn.addEventListener('click', async () => {
    if (!selectedFile) return;
    if (!window.PDFLib) {
      setStatus('The PDF library could not load. Check your internet connection and reload this page.', 'error');
      return;
    }
    const originalText = splitBtn.innerHTML;
    splitBtn.disabled = true;
    splitBtn.textContent = 'Processing…';
    try {
      setStatus('Reading your PDF…', 'info');
      const {PDFDocument} = window.PDFLib;
      const source = await PDFDocument.load(await selectedFile.arrayBuffer());
      const pageCount = source.getPageCount();
      const pages = parsePageRange(pageRange.value, pageCount);
      const mode = document.getElementById('splitMode').value;
      const base = safeBaseName(selectedFile.name);

      if (mode === 'selected') {
        const output = await PDFDocument.create();
        const copied = await output.copyPages(source, pages);
        copied.forEach(page => output.addPage(page));
        const bytes = await output.save();
        downloadBytes(bytes, `${base}-split.pdf`);
        setStatus(`Done! Extracted ${pages.length} ${pages.length === 1 ? 'page' : 'pages'} from a ${pageCount}-page PDF. Your download should begin shortly.`, 'success');
      } else {
        for (let i = 0; i < pages.length; i++) {
          setStatus(`Creating PDF ${i+1} of ${pages.length}…`, 'info');
          const output = await PDFDocument.create();
          const [page] = await output.copyPages(source, [pages[i]]);
          output.addPage(page);
          const bytes = await output.save();
          downloadBytes(bytes, `${base}-page-${pages[i]+1}.pdf`);
          // A small pause helps browsers start multiple downloads.
          await new Promise(resolve => setTimeout(resolve, 250));
        }
        setStatus(`Done! Created ${pages.length} separate PDF file(s). Your browser may ask you to allow multiple downloads.`, 'success');
      }
    } catch (error) {
      console.error(error);
      setStatus(error.message || 'Could not split this PDF. It may be damaged or password-protected.', 'error');
    } finally {
      splitBtn.disabled = !selectedFile;
      splitBtn.innerHTML = originalText;
    }
  });
</script>
</body>
</html>