Clay habit app home

Turn habits and completion data into a complete soft clay app home with progress, statistics, a habit list and navigation. A compact direction to help the next screen feel deliberate, specific, and easy to remix.

Create a complete light claymorphism habit app home as a Web prototype, with previewable page code rather than component recommendations. Use a tool that generates HTML/CSS. This is not a native app or a real account service.

INPUT
Product/user: [product name, preferred user name, language]
Habits/states: [each title, time/goal, done or pending; actual examples welcome]
Summary: [date, completed/total count, streak; mark unknowns]
Statistics/navigation: [up to two real metrics, supported pages and ability to add habits]
Assets/constraints: [avatar, available fonts, brand rules; or none]

MISSING INFORMATION
Ask up to three blocking questions about tasks/data. Clearly labeled fictional “demo data” may be used for a specimen; never fabricate real users' streaks, names or outcomes. Flag conflicts between summary and rows before treating either as truth. Unknown streaks must not become invented records.

METHOD
1. Build a complete 390–430px mobile-first home: date and one greeting, progress hero, two statistics, habit rows, then navigation/add entry. Center on desktop and shrink to narrower viewports. Natural scrolling, no simulated system status bar and no forced phone height.
2. Use #EEF0F5 ground, #F6F7FB surfaces and #3A3F4A text, with sage #BFE3C6, peach #FFD9C2, butter #FFE9B0 and sky #C9E4F6 on selected cards. Large radii, soft bottom-right drop shadows, top-left highlights and mild inset shadows create inflated clay. Shadows cannot be the sole control boundary. Prefer available rounded system type; verify any optional font rights.
3. Derive progress from completed/total rows. Zero total means “no habits yet”, never division by zero. Each row has an icon, title, goal and explicit state. Done uses a check plus text; pending has a visible boundary. Do not rely on color alone. Calculate actual text/background contrast instead of treating source assertions as measurements.
4. When local ticking is authorized, implement check/uncheck and synchronized counts. Disclose that it is a current-page demo and whether refresh retains state. Enable add only for actual capability or an explicit local demo. Unsupported navigation is visibly labeled demo and disabled. In-flow bottom navigation must leave every row and add button uncovered.
5. Use semantic HTML, CSS and necessary JS. Keyboard-operable checkboxes, visible focus and common touch targets at least 44px. Let long titles wrap; disable decorative motion for reduced motion. Check zero habits, all done, long names and 390px/1440px layouts. Separate executed checks from pending verification.

DELIVER
A. Short structure explanation, data definitions and assumptions.
B. One complete index.html code block with inline CSS/necessary JS and easy-to-replace data/style variables.
C. Behavior/check table: control / actual local behavior or unimplemented / expected / measured or unverified. Claim only implemented local capabilities.

No invented health effects, reward schemes, cross-device sync, notifications or user studies. Preserve actual facts; label specimen data.
Site adaptation of Zhou Jason / Superdesign, Claymorphism Habit Tracker (prompt text CC0-1.0). Adds data consistency, complete-page code and behavior boundaries; no source screenshots, fonts or native status bar reused: https://github.com/superdesigndev/superdesign-prompts/blob/6c60906945208df5aa2187f19f8ddfe9b2948aa0/prompts/claymorphism-mobile-app-pastel-habit-tracker-home/README.md .

invented real completion records, inconsistent totals, zero-division progress, shadow-only boundaries, color-only states, obscured rows, fake sync/notifications, unrun tests claimed passed