From f24a03dc29b1727d3aa1d432adc2656cbf7a5c03 Mon Sep 17 00:00:00 2001
From: Carlos Luiz <111317670+unnamed-orbert@users.noreply.github.com>
Date: Sun, 17 Nov 2024 00:43:10 -0300
Subject: [PATCH] try fix test.js erro with locales diffs

- index.html\locales-support moved to ./_locales and renamed index.html to locales-support.html,
- _locales\readme.me updated
---
 _locales/locales-support.html       | 587 ++++++++++++++++++++++++++++
 _locales/locales-support/index.html | 587 ----------------------------
 _locales/readme.md                  |   6 +-
 3 files changed, 590 insertions(+), 590 deletions(-)
 create mode 100644 _locales/locales-support.html
 delete mode 100644 _locales/locales-support/index.html
diff --git a/_locales/locales-support.html b/_locales/locales-support.html
new file mode 100644
index 00000000..b494a53b
--- /dev/null
+++ b/_locales/locales-support.html
@@ -0,0 +1,587 @@
+<!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>
\ No newline at end of file
diff --git a/_locales/locales-support/index.html b/_locales/locales-support/index.html
deleted file mode 100644
index 3b7cdb80..00000000
--- a/_locales/locales-support/index.html
+++ /dev/null
@@ -1,587 +0,0 @@
-<!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>
\ No newline at end of file
diff --git a/_locales/readme.md b/_locales/readme.md
index 9dff5d17..85fbfd7e 100644
--- a/_locales/readme.md
+++ b/_locales/readme.md
@@ -24,9 +24,9 @@ Then open newly pasted folder and open ``messages.json`` in it. You'll now see `
 
 ### Translation Support Tools
 
-We provide a helpful tool in the `locales-support` directory to assist with translations:
+We provide a helpful tool in the `./_locales` directory to assist with translations:
 
-#### Locale Diff Tool (locales-support/index.html)
+#### Locale Diff Tool (./locales-support.html)
 This tool helps you:
 - Compare your translation with the English base version side by side
 - Identify missing translations
@@ -42,4 +42,4 @@ When you're finished you can send me your ``messages.json file``:
 
 You can also include your Twitter profile to get credited.
 
-Thank you!
+Thank you!
\ No newline at end of file
