add theme toggle, intro section, and cat emoji

README.md

@@ -1,5 +1,6 @@
 ---
 title: Data-use Extraction — WebGPU
+emoji: 🐈
 colorFrom: indigo
 colorTo: blue
 sdk: static

index.html

@@ -151,12 +151,25 @@
       transition: opacity .55s var(--ease), visibility .55s;
     }
     .loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
-    .loader-inner { width: min(860px, 92vw); text-align: left; }
+    .loader-theme-toggle {
+      position: absolute; top: 24px; right: 28px; z-index: 101;
+      display: inline-flex; align-items: center; gap: 0.5rem;
+      font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--text-muted); background: var(--surface);
+      border: 1px solid var(--border); border-radius: 999px;
+      padding: 0.5rem 0.85rem; cursor: pointer;
+      box-shadow: var(--shadow-sm);
+      transition: color .2s var(--ease), border-color .2s var(--ease);
+    }
+    .loader-theme-toggle:hover { color: var(--text); border-color: var(--accent-2); }
+    .loader-theme-toggle svg { width: 14px; height: 14px; }
+    .loader-inner { width: min(1120px, 94vw); text-align: left; }
     .loader-layout {
       display: grid;
-      grid-template-columns: minmax(0, 1.15fr) minmax(200px, 0.85fr);
+      grid-template-columns: minmax(0, 1.1fr) minmax(200px, 0.85fr) minmax(0, 1fr);
       align-items: center;
-      gap: clamp(1.5rem, 5vw, 4rem);
+      gap: clamp(1.5rem, 4vw, 3.25rem);
     }
     .loader-copy { min-width: 0; }
     .loader-visual {
@@ -165,6 +178,38 @@
       justify-content: center;
       position: relative;
     }
+    .loader-about {
+      min-width: 0;
+      padding-left: clamp(1rem, 2vw, 1.5rem);
+      border-left: 1px solid var(--border);
+    }
+    .loader-about h2 {
+      margin: 0 0 0.85rem;
+      font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
+      text-transform: uppercase; color: var(--text-muted); font-weight: 600;
+    }
+    .loader-about p {
+      margin: 0 0 0.85rem; color: var(--text-muted);
+      font-size: 0.82rem; line-height: 1.6;
+    }
+    .loader-about p b { color: var(--text); font-weight: 600; }
+    .loader-about ul {
+      margin: 0; padding: 0; list-style: none;
+      display: grid; gap: 0.5rem;
+    }
+    .loader-about li {
+      display: flex; gap: 0.6rem; align-items: flex-start;
+      font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em;
+      color: var(--text-muted); line-height: 1.5;
+    }
+    .loader-about li::before {
+      content: "—"; color: var(--accent-2); flex: none;
+    }
+    .loader-about .privacy {
+      margin-top: 1rem; padding-top: 0.85rem;
+      border-top: 1px solid var(--border);
+      color: var(--text-subtle); font-size: 0.72rem; line-height: 1.5;
+    }
     .cat-sculpture {
       width: 100%;
       max-width: 280px;
@@ -235,6 +280,9 @@
       .loader-brand { margin-bottom: 1.2rem; }
       .loader-pct { font-size: 54px; }
       .loader-cta { margin-top: 1.4rem; width: 100%; }
+      .loader-theme-toggle { top: 16px; right: 16px; }
+      .loader-about { border-left: none; padding-left: 0; }
+      .loader-about p, .loader-about li { font-size: 0.7rem; }
     }
 
     /* Header ---------------------------------------------------------- */
@@ -881,6 +929,11 @@
 </head>
 <body>
   <div class="loader" id="loader" data-state="sleeping">
+    <button class="loader-theme-toggle theme-toggle" type="button" title="Toggle light/dark" aria-label="Toggle theme">
+      <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+      <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+      <span class="theme-label">Dark</span>
+    </button>
     <div class="loader-inner">
       <div class="loader-layout">
         <div class="loader-copy">
@@ -1052,6 +1105,21 @@
             </g>
           </svg>
         </div>
+
+        <div class="loader-about">
+          <h2>While you wait</h2>
+          <p>
+            <b>Data-use extraction</b> runs entirely in your browser on WebGPU —
+            no server, no uploads. It spots data mentions in research text, then
+            attributes each with provenance and usage/impact.
+          </p>
+          <ul>
+            <li><b>GLiNER</b> — detects spans, labels specificity</li>
+            <li><b>LFM2.5-350M</b> — producer, year, geography, acronym</li>
+            <li><b>Usage &amp; impact</b> — action + impact classification</li>
+          </ul>
+          <p class="privacy">Nothing leaves your machine. Models download once, then run offline.</p>
+        </div>
       </div>
     </div>
   </div>
@@ -1072,10 +1140,10 @@
       </div>
       <div class="header-actions">
         <div class="status-pill" id="status-pill"><span class="status-dot" aria-hidden="true"></span><span id="status">Initialising…</span></div>
-        <button class="icon-btn" id="theme-toggle" title="Toggle light/dark" aria-label="Toggle theme">
-          <svg id="theme-icon-moon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
-          <svg id="theme-icon-sun" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
-          <span id="theme-label">Dark</span>
+        <button class="icon-btn theme-toggle" title="Toggle light/dark" aria-label="Toggle theme">
+          <svg class="theme-icon-moon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+          <svg class="theme-icon-sun" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+          <span class="theme-label">Dark</span>
         </button>
       </div>
     </header>
@@ -1240,25 +1308,29 @@
 
   <script>
     (function () {
-      var btn = document.getElementById("theme-toggle");
-      var moon = document.getElementById("theme-icon-moon");
-      var sun = document.getElementById("theme-icon-sun");
-      var label = document.getElementById("theme-label");
-      function apply() {
+      var toggles = document.querySelectorAll(".theme-toggle");
+      function sync() {
         var dark = document.documentElement.getAttribute("data-theme") === "dark";
-        moon.style.display = dark ? "none" : "block";
-        sun.style.display = dark ? "block" : "none";
-        label.textContent = dark ? "Light" : "Dark";
-        btn.title = dark ? "Switch to light mode" : "Switch to dark mode";
+        toggles.forEach(function (btn) {
+          var moon = btn.querySelector(".theme-icon-moon");
+          var sun = btn.querySelector(".theme-icon-sun");
+          var label = btn.querySelector(".theme-label");
+          if (moon) moon.style.display = dark ? "none" : "block";
+          if (sun) sun.style.display = dark ? "block" : "none";
+          if (label) label.textContent = dark ? "Light" : "Dark";
+          btn.title = dark ? "Switch to light mode" : "Switch to dark mode";
+        });
       }
-      btn.addEventListener("click", function () {
-        var dark = document.documentElement.getAttribute("data-theme") === "dark";
-        if (dark) document.documentElement.removeAttribute("data-theme");
-        else document.documentElement.setAttribute("data-theme", "dark");
-        try { localStorage.setItem("datause-theme", dark ? "light" : "dark"); } catch (e) {}
-        apply();
+      toggles.forEach(function (btn) {
+        btn.addEventListener("click", function () {
+          var dark = document.documentElement.getAttribute("data-theme") === "dark";
+          if (dark) document.documentElement.removeAttribute("data-theme");
+          else document.documentElement.setAttribute("data-theme", "dark");
+          try { localStorage.setItem("datause-theme", dark ? "light" : "dark"); } catch (e) {}
+          sync();
+        });
       });
-      apply();
+      sync();
     })();
   </script>