feat(layout-review): journey-level redesign — front door, taught order, consistency
Addresses the journey-level review (the app felt like 12 tools sharing a stylesheet, not one guided product). File-partitioned changes: Navigation (shell.js): rename Home -> "Start here" with front-door emphasis (.dt-nav-start); reorder Data Cleaners into pipeline order (Clean Text -> Standardize -> Fix Missing -> Find Duplicates); new "Finance" group (Reconcile, PDF to CSV); all stubs moved to a bottom "Coming soon" group, no longer interleaved with working tools. Front door (home.html): a prominent primary "Clean these files for me" that runs the recommended pipeline in order, above the existing per-finding cards (reframed as "fix one thing at a time"). Shared tokens (app.css): .dt-next-step suggestion strip + .dt-nav-start. Teach the order: a slim .dt-next-step strip at the end of each linear cleaner page points to the next pipeline step (Map Columns -> Start here; orchestrator/Finance pages correctly omit it). Local-first: the green "Runs 100% locally" pill now sits in every working tool page's header (home + 8 tools), where client data is entered. Plain English: jargon relabeled on input controls (coerce, E.164, NFC/NFKC, sentinels, survivor rule), technical terms kept in tooltips and audit/output cells only. Stubs (06/08/07): rebuilt to one identical skeleton — info line + plain feature list + a real "Notify me when this ships" button; every disabled control and uploader removed (a dimmed dropzone reads as broken). Intake: full dropzone+chip replaced with the compact "Using <file>" banner on Clean Text, Fix Missing, Find Duplicates, and both Reconcile sides. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -19,7 +19,16 @@
|
||||
<!-- Tool header -->
|
||||
<div class="dt-tool-header">
|
||||
<h1>Standardize Formats</h1>
|
||||
<button class="dt-help-btn"><span class="dt-mi">help_outline</span> Help</button>
|
||||
<div style="display:inline-flex;align-items:center;gap:12px">
|
||||
<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">Make dates, phones, currency, and names look the same throughout.</p>
|
||||
|
||||
@@ -81,7 +90,7 @@
|
||||
<div class="dt-field">
|
||||
<label class="dt-label">Standards preset</label>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;margin-top:4px">
|
||||
<span class="dt-radio"><span class="dot"></span> US (default) — ISO 8601 dates · E.164 phones · USD</span>
|
||||
<span class="dt-radio" title="E.164 phones"><span class="dot"></span> US (default) — ISO 8601 dates · international-format phones (+1…) · USD</span>
|
||||
<span class="dt-radio"><span class="dot"></span> European — DMY input · INTL phones · EUR comma decimal <span class="dt-count-pill info" style="margin-left:4px">base</span></span>
|
||||
<span class="dt-radio"><span class="dot"></span> UK — DD/MM/YYYY · GB phones · Yes/No booleans</span>
|
||||
<span class="dt-radio"><span class="dot"></span> ISO Strict — ISO 8601 · bare-number currency · true/false</span>
|
||||
@@ -111,7 +120,7 @@
|
||||
</div>
|
||||
|
||||
<h4><strong>Phones</strong></h4>
|
||||
<div class="dt-field"><label class="dt-label">Output format</label><div class="dt-select">E.164 (+15551234567)</div></div>
|
||||
<div class="dt-field"><label class="dt-label" title="E.164">Output format</label><div class="dt-select" title="E.164">Standard international format (+15551234567)</div></div>
|
||||
<div class="dt-field">
|
||||
<label class="dt-label">Default region (ISO-2)</label>
|
||||
<div class="dt-input">US</div>
|
||||
@@ -244,6 +253,9 @@
|
||||
<button class="dt-btn">Download config JSON</button>
|
||||
</div>
|
||||
|
||||
<!-- Next-step suggestion -->
|
||||
<div class="dt-next-step"><span class="dt-mi">arrow_forward</span><span>Formats standardized. Next, most files need: <a href="04_missing_handler.html">Fix Missing Values →</a></span><button class="dt-next-step-dismiss" title="Dismiss">✕</button></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user