diff --git a/html/translate.ejs b/html/translate.ejs index f18b4ce7..ab41069c 100644 --- a/html/translate.ejs +++ b/html/translate.ejs @@ -16,130 +16,173 @@ You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/. --> - + - - PokeTranslate - - - - - - - - - - - - - textarea { - width: 100%; - resize: vertical; - padding: 1em; - font-size: 1rem; - border-radius: 1em; - border: 2px solid #495057; - background-color: #131618; - color: #f8f9fa; - } + <% if (isMobile) { %> + + <% } %> - .center { - text-align: center; - } + <% if (!isMobile) { %> + + <% } %> + - button { - padding: 10px 20px; - font-size: 1rem; - border: 2px solid #888888; - border-radius: 1em; - background-color: #131618; - color: #f8f9fa; - cursor: pointer; - } - - button:hover { - background-color: #478061; - border-color: #478061; - color: #ffffff; - } - - @media screen and (max-width: 768px) { - .container { - padding: 1em; - } - - header h1 { - font-size: 1.5rem; - } - - .languages { - flex-direction: column; - } - - button { - width: 100%; - } - } - - - - -
-
-

PokeTranslate

-
- - + +
+
+

PokeTranslate

+
+ <% const languageOptions = [ { code: 'autodetect', name: 'Autodetect' }, { code: 'af', name: 'Afrikaans' }, @@ -203,7 +246,7 @@ { code: 'km', name: 'Khmer' }, { code: 'rw', name: 'Kinyarwanda' }, { code: 'kok', name: 'Konkani' }, - { code: 'ko', name: 'Korean' }, + { code: 'ko', name: 'Korean (PROK)' }, { code: 'kri', name: 'Krio' }, { code: 'ku', name: 'Kurdish (Kurmanji)' }, { code: 'sd', name: 'Sindhi' }, @@ -235,55 +278,71 @@ { code: 'yi', name: 'Yiddish' }, { code: 'yo', name: 'Yoruba' }, { code: 'zu', name: 'Zulu' } -]; %> - - -
-
- - <% languageOptions.forEach(language => { %> - + <% }); %> - - <% languageOptions.slice(1).forEach(language => { %> - + <% }); %>
+
- - - - -
- - + +
+
+
- -
- + + - // Auto resize textarea to fit words inside it without the need to scroll - var input = document.getElementById("input"); - var output = document.getElementById("output"); - input.setAttribute("style", "height:" + output.scrollHeight + "px;overflow-y:scroll;"); - output.setAttribute("style", "height:" + output.scrollHeight + "px;overflow-y:scroll;"); - input.addEventListener("input", function(e) { - this.style.height = 150 + "px"; - this.style.height = this.scrollHeight + "px"; - }); - - - + + + +