Build a single-page website called "Hamster Chronicles": a living story

where Squeektoshi the hamster's real wheel on Squeekchain writes the plot.

Pure front-end (HTML/CSS/JS), no backend, no wallet connection, no

transactions, no API keys. Read-only.

DATA SOURCES (public, CORS-enabled, fetch directly from the browser):

• GET https://api.squeekchain.com/v1/status measurement.coreStatus (SPINNING / IDLE), measurement.rpmMilli,

  measurement.speedMmPerSecond, measurement.cumulativeWorkUnits,

  builder.anchor.blockHeight, builder.anchor.blockProgress (0 to 1e9)

• GET https://api.squeekchain.com/v1/settlements?range=24h buckets[] with workAdded, settlementCount, completedBlockCount

• GET https://api.squeekchain.com/v1/economy/state supply.totalMintedBaseUnits (divide by 1e18 for SQK)

Poll /status every 20 seconds. If an API call fails, keep the last good

data, show a small "reconnecting" badge, never blank the page.

CORE MECHANIC: Each time cumulativeWorkUnits increases by a new chunk, treat it as a new

"round" and generate a new story chapter. Chapter type depends on the work

added in that round:

• 0 work: "Nap Chapter" (calm, cozy, village rests, gossip at the tavern)
• 1 to 499: "Journey Chapter" (exploring, meeting NPCs, small discoveries)
• 500 or more: "Storm Chapter" (big battle, dramatic event, heroes needed) Generate chapter text (120 to 200 words) with a deterministic template

engine: pick from large pools of openings, settings, NPCs, events and

endings, seeded by a hash of cumulativeWorkUnits and blockHeight so the

same round always produces the same chapter. Include real numbers from the

API inside the story (RPM, work, block progress) as in-world details,

for example "the wheel hummed at 42 RPM". Each chapter ends with 2 to 3

choices for what happens next.

CHARACTERS AND MEMORY (localStorage, wrapped in try/catch, work when

empty):

• "Join the village" form: character name (max 20 chars, strip HTML), role (Knight, Baker, Scout, Bard, Merchant).

• Visitors click a choice on the latest chapter; their choice is saved and the NEXT chapter references the winning choice and mentions the

  character by name and role.

• Show a "Your character" card: name, role, choices made, contribution points (+1 per vote).

• Be honest in the UI footer: votes and characters are stored locally in this browser only.

LAYOUT:

1. Hero banner: title, one-line tagline "The wheel writes the story", live status pill: fire emoji + "Squeektoshi is running" with RPM, or

   zzz emoji + "Squeektoshi is sleeping".

2. Live wheel: a pixel-art wheel animation that spins at the real RPM and stops when coreStatus is not SPINNING.

3. Latest chapter card (large, readable serif font) with chapter type badge (Nap / Journey / Storm), round number, and the choice buttons.

4. Chapter archive: scrollable list of previous chapters, newest first, stored in localStorage (keep the last 50).

5. Last-24h chart: simple bar chart (inline SVG, no external library) from settlements buckets[].workAdded.

6. "How it works" section: 3 short steps explaining wheel work to chapter type to story.

7. Footer: link to https://squeekchain.com, note "Read-only, no wallet, no transactions. Community project."

DESIGN:

• Cozy storybook meets pixel-art. Dark navy background with warm gold accent (matching Squeekchain's dark dotted grid and gold look),

  parchment-colored chapter cards, pixel font for headings and a readable

  serif for story text.

• Fully responsive, mobile first. Wide content scrolls inside its own container, never sideways on the page.

• Respect prefers-color-scheme with CSS variables; include a light parchment variant.

• Subtle animations only: wheel spin, fade-in for new chapters.

QUALITY RULES:

• Everything self-contained in one file; no remote images or scripts except Google Fonts with fallbacks.
• Handle empty, loading and error states gracefully.
• Escape all user-entered text before rendering.
• Add clear comments and keep the code readable.