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] 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