csv.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Run a local synthetic CSV cleanup and download cleaned, review, and JSON report files.">
  <meta name="theme-color" content="#f4f0e8">
  <title>Clean your CSV — FixProof</title>
  <link rel="icon" href="./favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="./csv.css">
  <script type="module" src="./csv.js"></script>
</head>
<body>
  <a class="skip" href="#workspace">Skip to CSV workspace</a>
  <header class="site-header">
    <a class="brand" href="./index.html">▣ FixProof</a>
    <nav aria-label="Primary navigation">
      <a aria-current="page" href="./csv.html">Clean your CSV</a>
      <a href="./repair.html">Repair your page</a>
      <a href="./index.html">Three demo cases</a>
    </nav>
  </header>

  <main>
    <section class="hero" aria-labelledby="page-title">
      <div>
        <p class="eyebrow">03 / LOCAL DATA CLEANUP</p>
        <h1 id="page-title">Clean one CSV.<br><em>Review every change.</em></h1>
        <p class="hero-copy">Run a small contact-list cleanup entirely in this browser. Choose exact keys and a duplicate policy, inspect quarantined rows, then download all three deliverables.</p>
        <div class="hero-actions">
          <button class="primary" id="hero-sample" type="button">Load messy sample <span aria-hidden="true">→</span></button>
          <a class="secondary" href="#workspace">Use my CSV</a>
        </div>
        <p class="local-note">Nothing is uploaded or saved by this tool. The sample is synthetic and is not a customer result.</p>
      </div>
      <ol class="flow" aria-label="CSV cleanup flow">
        <li><span>01</span> Load or paste</li>
        <li><span>02</span> Parse CSV</li>
        <li><span>03</span> Choose keys</li>
        <li><span>04</span> Review cleanup</li>
        <li><span>05</span> Confirm changes</li>
        <li><span>06</span> Download three files</li>
      </ol>
    </section>

    <section id="workspace" class="workspace" aria-labelledby="workspace-title">
      <div class="section-heading">
        <div><p class="eyebrow">INPUT / 01</p><h2 id="workspace-title">Bring one UTF-8 CSV.</h2></div>
        <span class="state pending" id="run-state">PENDING</span>
      </div>

      <div class="input-actions">
        <button type="button" id="sample">Load messy sample</button>
        <label class="file-button" for="csv-file">Choose .csv file</label>
        <input id="csv-file" type="file" accept=".csv,text/csv">
        <span id="file-name">No file selected</span>
      </div>
      <label class="editor-label" for="csv-input">CSV text <span>paste or edit locally</span></label>
      <textarea id="csv-input" spellcheck="false" placeholder="customer_id,name,email&#10;0001,Kim,kim@example.test"></textarea>
      <p class="limits">Supports UTF-8 BOM, LF or CRLF, quoted commas, escaped quotes, and quoted multiline cells. Limits: 1 MiB input, 10,000 data rows, 100 columns, 100 KiB per cell. Empty or duplicate headers, uneven rows, malformed quotes, and invalid UTF-8 files are rejected.</p>
      <div class="parse-row">
        <button class="primary" id="parse" type="button">Parse CSV <span aria-hidden="true">→</span></button>
        <span id="parse-summary">Not parsed.</span>
      </div>

      <section class="policy" aria-labelledby="policy-title">
        <div class="section-heading compact"><div><p class="eyebrow">POLICY / 02</p><h2 id="policy-title">Choose exact matching rules.</h2></div></div>
        <fieldset id="key-fields" disabled>
          <legend>Key columns <span>Select one or more. A row missing any selected key is quarantined.</span></legend>
          <div id="key-options" class="key-options"><p>Parse CSV to list headers.</p></div>
        </fieldset>
        <div class="policy-grid">
          <label class="option"><input id="trim-cells" type="checkbox" checked disabled><span><strong>Trim cell edges</strong><small>Remove leading and trailing whitespace only. Internal whitespace and case stay unchanged.</small></span></label>
          <fieldset class="duplicate-policy" disabled>
            <legend>Exact duplicate policy</legend>
            <label><input type="radio" name="duplicate-policy" value="collapse" checked> Collapse, keep first representative</label>
            <label><input type="radio" name="duplicate-policy" value="keep-all"> Keep all rows</label>
          </fieldset>
        </div>
        <button class="primary review-button" id="review" type="button" disabled>Review cleanup <span aria-hidden="true">→</span></button>
      </section>

      <p id="status" class="status" role="status" aria-live="polite">Ready. Load the synthetic sample or enter CSV, then choose Parse CSV.</p>
    </section>

    <section class="results" aria-labelledby="results-title">
      <div class="section-heading">
        <div><p class="eyebrow">REVIEW / 03</p><h2 id="results-title">Results stay pending until run.</h2></div>
        <span class="state pending" id="result-state">PENDING</span>
      </div>
      <p id="result-summary" class="result-summary">No cleanup has run. Downloads are unavailable.</p>

      <div class="counts" id="counts" aria-label="Cleanup counts">
        <article><span>INPUT</span><strong>—</strong><small>rows</small></article>
        <article><span>CLEANED</span><strong>—</strong><small>rows</small></article>
        <article><span>REVIEW</span><strong>—</strong><small>rows</small></article>
        <article><span>COLLAPSED</span><strong>—</strong><small>rows</small></article>
      </div>

      <div id="result-details" hidden>
        <p id="conservation" class="conservation"></p>
        <div class="summary-grid">
          <article><h3>Exact duplicates</h3><p id="duplicate-count"></p></article>
          <article><h3>Conflicts</h3><p id="conflict-count"></p></article>
          <article><h3>Missing keys</h3><p id="missing-count"></p></article>
          <article><h3>Trim changes</h3><p id="trim-count"></p></article>
        </div>

        <section class="preview-section" aria-labelledby="clean-preview-title">
          <div><p class="eyebrow">CLEANED PREVIEW</p><h3 id="clean-preview-title">Rows ready for cleaned.csv</h3></div>
          <p id="clean-preview-note"></p>
          <div class="table-scroll"><table><thead id="clean-head"></thead><tbody id="clean-body"></tbody></table></div>
        </section>

        <section class="preview-section" aria-labelledby="review-preview-title">
          <div><p class="eyebrow">HUMAN REVIEW</p><h3 id="review-preview-title">Conflict and missing-key rows</h3></div>
          <p id="review-preview-note"></p>
          <div class="table-scroll"><table><thead id="review-head"></thead><tbody id="review-body"></tbody></table></div>
        </section>

        <div class="audit-grid">
          <section><h3>Processed changes</h3><ul id="change-list"></ul></section>
          <section><h3>Export-only protection</h3><ul id="protection-list"></ul><p>Before CSV quoting, cells beginning with a tab or newline, or with spaces then =, +, -, or @, receive a leading apostrophe. This includes negative numbers. The processed value is unchanged, and this is not a guarantee for every spreadsheet.</p></section>
        </div>

        <section class="deliverables" aria-labelledby="deliverables-title">
          <p class="eyebrow">DELIVER / 04</p>
          <h2 id="deliverables-title">Three local files.</h2>
          <div class="delivery-grid">
            <article><span>01</span><h3>cleaned.csv</h3><p>Accepted rows, UTF-8 BOM, CRLF, and conservative spreadsheet-cell protection.</p><a id="download-cleaned" download="cleaned.csv" aria-disabled="true">Download cleaned.csv</a></article>
            <article><span>02</span><h3>review-needed.csv</h3><p>Quarantined rows with original row number and conflict or missing-key reason.</p><a id="download-review" download="review-needed.csv" aria-disabled="true">Download review-needed.csv</a></article>
            <article><span>03</span><h3>cleanup-report.json</h3><p>Policies, counts, row classifications, original and processed values, changes, protections, and limits.</p><a id="download-report" download="cleanup-report.json" aria-disabled="true">Download JSON report</a></article>
          </div>
          <label class="approval"><input id="approval" type="checkbox" disabled> <span>I reviewed the cleanup counts, quarantined rows, changes, and export-only protections.</span></label>
          <p class="sensitive-note">The JSON report includes original input values and may contain sensitive data. Store and share it with the same care as the source CSV. This tool does not upload it.</p>
        </section>
      </div>
    </section>

    <section class="request-copy" aria-labelledby="request-title">
      <div><p class="eyebrow">SMALL CSV REQUEST</p><h2 id="request-title">Need the same careful pass?</h2><p>One file, agreed key and cleanup rules, then a cleaned CSV, review CSV, and change report. AI-assisted personal project experience. Scope and fee are agreed after reviewing a sample.</p><a class="x-link" href="https://x.com/bedi_samir53094" target="_blank" rel="noreferrer">Discuss a sanitized sample on X <span aria-hidden="true">↗</span></a></div>
      <div class="copy-cards">
        <article><h3>한국어 의뢰 설명</h3><p id="brief-ko">CSV 한 파일을 합의한 키와 정리 규칙으로 처리하고, 정리본 CSV, 검토 필요 CSV, 변경 보고서를 제공합니다. AI 보조 개인 프로젝트 경험이 있으며, 범위와 보수는 샘플 검토 후 합의합니다. 공개 게시물에는 고객 데이터 대신 비식별 샘플과 범위만 공유해 주세요.</p><button type="button" data-copy="brief-ko">한국어 설명 복사</button></article>
        <article><h3>English request brief</h3><p id="brief-en">I can process one CSV using agreed key and cleanup rules, then provide a cleaned CSV, a review-needed CSV, and a change report. I have AI-assisted personal project experience. We can agree scope and fee after reviewing a sanitized sample. Please do not post customer data publicly.</p><button type="button" data-copy="brief-en">Copy English brief</button></article>
      </div>
    </section>
  </main>

  <footer><span>FixProof / local browser tool</span><a href="./index.html">Back to demo cases ↑</a></footer>
</body>
</html>