Spaces:

abdelhaqueidali
/

Amazigh-Spell-Checker

Running

App Files Files Community

abdelhaqueidali commited on 28 days ago

Commit

cced289

verified ·

1 Parent(s): 0d275cb

Update index.html

Browse files

Files changed (1) hide show

index.html +50 -522

index.html CHANGED Viewed

@@ -1,538 +1,66 @@
 <!DOCTYPE html>
-<html lang="zgh">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ⴰⵙⵏⵎ ⵏ ⵜⵉⵔⵔⴰ ⵏ ⵜⵎⴰⵣⵉⵖⵜ</title>
     <style>
-        :root {
-            --bg-color: #f8f8f8;
-            --text-color: #333;
-            --accent-color: #007bff;
-            --nav-bg-color: #e9ecef;
-            --nav-text-color: #343a40;
-            --section-bg-color: #fff;
-            --footer-bg-color: #343a40;
-            --footer-text-color: #fff;
-            --button-bg-color: #007bff;
-            --button-text-color: #fff;
-            --button-hover-bg-color: #0056b3;
-            --link-color: #007bff;
-            --link-hover-color: #0056b3;
-            --highlight-color: #ffdddd;
-            --highlight-hover-color: #ffcccc;
-            --similar-word-color: #007bff;
-            --replaced-word-color: #4CAF50;
-        }
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            display: flex;
-            min-height: 100vh;
-            flex-direction: column;
             margin: 0;
             padding: 0;
         }
-        header {
-            background-color: var(--accent-color);
-            color: #fff;
-            padding: 20px;
-            text-align: center;
-        }
-        h1 {
-            margin: 0;
-            font-size: 2.5rem;
-        }
-        main {
-            padding: 20px;
-            flex: 1;
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        h1 {
-            text-align: center;
-            color: var(--accent-color);
-            font-size: 128%;
-        }
-        textarea {
-            width: 100%;
-            height: 200px;
-            margin-bottom: 10px;
-            padding: 10px;
-            border: 1px solid #ddd;
-            background-color: var(--section-bg-color);
-            color: var(--text-color);
-        }
-        .button-container {
-            display: flex;
-            justify-content: center;
-            flex-wrap: wrap;
-            margin-bottom: 20px;
-        }
-        .button, button {
-            background-color: var(--button-bg-color);
-            color: var(--button-text-color);
-            padding: 10px 20px;
-            border: none;
-            cursor: pointer;
-            margin: 5px;
-            border-radius: 5px;
-        }
-        .button:hover, button:hover {
-            background-color: var(--button-hover-bg-color);
-        }
-        .button:disabled, button:disabled {
-            background-color: #ccc;
-            cursor: not-allowed;
-        }
-        #resultText {
-            margin-top: 10px;
-            border: 1px solid #ddd;
-            padding: 10px;
-            min-height: 100px;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            background-color: var(--section-bg-color);
-            color: var(--text-color);
-        }
-        .highlight {
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
-        .highlight:hover {
-            background-color: var(--highlight-hover-color);
-        }
-        .grammar-error {
-            color: orange;
-            cursor: pointer;
-        }
-        .similar-word {
-            color: var(--similar-word-color);
-            cursor: pointer;
-        }
-        .replaced-word {
-            color: var(--replaced-word-color);
-            cursor: pointer;
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            top: 0;
             width: 100%;
             height: 100%;
-            overflow: auto;
-            background-color: rgba(0, 0, 0, 0.4);
-        }
-        .modal-content {
-            background-color: var(--section-bg-color);
-            color: var(--text-color);
-            margin: 15% auto;
-            padding: 20px;
-            border: 1px solid #888;
-            width: 80%;
-            border-radius: 5px;
-        }
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-            cursor: pointer;
-        }
-        .close:hover,
-        .close:focus {
-            color: black;
-            text-decoration: none;
-            cursor: pointer;
-        }
-        .pagination {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-top: 10px;
-        }
-        .pagination button,
-        .pagination span {
-            margin: 0 5px;
-            padding: 5px 10px;
-            border: none;
-            background-color: var(--button-bg-color);
-            color: var(--button-text-color);
-            cursor: pointer;
-            border-radius: 5px;
-        }
-        .pagination button:disabled {
-            background-color: #ccc;
-            cursor: not-allowed;
-        }
-        .pagination .current-page {
-            background-color: var(--accent-color);
-            font-weight: bold;
-        }
-        footer {
-            background-color: var(--footer-bg-color);
-            color: var(--footer-text-color);
-            text-align: center;
-            padding: 10px;
-            margin-top: auto;
-        }
     </style>
 </head>
 <body>
-    <header>
-        <h1>ⵉⵎⴰⵙⵙⵏ</h1>
-    </header>
-    <main>
-        <section>
-            <textarea id="inputText" placeholder="Text..."></textarea>
-            <div class="button-container">
-                <button id="checkSpelling">ⴷⵡⵙ</button>
-                <button id="clearInput">ⵚⴼⴹ</button>
-                <button id="pasteInput">ⵙⵍⵖ</button>
-                <button id="exportResults">ⵙⵙⵓⴼⵖ</button>
-            </div>
-            <div id="resultText"></div>
-            <div class="button-container">
-                <button id="copyResult">ⵙⵙⵏⵖⵍ</button>
-            </div>
-        </section>
-    </main>
-    <footer>
-        <p>ⴰⵎⵉⵎⴰⵙⵙⵏ</p>
-    </footer>
-    <!-- Modal -->
-    <div id="myModal" class="modal">
-        <div class="modal-content">
-            <span class="close">×</span>
-            <p>ⵜⵉⴳⵓⵔⵉⵡⵉⵏ ⵉⵔⵡⴰⵙⵏ:</p>
-            <p id="modalContent"></p>
-            <div class="pagination">
-                <button id="prevWords"><</button>
-                <span id="pageNumbers"></span>
-                <button id="nextWords">></button>
-            </div>
-            <input type="text" id="editWord" value="">
-            <p></p>
-            <button id="replaceWord">ⵙⵏⴼⵍ</button>
-            <button id="addToDictionaryBtn">ⵔⵏⵓ ⵖⵔ ⵓⵎⴰⵡⴰⵍ</button> <!-- Add to Dictionary Button -->
-        </div>
-    </div>
-    <script>
-    // --- In-Memory Dictionary Management ---
-    let dictionaryString = `
-ⴰⵎⴰⴹⴰⵍ
-ⴰⵙⴳⴳⵯⴰⵙ
-ⴰⵢⵢⵓⵔ
-ⴰⵙⵉⵏⴰⵙ
-ⴰⴽⵕⴰⵙ
-ⴰⵙⵉⴹⵢⴰⵙ
-ⵜⴰⵎⴰⵣⵉⵖⵜ
-ⵜⵉⴼⵉⵏⴰⵖ
-ⴰⵙⵍⵎⴰⴷ
-ⵜⴰⵙⴷⴰⵡⵉⵜ
-    `; // Initial dictionary
-    let dictionary = new Set();
-    function loadDictionaryFromString(dictString) {
-        const words = dictString.trim().split('\n').map(word => word.trim());
-        words.forEach(word => dictionary.add(word));
-        console.log('Dictionary loaded from string');
-    }
-    loadDictionaryFromString(dictionaryString);
-    function addWordToMemoryDictionary(word) {
-        if (!dictionary.has(word)) {
-            dictionary.add(word);
-            dictionaryString += `\n${word}`;
-            console.log(`Added "${word}" to in-memory dictionary.`);
-        }
-    }
-    let currentWordElement = null;
-    let currentWordText = '';
-    let allSimilarWords = [];
-    let currentWordIndex = 0;
-    const similarLetters = {
-        'ⵣ': 'ⵥ', 'ⵥ': 'ⵣ',
-        'ⴷ': 'ⴹ', 'ⴹ': 'ⴷ',
-        'ⵜ': 'ⵟ', 'ⵟ': 'ⵜ',
-        'ⵟ': 'ⴹⵜ', 'ⴹⵜ': 'ⵟ',
-        'ⵔ': 'ⵕ', 'ⵕ': 'ⵔ',
-        'ⵙ': 'ⵚ', 'ⵚ': 'ⵙ'
-    };
-    const vowels = new Set(['ⴰ', 'ⵉ', 'ⵓ']);
-    function loadDictionary(url, dictSet) {
-        fetch(url)
-            .then(response => response.text())
-            .then(text => {
-                const words = text.split('\n').map(word => word.trim());
-                words.forEach(word => dictSet.add(word));
-                console.log('Dictionary loaded from', url);
-            })
-            .catch(error => console.error('Error loading dictionary:', error));
-    }
-    loadDictionary('Dictionary.txt', dictionary); // Load the external file
-    function levenshteinDistance(a, b) {
-        if (a.length === 0) return b.length;
-        if (b.length === 0) return a.length;
-        const matrix = [];
-        for (let i = 0; i <= b.length; i++) {
-            matrix[i] = [i];
-        }
-        for (let j = 0; j <= a.length; j++) {
-            matrix[0][j] = j;
-        }
-        for (let i = 1; i <= b.length; i++) {
-            for (let j = 1; j <= a.length; j++) {
-                if (b.charAt(i - 1) === a.charAt(j - 1)) {
-                    matrix[i][j] = matrix[i - 1][j - 1];
-                } else {
-                    matrix[i][j] = Math.min(
-                        matrix[i - 1][j - 1] + 1,
-                        matrix[i][j - 1] + 1,
-                        matrix[i - 1][j] + 1
-                    );
-                }
-            }
-        }
-        return matrix[b.length][a.length];
-    }
-    function findSimilarWords(word, dictionary, maxDistance = 2) {
-        let similarWords = Array.from(dictionary).filter(dictWord =>
-            levenshteinDistance(word, dictWord) <= maxDistance
-        );
-        // Check for ⵢ/ⵉ and ⵡ/ⵓ at the beginning
-        if (word.startsWith('ⵢ')) {
-            const altWord = 'ⵉ' + word.slice(1);
-            if (dictionary.has(altWord)) similarWords.unshift(altWord);
-        } else if (word.startsWith('ⵡ')) {
-            const altWord = 'ⵓ' + word.slice(1);
-            if (dictionary.has(altWord)) similarWords.unshift(altWord);
-        }
-        // Check without vowels
-        const wordWithoutVowels = Array.from(word).filter(char => !vowels.has(char)).join('');
-        dictionary.forEach(dictWord => {
-            const dictWordWithoutVowels = Array.from(dictWord).filter(char => !vowels.has(char)).join('');
-            if (wordWithoutVowels === dictWordWithoutVowels && !similarWords.includes(dictWord)) {
-                similarWords.push(dictWord);
-            }
-        });
-        // Check with similar letters
-        for (let i = 0; i < word.length; i++) {
-            if (similarLetters[word[i]]) {
-                const altWord = word.slice(0, i) + similarLetters[word[i]] + word.slice(i + 1);
-                if (dictionary.has(altWord) && !similarWords.includes(altWord)) {
-                    similarWords.push(altWord);
-                }
-            }
-        }
-        return similarWords;
-    }
-    function showModal(word, similarWords) {
-        const modal = document.getElementById("myModal");
-        const modalContent = document.getElementById("modalContent");
-        document.getElementById("editWord").value = word;
-        allSimilarWords = similarWords;
-        currentWordIndex = 0;
-        updateModalContent();
-        modal.style.display = "block";
-    }
-    function updateModalContent() {
-        const modalContent = document.getElementById("modalContent");
-        const start = currentWordIndex;
-        const end = Math.min(start + 10, allSimilarWords.length);
-        const currentWords = allSimilarWords.slice(start, end);
-        modalContent.innerHTML = currentWords.map(w => `<span class="similar-word">${w}</span>`).join(', ');
-        document.querySelectorAll('.similar-word').forEach(element => {
-            element.addEventListener('click', () => {
-                document.getElementById("editWord").value = element.innerText;
-            });
-        });
-        document.getElementById("prevWords").disabled = start === 0;
-        document.getElementById("nextWords").disabled = end >= allSimilarWords.length;
-        // Update pagination
-        const totalPages = Math.ceil(allSimilarWords.length / 10);
-        const currentPage = Math.floor(start / 10) + 1;
-        let pageNumbers = '';
-        if (currentPage > 1) {
-            pageNumbers += `<span>${currentPage - 1}</span>`;
-        }
-        pageNumbers += `<span class="current-page">${currentPage}</span>`;
-        if (currentPage < totalPages) {
-            pageNumbers += `<span>${currentPage + 1}</span>`;
-        }
-        document.getElementById("pageNumbers").innerHTML = pageNumbers;
-    }
-    function handleWordClick(event) {
-      currentWordElement = event.target;
-      currentWordText = currentWordElement.innerText.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
-      const similarWords = findSimilarWords(currentWordText, dictionary);
-      showModal(currentWordText, similarWords);
-    }
-    function replaceWord(newWord) {
-        const originalWord = currentWordElement.innerText; //Keep for later.
-        currentWordElement.innerHTML = newWord;
-        currentWordElement.className = "highlight replaced-word";
-        currentWordElement.style.color = "green";
-        document.querySelectorAll('.replaced-word').forEach(element => {
-            element.addEventListener('click', handleWordClick);
-        });
-    }
-    // Event listener for "Check Spelling" button
-    document.getElementById('checkSpelling').addEventListener('click', function() {
-        const text = document.getElementById('inputText').value;
-        const words = text.split(/(\s+|\b)/); // Split on spaces and word boundaries
-        let result = '';
-        words.forEach(word => {
-            const cleanWord = word.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
-            if (cleanWord.trim().length > 0 && !dictionary.has(cleanWord)) {
-                result += `<span class="highlight" style="color: red;">${word}</span>`;
-            } else {
-                result += `<span class="highlight">${word}</span>`; // Wrap all words
-            }
-        });
-        document.getElementById('resultText').innerHTML = result;
-        // Add click event listeners to ALL highlighted words (including correctly spelled ones)
-        document.querySelectorAll('.highlight').forEach(element => {
-            element.addEventListener('click', handleWordClick);
-        });
-    });
-    // Event listener for "Replace Word" button
-    document.getElementById('replaceWord').addEventListener('click', function() {
-        const newWord = document.getElementById('editWord').value;
-        replaceWord(newWord);
-        const modal = document.getElementById("myModal");
-        modal.style.display = "none";
-    });
-    // --- Add to Dictionary ---
-    document.getElementById('addToDictionaryBtn').addEventListener('click', function() {
-        const wordToAdd = document.getElementById('editWord').value;
-        addWordToMemoryDictionary(wordToAdd);
-        const modal = document.getElementById("myModal");
-        modal.style.display = "none";
-    });
-    document.querySelector(".close").addEventListener('click', function() {
-        const modal = document.getElementById("myModal");
-        modal.style.display = "none";
-    });
-    document.getElementById('prevWords').addEventListener('click', function() {
-        if (currentWordIndex > 0) {
-            currentWordIndex -= 10;
-            updateModalContent();
-        }
-    });
-    document.getElementById('nextWords').addEventListener('click', function() {
-        if (currentWordIndex + 10 < allSimilarWords.length) {
-            currentWordIndex += 10;
-            updateModalContent();
-        }
-    });
-    document.getElementById('clearInput').addEventListener('click', function() {
-        document.getElementById('inputText').value = '';
-    });
-    document.getElementById('pasteInput').addEventListener('click', async function() {
-        try {
-            const text = await navigator.clipboard.readText();
-            document.getElementById('inputText').value = text;
-        } catch(err) {
-            console.error('Failed to read clipboard contents: ', err);
-             alert('ⵓⵔ ⵉⵍⵍⵉ ⵓⵖⴰⵍ ⵏ ⵓⵙⵍⵓⵖⵓ. ⵎⴽ ⵜⵓⴼⵉⴷ ⴰⵔⵎ ⴷⴰⵖ.');
-        }
-    });
-    document.getElementById('copyResult').addEventListener('click', async function() {
-        const resultText = document.getElementById('resultText').innerText;
-         try {
-            await navigator.clipboard.writeText(resultText);
-            alert('ⵉⵜⵜⵓⵙⵙⵏⵖⵍ ⵓⵙⵓⴼⵖ ⵖⵔ ⵓⵙⵍⵓⵖⵓ!');
-        } catch (err) {
-            console.error('Failed to copy text: ', err);
-            alert('ⵓⵔ ⵉⵍⵍⵉ ⵓⵙⵙⵏⵖⵍ ⵏ ⵓⴹⵕⵉⵚ. ⵎⴽ ⵜⵓⴼⵉⴷ ⴰⵔⵎ ⴷⴰⵖ.');
-        }
-    });
-    window.onclick = function(event) {
-        const modal = document.getElementById("myModal");
-            if (event.target == modal) {
-                modal.style.display = "none";
-            }
-    };
-    document.getElementById('exportResults').addEventListener('click', function() {
-        const resultText = document.getElementById('resultText').innerText;
-        const blob = new Blob([resultText], {type: "text/plain;charset=utf-8"});
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        a.href = url;
-        a.download = 'spell_check_results.txt';
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
-    });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amazigh Spell Checker</title>
     <style>
+        /* Reset default margin and padding */
+        body, html {
             margin: 0;
             padding: 0;
+            height: 100%; /* Make sure body and html take up the full height */
+            overflow: hidden; /* Prevent scrollbars on the outer page */
         }
+        /* Style the iframe to take up the entire viewport */
+        iframe {
             width: 100%;
             height: 100%;
+            border: none; /* Remove default iframe border */
+        }
+        /* Reset default margin and padding */
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%; /* Make sure body and html take up the full height */
+    overflow: hidden; /* Prevent scrollbars on the outer page */
+}
+/* Style the iframe to take up the entire viewport */
+iframe {
+    width: 100%;
+    height: 100%;
+    border: none; /* Remove default iframe border */
+}
+/* Style for the div containing the links */
+div {
+    text-align: center;  /* Center the links horizontally */
+    background-color: #f0f0f0; /* Light gray background (optional) */
+    padding: 10px;          /* Add some padding around the links */
+    position: relative;    /* Important for z-index to work */
+    z-index: 2;            /* Ensure the div is above the iframe */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow (optional) */
+}
+/* Style for the links themselves (optional) */
+div a {
+    margin: 0 10px;       /* Add some horizontal spacing between links */
+    color: #007bff;       /* Blue link color (adjust as desired) */
+    text-decoration: none; /* Remove underline (optional) */
+}
+div a:hover {
+    text-decoration: underline; /* Add underline on hover (optional) */
+}
     </style>
 </head>
 <body>
+  <div style="text-align: center;">
+    <a href="https://abdelhaqueidali.github.io/Amazigh-Spell-Checker/">Original webpage</a> <a href="https://github.com/abdelhaqueidali/Amazigh-Spell-Checker">Original Repository</a>
+</div>
+  <iframe src="https://abdelhaqueidali.github.io/Amazigh-Spell-Checker/" title="Amazigh Conjugator"></iframe>
 </body>
 </html>