# Barrier Compare Instructions

## Purpose

`barrier-compare` is a self-contained static version of the Bubble-built Flood Barrier Compare page, now branded as an Inero comparison tool. It evaluates a mobile flood barrier against the selected Inero H50, H80, H100, or H150 reference across the criteria in the performance classification paper.

## Reference

Source design:

```txt
https://bubble.io/page?id=peternero-22796&tab=Design&name=index&ai_generated=true
```

Rendered preview used during implementation:

```txt
https://peternero-22796.bubbleapps.io/version-test
```

Product reference:

```txt
https://www.inero.se/
https://www.inero.se/en/barrier-h50
https://www.inero.se/en/barrier-h80
https://www.inero.se/en/barrier-h100
https://www.inero.se/en/barrier-h150
https://www.inero.se/en/steel-pallet
```

The ChatGPT Inero Helper link was checked, but it requires ChatGPT login before it can provide usable answers in this environment.

## Local Development

```powershell
python -m http.server 4174 --directory C:\Users\nero_\OneDrive\Dokument\StaticSites\sites\barrier-compare
```

Open:

```txt
http://127.0.0.1:4174/
```

## Files

- `index.html`: page structure, SEO metadata, form fields, Inero reference selector, benchmark content, FAQ, and footer.
- `assets/css/styles.css`: all site styling, using the Inero logo blue sampled from the public positive logo asset (`#045290`) plus technical steel/white neutrals.
- `assets/js/main.js`: Inero product reference data, intended-usage weighting, criterion data, grading thresholds, formulas, and live rendering.
- Each criterion card has an info button that opens a modal with the exact calculation or assessment method plus a worked example.
- HAFE uses the entered stackable crate count capped by a maximum total stack height of 5 m.
- The main barrier material selector shows either corrosion resistance for metal systems or UV ageing for plastic/polymeric systems.
- `assets/img/inero-logo.png`: local brand image.
- `404.html`, `robots.txt`, `sitemap.xml`, `_headers`, `_redirects`: Cloudflare Pages support files.

## Grading Notes

The thresholds are taken from `Performance_Classification_Criteria_for_Mobile_Flood_Protection_Systems_v6 (3).pdf`. Numeric criteria include:

- Leakage performance
- Flow velocity tolerance
- Duration under continuous head
- HASE
- HAFE
- CHTE-20
- Deployment rate
- Debris impact resistance
- Tensile joint strength in kN/m
- Overtopping resistance
- Minimum safety factor
- Crest load-bearing capacity
- Corrosion resistance
- UV ageing
- Deployment cycles
- Service life

Qualitative criteria are mapped from the applicable statements:

- Install in Flooded Areas
- Operational Readiness
- Terrain Adaptability
- Tamper Resistance

The priority summary is sorted by intended usage:

- Specific site without curvature or change in elevation
- Specific prepared site with known terrain
- Disaster/emergency barrier for varied unknown sites
- Urban rapid-response / cloudburst
- River, coastal, or high-flow exposure
- Critical infrastructure / low-leakage site

The priority summary includes a fixed Inero H80 grade column so the selected benchmark can be compared against H80 at a glance. H80 uses its own public logistics facts for storage and transport, with shared Bubble/Inero technical values used where H80-specific technical figures were not separately provided.

Inero logistics reference values use public product and steel-pallet facts where available. The Inero H100 reference values use the Bubble assessment text supplied during implementation, including HASE 26.8, HAFE 109.3, CHTE-20 700, leakage 38 L/m/h, debris impact 1250 J, tensile strength 72 kN, safety factor 2.7, crest load 200 kg, service life 30+ years, and triple-star qualitative grades for flooded installation, operational readiness, terrain adaptability, and tamper resistance. Some technical benchmark values are not public for every profile; these appear as `Not stated` rather than being invented. If official values are supplied later, update `ineroProfiles` in `assets/js/main.js` and re-test the page.

Blank direct numeric fields render as `Not stated`. Entered zero values are treated as real values, which is important for leakage where 0 L/m/h should receive the best grade.

## Cloudflare Pages

Use the standard static settings:

```txt
Project name: barrier-compare
Root directory: /sites/barrier-compare
Framework preset: None
Build command: blank
Build output directory: /
Build watch path: sites/barrier-compare/**
```

Expected production URL:

```txt
https://barrier-compare.inero.se/
```