_locales/locales-support.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Locale Diff Tool</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.1.0/diff.min.js"></script>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
                background-color: #f5f5f5;
                color: #333;
                transition: all 0.3s ease;
            }

            .container {
                display: flex;
                gap: 20px;
                margin-bottom: 20px;
            }

            .text-box {
                flex: 1;
                padding: 10px;
            }

            .text-box h3 {
                margin-top: 0;
            }

            textarea {
                width: 100%;
                height: 400px;
                resize: vertical;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
                font-family: monospace;
            }

            select {
                padding: 8px;
                margin-bottom: 10px;
                border-radius: 4px;
            }

            #diff-container {
                background: white;
                padding: 20px;
                border-radius: 4px;
                margin-top: 20px;
                white-space: pre-wrap;
                font-family: monospace;
            }

            /* Dark mode styles */
            body.body-dark {
                background-color: #1a1a1a;
                color: #fff;
            }

            .body-dark .text-box,
            .body-dark .converter-box,
            .body-dark .diff-section,
            .body-dark .stats {
                background: #2d2d2d;
                color: #fff;
            }

            .body-dark textarea {
                background: #1a1a1a;
                color: #fff;
                border-color: #444;
            }

            .body-dark select {
                background: #1a1a1a;
                color: #fff;
                border-color: #444;
            }

            .body-dark button {
                background-color: #1da1f2;
                color: white;
            }

            .body-dark button:hover {
                background-color: #1991db;
            }

            .body-dark code {
                background: #333;
                color: #fff;
            }

            .body-dark .warning {
                background-color: #2c2620;
            }

            .added {
                color: white;
                background-color: #a5d6a7;
            }

            .removed {
                background-color: #ef9a9a;
            }

            h3.removed {
                color: #c62828;
                /* dark red for better contrast */
                background-color: transparent;
            }

            .body-dark h3.removed {
                color: #ff9a98;
                /* light red for dark mode */
            }

            button {
                padding: 8px 16px;
                background-color: #1da1f2;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            button:hover {
                background-color: #1991db;
            }

            .diff-section {
                margin: 20px 0;
                padding: 15px;
                background: white;
                border-radius: 4px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            .diff-section h3 {
                margin-top: 0;
                color: #000000;
            }

            .diff-section ul {
                margin: 0;
                font-size: 1rem;
                padding-left: 20px;
            }

            .diff-section li {
                margin: 5px 0;
                line-height: 1.5;
            }

            .warning {
                background-color: #fff3e0;
                padding: 10px;
                border-radius: 4px;
                margin: 5px 0;
            }

            code {
                background: #f5f5f5;
                padding: 2px 4px;
                border-radius: 3px;
                font-family: monospace;
            }

            .stats {
                background: white;
                padding-left: 15px;
                border-radius: 50px;
                margin-bottom: 20px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            .stats ul {
                list-style: none;
            }

            .stats li {
                font-size: 20px;
                margin: 5px 0;
            }

            .converter-box {
                margin-top: 20px;
                padding: 20px;
                background: white;
                border-radius: 4px;
            }

            #darkModeButton {
                background: none;
                border: none;
                font-size: 24px;
                cursor: pointer;
                padding: 5px 10px;
                border-radius: 50%;
                transition: background-color 0.3s;
            }

            #darkModeButton:hover {
                background-color: rgba(0, 0, 0, 0.1);
            }

            .instructions {
                background-color: #e8f4ff;
                padding: 20px;
                border-radius: 8px;
                margin-bottom: 20px;
                border: 1px solid #b8daff;
            }

            .body-dark .diff-section h3 {
                margin-top: 0;
                color: #ffffff;
            }

            /* Keeps specific colors for added/removed */
            .diff-section h3.added {
                color: #2e7d32;
            }

            .diff-section h3.removed {
                color: #c62828;
            }

            .body-dark .diff-section h3.added {
                color: #81c784;
            }

            .body-dark .diff-section h3.removed {
                color: #ef5350;
            }

            .body-dark .instructions {
                background-color: #1a2635;
                color: #fff;
                border-color: #2a3f55;
            }

            .body-dark #diff-container {
                background: #8d8d8d6b;
                color: #000000 !important;
                border-color: #2a3f55;
            }

            .instructions h3 {
                margin-top: 0;
                color: #0056b3;
            }

            .body-dark .instructions h3 {
                color: #66b0ff;
            }

            .instructions ol {
                margin: 0;
                padding-left: 20px;
            }

            .instructions li {
                margin-bottom: 8px;
            }
        </style>
    </head>

    <body>
        <div class="instructions">
            <h3>How to Use the Locale Diff Tool</h3>
            <ol>
                <li><strong>Compare Translations:</strong>
                    <ul>
                        <li>Select your language from the dropdown menu</li>
                        <li>Click "Compare" to see differences with the English base version</li>
                        <li>The tool will show both versions side by side</li>
                        <li>Missing translations will be highlighted</li>
                    </ul>
                </li>
                <li><strong>Convert Text to JSON:</strong>
                    <ul>
                        <li>Use the converter box at the bottom of the page</li>
                        <li>Paste your text in the format: <code>key: "value"</code></li>
                        <li>Click "Convert to JSON" to get the proper messages.json format</li>
                    </ul>
                </li>
                <li><strong>Tips:</strong>
                    <ul>
                        <li>Use the dark/light mode toggle (☀️/🌙) for better visibility</li>
                        <li>The comparison will show missing or different translations</li>
                        <li>Copy the converted JSON output to your messages.json file</li>
                    </ul>
                </li>
            </ol>
        </div>

        <h2>Locale Diff Tool</h2>
        <div>
            <select id="language-select">
                <option value="en">English (Base)</option>
            </select>
            <button onclick="loadAndCompare()">Compare</button>
            <button onclick="darkMode()" id="darkModeButton">
                <span id="darkModeIcon">☀️</span>
            </button>
        </div>

        <div class="container">
            <div class="text-box">
                <h3>English (Base)</h3>
                <textarea id="text-box-1" readonly></textarea>
            </div>
            <div class="text-box">
                <h3>Selected Language</h3>
                <textarea id="text-box-2" readonly></textarea>
            </div>
        </div>

        <div id="diff-container"></div>

        <div class="converter-box">
            <h3>Text to JSON Converter</h3>
            <textarea id="convert-input" style="width: 100%; height: 200px; margin-bottom: 10px;"
                placeholder="Cole aqui o texto no formato:&#10;key: &quot;value&quot;&#10;another_key: &quot;another value&quot;"></textarea>
            <button onclick="convertToJson()">Convert to JSON</button>
            <textarea id="convert-output" style="width: 100%; height: 200px; margin-top: 10px;" readonly></textarea>
        </div>

        <script>
            const darkModeIcon = document.getElementById('darkModeIcon');

            function darkMode() {
                document.body.classList.toggle('body-dark');
                darkModeIcon.textContent = document.body.classList.contains('body-dark') ? '🌙' : '☀️';

                // Save preference to localStorage
                localStorage.setItem('darkMode',
                    document.body.classList.contains('body-dark'));
            }

            //Load theme preference on startup
            window.addEventListener('load', () => {
                const isDarkMode = localStorage.getItem('darkMode') === 'true';
                if (isDarkMode) {
                    document.body.classList.add('body-dark');
                    darkModeIcon.textContent = '🌙';
                }
            });

            // Language names mapping
            const LANGUAGE_NAMES = {
                'ar': 'Arabic',
                'bg': 'Bulgarian',
                'ca': 'Catalan',
                'cs': 'Czech',
                'de': 'German',
                'el': 'Greek',
                'en': 'English',
                'es': 'Spanish',
                'fi': 'Finnish',
                'fr': 'French',
                'he': 'Hebrew',
                'id': 'Indonesian',
                'it': 'Italian',
                'ja': 'Japanese',
                'ko': 'Korean',
                'lv': 'Latvian',
                'nb': 'Norwegian',
                'ne': 'Nepali',
                'nl': 'Dutch',
                'pl': 'Polish',
                'pt_BR': 'Portuguese (Brazil)',
                'ro': 'Romanian',
                'ru': 'Russian',
                'sv': 'Swedish',
                'th': 'Thai',
                'tl': 'Tagalog',
                'tr': 'Turkish',
                'uk': 'Ukrainian',
                'vi': 'Vietnamese',
                'zh_CN': 'Chinese (Simplified)',
                'zh_TW': 'Chinese (Traditional)'
            };

            // static List of locales available, for offline use only
            const AVAILABLE_LOCALES = [
                'ar', 'bg', 'ca', 'cs', 'de', 'el', 'en', 'es', 'fi', 'fr',
                'he', 'id', 'it', 'ja', 'ko', 'lv', 'nb', 'ne', 'nl', 'pl',
                'pt_BR', 'ro', 'ru', 'sv', 'th', 'tl', 'tr', 'uk', 'vi',
                'zh_CN', 'zh_TW'
            ];

            // Function to load available locales
            async function loadAvailableLocales() {
                const select = document.getElementById('language-select');

                try {
                    // Usando a lista estática de locales
                    const locales = AVAILABLE_LOCALES;

                    // Sort locales alphabetically by their display names
                    locales.sort((a, b) => {
                        const nameA = LANGUAGE_NAMES[a] || a;
                        const nameB = LANGUAGE_NAMES[b] || b;
                        return nameA.localeCompare(nameB);
                    });

                    // Add options to select
                    locales.forEach(locale => {
                        if (locale === 'en') return; // Skip English as it's already the first option
                        const option = document.createElement('option');
                        option.value = locale;
                        option.textContent = LANGUAGE_NAMES[locale] || locale;
                        select.appendChild(option);
                    });
                } catch (error) {
                    console.error('Error loading locales:', error);
                }
            }

            async function loadLocaleFile(locale) {
                try {

                    const response = await fetch(`https://raw.githubusercontent.com/dimdenGD/OldTwitter/master/_locales/${locale}/messages.json`);

                    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                    const data = await response.json();
                    return data;
                } catch (error) {
                    console.error(`Error loading ${locale} locale:`, error);
                    return null;
                }
            }

            async function loadAndCompare() {
                const selectedLanguage = document.getElementById('language-select').value;
                const textBox1 = document.getElementById('text-box-1');
                const textBox2 = document.getElementById('text-box-2');

                // Load both locale files
                const enData = await loadLocaleFile('en');
                const selectedData = await loadLocaleFile(selectedLanguage);

                if (!enData || !selectedData) {
                    alert('Error loading locale files');
                    return;
                }

                // Display the raw JSON
                textBox1.value = JSON.stringify(enData, null, 2);
                textBox2.value = JSON.stringify(selectedData, null, 2);

                // Compare and show differences
                compareLocales(enData, selectedData);
            }

            function compareLocales(enData, selectedData) {
                const diffContainer = document.getElementById('diff-container');
                diffContainer.innerHTML = '';

                // Get all keys from both objects
                const enKeys = new Set(Object.keys(enData));
                const selectedKeys = new Set(Object.keys(selectedData));

                // Find missing keys
                const missingInSelected = [...enKeys].filter(key => !selectedKeys.has(key));
                const extraInSelected = [...selectedKeys].filter(key => !enKeys.has(key));

                // Create report
                let report = '';

                if (missingInSelected.length > 0) {
                    report += '<div class="diff-section">';
                    report += '<h3 class="removed">🚫 Missing Translations</h3>';
                    report += '<ul>';
                    missingInSelected.forEach(key => {
                        report += `<li><code>${key}</code>: "${enData[key].message}"</li>`;
                    });
                    report += '</ul></div>';
                }

                if (extraInSelected.length > 0) {
                    report += '<div class="diff-section">';
                    report += '<h3 class="added">✨ Extra Keys</h3>';
                    report += '<ul>';
                    extraInSelected.forEach(key => {
                        report += `<li><code>${key}</code>: "${selectedData[key].message}"</li>`;
                    });
                    report += '</ul></div>';
                }

                // Check for structural differences (missing placeholders, etc.)
                report += '<div class="diff-section">';
                report += '<h3>🔍 Structural Differences</h3>';
                report += '<ul>';

                const commonKeys = [...enKeys].filter(key => selectedKeys.has(key));
                let hasStructuralDiffs = false;

                commonKeys.forEach(key => {
                    const enMessage = enData[key].message;
                    const selectedMessage = selectedData[key].message;

                    // Check for placeholder differences ($1, $2, etc.)
                    const enPlaceholders = (enMessage.match(/\$\d+/g) || []).sort();
                    const selectedPlaceholders = (selectedMessage.match(/\$\d+/g) || []).sort();

                    if (JSON.stringify(enPlaceholders) !== JSON.stringify(selectedPlaceholders)) {
                        hasStructuralDiffs = true;
                        report += `<li class="warning"><code>${key}</code>:<br>`;
                        report += `EN placeholders: ${enPlaceholders.join(', ') || 'none'}<br>`;
                        report += `Translation placeholders: ${selectedPlaceholders.join(', ') || 'none'}</li>`;
                    }
                });

                if (!hasStructuralDiffs) {
                    report += '<li>✅ No structural differences found</li>';
                }
                report += '</ul></div>';

                // Add statistics
                const stats = `
                <div class="stats">
                    <h3>📊 Statistics</h3>
                    <ul>
                        <li>Total keys in English: ${enKeys.size}</li>
                        <li>Total keys in translation: ${selectedKeys.size}</li>
                        <li>Missing translations: ${missingInSelected.length}</li>
                        <li>Extra keys: ${extraInSelected.length}</li>
                        <li>Coverage: ${Math.round((commonKeys.length / enKeys.size) * 100)}%</li>
                    </ul>
                </div>
            `;

                diffContainer.innerHTML = stats + report;
            }

            function convertToJson() {
                const input = document.getElementById('convert-input').value;
                const output = document.getElementById('convert-output');

                try {
                    // Split text into lines
                    const lines = input.split('\n').filter(line => line.trim());

                    // Creates an object to store key-value pairs
                    const result = {};

                    // Processes each line
                    lines.forEach(line => {
                        // Finds the first ':'
                        const colonIndex = line.indexOf(':');
                        if (colonIndex === -1) return;

                        // Extract key and value
                        const key = line.substring(0, colonIndex).trim();
                        const value = line.substring(colonIndex + 1).trim();

                        // add to result object
                        result[key] = {
                            "message": value.replace(/^"(.*)"$/, '$1')
                        };
                    });

                    // Convert to formatted JSON
                    const jsonString = JSON.stringify(result, null, 4);
                    output.value = jsonString;
                } catch (error) {
                    output.value = "Error: " + error.message;
                }
            }

            // Load initial comparison when page loads
            window.onload = () => {
                loadAvailableLocales().then(() => {
                    loadAndCompare();
                });
            };
        </script>
    </body>

</html>