Hugging Face's logo

Spaces:
TAMAZIGHT
/
Tifinagh_Converter
Running

App Files Community
Akseltinfat commited on
Commit
a112311
•
1 Parent(s): 1f5c327

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +141 -0
index.html CHANGED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <style>
7
+ /* Your existing styles remain unchanged */
8
+ img {
9
+ max-width: 60%;
10
+ height: auto;
11
+ }
12
+
13
+ </style>
14
+ </head>
15
+ <div class="row">
16
+ <div class="col-md-3">
17
+ <div id="header_tools"> <!-- Start outils -->
18
+
19
+ </div>
20
+ </div>
21
+ </div>
22
+
23
+ <style>
24
+ body {
25
+ font-family: arial, sans-serif;
26
+ background-color: #f7f7f7;
27
+ padding: 20px;
28
+ color: #333;
29
+ }
30
+ .frame {
31
+ border: 1px solid #01B276;
32
+ padding: 10px;
33
+ border-radius: 15px;
34
+ display: flex;
35
+ flex-direction: column;
36
+ align-items: center;
37
+ }
38
+ .converter-container {
39
+ background-color: #fff;
40
+ padding: 20px;
41
+ border-radius: 10px;
42
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
43
+ margin-bottom: 20px;
44
+ }
45
+ input, button, select {
46
+ padding: 10px;
47
+ margin: 10px 0;
48
+ border: 1px solid #ddd;
49
+ border-radius: 5px;
50
+ width: 100%;
51
+ }
52
+ button {
53
+ background-color: #333;
54
+ color: white;
55
+ cursor: pointer;
56
+ }
57
+ button:hover {
58
+ background-color: #01B276;
59
+ }
60
+ .output {
61
+ padding: 10px;
62
+ background-color: #ecf0f1;
63
+ border-radius: 5px;
64
+ min-height: 50px;
65
+ margin-top: 10px;
66
+ }
67
+ h1 {
68
+ color: #333;
69
+ }
70
+ .module {
71
+ background-color: #ecf0f1;
72
+ color: #333;
73
+ padding: 15px;
74
+ border-radius: 5px;
75
+ margin: 10px 0;
76
+ text-align: center;
77
+ img {
78
+ max-width: 30%;
79
+ height: auto;
80
+ }
81
+
82
+ }
83
+ small {
84
+ color: #333;
85
+ display: block;
86
+ margin-top: 1px;
87
+ * padding: 1px;
88
+
89
+ }
90
+ </style>
91
+ <body>
92
+ <div class="frame">
93
+ <div class="converter-container">
94
+ <center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioivwpdSZ9_KUkX8a0zCOTL6uR0n_Ogxc5JmDtETlBKrx07lCyF2M4iWlZ7qB8yBBOa7d7tLp69LdrpfFrkTZFOYw5HWCDdEgETEXRfJlTYYg-kdAkAqOrL78HmyE3Po132CKpUE8OEb2CPcKDuNejX8RsgZnJdWDT41acTJrkwybUkZ5EVeH0SHbmrVE/s3000/20240216_174918.webp" alt="Tifinagh Converter Image"></center>
95
+ <select id="languageSelect">
96
+ <option value="tifinagh">ⵜⵉⴼⵉⵏⴰⵖ</option>
97
+ <option value="latin">Latin</option>
98
+ </select>
99
+ <input type="text" id="inputText" placeholder="ⴰⵔⴰ ⵜⵉⵔⵔⴰ ⵖⵉⴷ">
100
+ <button onclick="convertText()">ⵙⵡⴰⵍⴰ</button>
101
+ <div class="output" id="outputText"></div>
102
+ </div>
103
+ <div class="module">
104
+ <small><p>ⵉⵜⵜⵓⵙⵖⵉⵡⵙ ⴳ &hearts; ⴷ:</p>
105
+ <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>
106
+ </div>
107
+ <script>
108
+ const languageSelect = document.getElementById('languageSelect');
109
+ const tifinaghToLatinMap = {
110
+ 'ⴰ':'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','ⵥ':'ẓ','ⵕ':'ṛ','ṭ':'ⵟ','ⵚ':'ṣ','ⵃ':'ḥ','ⵟ':'ṭ'
111
+
112
+ // ...ⵙⵎⴷ ⴰⴽⴽⵯ ⵉⵙⴽⴽⵉⵍⵏ ⵏ ⵜⴼⵉⵏⴰⵖ ⵖⵉⴷ.
113
+ };
114
+
115
+ const latinToTifinaghMap = {
116
+ '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':'ⵓ','ṭ':'ⵟ',
117
+ // ...add all Latin to Tifinagh mappings here.
118
+ };
119
+
120
+ function convertText() {
121
+ const inputText = document.getElementById('inputText').value;
122
+ const selectedLanguage = languageSelect.value;
123
+ let outputText = '';
124
+
125
+ if (selectedLanguage === 'tifinagh') {
126
+ // ⵙⵡⴰⵍⴰ ⵙⴳ ⵜⴼⵉⵏⴰⵖ ⵖⵔ ⵜⵍⴰⵜⵉⵏⵜ
127
+ for (let char of inputText) {
128
+ outputText += tifinaghToLatinMap[char] || char;
129
+ }
130
+ } else {
131
+ // Convert from Latin to Tifinagh
132
+ for (let char of inputText) {
133
+ outputText += latinToTifinaghMap[char] || char;
134
+ }
135
+ }
136
+
137
+ document.getElementById('outputText').textContent = outputText;
138
+ }
139
+ </script>
140
+ </body>
141
+ </html>