Hugging Face's logo

Spaces:
dioarafl
/
Googletrans
Runtime error

App Files Community
dioarafii commited on
Commit
09f7cf6
•
1 Parent(s): f0e4bfe

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -551
index.html DELETED
@@ -1,551 +0,0 @@
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
-