文本差異檢查器

<style>
    /* Only essential styles for diff display - keeping your existing classes intact */
    .diff-container {
        display: flex;
        gap: 20px;
        margin: 20px 0;
    }
    
    .diff-panel {
        flex: 1;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 15px;
        position: relative; /* Set as positioning context */
    }
    
    .removed-text {
        background-color: #ffebee;
        color: #c62828;
        text-decoration: line-through;
    }
    
    .added-text {
        background-color: #e8f5e8;
        color: #2e7d32;
    }
    
    .line-number {
        color: #666;
        font-size: 12px;
        margin-right: 10px;
        display: inline-block;
        width: 30px;
    }

    .removals, .additions {
        position: absolute; /* Position in the corner */
        top: 1px;
        right: 10px;
        font-size: 12px; /* Smaller font size */
        font-weight: 400; /* Regular font weight */
        padding: 2px 6px;
        border-radius: 4px;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
    }

    .removals {
        color: #dc3545;
    }
    
    .additions {
        color: #28a745;
    }
</style>
<div class="container-fluid">
    <div class="container">
        <div class="matchedResult">
            <div class="alert alert-warning resultTxt text-center" style="display: none;"></div>
        </div>
        
        <div class="row matchedNotResult text-center" id="diffResult" style="display: none;">
            <div class="col-md-12">
                <div class="OriginalTxtResult" style="background: #fff; box-shadow: 0 0 2px rgb(0 0 0 / 20%); font-size: 25px; font-weight: 600;">
                    <div class="diff-container">
                        <div class="diff-panel">
                            <span class="removals">📝 <span id="removeCount">0</span> removals</span>
                            <span id="originalDiff"></span>
                        </div>
                        <div class="diff-panel">
                            <span class="additions">➕ <span id="addCount">0</span> additions</span>
                            <span id="modifiedDiff"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row text-center my-0 py-3 main_row">
            <div class="button-container">
                <div class="upload-area">
                    <div style="position: relative; cursor: pointer">
                        <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nhkq60 upload-icon" data-testid="CloudUploadOutlinedIcon" focusable="false" viewbox="0 0 24 24">
                            <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z"></path>
                        </svg>
                        <span class="css-148idog">Upload Document</span>
                        <input accept=".txt,.doc" class="upload-file" id="upload-file" name="upload-file" style="position: absolute; left: 0px" type="file"/>
                    </div>
                </div>
                
                <button class="buttonBrand" onclick="findDifference()" name="Find Difference" style="margin: 10px auto 10px" type="submit">Find Difference</button>
                
                <div class="upload-area-output">
                    <div style="position: relative; cursor: pointer">
                        <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nhkq60 upload-icon" data-testid="CloudUploadOutlinedIcon" focusable="false" viewbox="0 0 24 24">
                            <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z"></path>
                        </svg>
                        <span class="css-148idog">Upload Document</span>
                        <input accept=".txt,.doc" class="upload-file-output" id="upload-file-output" name="upload-file" style="position: absolute; left: 0px" type="file"/>
                    </div>
                </div>
            </div>
            
            <div class="col-12 d-flex" style="justify-content: space-around">
                <div class="label-text">Original Text</div>
                <div class="label-text">Changed Text</div>
            </div>
        </div>
        
        <div class="row text-center main_row2 pl-0">
            <div class="col-6 p-0">
                <textarea class="box1" cols="30" id="originalText" rows="10" placeholder="Paste your original text here..."></textarea>
            </div>
            <div class="col-6 p-0">
                <textarea class="box2" cols="30" id="modifiedText" rows="10" placeholder="Paste your modified text here..."></textarea>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.0.0/diff.js"></script>