Hugging Face's logo

Spaces:
dioarafl
/
Googletrans
Runtime error

App Files Community
dioarafi commited on
Commit
cd89ff1
•
1 Parent(s): 09f7cf6

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +551 -0
templates/index.html ADDED
@@ -0,0 +1,551 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ID">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="theme-color" content="#020617">
7
+ <title>Home</title>
8
+ <meta name="title" content="">
9
+ <meta name="description" content="">
10
+ <meta name="keywords" content="">
11
+ <meta name="og:title" content="">
12
+ <meta name="og:description" content="">
13
+ <meta name="twitter:title" content="">
14
+ <meta name="twitter:description" content="">
15
+ <meta name="og:image" content="">
16
+ <meta name="twitter:image" content="">
17
+ <meta property="og:type" content="website">
18
+ <meta content="summary_large_image" name="twitter:card">
19
+
20
+ <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
21
+ <script src="https://cdn.tailwindcss.com"></script>
22
+ </head>
23
+ <style type="text/css">
24
+ .copied{
25
+ background: #ff555f;
26
+ }
27
+ /* spinner */
28
+ .spinner {
29
+ position: fixed;
30
+ top: 0;
31
+ left: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ display: flex;
35
+ justify-content: center;
36
+ align-items: center;
37
+ background-color: rgba(0, 0, 0, 0.8);
38
+ z-index: 9999;
39
+ transition: opacity 0.5s ease-out;
40
+ }
41
+ .hide-spinner {
42
+ opacity: 0;
43
+ pointer-events: none;
44
+ }
45
+ #main-content {
46
+ opacity: 0;
47
+ transition: opacity 0.5s ease-in;
48
+ }
49
+ .lds-ripple {
50
+ display: inline-block;
51
+ position: relative;
52
+ width: 80px;
53
+ height: 80px;
54
+ }
55
+ .lds-ripple div {
56
+ position: absolute;
57
+ border: 4px solid white;
58
+ opacity: 1;
59
+ border-radius: 50%;
60
+ animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
61
+ }
62
+ .lds-ripple div:nth-child(2) {
63
+ animation-delay: -0.5s;
64
+ }
65
+ @keyframes lds-ripple {
66
+ 0% {
67
+ top: 36px;
68
+ left: 36px;
69
+ width: 0;
70
+ height: 0;
71
+ opacity: 0;
72
+ }
73
+ 4.9% {
74
+ top: 36px;
75
+ left: 36px;
76
+ width: 0;
77
+ height: 0;
78
+ opacity: 0;
79
+ }
80
+ 5% {
81
+ top: 36px;
82
+ left: 36px;
83
+ width: 0;
84
+ height: 0;
85
+ opacity: 1;
86
+ }
87
+ 100% {
88
+ top: 0px;
89
+ left: 0px;
90
+ width: 72px;
91
+ height: 72px;
92
+ opacity: 0;
93
+ }
94
+ }
95
+ .sectionSize {
96
+ width: 100%;
97
+ display: flex;
98
+ flex-direction: column;
99
+ align-items: center;
100
+ padding-left: 1rem;
101
+ padding-right: 1rem;
102
+ padding-top: 3.5rem;
103
+ padding-bottom: 1rem;
104
+ }
105
+ .secondaryTitle {
106
+ background-position: left bottom;
107
+ background-repeat: no-repeat;
108
+ font-family: PT Serif, serif;
109
+ font-size: 1.875rem;
110
+ line-height: 2.25rem;
111
+ margin-bottom: 2rem;
112
+ padding-left: 4rem;
113
+ padding-right: 4rem;
114
+ padding-bottom: 2rem;
115
+ }
116
+ .waves {
117
+ background: ;
118
+ position: relative;
119
+ width: 100%;
120
+ height: 15vh;
121
+ margin-bottom: -7px;
122
+ /*Fix for safari gap*/
123
+ min-height: 90px;
124
+ max-height: 70px;
125
+ }
126
+ /* Animation */
127
+ .parallax>use {
128
+ animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
129
+ }
130
+ .parallax>use:nth-child(1) {
131
+ animation-delay: -2s;
132
+ animation-duration: 7s;
133
+ }
134
+ .parallax>use:nth-child(2) {
135
+ animation-delay: -3s;
136
+ animation-duration: 10s;
137
+ }
138
+ .parallax>use:nth-child(3) {
139
+ animation-delay: -4s;
140
+ animation-duration: 13s;
141
+ }
142
+ .parallax>use:nth-child(4) {
143
+ animation-delay: -5s;
144
+ animation-duration: 20s;
145
+ }
146
+ @keyframes move-forever {
147
+ 0% {
148
+ transform: translate3d(-90px, 0, 0);
149
+ }
150
+ 100% {
151
+ transform: translate3d(85px, 0, 0);
152
+ }
153
+ }
154
+ </style>
155
+ <body>
156
+
157
+
158
+ <!-- Input transalete -->
159
+ <section class="w-full md:w-[60%]" Style="margin: 2rem auto;">
160
+ <div>
161
+ <div class="flex w-[90%] ml-4 justify-between">
162
+ <div class="mb-4 flex">
163
+ <button onclick="openLanguageModal('source')" class="bg-[#F3F4F6] rounded-md font-semibold cursor-pointer p-2 text-[#5597ff]">
164
+ <span id="selected_source_language">Deteksi bahasa</span>
165
+ </button>
166
+ <input type="hidden" id="source_lang" name="source_lang">
167
+ </div>
168
+ <!-- Language Modal -->
169
+ <div class="flex absolute rounded-md z-10 mt-10 bg-white border text-black p-4 w-[50%] h-[60%] md:w-[20%] md:mr-[20%]" id="sourceLangModal" style="display: none; left: 1rem; overflow-y: scroll;">
170
+ <!-- Search -->
171
+ <input type="text" id="searchInput1" class="p-2 w-full mb-5 bg-[#F3F4F6] rounded-md" oninput="searchLanguages('searchInput1', 'sourceLangModal')" placeholder="Search Language...">
172
+ <!-- language list -->
173
+ <ul>
174
+ <li data-language="English" onclick="selectLanguage('en', 'source')">English</li>
175
+ <li data-language="Indonesia" onclick="selectLanguage('id', 'source')">Indonesian</li>
176
+ <li data-language="Jawa" onclick="selectLanguage('jv', 'source')">Jawa</li>
177
+ <li data-language="Sunda" onclick="selectLanguage('su', 'source')">Sunda</li>
178
+ <li data-language="Jepang" onclick="selectLanguage('ja', 'source')">Jepang</li>
179
+ <li data-language="Islan" onclick="selectLanguage('is', 'source')">Islan</li>
180
+ <li data-language="Italia" onclick="selectLanguage('it', 'source')">Italia</li>
181
+ <li data-language="Jerman" onclick="selectLanguage('de', 'source')">Jerman</li>
182
+ <li data-language="Kannada" onclick="selectLanguage('kn', 'source')">Kannada</li>
183
+ <li data-language="Korea" onclick="selectLanguage('ko', 'source')">Korea</li>
184
+ <li data-language="Korsika" onclick="selectLanguage('co', 'source')">Korsika</li>
185
+ <li data-language="Kreol Haiti" onclick="selectLanguage('ht', 'source')">Kreol Haiti</li>
186
+ <li data-language="Krio" onclick="selectLanguage('kri', 'source')">Krio</li>
187
+ <li data-language="Kroat" onclick="selectLanguage('hr', 'source')">Kroat</li>
188
+ <li data-language="Kurdi (Kurmanji)" onclick="selectLanguage('ku', 'source')">Kurdi (Kurmanji)</li>
189
+ <li data-language="Kurdi (Sorani)" onclick="selectLanguage('ckb', 'source')">Kurdi (Sorani)</li>
190
+ <li data-language="Laos" onclick="selectLanguage('lo', 'source')">Laos</li>
191
+ <li data-language="Latin" onclick="selectLanguage('la', 'source')">Latin</li>
192
+ <li data-language="Latvia" onclick="selectLanguage('lv', 'source')">Latvia</li>
193
+ <li data-language="Lingala" onclick="selectLanguage('ln', 'source')">Lingala</li>
194
+ <li data-language="Lituania" onclick="selectLanguage('lt', 'source')">Lituania</li>
195
+ <li data-language="Luganda" onclick="selectLanguage('lg', 'source')">Luganda</li>
196
+ <li data-language="Luksemburg" onclick="selectLanguage('lb', 'source')">Luksemburg</li>
197
+ <li data-language="Magyar" onclick="selectLanguage('hu', 'source')">Magyar</li>
198
+ <li data-language="Maithili" onclick="selectLanguage('mai', 'source')">Maithili</li>
199
+ <li data-language="Makedonia" onclick="selectLanguage('mk', 'source')">Makedonia</li>
200
+ <li data-language="Malagasi" onclick="selectLanguage('mg', 'source')">Malagasi</li>
201
+ <li data-language="Malayalam" onclick="selectLanguage('ml', 'source')">Malayalam</li>
202
+ <li data-language="Malta" onclick="selectLanguage('mt', 'source')">Malta</li>
203
+ <li data-language="Maori" onclick="selectLanguage('mi', 'source')">Maori</li>
204
+ <li data-language="Marathi" onclick="selectLanguage('mr', 'source')">Marathi</li>
205
+ <li data-language="Meiteilon (Manipuri)" onclick="selectLanguage('mni', 'source')">Meiteilon (Manipuri)</li>
206
+ <li data-language="Melayu" onclick="selectLanguage('ms', 'source')">Melayu</li>
207
+ <li data-language="Mizo" onclick="selectLanguage('lus', 'source')">Mizo</li>
208
+ <li data-language="Mongol" onclick="selectLanguage('mn', 'source')">Mongol</li>
209
+ <li data-language="Nepal" onclick="selectLanguage('ne', 'source')">Nepal</li>
210
+ <li data-language="Norsk" onclick="selectLanguage('no', 'source')">Norsk</li>
211
+ <li data-language="Odia (Oriya)" onclick="selectLanguage('or', 'source')">Odia (Oriya)</li>
212
+ <li data-language="Oromo" onclick="selectLanguage('om', 'source')">Oromo</li>
213
+ <li data-language="Pashto" onclick="selectLanguage('ps', 'source')">Pashto</li>
214
+ <li data-language="Polandia" onclick="selectLanguage('pl', 'source')">Polandia</li>
215
+ <li data-language="Portugis" onclick="selectLanguage('pt', 'source')">Portugis</li>
216
+ <li data-language="Prancis" onclick="selectLanguage('fr', 'source')">Prancis</li>
217
+ <li data-language="Punjabi" onclick="selectLanguage('pa', 'source')">Punjabi</li>
218
+ <li data-language="Quechua" onclick="selectLanguage('qu', 'source')">Quechua</li>
219
+ <li data-language="Rumania" onclick="selectLanguage('ro', 'source')">Rumania</li>
220
+ <li data-language="Rusia" onclick="selectLanguage('ru', 'source')">Rusia</li>
221
+ <li data-language="Samoa" onclick="selectLanguage('sm ', 'source')">Samoa</li>
222
+ <li data-language="Sanskerta" onclick="selectLanguage('sa', 'source')">Sanskerta</li>
223
+ <li data-language="Sepedi" onclick="selectLanguage('nso', 'source')">Sepedi</li>
224
+ <li data-language="Serb" onclick="selectLanguage('sr', 'source')">Serb</li>
225
+ <li data-language="Sesotho" onclick="selectLanguage('st', 'source')">Sesotho</li>
226
+ <li data-language="Shona" onclick="selectLanguage('sn', 'source')">Shona</li>
227
+ <li data-language="Sindhi" onclick="selectLanguage('sd', 'source')">Sindhi</li>
228
+ <li data-language="Sinhala" onclick="selectLanguage('si', 'source')">Sinhala</li>
229
+ <li data-language="Slovakia" onclick="selectLanguage('sk', 'source')">Slovakia</li>
230
+ <li data-language="Slovenia" onclick="selectLanguage('sl', 'source')">Slovenia</li>
231
+ <li data-language="Somali" onclick="selectLanguage('so', 'source')">Somali</li>
232
+ <li data-language="Spanyol" onclick="selectLanguage('es', 'source')">Spanyol</li>
233
+ <li data-language="Swahili" onclick="selectLanguage('sw', 'source')">Swahili</li>
234
+ <li data-language="Swensk" onclick="selectLanguage('sv', 'source')">Swensk</li>
235
+ <li data-language="Tagalog" onclick="selectLanguage('tl', 'source')">Tagalog</li>
236
+ <li data-language="Tajik" onclick="selectLanguage('tg', 'source')">Tajik</li>
237
+ <li data-language="Tamil" onclick="selectLanguage('ta', 'source')">Tamil</li>
238
+ <li data-language="Tatar" onclick="selectLanguage('tt', 'source')">Tatar</li>
239
+ <li data-language="Telugu" onclick="selectLanguage('te', 'source')">Telugu</li>
240
+ <li data-language="Thai" onclick="selectLanguage('th', 'source')">Thai</li>
241
+ <li data-language="Tigrinya" onclick="selectLanguage('ti', 'source')">Tigrinya</li>
242
+ <li data-language="Tsonga" onclick="selectLanguage('ts', 'source')">Tsonga</li>
243
+ <li data-language="Turki" onclick="selectLanguage('tr', 'source')">Turki</li>
244
+ <li data-language="Turkmen" onclick="selectLanguage('tk', 'source')">Turkmen</li>
245
+ <li data-language="Twi" onclick="selectLanguage('tw', 'source')">Twi</li>
246
+ <li data-language="Ukraina" onclick="selectLanguage('uk', 'source')">Ukraina</li>
247
+ <li data-language="Urdu" onclick="selectLanguage('ur', 'source')">Urdu</li>
248
+ <li data-language="Uyghur" onclick="selectLanguage('ug', 'source')">Uyghur</li>
249
+ <li data-language="Uzbek" onclick="selectLanguage('uz', 'source')">Uzbek</li>
250
+ <li data-language="Vietnam" onclick="selectLanguage('vi', 'source')">Vietnam</li>
251
+ <li data-language="Wales" onclick="selectLanguage('cy', 'source')">Wales</li>
252
+ <li data-language="Xhosa" onclick="selectLanguage('xh', 'source')">Xhosa</li>
253
+ <li data-language="Yiddi" onclick="selectLanguage('yi', 'source')">Yiddi</li>
254
+ <li data-language="Yoruba" onclick="selectLanguage('yo', 'source')">Yoruba</li>
255
+ <li data-language="Yunani" onclick="selectLanguage('el', 'source')">Yunani</li>
256
+ <li data-language="Zulu" onclick="selectLanguage('zu', 'source')">Zulu</li>
257
+ <li data-language="Afrikans" onclick="selectLanguage('af', 'source')">Afrikans</li>
258
+ <li data-language="yang" onclick="selectLanguage('sq', 'source')">Albania</li>
259
+ <li data-language="Amhara" onclick="selectLanguage('am', 'source')">Amhara</li>
260
+ <li data-language="Arab" onclick="selectLanguage('ar', 'source')">Arab</li>
261
+ <li data-language="Armenia" onclick="selectLanguage('hy', 'source')">Armenia</li>
262
+ <li data-language="Assam" onclick="selectLanguage('as', 'source')">Assam</li>
263
+ <li data-language="Aymara" onclick="selectLanguage('ay', 'source')">Aymara</li>
264
+ <li data-language="Azerbaijan" onclick="selectLanguage('az', 'source')">Azerbaijan</li>
265
+ <li data-language="Bambara" onclick="selectLanguage('bm', 'source')">Bambara</li>
266
+ <li data-language="Basque" onclick="selectLanguage('eu', 'source')">Basque</li>
267
+ <li data-language="Belanda" onclick="selectLanguage('nl', 'source')">Belanda</li>
268
+ <li data-language="Belarussia" onclick="selectLanguage('be', 'source')">Belarussia</li>
269
+ <li data-language="Bengali" onclick="selectLanguage('bn', 'source')">Bengali</li>
270
+ <li data-language="Bhojpuri" onclick="selectLanguage('bho', 'source')">Bhojpuri</li>
271
+ <li data-language="Bosnia" onclick="selectLanguage('bs', 'source')">Bosnia</li>
272
+ <li data-language="Bulgaria" onclick="selectLanguage('bg', 'source')">Bulgaria</li>
273
+ <li data-language="Burma" onclick="selectLanguage('my', 'source')">Burma</li>
274
+ <li data-language="Cebuano" onclick="selectLanguage('ceb', 'source')">Cebuano</li>
275
+ <li data-language="Ceko" onclick="selectLanguage('cs', 'source')">Ceko</li>
276
+ <li data-language="Chichewa" onclick="selectLanguage('ny', 'source')">Chichewa</li>
277
+ <li data-language="China (Aks. Sederhana)" onclick="selectLanguage('zh-CN', 'source')">China (Aks. Sederhana)</li>
278
+ <li data-language="China (Aks. Tradisional)" onclick="selectLanguage('zh-TW', 'source')">China (Aks. Tradisional)</li>
279
+ <li data-language="Denmark" onclick="selectLanguage('da', 'source')">Denmark</li>
280
+ <li data-language="Divehi" onclick="selectLanguage('dv', 'source')">Divehi</li>
281
+ <li data-language="Dogri" onclick="selectLanguage('doi', 'source')">Dogri</li>
282
+ <li data-language="Esperanto" onclick="selectLanguage('eo', 'source')">Esperanto</li>
283
+ <li data-language="Estonia" onclick="selectLanguage('et', 'source')">Estonia</li>
284
+ <li data-language="Ewe" onclick="selectLanguage('ee', 'source')">Ewe</li>
285
+ <li data-language="Farsi" onclick="selectLanguage('fa', 'source')">Farsi</li>
286
+ <li data-language="Finlandia" onclick="selectLanguage('fi', 'source')">Finlandia</li>
287
+ <li data-language="Frisia" onclick="selectLanguage('fy', 'source')">Frisia</li>
288
+ <li data-language="Gaelig" onclick="selectLanguage('gd', 'source')">Gaelig</li>
289
+ <li data-language="Gaelik Skotlandia" onclick="selectLanguage('gd', 'source')">Gaelik Skotlandia</li>
290
+ <li data-language="Galisia" onclick="selectLanguage('gl', 'source')">Galisia</li>
291
+ <li data-language="Georgia" onclick="selectLanguage('ka', 'source')">Georgia</li>
292
+ <li data-language="Guarani" onclick="selectLanguage('gn', 'source')">Guarani</li>
293
+ <li data-language="Gujarati" onclick="selectLanguage('gu', 'source')">Gujarati</li>
294
+ <li data-language="Hausa" onclick="selectLanguage('ha', 'source')">Hausa</li>
295
+ <li data-language="Hawaii" onclick="selectLanguage('haw', 'source')">Hawaii</li>
296
+ <li data-language="Hindi" onclick="selectLanguage('hi', 'source')">Hindi</li>
297
+ <li data-language="Hmong" onclick="selectLanguage('hmn', 'source')">Hmong</li>
298
+ <li data-language="Ibrani" onclick="selectLanguage('he', 'source')">Ibrani</li>
299
+ <li data-language="Igbo" onclick="selectLanguage('ig', 'source')">Igbo</li>
300
+ <li data-language="Ilocano" onclick="selectLanguage('ilo', 'source')">Ilocano</li>
301
+ <li data-language="Katala" onclick="selectLanguage('ca', 'source')">Katala</li>
302
+ <li data-language="Kazak" onclick="selectLanguage('kk', 'source')">Kazak</li>
303
+ <li data-language="Khmer" onclick="selectLanguage('km', 'source')">Khmer</li>
304
+ <li data-language="Kinyarwanda" onclick="selectLanguage('rw', 'source')">Kinyarwanda</li>
305
+ <li data-language="Kirghiz" onclick="selectLanguage('ky', 'source')">Kirghiz</li>
306
+ <li data-language="Konkani" onclick="selectLanguage('kok', 'source')">Konkani</li>
307
+ </ul>
308
+ </div>
309
+ <!-- Swap language -->
310
+ <div class="flex">
311
+ <button id="swap_language_button" onclick="swapLanguages()">
312
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
313
+ <path d="m15 12 5-4-5-4v2.999H2v2h13zm7 3H9v-3l-5 4 5 4v-3h13z"/>
314
+ </svg>
315
+ </button>
316
+ </div>
317
+ <!-- Translate -->
318
+ <div class="flex text-[#9CA3AF]">
319
+ <div class="mb-4 mt-2">
320
+ <button onclick="openLanguageModal('target')" class="bg-[#F3F4F6] rounded-md font-semibold cursor-pointer p-2 text-[#5597ff]">
321
+ <span id="selected_target_language">English</span>
322
+ </button>
323
+ <input type="hidden" id="target_lang" name="target_lang">
324
+ </div>
325
+ <!-- Language Modal -->
326
+ <div class="flex absolute rounded-md z-10 mt-10 bg-white border text-black p-4 w-[50%] h-[60%] md:w-[20%] md:mr-[20%]" id="targetLangModal" style="display: none; right: 1rem; overflow-y: scroll;">
327
+ <!-- Search -->
328
+ <input type="text" id="searchInput2" class="p-2 w-full mb-5 bg-[#F3F4F6] rounded-md" oninput="searchLanguages('searchInput2', 'targetLangModal')" placeholder="Search Language...">
329
+ <!-- laguage list -->
330
+ <ul>
331
+ <li data-language="English" onclick="selectLanguage('en', 'target')">English</li>
332
+ <li data-language="Indonesia" onclick="selectLanguage('id', 'target')">Indonesian</li>
333
+ <li data-language="Jawa" onclick="selectLanguage('jv', 'target')">Jawa</li>
334
+ <li data-language="Sunda" onclick="selectLanguage('su', 'target')">Sunda</li>
335
+ <li data-language="Jepang" onclick="selectLanguage('ja', 'target')">Jepang</li>
336
+ <li data-language="Islan" onclick="selectLanguage('is', 'target')">Islan</li>
337
+ <li data-language="Italia" onclick="selectLanguage('it', 'target')">Italia</li>
338
+ <li data-language="Jerman" onclick="selectLanguage('de', 'target')">Jerman</li>
339
+ <li data-language="Kannada" onclick="selectLanguage('kn', 'target')">Kannada</li>
340
+ <li data-language="Korea" onclick="selectLanguage('ko', 'target')">Korea</li>
341
+ <li data-language="Korsika" onclick="selectLanguage('co', 'target')">Korsika</li>
342
+ <li data-language="Kreol Haiti" onclick="selectLanguage('ht', 'target')">Kreol Haiti</li>
343
+ <li data-language="Krio" onclick="selectLanguage('kri', 'target')">Krio</li>
344
+ <li data-language="Kroat" onclick="selectLanguage('hr', 'target')">Kroat</li>
345
+ <li data-language="Kurdi (Kurmanji)" onclick="selectLanguage('ku', 'target')">Kurdi (Kurmanji)</li>
346
+ <li data-language="Kurdi (Sorani)" onclick="selectLanguage('ckb', 'target')">Kurdi (Sorani)</li>
347
+ <li data-language="Laos" onclick="selectLanguage('lo', 'target')">Laos</li>
348
+ <li data-language="Latin" onclick="selectLanguage('la', 'target')">Latin</li>
349
+ <li data-language="Latvia" onclick="selectLanguage('lv', 'target')">Latvia</li>
350
+ <li data-language="Lingala" onclick="selectLanguage('ln', 'target')">Lingala</li>
351
+ <li data-language="Lituania" onclick="selectLanguage('lt', 'target')">Lituania</li>
352
+ <li data-language="Luganda" onclick="selectLanguage('lg', 'target')">Luganda</li>
353
+ <li data-language="Luksemburg" onclick="selectLanguage('lb', 'target')">Luksemburg</li>
354
+ <li data-language="Magyar" onclick="selectLanguage('hu', 'target')">Magyar</li>
355
+ <li data-language="Maithili" onclick="selectLanguage('mai', 'target')">Maithili</li>
356
+ <li data-language="Makedonia" onclick="selectLanguage('mk', 'target')">Makedonia</li>
357
+ <li data-language="Malagasi" onclick="selectLanguage('mg', 'target')">Malagasi</li>
358
+ <li data-language="Malayalam" onclick="selectLanguage('ml', 'target')">Malayalam</li>
359
+ <li data-language="Malta" onclick="selectLanguage('mt', 'target')">Malta</li>
360
+ <li data-language="Maori" onclick="selectLanguage('mi', 'target')">Maori</li>
361
+ <li data-language="Marathi" onclick="selectLanguage('mr', 'target')">Marathi</li>
362
+ <li data-language="Meiteilon (Manipuri)" onclick="selectLanguage('mni', 'target')">Meiteilon (Manipuri)</li>
363
+ <li data-language="Melayu" onclick="selectLanguage('ms', 'target')">Melayu</li>
364
+ <li data-language="Mizo" onclick="selectLanguage('lus', 'target')">Mizo</li>
365
+ <li data-language="Mongol" onclick="selectLanguage('mn', 'target')">Mongol</li>
366
+ <li data-language="Nepal" onclick="selectLanguage('ne', 'target')">Nepal</li>
367
+ <li data-language="Norsk" onclick="selectLanguage('no', 'target')">Norsk</li>
368
+ <li data-language="Odia (Oriya)" onclick="selectLanguage('or', 'target')">Odia (Oriya)</li>
369
+ <li data-language="Oromo" onclick="selectLanguage('om', 'target')">Oromo</li>
370
+ <li data-language="Pashto" onclick="selectLanguage('ps', 'target')">Pashto</li>
371
+ <li data-language="Polandia" onclick="selectLanguage('pl', 'target')">Polandia</li>
372
+ <li data-language="Portugis" onclick="selectLanguage('pt', 'target')">Portugis</li>
373
+ <li data-language="Prancis" onclick="selectLanguage('fr', 'target')">Prancis</li>
374
+ <li data-language="Punjabi" onclick="selectLanguage('pa', 'target')">Punjabi</li>
375
+ <li data-language="Quechua" onclick="selectLanguage('qu', 'target')">Quechua</li>
376
+ <li data-language="Rumania" onclick="selectLanguage('ro', 'target')">Rumania</li>
377
+ <li data-language="Rusia" onclick="selectLanguage('ru', 'target')">Rusia</li>
378
+ <li data-language="Samoa" onclick="selectLanguage('sm ', 'target')">Samoa</li>
379
+ <li data-language="Sanskerta" onclick="selectLanguage('sa', 'target')">Sanskerta</li>
380
+ <li data-language="Sepedi" onclick="selectLanguage('nso', 'target')">Sepedi</li>
381
+ <li data-language="Serb" onclick="selectLanguage('sr', 'target')">Serb</li>
382
+ <li data-language="Sesotho" onclick="selectLanguage('st', 'target')">Sesotho</li>
383
+ <li data-language="Shona" onclick="selectLanguage('sn', 'target')">Shona</li>
384
+ <li data-language="Sindhi" onclick="selectLanguage('sd', 'target')">Sindhi</li>
385
+ <li data-language="Sinhala" onclick="selectLanguage('si', 'target')">Sinhala</li>
386
+ <li data-language="Slovakia" onclick="selectLanguage('sk', 'target')">Slovakia</li>
387
+ <li data-language="Slovenia" onclick="selectLanguage('sl', 'target')">Slovenia</li>
388
+ <li data-language="Somali" onclick="selectLanguage('so', 'target')">Somali</li>
389
+ <li data-language="Spanyol" onclick="selectLanguage('es', 'target')">Spanyol</li>
390
+ <li data-language="Swahili" onclick="selectLanguage('sw', 'target')">Swahili</li>
391
+ <li data-language="Swensk" onclick="selectLanguage('sv', 'target')">Swensk</li>
392
+ <li data-language="Tagalog" onclick="selectLanguage('tl', 'target')">Tagalog</li>
393
+ <li data-language="Tajik" onclick="selectLanguage('tg', 'target')">Tajik</li>
394
+ <li data-language="Tamil" onclick="selectLanguage('ta', 'target')">Tamil</li>
395
+ <li data-language="Tatar" onclick="selectLanguage('tt', 'target')">Tatar</li>
396
+ <li data-language="Telugu" onclick="selectLanguage('te', 'target')">Telugu</li>
397
+ <li data-language="Thai" onclick="selectLanguage('th', 'target')">Thai</li>
398
+ <li data-language="Tigrinya" onclick="selectLanguage('ti', 'target')">Tigrinya</li>
399
+ <li data-language="Tsonga" onclick="selectLanguage('ts', 'target')">Tsonga</li>
400
+ <li data-language="Turki" onclick="selectLanguage('tr', 'target')">Turki</li>
401
+ <li data-language="Turkmen" onclick="selectLanguage('tk', 'target')">Turkmen</li>
402
+ <li data-language="Twi" onclick="selectLanguage('tw', 'target')">Twi</li>
403
+ <li data-language="Ukraina" onclick="selectLanguage('uk', 'target')">Ukraina</li>
404
+ <li data-language="Urdu" onclick="selectLanguage('ur', 'target')">Urdu</li>
405
+ <li data-language="Uyghur" onclick="selectLanguage('ug', 'target')">Uyghur</li>
406
+ <li data-language="Uzbek" onclick="selectLanguage('uz', 'target')">Uzbek</li>
407
+ <li data-language="Vietnam" onclick="selectLanguage('vi', 'target')">Vietnam</li>
408
+ <li data-language="Wales" onclick="selectLanguage('cy', 'target')">Wales</li>
409
+ <li data-language="Xhosa" onclick="selectLanguage('xh', 'target')">Xhosa</li>
410
+ <li data-language="Yiddi" onclick="selectLanguage('yi', 'target')">Yiddi</li>
411
+ <li data-language="Yoruba" onclick="selectLanguage('yo', 'target')">Yoruba</li>
412
+ <li data-language="Yunani" onclick="selectLanguage('el', 'target')">Yunani</li>
413
+ <li data-language="Zulu" onclick="selectLanguage('zu', 'target')">Zulu</li>
414
+ <li data-language="Afrikans" onclick="selectLanguage('af', 'target')">Afrikans</li>
415
+ <li data-language="yang" onclick="selectLanguage('sq', 'target')">Albania</li>
416
+ <li data-language="Amhara" onclick="selectLanguage('am', 'target')">Amhara</li>
417
+ <li data-language="Arab" onclick="selectLanguage('ar', 'target')">Arab</li>
418
+ <li data-language="Armenia" onclick="selectLanguage('hy', 'target')">Armenia</li>
419
+ <li data-language="Assam" onclick="selectLanguage('as', 'target')">Assam</li>
420
+ <li data-language="Aymara" onclick="selectLanguage('ay', 'target')">Aymara</li>
421
+ <li data-language="Azerbaijan" onclick="selectLanguage('az', 'target')">Azerbaijan</li>
422
+ <li data-language="Bambara" onclick="selectLanguage('bm', 'target')">Bambara</li>
423
+ <li data-language="Basque" onclick="selectLanguage('eu', 'target')">Basque</li>
424
+ <li data-language="Belanda" onclick="selectLanguage('nl', 'target')">Belanda</li>
425
+ <li data-language="Belarussia" onclick="selectLanguage('be', 'target')">Belarussia</li>
426
+ <li data-language="Bengali" onclick="selectLanguage('bn', 'target')">Bengali</li>
427
+ <li data-language="Bhojpuri" onclick="selectLanguage('bho', 'target')">Bhojpuri</li>
428
+ <li data-language="Bosnia" onclick="selectLanguage('bs', 'target')">Bosnia</li>
429
+ <li data-language="Bulgaria" onclick="selectLanguage('bg', 'target')">Bulgaria</li>
430
+ <li data-language="Burma" onclick="selectLanguage('my', 'target')">Burma</li>
431
+ <li data-language="Cebuano" onclick="selectLanguage('ceb', 'target')">Cebuano</li>
432
+ <li data-language="Ceko" onclick="selectLanguage('cs', 'target')">Ceko</li>
433
+ <li data-language="Chichewa" onclick="selectLanguage('ny', 'target')">Chichewa</li>
434
+ <li data-language="China (Aks. Sederhana)" onclick="selectLanguage('zh-CN', 'target')">China (Aks. Sederhana)</li>
435
+ <li data-language="China (Aks. Tradisional)" onclick="selectLanguage('zh-TW', 'target')">China (Aks. Tradisional)</li>
436
+ <li data-language="Denmark" onclick="selectLanguage('da', 'target')">Denmark</li>
437
+ <li data-language="Divehi" onclick="selectLanguage('dv', 'target')">Divehi</li>
438
+ <li data-language="Dogri" onclick="selectLanguage('doi', 'target')">Dogri</li>
439
+ <li data-language="Esperanto" onclick="selectLanguage('eo', 'target')">Esperanto</li>
440
+ <li data-language="Estonia" onclick="selectLanguage('et', 'target')">Estonia</li>
441
+ <li data-language="Ewe" onclick="selectLanguage('ee', 'target')">Ewe</li>
442
+ <li data-language="Farsi" onclick="selectLanguage('fa', 'target')">Farsi</li>
443
+ <li data-language="Finlandia" onclick="selectLanguage('fi', 'target')">Finlandia</li>
444
+ <li data-language="Frisia" onclick="selectLanguage('fy', 'target')">Frisia</li>
445
+ <li data-language="Gaelig" onclick="selectLanguage('gd', 'target')">Gaelig</li>
446
+ <li data-language="Gaelik Skotlandia" onclick="selectLanguage('gd', 'target')">Gaelik Skotlandia</li>
447
+ <li data-language="Galisia" onclick="selectLanguage('gl', 'target')">Galisia</li>
448
+ <li data-language="Georgia" onclick="selectLanguage('ka', 'target')">Georgia</li>
449
+ <li data-language="Guarani" onclick="selectLanguage('gn', 'target')">Guarani</li>
450
+ <li data-language="Gujarati" onclick="selectLanguage('gu', 'target')">Gujarati</li>
451
+ <li data-language="Hausa" onclick="selectLanguage('ha', 'target')">Hausa</li>
452
+ <li data-language="Hawaii" onclick="selectLanguage('haw', 'target')">Hawaii</li>
453
+ <li data-language="Hindi" onclick="selectLanguage('hi', 'target')">Hindi</li>
454
+ <li data-language="Hmong" onclick="selectLanguage('hmn', 'target')">Hmong</li>
455
+ <li data-language="Ibrani" onclick="selectLanguage('he', 'target')">Ibrani</li>
456
+ <li data-language="Igbo" onclick="selectLanguage('ig', 'target')">Igbo</li>
457
+ <li data-language="Ilocano" onclick="selectLanguage('ilo', 'target')">Ilocano</li>
458
+ <li data-language="Katala" onclick="selectLanguage('ca', 'target')">Katala</li>
459
+ <li data-language="Kazak" onclick="selectLanguage('kk', 'target')">Kazak</li>
460
+ <li data-language="Khmer" onclick="selectLanguage('km', 'target')">Khmer</li>
461
+ <li data-language="Kinyarwanda" onclick="selectLanguage('rw', 'target')">Kinyarwanda</li>
462
+ <li data-language="Kirghiz" onclick="selectLanguage('ky', 'target')">Kirghiz</li>
463
+ <li data-language="Konkani" onclick="selectLanguage('kok', 'target')">Konkani</li>
464
+ </ul>
465
+
466
+ </div>
467
+ <!-- End laguage Modal -->
468
+ </div>
469
+ </div>
470
+ <div>
471
+ <button class="absolute mt-5 bg-[#F3F4F6] rounded-md font-semibold md:mr-[21%] cursor-pointer p-2" style="right: 1rem;" onclick="translateText()">
472
+ <span>
473
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
474
+ <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"/>
475
+ </svg>
476
+ </span>
477
+ </button>
478
+ <div class="absolute ml-3 md:ml-[2%] md:mt-[13%] mt-[40%] bg-[#2b82ff] rounded-full" style="padding: 3px 6px;">
479
+ <button id="startRecognitionButton" onclick="startRecognition()">
480
+ <span style="margin: 0 auto;">
481
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
482
+ <path d="M16 12V6c0-2.217-1.785-4.021-3.979-4.021a.933.933 0 0 0-.209.025A4.006 4.006 0 0 0 8 6v6c0 2.206 1.794 4 4 4s4-1.794 4-4zm-6 0V6c0-1.103.897-2 2-2a.89.89 0 0 0 .163-.015C13.188 4.06 14 4.935 14 6v6c0 1.103-.897 2-2 2s-2-.897-2-2z" fill="#ffffff"/>
483
+ <path d="M6 12H4c0 4.072 3.061 7.436 7 7.931V22h2v-2.069c3.939-.495 7-3.858 7-7.931h-2c0 3.309-2.691 6-6 6s-6-2.691-6-6z" fill="#ffffff"/>
484
+ </svg>
485
+ </span>
486
+ </button>
487
+ <button id="stopRecognitionButton" onclick="stopRecognition()" style="display: none;">
488
+ <span>
489
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
490
+ <path d="m21.707 20.293-3.388-3.388A7.942 7.942 0 0 0 20 12.021h-2a5.95 5.95 0 0 1-1.109 3.456l-1.452-1.452c.348-.591.561-1.27.561-2.004v-6C16 3.804 14.215 2 12.021 2c-.07 0-.14.009-.209.025A4.005 4.005 0 0 0 8 6.021v.565L3.707 2.293 2.293 3.707l18 18 1.414-1.414zM10 6.021c0-1.103.897-2 2-2a.918.918 0 0 0 .164-.015C13.188 4.08 14 4.956 14 6.021v6c0 .172-.029.335-.071.494L10 8.586V6.021zm-4 6H4c0 4.072 3.06 7.436 7 7.931v2.069h2v-2.07a7.993 7.993 0 0 0 2.218-.611l-1.558-1.558a5.979 5.979 0 0 1-1.66.239c-3.309 0-6-2.692-6-6z" fill="#ffffff"/>
491
+ <path d="M8.011 12.132a3.993 3.993 0 0 0 3.877 3.877l-3.877-3.877z" fill="#ffffff"/>
492
+ </svg>
493
+ </span>
494
+ </button>
495
+ </div>
496
+ <div>
497
+ <textarea type="text" id="text" name="text" placeholder="Add your language..." class="p-9 focus:outline-1 focus:outline-blue-500 font-bold border-[0.1px] resize-none h-[190px] border-[#9EA5B1] rounded-md w-full p-6"></textarea>
498
+ </div>
499
+ </div>
500
+ <div class="mt-10">
501
+ <div class="absolute mt-[43%] ml-4 md:mt-[14%]"">
502
+ <button id="copyButton" type="button">
503
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
504
+ <path d="M19 3h-2.25a1 1 0 0 0-1-1h-7.5a1 1 0 0 0-1 1H5c-1.103 0-2 .897-2 2v15c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm0 17H5V5h2v2h10V5h2v15z"/>
505
+ </svg>
506
+ </button>
507
+ <button id="successButton" type="button" style="display: none;">
508
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
509
+ <path d="m10.933 13.519-2.226-2.226-1.414 1.414 3.774 3.774 5.702-6.84-1.538-1.282z"/>
510
+ <path d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM5 19V5h14l.002 14H5z"/>
511
+ </svg>
512
+ </button>
513
+ </div>
514
+ <textarea id="translated_text" placeholder="" class="copy p-2 focus:outline-1 focus:outline-blue-500 font-bold border-[0.1px] resize-none h-[190px] border-[#9EA5B1] rounded-md w-full p-6"></textarea>
515
+ <button class="absolute right-5 mt-[40%] bg-[#2b82ff] rounded-full md:mt-[13%] md:mr-[20%]" style="padding: 6px 6px;" id="speak_button">
516
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
517
+ <path d="M16 21c3.527-1.547 5.999-4.909 5.999-9S19.527 4.547 16 3v2c2.387 1.386 3.999 4.047 3.999 7S18.387 17.614 16 19v2z" fill="#ffffff"/>
518
+ <path d="M16 7v10c1.225-1.1 2-3.229 2-5s-.775-3.9-2-5zM4 17h2.697l5.748 3.832a1.004 1.004 0 0 0 1.027.05A1 1 0 0 0 14 20V4a1 1 0 0 0-1.554-.832L6.697 7H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h3c.033 0 .061-.016.093-.019a1.027 1.027 0 0 0 .38-.116c.026-.015.057-.017.082-.033L12 5.868v12.264l-4.445-2.964c-.025-.017-.056-.02-.082-.033a.986.986 0 0 0-.382-.116C7.059 15.016 7.032 15 7 15H4V9z" fill="#ffffff"/>
519
+ </svg>
520
+ </button>
521
+ </div>
522
+ </div>
523
+ </section>
524
+ <div style="margin-bottom: 70%;"></div>
525
+ <!-- Footer -->
526
+ <footer class="bg-white rounded-lg m-4 dark:bg-gray-800">
527
+ <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
528
+ <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a href="https://flowbite.com/" class="hover:underline">dioarafi™</a>. All Rights Reserved.
529
+ </span>
530
+ <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
531
+ <li>
532
+ <a href="#" class="mr-4 hover:underline md:mr-6 ">About</a>
533
+ </li>
534
+ <li>
535
+ <a href="#" class="mr-4 hover:underline md:mr-6">Privacy Policy</a>
536
+ </li>
537
+ <li>
538
+ <a href="#" class="mr-4 hover:underline md:mr-6">Licensing</a>
539
+ </li>
540
+ <li>
541
+ <a href="#" class="hover:underline">Contact</a>
542
+ </li>
543
+ </ul>
544
+ </div>
545
+ </footer>
546
+
547
+ <script src="{{ url_for('static', filename='JS/script.js') }}"></script>
548
+
549
+ </body>
550
+ </html>
551
+