How to Use WINNIE

Overview

The app is designed for fast certificate production. You prepare a background template, load a recipient list, adjust text placement, preview the result, and export certificates as individual PDFs, a ZIP archive, or one combined PDF.

Files and Deployment

For normal use, keep these files together in the web root or Docker image:

index.html
documentation.html
default_background.jpg
namelist.txt
template/
  templates.json
  default_background.jpg

The Dockerfile copies the full project into the Nginx web root inside the container:

FROM nginx:alpine
COPY . /usr/share/nginx/html

After Docker deployment, the app should be reachable at your mapped host and port. The documentation page is available at /documentation.html.

Templates

The Background panel includes a Template area. Templates are images stored in the template/ folder and listed in template/templates.json.

Add a Permanent Template

1. Copy the image into the template/ folder.
2. Add the image to template/templates.json.
3. Refresh the app or click Refresh in the Template area.
4. Click the template thumbnail to apply it as the certificate background.

{
  "images": [
    {
      "file": "default_background.jpg",
      "label": "Default Background"
    },
    {
      "file": "course-template.jpg",
      "label": "Course Template"
    }
  ]
}

In Docker, files copied during build are fixed inside the image. To add templates without rebuilding, mount a VPS folder to /usr/share/nginx/html/template when running the container.

Background

The certificate background is the visual base used for every generated certificate.

Auto-loaded Background

If default_background.jpg exists beside index.html, WINNIE loads it automatically when the page opens.

Template Background

Use the Template area to select a predefined background from the template/ folder.

Manual Upload

Click the upload zone or drag an image into the Background panel. JPG and PNG are recommended. A portrait A4 ratio works best.

Fallback Background

If no background is available, WINNIE generates a clean white certificate background with a gold border.

Event Details

Use the Event Details panel to set the text that appears on every certificate.

Date ranges are formatted automatically, including single-day dates, same-month ranges, and cross-month ranges.

Staff Lists

The Staff List panel controls who receives certificates.

Plain Text

Enter one name per line, or use comma-separated names. Names are converted to uppercase and duplicates are removed.

JOHN DOE
JANE SMITH
AHMAD BIN ALI

CSV With Custom Fields

CSV files use the first column as the recipient name. Every extra column becomes a custom field that can be positioned on the certificate.

Name,Position,Phone Number
JANE DOE,Officer 1,011123456
JOHN DOE,Officer 2,011123457

Selection Tools

• Select All checks every recipient.
• None unchecks every recipient.
• Invert flips the current selection.
• Search filters the visible list by name.
• Filter shows all, checked, or unchecked names.

Field Positions

Field Positions controls where text appears on the A4 certificate. Coordinates are in millimeters from the top-left of the page. A4 portrait is 210mm wide and 297mm tall.

Set X to 105 for centered text. Adjust Y to move text vertically. Use the visibility checkbox to hide fields you do not need.

Preview

The Live Preview shows the current certificate using the selected background, recipient, event text, typography, and field positions.

• Use the left and right arrows to move through selected recipients.
• Unchecked recipients are skipped during preview navigation.
• Long names should be checked manually before export to confirm alignment.

Export

WINNIE provides two export paths from the Generate controls.

Download Certificates

Creates one PDF per selected recipient. If Bundle as ZIP is checked, the PDFs are packaged into one ZIP file.

Download as Single PDF

Creates one multi-page PDF containing all selected recipients.

Background Compression

Before export, the confirmation popup lets you compress the background image. This can reduce ZIP or PDF size when the source image is large.

Generated files are downloaded by the browser. They are not uploaded to a server.

Backup and Restore

Backup Dataset saves the current setup into a ZIP file. The backup includes event details, typography, field positions, staff names, selections, custom CSV data, and the active background.

Restore Dataset loads a backup ZIP and restores the saved setup. This is useful for recurring courses or sharing certificate configurations with another workstation.

Mobile

On small screens, WINNIE switches to a tabbed layout with these sections: Background, Event, Typography, Staff, Fields, and Generate.

The preview remains visible while you switch between tabs, making it easier to adjust the certificate on a phone or tablet.

Troubleshooting

Templates do not show

Open /template/templates.json in the browser. If it returns 404, the folder was not copied or mounted into the served web root. If the JSON opens, check that filenames match the actual image files.

Auto-load files do not work locally

Opening index.html directly with file:// blocks automatic fetches in many browsers. Use Docker, Nginx, Apache, or a local live server.

PDF files are too large

Use the background compression option during export, or replace the background with a smaller JPG.

Text is misaligned

Adjust the X and Y values in Field Positions. Preview several recipients before generating the full batch.

CSV fields do not appear

Make sure the CSV has a header row and at least two columns. The first column must contain names.