winnie/WinnieAPI-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Patrick
2026-05-01 20:02:13 +02:00
commit 75fb753fc0
77 changed files with 4793 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/tools/diff.html
+52
View File
@@ -0,0 +1,52 @@
<!-- ═══════════════ DIFF ═══════════════ -->
<div class="page" id="page-diff">
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
<div class="section-header">
<h2><i class="fas fa-columns" style="color:var(--green)"></i> Diff Checker</h2>
<p>Compare two texts and find the differences.</p>
</div>
<div class="split-panel">
<div>
<div class="panel-label">Original</div>
<textarea id="diffA" placeholder="Paste original text..."></textarea>
</div>
<div>
<div class="panel-label">Modified</div>
<textarea id="diffB" placeholder="Paste modified text..."></textarea>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="computeDiff()"><i class="fas fa-exchange-alt"></i> Compare</button>
</div>
<div class="diff-output" id="diffOutput"></div>
<div class="api-usage">
<button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
<div class="api-usage-body">
<div class="api-baseurl-note">ℹ️ Diff Checker runs entirely <strong>client-side</strong>. No server API is needed. Here's the line-by-line comparison logic:</div>
<div class="api-endpoint">
<div class="api-desc">Simple line-by-line diff in JavaScript.</div>
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Client-side diff — no API call needed</span>
<span class="kw">function</span> <span class="fn">diffLines</span>(original, modified) {
<span class="kw">const</span> a = original.<span class="fn">split</span>(<span class="str">'\n'</span>);
<span class="kw">const</span> b = modified.<span class="fn">split</span>(<span class="str">'\n'</span>);
<span class="kw">const</span> result = [];
<span class="kw">const</span> max = Math.<span class="fn">max</span>(a.length, b.length);
<span class="kw">for</span> (<span class="kw">let</span> i = 0; i < max; i++) {
<span class="kw">if</span> (a[i] === undefined) result.<span class="fn">push</span>({ type: <span class="str">'add'</span>, line: b[i] });
<span class="kw">else if</span> (b[i] === undefined) result.<span class="fn">push</span>({ type: <span class="str">'del'</span>, line: a[i] });
<span class="kw">else if</span> (a[i] === b[i]) result.<span class="fn">push</span>({ type: <span class="str">'same'</span>, line: a[i] });
<span class="kw">else</span> {
result.<span class="fn">push</span>({ type: <span class="str">'del'</span>, line: a[i] });
result.<span class="fn">push</span>({ type: <span class="str">'add'</span>, line: b[i] });
}
}
<span class="kw">return</span> result;
}
<span class="kw">const</span> diff = <span class="fn">diffLines</span>(<span class="str">"hello\nworld"</span>, <span class="str">"hello\nearth"</span>);
<span class="cm">// → [{ type: "same", line: "hello" }, { type: "del", line: "world" }, { type: "add", line: "earth" }]</span></div>
</div>
</div>
</div>
</div>