From febf0f3523aad7e0d7a74baa0f7b07bd644e1f62 Mon Sep 17 00:00:00 2001
From: Midou36O <midou@midou.dev>
Date: Fri, 13 Oct 2023 08:03:57 +0100
Subject: [PATCH 1/5] Add a "Copy" button. Closes #5

---
 views/index.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/views/index.html b/views/index.html
index 6808cd9..ada58d4 100644
--- a/views/index.html
+++ b/views/index.html
@@ -70,7 +70,7 @@
     {{range $key, $value := .TranslateAll}}
     <div class="item-wrapper">
       Engine: {{.Engine}}
-      <textarea class="translation item" dir="auto" placeholder="Translation" readonly>
+      <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
 {{.OutputText}}</textarea>
       {{if .AutoDetect}}
       Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
@@ -82,7 +82,7 @@
     {{end}}
     {{ else }} {{if .TranslationExists}}
     <div class="item-wrapper">
-      <textarea class="translation item" dir="auto" placeholder="Translation" readonly>
+      <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
 {{.Translation.OutputText}}</textarea>
       {{if .Translation.AutoDetect}}
       Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
@@ -94,6 +94,9 @@
       {{end}}
       <button class="wrap" type="submit">
         Translate!
+      </button>
+      <button class="wrap" type="button" onclick="copyToClipboard()">
+        Copy
       </button>
 	  {{ if and .Engine .From .To .OriginalText }}<p><a href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
   </form>
@@ -111,6 +114,13 @@
     var options = { searchable: true };
     NiceSelect.bind(document.getElementById("targetLanguage"), options);
     NiceSelect.bind(document.getElementById("sourceLanguage"), options);
+    // This function allows to copy the translated text to the clipboard
+    function copyToClipboard() {
+      var copyText = document.getElementById("output");
+      copyText.select();
+      copyText.setSelectionRange(0, 99999); // This is for mobile devices.
+      document.execCommand("copy");
+    }
   </script>
 </main>
 {{ template "footer" .}}

From 16ee289b30242df1ec01a1d00ade47f3f6e9783e Mon Sep 17 00:00:00 2001
From: Midou36O <midou@midou.dev>
Date: Fri, 13 Oct 2023 13:24:55 +0100
Subject: [PATCH 2/5] Since Arya requested more than a simple button, more CSS
 jankiness!

---
 public/css/style.css | 30 +++++++++++++++++++++++++-----
 views/index.html     | 28 ++++++++++++++++++----------
 2 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index c029fb6..e66db79 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -31,7 +31,7 @@ footer p {
 }
 
 a {
-  color: #F57C00;
+  color: #f57c00;
   text-decoration: none;
 }
 a:hover {
@@ -79,7 +79,7 @@ select {
   border-bottom: none;
   border-top: none;
   border-radius: 4px;
-  border-left: 2px solid #F57C00;
+  border-left: 2px solid #f57c00;
   /* Accent shadow */
   box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
   color: #b2b2b2;
@@ -89,18 +89,36 @@ select {
 
 button {
   display: flex;
+  font-size: 17px;
   padding: 4px 8px;
   justify-content: flex-end;
   gap: 2px;
   border: none;
   border-radius: 4px;
-  background: #F57C00;
+  background: #f57c00;
 }
 button:hover {
   box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
   cursor: pointer;
 }
 
+/* While we're at it, fake button css style for the url.*/
+
+.button {
+  display: flex;
+  font-size: 17px;
+  padding: 4px 8px;
+  justify-content: flex-end;
+  gap: 2px;
+  border: none;
+  border-radius: 4px;
+  background: #f57c00;
+}
+.button:hover {
+  box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
+  cursor: pointer;
+}
+
 /* Spacing stuff */
 .wrap {
   display: flex;
@@ -168,11 +186,13 @@ button:hover {
 }
 
 /* Javascript searchable select used in source/target language */
-.nice-select, .nice-select-dropdown, .nice-select-search {
+.nice-select,
+.nice-select-dropdown,
+.nice-select-search {
   border-right: none;
   border-bottom: none;
   border-top: none;
   border-radius: 4px;
-  border-left: 2px solid #F57C00;
+  border-left: 2px solid #f57c00;
   box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
 }
diff --git a/views/index.html b/views/index.html
index ada58d4..f62e54c 100644
--- a/views/index.html
+++ b/views/index.html
@@ -18,7 +18,7 @@
     <!-- This hidden input is so that the engine gets sent in the request even though its not declared here -->
     <input name="engine" value="{{.Engine}}" type="hidden" />
 
-    <div class="wrap languages">
+    <div class="wrap languages" style="display:flex; justify-content:space-around; align-items:center;">
       <div class="language">
         <select name="from" aria-label="Source language" id="sourceLanguage">
           {{range $key, $value := .SourceLanguages}} {{if $.From}}
@@ -55,7 +55,7 @@
       </div>
     </div>
 
-    <div class="item-wrapper">
+    <div class="item-wrapper" style="display:flex;flex-direction: column;justify-content: center;text-align: center;margin: auto;">
 	  Source Text:
       <textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
 {{ .OriginalText }}</textarea>
@@ -68,7 +68,7 @@
 
     {{ if .TranslateAll }}
     {{range $key, $value := .TranslateAll}}
-    <div class="item-wrapper">
+    <div class="item-wrapper" style="display:flex;flex-direction: column;justify-content: center;text-align: center;margin: auto;">
       Engine: {{.Engine}}
       <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
 {{.OutputText}}</textarea>
@@ -92,13 +92,21 @@
       {{end}}
       {{end}}
       {{end}}
-      <button class="wrap" type="submit">
-        Translate!
-      </button>
-      <button class="wrap" type="button" onclick="copyToClipboard()">
-        Copy
-      </button>
-	  {{ if and .Engine .From .To .OriginalText }}<p><a href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
+      <div style="display:flex; justify-content:space-around; align-items:center;">
+       {{if .TranslationExists}} 
+       <button class="wrap" type="button" onclick="copyToClipboard()">
+         Copy the translation
+       </button>
+       {{end}}
+	     {{ if and .Engine .From .To .OriginalText }}<p><a class="button" style="color:#010000; text-decoration: none;" href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
+       {{if .TranslationExists}}
+       <button class="wrap" type="submit">
+       {{else}}
+       <button class="wrap" style="margin-left:auto; position:relative; left:-10%;margin-top: 1%;" type="submit">
+       {{end}}
+         Translate!
+       </button>
+      </div> 
   </form>
   <script>
     // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0

From 347dbe5a2709c139525d2a0ea3a98197f3a43e90 Mon Sep 17 00:00:00 2001
From: Midou36O <midou@midou.dev>
Date: Fri, 13 Oct 2023 13:31:05 +0100
Subject: [PATCH 3/5] Fix the second text box field

---
 views/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/index.html b/views/index.html
index f62e54c..30be935 100644
--- a/views/index.html
+++ b/views/index.html
@@ -81,7 +81,7 @@
     </div>
     {{end}}
     {{ else }} {{if .TranslationExists}}
-    <div class="item-wrapper">
+    <div class="item-wrapper" style="display:flex;flex-direction: column;justify-content: center;text-align: center;margin: auto;">
       <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
 {{.Translation.OutputText}}</textarea>
       {{if .Translation.AutoDetect}}

From 0b7901958f148c04c8a701abd6bf50fe5b326e32 Mon Sep 17 00:00:00 2001
From: Midou36O <midou@midou.dev>
Date: Fri, 13 Oct 2023 13:44:58 +0100
Subject: [PATCH 4/5] Don't space the language buttons too much

---
 views/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/index.html b/views/index.html
index 30be935..37b57f4 100644
--- a/views/index.html
+++ b/views/index.html
@@ -18,7 +18,7 @@
     <!-- This hidden input is so that the engine gets sent in the request even though its not declared here -->
     <input name="engine" value="{{.Engine}}" type="hidden" />
 
-    <div class="wrap languages" style="display:flex; justify-content:space-around; align-items:center;">
+    <div class="wrap languages" style="display:flex; justify-content:space-around; align-items:center; max-width:35%;margin: auto;margin-bottom: 1%;">
       <div class="language">
         <select name="from" aria-label="Source language" id="sourceLanguage">
           {{range $key, $value := .SourceLanguages}} {{if $.From}}

From b34c70d8bde356f4e98c00097758cb96d83ca3f5 Mon Sep 17 00:00:00 2001
From: Midou36O <midou@midou.dev>
Date: Fri, 13 Oct 2023 14:00:41 +0100
Subject: [PATCH 5/5] Cleanup the CSS.

---
 public/css/style.css | 16 ++++++++++++++++
 views/index.html     |  8 ++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index e66db79..e0fca99 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -196,3 +196,19 @@ button:hover {
   border-left: 2px solid #f57c00;
   box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
 }
+.center-area {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  max-width: 35%;
+  margin: auto;
+  margin-bottom: 1%;
+}
+
+.center-area2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  margin: auto;
+}
diff --git a/views/index.html b/views/index.html
index 37b57f4..f3c99d1 100644
--- a/views/index.html
+++ b/views/index.html
@@ -18,7 +18,7 @@
     <!-- This hidden input is so that the engine gets sent in the request even though its not declared here -->
     <input name="engine" value="{{.Engine}}" type="hidden" />
 
-    <div class="wrap languages" style="display:flex; justify-content:space-around; align-items:center; max-width:35%;margin: auto;margin-bottom: 1%;">
+    <div class="wrap languages center-area" >
       <div class="language">
         <select name="from" aria-label="Source language" id="sourceLanguage">
           {{range $key, $value := .SourceLanguages}} {{if $.From}}
@@ -55,7 +55,7 @@
       </div>
     </div>
 
-    <div class="item-wrapper" style="display:flex;flex-direction: column;justify-content: center;text-align: center;margin: auto;">
+    <div class="center-area2 item-wrapper"> 
 	  Source Text:
       <textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
 {{ .OriginalText }}</textarea>
@@ -68,7 +68,7 @@
 
     {{ if .TranslateAll }}
     {{range $key, $value := .TranslateAll}}
-    <div class="item-wrapper" style="display:flex;flex-direction: column;justify-content: center;text-align: center;margin: auto;">
+    <div class="item-wrapper center-area2">
       Engine: {{.Engine}}
       <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
 {{.OutputText}}</textarea>
@@ -81,7 +81,7 @@
     </div>
     {{end}}
     {{ else }} {{if .TranslationExists}}
-    <div class="item-wrapper" style="display:flex;flex-direction: column;justify-content: center;text-align: center;margin: auto;">
+    <div class="item-wrapper center-area2">
       <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
 {{.Translation.OutputText}}</textarea>
       {{if .Translation.AutoDetect}}