Industware presentation site

A single-page static site presenting Industware (the company) and its products. The first featured product is IndustVera, the Digital Production Platform.

No build step, no framework, no server-side code — just static HTML/CSS/JS.

Preview

Open index.html directly in a browser, or serve the folder:

npx serve .
# or
python3 -m http.server 8080

Then visit the printed URL (e.g. http://localhost:8080).

Structure

Two pages, one shared design and one shared data file:

industware-site/
  index.html        Company home page (header, hero, what-we-do, approach,
                    contact) + a grid of product CARDS (#products-grid).
  product.html      Product DETAIL template. Renders one product based on the
                    ?id=<slug> in the URL, e.g. product.html?id=industvera.
  styles.css        Design system, layout, cards, and all mockup/device frames.
  script.js         Icons, nav, the card renderer, and the detail renderer.
  data/products.js  The product catalogue — THE EXTENSION POINT (see below).
  assets/           logo.svg (Industware company mark), favicon.svg,
                    industflow-logo.svg (and any other product logos).

Logos: assets/logo.svg and assets/industflow-logo.svg are clean vector re-creations of the brand marks. If you have the official logo files, just replace these two (keep the same filenames) — no code change needed.

Each product automatically gets both a card on the home page and its own detail page at product.html?id=<id>. There is no per-product HTML file to copy.

Add a product

Everything about a product lives in data/products.js. To add one, append an object to the window.PRODUCTS array — no other file needs to change. A card appears on the home page and the detail page starts working immediately.

{
  id: "my-product",                 // unique slug → product.html?id=my-product
  icon: "route",                    // card icon when no `logo` is set (see ICONS)
  logo: "assets/my-logo.svg",       // optional — logo shown instead of icon+name
  badge: "New",                     // optional — small label on the card
  name: "My Product",
  subtitle: "Short descriptor",     // optional
  tagline: "One punchy line.",      // optional (also the card blurb)
  summary: "The what-it-does paragraph…",   // optional
  tags: ["Tag A", "Tag B"],         // optional chips (first 4 shown on the card)
  tiers: [                          // optional "how it works" columns
    { icon: "monitor", name: "…", text: "…" },
  ],
  flow: [                           // optional numbered workflow steps
    { title: "Define", text: "…" },
  ],
  capabilities: [                   // optional capability cards
    { icon: "route", title: "…", text: "…" },
  ],
  benefits: ["…", "…"],             // optional outcome bullets
  mockups: ["dashboard"],           // optional — which UI mockups to show
}

Every field is optional except id and name; sections whose data is omitted are simply not rendered. A bad or missing ?id= shows a friendly "not found" message with a link back to the home page.

Writing style

Keep copy understandable for a mixed audience — from managers to engineers. Avoid product-internal jargon and specific technology names on customer-facing text; describe what something does for the user, not how it's built.

Icons

icon values are keys in the ICONS map at the top of script.js. Available keys include: factory, plug, spark, monitor, server, tablet, route, grid, gauge, clipboard, shield, refresh, globe, scale, check. To add a new icon, add a key: '<svg-path-markup>' entry to that map.

Mockups ("screenshots")

The mockups array picks which anonymized UI mockups to render, in order. Supported keys, defined in the MOCKUPS map in script.js:

• dashboard — management console with KPI tiles + bar chart + nav
• stepEditor — procedure editor with draggable step rows
• terminal — shop-floor touchscreen showing a guided step
• aiAgent — AI assistant chat with a result table
• insights — intelligence dashboard: OEE ring, loss breakdown, insight feed
• flowChat — intelligence assistant chat with a next-best-action recommendation

To add a new mockup, add a renderer function to the MOCKUPS map (and, for a standard caption, an entry in MOCKUP_CAPTIONS), then reference its key from a product's mockups array.

Design notes

• Brand-neutral industrial identity: industrial blue #2563eb, steel/cyan #0e7490, deep-slate dark bands. Defined as CSS custom properties at the top of styles.css.
• Chart/KPI colors use a colorblind-safe data palette validated with the dataviz skill's palette validator.
• No customer or third-party names appear anywhere — the mockups use generic placeholder data only (Product A, Line 1, Station 04, etc.).