From a8b55150f37997ef0e991d9cd3c4f630cabec7a9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 11 Jan 2026 13:31:49 +0000
Subject: [PATCH] Add optional PDF extension checkbox to invoice path generator

- Add checkbox control to toggle .pdf extension
- Default state is unchecked (no extension)
- Update path generation logic to conditionally add extension
- Style checkbox to match Apple-inspired design
---
 html/invoice-path-generator.html | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/html/invoice-path-generator.html b/html/invoice-path-generator.html
index 39235cd..7efd070 100644
--- a/html/invoice-path-generator.html
+++ b/html/invoice-path-generator.html
@@ -63,6 +63,25 @@
   box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
 }
 
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: auto;
+  margin-right: 8px;
+  cursor: pointer;
+  accent-color: #0071e3;
+}
+
+.checkbox-label span {
+  user-select: none;
+}
+
 .output {
   margin-top: 28px;
   padding: 16px;
@@ -151,6 +170,13 @@ <h1>Invoice Path Generator</h1>
       <input type="text" id="invoice" placeholder="INV-001">
     </div>
 
+    <div class="field">
+      <label class="checkbox-label">
+        <input type="checkbox" id="addPdfExt">
+        <span>Add .pdf extension</span>
+      </label>
+    </div>
+
     <div class="output">
       <div class="output-label">Generated Path</div>
       <div class="output-value" id="result"></div>
@@ -168,6 +194,7 @@ <h1>Invoice Path Generator</h1>
 const dateInput = document.getElementById('date');
 const companyInput = document.getElementById('company');
 const invoiceInput = document.getElementById('invoice');
+const addPdfExtCheckbox = document.getElementById('addPdfExt');
 const result = document.getElementById('result');
 const copyBtn = document.getElementById('copyBtn');
 
@@ -194,7 +221,8 @@ <h1>Invoice Path Generator</h1>
     const companyFormatted = sanitizeForFilename(company);
     const invoiceFormatted = sanitizeForFilename(invoice);
     if (companyFormatted && invoiceFormatted) {
-      result.textContent = `${date}_${companyFormatted}_${invoiceFormatted}.pdf`;
+      const extension = addPdfExtCheckbox.checked ? '.pdf' : '';
+      result.textContent = `${date}_${companyFormatted}_${invoiceFormatted}${extension}`;
     } else {
       result.textContent = '';
     }
@@ -206,6 +234,7 @@ <h1>Invoice Path Generator</h1>
 dateInput.addEventListener('input', generatePath);
 companyInput.addEventListener('input', generatePath);
 invoiceInput.addEventListener('input', generatePath);
+addPdfExtCheckbox.addEventListener('change', generatePath);
 
 copyBtn.addEventListener('click', async () => {
   const text = result.textContent;