Enhance fillable template generation by adding logo and refactoring header drawing

- Integrated a logo into the fillable PDF templates for improved branding.
- Refactored the header drawing logic in create-fillable-template.js to streamline the process and ensure consistency across multiple pages.
- Updated the membership and membership fillable PDF templates to reflect these changes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harheimertc-website",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Moderne Webseite für den Harheimer Tischtennis Club",
   "private": true,
   "type": "module",

scripts/create-fillable-template.js

@@ -6,6 +6,8 @@ async function create() {
   const page = pdfDoc.addPage([595.28, 841.89]) // A4
   const helv = await pdfDoc.embedFont(StandardFonts.Helvetica)
   const helvBold = await pdfDoc.embedFont(StandardFonts.HelveticaBold)
+  const logoBytes = fs.readFileSync('assets/images/logos/Harheimer TC.png')
+  const logoImage = await pdfDoc.embedPng(logoBytes)
   const { width, height } = page.getSize()
 
   // left column moved further left to align with checkboxes
@@ -32,14 +34,38 @@ async function create() {
   // Header: centered club name and a full-width horizontal bar underneath (~2mm high)
   const headerText = 'Harheimer Tischtennis-Club 1954 e.V.'
   const headerSize = 20
-  const textWidth = helv.widthOfTextAtSize(headerText, headerSize)
-  const headerX = (width - textWidth) / 2
-  const headerY = height - 72
-  page.drawText(headerText, { x: headerX, y: headerY, size: headerSize, font: helv })
   // draw full-width bar directly under the header; 2mm ≈ 5.67 points
   const barHeight = 5.67
-  const barY = headerY - 20
-  page.drawRectangle({ x: 0, y: barY, width: width, height: barHeight, color: rgb(0,0,0) })
+  const drawHeader = (targetPage) => {
+    const { width: pageWidth, height: pageHeight } = targetPage.getSize()
+    const textWidth = helv.widthOfTextAtSize(headerText, headerSize)
+    const headerY = pageHeight - 72
+    const logoSize = 52
+    const logoY = headerY - 13
+
+    targetPage.drawImage(logoImage, {
+      x: leftX,
+      y: logoY,
+      width: logoSize,
+      height: logoSize
+    })
+    targetPage.drawText(headerText, {
+      x: (pageWidth - textWidth) / 2,
+      y: headerY,
+      size: headerSize,
+      font: helv
+    })
+    targetPage.drawRectangle({
+      x: 0,
+      y: headerY - 20,
+      width: pageWidth,
+      height: barHeight,
+      color: rgb(0,0,0)
+    })
+
+    return headerY
+  }
+  const headerY = drawHeader(page)
 
   // Labels and lines
   // Labels left-aligned in their columns
@@ -231,12 +257,7 @@ async function create() {
   // --- Add a second page with the same header and horizontal bar ---
   const page2 = pdfDoc.addPage([595.28, 841.89])
   const { width: width2, height: height2 } = page2.getSize()
-  const textWidth2 = helv.widthOfTextAtSize(headerText, headerSize)
-  const headerX2 = (width2 - textWidth2) / 2
-  const headerY2 = height2 - 72
-  page2.drawText(headerText, { x: headerX2, y: headerY2, size: headerSize, font: helv })
-  const barY2 = headerY2 - 20
-  page2.drawRectangle({ x: 0, y: barY2, width: width2, height: barHeight, color: rgb(0,0,0) })
+  const headerY2 = drawHeader(page2)
 
   // --- Page 2: SEPA-Lastschriftmandat text and fields ---
   // move SEPA section slightly up so title sits closer to the header bar
@@ -365,11 +386,7 @@ async function create() {
   // --- Add a third page with same header/bar/footer and title 'Einwilligungserklärung' ---
   const page3 = pdfDoc.addPage([595.28, 841.89])
   const { width: width3, height: height3 } = page3.getSize()
-  const headerX3 = (width3 - textWidth) / 2
-  const headerY3 = height3 - 72
-  page3.drawText(headerText, { x: headerX3, y: headerY3, size: headerSize, font: helv })
-  const barY3 = headerY3 - 20
-  page3.drawRectangle({ x: 0, y: barY3, width: width3, height: barHeight, color: rgb(0,0,0) })
+  const headerY3 = drawHeader(page3)
 
   // title for page 3
   const page3Title = 'Einwilligungserklärung'