tools/diff-viewer.html at main · jubilancy/tools · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Diff Viewer | tools.eliana.lol</title>
  <link rel="stylesheet" href="../global.css" />
  <link rel="icon" type="image/x-icon" href="../favicon.svg" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/diff2html/3.4.48/bundles/css/diff2html.min.css" />
  <style>
    .tool-layout { display: flex; flex-direction: column; gap: 20px; }
    .action-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
    label { display: block; font-size: 0.7rem; text-transform: uppercase; font-weight: bold; color: var(--puny); margin-bottom: 5px; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 600px) { .two-col { grid-template-columns: 1fr; } }
    #diff-output { font-size: 0.8rem; }
    .d2h-wrapper { background: var(--bg); color: var(--text); }
    select { background: var(--bg); color: var(--text); border: 1px solid var(--puny); font-family: monospace; padding: 4px 8px; }
  </style>
</head>
<body>
  <nav>
    <div class="left"><a href="../index.html">home</a> | <a href="../extra.html">extra</a> | <a href="../credits.html">credits</a> | <a href="../changelog.html">logs</a></div>
    <div class="right"><button id="theme-toggle">[theme]</button> | <a href="https://eliana.lol">site</a></div>
  </nav>
  <main>
    <h1>Diff Viewer</h1>
    <p class="puny">Paste two versions of text to see what changed.</p>
    <div class="tool-layout">
      <div class="two-col">
        <div><label>Original</label><textarea id="original" rows="12" placeholder="Original text…"></textarea></div>
        <div><label>Modified</label><textarea id="modified" rows="12" placeholder="Modified text…"></textarea></div>
      </div>
      <div class="action-bar">
        <button onclick="runDiff()">Compare</button>
        <button onclick="loadSample()">Sample</button>
        <label style="display:inline-flex;align-items:center;gap:5px;text-transform:none;font-weight:normal;color:var(--text)">
          View: <select id="view-mode"><option value="line-by-line">Line by line</option><option value="side-by-side">Side by side</option></select>
        </label>
      </div>
      <div id="diff-output"></div>
    </div>
  </main>
  <footer style="margin-top: 4rem; text-align: center" class="puny">© 2026 eliana.lol • <a href="../credits.html">credits</a></footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/diff/5.1.0/diff.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/3.4.48/bundles/js/diff2html.min.js"></script>
  <script>
    const html = document.documentElement;
    const toggle = document.getElementById('theme-toggle');
    const saved = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    html.setAttribute('data-theme', saved);
    if (toggle) toggle.innerText = saved === 'dark' ? '[light]' : '[dark]';
    if (toggle) toggle.onclick = () => { const now = html.getAttribute('data-theme'); const next = now === 'dark' ? 'light' : 'dark'; html.setAttribute('data-theme', next); localStorage.setItem('theme', next); toggle.innerText = next === 'dark' ? '[light]' : '[dark]'; };

    function runDiff() {
      const orig = document.getElementById('original').value;
      const mod = document.getElementById('modified').value;
      const mode = document.getElementById('view-mode').value;
      const patch = Diff.createPatch('file', orig, mod, 'original', 'modified');
      const output = Diff2Html.html(patch, { drawFileList: false, matching: 'lines', outputFormat: mode });
      document.getElementById('diff-output').innerHTML = output;
    }

    function loadSample() {
      document.getElementById('original').value = `function greet(name) {\n  console.log("Hello " + name);\n  return name;\n}\n\nconst user = "world";\ngreet(user);`;
      document.getElementById('modified').value = `function greet(name, greeting = "Hello") {\n  console.log(\`\${greeting}, \${name}!\`);\n  return { name, greeting };\n}\n\nconst user = "eliana";\nconst result = greet(user, "Hey");`;
      runDiff();
    }
  </script>
</body>
</html>