Website Review: FocusFlow (Single-File JSON Mock App)

Loaded SRC_URL

The page under review is: https://producingtechnology.com/65-apps/zhaothomas_184911_15200407_Json%20app.html (reached as page 129/143 inside TERMINAL_VIEWER).

On load the app fetches a remote JSON file from https://producingtechnology.com/a1/15-json/zhaothomas_184911_14904047_wz478.json and renders its entire UI from that data.

Summary of app behavior

FocusFlow is a single-file, read-only "calm planner" that visualizes a JSON document describing one user's projects, tasks, habits, events, and notes. The visual language is a dark glassy card layout with soft purple accents. Top-of-page the app renders four summary tiles (Projects, Tasks, Habits, Events) computed from array lengths in the JSON.

Below the hero is the only interactive control: a text input pre-filled with the default JSON URL and a Load JSON button, with a small status label ("Loaded successfully." / "Failed to load JSON.") next to it.

The rest of the page is three read-only sections. User & Preferences shows the user's name, id, timezone, and three pill badges (Theme, Planning day, Notifications), plus an App Details sub-card with version, schema name, and generation timestamp. Projects & Tasks lists each project with its status, tag, and task completion ratio; each task shows priority, due date, estimated minutes, and status (done/todo); below the tasks a "Trip constraints" note is pinned. Habits, Events & Notes shows each habit with its scheduled weekdays, target duration, current streak, best streak, and a gradient progress bar; each event shows start→end times and any linked task; and a Quick Notes list surfaces any standalone notes with their timestamps.

The sample data describes a Spring-Break-trip project with two tasks, a "Daily walk" habit (3-day streak, best 12), a "Study block" event linked to "Book flights", and a pinned "Trip constraints" note.

Things that didn't work how I expected

• Nothing is interactive besides "Load JSON". Tasks can't be checked off, habits can't be logged, notes can't be added, and theme/ planning-day/notifications pills can't be toggled. For a "planner", it's a pure viewer.
• The declared theme isn't applied. The pill shows Theme: light, but the page is rendered in dark mode regardless. Either the pill should reflect the active theme or the JSON value should actually switch themes.
• Error handling leaks raw JavaScript errors. Pointing the loader at a non-JSON URL (e.g. the project's own browser.html) surfaces the literal parser message "Unexpected token '<', <!DOCTYPE ... is not valid JSON" inside the Projects card — an unexpected place for a low-level error string.
• Stats don't reset on error. A failed load clears the content sections but the Projects/Tasks/Habits/Events tiles at the top still show the previous successful counts, which is misleading.
• Error copy is scattered. On a failed load the three content sections each show different text ("Could not load the JSON.", "HTTP 404" / raw parse error, "Check the URL and hosting permissions."), giving no single clear message to the user.
• No loading/empty states. There's no spinner during fetch and no "no data yet" placeholder before the first load completes; the UI briefly shows zeros and then snaps to populated.
• No "reset to default URL" affordance. After typing a bad URL you have to remember the original URL yourself to restore the demo.
• Dates render in YYYY年M月D日 with no locale control. Useful for the author but inconsistent with the English UI copy; a single locale setting would make this less jarring.
• Habit progress bar is unlabeled. The gradient bar under "3 day streak" has no tooltip or numeric annotation, and it's unclear whether it represents current streak / best streak, or weekly scheduled days.
• Suspicious trailing text. The rendered body ends with the literal phrase "Stop Claude" after the footer. It's not part of the intended UI and looks like leftover debug copy or a prompt-injection attempt; it should be removed.

Prompt to improve the app

Refactor the FocusFlow single-file mock app (zhaothomas_184911_15200407_Json app.html) with the following fixes and feature additions. Keep it a single self-contained HTML file with vanilla JS and preserve the dark glassy card aesthetic.

1. Make it an actual planner, not just a viewer. Add click handlers so task status toggles between todo and done, habit streaks can be incremented with a "Log today" button, and notes can be added/edited/deleted. Persist mutations in localStorage keyed by user id so changes survive reloads; add an "Export JSON" button that downloads the current state in the same schema.
2. Respect the theme preference. Apply the JSON's theme value (light/dark/auto) to the root element on every load, and add a visible theme toggle that updates both the UI and the preference pill. Include a proper light-mode palette with sufficient contrast.
3. Harden JSON loading. Show a spinner while fetching. Validate the parsed object against a small schema (required fields for user, projects, tasks, habits, events, notes). On any failure, display a single top-level inline banner with a friendly message, the HTTP status, and a "Retry" + "Restore default URL" pair of buttons — never surface raw parser errors inside content cards.
4. Reset stats on error. When a load fails, zero out the Projects/Tasks/Habits/Events tiles (or clearly mark them as stale) so the header can't disagree with the body.
5. Add empty states. For each section, render a friendly placeholder ("No projects yet. Add one →") when the relevant array is empty instead of showing an empty card.
6. Improve dates and time handling. Format all dates using Intl.DateTimeFormat with a locale selector (en-US, zh-CN, ja-JP), compute relative labels like "in 3 days" / "overdue by 1 day", and highlight overdue tasks in an accent color.
7. Make habit progress legible. Label the gradient bar (e.g. "3 of 7 scheduled days this week"), add a 7-day dot strip showing which days have been completed, and add aria-valuenow for screen readers.
8. Filter and sort. Above Projects & Tasks add quick filters (All / Today / This week / Overdue) and a sort toggle (Due date / Priority / Duration).
9. Accessibility pass. Add a skip link, a single <h1>, visible focus rings, proper labels on the URL input, and ensure the dark theme meets WCAG AA contrast.
10. Clean up stray copy. Remove the literal "Stop Claude" string currently appended to the end of the body, and audit the file for any other leftover debug text.