Redact with buttons

# Redact with buttons

Build me a small tool that runs only on my device. I tap buttons for the kinds of details I want hidden, paste text in, and it swaps those details for placeholders. I paste the safe version into AI, and when the AI answers, the tool puts the real values back. Nothing I type into it goes anywhere.

## Before you start

Ask me one question, then stop and wait: "Which of these should be switched on when the tool opens? Serial numbers, asset tags, emails, phone numbers, IP/MAC, addresses, prices, dates, PO numbers, people's and company names, 'made in' / country. Add any exact words that must never leave your device, such as a customer or site name. Or say 'all of them'."

Switch on the buttons I picked. Put any exact words I gave you into the "Always hide these words" box. If I name a kind of thing that isn't a button, add it as a button of its own if a pattern can find it. If I say "all of them", add no buttons beyond the list. Tell me in one line what you added.

## Steps

1. **Build one HTML file** with everything inline: plain HTML, CSS and JavaScript. No libraries, no fonts or scripts from the internet, and no network requests of any kind. Put this tag in the head: `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'">`. Don't save anything to the browser's storage. It must work with wifi off. Keep the code plain: one short function per rule, no clever one-liners. Before you hand it over, read the script through once for unmatched brackets or quotes, because one typo stops every button.
2. **The screen**, top to bottom. Title the page "Redact with buttons".
   - A line that reads "Not running: open this file in a browser such as Chrome, Safari or Edge. Previews and text editors don't run the buttons." The script hides it as soon as it loads.
   - **"What should I hide?"** A wall of big toggle buttons, one per kind: Serial numbers, Asset tags, Emails, Phone numbers, IP/MAC, Addresses, Prices, Dates, PO numbers, Names, Made in. Lay them out as a grid, two per row on a phone and more on a wider screen. A button that is on looks filled; off looks outlined; each one carries `aria-pressed`. Tapping switches it. Under them, an **"Always hide these words"** box (one per line).
   - A box to paste text into, with a **Load sample** button that fills it with exactly this made-up email:

     ```
     Subject: Pickup for Brightline Credit Union, PO 4417820

     Hi team, please collect 40 laptops on 10/28/2026 from 4821 Harbor View Dr, Suite 200, Portland, OR 97217.
     Contact: Dana Whitfield, dana.whitfield@brightline-example.com, cell (503) 555-0142.
     Quote: $4,500 for the lot. Asset tag AT-004417. Made in China.
     Units: Dell Latitude 5420 S/N 7XK2M93, Service Tag 4HJ8KQ2, Serial: CN0F2KJR7421, SN PF3ZK9QA, 9G7HTQ2LMN84.
     Thanks, Brightline Credit Union IT
     ```

   - A big **Redact** button.
   - The safe text, and a line that counts what was replaced by kind (for example "Replaced 14: 5 serial numbers, 2 emails…"). After Redact, each button shows its own count.
   - **Copy with pre-prompt** and **Save as a text file** buttons. Save makes the file on the device (a Blob and a download link, no upload).
   - A box to paste the AI's answer, with a **Restore** button, and the restored answer in its own box below.
   - A **Show key** toggle, hidden by default, with a table of placeholder → real value, and a **Clear everything** button.

   Check your rules against the sample before you hand the file over: with every button on, the five serials, the email, the phone, the street address, the asset tag, the price, the date, the PO number, Dana Whitfield and China must all be placeholders, and "Dell Latitude" and "40 laptops" must still read normally.
1. **What each button finds** (only when it is on), in this order:
   - Emails → `<EMAIL_1>`
   - Phone numbers: 7 or more digits split into groups, such as (503) 555-0142, 503.555.0199, 1-800-555-0123 or +44 20 7946 0958 → `<PHONE_1>`
   - Serial numbers: the value after "S/N", "SN", "Serial", "Serial No." or "Service Tag", and any 8 to 20 character run of letters, digits and dashes that mixes letters and digits, in any case (CN0F2KJR7421, ab12-cd34-ef56) → `<SERIAL_1>`
   - Asset tags: the value after "Asset tag" or "Asset #", and codes like AT-004417 (2 to 5 letters, a dash, digits) → `<TAG_1>`
   - IP/MAC: IP addresses (10.20.30.40) → `<IP_1>`, MAC addresses (00:1A:2B:3C:4D:5E) → `<MAC_1>`
   - Addresses: a number, up to five words, then a street word such as St, Ave, Rd, Blvd, Dr, Way, Parkway, Ln, Ct, Pl or Terrace, plus suite, city, state and ZIP when they follow → `<ADDRESS_1>`
   - Prices: dollar amounts like $48,250.00, $4,500 or $1.2M, as one value → `<PRICE_1>`
   - Dates like 10/28/2026, 2026-10-28 or Oct 28, 2026 → `<DATE_1>`
   - PO numbers: the value after "PO", "P.O.", "PO #" or "Purchase order" → `<PO_1>`
   - Names: the text after "Customer:", "Contact:", "Attn:", "Bill to:", "Ship to:", "From:" or "Name:" up to the next comma or the end of the line → `<NAME_1>`
   - Made in: the country after "Made in", "Country of origin" or "Assembled in" → `<ORIGIN_1>`
   - Every line in the "Always hide these words" box, matched without regard to case → `<NAME_1>`, whichever buttons are on.

   Where a rule has a label, replace only the value and keep the label: "S/N <SERIAL_1>". Match a label only as a whole word; for serials, asset tags and PO numbers only when the value after it contains a digit. Ordinary words stay as they are: "Serial numbers are on the boxes", "tag along", "order the pallets", "asset management" and "Portland" must not change. The same value always gets the same placeholder, it is replaced everywhere it appears, even without its label, and later rules skip text that is already a placeholder. Restoring the safe text must give back the original exactly.
1. **Copy with pre-prompt** copies this line above the safe text: "Some details below are replaced with placeholders like <SERIAL_1> or <NAME_2>. Keep every placeholder exactly as written in your answer. Don't guess what they stand for or invent values for them." If the browser blocks copying, select the text and say "Press Ctrl+C (Cmd+C on a Mac) to copy". Put values in the key table as plain text, never as HTML.
2. **Phone-first.** One column, buttons at least 44px tall, text at least 16px.
3. **Hand it over.** Give me the file as a download if this app can make one; otherwise show the code. Then tell me how to open it, using only the lines that fit my device and this app:
   - If this app has a preview where buttons work (a canvas, artifact or preview pane), use it.
   - On a computer: save it as `redact-buttons.html` and open it in Chrome, Safari or Edge. If you copy the code into a file yourself, use a plain-text editor; on a Mac, in TextEdit choose Format, then Make Plain Text, before you save.
   - On an iPhone or iPad: a file in the Files app opens as a preview, and previews don't run buttons. Use this app's preview, or open the file on a computer.
   - On Android: open the saved file with Chrome.
   Then say: "If you can see the 'Not running' line, it's being shown as a preview, not run. If it still shows in Chrome, Safari or Edge, the code has a mistake: come back and tell me 'It says Not running in Chrome' and I'll fix it. Test it: turn on airplane mode and redact the sample. If it still works, nothing is leaving your device."
4. **End with a reminder** that it catches patterns, not meaning: it misses names it wasn't told, serials in odd formats, and anything written out in words. A person reads the safe text before it goes anywhere.

## Branding

Style it in my company's colors if I've shared a brand guide. Otherwise use the default look (Uplift Duo): page `#FAF9F6`, text `#1A1A1A`, buttons that are on `#E85D04` with white text, buttons that are off white with a `#E0DDD5` border, white boxes with a 1px `#E0DDD5` border. System fonts only, so it works offline. Never make up a palette, and don't put a company name on the page.

## Rules

- No network requests, external files or storage. If something I ask for would need the internet, say so and leave it out.
- Don't claim it catches everything. A person checks the safe text before pasting it anywhere.
- Keep it to one file I can email to a coworker.