From 8ab8b90dfc14a1ef43e2440a9b822bdcccf91b83 Mon Sep 17 00:00:00 2001 From: idotj Date: Wed, 2 Jun 2021 22:54:06 +0200 Subject: [PATCH 1/2] Add html5 structure + improve UX/UI --- app/templates/index.html | 821 +++++++++++++++++++-------------------- 1 file changed, 395 insertions(+), 426 deletions(-) diff --git a/app/templates/index.html b/app/templates/index.html index 5d7f0d2..404ea64 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -14,34 +14,12 @@ - - - - - + + + {% if gaId %} @@ -50,449 +28,440 @@ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - gtag('config', '{{ gaId }}'); - {% endif %} + {% endif %} - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
- warning

[[ error ]]

-
-
- Dismiss -
-
-
-
-
-
-
-
-
-
-
-
-

Translation API

-
-
-
-
-
-
- -
-
- swap_horiz -
-
- -
+ + + +
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ warning

[[ error ]]

+
+
+ Dismiss +
+
+
+
+
+
+
+
+ +
+
+
+
+

Translation API

+ + +
+
+ Translate from + +
+ +
+ + swap_horiz + + Translate into +
-
-
- - -
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ + +
+ +
+
+ +
+
+ + + +
+
+
+ + +
+
+
+ +
+
+
+
+

Request

-

-


-

+ 

+

Response

-

-
+ 

+
+
-
-
-
-
-
- {% if web_version %} -
-
-
-
-

Open Source Machine Translation

-

100% Self-Hosted. No Limits. No Ties to Proprietary Services.

-
cloud_download Download -


-
-
-
-
-{% endif %} -
-
- -
-
-
-
-
LibreTranslate
-

Free and Open Source Machine Translation API

-

- Made with ❤ by UAV4GEO and powered by Argos Translate -

-

License: AGPLv3

-

JavaScript license information

-{% if web_version %} -

- The public API on libretranslate.com should be used for testing, personal or infrequent use. If you're going to run an application in production, please host your own server or get in touch to obtain an API key. -

-{% endif %} -
-
- -
-
+ {% if web_version %} +
+
+
+
+

Open Source Machine Translation

+

100% Self-Hosted. No Limits. No Ties to Proprietary Services.

+
cloud_download Download +


+
+
+
+
+ {% endif %}
-
-
-
-
+ - - + - + + - -document.addEventListener('DOMContentLoaded', function(){ - var elems = document.querySelectorAll('.sidenav'); - var instances = M.Sidenav.init(elems); + + localStorage.setItem("api_key", newKey); + } + // @license-end + From 5befc2094e005809d143f8c45b919dd74a43d0eb Mon Sep 17 00:00:00 2001 From: idotj Date: Wed, 2 Jun 2021 22:57:10 +0200 Subject: [PATCH 2/2] Add html5 structure + improve UX/UI --- app/static/css/main.css | 149 ++++++++++++++++++++++++++++++++++++ app/static/css/main.min.css | 1 + 2 files changed, 150 insertions(+) create mode 100644 app/static/css/main.css create mode 100644 app/static/css/main.min.css diff --git a/app/static/css/main.css b/app/static/css/main.css new file mode 100644 index 0000000..367dbbb --- /dev/null +++ b/app/static/css/main.css @@ -0,0 +1,149 @@ +/* Custom styles for LibreTranslate page */ + +h3.header { + margin-bottom: 2.5rem; +} + +.mb-0 { + margin-bottom: 0 !important; +} + +.mt-0 { + margin-top: 0 !important; +} + +.position-relative { + position: relative; +} + +.language-select { + display: inline-flex; + align-items: center; + justify-content: flex-start; +} + +.language-select select { + border: none; + width: auto; + cursor: pointer; + font-weight: 600; + text-decoration: underline; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + text-indent: 1px; + text-overflow: ""; + padding: 0; + height: 2rem; +} + + +.btn-switch-language { + color: black; + margin-left: -1.5rem; + margin-right: 1rem; +} + +.textarea-container { + margin-top: 0; + position: relative; +} + +.btn-delete-text { + position: absolute; + right: 1.5rem; + top: 0.75rem; + border: 0; + background: none; + padding: 0; + cursor: pointer; + color: #888; +} + +.btn-delete-text:focus, +.btn-copy-translated:focus { + background: none !important; +} + +.characters-limit-container { + position: absolute; + right: 2rem; + bottom: 1rem; + color: #888; + pointer-events: none; +} + +.btn-copy-translated { + position: absolute; + right: 2rem; + bottom: 1rem; + display: flex; + align-items: center; + color: #888; + font-size: 0.85rem; + background: none; + border: none; + cursor: pointer; + margin-right: -1.5rem; +} + +.btn-copy-translated span { + padding-right: 0.5rem; +} + +.btn-copy-translated .material-icons { + font-size: 1.35rem; +} + +.progress { + background-color: #efefef; +} + +.progress.translate { + position: absolute; +} + +.progress .indeterminate { + background-color: steelblue; +} + +.textarea-container textarea { + font-size: 1.25rem; + resize: none; + border: 1px solid #ccc; + background: #efefef; + padding: 1rem 2rem 1rem 1.5rem; + overflow-y: hidden; +} + +.code { + font-size: 90%; + border-radius: 4px; + padding: 1rem 1.5rem; + border: 1px solid #9e9e9e; + background: #fbfbfb; + overflow: auto; + font-family: monospace; + min-height: 280px; + width: 100%; + overflow: auto; +} + +.page-footer .footer-copyright { + justify-content: center; +} + +@media (max-width: 991px) { + .language-select { + } +} + +@media (max-width: 760px) { + .language-select select{ + text-align: center; + margin: auto; + } + .language-select span { + display: none; + } +} diff --git a/app/static/css/main.min.css b/app/static/css/main.min.css new file mode 100644 index 0000000..9deec9a --- /dev/null +++ b/app/static/css/main.min.css @@ -0,0 +1 @@ +h3.header{margin-bottom:2.5rem}.mb-0{margin-bottom:0!important}.mt-0{margin-top:0!important}.position-relative{position:relative}.language-select{display:inline-flex;align-items:center;justify-content:flex-start}.language-select select{border:none;width:auto;cursor:pointer;font-weight:600;text-decoration:underline;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:1px;text-overflow:"";padding:0;height:2rem}.btn-switch-language{color:#000;margin-left:-1.5rem;margin-right:1rem}.textarea-container{margin-top:0;position:relative}.btn-delete-text{position:absolute;right:1.5rem;top:.75rem;border:0;background:0 0;padding:0;cursor:pointer;color:#888}.btn-copy-translated:focus,.btn-delete-text:focus{background:0 0!important}.characters-limit-container{position:absolute;right:2rem;bottom:1rem;color:#888;pointer-events:none}.btn-copy-translated{position:absolute;right:2rem;bottom:1rem;display:flex;align-items:center;color:#888;font-size:.85rem;background:0 0;border:none;cursor:pointer;margin-right:-1.5rem}.btn-copy-translated span{padding-right:.5rem}.btn-copy-translated .material-icons{font-size:1.35rem}.progress{background-color:#efefef}.progress.translate{position:absolute}.progress .indeterminate{background-color:#4682b4}.textarea-container textarea{font-size:1.25rem;resize:none;border:1px solid #ccc;background:#efefef;padding:1rem 2rem 1rem 1.5rem;overflow-y:hidden}.code{font-size:90%;border-radius:4px;padding:1rem 1.5rem;border:1px solid #9e9e9e;background:#fbfbfb;overflow:auto;font-family:monospace;min-height:280px;width:100%;overflow:auto}.page-footer .footer-copyright{justify-content:center}@media (max-width:760px){.language-select select{text-align:center;margin:auto}.language-select span{display:none}} \ No newline at end of file