Why this matters
Our municipality publishes the waste schedule as a dense PDF table. It is not just bad on a phone — it is bad even on paper: hard to read, hard to update, and in an unfamiliar format. Last year we got a wall calendar. This year I needed a pen to figure out which ZKO group is ours.
That is not acceptable. It feels like the worst option out of all possibilities: it might save money upfront, but it creates more work and more mistakes for everyone who has to use it.
And it gets worse at city scale: there are separate PDFs per area, each PDF has a list of streets, and each street is assigned to a ZKO/BRKO group that drives the pickup dates. That information wants to be a search box with autocomplete, not a manual lookup exercise.
Today, there is no reason to accept this workflow. With a single prompt, you can turn a PDF like this into an interactive, easy-to-use app in about 10 minutes, then refine it with your own judgment.
This one took me about 10 minutes.
The demo
You can open the demo in a new tab, or use the embedded version below. Open the interactive calendar demo
You can scroll to the end for the full original prompt: see the prompt.
This is not a product. It is a utility: turn a dense table into something you can glance at and trust.
What this app changes
- You see the whole year at once, month by month.
- Each day shows colored dots for the waste streams.
- You can toggle streams on/off, but the core ones stay locked on.
- You can search your street with autocomplete to auto-select the right ZKO group.
- You can click any day to see the details instantly.
This is the kind of “small” UX improvement that saves real time, because it matches how people actually use schedules: quick checks, on a phone, in context.
And once the schedule is structured, it can be extended in obvious ways (for
example: export as an .ics calendar for iCal/Google Calendar).
The prompt, in spirit
- One HTML file, no dependencies
- A full 2026 calendar, Monday-first weeks
- Color-coded waste streams + legend
- Click a day to see what gets collected
- All dates editable in a single schedule object
The same pattern applies to product work: tight prompts to get a usable draft, followed by real decisions about data, UX, and edge cases.
The original prompt
Create a **single-file, standalone HTML app** (one `.html` file) that visualizes the **waste collection schedule for year 2026** as a **full-year calendar grid (12 months)**.
### Inputs / data
1. Use the schedule data from the attached **PDF `Borik-1.pdf`** (Bôrik area).
* Parse the **collection days per month** for these streams (columns):
* `Plast`, `Papier`, `VKM+kov`
* `ZKO1`, `ZKO2`, `ZKO3`
* `BRKO` (note: in this PDF it’s one BRKO route, not BRKO1/2)
* `Záhrada` (if present; otherwise keep the toggle but empty)
* Days in the table are day numbers within each month.
2. Parse the **street assignment** section from the PDF:
* Build a mapping `streetName -> ZKO route (ZKO1/ZKO2/ZKO3)` including **house-number rules** where the PDF splits a street (e.g., ranges like `č. 17–43`, or single numbers).
* If a street has multiple possible ZKO routes (split street), selecting a ZKO route must depend on the **house number** if provided; otherwise show an “ambiguous” message and allow manual override.
### UI requirements
* Always render the calendar immediately on load (default view must show calendar).
* Day cells must show colored markers (dots) for streams active on that day.
* Add a **legend** and **toggle checkboxes** for streams.
* **Always selected and locked ON**:
* `Plast`, `Papier`, `VKM+kov`
* Default selection on load (besides locked-on streams):
* `ZKO3` + `BRKO`
* Add a **street search** input with typeahead:
* Diacritics-insensitive matching (must work on Safari iOS; do NOT use unsupported Unicode regex like `\p{Diacritic}`).
* When a street is selected, auto-select the correct ZKO route (ZKO1/2/3) for that street (and BRKO), without hiding the calendar.
* Add optional **house number** field used to disambiguate split streets.
* Add optional **manual ZKO override** dropdown (Auto / ZKO1 / ZKO2 / ZKO3).
* Show in a status panel what was resolved (street, house number, selected ZKO, reason).
### Styling
* Dark theme.
* Use the **same colors as in the PDF** for each waste stream (Plast yellow, Papier blue, VKM+kov red, ZKO grey, BRKO brown, Záhrada green).
### PWA requirements (single file)
* Make it installable as a **PWA** when hosted:
* Include a manifest via a `data:` URL (inline) and an app icon (inline SVG is fine).
* Register a service worker via an inline Blob (single-file approach) to cache `./` for offline usage.
* Note: it’s OK to mention that SW works only over HTTPS/localhost (not `file://`).
### Output
* Provide the final `.html` file content and also **write it to a file** named:
* `waste-calendar-2026-borik-pwa.html`
so I can download and open it directly.