Build static upload prototype

.github/workflows/ci.yml

@@ -13,7 +13,5 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: "22"
-      - name: Placeholder
-        run: |
-          node --version
-          echo "Add linting and tests with the first implementation PR."
+      - name: Validate static prototype
+        run: node scripts/validate.mjs

README.md

@@ -26,3 +26,22 @@ The frontend should never persist raw conversation exports beyond the active upl
 ## First Milestone
 
 Build a static, mobile-first upload prototype wired to a mock anonymization endpoint, with consent copy and export instructions ready for review.
+
+## Current Prototype
+
+This repo now includes a static upload prototype that can be opened directly in a browser:
+
+```bash
+open index.html
+```
+
+The prototype includes:
+
+- Plain-language consent and privacy reminders.
+- File selection for supported export-like formats: JSON, TXT, CSV, and ZIP.
+- Validation, ready, and mock-success states.
+- Platform guidance for ChatGPT, Claude, Gemini, and Copilot.
+- A mock anonymization result that documents the intended `POST /anonymize` boundary.
+
+No file is uploaded or persisted by this static prototype. It is meant to validate the
+contributor-facing flow before connecting to a deployed anonymization service.

index.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Make AI Visible Upload Prototype</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <section class="intro" aria-labelledby="page-title">
+        <p class="eyebrow">Make AI Visible MVP</p>
+        <h1 id="page-title">Donate an AI conversation safely</h1>
+        <p>
+          Upload a conversation export to test the privacy-first submission flow. This
+          prototype uses synthetic local handling and does not send files anywhere.
+        </p>
+      </section>
+
+      <section class="panel" aria-labelledby="consent-title">
+        <h2 id="consent-title">Before you upload</h2>
+        <ul class="checklist">
+          <li>Use an export file, not screenshots or passwords.</li>
+          <li>Remove anything you already know is private before uploading.</li>
+          <li>Raw conversation text is meant for anonymization, not publication.</li>
+          <li>Public results should be aggregate and privacy-protected.</li>
+        </ul>
+        <label class="consent">
+          <input id="consent" type="checkbox" />
+          <span>I understand this is a draft research upload flow using synthetic testing.</span>
+        </label>
+      </section>
+
+      <section class="panel" aria-labelledby="upload-title">
+        <h2 id="upload-title">Upload export</h2>
+        <div class="dropzone">
+          <input id="file-input" type="file" accept=".json,.txt,.csv,.zip" />
+          <p id="file-summary">Choose a ChatGPT, Claude, Gemini, or Copilot export file.</p>
+        </div>
+        <button id="submit-button" type="button" disabled>Validate and anonymize</button>
+        <p id="status" class="status" role="status">Waiting for consent and a file.</p>
+      </section>
+
+      <section class="panel" aria-labelledby="guidance-title">
+        <h2 id="guidance-title">Export guidance</h2>
+        <div class="guidance-grid">
+          <article>
+            <h3>ChatGPT</h3>
+            <p>Use the data export option from settings and upload the downloaded export file.</p>
+          </article>
+          <article>
+            <h3>Claude</h3>
+            <p>Export or copy a conversation into a supported text or JSON file when available.</p>
+          </article>
+          <article>
+            <h3>Gemini</h3>
+            <p>Use account export tools where available and avoid sharing account credentials.</p>
+          </article>
+          <article>
+            <h3>Copilot</h3>
+            <p>Export conversation history only if your account and product settings allow it.</p>
+          </article>
+        </div>
+      </section>
+
+      <section class="panel result-panel" aria-labelledby="result-title">
+        <h2 id="result-title">Mock anonymization result</h2>
+        <pre id="result">No file processed yet.</pre>
+      </section>
+    </main>
+    <script src="src/app.js"></script>
+  </body>
+</html>

scripts/validate.mjs

@@ -0,0 +1,26 @@
+import { readFile } from "node:fs/promises";
+
+const requiredFiles = ["index.html", "styles.css", "src/app.js"];
+
+for (const path of requiredFiles) {
+  const source = await readFile(path, "utf8");
+  if (!source.trim()) {
+    throw new Error(`${path} is empty`);
+  }
+}
+
+const html = await readFile("index.html", "utf8");
+for (const needle of ["consent", "file-input", "submit-button", "Mock anonymization result"]) {
+  if (!html.includes(needle)) {
+    throw new Error(`index.html is missing ${needle}`);
+  }
+}
+
+const script = await readFile("src/app.js", "utf8");
+for (const needle of ["supportedExtensions", "raw_file_persisted", "addEventListener"]) {
+  if (!script.includes(needle)) {
+    throw new Error(`src/app.js is missing ${needle}`);
+  }
+}
+
+console.log("Portal prototype validation passed.");

src/app.js

@@ -0,0 +1,62 @@
+const consent = document.querySelector("#consent");
+const fileInput = document.querySelector("#file-input");
+const fileSummary = document.querySelector("#file-summary");
+const submitButton = document.querySelector("#submit-button");
+const statusText = document.querySelector("#status");
+const result = document.querySelector("#result");
+
+const supportedExtensions = [".json", ".txt", ".csv", ".zip"];
+
+function selectedFile() {
+  return fileInput.files && fileInput.files.length > 0 ? fileInput.files[0] : null;
+}
+
+function isSupported(file) {
+  return supportedExtensions.some((extension) => file.name.toLowerCase().endsWith(extension));
+}
+
+function updateState() {
+  const file = selectedFile();
+  const hasConsent = consent.checked;
+
+  if (!file) {
+    fileSummary.textContent = "Choose a ChatGPT, Claude, Gemini, or Copilot export file.";
+    statusText.textContent = hasConsent ? "Waiting for a file." : "Waiting for consent and a file.";
+    submitButton.disabled = true;
+    return;
+  }
+
+  fileSummary.textContent = `${file.name} (${Math.ceil(file.size / 1024)} KB)`;
+
+  if (!isSupported(file)) {
+    statusText.textContent = "Unsupported file type. Use JSON, TXT, CSV, or ZIP.";
+    submitButton.disabled = true;
+    return;
+  }
+
+  statusText.textContent = hasConsent ? "Ready to validate." : "Consent is required before upload.";
+  submitButton.disabled = !hasConsent;
+}
+
+function mockAnonymize() {
+  const file = selectedFile();
+  if (!file) return;
+
+  statusText.textContent = "Validated locally. Mock anonymization complete.";
+  result.textContent = JSON.stringify(
+    {
+      upload_status: "accepted_for_mock_processing",
+      file_name: file.name,
+      anonymization_service: "POST /anonymize",
+      raw_file_persisted: false,
+      next_review_step: "privacy review before scoring or publication",
+    },
+    null,
+    2,
+  );
+}
+
+consent.addEventListener("change", updateState);
+fileInput.addEventListener("change", updateState);
+submitButton.addEventListener("click", mockAnonymize);
+updateState();

styles.css

@@ -0,0 +1,195 @@
+:root {
+  color-scheme: light;
+  --ink: #17212f;
+  --muted: #526173;
+  --line: #cfd8e3;
+  --surface: #ffffff;
+  --wash: #eef4f8;
+  --accent: #2f7d6d;
+  --accent-strong: #155a4c;
+  --warn: #8a5a00;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  background: var(--wash);
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.shell {
+  width: min(100%, 920px);
+  margin: 0 auto;
+  padding: 24px 16px 40px;
+}
+
+.intro {
+  padding: 28px 0 18px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--accent-strong);
+  font-size: 0.85rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  max-width: 720px;
+  margin-bottom: 12px;
+  font-size: clamp(2.2rem, 8vw, 4.6rem);
+  line-height: 0.95;
+}
+
+h2 {
+  margin-bottom: 16px;
+  font-size: 1.35rem;
+}
+
+h3 {
+  margin-bottom: 8px;
+  font-size: 1rem;
+}
+
+.intro p {
+  max-width: 680px;
+  color: var(--muted);
+  font-size: 1.08rem;
+  line-height: 1.55;
+}
+
+.panel {
+  margin-top: 16px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.checklist {
+  display: grid;
+  gap: 10px;
+  margin: 0 0 18px;
+  padding-left: 20px;
+  color: var(--muted);
+}
+
+.consent {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.consent input {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+  accent-color: var(--accent);
+}
+
+.dropzone {
+  display: grid;
+  gap: 12px;
+  min-height: 136px;
+  place-items: center;
+  padding: 22px;
+  border: 2px dashed var(--line);
+  border-radius: 8px;
+  background: #f8fafc;
+  text-align: center;
+}
+
+.dropzone input {
+  width: 100%;
+  max-width: 360px;
+}
+
+.dropzone p {
+  margin-bottom: 0;
+  color: var(--muted);
+}
+
+button {
+  width: 100%;
+  min-height: 48px;
+  margin-top: 14px;
+  border: 0;
+  border-radius: 8px;
+  color: #fff;
+  background: var(--accent);
+  font: inherit;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+button:disabled {
+  color: #6a7685;
+  background: #d8e0e8;
+  cursor: not-allowed;
+}
+
+.status {
+  margin: 12px 0 0;
+  color: var(--warn);
+  font-weight: 650;
+}
+
+.guidance-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.guidance-grid article {
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fbfcfd;
+}
+
+.guidance-grid p {
+  margin-bottom: 0;
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+pre {
+  min-height: 144px;
+  margin: 0;
+  overflow: auto;
+  padding: 14px;
+  border-radius: 8px;
+  background: #101820;
+  color: #d9f7eb;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+@media (min-width: 720px) {
+  .shell {
+    padding-top: 36px;
+  }
+
+  .guidance-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  button {
+    width: auto;
+    min-width: 240px;
+  }
+}