TextCompare/index.html at main · jj-repository/TextCompare · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<!--
    TextCompare - Text Diff Tool

    A web-based text comparison tool that highlights differences between two text files.

    Features:
    - Side-by-side diff view with color-coded changes
    - Line-level and character-level difference highlighting
    - Navigation between differences with keyboard shortcuts
    - File loading and saving capabilities
    - Minimap for quick navigation
    - Customizable comparison options (ignore whitespace, ignore case)

    Browser Requirements:
    - Modern browsers with ES6 support (Chrome 51+, Firefox 54+, Safari 10+, Edge 15+)
    - FileReader API and CSS Flexbox support required

    Limitations:
    - Recommended file size limit: 10MB
    - Large files may cause browser performance issues
    - All processing is done client-side (no server uploads)
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; font-src 'self'; worker-src 'self'; connect-src 'none'; frame-src 'none';">
    <title>TextCompare - Text Diff Tool</title>
    <link rel="stylesheet" href="src/styles.css">
</head>
<body>
    <div class="toolbar">
        <h1>TextCompare</h1>

        <button class="btn btn-success" id="btnCompare" title="Compare texts (Ctrl+Enter)">
            <span>Compare</span>
        </button>

        <div class="separator"></div>

        <button class="btn btn-nav" id="btnPrev" disabled title="Previous difference (Ctrl+Up)" aria-label="Previous difference">
            <span>Prev</span>
        </button>
        <span class="diff-counter" id="diffCounter" role="status" aria-label="Difference counter">0 / 0</span>
        <button class="btn btn-nav" id="btnNext" disabled title="Next difference (Ctrl+Down)" aria-label="Next difference">
            <span>Next</span>
        </button>

        <div class="separator"></div>

        <div class="options-panel">
            <label class="checkbox-label">
                <input type="checkbox" id="ignoreWhitespace">
                Ignore whitespace
            </label>
            <label class="checkbox-label">
                <input type="checkbox" id="ignoreCase">
                Ignore case
            </label>
            <label class="checkbox-label">
                <input type="checkbox" id="showLineNumbers" checked>
                Line numbers
            </label>
        </div>

        <div class="separator"></div>

        <button class="btn btn-secondary" id="btnSwap" title="Swap left and right text">
            <span>Swap Text</span>
        </button>

        <button class="btn btn-danger" id="btnClearAll" title="Clear all">
            <span>Clear All</span>
        </button>

        <div class="toolbar-spacer">
            <button class="btn btn-secondary" id="btnSettings" title="Settings">
                <span>Settings</span>
            </button>
        </div>
    </div>

    <div class="toolbar toolbar--compact">
        <button class="btn btn-secondary btn-small" id="btnUndo" title="Undo (Ctrl+Z)">
            <span>Undo</span>
        </button>

        <div class="legend">
            <div class="legend-item">
                <div class="legend-color removed"></div>
                <span>Different Value</span>
            </div>
        </div>
    </div>

    <div class="main-content">
        <!-- Left Panel -->
        <div class="panel" id="leftPanel">
            <div class="panel-header">
                <div class="panel-title">
                    <span>Left (Original)</span>
                    <span class="filename" id="leftFilename">No file loaded</span>
                </div>
                <div class="panel-actions">
                    <button class="btn btn-primary btn-small" id="btnLoadLeft">Load</button>
                    <button class="btn btn-success btn-small" id="btnSaveLeft" title="Save file (Ctrl+Shift+S)">Save</button>
                    <button class="btn btn-secondary btn-small" id="btnClearLeft">Clear</button>
                </div>
            </div>
            <div class="editor-container">
                <div class="line-numbers" id="leftLineNumbers" aria-hidden="true">1</div>
                <textarea class="text-input" id="leftText" placeholder="Paste or load text here..." aria-label="Left text input (original)"></textarea>
                <div class="diff-view hidden" id="leftDiff" role="region" aria-label="Left diff view"></div>
                <div class="minimap" id="leftMinimap" aria-label="Difference minimap"></div>
            </div>
        </div>

        <!-- Right Panel -->
        <div class="panel" id="rightPanel">
            <div class="panel-header">
                <div class="panel-title">
                    <span>Right (Modified)</span>
                    <span class="filename" id="rightFilename">No file loaded</span>
                </div>
                <div class="panel-actions">
                    <button class="btn btn-primary btn-small" id="btnLoadRight">Load</button>
                    <button class="btn btn-success btn-small" id="btnSaveRight" title="Save file (Ctrl+S)">Save</button>
                    <button class="btn btn-secondary btn-small" id="btnClearRight">Clear</button>
                </div>
            </div>
            <div class="editor-container">
                <div class="line-numbers" id="rightLineNumbers" aria-hidden="true">1</div>
                <textarea class="text-input" id="rightText" placeholder="Paste or load text here..." aria-label="Right text input (modified)"></textarea>
                <div class="diff-view hidden" id="rightDiff" role="region" aria-label="Right diff view"></div>
                <div class="minimap" id="rightMinimap" aria-label="Difference minimap"></div>
            </div>
        </div>
    </div>

    <div class="status-bar" role="status" aria-live="polite">
        <span id="statusLeft">Left: 0 lines, 0 characters</span>
        <span id="statusCenter">Ready</span>
        <span id="statusRight">Right: 0 lines, 0 characters</span>
    </div>

    <!-- Hidden file inputs -->
    <input type="file" id="leftFileInput" class="hidden" accept=".txt,.md,.json,.xml,.html,.css,.js,.py,.java,.c,.cpp,.h,.csv,.log,.ini,.cfg,.yaml,.yml,*">
    <input type="file" id="rightFileInput" class="hidden" accept=".txt,.md,.json,.xml,.html,.css,.js,.py,.java,.c,.cpp,.h,.csv,.log,.ini,.cfg,.yaml,.yml,*">

    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <div>Comparing files...</div>
        </div>
    </div>

    <!-- Download Progress Overlay -->
    <div class="modal-overlay" id="downloadOverlay">
        <div class="modal download-modal">
            <h2>Downloading Update</h2>
            <div class="download-filename" id="downloadFileName"></div>
            <div class="download-bar-wrap">
                <div class="download-bar" id="downloadBar"></div>
            </div>
            <div class="download-percent" id="downloadPercent">Downloading... 0%</div>
        </div>
    </div>

    <!-- Settings Modal -->
    <div class="modal-overlay" id="settingsModal" role="dialog" aria-modal="true" aria-labelledby="settingsModalTitle">
        <div class="modal">
            <h2 id="settingsModalTitle">Settings</h2>
            <div class="modal-body">
                <label class="checkbox-label settings-row-small">
                    <input type="checkbox" id="settingsAutoUpdate">
                    Auto-Update Check on startup
                </label>
                <div class="modal-row">
                    <button class="btn btn-secondary" id="btnSettingsCheckUpdates">Check for Updates</button>
                    <button class="btn btn-secondary" id="btnSettingsReadme">Readme</button>
                    <button class="btn btn-secondary" id="btnSettingsReportBug">Report Bug</button>
                </div>
            </div>
            <div class="modal-footer">
                <img src="takodachi.webp" alt="" class="modal-avatar">
                <div class="modal-byline">by JJ</div>
                <div class="modal-version" id="settingsVersion"></div>
            </div>
            <div class="modal-actions">
                <button class="btn btn-primary" id="btnCloseSettings">Close</button>
            </div>
        </div>
    </div>

    <script src="src/diff-utils.js"></script>
    <script src="src/app.js"></script>
</body>
</html>