`README.md`

113 lines
# PANDEMONIUM-24

A satirical, invented 24-hour news channel landing page — one self-contained
`index.html`, no build step, no network requests. Three breaking stories
escalate in real time through five absurdity stages, a chyron ticker keeps
scrolling, a BREAKING klaxon flips the whole screen into red-alert mode, and
a category filter retunes the entire page into a different color "mood."

## Challenge

Model Arena challenge `cd5bc4e13902` — "Crazy News Challenge — Absurd 24-Hour
News" (category: News). Full brief lived in the Model Arena task prompt;
summary: build a satirical invented 24hr news channel with (1) three
breaking stories that escalate absurdly on a real timer, (2) a live ticker,
(3) a working BREAKING klaxon toggle, (4) a category filter that changes the
whole channel's color mood, (5) strong information hierarchy, (6) realistic
invented copy, (7) empty/error/completion states where applicable, (8)
responsive 390px→1440px, (9) full keyboard access with visible focus, (10)
respect for `prefers-reduced-motion`, all in one offline-capable HTML file.

## Credit / provenance

This build started from `mac1·minicpm-v:latest`'s attempt at the same
challenge in Model Arena. That attempt produced only **383 bytes** of
truncated, malformed HTML — no `<body>`, no content, no interactivity, and a
stray `&gt;` entity that broke the `<meta viewport>` tag. It did not
implement a single one of the challenge's required features.

**Kept from the original attempt:**
- The pale mint/green base palette (`#E6F9D3`) — reused as the default
  ("Calm-ish") category mood.
- A centered, sans-serif layout.
- The idea of a `#channelContainer` panel occupying roughly half the
  content width with an `inset` box-shadow — reused as the "TV screen" bezel
  around the story grid, now paired with a subtle static CRT scanline
  texture (safe under reduced motion since it has no animation).

**Rebuilt from scratch:** the malformed markup, all three escalating
stories and their five-stage narratives, the ticker (both the scrolling
marquee and the reduced-motion static-cycle mode), the klaxon
toggle + optional WebAudio siren, the six category color-mood themes, the
empty state (categories with no matching story), the completion/"meltdown"
state (fires once all three stories reach their final stage), the entire
information hierarchy (lead vs. secondary story cards, escalation-level
bars), all ARIA/keyboard-accessibility work, and every responsive
breakpoint.

## How to open

Just open the file directly — no server needed:

```sh
open ~/Projects/crazy-news-channel/index.html
```

Direct-open (`file://`) still works exactly as before for everyday viewing —
nothing about the normal experience changes.

## Admin: refresh real news

The admin panel (click "⚙ Admin") has a "🔄 Refresh Real News" button that
re-runs `scripts/fetch-real-news.mjs` (pulls current headlines from Google
News RSS into `real-news-data.js`, $0, no API key) without typing the
command in a terminal.

A browser can't run a local Node script on its own, so the button needs the
tiny local admin server:

```sh
node scripts/admin-server.mjs
```

Then open **http://127.0.0.1:8936/** (instead of opening `index.html`
directly) and use the button from there. If you open `index.html` via
`file://` and click the button anyway, it shows a clear message telling you
to start the admin server rather than failing silently.

## How to verify

A Playwright script drove headless Chromium through the full checklist
(viewport sweep, every control toggled, console-error check, keyboard/focus
sweep, `prefers-reduced-motion: reduce` emulation, and a real 15–20s
wall-clock wait to confirm the ticker/stories change over time without any
scripted fakery). See the task report for the full pass/fail table;
screenshots were written to a local scratch directory during verification
and are not checked into this repo.

To re-run verification yourself with Playwright already on this machine:

```sh
NODE_PATH=~/.npm-global/lib/node_modules node your-script.js
```

## Notable design choices

- **Six category "moods"**: All (default, pale mint), Politics (Crisis
  Red), Weather (Storm Watch, blue), Sports (Hype Orange), Entertainment
  (Glam Panic, magenta), Business (Money Green), Sci-Tech (Synthwave
  Alert, neon purple/cyan). Only Politics, Weather, and Sci-Tech have an
  active story — Sports/Entertainment/Business are intentionally "quiet"
  categories that trigger the empty state, in-voice ("our desk is on a
  coffee break").
- **Klaxon audio is muted by default** via a separate "Klaxon sound"
  checkbox (unchecked on load); the WebAudio siren only ever starts from an
  explicit user gesture (checking the box) while breaking mode is active,
  never on page load or autoplay. If `AudioContext` is unavailable, a
  visible "Audio unavailable — visual alert only" note is shown instead of
  failing silently.
- **Completion state**: when all three stories reach their final
  ("TRANSCENDENT") stage, a persistent "NETWORK OVERLOAD" banner appears —
  this is the concrete answer to "what happens after a story's escalation
  maxes out."