DiffyViewer/index.html at master · martysama0134/DiffyViewer · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DiffyViewer</title>
  <!-- highlight.js theme MUST load before diff2html css — swapped dynamically by JS -->
  <link id="hljsTheme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.11.1/styles/github-dark.min.css" integrity="sha384-wH75j6z1lH97ZOpMOInqhgKzFkAInZPPSPlZpYKYTOqsaizPvhQZmAtLcPKXpLyH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html@3.4.56/bundles/css/diff2html.min.css" integrity="sha384-PdRCG/+r1waybtXfuDB9Kmv2h7AGoN6WaTZ5OF+ctPeR9BGne0FaKRQnUeGV4nDL" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css?v=2.0.0">
</head>
<body>
  <div class="top-stack">
    <header>
      <div class="header-left">
        <h1 id="logo" style="cursor:pointer">DiffyViewer</h1>
        <span class="tagline">Browser-based diff viewer</span>
      </div>
      <div class="header-right">
        <select id="themeSelect" class="theme-select" title="Color theme"></select>
        <div class="view-toggle" id="viewToggle">
          <button class="toggle-btn active" data-mode="split">Split</button>
          <button class="toggle-btn" data-mode="unified">Unified</button>
        </div>
      </div>
    </header>
    <div id="outputToolbar" class="output-toolbar hidden">
      <div class="toolbar-left">
        <div id="diffStats" class="diff-stats"></div>
        <div class="share-url">
          <input id="shareInput" type="text" readonly title="Shareable URL">
          <button id="btnCopyUrl" class="btn secondary btn-sm" title="Copy URL to clipboard">Copy</button>
        </div>
      </div>
      <div class="toolbar-right">
        <button id="btnToggleSidebar" class="btn secondary btn-sm" title="Toggle file tree sidebar">Tree</button>
        <button id="btnHideWhitespace" class="btn secondary btn-sm" title="Hide whitespace-only changes">Whitespace</button>
        <button id="btnCollapseAll" class="btn secondary btn-sm" title="Collapse / expand all files">Collapse All</button>
        <button id="btnTutorial" class="btn secondary btn-sm" title="View as human-readable tutorial">Tutorial</button>
        <div class="export-dropdown">
          <button id="btnExport" class="btn secondary btn-sm" title="Export options">⬇ Export ▾</button>
          <div id="exportMenu" class="export-menu hidden">
            <button id="btnDownload" class="export-item" title="Download as .patch file">Patch</button>
            <button id="btnDownloadHtml" class="export-item" title="Export as self-contained HTML">HTML</button>
            <button id="btnExportMarkdown" class="export-item export-tutorial-only hidden" title="Export tutorial as Markdown">Markdown</button>
            <button id="btnExportBBCode" class="export-item export-tutorial-only hidden" title="Export tutorial as BBCode">BBCode</button>
            <button id="btnExportPlain" class="export-item export-tutorial-only hidden" title="Export tutorial as plain text">Plain Text</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <main>
    <!-- Input panel -->
    <section id="inputPanel" class="input-panel">
      <h2>Paste or upload a diff / patch</h2>
      <div class="input-hints">
        <code>git diff | clip</code> on Windows &middot;
        <code>git diff | pbcopy</code> on Mac &middot;
        <code>git diff &gt; file.patch</code> then upload
      </div>
      <textarea id="diffInput" placeholder="Paste a diff, or a URL to a .patch file..."
                spellcheck="false"></textarea>
      <div class="input-hints">
        You can also paste a URL:
        <code>github.com/owner/repo/commit/sha</code> &middot;
        <code>github.com/owner/repo/pull/123</code> &middot;
        <code>gist.github.com/user/id</code> &middot;
        <code>*.patch</code> / <code>*.diff</code> links
      </div>
      <div class="input-actions">
        <button id="btnDiff" class="btn primary">View Diff</button>
        <label class="btn secondary" for="fileUpload">Upload .diff / .patch</label>
        <input type="file" id="fileUpload" accept=".diff,.patch,.txt" hidden>
        <button id="btnSample" class="btn secondary">Load Sample</button>
      </div>
      <div class="input-footer">
        <kbd>Ctrl+Enter</kbd> to submit &middot; or drag &amp; drop a file anywhere
      </div>
    </section>

    <!-- Output panel -->
    <section id="outputPanel" class="output-panel hidden">
      <div class="output-body">
        <div id="sidebarBackdrop" class="sidebar-backdrop hidden"></div>
        <aside id="sidebar" class="sidebar">
          <div class="sidebar-header">
            <span>Files</span>
          </div>
          <div class="sidebar-filter">
            <input id="treeFilter" type="text" placeholder="Filter files..." spellcheck="false">
          </div>
          <div id="sidebarTree" class="sidebar-tree"></div>
        </aside>
        <div id="diffContainer" class="diff-container"></div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <a href="https://github.com/martysama0134/DiffyViewer" target="_blank" rel="noopener">DiffyViewer</a> &mdash; browser-based diff viewer
  </footer>

  <div id="shortcutHint" class="shortcut-hint hidden">
    <kbd>j</kbd>/<kbd>k</kbd> next/prev file &middot;
    <kbd>b</kbd> tree &middot;
    <kbd>Esc</kbd> back
  </div>

  <!-- highlight.js for syntax highlighting in tutorial view -->
  <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.11.1/highlight.min.js" integrity="sha384-RH2xi4eIQ/gjtbs9fUXM68sLSi99C7ZWBRX1vDrVv6GQXRibxXLbwO2NGZB74MbU" crossorigin="anonymous"></script>
  <!-- pako for compressing diffs into shareable URL hashes -->
  <script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js" integrity="sha384-rNlaE5fs9dGIjmxWDALQh/RBAaGRYT5ChrzHo6tRfgrZ36iRFAiquP5g41Jsv+0j" crossorigin="anonymous"></script>
  <!-- Core: Diff2Html.parse() / .html() for stats + file tree parsing -->
  <script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.56/bundles/js/diff2html.min.js" integrity="sha384-X6/ZXflvpFfCMcPkCC2/ydjb6KJqTsoQq2eGjzB5LfWgXs3VsjbfaEKKVWsfQIAy" crossorigin="anonymous"></script>
  <!-- UI slim: Diff2HtmlUI with hljs, synchronized scroll, collapsible files -->
  <script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.56/bundles/js/diff2html-ui-slim.min.js" integrity="sha384-WV/85F8QlW9zrU6tCec7YGnPJWFExGkFiGU9Ir/5QHjLhu1jcvhe8XoVdWsCLZ7b" crossorigin="anonymous"></script>
  <script src="app.js?v=2.0.0" defer></script>
</body>
</html>