Michael
48251b625f
Consistency pass over the parallel-agent work: - Replace 4 divergent inline header wrappers (flex/inline-flex, gap 10/12px, margin-top present/absent across 8 tool pages) with one shared .dt-tool-header-actions class; strip the now-redundant per-button margin-top:0. Every tool header now aligns the local-first pill + Help button identically. - Reconcile downloads row: reorder to the page's exceptions-first order (Review, Unmatched left, Unmatched right, Matched) to match the tabs and metric strip, and drop the lone competing primary — the four are parallel exports of equal weight. Audited and confirmed already-consistent: compact intake banner, privacy pill markup, .dt-next-step strips, the three coming-soon stubs, primary CTAs, and the 3-download CSV/audit/config pattern. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
193 lines
10 KiB
HTML
193 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Layout review — Find Duplicates</title>
|
||
<link rel="stylesheet" href="app.css">
|
||
</head>
|
||
<body data-page="01_deduplicator">
|
||
<div class="dt-app">
|
||
<aside class="dt-sidebar" id="dt-sidebar"></aside>
|
||
<main class="dt-main">
|
||
<div class="dt-review-banner">
|
||
<span class="dt-mi">visibility</span>
|
||
<span>Static layout preview of <strong>Find Duplicates</strong>, shown with a file imported and a completed run (results + match-group review). <a href="index.html">All pages →</a></span>
|
||
</div>
|
||
<div class="dt-main-inner">
|
||
|
||
<!-- Tool header -->
|
||
<div class="dt-tool-header">
|
||
<h1>Find Duplicates</h1>
|
||
<div class="dt-tool-header-actions">
|
||
<span class="dt-privacy-pill">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<rect x="4" y="11" width="16" height="10" rx="2"/>
|
||
<path d="M8 11V7a4 4 0 018 0v4"/>
|
||
</svg>
|
||
Runs 100% locally
|
||
</span>
|
||
<button class="dt-help-btn"><span class="dt-mi">help_outline</span> Help</button>
|
||
</div>
|
||
</div>
|
||
<p class="dt-tool-caption">Find rows that repeat, then keep one and remove the extras.</p>
|
||
|
||
<div class="dt-spacer"></div>
|
||
|
||
<!-- File pickup banner (using file from upload screen) -->
|
||
<div class="dt-alert info">
|
||
<span class="dt-mi">description</span>
|
||
<span>Using <strong>customers_export.csv</strong> from the upload screen.</span>
|
||
</div>
|
||
<button class="dt-btn" style="margin-bottom:4px">Use a different file</button>
|
||
|
||
<!-- Delimiter selector — delimited-text only (CSV/TSV); omitted for XLSX/XLS.
|
||
Shown here because the staged file is customers_export.csv. -->
|
||
<div class="dt-field" style="max-width:320px">
|
||
<label class="dt-label">Delimiter</label>
|
||
<div class="dt-select">Comma (,)</div>
|
||
<div class="dt-help-text">Auto-detected on upload. Change if the preview looks wrong.</div>
|
||
</div>
|
||
|
||
<!-- Preview expander (collapsed after a result exists) -->
|
||
<details class="dt-expander">
|
||
<summary>Preview: customers_export.csv</summary>
|
||
<div class="dt-expander-body">
|
||
<p class="dt-caption">18,442 rows, 6 columns</p>
|
||
<div class="dt-table-wrap">
|
||
<table class="dt-table">
|
||
<thead><tr><th class="idx"></th><th>name</th><th>email</th><th>city</th><th>phone</th><th>signup_date</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="idx">0</td><td>Jane Doe</td><td>jane@acme.io</td><td>Austin</td><td>512-555-0190</td><td>2024-01-04</td></tr>
|
||
<tr><td class="idx">1</td><td>jane doe</td><td>JANE@ACME.IO</td><td>austin</td><td>(512) 555-0190</td><td>01/04/2024</td></tr>
|
||
<tr><td class="idx">2</td><td>Bob Smith</td><td>bob@globex.com</td><td>Denver</td><td>720-555-7781</td><td>2024-02-11</td></tr>
|
||
<tr><td class="idx">3</td><td>R. Smith</td><td>bob@globex.com</td><td>Denver</td><td>720-555-7781</td><td>2024-02-11</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Basic controls (visible by default) -->
|
||
<div class="dt-cols-2">
|
||
<div class="dt-field"><label class="dt-label">Match threshold</label>
|
||
<div class="dt-slider"><div class="track"><div class="fill" style="width:70%"></div><div class="knob" style="left:70%"></div></div><div class="val">85</div></div>
|
||
<div class="dt-help-text">Higher means rows must look more alike to count as a duplicate.</div></div>
|
||
<div class="dt-field"><label class="dt-label">When duplicates are found, keep</label>
|
||
<div class="dt-select">the most-complete row</div>
|
||
<div class="dt-help-text">Which row survives in each group of duplicates.</div></div>
|
||
</div>
|
||
|
||
<!-- Advanced options (single expander; basics live above) -->
|
||
<details class="dt-expander">
|
||
<summary>Advanced options</summary>
|
||
<div class="dt-expander-body">
|
||
<p class="dt-help-text" style="margin-top:0">Leave these empty to auto-detect which columns to compare. Otherwise, list the columns that must match <strong>exactly</strong> and the ones that only need to match <strong>approximately</strong> — together these are the columns used to find duplicates.</p>
|
||
<div class="dt-cols-2">
|
||
<div>
|
||
<div class="dt-field"><label class="dt-label">Columns that must match exactly</label>
|
||
<div class="dt-multiselect"><span class="dt-ms-chip">email <span class="x">✕</span></span></div></div>
|
||
<div class="dt-field"><label class="dt-label">Columns to match approximately</label>
|
||
<div class="dt-multiselect"><span class="dt-ms-chip">name <span class="x">✕</span></span></div></div>
|
||
</div>
|
||
<div>
|
||
<div class="dt-field"><label class="dt-label">Approximate-match algorithm</label><div class="dt-select">jaro_winkler</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="dt-check on" style="margin-top:6px"><span class="box"><span class="dt-mi">check</span></span> Merge mode — fill missing fields in the surviving row</div>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="dt-divider">
|
||
<button class="dt-btn dt-btn-primary dt-btn-block">Find Duplicates</button>
|
||
|
||
<hr class="dt-divider">
|
||
|
||
<!-- Results -->
|
||
<h2>Results</h2>
|
||
<div class="dt-metrics">
|
||
<div class="dt-metric"><div class="label">Original rows</div><div class="value">18,442</div></div>
|
||
<div class="dt-metric"><div class="label">Duplicate rows</div><div class="value">312</div><div class="delta down">−312 removed</div></div>
|
||
<div class="dt-metric"><div class="label">Match groups</div><div class="value">147</div></div>
|
||
<div class="dt-metric"><div class="label">Rows kept</div><div class="value">18,130</div></div>
|
||
</div>
|
||
<p class="dt-caption">Preview of an auto-resolved run: each group keeps its auto-picked survivor. Review the groups below to override any pending picks before the final download.</p>
|
||
<div class="dt-btn-row" style="max-width:560px">
|
||
<button class="dt-btn">Download auto-resolved CSV</button>
|
||
<button class="dt-btn">Download removed rows</button>
|
||
</div>
|
||
|
||
<hr class="dt-divider">
|
||
|
||
<!-- Match groups -->
|
||
<h2>Match Groups</h2>
|
||
<div class="dt-cols-3" style="max-width:520px">
|
||
<button class="dt-btn">Accept All</button>
|
||
<button class="dt-btn">Reject All</button>
|
||
<button class="dt-btn">Clear Decisions</button>
|
||
</div>
|
||
<p class="dt-caption" style="margin-top:8px">Differing columns are highlighted. The survivor row is kept; uncheck a row to split it out of the group.</p>
|
||
|
||
<!-- Match group card 1 -->
|
||
<div class="dt-match-card">
|
||
<div class="dt-match-head">
|
||
<span class="title">Group 1 · 2 rows</span>
|
||
<span class="conf"><span class="dt-count-pill success">98% match</span></span>
|
||
</div>
|
||
<div class="dt-match-body">
|
||
<div class="dt-table-wrap">
|
||
<table class="dt-table">
|
||
<thead><tr><th>keep</th><th>name</th><th>email</th><th>city</th><th>phone</th><th>signup_date</th></tr></thead>
|
||
<tbody>
|
||
<tr class="dt-keep-row"><td><span class="dt-keep-tag">keep</span></td><td>Jane Doe</td><td>jane@acme.io</td><td>Austin</td><td>512-555-0190</td><td>2024-01-04</td></tr>
|
||
<tr><td><span class="dt-caption">remove</span></td><td class="dt-cell-flag">jane doe</td><td class="dt-cell-flag">JANE@ACME.IO</td><td class="dt-cell-flag">austin</td><td>(512) 555-0190</td><td class="dt-cell-flag">01/04/2024</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Match group card 2 -->
|
||
<div class="dt-match-card">
|
||
<div class="dt-match-head">
|
||
<span class="title">Group 2 · 2 rows</span>
|
||
<span class="conf"><span class="dt-count-pill warn">87% match</span></span>
|
||
</div>
|
||
<div class="dt-match-body">
|
||
<div class="dt-table-wrap">
|
||
<table class="dt-table">
|
||
<thead><tr><th>keep</th><th>name</th><th>email</th><th>city</th><th>phone</th><th>signup_date</th></tr></thead>
|
||
<tbody>
|
||
<tr class="dt-keep-row"><td><span class="dt-keep-tag">keep</span></td><td>Bob Smith</td><td>bob@globex.com</td><td>Denver</td><td>720-555-7781</td><td>2024-02-11</td></tr>
|
||
<tr><td><span class="dt-caption">remove</span></td><td class="dt-cell-flag">R. Smith</td><td>bob@globex.com</td><td>Denver</td><td>720-555-7781</td><td>2024-02-11</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="dt-caption" style="margin-top:14px">Decisions: 1 merged, 1 pending · Pending groups keep their auto-picked survivor unless you review them.</p>
|
||
<button class="dt-btn dt-btn-primary dt-btn-block" style="margin-top:8px">Apply Review Decisions & Download Final CSV</button>
|
||
|
||
<!-- Processing log -->
|
||
<details class="dt-expander" style="margin-top:18px">
|
||
<summary>Processing Log</summary>
|
||
<div class="dt-expander-body">
|
||
<div class="dt-code">[00:00.01] Loaded 18,442 rows from customers_export.csv
|
||
[00:00.04] Strategy: exact(email) + fuzzy(name, jaro_winkler ≥ 85)
|
||
[00:00.91] Compared 18,442 rows → 147 match groups
|
||
[00:01.02] Survivor rule: most-complete · merge=on
|
||
[00:01.05] 312 rows flagged for removal</div>
|
||
</div>
|
||
</details>
|
||
|
||
<div class="dt-next-step"><span class="dt-mi">arrow_forward</span><span>Duplicates handled — your file is cleaned. Review the result or <a href="home.html">Back to Start here →</a></span><button class="dt-next-step-dismiss" title="Dismiss">✕</button></div>
|
||
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<footer class="dt-footer" id="dt-footer"></footer>
|
||
<script src="shell.js"></script>
|
||
</body>
|
||
</html>
|