Newspaper HTML

Newspaper HTML Generator

Generate self-contained, single-file HTML pages styled as a warm, vintage Chinese newspaper. All output must be a complete, standalone .html file — no external CSS/JS dependencies.

Design System

Color Palette (CSS custom properties)

:root {
  --paper: #f5f1e8;        /* parchment background */
  --paper-2: #ebdfcc;      /* darker parchment */
  --ink: #171717;          /* primary text */
  --muted: #666055;        /* secondary/meta text */
  --soft: #8e8476;         /* tertiary text */
  --accent: #7f1111;       /* dark red accent */
  --rule: #1f1f1f;         /* border/divider color */
  --sans: "Inter", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --serif: "Source Han Serif SC", "Songti SC", "STSong", serif;
  --mono: "JetBrains Mono", "SFMono-Regular", "Consolas", monospace;
}

The --accent color can be shifted (e.g. #1a3a5c for blue, #2d5a1e for green) to match the content domain, but default to the dark red.

Typography Rules

• Headings: var(--serif), bold/black weight, tight line-height (0.88–1.05). Use clamp() for responsive sizing: clamp(34px, 4.4vw, 56px) for h1.
• Body text: var(--serif), 13–14px, line-height 1.55–1.68.
• Meta/labels: var(--sans), 10–11px, uppercase, letter-spacing 0.06–0.14em. These are section kickers, timestamps, category labels.
• Monospace: var(--mono) for IDs, version numbers, timestamps in data displays.

Layout Patterns

Masthead (page header)

• Two-column grid: title left, signal/metadata cards right.
• Bottom border: 3px double var(--rule).
• Contains: topline (date/issue label), h1 (main headline), dek (subtitle).

Section Separators

• Use 3px double var(--rule) for major section breaks (masthead → content, content → footer).
• Use 1px solid rgba(0,0,0,.18) for minor dividers.
• Use 1px dotted rgba(0,0,0,.18) for card-internal dividers.

Cards (project cards, editor cards)

• Background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.22)).
• Top accent bar: 3px gradient from var(--accent) to near-black.
• Left accent bar: 3–4px solid accent for editor cards and activity blocks.
• Subtle shadow: 0 8px 22px rgba(0,0,0,.05).
• Internal padding: 12–20px.

Lead Story

• Full-width section with accent left border (4px gradient).
• Contains: section kicker, metadata strip (mono font), h2 title, summary, action links.
• Action links: bordered buttons; .is-strong variant has dark fill.

Signal Board (metrics/stats)

• Flexbox row of signal cards with vertical dividers.
• Each card: label (mono, uppercase), value (bold sans), optional description.

Updates Panel (sidebar)

• Timeline layout with time column (84px) and content column.
• Dotted bottom borders between rows.
• Grid-based: time spans 4 rows, content fills the rest.

Hover Panels (navigation overlays)

• Fixed position, slide in from edge on hover.
• Opacity transitions: 0.12 → 1 on hover.
• Transform: translateX to reveal.
• Left panel: project summary. Right panel: edition table of contents.

Footer

• 3px double var(--rule) top border.
• Mono font, muted color, 10px.

Body Background

body {
  margin: 0;
  background: radial-gradient(circle at top, rgba(255,255,255,.32), transparent 38%), #d8cdb9;
  color: var(--ink);
  font-family: var(--serif);
}

Responsive Breakpoints

Page Types

1. Portal Page (index/dashboard)

A multi-project dashboard. See references/portal-template.html for the full structure. Key sections: masthead → lead story → newsroom (project grid + updates sidebar) → footer.

2. Project/Article Page

A single-project archive with multiple editions. See references/project-template.html. Key sections: hover panels (left: summary, right: edition TOC) → edition stream → auto-resize iframes.

3. Single Article Page

For standalone content (no portal/project context). Simpler structure:

masthead → lead content → optional sections → footer

Strip the hover panels and multi-edition stream. Keep the typography and card styles.

Output Rules

1. Single file: All CSS inline in <style>, all JS inline in <script>. No external resources.
2. Language: lang="zh-CN" unless content is in another language.
3. Responsive: Include all breakpoints. Must look good on mobile.
4. Accessible: Use semantic HTML (<main>, <header>, <section>, <aside>, <footer>). Add aria-label on decorative panels.
5. Content-driven: Populate all sections with the user's actual content. Do not leave placeholder text.
6. Self-contained: No CDN fonts. Use system font stacks. The page must render offline.
7. Filename: Suggest a kebab-case filename based on the content, e.g. newspaper-ai-agents-2026-05-27.html.

Workflow

1. Ask the user what content to render (or infer from context).
2. Determine page type: portal, project archive, or single article.
3. Generate the complete HTML file following the design system above.
4. Write the file to the workspace.
5. Briefly describe the output and suggest how to open it.

References

Read these files for the full template structures:

• references/portal-template.html — portal/dashboard page layout
• references/project-template.html — project archive with edition stream