Merge pull request 'Add a "Copy" button. Closes #5' (#8) from Midou36O/mozhi:copy-button into master

Reviewed-on: https://codeberg.org/aryak/mozhi/pulls/8

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,29 @@ 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);
 }
+.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;
+}

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 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">
+    <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,9 +68,9 @@
 
     {{ if .TranslateAll }}
     {{range $key, $value := .TranslateAll}}
-    <div class="item-wrapper">
+    <div class="item-wrapper center-area2">
       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}}
@@ -81,8 +81,8 @@
     </div>
     {{end}}
     {{ else }} {{if .TranslationExists}}
-    <div class="item-wrapper">
+    <div class="item-wrapper center-area2">
-      <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}}
@@ -92,10 +92,21 @@
       {{end}}
       {{end}}
       {{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>
-	  {{ if and .Engine .From .To .OriginalText }}<p><a href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
+      </div> 
   </form>
   <script>
     // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
@@ -111,6 +122,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" .}}