Spaces:

pantdipendra
/

checklist

Running

App Files Files Community

pantdipendra commited on Aug 29, 2025

Commit

d8a4b22

verified ·

1 Parent(s): a012e24

index

Browse files

Files changed (1) hide show

index.html +1249 -19

index.html CHANGED Viewed

@@ -1,19 +1,1249 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Secondary Use of Health Records Navigator</title>
+    <style>
+      /* Color-blind–safe palette */
+      :root {
+        --bg: #0b1020;
+        --ink: #eaf0ff;
+        --muted: #a6b0d4;
+        --card: #121933;
+        --accent: #0072b2; /* blue */
+        --accent2: #56b4e9; /* sky blue */
+        /* Status colors */
+        --ok: #009e73; /* bluish green */
+        --warn: #f0e442; /* yellow */
+        --no: #d55e00; /* vermillion */
+        --br: 14px;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial,
+          sans-serif;
+        color: var(--ink);
+        background: radial-gradient(
+              900px 500px at 20% -10%,
+              #1b2656,
+              transparent 60%
+            )
+            no-repeat,
+          var(--bg);
+      }
+      header {
+        padding: 22px 16px 8px;
+        text-align: center;
+      }
+      h1 {
+        margin: 0 0 4px;
+        font-size: clamp(20px, 2.2vw, 30px);
+        font-weight: 800;
+      }
+      header p {
+        margin: 0;
+        color: var(--muted);
+      }
+      .wrap {
+        max-width: 980px;
+        margin: 14px auto 80px;
+        padding: 0 14px;
+      }
+      .card {
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.04),
+          rgba(255, 255, 255, 0.02)
+        );
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: var(--br);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+      }
+      .section {
+        padding: 16px;
+        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
+        transition: background 0.2s ease, border-color 0.2s ease,
+          box-shadow 0.2s ease, transform 0.2s ease;
+        will-change: transform, box-shadow;
+      }
+      .section:last-child {
+        border-bottom: 0;
+      }
+      /* Hover highlight for any top-level section */
+      .card .section:hover,
+      .card .section:focus-within {
+        background: linear-gradient(
+          180deg,
+          rgba(22, 30, 60, 0.92),
+          rgba(18, 26, 52, 0.92)
+        );
+        border-color: rgba(86, 180, 233, 0.35);
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+        transform: translateY(-1px);
+      }
+      /* sticky nav */
+      .topnav {
+        position: sticky;
+        top: 0;
+        z-index: 5;
+        background: rgba(11, 16, 32, 0.7);
+        backdrop-filter: blur(8px);
+        padding: 10px 14px;
+      }
+      .toprow {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .progress {
+        height: 10px;
+        border-radius: 999px;
+        background: #17224a;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        flex: 1;
+      }
+      .progress > span {
+        display: block;
+        height: 100%;
+        width: 0;
+        background: linear-gradient(90deg, var(--ok));
+        transition: width 0.6s ease;
+      }
+      .clear {
+        margin-left: auto;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        background: rgba(255, 255, 255, 0.06);
+        color: #fff;
+        border-radius: 10px;
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: transform 0.15s ease, background 0.15s ease;
+      }
+      .clear:hover {
+        background: rgba(255, 255, 255, 0.12);
+        transform: translateY(-1px);
+      }
+      .graph {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+        margin-top: 10px;
+        flex-wrap: wrap;
+      }
+      .dot {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: #101a3f;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        color: #cfe0ff;
+        font-weight: 800;
+        opacity: 0.45;
+        transition: 0.2s;
+        will-change: transform, box-shadow;
+      }
+      .dot.unlocked {
+        opacity: 1;
+        cursor: pointer;
+      }
+      .dot.active {
+        outline: 2px solid var(--accent);
+      }
+      .dot.unlocked:hover {
+        transform: translateY(-2px) scale(1.05);
+        border-color: var(--accent2);
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+      }
+      .dot.done {
+        background: var(--ok);
+        color: #ffffff;
+        border-color: transparent;
+      }
+      .dot.done::after {
+        content: "✓";
+        position: absolute;
+        right: -4px;
+        bottom: -6px;
+        font-size: 12px;
+        background: var(--ok);
+        color: #fff;
+        border-radius: 6px;
+        padding: 0 3px;
+      }
+      /* purpose */
+      .purpose {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        gap: 10px;
+      }
+      .option {
+        padding: 14px;
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        background: rgba(255, 255, 255, 0.02);
+        cursor: pointer;
+        user-select: none;
+        transition: 0.2s transform, 0.2s border-color, 0.2s background,
+          box-shadow 0.2s ease;
+      }
+      .option:hover {
+        transform: translateY(-2px);
+        border-color: rgba(255, 255, 255, 0.22);
+        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
+      }
+      .option.active {
+        outline: 2px solid var(--accent);
+        background: rgba(86, 180, 233, 0.12);
+      }
+      .option input {
+        display: none;
+      }
+      .tag {
+        font-size: 0.75rem;
+        padding: 2px 8px;
+        color: var(--muted);
+      }
+      .gdpr {
+        color: #c6ede2;
+      }
+      /* steps */
+      .timeline {
+        padding: 10px;
+      }
+      .step {
+        margin: 12px 6px;
+        border-radius: 14px;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        background: linear-gradient(
+          180deg,
+          rgba(16, 22, 44, 0.86),
+          rgba(14, 20, 38, 0.86)
+        );
+        overflow: hidden;
+        animation: pop 0.35s ease both;
+        transition: background 0.2s ease, border-color 0.2s ease,
+          box-shadow 0.2s ease, transform 0.2s ease;
+        will-change: transform, box-shadow;
+      }
+      @keyframes pop {
+        from {
+          opacity: 0;
+          transform: translateY(8px) scale(0.98);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+      /* Hover highlight for each step block */
+      .step:hover,
+      .step:focus-within {
+        transform: translateY(-2px);
+        border-color: rgba(86, 180, 233, 0.35);
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+        background: linear-gradient(
+          180deg,
+          rgba(20, 28, 56, 0.92),
+          rgba(18, 26, 52, 0.92)
+        );
+      }
+      .head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 16px;
+      }
+      .title {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .num {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(180deg, #27336a, #202a56);
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        font-weight: 800;
+        color: #ffffff;
+        transition: background 0.2s ease, border-color 0.2s ease;
+      }
+      .badge {
+        font-size: 0.85rem;
+        padding: 4px 8px;
+        border-radius: 999px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        color: #cde6ff;
+        background: transparent;
+        transition: background 0.2s ease, color 0.2s ease,
+          border-color 0.2s ease;
+      }
+      .step.done {
+        border-color: rgba(0, 158, 115, 0.55);
+        box-shadow: 0 0 0 1px rgba(0, 158, 115, 0.25) inset;
+      }
+      .step.done .num {
+        background: var(--ok);
+        border-color: transparent;
+        color: #ffffff;
+      }
+      .step.done .badge {
+        background: var(--ok);
+        color: #ffffff;
+        border-color: transparent;
+      }
+      .body {
+        padding: 0 16px 14px;
+      }
+      .list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      .li {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 10px;
+        align-items: flex-start;
+        padding: 10px;
+        border: 1px dashed rgba(255, 255, 255, 0.14);
+        border-radius: 10px;
+        margin: 8px 0;
+        background: rgba(255, 255, 255, 0.02);
+        transition: background 0.15s ease, border-color 0.15s ease,
+          transform 0.15s ease;
+      }
+      .li:hover {
+        background: rgba(86, 180, 233, 0.08);
+        border-color: rgba(86, 180, 233, 0.35);
+        transform: translateY(-1px);
+      }
+      .letters {
+        font-weight: 700;
+        color: #cbe0ff;
+        width: 24px;
+      }
+      .li a {
+        color: var(--accent2);
+        text-decoration: none;
+      }
+      .li a:hover {
+        text-decoration: underline;
+      }
+      .req {
+        color: var(--no);
+        margin-left: 6px;
+      }
+      .opt {
+        color: #a9b6e6;
+        font-size: 0.85rem;
+      }
+      .fold {
+        display: none;
+      }
+      .toggle {
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        color: #dfe7ff;
+        border-radius: 10px;
+        padding: 6px 10px;
+        cursor: pointer;
+        transition: background 0.15s ease, transform 0.15s ease,
+          border-color 0.15s ease;
+      }
+      .toggle:hover {
+        background: rgba(86, 180, 233, 0.12);
+        transform: translateY(-1px);
+        border-color: rgba(86, 180, 233, 0.35);
+      }
+      /* animated checkbox */
+      .chk {
+        position: absolute;
+        opacity: 0;
+      }
+      .box {
+        width: 22px;
+        height: 22px;
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.22);
+        background: #0f1533;
+      }
+      .tick {
+        stroke: #cfe0ff;
+        stroke-width: 3;
+        fill: none;
+        stroke-dasharray: 30;
+        stroke-dashoffset: 30;
+        transition: stroke-dashoffset 0.32s ease;
+      }
+      .chk:checked + .box {
+        background: #1e396e;
+        border-color: var(--accent);
+      }
+      .chk:checked + .box .tick {
+        stroke-dashoffset: 0;
+      }
+      .tiny {
+        font-size: 0.82rem;
+        color: var(--muted);
+      }
+      .center {
+        display: grid;
+        place-items: center;
+      }
+      .hidden {
+        display: none !important;
+      }
+      /* flow buttons */
+      .flow {
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 16px;
+        width: min(960px, 92vw);
+        background: #0f1533;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 14px;
+        padding: 10px 12px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+      }
+      .q {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .q strong {
+        font-size: 1rem;
+      }
+      .btns {
+        display: flex;
+        gap: 10px;
+      }
+      .cta {
+        font-weight: 800;
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        padding: 12px 16px;
+        cursor: pointer;
+        transition: transform 0.15s ease, filter 0.15s ease;
+      }
+      .cta:hover {
+        transform: translateY(-1px);
+        filter: brightness(1.05);
+      }
+      .cta.y {
+        background: linear-gradient(180deg, var(--ok));
+      }
+      .cta.n {
+        background: linear-gradient(180deg, var(--no));
+      }
+      /* finish */
+      .finish {
+        display: none;
+        text-align: center;
+        padding: 18px;
+      }
+      .finish.show {
+        display: block;
+        animation: pop 0.35s ease both;
+      }
+      .confetti {
+        position: relative;
+        height: 0;
+      }
+      .confetti i {
+        position: absolute;
+        width: 8px;
+        height: 14px;
+        background: var(--accent);
+        top: -10px;
+        left: 50%;
+        animation: drop 1.2s ease-out forwards;
+        transform: translateX(-50%);
+      }
+      @keyframes drop {
+        to {
+          top: -90px;
+          transform: translateX(calc(-50% + var(--dx))) rotate(120deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>Secondary Use of Health Records — Flow Navigator</h1>
+    </header>
+    <div class="topnav">
+      <div class="toprow">
+        <div class="progress" aria-label="progress">
+          <span id="pbar"></span>
+        </div>
+        <button id="clearBtn" class="clear" title="Clear all progress">
+          Clear
+        </button>
+      </div>
+      <div id="dots" class="graph" aria-label="step navigation"></div>
+    </div>
+    <div class="wrap card">
+      <!-- PURPOSE -->
+      <div class="section">
+        <h2 style="margin: 0 0 6px">
+          What is the primary purpose of secondary use ?
+        </h2>
+        <div class="purpose" id="purposeList"></div>
+      </div>
+      <!-- Anonymized outcome -->
+      <div class="section hidden" id="anonMsg">
+        <div class="center">
+          <svg width="72" height="72" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              fill="#79ffb7"
+              d="M12 1 3 5v6c0 5 3.8 9.7 9 11c5.2-1.3 9-6 9-11V5z"
+            />
+          </svg>
+          <p class="tiny" style="margin: 8px 0 0">
+            <b>GDPR does not apply</b> to truly anonymized data (<a
+              href="https://gdpr.eu/recital-26/"
+              target="_blank"
+              >Recital 26</a
+            >).
+          </p>
+        </div>
+      </div>
+      <!-- TIMELINE -->
+      <div class="section timeline" id="timeline"></div>
+      <!-- Finish -->
+      <div id="finish" class="finish" aria-live="polite">
+        <div class="confetti" id="confetti"></div>
+        <h2 id="finishTitle" style="margin: 6px 0 0">End</h2>
+        <p id="finishSub" class="tiny"></p>
+      </div>
+    </div>
+    <!-- Flow controller -->
+    <div id="flow" class="flow hidden" role="group" aria-label="flow question">
+      <div class="q">
+        <strong id="qtxt">Ready?</strong>
+        <div class="btns">
+          <button class="cta y" id="yesBtn" aria-label="Yes">Yes</button>
+          <button class="cta n" id="noBtn" aria-label="No">No</button>
+        </div>
+      </div>
+    </div>
+    <script>
+      /* ------------ Data ------------ */
+      const PURPOSES = [
+        {
+          id: "research",
+          title: "Health Research (HRA)",
+          blurb: "Scientific knowledge.",
+          refs: [],
+        },
+        {
+          id: "quality",
+          title: "Quality Improvement",
+          blurb: "Improve your own service.",
+          refs: [],
+        },
+        {
+          id: "statistics",
+          title: "Statistics / Official",
+          blurb: "Org/regional/national stats.",
+          refs: [],
+        },
+        {
+          id: "innovation",
+          title: "Innovation / AI",
+          blurb: "Tool/algorithm/model.",
+          refs: [],
+        },
+        {
+          id: "anon",
+          title: "Exclusively Anonymized Data",
+          blurb: "No reasonable reidentification risk.",
+          refs: [],
+        },
+      ];
+      const STEPS = [
+        {
+          num: 1,
+          key: "classification",
+          title: "Project classification",
+          items: [
+            { k: "1a", label: "(a) Confirm pathway.", req: true },
+            {
+              k: "1b",
+              label: "(b) Controller / joint controller — Art. 4(7).",
+              req: true,
+            },
+            { k: "1c", label: "(c) 1-page summary.", req: true },
+            { k: "1d", label: "(d) Special categories? — Art. 9.", req: true },
+            { k: "1e", label: "(e) Vulnerable groups screened.", req: true },
+            {
+              k: "1f",
+              label: "(f) DPIA screening / DPIA — Art. 35.",
+              req: true,
+            },
+            { k: "1g", label: "(g) Transfers (if any) — Chap. V.", req: false },
+            {
+              k: "1h",
+              label: "(h) Plan anonymization/pseudonymization — Recital 26.",
+              req: false,
+            },
+          ],
+        },
+        {
+          num: 2,
+          key: "legal",
+          title: "Legal basis & consent",
+          items: [
+            { k: "2a", label: "(a) Art. 6 lawful basis.", req: true },
+            { k: "2b", label: "(b) Art. 9(2) condition.", req: true },
+            {
+              k: "2d",
+              label: "(d) Purpose limitation — Art. 5(1)(b).",
+              req: true,
+            },
+            {
+              k: "2c",
+              label: "(c) Consent quality/withdrawal (if used).",
+              req: false,
+            },
+            {
+              k: "2e",
+              label: "(e) Research/statistics safeguards — Art. 89.",
+              req: false,
+            },
+          ],
+        },
+        {
+          num: 3,
+          key: "ethics",
+          title: "Approvals",
+          items: [
+            {
+              k: "3a",
+              label: "(a) Research: IRB/HRA §§2–4, §9, §33.",
+              req: true,
+              showFor: ["research"],
+            },
+            {
+              k: "3b",
+              label: "(b) Statistics: HRL §19–19h.",
+              req: true,
+              showFor: ["statistics"],
+            },
+            {
+              k: "3c",
+              label: "(c) QI/Other: internal governance.",
+              req: true,
+              showFor: ["quality", "other"],
+            },
+            {
+              k: "3d",
+              label: "(d) Innovation/AI: risk review / AI Act.",
+              req: true,
+              showFor: ["innovation"],
+            },
+            {
+              k: "3e",
+              label: "(e) RoPA + notices — Arts. 30, 13/14.",
+              req: true,
+            },
+          ],
+        },
+        {
+          num: 4,
+          key: "access",
+          title: "Data access & contracts",
+          items: [
+            { k: "4a", label: "(a) Access route confirmed.", req: true },
+            { k: "4b", label: "(b) DPA / sharing / DUA ready.", req: true },
+            { k: "4c", label: "(c) Minimize data — Art. 5(1)(c).", req: true },
+            { k: "4d", label: "(d) Transfers (if any) — Chap. V.", req: false },
+          ],
+        },
+        {
+          num: 5,
+          key: "security",
+          title: "Security & privacy",
+          items: [
+            { k: "5a", label: "(a) TOMs — Art. 32.", req: true },
+            { k: "5b", label: "(b) Pseudonymize; separate keys.", req: true },
+            { k: "5c", label: "(c) DPIA outcomes signed.", req: true },
+            { k: "5d", label: "(d) Breach plan — 33/34.", req: true },
+          ],
+        },
+        {
+          num: 6,
+          key: "quality",
+          title: "Data minimization and quality",
+          items: [
+            { k: "6a", label: "(a) Provenance & dictionary.", req: true },
+            {
+              k: "6b",
+              label: "(b) Validation / missing data plan.",
+              req: true,
+            },
+          ],
+        },
+        {
+          num: 7,
+          key: "analysis",
+          title: "Analysis & AI development",
+          items: [
+            { k: "7a", label: "(a) Extract matches approvals.", req: true },
+            {
+              k: "7c",
+              label: "(c) AI docs & bias checks (if AI).",
+              req: true,
+              showFor: ["innovation"],
+            },
+          ],
+        },
+        {
+          num: 8,
+          key: "compliance",
+          title: "Compliance monitoring and auditing",
+          items: [
+            { k: "8a", label: "(a) Internal audit.", req: true },
+            { k: "8b", label: "(b) Keep RoPA up to date.", req: true },
+          ],
+        },
+        {
+          num: 9,
+          key: "closeout",
+          title: "Dissemination, closeout, retention & deletion",
+          items: [
+            { k: "9a", label: "(a) Disclosure control OK.", req: true },
+            {
+              k: "9c",
+              label: "(c) Retention/deletion — Art. 5(1)(e).",
+              req: true,
+            },
+          ],
+        },
+      ];
+      /* Flow questions derived from the flowchart */
+      const FLOW = {
+        1: {
+          q: "Project classification complete & documented?",
+          onYes: 2,
+          onNo: 1,
+        },
+        2: { q: "Valid legal route and consent completed?", onYes: 3, onNo: 2 },
+        3: {
+          q: "All ethical and regulatory approvals in place?",
+          onYes: 4,
+          onNo: 3,
+        },
+        4: { q: "Data access route & contracts are ok?", onYes: 5, onNo: 4 },
+        5: {
+          q: "Information security & privacy measures and risks controlled?",
+          onYes: 6,
+          onNo: 5,
+        },
+        6: { q: "Proceed to analysis?", onYes: 7, onNo: 6 },
+        /* Step 7 has several conditional checks in order */
+        7: [
+          { q: "Extract matches necessary approvals?", yes: 8, no: 3 },
+          { q: "Any new purpose?", yes: 1, no: "next" },
+          { q: "Any new approvals needed?", yes: 3, no: "next" },
+          { q: "Any new access/contracts?", yes: 4, no: 8 },
+        ],
+        8: { q: "Any gaps found?", onYes: 4, onNo: 9 },
+        9: { q: "Retain/reuse beyond plan?", onYes: 1, onNo: "end" },
+      };
+      /* ------------ State ------------ */
+      const STORAGE = "suhr_flow_v1";
+      const $ = (s) => document.querySelector(s);
+      const $$ = (s) => Array.from(document.querySelectorAll(s));
+      const state = {
+        purpose: null,
+        checks: {},
+        savedAt: null,
+        visible: 0,
+        step: 0,
+        subQ: 0,
+        reachedEnd: false, // track if user ever reached the end screen
+      };
+      /* ------------ Purpose UI ------------ */
+      function renderPurposes() {
+        const host = $("#purposeList");
+        host.innerHTML = "";
+        PURPOSES.forEach((p) => {
+          const el = document.createElement("label");
+          el.className = "option";
+          el.innerHTML = `
+            <input type="radio" name="purpose" value="${p.id}">
+            <div style="display:flex;justify-content:space-between;gap:8px">
+              <div><b>${p.title}</b><div class="tiny" style="margin-top:4px">${
+            p.blurb
+          }</div></div>
+              <span class="tag gdpr">${
+                p.id === "anon" ? "No GDPR" : "GDPR"
+              }</span>
+            </div>`;
+          el.addEventListener("click", () => {
+            state.purpose = p.id;
+            save(true);
+            $("#anonMsg").classList.toggle("hidden", state.purpose !== "anon");
+            if (p.id === "anon") {
+              hideFlow();
+              renderDots(0);
+              $("#timeline").innerHTML = "";
+              $("#finish").classList.remove("show");
+              state.reachedEnd = false;
+              return;
+            }
+            // start at step 1
+            state.visible = 1;
+            state.step = 1;
+            state.subQ = 0;
+            state.reachedEnd = false;
+            save(true);
+            $("#finish").classList.remove("show");
+            renderDots(state.visible);
+            renderTimeline();
+            showFlow();
+            askCurrent(); // auto-expand step 1
+          });
+          host.appendChild(el);
+        });
+        if (state.purpose) {
+          $$('input[name="purpose"]').forEach((i) => {
+            if (i.value === state.purpose) {
+              i.checked = true;
+              i.closest(".option").classList.add("active");
+            }
+          });
+          $("#anonMsg").classList.toggle("hidden", state.purpose !== "anon");
+        }
+      }
+      /* ------------ Timeline (accordion) ------------ */
+      function renderTimeline() {
+        const host = $("#timeline");
+        host.innerHTML = "";
+        if (!state.purpose || state.purpose === "anon") return;
+        const v = state.visible || 1;
+        for (let i = 0; i < v; i++) addStep(host, STEPS[i], i + 1);
+        expandDetailsForStep(state.step);
+      }
+      function addStep(host, step, idx) {
+        const done = isStepComplete(step);
+        const sec = document.createElement("section");
+        sec.className = "step" + (done ? " done" : "");
+        sec.dataset.step = step.key;
+        sec.innerHTML = `
+          <div class="head">
+            <div class="title">
+              <span class="num">${step.num}</span>
+              <div><b>${step.title}</b></div>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center">
+              <span class="badge" id="badge_${step.key}">${
+          done ? "Complete ✓" : "In progress"
+        }</span>
+              <button class="toggle" data-fold="${step.key}">Details</button>
+            </div>
+          </div>
+          <div class="body fold" id="fold_${step.key}">
+            <ul class="list"></ul>
+          </div>`;
+        const ul = sec.querySelector(".list");
+        step.items.forEach((it) => {
+          if (it.showFor && !it.showFor.includes(state.purpose)) return;
+          const checked = !!state.checks[step.key]?.[it.k];
+          const li = document.createElement("li");
+          li.className = "li";
+          const id = `${step.key}_${it.k}`;
+          li.innerHTML = `
+            <div class="letters">${it.k}</div>
+            <label for="${id}">${it.label}${
+            it.req
+              ? ` <span class='req'>★</span>`
+              : " <span class='opt'>(opt)</span>"
+          }</label>
+            <div style="display:flex;align-items:center;gap:8px">
+              <input class="chk" type="checkbox" id="${id}" ${
+            checked ? "checked" : ""
+          }/>
+              <svg class="box" viewBox="0 0 24 24" aria-hidden="true"><path class="tick" d="M5 13l4 4L19 7"/></svg>
+            </div>`;
+          li.querySelector(".chk").addEventListener("change", (e) => {
+            (state.checks[step.key] ??= {})[it.k] = e.target.checked;
+            save(true);
+            const nowDone = isStepComplete(step);
+            $("#badge_" + step.key).textContent = nowDone
+              ? "Complete ✓"
+              : "In progress";
+            if (nowDone && !sec.classList.contains("done")) {
+              sec.classList.add("done");
+              if (idx === 1) advanceToStep(2); // auto show Step 2 when Step 1 completes
+            } else if (!nowDone) {
+              sec.classList.remove("done");
+            }
+            renderDots(state.visible); // refresh top dots' done state
+            updateProgress();
+            // If the end screen is visible (or was reached before), update/show its message when all steps are complete.
+            if ($("#finish").classList.contains("show")) {
+              refreshFinishBanner();
+            } else if (state.reachedEnd && allStepsComplete()) {
+              finish();
+            }
+          });
+          ul.appendChild(li);
+        });
+        // "Details" toggle
+        sec.querySelector(".toggle").addEventListener("click", () => {
+          const pane = document.getElementById("fold_" + step.key);
+          pane.classList.toggle("fold");
+        });
+        host.appendChild(sec);
+      }
+      /* Expand current step details and collapse others while asking each question */
+      function expandDetailsForStep(stepNum) {
+        if (!stepNum) return;
+        // collapse all
+        $$("#timeline .body").forEach((pane) => pane.classList.add("fold"));
+        const current = STEPS[stepNum - 1];
+        if (!current) return;
+        const pane = document.getElementById("fold_" + current.key);
+        if (pane) pane.classList.remove("fold");
+      }
+      /* ------------ Dots / progress ------------ */
+      function renderDots(visible) {
+        const d = $("#dots");
+        d.innerHTML = "";
+        for (let i = 1; i <= STEPS.length; i++) {
+          const stepObj = STEPS[i - 1];
+          const stepDone = isStepComplete(stepObj);
+          const dot = document.createElement("div");
+          dot.className =
+            "dot" +
+            (i <= visible ? " unlocked" : "") +
+            (i === state.step ? " active" : "") +
+            (stepDone ? " done" : "");
+          dot.textContent = i;
+          dot.setAttribute(
+            "aria-label",
+            `Step ${i}${stepDone ? " complete" : ""}`
+          );
+          if (i <= visible) {
+            dot.addEventListener("click", () => {
+              state.step = i;
+              state.subQ = 0;
+              save(true);
+              askCurrent();
+              scrollToStep(i);
+              highlightDot();
+            });
+          }
+          d.appendChild(dot);
+        }
+        updateProgress();
+      }
+      function highlightDot() {
+        $$("#dots .dot").forEach((el, idx) => {
+          el.classList.toggle("active", idx + 1 === state.step);
+        });
+      }
+      function scrollToStep(n) {
+        const el = document.querySelector(`.step:nth-of-type(${n})`);
+        if (!el) return;
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+        el.animate(
+          [
+            { outlineColor: "#56b4e9", outlineWidth: "0px" },
+            { outlineColor: "#56b4e9", outlineWidth: "6px" },
+            { outlineColor: "transparent", outlineWidth: "0px" },
+          ],
+          { duration: 800 }
+        );
+      }
+      /* ------------ Flow controller (Yes/No) ------------ */
+      const flow = $("#flow"),
+        qtxt = $("#qtxt"),
+        yesBtn = $("#yesBtn"),
+        noBtn = $("#noBtn");
+      function showFlow() {
+        flow.classList.remove("hidden");
+      }
+      function hideFlow() {
+        flow.classList.add("hidden");
+      }
+      function askCurrent() {
+        // Reset finish visibility text live region while navigating
+        $("#finish").classList.remove("show");
+        if (state.purpose === "anon" || !state.step) {
+          hideFlow();
+          return;
+        }
+        // Ensure the current step's checklist is expanded (and others collapsed)
+        expandDetailsForStep(state.step);
+        // Step 7 special sequence
+        if (state.step === 7) {
+          const seq = FLOW[7];
+          let idx = state.subQ;
+          if (idx >= seq.length) {
+            state.step = 8;
+            state.subQ = 0;
+            renderDots(state.visible);
+            askCurrent();
+            return;
+          }
+          const node = seq[idx];
+          qtxt.textContent = node.q;
+          yesBtn.onclick = () => {
+            if (node.yes === "next") {
+              state.subQ++;
+              askCurrent();
+              return;
+            }
+            goto(node.yes);
+          };
+          noBtn.onclick = () => {
+            if (node.no === "next") {
+              state.subQ++;
+              askCurrent();
+              return;
+            }
+            goto(node.no);
+          };
+          return;
+        }
+        // Regular step question
+        const node = FLOW[state.step];
+        if (!node) {
+          hideFlow();
+          return;
+        }
+        qtxt.textContent = node.q;
+        yesBtn.onclick = () => goto(node.onYes);
+        noBtn.onclick = () => goto(node.onNo);
+      }
+      function goto(dest) {
+        if (dest === "end") {
+          finish();
+          return;
+        }
+        // move
+        state.step = dest;
+        state.subQ = 0;
+        if (state.step > state.visible) state.visible = state.step; // grow visibility
+        renderDots(state.visible);
+        renderTimeline();
+        askCurrent();
+        scrollToStep(state.step);
+        save(true);
+      }
+      /* Called when step 1 completes to auto reveal step 2 */
+      function advanceToStep(n) {
+        if (state.visible < n) {
+          state.visible = n;
+          renderDots(state.visible);
+          renderTimeline();
+          scrollToStep(n);
+        }
+        state.step = n;
+        state.subQ = 0;
+        askCurrent();
+        save(true);
+      }
+      /* ------------ Helpers ------------ */
+      function isStepComplete(step) {
+        const d = state.checks[step.key] || {};
+        const req = step.items.filter(
+          (it) => !(it.showFor && !it.showFor.includes(state.purpose)) && it.req
+        );
+        return req.length ? req.every((it) => !!d[it.k]) : true;
+      }
+      function allStepsComplete() {
+        if (!state.purpose || state.purpose === "anon") return false;
+        return STEPS.every((s) => isStepComplete(s));
+      }
+      function updateProgress() {
+        let total = 0,
+          done = 0;
+        STEPS.forEach((s) => {
+          if (state.purpose === "anon" && s.num > 1) return;
+          s.items.forEach((it) => {
+            if (it.showFor && !it.showFor.includes(state.purpose)) return;
+            if (it.req) {
+              total++;
+              if (state.checks[s.key]?.[it.k]) done++;
+            }
+          });
+        });
+        const pct = total ? Math.round((100 * done) / total) : 0;
+        $("#pbar").style.width = pct + "%";
+      }
+      /* ------------ Finish ------------ */
+      function finish() {
+        hideFlow();
+        state.reachedEnd = true;
+        save(true);
+        const ok = allStepsComplete();
+        const finishEl = $("#finish");
+        const titleEl = $("#finishTitle");
+        const subEl = $("#finishSub");
+        const confettiHost = $("#confetti");
+        if (ok) {
+          titleEl.textContent = "End 🎉";
+          subEl.textContent = "All flow checks passed.";
+          confettiHost.innerHTML = "";
+          confetti(24);
+        } else {
+          titleEl.textContent = "End";
+          subEl.textContent = "";
+          confettiHost.innerHTML = ""; // no confetti if not fully complete
+        }
+        finishEl.classList.add("show");
+      }
+      function refreshFinishBanner() {
+        // Update finish banner live without toggling visibility
+        const ok = allStepsComplete();
+        const titleEl = $("#finishTitle");
+        const subEl = $("#finishSub");
+        const confettiHost = $("#confetti");
+        if (ok) {
+          titleEl.textContent = "End 🎉";
+          subEl.textContent = "All flow checks passed.";
+          confettiHost.innerHTML = "";
+          confetti(24);
+        } else {
+          titleEl.textContent = "End";
+          subEl.textContent = "";
+          confettiHost.innerHTML = "";
+        }
+      }
+      function confetti(n) {
+        const host = $("#confetti");
+        host.innerHTML = "";
+        for (let i = 0; i < n; i++) {
+          const piece = document.createElement("i");
+          piece.style.setProperty("--dx", Math.random() * 300 - 150 + "px");
+          piece.style.left = 20 + Math.random() * 60 + "%";
+          piece.style.background = i % 2 ? "#0072B2" : "#E69F00";
+          piece.style.animationDelay = Math.random() * 0.4 + "s";
+          host.appendChild(piece);
+        }
+      }
+      /* ------------ Save/Load ------------ */
+      function save(quiet = false) {
+        state.savedAt = Date.now();
+        localStorage.setItem(STORAGE, JSON.stringify(state));
+        if (!quiet) updateProgress();
+      }
+      function load() {
+        try {
+          const raw = localStorage.getItem(STORAGE);
+          if (raw) Object.assign(state, JSON.parse(raw));
+        } catch (e) {}
+      }
+      /* ------------ Clear / Reset ------------ */
+      function clearAll() {
+        try {
+          localStorage.removeItem(STORAGE);
+        } catch (e) {}
+        state.purpose = null;
+        state.checks = {};
+        state.savedAt = null;
+        state.visible = 0;
+        state.step = 0;
+        state.subQ = 0;
+        state.reachedEnd = false;
+        renderPurposes();
+        renderDots(0);
+        $("#timeline").innerHTML = "";
+        $("#finish").classList.remove("show");
+        $("#anonMsg").classList.add("hidden");
+        hideFlow();
+        updateProgress();
+      }
+      /* ------------ Boot ------------ */
+      load();
+      renderPurposes();
+      if (state.purpose && state.purpose !== "anon") {
+        state.visible = state.visible || 1;
+        state.step = state.step || 1;
+        renderDots(state.visible);
+        renderTimeline();
+        showFlow();
+        askCurrent();
+      } else {
+        hideFlow();
+      }
+      updateProgress();
+      // Clear button handler
+      document.getElementById("clearBtn").addEventListener("click", () => {
+        const ok = confirm(
+          "Clear all saved progress and do a fresh start? This will remove your selections!"
+        );
+        if (ok) clearAll();
+      });
+    </script>
+  </body>
+</html>