Waste Collection Calendar: One File, One Plan, 10 minutes of prompting

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.

This should not be the default. It may save money upfront, but it creates extra work and extra mistakes for the people who need it most.

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.

<figure class="demo-embed"> <iframe src="/files/blog/waste-collection-plan/Borik-1.pdf" title="Original municipality waste collection PDF (Bôrik-1)" loading="lazy" ></iframe> <figcaption>The original PDF: hard to scan, hard to maintain, easy to misread.</figcaption> </figure>

Today, there is no reason to keep this workflow. With a single prompt, you can turn a PDF like this into an interactive 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. <a href="/waste-collection-plan.html" target="_blank" rel="noopener noreferrer"> Open the interactive calendar demo </a>

You can scroll to the end for the full original prompt: <a href="#original-prompt">see the prompt</a>.

This is not a product. It is a utility: turn a dense table into something you can check quickly and trust.

<figure class="demo-embed"> <iframe src="/waste-collection-plan.html" title="Waste Collection Calendar demo" loading="lazy" ></iframe> <figcaption>All dates live in one schedule object. Edit it once and the whole year updates.</figcaption> </figure>

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.

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: clear prompts to get a usable draft, followed by real decisions about data, UX, and edge cases.

The original prompt

<pre style="font-size:12px; line-height:1.1"> 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. </pre>

Why this matters

The demo

What this app changes

The prompt, in spirit

The original prompt

Need a technical go/no-go or senior technical leadership?