mkrieger/asn-qr-code-label-generator
1
0
Fork 0
mirror of https://github.com/tmaier/asn-qr-code-label-generator.git synced 2026-03-14 08:33:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update label format from Avery L4731REV-25 to Avery 8167

Browse source 
Switch from A4/European labels to US Letter size Avery 8167 labels:
- Page size: A4 → US Letter (8.5" × 11")
- Label size: 25.4mm × 10mm → 44.45mm × 12.7mm (1.75" × 0.5")
- Grid: 7×27 (189 labels) → 4×20 (80 labels)
- Margins and gaps adjusted for Avery 8167 specifications

https://claude.ai/code/session_01FQAPQeBx9CFdivsHTqAGxn
This commit is contained in:
Claude 2026-01-27 17:40:41 +00:00
parent b2c263c11d
commit dcc039857c
No known key found for this signature in database
2 changed files with 31 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

28
CLAUDE.md
View file

@ -18,29 +18,29 @@ The application uses CDN-hosted dependencies:
Single-page application using AlpineJS for reactivity. Key structure in `index.html`:
- **`qrCodeApp()`** (line 255): AlpineJS component containing all application state and logic
- **`qrCodeApp()`** (line 259): AlpineJS component containing all application state and logic
- `generateLabels()`: Creates label data array with QR code URLs via external API (api.qrserver.com)
- `printLabels()`: Triggers browser print dialog
- Generates 189 labels per sheet (7 columns × 27 rows)
- Generates 80 labels per sheet (4 columns × 20 rows)
- **Print styling**: Uses CSS `@page` rule for A4 paper with zero margins (requires Chrome/Chromium)
- **Print styling**: Uses CSS `@page` rule for US Letter paper with zero margins (requires Chrome/Chromium)
- **Label format**: Hardcoded for Avery L4731REV-25 labels (see specifications below)
- **Label format**: Hardcoded for Avery 8167 labels (see specifications below)
## Avery L4731REV-25 Label Specifications
## Avery 8167 Label Specifications
Page: A4 (210mm × 297mm)
Page: US Letter (8.5" × 11" / 215.9mm × 279.4mm)
| Dimension | Value |
|-----------|-------|
| Label size | 25.4mm × 10mm |
| Grid | 7 columns × 27 rows (189 labels) |
| Top/Bottom margin | 13.5mm |
| Left/Right margin | 8.6mm |
| Horizontal gap | 2.5mm |
| Vertical gap | 0mm (labels touch) |
| Horizontal pitch | 27.9mm |
| Vertical pitch | 10mm |
| Label size | 1.75" × 0.5" (44.45mm × 12.7mm) |
| Grid | 4 columns × 20 rows (80 labels) |
| Top/Bottom margin | 0.5" (12.7mm) |
| Left/Right margin | 0.3" (7.62mm) |
| Horizontal gap | 0.3" (7.62mm) |
| Vertical gap | 0" (labels touch) |
| Horizontal pitch | 2.05" (52.07mm) |
| Vertical pitch | 0.5" (12.7mm) |
## Code Style

34
index.html
View file

@ -19,7 +19,7 @@
@page {
/* Remove default margin set by the browser */
margin: 0mm;
size: A4;
size: Letter;
}
}
</style>
@ -56,8 +56,8 @@
<p>
This tool generates QR code labels for the
<abbr title="Archive Serial Number">ASN</abbr> feature. You can
generate labels for up to 189 documents at once. The labels are
formatted to <strong>fit on Avery L4731REV-25 labels</strong>.
generate labels for up to 80 documents at once. The labels are
formatted to <strong>fit on Avery 8167 labels</strong> (US Letter size).
</p>
<p>
@ -100,12 +100,12 @@
<p
class="prose prose-sm prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 max-w-none"
>
The number of labels generated will be 7 x 27 = 189. This means
The number of labels generated will be 4 x 20 = 80. This means
the <strong>next batch</strong> of labels should
<strong
>start with
<span x-text="parseInt(startNumber, 10) + 189"
>190</span
<span x-text="parseInt(startNumber, 10) + 80"
>81</span
></strong
>.
</p>
@ -198,14 +198,14 @@
</div>
<div
class="container mx-auto w-[210mm] border px-[8.6mm] py-[13.5mm] print:w-full print:max-w-full print:border-0"
class="container mx-auto w-[215.9mm] border px-[7.62mm] py-[12.7mm] print:w-full print:max-w-full print:border-0"
>
<!-- Display QR Code Labels -->
<ol class="grid grid-cols-7 gap-x-[2.5mm]">
<ol class="grid grid-cols-4 gap-x-[7.62mm]">
<template x-for="label in labels">
<li class="h-[10mm] w-[25.4mm]">
<li class="h-[12.7mm] w-[44.45mm]">
<div
class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
class="flex h-[11.7mm] w-[43.45mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
:class="{'even:border-transparent odd:border-transparent': !borderToggle}"
>
<img
@ -213,17 +213,17 @@
alt=""
width="100"
height="100"
class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
class="mr-[1mm] aspect-square h-[11mm] w-[11mm] flex-none"
referrerpolicy="no-referrer"
/>
<div
class="flex-grow"
:class="{
'text-[3.9mm]': label.text.length <= 6,
'text-[3.2mm]': label.text.length == 7,
'text-[2.7mm]': label.text.length == 8,
'text-[2.4mm]': label.text.length == 9,
'text-[2.1mm]': label.text.length >= 10,
'text-[4.5mm]': label.text.length <= 6,
'text-[4mm]': label.text.length == 7,
'text-[3.5mm]': label.text.length == 8,
'text-[3mm]': label.text.length == 9,
'text-[2.5mm]': label.text.length >= 10,
}"
x-text="label.text"
></div>
@ -294,7 +294,7 @@
generateLabels() {
this.labels = [];
let totalLabels = 7 * 27; // 7 columns x 27 rows
let totalLabels = 4 * 20; // 4 columns x 20 rows
let startNumberInt = parseInt(this.startNumber, 10); // Ensure startNumber is an integer
let leadingZerosInt = parseInt(this.leadingZeros, 10); // Ensure leadingZeros is an integer
for (let i = 0; i < totalLabels; i++) {