UI Components Easy

Construction — Site Safety Checklist

A daily jobsite safety checklist with grouped checkable items for PPE, equipment, hazards and signage, a live completion meter, a flagged-issues note area, and a supervisor sign-off field that stamps a name and timestamp once every item is reviewed.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  --hv: #f5c518;
  --steel: #2b3440;
  --steel-d: #1b222b;
  --bg: #eceae6;
  --ink: #1a1d22;
  --muted: #666c75;
  --orange: #e8642a;
  --white: #ffffff;
  --line: #d6d3cc;
  --radius: 10px;
  --shadow: 0 14px 40px rgba(27, 34, 43, 0.16);
  --font: "Inter", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  padding: 32px 16px;
  line-height: 1.45;
}

.cl-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.checklist {
  width: 100%;
  max-width: 560px;
  background: var(--white);
  border: 2px solid var(--steel-d);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Header */
.cl-head {
  background: var(--steel);
  color: var(--white);
  padding: 20px 22px 22px;
  position: relative;
}

.cl-head__bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--hv) 0 14px,
    var(--steel-d) 14px 28px
  );
}

.cl-head__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.cl-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hv);
}

.cl-head h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cl-site {
  font-size: 12px;
  font-weight: 600;
  color: #c5cbd2;
  text-align: right;
  padding-top: 18px;
}

/* Meter */
.cl-meter {
  margin-top: 18px;
}

.cl-meter__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cl-meter__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #aeb6bf;
}

.cl-meter__pct {
  font-size: 20px;
  font-weight: 800;
  color: var(--hv);
}

.cl-meter__track {
  margin-top: 7px;
  height: 10px;
  border-radius: 999px;
  background: var(--steel-d);
  overflow: hidden;
}

.cl-meter__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--hv));
  transition: width 0.35s ease;
}

.cl-meter__count {
  margin: 8px 0 0;
  font-size: 12px;
  color: #aeb6bf;
}

/* Groups */
.cl-groups {
  padding: 18px 22px 4px;
}

.cl-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 14px;
  padding: 6px 14px 10px;
}

.cl-group legend {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 0 8px;
  margin-left: -4px;
}

.cl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cl-item + .cl-item {
  border-top: 1px solid #f0eee9;
}

.cl-item:hover {
  background: #f6f5f2;
}

.cl-item input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cl-box {
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--steel);
  border-radius: 6px;
  background: var(--white);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cl-box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--steel-d);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

.cl-item input:checked ~ .cl-box {
  background: var(--hv);
  border-color: var(--steel-d);
}

.cl-item input:checked ~ .cl-box::after {
  transform: rotate(45deg) scale(1);
}

.cl-item input:focus-visible ~ .cl-box {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.cl-text {
  font-size: 14.5px;
  font-weight: 500;
}

.cl-item input:checked ~ .cl-text {
  color: var(--muted);
}

/* Flags */
.cl-flags,
.cl-signoff {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
}

.cl-flags__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cl-flags h2,
.cl-signoff h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

.cl-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8eaec;
  color: var(--muted);
}

.cl-tag.is-flagged {
  background: var(--orange);
  color: var(--white);
}

#cl-notes {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
}

#cl-notes:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--steel);
}

/* Sign-off */
.cl-signoff__hint {
  margin: 8px 0 12px;
  font-size: 12.5px;
  color: var(--muted);
}

.cl-signoff__row {
  display: flex;
  gap: 10px;
}

#cl-name {
  flex: 1;
  font-family: var(--font);
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--ink);
}

#cl-name:disabled {
  background: #f3f2ef;
  cursor: not-allowed;
}

#cl-name:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--steel);
}

#cl-submit {
  flex: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--steel-d);
  background: var(--hv);
  border: 2px solid var(--steel-d);
  border-radius: 8px;
  padding: 0 20px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

#cl-submit:hover:not(:disabled) {
  background: #ffd83a;
}

#cl-submit:active:not(:disabled) {
  transform: translateY(1px);
}

#cl-submit:disabled {
  background: #d9d6cf;
  border-color: var(--line);
  color: #9a9a9a;
  cursor: not-allowed;
}

#cl-submit:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.cl-stamp {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--steel);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  border-left: 4px solid var(--hv);
}

.cl-stamp strong {
  color: var(--hv);
}

/* Responsive */
@media (max-width: 520px) {
  body {
    padding: 16px 10px;
  }
  .cl-head__row {
    flex-direction: column;
  }
  .cl-site {
    text-align: left;
    padding-top: 0;
  }
  .cl-head h1 {
    font-size: 22px;
  }
  .cl-signoff__row {
    flex-direction: column;
  }
  #cl-submit {
    padding: 12px;
  }
}

(function () {
  "use strict";

  var STORE = "stealthis.construction-safety-checklist";
  var form = document.getElementById("cl-form");
  if (!form) return;

  var boxes = Array.prototype.slice.call(
    form.querySelectorAll('input[type="checkbox"]')
  );
  var fill = document.getElementById("cl-fill");
  var pct = document.getElementById("cl-pct");
  var count = document.getElementById("cl-count");
  var notes = document.getElementById("cl-notes");
  var flagTag = document.getElementById("cl-flag-tag");
  var name = document.getElementById("cl-name");
  var submit = document.getElementById("cl-submit");
  var hint = document.getElementById("cl-signoff-hint");
  var stamp = document.getElementById("cl-stamp");

  var total = boxes.length;
  var signed = false;

  function load() {
    var raw;
    try {
      raw = JSON.parse(sessionStorage.getItem(STORE) || "{}");
    } catch (e) {
      raw = {};
    }
    if (raw.checks) {
      boxes.forEach(function (b) {
        if (raw.checks[b.name]) b.checked = true;
      });
    }
    if (raw.notes) notes.value = raw.notes;
    if (raw.signature) {
      name.value = raw.signature.name || "";
      applySignature(raw.signature.name, raw.signature.time);
    }
  }

  function save() {
    var checks = {};
    boxes.forEach(function (b) {
      checks[b.name] = b.checked;
    });
    var data = { checks: checks, notes: notes.value };
    if (signed) {
      data.signature = {
        name: name.value.trim(),
        time: stamp.getAttribute("data-time") || ""
      };
    }
    try {
      sessionStorage.setItem(STORE, JSON.stringify(data));
    } catch (e) {
      /* storage unavailable */
    }
  }

  function done() {
    return boxes.filter(function (b) {
      return b.checked;
    }).length;
  }

  function render() {
    var n = done();
    var ratio = total ? Math.round((n / total) * 100) : 0;
    fill.style.width = ratio + "%";
    pct.textContent = ratio + "%";
    count.textContent = n + " of " + total + " items reviewed";

    var complete = n === total && total > 0;
    if (!signed) {
      submit.disabled = !complete;
      name.disabled = !complete;
      hint.textContent = complete
        ? "All items reviewed — ready for supervisor sign-off."
        : "Review every item to enable sign-off.";
    }

    var hasFlag = notes.value.trim().length > 0;
    flagTag.textContent = hasFlag ? "1 issue logged" : "None logged";
    flagTag.classList.toggle("is-flagged", hasFlag);
  }

  function applySignature(who, time) {
    if (!who) return;
    signed = true;
    submit.disabled = true;
    submit.textContent = "Signed off";
    name.disabled = true;
    hint.textContent = "Walkdown signed off and locked for this session.";
    stamp.hidden = false;
    stamp.setAttribute("data-time", time);
    stamp.innerHTML =
      "Signed off by <strong>" +
      escapeHtml(who) +
      "</strong> &middot; " +
      escapeHtml(time);
  }

  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#39;"
      }[c];
    });
  }

  function stampNow() {
    var d = new Date();
    var date = d.toLocaleDateString(undefined, {
      month: "short",
      day: "numeric",
      year: "numeric"
    });
    var time = d.toLocaleTimeString(undefined, {
      hour: "numeric",
      minute: "2-digit"
    });
    return date + " at " + time;
  }

  boxes.forEach(function (b) {
    b.addEventListener("change", function () {
      render();
      save();
    });
  });

  notes.addEventListener("input", function () {
    render();
    save();
  });

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    if (signed) return;
    var who = name.value.trim();
    if (!who) {
      name.focus();
      return;
    }
    applySignature(who, stampNow());
    save();
  });

  load();
  render();
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Site Safety Checklist</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="checklist" aria-labelledby="cl-title">
      <header class="cl-head">
        <div class="cl-head__bar" aria-hidden="true"></div>
        <div class="cl-head__row">
          <div>
            <p class="cl-eyebrow">Daily Walkdown</p>
            <h1 id="cl-title">Site Safety Checklist</h1>
          </div>
          <span class="cl-site">Riverside Tower &middot; Block C</span>
        </div>

        <div class="cl-meter" role="group" aria-label="Checklist completion">
          <div class="cl-meter__top">
            <span class="cl-meter__label">Completion</span>
            <span class="cl-meter__pct" id="cl-pct">0%</span>
          </div>
          <div class="cl-meter__track">
            <div class="cl-meter__fill" id="cl-fill" style="width: 0%"></div>
          </div>
          <p class="cl-meter__count" id="cl-count">0 of 0 items reviewed</p>
        </div>
      </header>

      <form id="cl-form" novalidate>
        <div class="cl-groups">
          <fieldset class="cl-group" data-group="PPE">
            <legend>Personal Protective Equipment</legend>
            <label class="cl-item">
              <input type="checkbox" name="ppe-hardhat" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Hard hats worn by all on-site personnel</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="ppe-hivis" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Hi-vis vests in good condition</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="ppe-boots" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Steel-toe boots and gloves available</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="ppe-eyes" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Eye and hearing protection at cutting stations</span>
            </label>
          </fieldset>

          <fieldset class="cl-group" data-group="Equipment">
            <legend>Equipment</legend>
            <label class="cl-item">
              <input type="checkbox" name="eq-scaffold" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Scaffolding tagged and inspected today</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="eq-ladders" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Ladders secured, no damaged rungs</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="eq-power" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Power tools guarded, leads off walkways</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="eq-crane" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Crane exclusion zone barricaded</span>
            </label>
          </fieldset>

          <fieldset class="cl-group" data-group="Hazards">
            <legend>Hazards</legend>
            <label class="cl-item">
              <input type="checkbox" name="hz-edges" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Open edges and floor voids guarded</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="hz-spill" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">No fuel or chemical spills present</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="hz-dust" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Dust suppression running near demolition</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="hz-fire" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Extinguishers charged, hot-work permit valid</span>
            </label>
          </fieldset>

          <fieldset class="cl-group" data-group="Signage">
            <legend>Signage</legend>
            <label class="cl-item">
              <input type="checkbox" name="sg-warning" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Warning signs posted at access points</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="sg-muster" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Muster point and exits clearly marked</span>
            </label>
            <label class="cl-item">
              <input type="checkbox" name="sg-speed" />
              <span class="cl-box" aria-hidden="true"></span>
              <span class="cl-text">Site speed limit and one-way signs visible</span>
            </label>
          </fieldset>
        </div>

        <section class="cl-flags" aria-labelledby="cl-flags-title">
          <div class="cl-flags__head">
            <h2 id="cl-flags-title">Flagged issues</h2>
            <span class="cl-tag" id="cl-flag-tag">None logged</span>
          </div>
          <label class="cl-vh" for="cl-notes">Describe any flagged issues</label>
          <textarea
            id="cl-notes"
            name="notes"
            rows="3"
            placeholder="e.g. North scaffold tag expired &mdash; isolated, reported to Dana M. at 07:40"
          ></textarea>
        </section>

        <section class="cl-signoff" aria-labelledby="cl-signoff-title">
          <h2 id="cl-signoff-title">Supervisor sign-off</h2>
          <p class="cl-signoff__hint" id="cl-signoff-hint">
            Review every item to enable sign-off.
          </p>
          <div class="cl-signoff__row">
            <label class="cl-vh" for="cl-name">Supervisor name</label>
            <input
              id="cl-name"
              name="supervisor"
              type="text"
              autocomplete="name"
              placeholder="Supervisor name"
            />
            <button type="submit" id="cl-submit" disabled>Sign off</button>
          </div>
          <p class="cl-stamp" id="cl-stamp" hidden></p>
        </section>
      </form>
    </main>

    <script src="script.js"></script>
  </body>
</html>

Site Safety Checklist

A rugged daily walkdown panel for a construction crew lead. Items are grouped into PPE, Equipment, Hazards and Signage, each row a chunky checkbox with a hi-vis tick. A completion meter tracks progress across every group and turns the sign-off bar live once all items are reviewed.

Flagged issues get jotted in a note area, and the supervisor signs off with a name field that stamps a timestamp on submit. Checks, notes and the sign-off persist for the session, so a refresh keeps the morning walkdown intact.

Illustrative UI only — not for real safety compliance or jobsite sign-off.