Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>HSE Term Lookup — SmartQHSE</title> | |
| <meta name="description" content="Searchable HSE / occupational-safety glossary — TRIR, LTIFR, ALARP, OSHA, hierarchy of controls, permit-to-work. CC BY 4.0. Powered by SmartQHSE." /> | |
| <style> | |
| * { box-sizing: border-box; } | |
| body { font-family: system-ui, -apple-system, sans-serif; margin: 0; background: #fafaf9; color: #191919; line-height: 1.55; } | |
| header { background: #191919; color: white; padding: 32px 24px; text-align: center; } | |
| header h1 { margin: 0 0 8px 0; font-size: 28px; font-weight: 700; } | |
| header p { margin: 0 auto; opacity: 0.75; font-size: 14px; max-width: 600px; } | |
| header a { color: #0B998C; text-decoration: none; } | |
| main { max-width: 900px; margin: 0 auto; padding: 24px; } | |
| .search { width: 100%; padding: 14px 18px; font-size: 16px; border: 1px solid #e5e5e5; border-radius: 12px; margin-bottom: 24px; outline: none; background: white; } | |
| .search:focus { border-color: #0B998C; box-shadow: 0 0 0 3px rgba(11,153,140,0.1); } | |
| .stats { font-size: 13px; color: #6B6B6B; margin-bottom: 16px; } | |
| .term-card { background: white; border: 1px solid #e5e5e5; border-radius: 12px; padding: 20px 24px; margin-bottom: 14px; } | |
| .term-card:hover { border-color: #0B998C; } | |
| .term-name { font-weight: 700; font-size: 18px; color: #191919; margin: 0 0 4px 0; } | |
| .term-aliases { font-size: 12px; color: #6B6B6B; margin-bottom: 10px; font-family: ui-monospace, monospace; } | |
| .term-def { font-size: 14px; color: #37352F; margin: 0; } | |
| .term-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; font-size: 12px; } | |
| .term-meta a { color: #0B998C; text-decoration: none; } | |
| .term-meta a:hover { text-decoration: underline; } | |
| .empty { text-align: center; color: #6B6B6B; padding: 40px; } | |
| footer { text-align: center; padding: 32px 24px; color: #6B6B6B; font-size: 13px; border-top: 1px solid #e5e5e5; margin-top: 40px; } | |
| footer a { color: #0B998C; text-decoration: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>HSE Term Lookup</h1> | |
| <p>Searchable HSE / occupational-safety glossary — definitions, formulas, authoritative sources. Live data from <a href="https://www.smartqhse.com/api/v1/glossary">SmartQHSE Open API</a>. CC BY 4.0.</p> | |
| </header> | |
| <main> | |
| <input type="search" class="search" id="q" placeholder="Search: TRIR, LTIFR, ALARP, OSHA, permit-to-work…" autofocus /> | |
| <div class="stats" id="stats">Loading glossary…</div> | |
| <div id="results"></div> | |
| </main> | |
| <footer> | |
| <p>Built by <a href="https://www.smartqhse.com">SmartQHSE</a> — the AI-native HSE/QHSE platform.<br />Open dataset: <a href="https://huggingface.co/datasets/SmartQHSE/hse-glossary">SmartQHSE/hse-glossary</a> · <a href="https://huggingface.co/collections/SmartQHSE/smartqhse-open-hse-data-69f7597712196f8018c2dab5">SmartQHSE Open HSE Data Collection</a></p> | |
| </footer> | |
| <script> | |
| let TERMS = []; | |
| function el(tag, attrs, children) { | |
| const node = document.createElement(tag); | |
| if (attrs) for (const k in attrs) { | |
| if (k === "class") node.className = attrs[k]; | |
| else if (k === "href" || k === "target" || k === "rel") node.setAttribute(k, attrs[k]); | |
| else node.setAttribute(k, attrs[k]); | |
| } | |
| if (children !== undefined) { | |
| if (Array.isArray(children)) for (const c of children) { | |
| if (c == null) continue; | |
| node.appendChild(typeof c === "string" ? document.createTextNode(c) : c); | |
| } else if (typeof children === "string") { | |
| node.textContent = children; | |
| } else node.appendChild(children); | |
| } | |
| return node; | |
| } | |
| function renderCard(t) { | |
| const aliases = (t.aliases || []).filter(a => a !== t.term).join(" · "); | |
| const meta = el("div", { class: "term-meta" }, [ | |
| el("a", { href: t.url || "#", target: "_blank", rel: "noopener" }, "Read full definition →"), | |
| " · category: " + (t.category || "—"), | |
| ]); | |
| const card = el("article", { class: "term-card" }, [ | |
| el("h2", { class: "term-name" }, t.term), | |
| aliases ? el("div", { class: "term-aliases" }, aliases) : null, | |
| el("p", { class: "term-def" }, t.shortDefinition), | |
| meta, | |
| ]); | |
| return card; | |
| } | |
| function render(query) { | |
| const q = (query || "").trim().toLowerCase(); | |
| const filtered = !q ? TERMS : TERMS.filter(t => { | |
| const haystack = [t.term, t.slug, ...(t.aliases || []), t.shortDefinition, t.category].join(" ").toLowerCase(); | |
| return haystack.includes(q); | |
| }); | |
| const stats = document.getElementById("stats"); | |
| stats.textContent = q ? filtered.length + " of " + TERMS.length + " terms match \"" + q + "\"" : TERMS.length + " HSE terms"; | |
| const results = document.getElementById("results"); | |
| while (results.firstChild) results.removeChild(results.firstChild); | |
| if (filtered.length === 0) { | |
| results.appendChild(el("div", { class: "empty" }, "No matches. Try TRIR, ALARP, or permit-to-work.")); | |
| } else { | |
| for (const t of filtered) results.appendChild(renderCard(t)); | |
| } | |
| } | |
| (async () => { | |
| try { | |
| const r = await fetch("https://www.smartqhse.com/api/v1/glossary"); | |
| const j = await r.json(); | |
| TERMS = j.terms || []; | |
| render(""); | |
| } catch (e) { | |
| document.getElementById("stats").textContent = "Failed to load glossary. Try again later."; | |
| console.error(e); | |
| } | |
| document.getElementById("q").addEventListener("input", (e) => render(e.target.value)); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |