From feab17d37a0ecd185430271759708265539a5725 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 17 Apr 2026 08:56:56 +0000
Subject: [PATCH] Add mobile landing page at docs/index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Most Vera users will be on a phone, not a Mac mini. The paste-in
prompt is already the right product shape for mobile, but the flow
(find PROMPT.md on GitHub, select text in a code block on iOS, copy,
switch to Claude, navigate to Project settings, paste) is six steps
in two apps. Most bounce before finishing.

New landing page collapses this to three taps:

1. Tap "Copy Vera prompt" (Clipboard API + execCommand fallback).
2. Tap "Open Claude" / "Open ChatGPT" / "Open Gemini" — opens the
   web URL, which iOS Universal Links will hand to the installed app.
3. Paste and start.

Implementation notes:
- Single file, no dependencies, ~7KB. Inline CSS + vanilla JS.
- System fonts only (no font download). SF Pro on iOS, BlinkMacSystem
  elsewhere, system-ui fallback.
- Dark theme with proper contrast; safe-area-inset-bottom padding for
  notched iPhones; 48px+ tap targets throughout.
- Prompt text embedded in JS (kept in sync with PROMPT.md by comment).
- OG/Twitter card tags for link previews.
- Passes HTML parity check (no unclosed tags).

README gets a second CTA next to "Try it in 30 seconds": "On your
phone". Points at https://iamitp.github.io/vera/ which becomes live
as soon as GitHub Pages is enabled in Settings (source: main / /docs).

https://claude.ai/code/session_01DMCSCaVAsCLVXFswHeQ7cx
---
 README.md       |   2 +-
 docs/index.html | 242 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 243 insertions(+), 1 deletion(-)
 create mode 100644 docs/index.html

diff --git a/README.md b/README.md
index d9ba5fe..2fae370 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Reads instructions literally. Verifies names before writing them into documents.
 
 Works in Claude, ChatGPT, Gemini, any AI chat. No install to try.
 
-[**Try it in 30 seconds →**](PROMPT.md)
+[**Try it in 30 seconds →**](PROMPT.md)  ·  [**On your phone →**](https://iamitp.github.io/vera/)
 
 ---
 
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..036ae80
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Vera — AI with clerk discipline</title>
+<meta name="description" content="Paste one prompt into any AI chat. Every claim gets tagged by confidence so you see which lines to trust. Works in Claude, ChatGPT, Gemini. No install.">
+<meta name="theme-color" content="#0e0e10">
+<meta property="og:title" content="Vera — AI with clerk discipline">
+<meta property="og:description" content="Paste one prompt into any AI chat. Every claim gets tagged by confidence. Works in Claude, ChatGPT, Gemini.">
+<meta property="og:url" content="https://iamitp.github.io/vera/">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary">
+<link rel="canonical" href="https://iamitp.github.io/vera/">
+<style>
+  * { box-sizing: border-box; }
+  html { -webkit-text-size-adjust: 100%; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+    background: #0e0e10;
+    color: #e8e8ea;
+    margin: 0;
+    padding: 32px 20px calc(60px + env(safe-area-inset-bottom));
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    font-size: 16px;
+  }
+  .wrap { max-width: 560px; margin: 0 auto; }
+  .kicker {
+    font-size: 12px;
+    color: #4a8cff;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: 600;
+    margin: 0 0 8px;
+  }
+  h1 {
+    font-size: 30px;
+    line-height: 1.15;
+    margin: 0 0 12px;
+    letter-spacing: -0.02em;
+    font-weight: 700;
+  }
+  .sub { color: #9a9aa2; font-size: 17px; margin: 0 0 36px; }
+  .step { margin-top: 32px; }
+  .step-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+  .step-num {
+    flex: 0 0 auto;
+    width: 26px; height: 26px; line-height: 26px;
+    text-align: center;
+    background: #2a2a2e; color: #e8e8ea;
+    border-radius: 13px;
+    font-size: 13px; font-weight: 600;
+  }
+  .step-title { font-size: 19px; font-weight: 600; }
+  .step-body { color: #c2c2c8; font-size: 15px; margin-left: 36px; }
+  .btn {
+    display: block;
+    width: 100%;
+    padding: 18px 20px;
+    margin: 10px 0;
+    background: #4a8cff;
+    color: #fff;
+    border: none;
+    border-radius: 14px;
+    font-size: 17px;
+    font-weight: 600;
+    cursor: pointer;
+    -webkit-appearance: none;
+    text-align: center;
+    text-decoration: none;
+    transition: background 0.15s, transform 0.1s;
+    font-family: inherit;
+  }
+  .btn:active { background: #3a7be8; transform: scale(0.98); }
+  .btn-copied { background: #2ea06a; }
+  .btn-copied:active { background: #2ea06a; }
+  .btn-link {
+    background: #1e1e22;
+    color: #e8e8ea;
+    border: 1px solid #2a2a2e;
+  }
+  .btn-link:active { background: #2a2a2e; }
+  .prompt-preview {
+    background: #18181b;
+    border: 1px solid #2a2a2e;
+    border-radius: 12px;
+    padding: 14px;
+    margin: 12px 0 4px;
+    max-height: 180px;
+    overflow: auto;
+    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    font-size: 12px;
+    color: #c2c2c8;
+    white-space: pre-wrap;
+    -webkit-overflow-scrolling: touch;
+    line-height: 1.45;
+  }
+  .tip {
+    background: #14141a;
+    border-left: 3px solid #4a8cff;
+    padding: 12px 14px;
+    margin: 16px 0 0 36px;
+    border-radius: 0 8px 8px 0;
+    font-size: 14px;
+    color: #c2c2c8;
+  }
+  .tip strong { color: #e8e8ea; }
+  a { color: #4a8cff; text-decoration: none; }
+  a:active { opacity: 0.7; }
+  code {
+    background: #1e1e22;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    font-size: 0.85em;
+    color: #e8e8ea;
+  }
+  footer {
+    margin-top: 56px;
+    padding-top: 24px;
+    border-top: 1px solid #2a2a2e;
+    font-size: 13px;
+    color: #7a7a82;
+    text-align: center;
+  }
+  footer a { color: #9a9aa2; }
+</style>
+</head>
+<body>
+<main class="wrap">
+  <p class="kicker">Vera</p>
+  <h1>AI with clerk discipline.</h1>
+  <p class="sub">Paste one prompt into any AI chat. Every factual claim gets tagged by confidence so you see which lines to trust. No install.</p>
+
+  <section class="step">
+    <div class="step-head">
+      <span class="step-num">1</span>
+      <span class="step-title">Copy the Vera prompt</span>
+    </div>
+    <div class="step-body">
+      <button class="btn" id="copy-btn" type="button">Tap to copy</button>
+      <pre class="prompt-preview" id="prompt-preview" aria-label="Vera prompt preview"></pre>
+    </div>
+  </section>
+
+  <section class="step">
+    <div class="step-head">
+      <span class="step-num">2</span>
+      <span class="step-title">Open your AI app</span>
+    </div>
+    <div class="step-body">
+      <a class="btn btn-link" href="https://claude.ai/new" target="_blank" rel="noopener">Open Claude</a>
+      <a class="btn btn-link" href="https://chatgpt.com/" target="_blank" rel="noopener">Open ChatGPT</a>
+      <a class="btn btn-link" href="https://gemini.google.com/app" target="_blank" rel="noopener">Open Gemini</a>
+    </div>
+  </section>
+
+  <section class="step">
+    <div class="step-head">
+      <span class="step-num">3</span>
+      <span class="step-title">Paste and ask</span>
+    </div>
+    <div class="step-body">
+      Paste the prompt as your first message. Ask a factual question. Every claim comes tagged <code>[CITED]</code>, <code>[INFERRED]</code>, or <code>[ASSUMED]</code>. Type <code>/audit</code> after a few turns for self-critique.
+    </div>
+    <div class="tip">
+      <strong>Keep it on permanently.</strong> Paste the prompt into Custom Instructions of a <a href="https://www.anthropic.com/news/projects" target="_blank" rel="noopener">Claude Project</a>, a <a href="https://chatgpt.com/gpts" target="_blank" rel="noopener">ChatGPT GPT</a>, or a <a href="https://gemini.google.com" target="_blank" rel="noopener">Gemini Gem</a>. Every new chat in that container inherits it.
+    </div>
+  </section>
+
+  <footer>
+    <a href="https://github.com/iamitp/vera" target="_blank" rel="noopener">github.com/iamitp/vera</a>
+    &nbsp;·&nbsp; MIT
+    &nbsp;·&nbsp; <a href="https://github.com/iamitp/vera/blob/main/PROMPT.md" target="_blank" rel="noopener">PROMPT.md</a>
+  </footer>
+</main>
+
+<script>
+// Keep in sync with PROMPT.md
+const PROMPT = `You are Vera. Three disciplines, every turn.
+
+1. HONESTY. Tag every factual claim: [CITED: source] when you have a real source you can name, [INFERRED low|med|high] when extrapolating, [ASSUMED] when guessing. When the user will act on a claim (put it in a document, make a decision, send it on), open the primary source and check — do not work from memory. When uncertain, write "I'm not sure" instead of guessing with confidence.
+
+2. ATTENTION. Read the user's instruction literally, including negations ("did not", "without", "except") and conditions. Before executing a multi-part request, echo the key constraints in one line. When the user corrects a name, spelling, designation, or fact, the correction is binding for the rest of the session — including in filenames and downstream outputs. If an edit silently failed or a substitution did not land, say so; do not hand back unchanged output as if it were new. If a requirement in the user's request was dropped from your answer, name it.
+
+3. AUDIT. When the user types /audit, review your last five to ten responses. Quote yourself. Flag where you hedged, agreed without evidence, or claimed without a source. If the recent turns were clean, say so in one line. Do not invent findings.
+
+Style: start with the answer, no preamble. Never use "great question", "absolutely", "I'd be happy to", "you're right", "I notice", "in today's world", "needless to say", em dashes, or emojis (unless the user uses one first). Be compact. Disagree plainly when you disagree.
+
+When the user states a rule ("my rule: X", "never Y", "always Z"), enforce it for the rest of the conversation.`;
+
+document.getElementById('prompt-preview').textContent = PROMPT;
+
+const btn = document.getElementById('copy-btn');
+const originalText = btn.textContent;
+let resetTimer = null;
+
+async function copyPrompt() {
+  try {
+    await navigator.clipboard.writeText(PROMPT);
+    return true;
+  } catch (e) {
+    try {
+      const ta = document.createElement('textarea');
+      ta.value = PROMPT;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'absolute';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(ta);
+      return ok;
+    } catch (err) {
+      return false;
+    }
+  }
+}
+
+btn.addEventListener('click', async () => {
+  const ok = await copyPrompt();
+  if (ok) {
+    btn.textContent = 'Copied';
+    btn.classList.add('btn-copied');
+  } else {
+    btn.textContent = 'Select and copy manually';
+  }
+  if (resetTimer) clearTimeout(resetTimer);
+  resetTimer = setTimeout(() => {
+    btn.textContent = originalText;
+    btn.classList.remove('btn-copied');
+  }, 2000);
+});
+</script>
+</body>
+</html>