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 16:43:31 +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

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++) {