Hugging Face's logo

Spaces:
Tamazight
/
Tifinagh_Converter
Sleeping

App Files Community
Tifinagh_Converter
File size: 5,444 Bytes 
a112311
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Your existing styles remain unchanged */
    img {
      max-width: 60%;
      height: auto;
    }
    
  </style>
</head>
<div class="row">
    <div class="col-md-3">
        <div id="header_tools"> <!-- Start outils -->
 
        </div>
    </div>
</div>

  <style>
    body {
      font-family: arial, sans-serif;
      background-color: #f7f7f7;
      padding: 20px;
      color: #333;
    }
    .frame {
      border: 1px solid #01B276;
      padding: 10px;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .converter-container {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    input, button, select {
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      width: 100%;
    }
    button {
      background-color: #333;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background-color: #01B276;
    }
    .output {
      padding: 10px;
      background-color: #ecf0f1;
      border-radius: 5px;
      min-height: 50px;
      margin-top: 10px;
    }
    h1 {
      color: #333;
    }
    .module {
      background-color: #ecf0f1;
      color: #333;
      padding: 15px;
      border-radius: 5px;
      margin: 10px 0;
      text-align: center;
      img {
      max-width: 30%;
      height: auto;
    }
        
    }
    small {
      color: #333;
      display: block;
      margin-top: 1px;
     * padding: 1px;
      
    }
  </style>
<body>
<div class="frame">
  <div class="converter-container">
    <center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioivwpdSZ9_KUkX8a0zCOTL6uR0n_Ogxc5JmDtETlBKrx07lCyF2M4iWlZ7qB8yBBOa7d7tLp69LdrpfFrkTZFOYw5HWCDdEgETEXRfJlTYYg-kdAkAqOrL78HmyE3Po132CKpUE8OEb2CPcKDuNejX8RsgZnJdWDT41acTJrkwybUkZ5EVeH0SHbmrVE/s3000/20240216_174918.webp" alt="Tifinagh Converter Image"></center>
    <select id="languageSelect">
      <option value="tifinagh">ⵜⵉⴼⵉⵏⴰⵖ</option>
      <option value="latin">Latin</option>
    </select>
    <input type="text" id="inputText" placeholder="ⴰⵔⴰ ⵜⵉⵔⵔⴰ ⵖⵉⴷ">
    <button onclick="convertText()">ⵙⵡⴰⵍⴰ</button>
    <div class="output" id="outputText"></div>
  </div>
<div class="module">
  <small><p>ⵉⵜⵜⵓⵙⵖⵉⵡⵙ ⴳ &hearts; ⴷ:</p>
    <a href="https://www.fb.me/Aksel.tinfat"> <center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_SeXFQH5E1goHDY-OB4CQcuKdKF3ps0Fuf6ZH3oXwOIprqiN_z7qx4L8of0c44mt4DSy_sWjw8Va5spPIrb7kIjQZV0rUJpPYYTRJmEn-sdofio8PaJT8NwjPfYcKQwfeg88H3KnmGmrWVnuhBOElJAac9Rn3VQxurQJZ_BxM-tFkekCKxZETfHYBk1Y/s3000/20240208_163131.png" alt="Aksel Tinfat "></center></a>
</div>
<script>
  const languageSelect = document.getElementById('languageSelect');
  const tifinaghToLatinMap = {
 'ⴰ':'A','ⴱ':'B','ⵛ':'C','ⴷ':'D','ⴻ':'E','ⴼ':'F','ⴳ':'G','ⵀ':'H','ⵉ':'I','ⵊ':'J','ⴽ':'K','ⵍ':'L','ⵎ':'M','ⵏ':'N','ⵓ':'u','ⵒ':'P','ⵇ':'Q','ⵔ':'R','ⵙ':'S','ⵜ':'T','ⴼ':'V','ⵡ':'W','ⵅ':'X','ⵢ':'Y','ⵣ':'Z','ⴽⵯ':'kʷ','ⵯ':'ʷ','ⵇⵯ':'Qʷ','ⵖ':'ɣ','ⵄ':'ɛ','ⵓ':'u','ⵥ':'Z','ⵥ':'ẓ','ⴰ':'a','ⴱ':'b','ⵛ':'c','ⴷ':'d','ⴻ':'e','ⴼ':'f','ⴳ':'g','ⵀ':'h','ⵉ':'i','ⵊ':'j','ⴽ':'k','ⵍ':'l','ⵎ':'m','ⵏ':'n','ⵓ':'o','ⵒ':'p','ⵇ':'q','ⵔ':'r','ⵙ':'s','ⵜ':'t','ⵡ':'w','ⵅ':'x','ⵢ':'y','ⵣ':'z','ⴽⵯ':'kʷ','ⵯ':'ʷ','ⵇⵯ':'qʷ','ⵖ':'ɣ','ⵄ':'ɛ','ⵓ':'u','ⵥ':'z','ⵥ':'ẓ','ⵕ':'ṛ','ṭ':'ⵟ','ⵚ':'ṣ','ⵃ':'ḥ','ⵟ':'ṭ'

    // ...ⵙⵎⴷ ⴰⴽⴽⵯ ⵉⵙⴽⴽⵉⵍⵏ ⵏ ⵜⴼⵉⵏⴰⵖ ⵖⵉⴷ.
  };

  const latinToTifinaghMap = {
 'A':'ⴰ','B':'ⴱ','C':'ⵛ','D':'ⴷ','E':'ⴻ','F':'ⴼ','G':'ⴳ','H':'ⵀ','I':'ⵉ','J':'ⵊ','K':'ⴽ','L':'ⵍ','M':'ⵎ','N':'ⵏ','U':'ⵓ','P':'ⵒ','Q':'ⵇ','R':'ⵔ','S':'ⵙ','T':'ⵜ','V':'ⴼ','W':'ⵡ','X':'ⵅ','Y':'ⵢ','Z':'ⵣ','kʷ':'ⴽⵯ','ʷ':'ⵯ','Qʷ':'ⵇⵯ','ɣ':'ⵖ','ɛ':'ⵄ','ẓ':'ⵥ','a':'ⴰ','b':'ⴱ','c':'ⵛ','d':'ⴷ','e':'ⴻ','f':'ⴼ','g':'ⴳ','h':'ⵀ','i':'ⵉ','j':'ⵊ','k':'ⴽ','l':'ⵍ','m':'ⵎ','n':'ⵏ','p':'ⵒ','q':'ⵇ','r':'ⵔ','s':'ⵙ','t':'ⵜ','v':'ⴼ','w':'ⵡ','x':'ⵅ','y':'ⵢ','z':'ⵣ','kʷ':'ⴽⵯ','ʷ':'ⵯ','qʷ':'ⵇⵯ','ɣ':'ⵖ','ɛ':'ⵄ','o':'ⵄ','z':'ⵣ','ẓ':'ⵥ','ṛ':'ⵕ','ṣ':'ⵚ','ḥ':'ⵃ','Ẓ':'ⵥ','Ṛ':'ⵕ','Ṣ':'ⵚ','Ḥ':'ⵃ','Ṭ':'ⵟ','u':'ⵓ','ṭ':'ⵟ',
    // ...add all Latin to Tifinagh mappings here.
  };

  function convertText() {
    const inputText = document.getElementById('inputText').value;
    const selectedLanguage = languageSelect.value;
    let outputText = '';

    if (selectedLanguage === 'tifinagh') {
      // ⵙⵡⴰⵍⴰ ⵙⴳ ⵜⴼⵉⵏⴰⵖ ⵖⵔ ⵜⵍⴰⵜⵉⵏⵜ
      for (let char of inputText) {
        outputText += tifinaghToLatinMap[char] || char;
      }
    } else {
      // Convert from Latin to Tifinagh
      for (let char of inputText) {
        outputText += latinToTifinaghMap[char] || char;
      }
    }

    document.getElementById('outputText').textContent = outputText;
  }
</script>
</body>
</html>