Freeframe
Sign in
Business9 pages · 0 downloads · Free

Heatloop

An editorial deep-tech startup website with cutaway drawings, a live charge diagram and a savings estimator.

Stack: HTML + Tailwindv1.0.0 changelog

DocsLive demo Download .zip188 KB

About this template

A complete site for a hardware or climate-tech startup, shown as Heatloop, an Aberdeen company making a thermal battery that stores cheap off-peak electricity as heat for homes. It has technical line drawings, an interactive 24-hour charge and tariff chart, a savings and carbon estimator with shareable results, a multi-step reservation with a postcode check, careers with filters and saved roles, a company page with a press kit, and news that stays current.

Features

  • Product cutaway, exploded view and other technical line drawings in inline SVG that follow light and dark themes
  • Interactive 24-hour charge and release diagram over a time-of-use tariff, with a time slider, play button and three models
  • Savings and carbon estimator (home, heating, tariff, region) with the formula shown and results shareable by URL
  • "How much could you shift" teaser with a model picker and a daily heat slider
  • Three-step reservation with a postcode coverage check, a reference and queue place saved for returning visitors
  • Careers with team, location and remote filters kept in the URL, saved roles and a role details dialog
  • News with a topic filter, dated posts and milestone years that roll forward, and coming-up events built from rules
  • Company page with drawn team portraits, backers, a timeline and press kit downloads
  • Contact form with enquiry type and role from the URL, and a reference on success
  • Dark mode toggle, accessible mobile menu, scroll reveals and back-to-top

Pages included

Quick start

unzip heatloop.zip && cd heatloopopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Heatloop documentation →

Changelog

  1. v1.0.0

    Added

    • Eight pages for Heatloop, a fictional climate-tech hardware startup in Aberdeen: home, technology, savings and carbon estimator, reserve, careers, company, news and contact, plus a 404 page.
    • Editorial deep-tech design: Hedvig Letters Serif and Sans with Source Code Pro, numbered sections, hairline rules, and technical SVG drawings (product cutaway, exploded view, coverage map, workshop, charts) that follow the light and dark themes.
    • "How much could you shift" teaser with a model picker and a daily heat slider.
    • Interactive 24-hour charge and release diagram over a time-of-use tariff, with a time slider, play button, three models and live readouts.
    • Savings and carbon estimator (home, heating, tariff, region) with bars, a suggested model, the formula shown with the visitor's numbers, and results shareable by URL.
    • Three-step reservation with a postcode coverage check, a reference and queue place, saved in the browser for returning visitors, with change and cancel.
    • Careers with team, location and remote filters kept in the URL, saved roles and a role details dialog.
    • Company page with drawn team portraits, backers, a timeline and press kit downloads.
    • News with a topic filter, coming-up events built from rules, and dated posts, milestone years and the reservation count that roll forward with KEEP_DEMO_CURRENT.
    • Contact form with the enquiry type and role from the URL and a reference on success, a newsletter form, dark mode toggle, accessible mobile menu, scroll reveals, back-to-top and a PNG social image.

More templates