airgap-diff/index.html at main · FootprintAI/airgap-diff · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Airgap Diff</title>
  <meta name="description" content="A text diff tool that never leaves your browser. No server, no upload, no account — open the file and compare." />
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔀</text></svg>" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="shell">
    <header class="topbar">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true">⇄</span>
        <div>
          <h1>Airgap Diff</h1>
          <p class="tagline">Compares text entirely in your browser. Nothing you paste or open is ever sent anywhere.</p>
        </div>
      </div>
      <a class="repo-link" href="https://github.com/FootprintAI/airgap-diff" target="_blank" rel="noopener">Source ↗</a>
    </header>

    <section class="input-grid" id="input-view">
      <div class="pane">
        <div class="pane-head">
          <label for="left-text">A · Original</label>
          <div class="pane-actions">
            <span class="file-name" id="left-file-name" hidden></span>
            <button type="button" class="btn-ghost" id="left-open">Open file</button>
            <input type="file" id="left-file" hidden />
          </div>
        </div>
        <textarea id="left-text" class="pane-text" spellcheck="false" placeholder="Paste the original text, or open a file…"></textarea>
      </div>
      <div class="pane">
        <div class="pane-head">
          <label for="right-text">B · Changed</label>
          <div class="pane-actions">
            <span class="file-name" id="right-file-name" hidden></span>
            <button type="button" class="btn-ghost" id="right-open">Open file</button>
            <input type="file" id="right-file" hidden />
          </div>
        </div>
        <textarea id="right-text" class="pane-text" spellcheck="false" placeholder="Paste the changed text, or open a file…"></textarea>
      </div>
      <div class="pane">
        <div class="pane-head">
          <label for="third-text">C · Another change <span class="optional">(optional — compared to A, not B)</span></label>
          <div class="pane-actions">
            <span class="file-name" id="third-file-name" hidden></span>
            <button type="button" class="btn-ghost" id="third-open">Open file</button>
            <input type="file" id="third-file" hidden />
          </div>
        </div>
        <textarea id="third-text" class="pane-text" spellcheck="false" placeholder="Optional: paste a second changed version to see A → C alongside A → B…"></textarea>
      </div>
    </section>

    <section class="controls">
      <div class="control-group" role="group" aria-label="Diff granularity">
        <button type="button" class="seg" data-granularity="line" aria-pressed="true">Line</button>
        <button type="button" class="seg" data-granularity="word" aria-pressed="false">Word</button>
        <button type="button" class="seg" data-granularity="char" aria-pressed="false">Character</button>
      </div>
      <div class="control-group" role="group" aria-label="Diff layout" id="layout-group">
        <button type="button" class="seg" data-layout="split" aria-pressed="true">Side by side</button>
        <button type="button" class="seg" data-layout="unified" aria-pressed="false">Unified</button>
      </div>
      <label class="toggle"><input type="checkbox" id="ignore-whitespace" /> Ignore whitespace</label>
      <label class="toggle"><input type="checkbox" id="ignore-case" /> Ignore case</label>
      <label class="toggle"><input type="checkbox" id="hide-unchanged" checked /> Hide unchanged lines</label>
      <div class="spacer"></div>
      <button type="button" class="btn-primary" id="compare-btn">Find differences</button>
    </section>

    <section class="result" id="result" hidden>
      <div class="result-head">
        <div class="summary" id="summary"></div>
        <div class="result-actions">
          <button type="button" class="btn-ghost" id="copy-btn">Copy diff</button>
          <button type="button" class="btn-ghost" id="back-btn">Edit</button>
        </div>
      </div>
      <div class="diff-viewport" id="diff-viewport"></div>
    </section>

    <footer class="foot">
      <p>Apache-2.0. Diffing by <a href="https://github.com/kpdecker/jsdiff" target="_blank" rel="noopener">jsdiff</a>, vendored — no CDN, no network call, works offline once loaded.</p>
    </footer>
  </div>

  <script src="vendor/diff.min.js"></script>
  <script src="app.js"></script>
</body>
</html>