Real-Time-Code-Diff-Analyzer/index.html at main · Shubham-Jana-Dev/Real-Time-Code-Diff-Analyzer · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stable Real-Time Code Diff Viewer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Code Diff Analyzer 📊 (Stable Input)</h1>
        <div class="stats-bar">
            <span class="stat-item">Difference: <strong id="percentageDisplay">0%</strong></span>
            <span class="stat-item">First Change: Line <strong id="lineDisplay">-</strong>, Col <strong id="colDisplay">-</strong></span>
        </div>
        <div class="controls">
            <button id="prevBtn" title="Previous Change">← Previous</button>
            <button id="nextBtn" title="Next Change">Next →</button>
        </div>
    </header>

    <main class="editor-container">

        <div class="editor-panel">
            <h2>Version A (Original)</h2>
            <button class="clear-btn" id="clearA">Clear A</button>

            <div class="input-wrapper" id="inputWrapperA">
                <div class="line-numbers input-numbers" id="inputLineNumbersA"></div>
                <textarea id="versionAInput" class="paste-input"
                          placeholder="Paste code for Version A here..."
                          onscroll="syncScrollInput('versionAInput', 'inputLineNumbersA')"></textarea>
            </div>

            <div class="code-wrapper">
                <div class="line-numbers" id="lineNumbersA"></div>
                <div class="code-editor" id="codeEditorA"
                     onscroll="syncScrollDisplay('codeEditorA', 'codeEditorB')"></div>
            </div>
        </div>

        <div class="editor-panel">
            <h2>Version B (Modified)</h2>
            <button class="clear-btn" id="clearB">Clear B</button>

            <div class="input-wrapper" id="inputWrapperB">
                <div class="line-numbers input-numbers" id="inputLineNumbersB"></div>
                <textarea id="versionBInput" class="paste-input"
                          placeholder="Paste code for Version B here..."
                          onscroll="syncScrollInput('versionBInput', 'inputLineNumbersB')"></textarea>
            </div>

            <div class="code-wrapper">
                <div class="line-numbers" id="lineNumbersB"></div>
                <div class="code-editor" id="codeEditorB"
                     onscroll="syncScrollDisplay('codeEditorB', 'codeEditorA')"></div>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/diff-match-patch/index.min.js"></script>
    <script src="script.js"></script>
</body>
</html>