Files
bentopdf/src/pages/bates-numbering.html
T
2026-09-04 16:26:08 +05:30

602 lines
23 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bates Numbering Online Free - Add Bates Stamps | BentoPDF</title>
<meta
name="description"
content="Add sequential Bates numbers to PDF documents. Supports multi-file processing, custom templates, and configurable formatting. Free, secure, browser-based."
/>
<meta
name="keywords"
content="bates numbering, bates stamp, pdf bates, legal pdf numbering"
/>
<meta name="author" content="BentoPDF" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.bentopdf.com/bates-numbering" />
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://www.bentopdf.com/bates-numbering"
/>
<meta
property="og:title"
content="Bates Numbering Online Free | BentoPDF"
/>
<meta
property="og:description"
content="Add sequential Bates numbers to PDF documents. Multi-file support, custom templates. Free and private."
/>
<meta property="og:site_name" content="BentoPDF" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Bates Numbering Free" />
<meta name="twitter:site" content="@BentoPDF" />
<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-300 hover:text-indigo-400 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:batesNumbering.name"
>
Bates Numbering
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:batesNumbering.subtitle">
Add sequential Bates numbers across one or more PDF files.
</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 class="ph ph-upload-simple text-4xl 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 files</span
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500">PDF files (multiple supported)</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"
multiple
accept="application/pdf"
/>
</div>
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button
id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
>
<i data-lucide="plus"></i>
<span>Add More Files</span>
</button>
<button
id="clear-files-btn"
class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
>
<i data-lucide="trash-2"></i>
<span>Clear All</span>
</button>
</div>
<div id="file-list" class="mt-4 space-y-2"></div>
<div id="options-panel" class="hidden mt-6 space-y-4">
<div>
<label
for="style-preset"
class="block mb-2 text-sm font-medium text-gray-300"
>Select Style</label
>
<select
id="style-preset"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500"
>
<optgroup label="Exhibit + Case + Bates + Page">
<option value="full-6">Exhibit 1 Case XYZ 000001 Page 1</option>
<option value="full-5">Exhibit 1 Case XYZ 00001 Page 1</option>
<option value="full-4">Exhibit 1 Case XYZ 0001 Page 1</option>
<option value="full-3">Exhibit 1 Case XYZ 001 Page 1</option>
<option value="full-0">Exhibit 1 Case XYZ 1 Page 1</option>
</optgroup>
<optgroup label="Exhibit + Case + Bates">
<option value="no-page-6">Exhibit 1 Case XYZ 000001</option>
<option value="no-page-5">Exhibit 1 Case XYZ 00001</option>
<option value="no-page-4">Exhibit 1 Case XYZ 0001</option>
<option value="no-page-3">Exhibit 1 Case XYZ 001</option>
<option value="no-page-0">Exhibit 1 Case XYZ 1</option>
</optgroup>
<optgroup label="Case + Bates">
<option value="case-6">Case XYZ 000001</option>
<option value="case-5">Case XYZ 00001</option>
<option value="case-4">Case XYZ 0001</option>
<option value="case-3">Case XYZ 001</option>
<option value="case-0">Case XYZ 1</option>
</optgroup>
<optgroup label="Bates Number Only">
<option value="bates-6" selected>000001, 000002, 000003</option>
<option value="bates-5">00001, 00002, 00003</option>
<option value="bates-4">0001, 0002, 0003</option>
<option value="bates-3">001, 002, 003</option>
<option value="bates-0">1, 2, 3</option>
</optgroup>
<option value="custom">Custom style (other)</option>
</select>
</div>
<div>
<label
for="bates-template"
class="block mb-2 text-sm font-medium text-gray-300"
>Customize Style</label
>
<input
type="text"
id="bates-template"
value="[BATES]"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500 font-mono"
/>
<p class="text-xs text-gray-500 mt-1">
Placeholders: [BATES] [PAGE] [FILE] [FILENAME]
</p>
</div>
<div
id="preview-box"
class="bg-gray-900 border border-gray-700 rounded-lg p-4 text-sm text-gray-300 font-mono"
>
<div class="text-xs text-gray-500 mb-1">Preview:</div>
<div id="preview-content"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div id="padding-group" class="hidden">
<label
for="bates-padding"
class="block mb-2 text-sm font-medium text-gray-300"
>Bates Padding</label
>
<select
id="bates-padding"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500"
>
<option value="6" selected>6 digits (000001)</option>
<option value="5">5 digits (00001)</option>
<option value="4">4 digits (0001)</option>
<option value="3">3 digits (001)</option>
<option value="0">No padding (1)</option>
</select>
</div>
<div>
<label
for="position"
class="block mb-2 text-sm font-medium text-gray-300"
>Position</label
>
<select
id="position"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500"
>
<option value="top-center">Header Center</option>
<option value="top-left">Header Left</option>
<option value="top-right">Header Right</option>
<option value="bottom-center" selected>Footer Center</option>
<option value="bottom-left">Footer Left</option>
<option value="bottom-right">Footer Right</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label
for="bates-start"
class="block mb-2 text-sm font-medium text-gray-300"
>Bates Starts From</label
>
<input
type="number"
id="bates-start"
value="1"
min="0"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500"
/>
</div>
<div>
<label
for="file-start"
class="block mb-2 text-sm font-medium text-gray-300"
>File Counter Starts From</label
>
<input
type="number"
id="file-start"
value="1"
min="1"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500"
/>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label
for="font-family"
class="block mb-2 text-sm font-medium text-gray-300"
>Font</label
>
<select
id="font-family"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500"
>
<option value="Helvetica">Helvetica</option>
<option value="TimesRoman">Times New Roman</option>
<option value="Courier">Courier</option>
</select>
</div>
<div>
<label
for="font-size"
class="block mb-2 text-sm font-medium text-gray-300"
>Font Size</label
>
<input
type="number"
id="font-size"
value="10"
min="6"
max="72"
class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5 focus:ring-indigo-500 focus:border-indigo-500"
/>
</div>
<div>
<label
for="text-color"
class="block mb-2 text-sm font-medium text-gray-300"
>Color</label
>
<input type="color" id="text-color" value="#000000" />
</div>
</div>
<button id="process-btn" class="btn-gradient w-full mt-4">
Apply Bates Numbers
</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">Upload Files</h3>
<p class="text-gray-400">
Upload one or more PDF files. Drag to reorder for multi-file
sequencing.
</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">
Configure Style
</h3>
<p class="text-gray-400">
Choose a preset or create a custom template with placeholders like
[BATES], [PAGE], [FILE].
</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">
Get your bates-stamped PDFs instantly. Multiple files are
delivered as a ZIP.
</p>
</div>
</div>
</div>
</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"
data-i18n="relatedTools.title"
>
Related PDF Tools
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a
href="page-numbers.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">Page Numbers</h3>
<p class="text-gray-400 text-sm">Add page numbers to PDFs</p>
</a>
<a
href="header-footer.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">Header & Footer</h3>
<p class="text-gray-400 text-sm">
Add text to page headers and footers
</p>
</a>
<a
href="add-watermark.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">Add Watermark</h3>
<p class="text-gray-400 text-sm">Watermark your PDF documents</p>
</a>
<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">Combine multiple PDFs</p>
</a>
<a
href="organize-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">Organize PDF</h3>
<p class="text-gray-400 text-sm">Reorder and organize pages</p>
</a>
</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="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
What does the Bates number look like on the page?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
By default it's a six-digit zero-padded number such as 000001 placed
at the footer center in 10 pt Helvetica. Presets can add an exhibit
number, a case label, and a page number, for example Exhibit 1 Case
XYZ 000001 Page 1, and the preview box shows the exact text before
you process anything.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I use my own prefix or case number instead of the presets?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Yes. Pick Custom style and write a template with placeholders:
[BATES] for the sequential number, [PAGE] for the page number within
the file, [FILE] for the file counter, and [FILENAME] for the source
file name. A template like SMITH-[BATES] produces SMITH-000001,
SMITH-000002, and so on.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does the numbering continue across multiple PDFs or restart for each
file?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
It continues. If the first file has 30 pages and numbering starts at
1, the second file begins at 000031, following the order of the file
list, which you can rearrange by dragging. There's no option to
restart the count per file; process the files separately if you need
that.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How many digits can the number have?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Zero padding can be 3, 4, 5, or 6 digits, or turned off so 1, 2, 3
print without leading zeros. The count itself isn't capped; if it
grows past the padding width, the extra digits are still printed.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Where does the stamp go, and will it cover my content?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
You choose one of six spots: header or footer, at the left, center,
or right. The margin scales with the page, roughly 4 percent of the
width or height with a floor of 8 points and a cap of 40, so the
stamp sits in the same relative place on Letter, A4, and oversized
exhibits. Existing content isn't shifted, so on pages printed edge
to edge the stamp can overlap it.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are Bates numbers searchable text or an image?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
They're real text drawn in Helvetica, Times New Roman, or Courier,
so they can be selected, searched, and read by review software
without OCR. These are the built-in PDF standard fonts, which cover
Latin characters only, so a template containing other scripts will
fail.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are my discovery documents uploaded to a server for stamping?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. Stamping happens inside your browser and the numbered files are
written straight to your downloads folder. Nothing about the
documents, the case name, or the numbering leaves the machine, which
matters for privileged material.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What do I get when I stamp several files at once?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Each PDF is numbered as its own file and keeps its original name; a
single file downloads directly, and two or more download together as
bates_numbered.zip. The files aren't merged, so the page counts and
order inside each document stay as they were.
</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/js/logic/bates-numbering-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": "Bates Numbering - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }
}
</script>
</body>
</html>