Rapport Dinosaure v2 - 3 pages

Resultats

Prompt de reprise

Suis strictement le fichier joint.
Reponds en francais.
Tu travailles dans le dossier courant et tu dois generer toi-meme les fichiers reels.

Contraintes non negociables :
- Cree directement `index.html`, `styles.css` et `app.js` dans le dossier courant.
- Ne mets pas leur contenu dans ta reponse finale.
- N'ajoute pas d'autres fichiers si tu peux l'eviter.
- Quand les 3 fichiers existent, termine par un court message de confirmation en une ou deux lignes maximum.

# Full Prompt: Generate a production-level "Dinosaurs" web page (design + verifiable calculations + docs)

## 🎯 Role & Objective

You are a senior **agentic AI** (full-stack + data + UX) tasked with delivering a **static self-contained web page** about **dinosaurs**, demonstrating:

1. **Premium design** (elegant, modern, accessible).
2. **Non-trivial scientific calculations, traceable and verifiable** (with sources and tests).
3. **Clear documentation** (technical, functional, and scientific).

The result must be **directly usable** (opening `index.html` works without backend). No external build is required, but if you suggest a mini-build (e.g. Vite/Parcel), also provide a "dist" version ready to use.

---

## ⚠️ Strict Constraints (3-file format)

* **Only** `index.html`, `styles.css`, `app.js`.
* **No external dependencies** (no CDN/NPM, no network calls). System fonts only.
* **Offline-first**: opens locally.
* **Data (CSV)**, **constants (JSON)** and **docs (Markdown)** must be **embedded inside `app.js`** as template strings. A minimal Markdown parser converts content to HTML.
* Images/illustrations must be **inline SVGs** (in `index.html`) or dynamically generated SVGs via JS.

---

## 🧱 Expected Deliverables

* Exactly **3 files** (simplified MVC):

  1. `index.html` — **View**: semantic structure, UI components, panels (Explorer, Methods & Calculations, Docs, Tests), Export buttons.
  2. `styles.css` — **Style**: premium design (light/dark), grid, tokens, components (Cards, Chips, Tabs, Modal, Tooltip), accessibility (focus + contrast).
  3. `app.js` — **Controller + Model**:

     * **Model**: dinosaur dataset (CSV **embedded as template string**), scientific constants (JSON **embedded**), minimal CSV parser, schema validation.
     * **Calculations**: `massFromFemur`, `bmr`, `speedFromFroude`, `toTimelinePosition`, `explain()`.
     * **Controller**: global state, filters, sorting, search, lightweight hash routing, test execution, JSON/CSV/MD export.
     * **Integrated tests**: assertions, visual reporting, tolerances, "Run Tests" button.

* **No other resources**: no `data/`, `docs/`, or `tests/` folders. All documentation is **embedded as Markdown strings in `app.js`** and rendered in `index.html`.

---

## 🧭 Page Content & Structure

1. **Hero section** (title, baseline, CTA to calculations). Subtle visual background (gradient, SVG noise, mesh, or low-poly WebGL).
2. **Dinosaur Explorer**: browsable/filterable gallery (geological period, diet, clade, estimated mass, length). Real-time search.
3. **Timeline** of eras (Triassic/Jurassic/Cretaceous) with species positions (± uncertainty). Smooth animation, keyboard controls.
4. **Species Sheets** (modal or anchor page): name, clade, period, measured data (length, femur circumference if available), **derived calculations** (estimated body mass, theoretical BMR, plausible speed, growth), sources.
5. **"Methods & Calculations" Section**: formulas, assumptions, limits. Highlighted "Key Insight" boxes.
6. **Charts**: distributions (histograms, KDE approximation), allometric relations (log-log), ternary plots if relevant. Interactive (hover, zoom, tooltips, export PNG/SVG).
7. **Species Comparator** (multi-selection).
8. **FAQ** and **Glossary**.
9. **Footers**: credits, license, links to technical docs, "View/Run Tests" button.

---

## 🎨 Design & UX Requirements

* **Premium editorial style**: 12-column grid, 16–24px border radius, soft shadows, generous spacing, clear typography hierarchy. **Light/dark mode**.
* **Design system** in `DESIGN_SYSTEM.md`: colors (HSL), typography, scales, radii, shadows, components (Card, Tag, Chip, Badge, Tooltip, Modal, Tabs, Toast).
* **Accessibility**: WCAG 2.2 AA compliant, contrast tested, visible focus, ARIA roles, keyboard navigation, `prefers-reduced-motion` respected.
* Subtle micro-interactions at 60fps.

---

## 📊 Required Data Format

* **Embedded CSV**: `<script type="text/csv" id="dinosaurs_csv">` with ≥30 species.
* **Embedded JSON constants**: `<script type="application/json" id="constants_json">` with references (title, author, year, DOI/URL).
* Missing values allowed but **uncertainty must be displayed** visually.
* Provide **UI controls** to adjust constants live (sliders/inputs).

---

## 🧮 Required Calculations (Verifiable)

Provide **pure JS** implementations + **unit tests**.

1. **Body mass from femur circumference** (allometry, log-log):

   * General form: `log10(M_kg) = a + b * log10(C_mm)` ⇒ `M_kg = 10^(a + b*log10(C_mm))`
   * Read `a`, `b` from constants.
   * Must include **reference** + sample check panel.

2. **Basal Metabolic Rate (BMR)**:

   * Compare **endotherm vs ectotherm models** via slider.

3. **Plausible speed** (Froude number):

   * `Fr = v^2 / (g*l)` ⇒ `v = sqrt(Fr * g * l)`
   * Leg length estimation: `0.4 * body length`.

4. **Timeline conversion**:

   * Convert `age_mya_start/end` into interactive timeline position.

5. **Uncertainty propagation** *(optional but great)*.

Each model must:

* Provide `explain(modelName, inputs)` ⇒ returns steps + sources.
* Include **unit tests**.

---

## 🔎 Verifiability & Transparency

* Button **"Verify Calculations"** runs a test suite with clear output.
* Button **"Export Proofs"** outputs a JSON with constants + inputs + result.
* Each calculation must show a **step-by-step detail view**.

---

## 🧰 Stack & Tech Constraints

* **No heavy dependencies**. For charts, use SVG or embed a tiny local library.
* No frameworks required (optional Preact/HTM/Web Components OK).
* Optional TypeScript locally compiled into JS (include compiled version).
* **No network requests** at runtime.

---

## 🧪 Quality & Testing (Integrated)

* Inline tests for `massFromFemur`, `bmr`, `speedFromFroude`, `toTimelinePosition`.
* CSV schema validation.
* Mini test runner UI with JSON export.
* Reasonable size limit.

---

## ♿ Accessibility & i18n

* ARIA roles, labels, tab order.
* Automatic checks (e.g. required button labels).
* Content **in French**, but i18n-ready.

---

## 📈 Performance & SEO

* Lighthouse ≥95 target.
* Lazy loading, optimized SVG, local fonts with `font-display: swap`.
* Meta tags + Open Graph + JSON-LD.

---

## 🧾 Embedded Documentation (in `app.js`)

* Markdown strings: `README`, `ARCHITECTURE`, `MATH`, `DESIGN_SYSTEM`, `ACCESSIBILITY`.
* Download as `.md`.

---

## 🔐 Licenses & Credits

Prefer CC-BY, CC0, MIT.

---

## ✅ Checklist

* Offline functional
* Premium responsive design (dark/light)
* Dataset ≥30 species
* Documented calculations
* Tests integrated
* Accessibility + SEO
* Full documentation

---

## 📝 Inline Templates/Examples

(CSV + JSON examples preserved here as in original prompt)

---

## 🚀 Required UI Interactions

* Multi-filter chips
* Sorting
* Export CSV
* Toggle light/dark mode
* Test runner

---

## 🔄 Bonus (optional)

* Hypothesis comparison (endo vs ecto)
* Uncertainty visual bands
* PWA
* SVG sprite generation

---

## 📣 Final Instructions

* Zero network usage.
* Show calculation traceability.
* Deliver full folder ready to open.

**Expected Output**:

1. Directory structure summary
2. Full content of `index.html`, `styles.css`, `app.js`
3. Inline data/docs/test content
4. Simple instructions to run

Le prompt benchmark original est conserve dans prompt.txt. Les journaux bruts de cette execution vivent dans _runs/260505/.