Coronary Artery Explorer prompt

Build a polished, interactive educational web app called **Coronary Artery Explorer** from scratch.

Deliver **one self-contained HTML file** containing all CSS, JavaScript and illustrations. It must work locally without installation, external libraries or an internet connection.

The app must contain two clearly separated, fully functional experiences accessible through prominent tabs:

1. **How a stent is placed**
2. **How lifestyle affects artery health**

Use a consistent visual design and shared anatomical vocabulary. Keep each experience’s controls, timeline and state independent.

## Audience and purpose

Design for patients, family members and friends without medical training.

Help people understand both:

- What happens during coronary angioplasty and balloon-expandable stent placement.
- How diet, physical activity and smoking can influence the development and progression of coronary artery disease.

Make exploration central: users should control the demonstration, replay steps, compare scenarios and reveal explanations when curious.

## Component 1: How a stent is placed

Make a large animated artery cutaway the centerpiece. Clearly distinguish the artery wall, plaque, blood, guidewire, balloon, delivery catheter and metal stent.

Provide five connected stages:

1. **The narrowing:** Show plaque within the artery wall narrowing the channel available for blood.
2. **Getting into position:** Show a guidewire crossing the narrowing and a deflated balloon carrying a compressed stent moving into position.
3. **Opening the artery:** Inflate the balloon. The stent expands against the artery wall, compressing/displacing plaque and widening the channel.
4. **Removing the equipment:** Deflate the balloon and withdraw it with the delivery catheter. Remove the guidewire afterward.
5. **What stays behind:** Show the expanded metal stent remaining against the artery wall while blood flows through its open center.

Keep the mechanics coherent:

- The stent begins compressed around the balloon and remains expanded after balloon deflation.
- Plaque remains within the wall; it is not dissolved or extracted.
- The stent is a hollow mesh scaffold, not a solid plug.
- The balloon, delivery catheter and guidewire are visibly distinct from the stent.
- Blood particles remain within the available channel. The inflated balloon temporarily obstructs flow.
- Treat flow animation as qualitative, not a prediction of actual blood flow.

Include a synchronized cross-sectional view derived from the same animation state.

Provide:

- Previous/next stage buttons.
- A clickable stage timeline and scrubber.
- Play, pause and restart.
- Optional labels.
- A before/after comparison.
- One or two short explanatory sentences per stage.
- Expandable answers to:
  - Does the balloon stay inside?
  - Does the stent remove the plaque?
  - How does the equipment reach the heart?
  - Is this the same as bypass surgery?
  - Why might medicines and lifestyle changes still be needed afterward?

Explain that this depicts one common type of coronary stenting and that individual procedures vary.

## Component 2: How lifestyle affects artery health

Display two synchronized artery cutaways side by side so users can compare illustrative trajectories from an identical starting point.

Allow a shared choice of baseline:

- Little or no visible plaque.
- Early plaque buildup.

Give each scenario independent controls for:

- **Dietary pattern:** less supportive versus more supportive of cardiovascular health.
- **Physical activity:** less active versus regularly active.
- **Smoking:** continued smoking versus not smoking/stopping smoking.

Use concrete, understandable descriptions rather than moralizing labels.

Provide presets that compare:

- Continued smoking with stopping, holding other factors constant.
- Lower activity with regular activity.
- Different dietary patterns.
- Several changes together.

Include a shared timeline with play, pause, scrub and reset. Label it **“Illustrative changes over time”**, without assigning unsupported numbers of years.

When settings change, reset the comparison to its shared starting point before replaying. Existing plaque must not instantly disappear when someone selects a healthier behavior.

### Show the intermediate biology

Use optional visual layers and short explanations to distinguish:

- The open channel carrying blood.
- Plaque within the artery wall.
- The vessel lining.
- Plaque stability and clot formation.

Explain that:

- Dietary patterns can influence LDL cholesterol, blood pressure and other risk factors.
- Regular physical activity can improve cardiovascular fitness and help manage several risk factors.
- Smoking can influence vessel injury, inflammation, atherosclerosis progression and clotting tendency.

Each control should have a **“Why does this matter?”** option connecting the behavior to the relevant biological process.

Give the user something meaningful to observe when a factor changes. Keep mechanisms and explanations synchronized with the selected scenario.

## Accuracy of the lifestyle model

This component is an educational illustration, not a validated prediction of someone’s future health.

- Distinguish slowing progression, plaque stabilization and plaque regression.
- Do not show exercise mechanically clearing plaque or healthy food dissolving it.
- Do not imply that lifestyle changes reliably reverse established plaque.
- Where evidence supports risk reduction more clearly than changes in plaque volume, illustrate the relevant mechanism rather than inventing plaque shrinkage.
- Do not imply that healthy habits guarantee freedom from disease; inherited susceptibility and other factors also matter.
- Do not assume the three lifestyle factors have equal or simply additive effects.
- Simplified internal values may drive animation, but do not display invented laboratory values, blockage percentages, heart-attack probabilities or years-to-event.
- Clearly label any qualitative indicators as illustrative.

Include a short optional explanation connecting the two components: opening one narrowing does not remove the need to manage the underlying disease.

Do not add medication selection, bypass simulation or individualized treatment recommendations.

## Visual design and usability

Create a clean, attractive science-museum-style experience:

- White background, generous spacing and readable typography.
- Large, prominent artery illustrations.
- Consistent colors, with labels and shapes also distinguishing structures.
- A recognizable metal mesh stent and a clearly separate balloon.
- Large buttons and sliders suitable for touch.
- Short main explanations with optional additional detail.
- Responsive desktop and mobile layouts.
- Keyboard-accessible controls and reduced-motion support.

Start both experiences paused. Pause animations when their tab becomes inactive. Preserve each tab’s state when switching between them.

Make the first useful interaction immediately apparent without requiring users to read instructions.

## Evidence and sources

Before implementing the medical content, verify it against authoritative patient-education sources, including:

- [https://www.nhlbi.nih.gov/health/stents/during](https://www.nhlbi.nih.gov/health/stents/during)
- [https://www.heart.org/en/health-topics/heart-attack/treatment-of-a-heart-attack/stent](https://www.heart.org/en/health-topics/heart-attack/treatment-of-a-heart-attack/stent)
- [https://www.nhlbi.nih.gov/health/coronary-heart-disease/treatment](https://www.nhlbi.nih.gov/health/coronary-heart-disease/treatment)
- [https://www.nhlbi.nih.gov/health/heart/smoking](https://www.nhlbi.nih.gov/health/heart/smoking)
- [https://www.cdc.gov/tobacco/about/cigarettes-and-cardiovascular-disease.html](https://www.cdc.gov/tobacco/about/cigarettes-and-cardiovascular-disease.html)

Include a compact, expandable sources section. External links may require internet access, but the app itself must remain fully functional offline.

Use a small, unobtrusive note explaining that the anatomy and trajectories are schematic educational illustrations. Do not claim clinical review or validation.

## Completion and verification

Build the finished app and test:

- Every button, slider, preset and tab.
- Forward and backward scrubbing.
- Reset behavior and preservation of independent tab states.
- Agreement between longitudinal and cross-sectional views.
- Balloon withdrawal with the expanded stent remaining in place.
- Identical starting conditions for lifestyle comparisons.
- Single-factor comparisons holding other settings constant.
- Readability and layout on desktop and mobile.
- Complete offline operation.

If browser testing is available, inspect the rendered app and correct functional or visual problems before delivery. Briefly state any testing limitation.

Deliver the downloadable file as **coronary_artery_explorer.html**, with a concise description of the two experiences and their controls.
​