Blame for merge.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="Merge PDF files quickly and privately in your browser with PDFix." />
  <title>Merge PDF Files Online — PDFix</title>
  <style>
    :root {
      --bg: #f7f8ff; --surface: #fff; --ink: #17182d; --muted: #71738a;
      --line: #e7e8f2; --primary: #635bff; --primary-dark: #4c43e8;
      --soft: #efedff; --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;
      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);
      line-height: 1.5;
    }
    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:220px; 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; }
    .panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:13px; }
    .panel-head h2 { margin:0; font-size:1.12rem; }
    .count { color:var(--muted); font-size:.86rem; }
    .file-list { display:grid; gap:10px; }
    .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; }
    .file-actions { display:flex; align-items:center; gap:5px; }
    .icon-btn { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:#696b80; background:#fff; }
    .icon-btn:hover:not(:disabled) { color:var(--primary); border-color:#c9c5ff; }
    .icon-btn.remove:hover { color:var(--danger); border-color:#ffc7d1; }
    .icon-btn svg { width:17px; height:17px; }
    .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; }
      .file-row { grid-template-columns:auto minmax(0,1fr); }
      .file-actions { grid-column:2; justify-content:flex-start; }
      .panel-head { align-items:flex-start; flex-direction:column; }
      .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>Merge <span>PDF files</span></h1>
        <p>Bring multiple documents together into one PDF. Add your files, arrange their order, and download the merged result.</p>
      </div>

      <div class="workspace">
        <div class="dropzone" id="dropzone" tabindex="0" role="button" aria-label="Choose or drop PDF files">
          <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 PDF files here</strong>
          <p>Choose two or more PDFs to combine them into one file.</p>
          <button type="button" class="btn btn-primary" id="chooseFiles">Select PDF files <span aria-hidden="true">↑</span></button>
          <input id="fileInput" type="file" accept=".pdf,application/pdf" multiple />
        </div>

        <div class="file-panel" id="filePanel">
          <div class="panel-head">
            <div><h2>Your PDF files</h2><div class="count" id="fileCount">0 files selected</div></div>
            <button type="button" class="btn btn-light" id="addMore">＋ Add more files</button>
          </div>
          <div class="file-list" id="fileList"></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> Files are processed in your browser.</div>
            <button type="button" class="btn btn-primary" id="mergeBtn" disabled>Merge PDFs <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>① Add your files</b><p>Select at least two PDF documents or drag them into the upload area.</p></article>
        <article class="tip"><b>② Arrange the order</b><p>Use the arrows beside each file to choose the order of pages in the final PDF.</p></article>
        <article class="tip"><b>③ Merge and download</b><p>PDFix combines your files locally, then saves the new PDF to your device.</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>

  <!-- pdf-lib runs in the browser; no PDF files are sent to a server. -->
  <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 fileList = document.getElementById('fileList');
    const fileCount = document.getElementById('fileCount');
    const mergeBtn = document.getElementById('mergeBtn');
    const statusBox = document.getElementById('status');
    const toast = document.getElementById('toast');
    let selectedFiles = [];
    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) {
      if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
      return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
    }
    function pdfIcon() {
      return '<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>';
    }
    function addFiles(fileCollection) {
      const incoming = Array.from(fileCollection || []);
      if (!incoming.length) return;
      const invalid = incoming.filter(file => !file.name.toLowerCase().endsWith('.pdf') && file.type !== 'application/pdf');
      if (invalid.length) {
        showToast('Please select PDF files only. Non-PDF files were skipped.');
      }
      const valid = incoming.filter(file => file.name.toLowerCase().endsWith('.pdf') || file.type === 'application/pdf');
      valid.forEach(file => {
        const duplicate = selectedFiles.some(existing => existing.name === file.name && existing.size === file.size && existing.lastModified === file.lastModified);
        if (!duplicate) selectedFiles.push(file);
      });
      renderFiles();
      fileInput.value = '';
      if (valid.length) clearStatus();
    }
    function renderFiles() {
      fileList.innerHTML = '';
      filePanel.classList.toggle('visible', selectedFiles.length > 0);
      fileCount.textContent = `${selectedFiles.length} ${selectedFiles.length === 1 ? 'file' : 'files'} selected`;
      mergeBtn.disabled = selectedFiles.length < 2;
      selectedFiles.forEach((file, index) => {
        const row = document.createElement('div');
        row.className = 'file-row';
        const icon = document.createElement('div');
        icon.className = 'file-icon';
        icon.innerHTML = pdfIcon();
        const meta = document.createElement('div');
        meta.className = 'file-meta';
        const name = document.createElement('div');
        name.className = 'file-name';
        name.textContent = file.name;
        name.title = file.name;
        const size = document.createElement('div');
        size.className = 'file-size';
        size.textContent = formatSize(file.size);
        meta.append(name, size);

        const actions = document.createElement('div');
        actions.className = 'file-actions';
        actions.append(
          makeIconButton('↑', 'Move file up', index === 0, () => moveFile(index, -1)),
          makeIconButton('↓', 'Move file down', index === selectedFiles.length - 1, () => moveFile(index, 1)),
          makeIconButton('×', 'Remove file', false, () => removeFile(index), true)
        );
        row.append(icon, meta, actions);
        fileList.append(row);
      });
    }
    function makeIconButton(label, ariaLabel, disabled, action, isRemove = false) {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = `icon-btn${isRemove ? ' remove' : ''}`;
      button.textContent = label;
      button.setAttribute('aria-label', ariaLabel);
      button.title = ariaLabel;
      button.disabled = disabled;
      button.addEventListener('click', action);
      return button;
    }
    function moveFile(index, direction) {
      const target = index + direction;
      if (target < 0 || target >= selectedFiles.length) return;
      [selectedFiles[index], selectedFiles[target]] = [selectedFiles[target], selectedFiles[index]];
      renderFiles();
      clearStatus();
    }
    function removeFile(index) {
      selectedFiles.splice(index, 1);
      renderFiles();
      clearStatus();
    }

    document.getElementById('chooseFiles').addEventListener('click', event => {
      event.stopPropagation();
      fileInput.click();
    });
    document.getElementById('addMore').addEventListener('click', () => fileInput.click());
    dropzone.addEventListener('click', event => {
      if (event.target.closest('button')) return;
      fileInput.click();
    });
    dropzone.addEventListener('keydown', event => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        fileInput.click();
      }
    });
    fileInput.addEventListener('change', () => addFiles(fileInput.files));
    ['dragenter', 'dragover'].forEach(type => dropzone.addEventListener(type, event => {
      event.preventDefault();
      dropzone.classList.add('dragover');
    }));
    ['dragleave', 'drop'].forEach(type => dropzone.addEventListener(type, event => {
      event.preventDefault();
      dropzone.classList.remove('dragover');
    }));
    dropzone.addEventListener('drop', event => addFiles(event.dataTransfer.files));

    mergeBtn.addEventListener('click', async () => {
      if (selectedFiles.length < 2) {
        setStatus('Please add at least two PDF files to merge.', 'error');
        return;
      }
      if (!window.PDFLib) {
        setStatus('The PDF library could not load. Check your internet connection and reload this page.', 'error');
        return;
      }
      const originalLabel = mergeBtn.innerHTML;
      mergeBtn.disabled = true;
      mergeBtn.textContent = 'Merging PDFs…';
      setStatus('Merging your files. Please keep this tab open.', 'info');
      try {
        const { PDFDocument } = window.PDFLib;
        const mergedPdf = await PDFDocument.create();
        for (let i = 0; i < selectedFiles.length; i++) {
          const file = selectedFiles[i];
          setStatus(`Reading file ${i + 1} of ${selectedFiles.length}: ${file.name}`, 'info');
          const bytes = await file.arrayBuffer();
          const sourcePdf = await PDFDocument.load(bytes);
          const copiedPages = await mergedPdf.copyPages(sourcePdf, sourcePdf.getPageIndices());
          copiedPages.forEach(page => mergedPdf.addPage(page));
        }
        const outputBytes = await mergedPdf.save();
        const blob = new Blob([outputBytes], { type: 'application/pdf' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = 'pdfix-merged.pdf';
        document.body.appendChild(link);
        link.click();
        link.remove();
        setTimeout(() => URL.revokeObjectURL(url), 1500);
        setStatus('Success! Your merged PDF has been downloaded as pdfix-merged.pdf.', 'success');
      } catch (error) {
        console.error(error);
        setStatus('We could not merge one of these files. It may be damaged, password-protected, or use an unsupported PDF feature. Please check the files and try again.', 'error');
      } finally {
        mergeBtn.disabled = selectedFiles.length < 2;
        mergeBtn.innerHTML = originalLabel;
      }
    });
  </script>
</body>
</html>