Event Certificate Generator Webpage

I need a single-page HTML application that lets me create and immediately download event participation certificates through the browser—no server-side component. The page must be fully responsive, built with vanilla HTML, CSS and JavaScript (you may add a lightweight JS library for the QR code).

Core flow
• User types the participant’s name and selects or types the area of services.
• On Generate, the script assigns a unique, self-incrementing document ID, places today’s date, and embeds a QR code that encodes that ID (or a future URL pattern I can change in the code).
• A styled certificate preview appears instantly; a second click exports the design as a high-resolution PDF or PNG ready for printing. On providing the blank certificate

Certificate must show
– Participant’s name (as entered)
- Participants photo (as entered)
– Area of services (as entered)
– Document ID (auto)
– QR code (auto)

Acceptance criteria
1. All generation happens client-side; the page works offline once loaded.
2. IDs persist during the session and reset only on reload—keep the logic simple in localStorage.
3. QR codes scan correctly on a standard smartphone reader and lead to the encoded string.
4. Final export keeps layout integrity on A4 in both portrait and landscape (CSS @media print).

Please include clean, commented source files plus a short README so I can tweak colors, fonts and the ID prefix later.