Replace template index.html

index.html

@@ -1,19 +1,89 @@
 <!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 lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Sludge — deceptive design patterns in UI trees</title>
+<meta name="description" content="Detect deceptive design patterns in a UI tree and see which provisions they may implicate. Runs entirely in your browser. Not a legality determination.">
+<link rel="stylesheet" href="style.css">
+<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.19.2/dist/ort.min.js"></script>
+</head>
+<body>
+<div class="wrap">
+
+<header>
+  <h1>Sludge<span class="dot">.</span></h1>
+  <p class="tagline">Deceptive design patterns in <strong>UI trees</strong>, mapped to the
+     provisions they may implicate — running entirely in your browser.</p>
+</header>
+
+<div class="banner">
+  <strong>Sludge does not determine legality.</strong>
+  <p>It reports provisions that <em>may</em> be implicated and the screen elements that are the
+     factual basis for looking at them. Whether a provision is actually engaged depends on facts
+     no UI tree contains — purposes, legal basis, audience, the rest of the journey, prior
+     consent, sector rules — and is an assessment for a qualified human.</p>
+  <p>There is no feature here that labels a named company's product unlawful, and there will not
+     be one. This is a tool for reviewing interfaces, not for publishing verdicts about them.</p>
+  <p><strong>Nothing you paste leaves this page.</strong> The model runs locally in your browser;
+     there is no server to send it to. It is a 48&nbsp;MB one-time download, cached afterwards —
+     full precision, because int8 quantisation was measured to flip about a quarter of this
+     model's decisions.</p>
+</div>
+
+<div class="grid">
+  <div class="card">
+    <label class="fld" for="input">UI tree (JSON) or HTML fragment</label>
+    <textarea id="input" spellcheck="false" placeholder="Paste a UI tree as JSON, or an HTML fragment — or press “Load example” to generate a counterfactual pair."></textarea>
+    <button id="run" disabled>Analyse</button>
+    <div class="status" id="status">starting…</div>
+    <div class="bar"><i id="bar"></i></div>
+  </div>
+
+  <div class="card">
+    <label class="fld" for="profile">Profile — what a false positive costs you</label>
+    <select id="profile">
+      <option value="triage">triage — sweep broadly, tolerate false positives</option>
+      <option value="review" selected>review — balanced, for a design review</option>
+      <option value="audit">audit — only what it is confident of</option>
+    </select>
+
+    <label class="fld" for="juris">Jurisdiction — the provision table</label>
+    <select id="juris"></select>
+
+    <label class="fld" for="tpl">Load a counterfactual example</label>
+    <div class="row">
+      <select id="tpl"></select>
+      <select id="pat"></select>
+    </div>
+    <button id="load" class="secondary">Load example</button>
+    <div id="exnote" class="status"></div>
+  </div>
+</div>
+
+<div class="tabs" role="tablist">
+  <button role="tab" aria-selected="true"  data-panel="p-find">Elements flagged</button>
+  <button role="tab" aria-selected="false" data-panel="p-prov">Provisions that may be implicated</button>
+  <button role="tab" aria-selected="false" data-panel="p-fix">What to change</button>
+  <button role="tab" aria-selected="false" data-panel="p-tax">Taxonomy</button>
+  <button role="tab" aria-selected="false" data-panel="p-json">JSON</button>
+</div>
+
+<section role="tabpanel" id="p-find"><div class="empty">Paste a tree, or load an example.</div></section>
+<section role="tabpanel" id="p-prov" class="hidden"></section>
+<section role="tabpanel" id="p-fix"  class="hidden"></section>
+<section role="tabpanel" id="p-tax"  class="hidden"></section>
+<section role="tabpanel" id="p-json" class="hidden"></section>
+
+<footer>
+  <p><strong>Sludge does not determine legality.</strong> Findings are pointers for a human to
+     assess, never findings of breach. A quiet report is not a clean bill of health — it means
+     nothing crossed the threshold the chosen profile fixes.</p>
+  <p id="about"></p>
+  <p>Apache-2.0 · the provision tables are configuration, not legal advice.</p>
+</footer>
+
+</div>
+<script type="module" src="app.js"></script>
+</body>
 </html>