<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compare two texts</title>
    <meta name="description" content="Free online text comparison tool. Instantly find and highlight differences between two texts with no registration required.">
    <meta name="keywords" content="compare two texts">
    <meta property="og:title" content="compare two texts">
    <meta property="og:description" content="How to compare two texts files? This tool highlights changes instantly—100% free!">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://comparetwotexts.com/">
    <link rel="canonical" href="https://comparetwotexts.com/"> 
    <link rel="shortcut icon" href="/icon.png">
    <link href="/bootmin.css" rel="stylesheet">
    <style> 
        :root {
            --line-number-width: 40px;
            --highlight-red: #ffcccc;
            --highlight-green: #ccffcc;
            --line-height: 24px;
            --nav-panel-width: 200px;
        }
        a {  
            text-decoration: none;
        }
        body {
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            font-family: Arial, sans-serif;
            background: white;
            flex-direction: column;
        }

        .nav-panel {
            width: var(--nav-panel-width);
            background: #f8f9fa;
            padding: 10px 20px 20px;
            border-right: 1px solid #dee2e6;
            height: 100vh;
            box-sizing: border-box;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            transition: transform 0.3s ease;
        }
        .no-bullet-list {
            list-style: none;      
            font-size: 0.9em;      
            padding-left: 0;      
        }
        .no-bullet-list a {
            text-decoration: none;
        }

        .logo {
            margin-bottom: 20px;
            overflow: hidden;
        }

        .logo img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .main-container {
            display: flex;
            flex: 1;
            margin-left: var(--nav-panel-width);
            transition: margin-left 0.3s ease;
        }

        .right-content {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
        }

        .content-header {
            margin-bottom: 20px;
            width: 100%;
        }

        .editor-container {
            position: relative;
            border: 1px solid #ced4da;
            border-radius: 4px;
            height: 300px;
            overflow: hidden;
            width: 100%;
        }

        .line-numbers {
            position: absolute;
            left: 0;
            top: 0;
            width: var(--line-number-width);
            height: 100%;
            padding: 0 5px;
            background: #f8f9fa;
            color: #666;
            font-family: monospace;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        .line-numbers-content {
            position: relative;
            transition: transform 0.1s ease-out;
        }

        .line-number {
            height: var(--line-height);
            line-height: var(--line-height);
            text-align: right;
            padding-right: 5px;
        }

        .editor {
            width: 100%;
            height: 100%;
            padding: 0 10px 0 calc(var(--line-number-width) + 10px);
            line-height: var(--line-height);
            overflow-y: auto;
            white-space: pre-wrap;
            outline: none;
            background: transparent;
        }

        .deleted {
            text-decoration: line-through;
            font-weight: bold;
            color: red;
        }

        .added { 
            background:none;
            font-weight: bold;
            color: green; 
            text-decoration: underline;
        }

        .action-buttons {
            text-align: center;
            margin: 20px 20px;
        }

        .columns-container {
            display: flex;
            flex-direction: column;
            padding: 0 20px;
            gap: 20px;
        }

        .columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .right-banner {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
            padding: 15px 0;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            width: 100%;
        }

        .banner-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }

        .banner-subtitle {
            font-size: 14px;
            color: #666;
        }
        
        .how-to-use {
            padding: 20px;
            background:none;
            border: none;
            border-radius: 4px;
        }
        
        .how-to-use h2 {
            font-size: 20px;
            margin-bottom: 15px;
            color: #333;
        }
        
        .how-to-use p {
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        .how-to-use strong {
            color: #333;
        }

        .mobile-menu-toggle {
            display: none;
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 1100;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
        }

        
        @media (max-width: 992px) {
            .columns {
                grid-template-columns: 1fr;
            }
            
            .how-to-use {
                padding: 15px;
            }
        }

        @media (max-width: 768px) {
            :root {
                --nav-panel-width: 250px;
            }
            
            .nav-panel {
                transform: translateX(-100%);
            }
            
            .nav-panel.active {
                transform: translateX(0);
            }
            
            .main-container {
                margin-left: 0;
            }
            
            .mobile-menu-toggle {
                display: block;
            }
            
            .editor-container {
                height: 250px;
            }
            
            .action-buttons {
                margin: 15px;
            }
            
            .columns-container {
                padding: 0 15px;
                gap: 15px;
            }
        }

        @media (max-width: 480px) {
            .banner-title {
                font-size: 20px;
            }
            
            .banner-subtitle {
                font-size: 12px;
            }
            
            .editor-container {
                height: 200px;
            }
            
            :root {
                --line-number-width: 30px;
                --line-height: 20px;
            }
        }
    </style>
<script async src="https://fundingchoicesmessages.google.com/i/pub-7961237517053078?ers=1"></script><script>(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();</script>
    
</head>
<body>
    <div class="mobile-menu-toggle" id="menuToggle">☰ Menu</div>
    
    <div class="nav-panel" id="navPanel">
        <div class="logo"><img src="/logo.jpg" alt="logo"></img></div> 
        <ul class="no-bullet-list">
            <li><a href="#">Compare two css</a></li>
            <li><a href="#">Compare  two html</a></li>
            <li><a href="#">Compare two lists</a></li>
        </ul>
    </div>

    <div class="main-container" id="mainContainer">
        <div class="right-content">
            <div class="content-header">
                <div class="right-banner">
                    <div class="banner-title">Compare two texts</div>
                    <div class="banner-subtitle">Free online text comparison tool. Instantly highlight differences between two texts.</div>
                </div>
            </div>

            <div class="action-buttons">
                <button class="btn btn-primary" onclick="highlightDiff()">Compare</button>
                <button class="btn btn-secondary" onclick="clearAll()">Clear</button>
            </div>

            <div class="columns-container">
                <div class="columns">
                    <div class="editor-container">
                        <div class="line-numbers" id="leftLineNumbers"></div>
                        <div id="originalText" class="editor" contenteditable="true"></div>
                    </div>
                     
                    <div class="editor-container">
                        <div class="line-numbers" id="rightLineNumbers"></div>
                        <div id="modifiedText" class="editor" contenteditable="true" placeholder="compare text"></div>
                    </div>
                </div>
                
                <div class="how-to-use">
                    <p><strong>How to Use</strong></p>
                    <p>This tool helps you to easily find differences between two texts. Simply paste your original text in the left box and the modified version in the right box. Click the 'Compare' button to highlight all variations between the texts. Deleted content will appear in red, while new additions will be shown in green.
                    <p><strong>Privacy policy</strong></p>
                    <p>All text comparison operations are executed entirely within your local browser via JavaScript. We do not collect or send any of your input data to our servers, and there is no server-side processing involved.</p>

                    <p><strong>Terms of use</strong></p>
                    <p>No usage limits: You do not need an account to use this tool, and it is completely free of charge. <br>
                       Please note: As a free tool, the comparison results may contain errors. You're responsible for verifying any important comparisons.  <br>
                       Liability: We are not liable for any actions you may take using this tool, and we offer no warranty or guarantee of any kind.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script src="/diffmin.js"></script>

    <script>
        const observers = new WeakMap();
        function updateLineNumbers(editor, lineNumbers) {
            const contentHeight = editor.scrollHeight;
            const lineHeight = parseInt(getComputedStyle(editor).lineHeight);
            const totalLines = Math.ceil(contentHeight / lineHeight);
            
            const wrapper = document.createElement('div');
            wrapper.className = 'line-numbers-content';
            wrapper.style.height = `${contentHeight}px`;

            const fragment = document.createDocumentFragment();
            for (let i = 0; i < totalLines; i++) {
                const div = document.createElement('div');
                div.className = 'line-number';
                div.textContent = i + 1;
                fragment.appendChild(div);
            }
            wrapper.appendChild(fragment);
            
            lineNumbers.innerHTML = '';
            lineNumbers.appendChild(wrapper);
            syncScroll(editor, lineNumbers);
        }

        function syncScroll(editor, lineNumbers) {
            const wrapper = lineNumbers.querySelector('.line-numbers-content');
            if (wrapper) {
                wrapper.style.transform = `translateY(-${editor.scrollTop}px)`;
            }
        }

        function initEditor(editor) {
            const lineNumbers = editor.previousElementSibling;
            
            const observer = new ResizeObserver(() => {
                updateLineNumbers(editor, lineNumbers);
            });
            observer.observe(editor);
            observers.set(editor, observer);

            editor.addEventListener('input', () => {
                updateLineNumbers(editor, lineNumbers);
            });

            editor.addEventListener('scroll', () => {
                syncScroll(editor, lineNumbers);
            });

            updateLineNumbers(editor, lineNumbers);
        }

        function highlightDiff() {
            try {
                const original = document.getElementById('originalText');
                const modified = document.getElementById('modifiedText');
                const text1 = original.innerText;
                const text2 = modified.innerText;
                const diffs =  Diff.diffChars(text1, text2);

                let originalHtml = '';
                let modifiedHtml = '';
                
                diffs.forEach(part => {
                    const escaped = part.value
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/\n/g, '<br>');

                    if (part.added) {
                        modifiedHtml += `<span class="added">${escaped}</span>`;
                    } else if (part.removed) {
                        originalHtml += `<span class="deleted">${escaped}</span>`;
                    } else {
                        originalHtml += escaped;
                        modifiedHtml += escaped;
                    }
                });

                original.innerHTML = originalHtml;
                modified.innerHTML = modifiedHtml;
                original.contentEditable = modified.contentEditable = "true";

                [original, modified].forEach(editor => {
                    updateLineNumbers(editor, editor.previousElementSibling);
                });

            } catch (error) {
                console.error('compare error:', error);
            }
        }

        function clearAll() {
            const editors = document.querySelectorAll('.editor');
            editors.forEach(editor => {
                editor.innerHTML = '';
                updateLineNumbers(editor, editor.previousElementSibling);
            });
        }

        function toggleMenu() {
            const navPanel = document.getElementById('navPanel');
            navPanel.classList.toggle('active');
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.editor').forEach(initEditor);
            
           
            document.getElementById('menuToggle').addEventListener('click', toggleMenu);
            
           
            document.getElementById('mainContainer').addEventListener('click', function(e) {
                const navPanel = document.getElementById('navPanel');
                if (window.innerWidth <= 768 && navPanel.classList.contains('active')) {
                    navPanel.classList.remove('active');
                }
            });
        });
    </script>
</body>
</html>