Add support for handling languages written from right to left

assets/css/extra.css

@@ -21,6 +21,12 @@ input[type="text"]{
     border:none;
     width:60%;
 }
+
+.prefBox{
+    display:flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
 #save{
     padding:10px;
     border-radius: 8px;
@@ -92,8 +98,9 @@ select {
 	border-radius: 8px;
 	cursor: pointer;
 	font-size: large;
-	margin: 8px;
 	outline: none;
+    position:relative;
+    bottom:8px;
 }
 #browserInfo{
     cursor: pointer;

html/preferences.html

@@ -19,21 +19,33 @@
 
     <h1 id="preferences">Preferences</h1>
     <br><br>
+
+    <div class="prefBox">
         <strong id="dlText">Download location</strong>
-    <br><br>
+    </div>
+    <br>
+
+
+    <div class="prefBox">
         <span id="clText">Current download location - </span><span id="path"></span>
-    <br><br>
+    </div>
+
+    <br>
     <button id="selectLocation">Select Download Location</button>
 
     <p id="msg">
-        </pid>
+    </p>
 
+    <br>
 
+    <div class="prefBox">
         <span id="transparentText">Enable transparent dark mode(only Linux, needs restart)</span><input type="checkbox"
             id="enableTransparent">
+    </div>
+    <br>
 
-        <br><br>
 
+    <div class="prefBox">
         <label id="selectLn">Select Language (Requires reload)</label>
         <select id="select" onchange="changeLanguage()">
             <option value="en">English</option>
@@ -48,8 +60,10 @@
             <option value="uk">Українська</option>
             <option value="tr">Türkçe</option>
         </select>
-        
+    </div>
     <br>
+
+    <div class="prefBox">
         <span id="browserTxt">Select browser to use cookies from</span>
         <span id="browserInfo"> ℹ️</span>
         <select id="browser">
@@ -63,8 +77,25 @@
             <option value="safari">Safari</option>
             <option value="vivaldi">Vivaldi</option>
         </select>
+    </div>
+
 
     <script>
+        let rightToLeft = false;
+        if (localStorage.getItem("rightToLeft")) {
+            rightToLeft = localStorage.getItem("rightToLeft")
+        }
+        if (rightToLeft == "true") {
+            document.querySelectorAll(".prefBox").forEach(item => {
+                item.style.flexDirection = "row-reverse"
+            })
+        }
+        else{
+            console.log("Change to left to right");
+            document.querySelectorAll(".prefBox").forEach(item => {
+                item.style.flexDirection = "row"
+            })
+        }
         let downloadPath = localStorage.getItem("downloadPath")
         getId("path").textContent = downloadPath
 
@@ -113,6 +144,14 @@
         function changeLanguage() {
             const language = getId("select").value
             localStorage.setItem("language", language)
+            if (language === "fa") {
+                rightToLeft = true;
+                localStorage.setItem("rightToLeft", true)
+            }
+            else {
+                rightToLeft = false;
+                localStorage.setItem("rightToLeft", false)
+            }
         }
 
         let browser = localStorage.getItem("browser")