Portable Solution Comparison Tool — Quickstart

Version 2.0.0

Run the tool (30 seconds)

Clone or open this project folder.
Open index.html in Chrome, Safari, or Edge (desktop).
- Double-click the file, or
- From the project folder: python3 -m http.server 8080 then visit http://localhost:8080/
In each of the five columns, choose a product from the dropdown.
Compare spec rows side by side. Pick Select a product ▾ again to clear a column.

No install, no build, no database.

Filtering

The sticky bar at the top has three number inputs:

Bed Capacity — minimum beds required
Internal Floorspace — minimum sq ft
External Footprint — maximum sq ft (what fits in your space)

Products that do not meet all active thresholds are disabled in the dropdowns. If a column already has a product selected and it no longer matches, that column greys out (header and cells) but keeps the selection. Greying clears when the product matches again, you clear the column, or you remove all filters.

Using the UI

Action	Result
Choose a product	That column fills with spec values; dropdown shows the product name in bold (options are grouped under vendor headers); vendor logo appears below the dropdown
Choose Select a product ▾	Column clears (empty cells, no TBD); logo hides
Same product in two columns	Allowed
Product with an info note	ⓘ appears beside the vendor logo; click to open/close the shared info popover (driven by `infoText` on that product)
Product marked with *	* This product is included in the Vendor Product Catalog but was not independently tested by UC Davis during any IMPACTS project events or exercises. The * icon beside the logo opens the same popover; a footnote appears below the table when selected.
Pin a spec row	Row moves to the top of the table for this session; pin again to restore default order
Missing data in source	TBD pill in that cell
Connector + bed capacity blank	N/A for bed capacity

Update product data

File: data.js only.

Example — change a value

Find the product id under specs, then the spec key:

"dlx-x24": {
  wind: "65 mph sustained, 75 mph gusts",
  // ...
}

Use null for unknown values (shows TBD).

Example — add a product

Under the vendor in vendors, add to products:
{ id: "dlx-new", name: "New Model", type: "shelter" }
Under specs, add an entry with every display key from specRows plus a filter object:

"dlx-new": {
  bedCapacity: null,
  extDims: null,
  // ... every specRows key ...
  filter: {
    bedCapacity: 8,
    extSqFt: 500,
    intSqFt: 400
  }
}

Use { min, max } for bed ranges, { excluded: true } when no filterable number exists. See the comment block above specs in data.js.

Refresh the browser.

Example — add a vendor

Add a vendor object to vendors with name, logo, and products:
{ name: "Acme", logo: "logos/acme.png", products: [...] }
Drop the logo image (PNG recommended) into the logos/ folder using the exact filename referenced above.
Add spec entries under specs for each new product id.
Refresh the browser.

Labels for rows are in specRows (e.g. ground → “Recommended ground surface”).

What not to edit for routine updates

app.js — behavior (dropdowns, filtering, TBD/N/A rules, info/untested popover, pinning, logo wiring)
index.html / styles.css — layout and look
logos/ — vendor logo images; add files here when adding a new vendor, otherwise leave as-is
Reference Material/ — local source docs; not loaded by the app

More detail: README.md · DESIGN_DECISIONS.md · VERSION · Open the tool: index.html
QUICKSTART.pdf may lag this page; PDF regeneration is deferred. An in-tool help view is under consideration.