Spaces:

abdelhaqueidali
/

Amazigh-Script-Converter

Running

App Files Files Community

abdelhaqueidali commited on 16 days ago

Commit

ec4b059

verified ·

1 Parent(s): e8acdac

Update index.html

Browse files

Files changed (1) hide show

index.html +50 -365

index.html CHANGED Viewed

@@ -3,378 +3,63 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AmsnflSkkil</title>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Tifinagh&display=swap" rel="stylesheet">
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f0f0f0;
         }
-        .container {
-            max-width: 800px;
-            margin: 40px auto;
-            padding: 20px;
-            background-color: #fff;
-            border: 1px solid #ddd;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        .converter {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        textarea {
-            width: 95%;
-            height: 100px;
-            padding: 10px;
-            font-size: 16px;
-            margin-bottom: 20px;
-            font-family: 'Noto Sans Tifinagh', sans-serif;
-        }
-        button {
-            width: 49%;
-            padding: 10px;
-            font-size: 16px;
-            background-color: #4CAF50;
-            color: #fff;
-            border: none;
-            cursor: pointer;
-            margin-bottom: 20px;
-        }
-        button:hover {
-            background-color: #3e8e41;
-        }
-        .buttons-container {
-            display: flex;
-            justify-content: space-between;
             width: 100%;
-            margin-bottom: 20px;
-        }
-        /* Toggle Switch */
-        .toggle-container {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 20px;
-        }
-        .switch {
-            position: relative;
-            display: inline-block;
-            width: 60px;
-            height: 34px;
-            margin: 0 10px;
-        }
-        .switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-        .slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #2196F3;
-            -webkit-transition: .4s;
-            transition: .4s;
-        }
-        .slider:before {
-            position: absolute;
-            content: "";
-            height: 26px;
-            width: 26px;
-            left: 4px;
-            bottom: 4px;
-            background-color: white;
-            -webkit-transition: .4s;
-            transition: .4s;
-        }
-        input:checked + .slider {
-            background-color: #2196F3;
-        }
-        input:focus + .slider {
-            box-shadow: 0 0 1px #2196F3;
-        }
-        input:checked + .slider:before {
-            -webkit-transform: translateX(26px);
-            -ms-transform: translateX(26px);
-            transform: translateX(26px);
-        }
-        /* Rounded sliders */
-        .slider.round {
-            border-radius: 34px;
-        }
-        .slider.round:before {
-            border-radius: 50%;
-        }
-        /* Labels for the toggle */
-        .toggle-label {
-            font-size: 16px;
-        }
-        /* Script Labels */
-        .script-label {
-            display: inline-block;
-            padding: 5px 15px;
-            margin-bottom: 5px;
-            font-weight: bold;
-            background-color: #e9e9e9;
-            border-radius: 4px;
-            border: 1px solid #ccc;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        }
-        .script-selection {
-            margin-bottom: 20px;
-            text-align: center;
-        }
-        /* E-removal option */
-        .option-container {
-            display: flex;
-            align-items: center;
-            margin-bottom: 15px;
-        }
-        .option-checkbox {
-            margin-right: 10px;
-        }
-        .option-label {
-            font-size: 14px;
-        }
-        /* Hide e-removal option when converting from Tifinagh */
-        .hidden {
-            display: none;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>AmsnflSkkil</h1>
-        <div class="converter">
-            <div class="script-label" id="source-script-label">Tifinagh</div>
-            <textarea id="input" placeholder="Enter text to convert"></textarea>
-            <div class="buttons-container">
-                <button id="paste-btn">Paste</button>
-                <button id="copy-btn">Copy</button>
-            </div>
-            <div class="script-selection">
-                <div class="toggle-container">
-                    <span class="toggle-label">Tifinagh</span>
-                    <label class="switch">
-                        <input type="checkbox" id="script-toggle">
-                        <span class="slider round"></span>
-                    </label>
-                    <span class="toggle-label">Latin</span>
-                </div>
-            </div>
-            <!-- E-removal option (initially hidden) -->
-            <div class="option-container hidden" id="e-removal-option">
-                <input type="checkbox" id="remove-e-checkbox" class="option-checkbox" checked>
-                <label for="remove-e-checkbox" class="option-label">
-                    Remove letter "e" (except between identical letters)
-                </label>
-            </div>
-            <div class="script-label" id="target-script-label">Latin</div>
-            <textarea id="output" placeholder="Converted text" readonly></textarea>
-        </div>
-    </div>
-    <script>
-        // Initialize script labels
-        let sourceScript = 'tifinagh';
-        let targetScript = 'latin';
-        // Update the labels based on toggle state
-        function updateScriptLabels() {
-            document.getElementById('source-script-label').textContent = sourceScript.charAt(0).toUpperCase() + sourceScript.slice(1);
-            document.getElementById('target-script-label').textContent = targetScript.charAt(0).toUpperCase() + targetScript.slice(1);
-            // Show or hide e-removal option based on conversion direction
-            const eRemovalOption = document.getElementById('e-removal-option');
-            if (sourceScript === 'latin' && targetScript === 'tifinagh') {
-                eRemovalOption.classList.remove('hidden');
-            } else {
-                eRemovalOption.classList.add('hidden');
-            }
-        }
-        // Toggle event handler
-        document.getElementById('script-toggle').addEventListener('change', function() {
-            if (this.checked) {
-                sourceScript = 'latin';
-                targetScript = 'tifinagh';
-            } else {
-                sourceScript = 'tifinagh';
-                targetScript = 'latin';
-            }
-            updateScriptLabels();
-            // Trigger conversion with new script settings
-            convertInput();
-        });
-        // E-removal checkbox change event handler - trigger conversion when changed
-        document.getElementById('remove-e-checkbox').addEventListener('change', function() {
-            convertInput();
-        });
-        function convertScript(text, fromScript, toScript) {
-            const tifinaghToLatinMap = {
-                'ⴰ': 'a', 'ⴱ': 'b', 'ⴳ': 'g', 'ⴷ': 'd', 'ⴹ': 'ḍ', 'ⴻ': 'e', 'ⴼ': 'f', 'ⴽ': 'k',
-                'ⵀ': 'h', 'ⵃ': 'ḥ', 'ⵄ': 'ɛ', 'ⵅ': 'x', 'ⵇ': 'q', 'ⵉ': 'i', 'ⵊ': 'j', 'ⵍ': 'l',
-                'ⵎ': 'm', 'ⵏ': 'n', 'ⵓ': 'u', 'ⵔ': 'r', 'ⵕ': 'ṛ', 'ⵖ': 'ɣ', 'ⵙ': 's', 'ⵚ': 'ṣ',
-                'ⵛ': 'c', 'ⵜ': 't', 'ⵟ': 'ṭ', 'ⵡ': 'w', 'ⵢ': 'y', 'ⵣ': 'z', 'ⵥ': 'ẓ', 'ⵯ': 'ʷ',
-                // Custom Tifinagh to Latin mappings
-                'ⴲ': 'ḇ', 'ⴴ': 'ḡ', 'ⴵ': 'ǧ', 'ⴶ': 'ǧ', 'ⴸ': 'ḏ', 'ⴺ': 'ḏ̣', 'ⴾ': 'k',
-                'ⴿ': 'ḵ', 'ⵁ': 'h', 'ⵂ': 'h', 'ⵆ': 'x', 'ⵈ': 'q', 'ⵋ': 'j', 'ⵌ': 'j',
-                'ⵐ': 'gn', 'ⵑ': 'ng', 'ⵒ': 'p', 'ⵗ': 'ɣ', 'ⵘ': 'ɣ', 'ⵝ': 'ṯ', 'ⵞ': 'č',
-                'ⵠ': 'v', 'ⵤ': 'z', 'ⵦ': 'é', 'ⵧ': 'o'
-            };
-            const latinToTifinaghMap = {
-                'a': 'ⴰ', 'b': 'ⴱ', 'g': 'ⴳ', 'd': 'ⴷ', 'ḍ': 'ⴹ', 'e': 'ⴻ', 'f': 'ⴼ', 'k': 'ⴽ',
-                'h': 'ⵀ', 'ḥ': 'ⵃ', 'ɛ': 'ⵄ', 'x': 'ⵅ', 'q': 'ⵇ', 'i': 'ⵉ', 'j': 'ⵊ', 'l': 'ⵍ',
-                'm': 'ⵎ', 'n': 'ⵏ', 'u': 'ⵓ', 'r': 'ⵔ', 'ṛ': 'ⵕ', 'ɣ': 'ⵖ', 's': 'ⵙ', 'ṣ': 'ⵚ',
-                'c': 'ⵛ', 't': 'ⵜ', 'ṭ': 'ⵟ', 'w': 'ⵡ', 'y': 'ⵢ', 'z': 'ⵣ', 'ẓ': 'ⵥ', 'ʷ': 'ⵯ',
-                // Custom Latin to Tifinagh mappings
-                'ḇ': 'ⴲ', 'ḡ': 'ⴴ', 'ǧ': 'ⴵ', 'ḏ': 'ⴸ', 'ḏ̣': 'ⴺ',
-                'p': 'ⵒ', 'ṯ': 'ⵝ', 'č': 'ⵞ', 'v': 'ⵠ', 'é': 'ⴻ', 'o': 'ⵓ', 'ř': 'ⵍ', 'ε': 'ⵄ', 'γ': 'ⵖ', 'ᵒ': 'ⵯ'
-            };
-            let result = '';
-            if (fromScript === 'tifinagh' && toScript === 'latin') {
-                for (let i = 0; i < text.length; i++) {
-                    result += tifinaghToLatinMap[text[i]] || text[i];
-                }
-            } else if (fromScript === 'latin' && toScript === 'tifinagh') {
-                // Check if e-removal is enabled
-                const removeE = document.getElementById('remove-e-checkbox').checked;
-                if (removeE) {
-                    // Process text for e-removal before conversion
-                    text = removeLetterE(text.toLowerCase());
-                } else {
-                    text = text.toLowerCase();
-                }
-                for (let i = 0; i < text.length; i++) {
-                    // Handling custom multi-character mappings like 'ng'
-                    if (i + 1 < text.length && latinToTifinaghMap[text[i] + text[i + 1]]) {
-                        result += latinToTifinaghMap[text[i] + text[i + 1]];
-                        i++; // Skip the next character as it's part of a custom mapping
-                    } else {
-                        result += latinToTifinaghMap[text[i]] || text[i];
-                    }
-                }
-            } else {
-                result = 'Invalid script conversion';
-            }
-            return result;
-        }
-        // Function to remove letter 'e' according to specified rules
-        function removeLetterE(text) {
-            if (!text) return '';
-            // Split text into words
-            const words = text.split(/\s+/);
-            // Process each word
-            const processedWords = words.map(word => {
-                if (word.length <= 1) return word;
-                let result = '';
-                for (let i = 0; i < word.length; i++) {
-                    // Skip 'e' at the start of the word
-                    if (i === 0 && word[i] === 'e') {
-                        continue;
-                    }
-                    // Skip 'e' at the end of the word
-                    if (i === word.length - 1 && word[i] === 'e') {
-                        continue;
-                    }
-                    // Keep 'e' between identical letters
-                    if (word[i] === 'e' && i > 0 && i < word.length - 1) {
-                        if (word[i-1] === word[i+1]) {
-                            result += word[i];
-                        }
-                        // Otherwise skip 'e' between different letters
-                    } else {
-                        result += word[i];
-                    }
-                }
-                return result;
-            });
-            // Join the processed words back
-            return processedWords.join(' ');
-        }
-        // Live conversion function - called on input changes
-        function convertInput() {
-            const inputText = document.getElementById('input').value;
-            const outputText = convertScript(inputText, sourceScript, targetScript);
-            document.getElementById('output').value = outputText;
-        }
-        // Add input event listener for live conversion
-        document.getElementById('input').addEventListener('input', convertInput);
-        document.getElementById('paste-btn').addEventListener('click', function() {
-            navigator.clipboard.readText()
-                .then(text => {
-                    document.getElementById('input').value = text;
-                    // Trigger conversion after pasting
-                    convertInput();
-                })
-                .catch(err => {
-                    console.error('Failed to read clipboard contents: ', err);
-                });
-        });
-        document.getElementById('copy-btn').addEventListener('click', function() {
-            const outputText = document.getElementById('output').value;
-            navigator.clipboard.writeText(outputText)
-                .then(() => {
-                    console.log('Text copied to clipboard');
-                })
-                .catch(err => {
-                    console.error('Failed to copy text: ', err);
-                });
-        });
-        // Initialize the labels on page load
-        updateScriptLabels();
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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-Scripts-Converter/">Original webpage</a> <a href="https://github.com/abdelhaqueidali/Amazigh-Scripts-Converter">Original Repository</a>
+</div>
+  <iframe src="https://abdelhaqueidali.github.io/Amazigh-Scripts-Converter/"></iframe>
 </body>
 </html>