Merge branch 'main' into fix-version-inline
This commit is contained in:
Sebastian Espei
@@ -545,6 +545,12 @@ const baseCategories = [
|
||||
icon: 'ph-files',
|
||||
subtitle: 'Duplicate, reorder, and delete pages.',
|
||||
},
|
||||
{
|
||||
href: import.meta.env.BASE_URL + 'overlay-pdf.html',
|
||||
name: 'PDF Overlay',
|
||||
icon: 'ph-stack-simple',
|
||||
subtitle: 'Overlay or underlay pages from one PDF onto another.',
|
||||
},
|
||||
{
|
||||
href: import.meta.env.BASE_URL + 'add-attachments.html',
|
||||
name: 'Add Attachments',
|
||||
|
||||
288
src/js/logic/overlay-pdf-page.ts
Normal file
288
src/js/logic/overlay-pdf-page.ts
Normal file
@@ -0,0 +1,288 @@
|
||||
import { showAlert } from '../ui.js';
|
||||
import {
|
||||
downloadFile,
|
||||
formatBytes,
|
||||
initializeQpdf,
|
||||
readFileAsArrayBuffer,
|
||||
} from '../utils/helpers.js';
|
||||
import { icons, createIcons } from 'lucide';
|
||||
import type { OverlayPdfState, QpdfInstanceExtended } from '@/types';
|
||||
|
||||
const pageState: OverlayPdfState = {
|
||||
baseFile: null,
|
||||
overlayFile: null,
|
||||
};
|
||||
|
||||
function resetState() {
|
||||
pageState.baseFile = null;
|
||||
pageState.overlayFile = null;
|
||||
|
||||
const baseDisplay = document.getElementById('base-file-display');
|
||||
if (baseDisplay) baseDisplay.innerHTML = '';
|
||||
|
||||
const overlayDisplay = document.getElementById('overlay-file-display');
|
||||
if (overlayDisplay) overlayDisplay.innerHTML = '';
|
||||
|
||||
const toolOptions = document.getElementById('tool-options');
|
||||
if (toolOptions) toolOptions.classList.add('hidden');
|
||||
|
||||
const baseInput = document.getElementById(
|
||||
'base-file-input'
|
||||
) as HTMLInputElement;
|
||||
if (baseInput) baseInput.value = '';
|
||||
|
||||
const overlayInput = document.getElementById(
|
||||
'overlay-file-input'
|
||||
) as HTMLInputElement;
|
||||
if (overlayInput) overlayInput.value = '';
|
||||
}
|
||||
|
||||
function renderFileEntry(
|
||||
container: HTMLElement,
|
||||
file: File,
|
||||
onRemove: () => void
|
||||
) {
|
||||
container.innerHTML = '';
|
||||
|
||||
const fileDiv = document.createElement('div');
|
||||
fileDiv.className =
|
||||
'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
|
||||
|
||||
const infoContainer = document.createElement('div');
|
||||
infoContainer.className = 'flex flex-col overflow-hidden';
|
||||
|
||||
const nameSpan = document.createElement('div');
|
||||
nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
|
||||
nameSpan.textContent = file.name;
|
||||
|
||||
const metaSpan = document.createElement('div');
|
||||
metaSpan.className = 'text-xs text-gray-400';
|
||||
metaSpan.textContent = formatBytes(file.size);
|
||||
|
||||
infoContainer.append(nameSpan, metaSpan);
|
||||
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
|
||||
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
|
||||
removeBtn.onclick = onRemove;
|
||||
|
||||
fileDiv.append(infoContainer, removeBtn);
|
||||
container.appendChild(fileDiv);
|
||||
createIcons({ icons });
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
const toolOptions = document.getElementById('tool-options');
|
||||
const baseDisplay = document.getElementById('base-file-display');
|
||||
const overlayDisplay = document.getElementById('overlay-file-display');
|
||||
|
||||
if (baseDisplay && pageState.baseFile) {
|
||||
renderFileEntry(baseDisplay, pageState.baseFile, () => {
|
||||
pageState.baseFile = null;
|
||||
baseDisplay.innerHTML = '';
|
||||
updateUI();
|
||||
});
|
||||
}
|
||||
|
||||
if (overlayDisplay && pageState.overlayFile) {
|
||||
renderFileEntry(overlayDisplay, pageState.overlayFile, () => {
|
||||
pageState.overlayFile = null;
|
||||
overlayDisplay.innerHTML = '';
|
||||
updateUI();
|
||||
});
|
||||
}
|
||||
|
||||
if (toolOptions) {
|
||||
if (pageState.baseFile && pageState.overlayFile) {
|
||||
toolOptions.classList.remove('hidden');
|
||||
} else {
|
||||
toolOptions.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isPdf(file: File): boolean {
|
||||
return (
|
||||
file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')
|
||||
);
|
||||
}
|
||||
|
||||
async function processOverlay() {
|
||||
if (!pageState.baseFile || !pageState.overlayFile) {
|
||||
showAlert(
|
||||
'Missing Files',
|
||||
'Please upload both a base PDF and an overlay/underlay PDF.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const loaderModal = document.getElementById('loader-modal');
|
||||
const loaderText = document.getElementById('loader-text');
|
||||
if (loaderModal) loaderModal.classList.remove('hidden');
|
||||
if (loaderText) loaderText.textContent = 'Initializing PDF engine...';
|
||||
|
||||
const inputPath = '/input_base.pdf';
|
||||
const overlayPath = '/input_overlay.pdf';
|
||||
const outputPath = '/output.pdf';
|
||||
let qpdf: QpdfInstanceExtended;
|
||||
|
||||
try {
|
||||
qpdf = await initializeQpdf();
|
||||
|
||||
if (loaderText) loaderText.textContent = 'Reading files...';
|
||||
|
||||
const baseBuffer = await readFileAsArrayBuffer(pageState.baseFile);
|
||||
const overlayBuffer = await readFileAsArrayBuffer(pageState.overlayFile);
|
||||
|
||||
qpdf.FS.writeFile(inputPath, new Uint8Array(baseBuffer as ArrayBuffer));
|
||||
qpdf.FS.writeFile(
|
||||
overlayPath,
|
||||
new Uint8Array(overlayBuffer as ArrayBuffer)
|
||||
);
|
||||
|
||||
const modeSelect = document.getElementById(
|
||||
'mode-select'
|
||||
) as HTMLSelectElement;
|
||||
const pageRangeInput = document.getElementById(
|
||||
'page-range'
|
||||
) as HTMLInputElement;
|
||||
const repeatCheckbox = document.getElementById(
|
||||
'repeat-toggle'
|
||||
) as HTMLInputElement;
|
||||
|
||||
const mode = modeSelect?.value === 'underlay' ? '--underlay' : '--overlay';
|
||||
const pageRange = pageRangeInput?.value.trim();
|
||||
const shouldRepeat = repeatCheckbox?.checked;
|
||||
|
||||
if (loaderText)
|
||||
loaderText.textContent = `Applying ${mode.replace('--', '')}...`;
|
||||
|
||||
const args = [inputPath, mode, overlayPath];
|
||||
|
||||
if (pageRange) {
|
||||
args.push(`--to=${pageRange}`);
|
||||
}
|
||||
|
||||
if (shouldRepeat) {
|
||||
args.push('--from=', '--repeat=1-z');
|
||||
}
|
||||
|
||||
args.push('--', outputPath);
|
||||
|
||||
qpdf.callMain(args);
|
||||
|
||||
const outputFile = qpdf.FS.readFile(outputPath, { encoding: 'binary' });
|
||||
if (!outputFile || outputFile.length === 0) {
|
||||
throw new Error('Processing produced an empty file.');
|
||||
}
|
||||
|
||||
const modeLabel = mode.replace('--', '');
|
||||
const baseName = pageState.baseFile.name.replace(/\.pdf$/i, '');
|
||||
const fileName = `${baseName}_${modeLabel}.pdf`;
|
||||
|
||||
downloadFile(
|
||||
new Blob([new Uint8Array(outputFile)], { type: 'application/pdf' }),
|
||||
fileName
|
||||
);
|
||||
|
||||
showAlert(
|
||||
'Success',
|
||||
`PDF ${modeLabel} applied successfully.`,
|
||||
'success',
|
||||
() => {
|
||||
resetState();
|
||||
}
|
||||
);
|
||||
} catch (error: unknown) {
|
||||
console.error('Overlay/underlay error:', error);
|
||||
showAlert(
|
||||
'Processing Failed',
|
||||
`An error occurred: ${error instanceof Error ? error.message : 'Unknown error'}.`
|
||||
);
|
||||
} finally {
|
||||
try {
|
||||
if (qpdf?.FS) {
|
||||
if (qpdf.FS.analyzePath(inputPath).exists) qpdf.FS.unlink(inputPath);
|
||||
if (qpdf.FS.analyzePath(overlayPath).exists)
|
||||
qpdf.FS.unlink(overlayPath);
|
||||
if (qpdf.FS.analyzePath(outputPath).exists) qpdf.FS.unlink(outputPath);
|
||||
}
|
||||
} catch (cleanupError) {
|
||||
console.warn('Failed to cleanup WASM FS:', cleanupError);
|
||||
}
|
||||
if (loaderModal) loaderModal.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function setupDropZone(
|
||||
dropZone: HTMLElement,
|
||||
fileInput: HTMLInputElement,
|
||||
onFile: (file: File) => void
|
||||
) {
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
const files = (e.target as HTMLInputElement).files;
|
||||
if (files && files.length > 0 && isPdf(files[0])) {
|
||||
onFile(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('bg-gray-700');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
const files = e.dataTransfer?.files;
|
||||
if (files && files.length > 0 && isPdf(files[0])) {
|
||||
onFile(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.addEventListener('click', () => {
|
||||
fileInput.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const baseDropZone = document.getElementById('base-drop-zone');
|
||||
const baseInput = document.getElementById(
|
||||
'base-file-input'
|
||||
) as HTMLInputElement;
|
||||
const overlayDropZone = document.getElementById('overlay-drop-zone');
|
||||
const overlayInput = document.getElementById(
|
||||
'overlay-file-input'
|
||||
) as HTMLInputElement;
|
||||
const processBtn = document.getElementById('process-btn');
|
||||
const backBtn = document.getElementById('back-to-tools');
|
||||
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener('click', () => {
|
||||
window.location.href = import.meta.env.BASE_URL;
|
||||
});
|
||||
}
|
||||
|
||||
if (baseDropZone && baseInput) {
|
||||
setupDropZone(baseDropZone, baseInput, (file) => {
|
||||
pageState.baseFile = file;
|
||||
updateUI();
|
||||
});
|
||||
}
|
||||
|
||||
if (overlayDropZone && overlayInput) {
|
||||
setupDropZone(overlayDropZone, overlayInput, (file) => {
|
||||
pageState.overlayFile = file;
|
||||
updateUI();
|
||||
});
|
||||
}
|
||||
|
||||
if (processBtn) {
|
||||
processBtn.addEventListener('click', processOverlay);
|
||||
}
|
||||
});
|
||||
@@ -207,6 +207,7 @@ const init = async () => {
|
||||
'PDF to JSON': 'tools:pdfToJson',
|
||||
'OCR PDF': 'tools:ocrPdf',
|
||||
'Alternate & Mix Pages': 'tools:alternateMix',
|
||||
'PDF Overlay': 'tools:pdfOverlay',
|
||||
'Organize & Duplicate': 'tools:duplicateOrganize',
|
||||
'Add Attachments': 'tools:addAttachments',
|
||||
'Extract Attachments': 'tools:extractAttachments',
|
||||
|
||||
@@ -65,3 +65,4 @@ export * from './shortcuts-type.ts';
|
||||
export * from './ui-type.ts';
|
||||
export * from './markdown-editor-type.ts';
|
||||
export * from './sanitize-type.ts';
|
||||
export * from './overlay-pdf-type.ts';
|
||||
|
||||
4
src/js/types/overlay-pdf-type.ts
Normal file
4
src/js/types/overlay-pdf-type.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export interface OverlayPdfState {
|
||||
baseFile: File | null;
|
||||
overlayFile: File | null;
|
||||
}
|
||||
92
src/js/workflow/nodes/overlay-node.ts
Normal file
92
src/js/workflow/nodes/overlay-node.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import { ClassicPreset } from 'rete';
|
||||
import { BaseWorkflowNode } from './base-node';
|
||||
import { pdfSocket } from '../sockets';
|
||||
import type { SocketData } from '../types';
|
||||
import { requirePdfInput, extractSinglePdf } from '../types';
|
||||
import { initializeQpdf } from '../../utils/helpers.js';
|
||||
import { loadPdfDocument } from '../../utils/load-pdf-document.js';
|
||||
|
||||
export class OverlayNode extends BaseWorkflowNode {
|
||||
readonly category = 'Organize & Manage' as const;
|
||||
readonly icon = 'ph-stack-simple';
|
||||
readonly description = 'Overlay or underlay pages from one PDF onto another';
|
||||
|
||||
constructor() {
|
||||
super('Overlay');
|
||||
this.addInput('pdf', new ClassicPreset.Input(pdfSocket, 'Base PDF'));
|
||||
this.addInput('overlay', new ClassicPreset.Input(pdfSocket, 'Overlay PDF'));
|
||||
this.addOutput('pdf', new ClassicPreset.Output(pdfSocket, 'Result PDF'));
|
||||
this.addControl(
|
||||
'mode',
|
||||
new ClassicPreset.InputControl('text', { initial: 'overlay' })
|
||||
);
|
||||
}
|
||||
|
||||
async data(
|
||||
inputs: Record<string, SocketData[]>
|
||||
): Promise<Record<string, SocketData>> {
|
||||
const baseInputs = requirePdfInput(inputs, 'Overlay');
|
||||
const overlayInputs = inputs['overlay'];
|
||||
if (!overlayInputs || overlayInputs.length === 0) {
|
||||
throw new Error('Overlay node requires an overlay PDF input.');
|
||||
}
|
||||
|
||||
const basePdf = extractSinglePdf(baseInputs[0]);
|
||||
const overlayPdf = extractSinglePdf(overlayInputs[0]);
|
||||
|
||||
const modeControl = this.controls[
|
||||
'mode'
|
||||
] as ClassicPreset.InputControl<'text'>;
|
||||
const mode = modeControl?.value === 'underlay' ? '--underlay' : '--overlay';
|
||||
|
||||
const qpdf = await initializeQpdf();
|
||||
const uid = `${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
|
||||
const inputPath = `/tmp/input_overlay_${uid}.pdf`;
|
||||
const overlayPath = `/tmp/overlay_${uid}.pdf`;
|
||||
const outputPath = `/tmp/output_overlay_${uid}.pdf`;
|
||||
|
||||
let resultBytes: Uint8Array;
|
||||
try {
|
||||
qpdf.FS.writeFile(inputPath, basePdf.bytes);
|
||||
qpdf.FS.writeFile(overlayPath, overlayPdf.bytes);
|
||||
qpdf.callMain([
|
||||
inputPath,
|
||||
mode,
|
||||
overlayPath,
|
||||
'--from=',
|
||||
'--repeat=1-z',
|
||||
'--',
|
||||
outputPath,
|
||||
]);
|
||||
resultBytes = new Uint8Array(qpdf.FS.readFile(outputPath));
|
||||
} finally {
|
||||
try {
|
||||
qpdf.FS.unlink(inputPath);
|
||||
} catch {
|
||||
void 0;
|
||||
}
|
||||
try {
|
||||
qpdf.FS.unlink(overlayPath);
|
||||
} catch {
|
||||
void 0;
|
||||
}
|
||||
try {
|
||||
qpdf.FS.unlink(outputPath);
|
||||
} catch {
|
||||
void 0;
|
||||
}
|
||||
}
|
||||
|
||||
const document = await loadPdfDocument(resultBytes);
|
||||
const modeLabel = mode.replace('--', '');
|
||||
|
||||
return {
|
||||
pdf: {
|
||||
type: 'pdf',
|
||||
document,
|
||||
bytes: resultBytes,
|
||||
filename: basePdf.filename.replace(/\.pdf$/i, `_${modeLabel}.pdf`),
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -56,6 +56,7 @@ import { DeskewNode } from './deskew-node';
|
||||
import { PdfToPdfANode } from './pdf-to-pdfa-node';
|
||||
import { PosterizeNode } from './posterize-node';
|
||||
import { BookletNode } from './booklet-node';
|
||||
import { OverlayNode } from './overlay-node';
|
||||
import { FontToOutlineNode } from './font-to-outline-node';
|
||||
import { TableOfContentsNode } from './table-of-contents-node';
|
||||
import { EmailToPdfNode } from './email-to-pdf-node';
|
||||
@@ -355,6 +356,14 @@ export const nodeRegistry: Record<string, NodeRegistryEntry> = {
|
||||
factory: () => new BookletNode(),
|
||||
toolPageId: 'pdf-booklet',
|
||||
},
|
||||
OverlayNode: {
|
||||
label: 'Overlay',
|
||||
category: 'Organize & Manage',
|
||||
icon: 'ph-stack-simple',
|
||||
description: 'Overlay or underlay pages from one PDF onto another',
|
||||
factory: () => new OverlayNode(),
|
||||
toolPageId: 'overlay-pdf',
|
||||
},
|
||||
PosterizeNode: {
|
||||
label: 'Posterize',
|
||||
category: 'Organize & Manage',
|
||||
|
||||
518
src/pages/overlay-pdf.html
Normal file
518
src/pages/overlay-pdf.html
Normal file
@@ -0,0 +1,518 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>PDF Overlay & Underlay Online Free | BentoPDF</title>
|
||||
<meta
|
||||
name="title"
|
||||
content="PDF Overlay & Underlay Online Free | BentoPDF"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="★ Overlay or underlay PDF pages online free ★ Add watermarks, letterheads, backgrounds ★ No signup ★ Privacy-first ★ Works in browser"
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="pdf overlay, pdf underlay, pdf watermark, pdf background, overlay pages"
|
||||
/>
|
||||
<meta name="author" content="BentoPDF" />
|
||||
<meta
|
||||
name="robots"
|
||||
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
|
||||
/>
|
||||
|
||||
<link rel="canonical" href="https://www.bentopdf.com/overlay-pdf.html" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://www.bentopdf.com/overlay-pdf" />
|
||||
<meta
|
||||
property="og:title"
|
||||
content="PDF Overlay & Underlay Online Free | BentoPDF"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="★ Overlay or underlay PDF pages online free ★ Add watermarks, letterheads, backgrounds ★ No signup ★ Privacy-first ★ Works in browser"
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://www.bentopdf.com/images/og-overlay-pdf.png"
|
||||
/>
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:site_name" content="BentoPDF" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:url" content="https://www.bentopdf.com/overlay-pdf" />
|
||||
<meta name="twitter:title" content="PDF Overlay & Underlay Free" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="★ Overlay or underlay PDF pages online free ★ No signup ★ Privacy-first ★ Works in browser"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://www.bentopdf.com/images/twitter-overlay-pdf.png"
|
||||
/>
|
||||
<meta name="twitter:site" content="@BentoPDF" />
|
||||
|
||||
<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="PDF Overlay" />
|
||||
|
||||
<link href="/src/css/styles.css" rel="stylesheet" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<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" data-i18n="tools.backToTools">
|
||||
Back to Tools
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<h1
|
||||
class="text-2xl font-bold text-white mb-2"
|
||||
data-i18n="tools:pdfOverlay.name"
|
||||
>
|
||||
PDF Overlay
|
||||
</h1>
|
||||
<p class="text-gray-400 mb-6" data-i18n="tools:pdfOverlay.subtitle">
|
||||
Overlay or underlay pages from one PDF onto another.
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-300 mb-2"
|
||||
data-i18n="tools:pdfOverlay.basePdfLabel"
|
||||
>Base PDF</label
|
||||
>
|
||||
<div
|
||||
id="base-drop-zone"
|
||||
class="relative flex flex-col items-center justify-center w-full h-32 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 py-4">
|
||||
<i
|
||||
data-lucide="file-text"
|
||||
class="w-8 h-8 mb-2 text-gray-400"
|
||||
></i>
|
||||
<p class="text-sm text-gray-400">
|
||||
<span
|
||||
class="font-semibold"
|
||||
data-i18n="tools:pdfOverlay.uploadBasePdf"
|
||||
>Upload base PDF</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
id="base-file-input"
|
||||
type="file"
|
||||
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
|
||||
accept="application/pdf"
|
||||
/>
|
||||
</div>
|
||||
<div id="base-file-display" class="mt-2"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-300 mb-2"
|
||||
data-i18n="tools:pdfOverlay.overlayPdfLabel"
|
||||
>Overlay / Underlay PDF</label
|
||||
>
|
||||
<div
|
||||
id="overlay-drop-zone"
|
||||
class="relative flex flex-col items-center justify-center w-full h-32 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 py-4">
|
||||
<i data-lucide="layers" class="w-8 h-8 mb-2 text-gray-400"></i>
|
||||
<p class="text-sm text-gray-400">
|
||||
<span
|
||||
class="font-semibold"
|
||||
data-i18n="tools:pdfOverlay.uploadOverlayPdf"
|
||||
>Upload overlay/underlay PDF</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
id="overlay-file-input"
|
||||
type="file"
|
||||
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
|
||||
accept="application/pdf"
|
||||
/>
|
||||
</div>
|
||||
<div id="overlay-file-display" class="mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="text-xs text-gray-500 mt-3"
|
||||
data-i18n="upload.filesNeverLeave"
|
||||
>
|
||||
Your files never leave your device.
|
||||
</p>
|
||||
|
||||
<div id="tool-options" class="hidden mt-6 space-y-4">
|
||||
<div
|
||||
class="p-4 bg-gray-900 rounded-lg border border-gray-700 space-y-4"
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
for="mode-select"
|
||||
class="block text-sm font-medium text-gray-300 mb-1"
|
||||
data-i18n="tools:pdfOverlay.modeLabel"
|
||||
>Mode</label
|
||||
>
|
||||
<select
|
||||
id="mode-select"
|
||||
class="w-full bg-gray-800 border border-gray-600 text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
>
|
||||
<option
|
||||
value="overlay"
|
||||
data-i18n="tools:pdfOverlay.overlayOption"
|
||||
>
|
||||
Overlay (on top of pages)
|
||||
</option>
|
||||
<option
|
||||
value="underlay"
|
||||
data-i18n="tools:pdfOverlay.underlayOption"
|
||||
>
|
||||
Underlay (behind pages)
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="page-range"
|
||||
class="block text-sm font-medium text-gray-300 mb-1"
|
||||
data-i18n="tools:pdfOverlay.pageRangeLabel"
|
||||
>Apply to pages (optional)</label
|
||||
>
|
||||
<input
|
||||
id="page-range"
|
||||
type="text"
|
||||
placeholder="e.g. 1-5, 8, 10-z (leave empty for all)"
|
||||
class="w-full bg-gray-800 border border-gray-600 text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
<p
|
||||
class="text-xs text-gray-500 mt-1"
|
||||
data-i18n="tools:pdfOverlay.pageRangeHint"
|
||||
>
|
||||
Use "z" for the last page. Leave empty to apply to all pages.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
id="repeat-toggle"
|
||||
type="checkbox"
|
||||
checked
|
||||
class="w-4 h-4 rounded border-gray-600 bg-gray-800 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
<label
|
||||
for="repeat-toggle"
|
||||
class="text-sm text-gray-300"
|
||||
data-i18n="tools:pdfOverlay.repeatLabel"
|
||||
>Loop overlay/underlay pages if base is longer</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="process-btn"
|
||||
class="btn-gradient w-full"
|
||||
data-i18n="tools:pdfOverlay.processButton"
|
||||
>
|
||||
Apply Overlay / Underlay
|
||||
</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>
|
||||
<p
|
||||
id="loader-text"
|
||||
class="text-white text-lg font-medium"
|
||||
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">
|
||||
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 transition-colors duration-200"
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
data-i18n="howItWorks.title"
|
||||
>
|
||||
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"
|
||||
data-i18n="tools:pdfOverlay.howItWorksUploadTitle"
|
||||
>
|
||||
Upload Two PDFs
|
||||
</h3>
|
||||
<p
|
||||
class="text-gray-400"
|
||||
data-i18n="tools:pdfOverlay.howItWorksUploadDescription"
|
||||
>
|
||||
Upload your base PDF and the PDF you want to overlay or underlay.
|
||||
</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"
|
||||
data-i18n="tools:pdfOverlay.howItWorksModeTitle"
|
||||
>
|
||||
Choose Mode
|
||||
</h3>
|
||||
<p
|
||||
class="text-gray-400"
|
||||
data-i18n="tools:pdfOverlay.howItWorksModeDescription"
|
||||
>
|
||||
Select overlay (on top) or underlay (behind). Optionally set a
|
||||
page range and repeat.
|
||||
</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"
|
||||
data-i18n="tools:pdfOverlay.howItWorksDownloadTitle"
|
||||
>
|
||||
Download
|
||||
</h3>
|
||||
<p
|
||||
class="text-gray-400"
|
||||
data-i18n="tools:pdfOverlay.howItWorksDownloadDescription"
|
||||
>
|
||||
Download your PDF with the overlay or underlay applied.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
data-i18n="faq.sectionTitle"
|
||||
>
|
||||
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"
|
||||
>
|
||||
<span data-i18n="tools:pdfOverlay.faqDifferenceQuestion"
|
||||
>What is the difference between overlay and underlay?</span
|
||||
>
|
||||
<i data-lucide="chevron-down" class="w-5 h-5"></i>
|
||||
</summary>
|
||||
<p
|
||||
class="mt-3 text-gray-400"
|
||||
data-i18n="tools:pdfOverlay.faqDifferenceAnswer"
|
||||
>
|
||||
Overlay places pages on top of your base PDF (like a watermark).
|
||||
Underlay places pages behind your base PDF (like a letterhead or
|
||||
background).
|
||||
</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"
|
||||
>
|
||||
<span data-i18n="tools:pdfOverlay.faqSinglePageQuestion"
|
||||
>Can I use a single-page PDF as overlay for all pages?</span
|
||||
>
|
||||
<i data-lucide="chevron-down" class="w-5 h-5"></i>
|
||||
</summary>
|
||||
<p
|
||||
class="mt-3 text-gray-400"
|
||||
data-i18n="tools:pdfOverlay.faqSinglePageAnswer"
|
||||
>
|
||||
Yes! Enable the "Loop" option and your overlay PDF pages will repeat
|
||||
across all base pages. A single-page watermark will apply to every
|
||||
page.
|
||||
</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"
|
||||
>
|
||||
<span data-i18n="tools:pdfOverlay.faqPrivacyQuestion"
|
||||
>Are my files private and secure?</span
|
||||
>
|
||||
<i data-lucide="chevron-down" class="w-5 h-5"></i>
|
||||
</summary>
|
||||
<p
|
||||
class="mt-3 text-gray-400"
|
||||
data-i18n="tools:pdfOverlay.faqPrivacyAnswer"
|
||||
>
|
||||
Absolutely! All processing happens in your browser. Your files never
|
||||
leave your device, ensuring complete privacy.
|
||||
</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/overlay-pdf-page.ts"></script>
|
||||
<script type="module" src="/src/js/mobileMenu.ts"></script>
|
||||
<script type="module" src="/src/js/main.ts"></script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "PDF Overlay - BentoPDF",
|
||||
"applicationCategory": "PDF Tool",
|
||||
"operatingSystem": "Any - Web Browser",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "USD"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "HowTo",
|
||||
"name": "How to overlay or underlay PDF pages",
|
||||
"description": "Learn how to overlay or underlay pages from one PDF onto another using BentoPDF",
|
||||
"step": [
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"position": 1,
|
||||
"name": "Upload Two PDFs",
|
||||
"text": "Upload your base PDF and the overlay/underlay PDF"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"position": 2,
|
||||
"name": "Choose Mode",
|
||||
"text": "Select overlay or underlay mode and configure options"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"position": 3,
|
||||
"name": "Download",
|
||||
"text": "Download your processed PDF"
|
||||
}
|
||||
]
|
||||
}
|
||||
</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": "PDF Overlay",
|
||||
"item": "https://www.bentopdf.com/overlay-pdf"
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user