roadworthiness-sticker-generator/docs/adding-templates.md

Adding New Templates

This guide explains how to create and add new sticker templates to the generator.

Overview

Each template consists of three parts:

1. HTML file (templates/<id>.html) - The sticker structure with placeholders
2. CSS file (templates/<id>.css) - The sticker styles
3. Registry entry (templates/index.json) - Registers the template in the dropdown

Step-by-Step Guide

Step 1: Create the HTML Template

Create a new file templates/your-garage.html:

<div class="sticker sticker-your-garage">
    <div class="sticker-header">
        <span class="reg-number">{{regNumber}}</span>
    </div>
    <div class="sticker-barcode-row">
        <span class="barcode-number">{{barcodeNumber}}</span>
        <svg class="barcode"></svg>
    </div>
    <div class="sticker-body">
        <div class="sticker-info">
            <div><strong>From:</strong> {{fromDate}}</div>
            <div><strong>To:</strong> {{toDate}}</div>
            <div>{{modelNumber}}</div>
            <div>{{chassisNumber}}</div>
            <div>{{engineSerial}}</div>
            <div>{{engineCapacity}} cc</div>
        </div>
        <!-- Optional: Add logo section -->
        <div class="sticker-logo">
            <img src="path/to/logo.png" alt="Logo">
        </div>
    </div>
    <div class="sticker-footer">Your Garage Name, TEL: XXX XXXX</div>
</div>

Step 2: Create the CSS Styles

Create a new file templates/your-garage.css:

/* Your Garage Template Styles */
.sticker-your-garage {
    width: 280px;
    border: 2px solid #000;
    font-family: Arial, sans-serif;
    font-size: 11px;
    background: #fff;
    color: #000;
}

.sticker-your-garage .sticker-header {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 6px 8px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 4px;
}

.sticker-your-garage .sticker-barcode-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
    padding: 4px 8px;
    gap: 8px;
}

.sticker-your-garage .sticker-barcode-row .barcode-number {
    font-size: 11px;
    font-weight: 500;
}

.sticker-your-garage .sticker-barcode-row .barcode {
    height: 30px;
    flex: 1;
}

.sticker-your-garage .sticker-body {
    display: flex;
    border-bottom: 1px solid #000;
}

.sticker-your-garage .sticker-info {
    flex: 1;
    padding: 6px 8px;
    font-size: 10px;
    line-height: 1.4;
}

.sticker-your-garage .sticker-logo {
    width: 80px;
    border-left: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.sticker-your-garage .sticker-footer {
    text-align: center;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 500;
}

Step 3: Register the Template

Add your template to templates/index.json:

{
  "templates": [
    {
      "id": "rs-auto",
      "name": "RS AUTO"
    },
    {
      "id": "motca",
      "name": "Min. of Transport & Civil Aviation"
    },
    {
      "id": "your-garage",
      "name": "Your Garage Name"
    }
  ]
}

Important: The id must match your filename (without extension).

Available Placeholders

Use these placeholders in your HTML template. They will be replaced with user input:

Placeholder	Description	Example Output
{{regNumber}}	Registration number (with spaces)	A 0 F 7 9 3 0
{{barcodeNumber}}	Auto-generated 10-digit number	1162603748
{{fromDate}}	Start date	21-03-2026
{{toDate}}	End date	20-03-2027
{{modelNumber}}	Vehicle model	55S400-010C
{{chassisNumber}}	Chassis/VIN	MH355S004DK117181
{{engineSerial}}	Engine serial	55S-118388
{{engineCapacity}}	Engine CC	135.000

Barcode Element

To include a barcode in your template, add an SVG element with the class barcode:

<svg class="barcode"></svg>

The app will automatically generate and render the barcode into this element.

Tips

Naming Convention

• Use lowercase kebab-case for IDs: my-garage, auto-shop-123
• Use the same ID for HTML filename, CSS filename, and registry entry

Scoping Styles

Always prefix your CSS rules with your template's class to avoid conflicts:

/* Good - scoped to template */
.sticker-your-garage .sticker-header { ... }

/* Bad - affects all templates */
.sticker-header { ... }

Logo Options

SVG (inline):

<svg viewBox="0 0 80 80" class="logo-svg">
    <circle cx="40" cy="40" r="38" fill="none" stroke="#000" stroke-width="2"/>
    <text x="40" y="45" text-anchor="middle" font-size="20">LOGO</text>
</svg>

Image file:

<img src="templates/logos/your-logo.png" alt="Logo" class="logo-img">

No logo: Simply omit the logo section from your HTML.

Testing

1. Add your template files
2. Update index.json
3. Refresh the browser
4. Select your template from the dropdown
5. Fill in test data and verify the preview
6. Generate a PDF to test the output

Example Templates

Study the existing templates for reference:

• rs-auto.html / rs-auto.css - Template with logo
• motca.html / motca.css - Template without logo, different layout

Troubleshooting

Template not appearing in dropdown:

• Check index.json syntax (valid JSON)
• Verify the id matches your filename

Styles not loading:

• Check CSS filename matches the id
• Check browser console for 404 errors

Barcode not showing:

• Ensure you have <svg class="barcode"></svg> in your HTML
• Check browser console for errors

PDF looks different from preview:

• Ensure all styles are in the template CSS file
• Avoid using external images that might not load