index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>data-use annotation</title>
<style>
:root { --bg: #f6f8fa; --card: #fff; --fg: #1f2328; --mut: #59636e; --line: #d0d7de; --hl: #0969da; }
body { background: var(--bg); color: var(--fg); font: 16px/1.6 -apple-system, system-ui, sans-serif; margin: 0; }
main { max-width: 640px; margin: 0 auto; padding: 60px 20px; text-align: center; }
h1 { font-size: 24px; margin-bottom: 6px; }
p { color: var(--mut); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
a.user { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 22px 10px; font-size: 19px; font-weight: 700; color: var(--fg); text-decoration: none; }
a.user:hover { border-color: var(--hl); }
a.user span { display: block; font-size: 13px; font-weight: 400; color: var(--mut); margin-top: 4px; }
.links a { color: var(--mut); font-size: 14px; margin: 0 10px; }
</style>
</head>
<body>
<main>
  <h1>data-use annotation</h1>
  <p>keep / drop data mentions · pick your name to load your 240 passages</p>
  <ol style="text-align:left;color:var(--mut);font-size:15px;max-width:520px;margin:0 auto 8px;padding-left:22px">
    <li><b style="color:var(--fg)">Annotate</b> with <kbd>→</kbd> <kbd>k</kbd> keep / <kbd>d</kbd> drop — your name locks in, progress saves in this browser.</li>
    <li><b style="color:var(--fg)">Export checkpoints</b> (top-right <b>export</b> button, or <kbd>e</kbd>) every so often.</li>
    <li><b style="color:var(--fg)">Send the file</b> (<kbd>rulings-&lt;name&gt;-&lt;set&gt;.jsonl</kbd>) to <b style="color:var(--fg)">rafael / aivin</b> when done — or to resume later via <b>import</b>.</li>
  </ol>
  <p>Finished your 240? Pick <b style="color:var(--fg)">…part2</b> in the dataset dropdown inside the app. Progress saves per browser — export often.</p>
  <div class="grid">
    <a class="user" href="./review.html?user=paddy">paddy<span>240 passages</span></a>
    <a class="user" href="./review.html?user=aj">aj<span>240 passages</span></a>
    <a class="user" href="./review.html?user=aivin">aivin<span>240 passages</span></a>
    <a class="user" href="./review.html?user=rafael">rafael<span>240 passages</span></a>
  </div>
  <div class="links">
    <a href="./review.html?ds=sample">sample · 60</a>
    <a href="./review.html?ds=gold">gold · 473</a>
  </div>
</main>
</body>
</html>