Side Quest Starter: 5 free templates

You are a careful front-end developer. Build a landing page for: [WHAT IT IS, one sentence].
Audience: [WHO IT'S FOR]. Main promise: [ONE SENTENCE]. Tone: [e.g. friendly, direct].

Deliver exactly two files: index.html and styles.css. Rules:
- No frameworks, no build step, no external requests (no CDNs, no web fonts, no trackers).
- Sections: hero with headline + subheadline + one button; 3 benefit cards; a "how it works"
  list of 3 steps; an email signup block; a short FAQ (3 items, using <details>); footer.
- The signup block must be a clearly marked PLACEHOLDER with an HTML comment
  "<!-- REPLACE WITH EMAIL-SERVICE EMBED -->". The form must not send data anywhere yet.
- Mobile-first, responsive, readable at 360px wide. Dark or light theme: [CHOOSE].
- Accessible: semantic HTML, one <h1>, alt text, visible focus states, contrast ratio >= 4.5:1.
- Include <title>, meta description and Open Graph tags.
- Do NOT invent testimonials, statistics, logos or prices. Use clear placeholders instead.
After the code, list 5 things I must replace before publishing.

ROLE: You are my Weekly Review Agent. You only draft text for me to read. You never
claim to have sent, saved, scheduled or deleted anything, and you never act outside this chat.

INPUT: I will paste raw notes from the past week (bullets, to-dos, calendar items, thoughts).
If something is unclear, ask at most 3 questions BEFORE writing. If I say "go", write anyway
and mark guesses with [?].

OUTPUT (max 300 words, in this exact structure):
1. Wins (3-5 bullets, concrete, with numbers or outcomes if present in my notes)
2. Slipped / blocked (bullets, each with the likely reason)
3. Patterns I might be missing (max 2, flagged as observations, not facts)
4. Next week: top 3 priorities (one line each) + 1 "small win" that takes <= 30 minutes
5. One question for me to think about

RULES:
- Use only information in my notes. Do not invent tasks, dates, names or numbers.
- Keep my own wording where possible. No motivational fluff.
- If my notes contain secrets (passwords, keys, card numbers), stop and tell me to remove them.

Reply "Ready" and wait for my notes.

Build a single-file browser game: game.html (HTML + CSS + JavaScript, no libraries,
no external requests). Use a <canvas>.

Game: [PICK ONE: "dodge falling blocks", "catch falling coins", "snake", "tiny 2-lane runner"].
Controls: arrow keys / A-D on desktop AND on-screen left/right buttons on mobile.
Rules:
- One core loop only. Score goes up over time or per catch. One way to lose. Restart with Space or a button.
- Difficulty increases slowly (every 10 seconds).
- Show score and best score (save best score in localStorage).
- Simple shapes only (no images or audio files). Pleasant color palette, large readable text.
- Pause with P. 60 fps using requestAnimationFrame; use delta time so speed is the same on all screens.
- Keep it under ~250 lines with short comments.
Before the code, write 3 lines: the core loop, the win/lose condition, and what is OUT of scope.
Output the full file.

Build a single-file local-first personal finance tracker: tracker.html (HTML + CSS + JS,
no libraries, no external requests, no analytics).

Features:
- Add a transaction: date, amount, category, note. Income positive, expenses negative.
- Import a CSV (columns: date, amount, category, note) and export all data to CSV.
- Monthly summary: income, expenses, net, savings rate (net / income), and a bar chart by category (canvas).
- A "goal" box: target amount and monthly saving; show projected months to goal using plain
  arithmetic, with the formula visible. Offer an optional "assumed yearly growth %" input defaulting to 0.
- Data is stored ONLY in localStorage. Add a visible "Delete all data" button with confirmation.
- Show this text in the footer: "Educational tool. Not financial advice. Data stays in this browser."
- Currency symbol configurable (default: [YOUR CURRENCY]).

Safety rules for the code: never ask for bank credentials, never make network requests,
escape all user text (no innerHTML with raw input), validate numbers and dates.
Dark theme, responsive. Under ~300 lines. Include 5 sample rows of fake data behind a
"Load demo data" button. Output the full file.

Build a static gallery website: index.html, styles.css, gallery.js and data.json
(no frameworks, no external requests, no web fonts).

- data.json holds an array of items: {"file":"images/01.jpg","title":"","alt":"","prompt":"","tool":"","model":"","date":"","notes":""}.
  Create 3 example entries with placeholder file names (images/01.jpg ... images/03.jpg).
- gallery.js loads data.json and renders a responsive masonry-style grid (CSS columns is fine).
  Lazy-load images. Clicking an image opens a lightbox with the large image, the full prompt,
  a "Copy prompt" button, and the tool/model/date. Keyboard accessible: Esc closes, arrow keys navigate.
- Add a filter by tag (add "tags": [] to each item) and a search box over title and prompt.
- Required fields must be handled gracefully if missing. alt text is shown to screen readers.
- Add a footer note: "Images generated with AI tools. Prompts shared for learning."
- Dark, gallery-wall look, generous spacing, works at 360px width.
- Since browsers block fetch() on file:// pages, include a README.txt explaining how to preview with
  "python3 -m http.server" in the folder, or by uploading to a static host.
Then list what I must replace before publishing (images, titles, alt text, credits).