Claude
6303ecb86b
Users can now label mappings as 'domain' (e.g. mycompany.com → example.com). This is a category label for organization — the substitution works the same as any other mapping. https://claude.ai/code/session_01Dvgwe7XMoSxnWXkih8p1Cw
203 lines
8.8 KiB
HTML
203 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=400">
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1 class="title">Silent Send</h1>
|
|
<span class="status-dot" id="statusDot"></span>
|
|
</div>
|
|
<div class="header-right">
|
|
<button class="btn-icon" id="btnReveal" title="Reveal Mode - show real data">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M8 3C4.5 3 1.7 5.1 0.5 8c1.2 2.9 4 5 7.5 5s6.3-2.1 7.5-5c-1.2-2.9-4-5-7.5-5z" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
|
<circle cx="8" cy="8" r="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
<label class="toggle" title="Enable/disable Silent Send">
|
|
<input type="checkbox" id="enableToggle" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tab Bar -->
|
|
<nav class="tabs">
|
|
<button class="tab active" data-tab="identity">Identity</button>
|
|
<button class="tab" data-tab="mappings">Mappings</button>
|
|
<button class="tab" data-tab="activity">Activity</button>
|
|
<button class="tab" data-tab="test">Test</button>
|
|
</nav>
|
|
|
|
<!-- First-Run Setup Banner -->
|
|
<div class="first-run-banner" id="firstRunBanner" style="display:none">
|
|
<div class="first-run-icon">!</div>
|
|
<div class="first-run-text">
|
|
<strong>Setup required</strong> — Silent Send needs to know who you are before it can protect you.
|
|
Fill in at least your name below, then click Save Identity.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Identity Tab (Smart Patterns) -->
|
|
<section class="tab-content active" id="tab-identity">
|
|
<p class="help-text">Tell Silent Send who you are. It auto-catches all variations.</p>
|
|
|
|
<div class="id-section">
|
|
<div class="id-label">Names</div>
|
|
<div class="id-row">
|
|
<input type="text" id="idFirstReal" placeholder="First name" class="input input-sm">
|
|
<span class="arrow">→</span>
|
|
<input type="text" id="idFirstSub" placeholder="Fake first" class="input input-sm">
|
|
</div>
|
|
<div class="id-row">
|
|
<input type="text" id="idLastReal" placeholder="Last name" class="input input-sm">
|
|
<span class="arrow">→</span>
|
|
<input type="text" id="idLastSub" placeholder="Fake last" class="input input-sm">
|
|
</div>
|
|
<div class="id-hint">Catches: first last, last first, possessives, case variants</div>
|
|
</div>
|
|
|
|
<div class="id-section">
|
|
<div class="id-label">Email</div>
|
|
<div class="id-row">
|
|
<input type="email" id="idEmailReal" placeholder="you@gmail.com" class="input input-sm">
|
|
<span class="arrow">→</span>
|
|
<input type="email" id="idEmailSub" placeholder="fake@example.com" class="input input-sm">
|
|
</div>
|
|
<div class="id-row">
|
|
<input type="email" id="idCatchAllEmail" placeholder="Catch-all email (for unknown addresses)" class="input" style="flex:1">
|
|
</div>
|
|
<div class="id-hint">Catches: any *@gmail.com, *@yahoo.com, *@outlook.com, etc.</div>
|
|
</div>
|
|
|
|
<div class="id-section">
|
|
<div class="id-label">Username / Computer</div>
|
|
<div class="id-row">
|
|
<input type="text" id="idUserReal" placeholder="jsmith" class="input input-sm">
|
|
<span class="arrow">→</span>
|
|
<input type="text" id="idUserSub" placeholder="ademo" class="input input-sm">
|
|
</div>
|
|
<div class="id-row">
|
|
<input type="text" id="idHostReal" placeholder="macbook-pro" class="input input-sm">
|
|
<span class="arrow">→</span>
|
|
<input type="text" id="idHostSub" placeholder="mycomputer" class="input input-sm">
|
|
</div>
|
|
<div class="id-hint">Catches: jsmith@macbook-pro, /home/jsmith, ~jsmith, C:\Users\jsmith</div>
|
|
</div>
|
|
|
|
<div class="id-section">
|
|
<div class="id-label">Phone</div>
|
|
<div class="id-row">
|
|
<input type="text" id="idPhoneReal" placeholder="(555) 123-4567" class="input input-sm">
|
|
<span class="arrow">→</span>
|
|
<input type="text" id="idPhoneSub" placeholder="(555) 000-0000" class="input input-sm">
|
|
</div>
|
|
<div class="id-hint">Catches: all formats — (555) 123-4567, 555-123-4567, 555.123.4567</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" id="btnSaveIdentity" style="width:100%;margin-top:8px">Save Identity</button>
|
|
</section>
|
|
|
|
<!-- Mappings Tab -->
|
|
<section class="tab-content" id="tab-mappings">
|
|
<div class="add-mapping">
|
|
<div class="input-row">
|
|
<input type="text" id="inputReal" placeholder="Real value (e.g. John Smith)" class="input">
|
|
<span class="arrow">→</span>
|
|
<input type="text" id="inputSub" placeholder="Substitute (e.g. Alex Demo)" class="input">
|
|
</div>
|
|
<div class="input-row secondary">
|
|
<select id="inputCategory" class="select">
|
|
<option value="name">Name</option>
|
|
<option value="email">Email</option>
|
|
<option value="phone">Phone</option>
|
|
<option value="address">Address</option>
|
|
<option value="ssn">SSN</option>
|
|
<option value="dob">DOB</option>
|
|
<option value="domain">Domain</option>
|
|
<option value="general">General</option>
|
|
</select>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="inputCaseSensitive">
|
|
Case sensitive
|
|
</label>
|
|
<button class="btn btn-primary" id="btnAdd">Add</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mapping-list" id="mappingList">
|
|
<div class="empty-state">
|
|
No mappings yet. Add your first one above.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Activity Tab -->
|
|
<section class="tab-content" id="tab-activity">
|
|
<div class="activity-header">
|
|
<span class="badge" id="sessionCount">0 substitutions this session</span>
|
|
<button class="btn-text" id="btnClearLog">Clear</button>
|
|
</div>
|
|
<div class="activity-list" id="activityList">
|
|
<div class="empty-state">No activity yet.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Test Tab -->
|
|
<section class="tab-content" id="tab-test">
|
|
<div class="test-mode-toggle">
|
|
<button class="test-mode-btn active" data-mode="strip">Strip (real → fake)</button>
|
|
<button class="test-mode-btn" data-mode="reveal">Reveal (fake → real)</button>
|
|
</div>
|
|
|
|
<div id="stripMode">
|
|
<p class="help-text">Paste text with your real info. See what gets sent.</p>
|
|
<textarea id="testInput" class="textarea" placeholder="Try: My name is John Smith, email john@gmail.com, logged in as jsmith@macbook-pro" rows="4"></textarea>
|
|
<div class="diff-view" id="diffView">
|
|
<div class="diff-label">What gets sent:</div>
|
|
<div class="diff-output" id="diffOutput"></div>
|
|
</div>
|
|
<div class="diff-stats" id="diffStats"></div>
|
|
</div>
|
|
|
|
<div id="revealMode" style="display:none">
|
|
<p class="help-text">Paste text from AI responses (with fake data). Get back real data to copy.</p>
|
|
<textarea id="revealInput" class="textarea" placeholder="Paste AI output here, e.g.: Hello Alex Demo, I see your project at /home/ademo/..." rows="4"></textarea>
|
|
<div class="diff-view" id="revealView">
|
|
<div class="diff-label">Your real data:</div>
|
|
<div class="diff-output" id="revealOutput"></div>
|
|
</div>
|
|
<button class="btn btn-primary" id="btnCopyRevealed" style="width:100%;margin-top:8px">Copy to Clipboard</button>
|
|
<div class="diff-stats" id="revealStats"></div>
|
|
</div>
|
|
|
|
<div class="test-identity-status" id="identityStatus"></div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="privacy-note">
|
|
Your data never leaves your browser. No servers, no tracking, no analytics.
|
|
Identity data is stored unencrypted in local browser storage — anyone with
|
|
access to your computer could read it. This is the same as browser cookies
|
|
and localStorage, not as secure as saved passwords (which are OS-encrypted).
|
|
</div>
|
|
<div class="privacy-note" style="color:#b45309;background:#fef3c7;padding:6px 8px;border-radius:4px;margin-bottom:6px">
|
|
Silent Send is a convenience tool, not a security guarantee. It can miss
|
|
PPI in images, file uploads, unusual name forms, or data you forgot to
|
|
configure. Always verify sensitive messages before sending.
|
|
</div>
|
|
<a href="#" id="btnOptions">Options</a>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="popup.js" type="module"></script>
|
|
</body>
|
|
</html>
|