feat(content): about.html — intent, provenance, honest limits; static-build copy

English-first page mirroring credits.html (for-everyone / tech arc underwater→drones→space / built-with-LLMs / honest-it's-imperfect). Header link + about.link i18n key; about.html + flash.js added to PUBLIC_ASSETS. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 09:37:00 -07:00
parent 79105a3ef9
commit b83758fbca
5 changed files with 73 additions and 1 deletions
@@ -97,3 +97,20 @@ test.describe("Task 7 — Screen-reader narration", () => {
    await expect(page.locator("#affect")).toHaveAttribute("aria-hidden", "true");
  });
 });
+
+test.describe("Task 9 — About page", () => {
+  test("about page loads, names its themes, and links back", async ({ page }) => {
+    await page.goto("/about.html");
+    await expect(page.locator("h1")).toContainText(/about/i);
+    await expect(page.getByText(/imperfect/i)).toBeVisible();        // honest-about-limits beat
+    await expect(page.getByText(/space exploration/i)).toBeVisible(); // technology arc beat
+    await expect(page.getByText(/large language models/i)).toBeVisible();
+    await page.locator(".back-link").click();
+    await expect(page).toHaveURL(/index\.html|\/$/);
+  });
+
+  test("the header links to the about page", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.locator('a[href="about.html"]')).toBeVisible();
+  });
+});
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>About — Human Experience Filter</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body class="credits-page">
+  <main class="credits-wrap">
+    <header>
+      <h1>About this work</h1>
+      <p><a href="index.html" class="back-link">← Back to the experience</a></p>
+    </header>
+
+    <section>
+      <h2>For everyone</h2>
+      <p>The <em>Human Experience Filter</em> is built to be accessible to — and
+      representative of — the full range of human experience. That is why it works
+      with a keyboard, with a screen reader, with reduced motion, and away from any
+      single screen or kiosk: an experience about being human should be open to as
+      many humans as possible.</p>
+    </section>
+
+    <section>
+      <h2>Places technology let us see</h2>
+      <p>The scales you move through — the deep sea, the coast, the sky, the orbit
+      of the Earth, the wider cosmos — are vantage points no unaided human could
+      ever witness. We can share them only because our tools evolved to reach them:
+      from <strong>underwater exploration</strong>, to <strong>drones and aerial
+      imaging</strong>, to <strong>space exploration</strong>. Each scale is a place
+      a machine went first, so that a person could feel what it is like to be there.</p>
+    </section>
+
+    <section>
+      <h2>Built with LLMs</h2>
+      <p>This piece was itself built using large language models — an extension of
+      that same long arc of tools that widen what a single human can reach. The
+      software, the words, and much of the craft were shaped in collaboration with
+      a machine.</p>
+    </section>
+
+    <section>
+      <h2>Honest about its limits</h2>
+      <p>This implementation is imperfect. It is also more than I could have made
+      alone: better with these tools assisting than by my hand as a single human.
+      That tension is part of the point — technology does not replace the person
+      behind the work; it extends their reach, flaws and all.</p>
+    </section>
+  </main>
+  <script src="config.js"></script>
+</body>
+</html>
@@ -35,6 +35,7 @@
    "warn.title":     { en: "Heads up — motion & flashing" },
    "warn.body":      { en: "This experience contains continuous motion, flashing, and shifting imagery. If you are sensitive to motion or flashing light, turn on “Reduce motion” in the panel before you begin." },
    "warn.continue":  { en: "Continue" },
+    "about.link":     { en: "About", es: "Acerca de", fr: "À propos", ja: "概要" },
    "scale.cosmos":   { en: "cosmos", es: "cosmos", fr: "cosmos", ja: "宇宙" },
    "scale.orbit":    { en: "orbit", es: "órbita", fr: "orbite", ja: "軌道" },
    "scale.sky":      { en: "sky", es: "cielo", fr: "ciel", ja: "空" },
@@ -15,6 +15,7 @@
  </div>
  <header>
    <h1 data-i18n="app.title">Human Experience Filter — Alteration Preview</h1>
+    <a href="about.html" class="credits-link" data-i18n="about.link">About</a>
    <a href="credits.html" class="credits-link" data-i18n="credits.link">ⓘ Credits &amp; licenses</a>
  </header>
  <main>
@@ -36,7 +36,7 @@ from simulator.app import MEDIA_DIR, create_app
 STATIC = Path(__file__).resolve().parent.parent / "simulator" / "static"
 # Frontend files that ship; everything else in static/ (author*, review*) is dev-only.
 PUBLIC_ASSETS = ["index.html", "app.js", "scrub.js", "i18n.js", "alteration.js", "style.css",
-                 "credits.html", "credits.js"]
+                 "credits.html", "credits.js", "about.html", "flash.js"]


 def _bake_api(app_dir: Path) -> dict: