From 9b3aac4a8a9591faa095c93091403fc8ff043b2b Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Tue, 7 Feb 2023 23:14:03 +0300
Subject: [PATCH] Combined changes that wouldn't merge

---
 .gitignore                                    |   2 +
 src/main/resources/messages_ar_AR.properties  |   3 +
 src/main/resources/messages_de_DE.properties  |   3 +
 src/main/resources/messages_en_GB.properties  |   3 +
 src/main/resources/messages_en_US.properties  |   3 +
 src/main/resources/messages_fr_FR.properties  |   3 +
 src/main/resources/static/general.css         |   4 +-
 src/main/resources/templates/add-image.html   |   2 +-
 .../resources/templates/compress-pdf.html     |   2 +-
 .../templates/convert/img-to-pdf.html         |  51 +++--
 .../templates/convert/pdf-to-img.html         |  56 ++---
 .../resources/templates/fragments/common.html |  85 ++++---
 .../resources/templates/fragments/footer.html |   9 +-
 .../resources/templates/fragments/navbar.html | 214 +++++++++---------
 src/main/resources/templates/home.html        |   2 +-
 src/main/resources/templates/merge-pdfs.html  |   2 +-
 .../resources/templates/pdf-organizer.html    |   2 +-
 .../resources/templates/remove-pages.html     |   2 +-
 src/main/resources/templates/rotate-pdf.html  |  70 +++---
 .../templates/security/add-password.html      |   2 +-
 .../templates/security/add-watermark.html     |   2 +-
 .../security/change-permissions.html          |   2 +-
 .../templates/security/remove-password.html   |   2 +-
 src/main/resources/templates/split-pdfs.html  |  75 +++---
 24 files changed, 311 insertions(+), 290 deletions(-)

diff --git a/.gitignore b/.gitignore
index 474d7cc6..88be02aa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -108,3 +108,5 @@ local.properties
 *.zip
 *.tar.gz
 *.rar
+
+/build
\ No newline at end of file
diff --git a/src/main/resources/messages_ar_AR.properties b/src/main/resources/messages_ar_AR.properties
index 0cc54940..50bda14e 100644
--- a/src/main/resources/messages_ar_AR.properties
+++ b/src/main/resources/messages_ar_AR.properties
@@ -5,6 +5,9 @@
 ###########
 # Generic #
 ###########
+# the direction that the language is written (ltr = left to right, rtl = right to left)
+language.direction=rtl
+
 pdfPrompt=اختر PDF
 multiPdfPrompt=اختر ملفات PDF (2+)
 multiPdfDropPrompt=حدد (أو اسحب وأفلت) جميع ملفات PDF التي تحتاجها
diff --git a/src/main/resources/messages_de_DE.properties b/src/main/resources/messages_de_DE.properties
index 38266bb4..b5ce3c9d 100644
--- a/src/main/resources/messages_de_DE.properties
+++ b/src/main/resources/messages_de_DE.properties
@@ -1,6 +1,9 @@
 ###########
 # Generic #
 ###########
+# the direction that the language is written (ltr = left to right, rtl = right to left)
+language.direction=ltr
+
 pdfPrompt=PDF auswählen
 multiPdfPrompt=PDFs auswählen(2+)
 multiPdfDropPrompt=Wählen Sie alle gewünschten PDFs aus (oder ziehen Sie sie per Drag & Drop hierhin)
diff --git a/src/main/resources/messages_en_GB.properties b/src/main/resources/messages_en_GB.properties
index 1d32c932..42d64213 100644
--- a/src/main/resources/messages_en_GB.properties
+++ b/src/main/resources/messages_en_GB.properties
@@ -1,6 +1,9 @@
 ###########
 # Generic #
 ###########
+# the direction that the language is written (ltr = left to right, rtl = right to left)
+language.direction=ltr
+
 pdfPrompt=Choose PDF
 multiPdfPrompt=Choose PDFs (2+)
 multiPdfDropPrompt=Select (or drag & drop) all PDFs you require
diff --git a/src/main/resources/messages_en_US.properties b/src/main/resources/messages_en_US.properties
index 802fbe34..dab6e8b7 100644
--- a/src/main/resources/messages_en_US.properties
+++ b/src/main/resources/messages_en_US.properties
@@ -1,6 +1,9 @@
 ###########
 # Generic #
 ###########
+# the direction that the language is written (ltr = left to right, rtl = right to left)
+language.direction=ltr
+
 pdfPrompt=Choose PDF
 multiPdfPrompt=Choose PDFs (2+)
 multiPdfDropPrompt=Select (or drag & drop) all PDFs you require
diff --git a/src/main/resources/messages_fr_FR.properties b/src/main/resources/messages_fr_FR.properties
index d0f61e1c..a5089e32 100644
--- a/src/main/resources/messages_fr_FR.properties
+++ b/src/main/resources/messages_fr_FR.properties
@@ -5,6 +5,9 @@
 ###########
 # Generic #
 ###########
+# the direction that the language is written (ltr = left to right, rtl = right to left)
+language.direction=ltr
+
 pdfPrompt=Choisir PDF
 multiPdfPrompt=Choisir des PDF (2+)
 multiPdfDropPrompt=Sélectionnez (ou glissez-déposez) tous les PDF dont vous avez besoin
diff --git a/src/main/resources/static/general.css b/src/main/resources/static/general.css
index 1180ed5f..4a5a669a 100644
--- a/src/main/resources/static/general.css
+++ b/src/main/resources/static/general.css
@@ -13,11 +13,11 @@
     width: 100%;
 }
 
-:is(html[lang=en], html[lang=fr]) * {
+html[lang-direction=ltr] * {
     direction: ltr;
 }
 
-:is(html[lang=ar]) * {
+html[lang-direction=rtl] * {
     direction: rtl;
     text-align: right;
 }
diff --git a/src/main/resources/templates/add-image.html b/src/main/resources/templates/add-image.html
index a83363ea..892a0eed 100644
--- a/src/main/resources/templates/add-image.html
+++ b/src/main/resources/templates/add-image.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 
 <th:block th:insert="~{fragments/common :: head(title=#{addImage.title})}"></th:block>
diff --git a/src/main/resources/templates/compress-pdf.html b/src/main/resources/templates/compress-pdf.html
index 98b7157b..eeef4f9a 100644
--- a/src/main/resources/templates/compress-pdf.html
+++ b/src/main/resources/templates/compress-pdf.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 
 <th:block th:insert="~{fragments/common :: head(title=#{compress.title})}"></th:block>
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index 68d6d005..bfcf902a 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -1,38 +1,39 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{imageToPDF.title})}"></th:block>
 
+<body>
+<div id="page-container">
+	<div id="content-wrap">
 
-<body>	<div id="page-container">
-		<div id="content-wrap">
-	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
-	<br>
-	<br>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col-md-6">
-				<h2 th:text="#{imageToPDF.header}"></h2>
+		<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 
-				<form method="post" enctype="multipart/form-data"
-					th:action="@{img-to-pdf}">
-					<div class="custom-file">
-						<input type="file" class="custom-file-input" id="fileInput"
-							name="fileInput" required> <label
-							class="custom-file-label" for="fileInput" th:text="#{imgPrompt}"></label>
-					</div>
-					<br>
-					<br>
-					<button type="submit" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
+		<br>
+		<br>
 
-				</form>
-				<th:block th:insert="~{fragments/common :: filelist}"></th:block>
+		<div class="container">
+			<div class="row justify-content-center">
+				<div class="col-md-6">
+					<h2 th:text="#{imageToPDF.header}"></h2>
+
+					<form method="post" enctype="multipart/form-data" th:action="@{img-to-pdf}">
+						<div class="custom-file">
+							<input type="file" class="custom-file-input" id="fileInput" name="fileInput" required>
+							<label class="custom-file-label" for="fileInput" th:text="#{imgPrompt}"></label>
+						</div>
+						<br>
+						<br>
+						<button type="submit" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
+					</form>
+
+					<th:block th:insert="~{fragments/common :: filelist}"></th:block>
+				</div>
 			</div>
 		</div>
-	</div>
 
 	</div>
-		<div th:insert="~{fragments/footer.html :: footer}"></div>
-	</div>
+	<div th:insert="~{fragments/footer.html :: footer}"></div>
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index a5008f90..655c7e53 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -1,43 +1,45 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{pdfToImage})}"></th:block>
 
+<body>
+<div id="page-container">
+	<div id="content-wrap">
 
-<body>	<div id="page-container">
-		<div id="content-wrap">
-	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
+		<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 
-	<br>
-	<br>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col-md-6">
-				<h2 th:text="#{pdfToImage.header}"></h2>
-				<form method="post" enctype="multipart/form-data"
-					th:action="@{pdf-to-img}">
-					<div class="custom-file">
-						<input type="file" class="custom-file-input" id="fileInput"
-							name="fileInput" required> <label
-							class="custom-file-label" for="fileInput" th:text="#{pdfPrompt}"></label>
-					</div>
-					<div class="form-group">
-						<label th:text="#{pdfToImage.selectText}"></label> <select class="form-control"
-							name="imageFormat">
+		<br>
+		<br>
+
+		<div class="container">
+			<div class="row justify-content-center">
+				<div class="col-md-6">
+					<h2 th:text="#{pdfToImage.header}"></h2>
+
+					<form method="post" enctype="multipart/form-data" th:action="@{pdf-to-img}">
+						<div class="custom-file">
+							<input type="file" class="custom-file-input" id="fileInput" name="fileInput" required>
+							<label class="custom-file-label" for="fileInput" th:text="#{pdfPrompt}"></label>
+						</div>
+						<div class="form-group">
+							<label th:text="#{pdfToImage.selectText}"></label> <select class="form-control"
+																					   name="imageFormat">
 							<option value="jpg">JPEG</option>
 							<option value="png">PNG</option>
 							<option value="gif">GIF</option>
 						</select>
-					</div>
-					<button type="submit" class="btn btn-primary" th:text="#{pdfToImage.submit}"></button>
-				</form>
-				<th:block th:insert="~{fragments/common :: filelist}"></th:block>
+						</div>
+						<button type="submit" class="btn btn-primary" th:text="#{pdfToImage.submit}"></button>
+					</form>
 
+					<th:block th:insert="~{fragments/common :: filelist}"></th:block>
+				</div>
 			</div>
 		</div>
+
 	</div>
-	</div>
-		<div th:insert="~{fragments/footer.html :: footer}"></div>
-	</div>
+	<div th:insert="~{fragments/footer.html :: footer}"></div>
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 3c97cc3b..12889a09 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -1,43 +1,56 @@
 <head th:fragment="head">
-<link rel="shortcut icon" href="favicon.svg">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/build/pdf.min.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/web/pdf_viewer.min.css" rel="stylesheet">
+	<!-- Metadata -->
+	<meta charset="UTF-8">
+	<title th:text="'S-PDF ' + ${title}"></title>
+	<link rel="shortcut icon" href="favicon.svg">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<link rel="stylesheet" th:href="@{dark-mode.css}" id="dark-mode-styles">
-<script>
-	function toggleDarkMode() {
-		var checkbox = document.getElementById("toggle-dark-mode");
-		var darkModeStyles = document.getElementById("dark-mode-styles");
-		if (checkbox.checked) {
-			localStorage.setItem("dark-mode", "on");
-			darkModeStyles.disabled = false;
-		} else {
-			localStorage.setItem("dark-mode", "off");
-			darkModeStyles.disabled = true;
-		}
-	}
-	$(document).ready(function() {
-		var darkModeStyles = document.getElementById("dark-mode-styles");
-		var checkbox = document.getElementById("toggle-dark-mode");
-		if (localStorage.getItem("dark-mode") == "on") {
-			darkModeStyles.disabled = false;
-			checkbox.checked = true;
-		}
-		if (localStorage.getItem("dark-mode") == "off") {
-			darkModeStyles.disabled = true;
-			checkbox.checked = false;
-		}
+	<!-- jQuery -->
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
 
-	});
-</script>
-<title th:text="'S-PDF ' + ${title}"></title>
-<link rel="stylesheet" href="general.css">
+	<!-- Bootstrap -->
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+
+	<!-- FontAwesome -->
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+
+	<!-- PDF.js -->
+	<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/build/pdf.min.js"></script>
+	<link href="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/web/pdf_viewer.min.css" rel="stylesheet">
+
+	<!-- Custom -->
+	<link rel="stylesheet" href="general.css">
+	<link rel="stylesheet" th:href="@{dark-mode.css}" id="dark-mode-styles">
+
+	<script>
+		function toggleDarkMode() {
+			var checkbox = document.getElementById("toggle-dark-mode");
+			var darkModeStyles = document.getElementById("dark-mode-styles");
+			if (checkbox.checked) {
+				localStorage.setItem("dark-mode", "on");
+				darkModeStyles.disabled = false;
+			} else {
+				localStorage.setItem("dark-mode", "off");
+				darkModeStyles.disabled = true;
+			}
+		}
+		$(document).ready(function() {
+			var darkModeStyles = document.getElementById("dark-mode-styles");
+			var checkbox = document.getElementById("toggle-dark-mode");
+			if (localStorage.getItem("dark-mode") == "on") {
+				darkModeStyles.disabled = false;
+				checkbox.checked = true;
+			}
+			if (localStorage.getItem("dark-mode") == "off") {
+				darkModeStyles.disabled = true;
+				checkbox.checked = false;
+			}
+
+		});
+	</script>
 </head>
 
 <th:block th:fragment="filelist">
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index 641035f5..68dc00ec 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -1,11 +1,6 @@
 <div th:fragment="footer">
-	<link rel="stylesheet"
-		href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
 	<footer id="footer" class="text-center py-3">
-		<a href="https://github.com/Frooodle/Stirling-PDF" target="_blank"
-			class="mx-1"> <i class="fab fa-github fa-2x"></i>
-		</a> <a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank"
-			class="mx-1"> <i class="fab fa-docker fa-2x"></i>
-		</a>
+		<a href="https://github.com/Frooodle/Stirling-PDF" target="_blank" class="mx-1"> <i class="fab fa-github fa-2x"></i></a>
+		<a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1"> <i class="fab fa-docker fa-2x"></i></a>
 	</footer>
 </div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 91681b5d..3033516e 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -1,133 +1,129 @@
 <div th:fragment="navbar">
 	<nav class="navbar navbar-expand-lg navbar-light bg-light">
 		<div class="container">
+
 			<a class="navbar-brand" href="#" th:href="@{/}">Stirling PDF</a>
+
 			<button class="navbar-toggler" type="button" data-toggle="collapse"
-				data-target="#navbarNav" aria-controls="navbarNav"
-				aria-expanded="false" aria-label="Toggle navigation">
+					data-target="#navbarNav" aria-controls="navbarNav"
+					aria-expanded="false" aria-label="Toggle navigation">
 				<span class="navbar-toggler-icon"></span>
 			</button>
+
 			<div class="collapse navbar-collapse" id="navbarNav">
+
 				<ul class="navbar-nav">
 
-					<li class="nav-item"><a class="nav-link" href="#"
-						th:href="@{merge-pdfs}"
-						th:classappend="${currentPage}=='merge-pdfs' ? 'active' : ''" th:text="#{home.merge.title}"></a></li>
-					<li class="nav-item"><a class="nav-link" href="#"
-						th:href="@{split-pdfs}"
-						th:classappend="${currentPage}=='split-pdfs' ? 'active' : ''" th:text="#{home.split.title}"></a></li>
-					<li class="nav-item"><a class="nav-link" href="#"
-						th:href="@{pdf-organizer}"
-						th:classappend="${currentPage}=='pdf-organizer' ? 'active' : ''" th:text="#{home.pdfOrganiser.title}"></a></li>		
-							
-					<li class="nav-item"><a class="nav-link" href="#"
-						th:href="@{rotate-pdf}"
-						th:classappend="${currentPage}=='rotate-pdf' ? 'active' : ''" th:text="#{home.rotate.title}"></a></li>
-						
-						
-						
-								
-					
-					<li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' ? 'active' : ''">
-												<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  th:text="#{navbar.convert}"></a>
-					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
-						<a class="dropdown-item" href="#" th:href="@{pdf-to-img}" th:classappend="${currentPage}=='pdf-to-img' ? 'active' : ''"  th:text="#{home.pdfToImage.title}"></a>
-						<a class="dropdown-item" href="#" th:href="@{img-to-pdf}" th:classappend="${currentPage}=='img-to-pdf' ? 'active' : ''" th:text="#{home.imageToPdf.title}"></a>
-					</div>
-				</li>
-				
-				<li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='change-permissions' OR ${currentPage}=='add-watermark' ? 'active' : ''">
-												<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  th:text="#{navbar.security}"></a>
-					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
-						<a class="dropdown-item" href="#" th:href="@{add-password}" th:classappend="${currentPage}=='add-password' ? 'active' : ''" th:text="#{home.addPassword.title}"></a>
-						<a class="dropdown-item" href="#" th:href="@{remove-password}" th:classappend="${currentPage}=='remove-password' ? 'active' : ''" th:text="#{home.removePassword.title}"></a>
-						<a class="dropdown-item" href="#" th:href="@{change-permissions}" th:classappend="${currentPage}=='change-permissions' ? 'active' : ''" th:text="#{home.permissions.title}"></a>
-						<a class="dropdown-item" href="#" th:href="@{add-watermark}" th:classappend="${currentPage}=='add-watermark' ? 'active' : ''"  th:text="#{home.watermark.title}"></a>
-					</div>
-				</li>	
-				
-				<li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='add-image' OR ${currentPage}=='compress-pdf' ? 'active' : ''">
-												<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="#{navbar.other}"></a>
-					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
-						<a class="dropdown-item" href="#" th:href="@{add-image}" th:classappend="${currentPage}=='add-image' ? 'active' : ''" th:text="#{home.addImage.title}"></a>
-						<a class="dropdown-item" href="#" th:href="@{compress-pdf}" th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''" th:text="#{home.compressPdfs.title}"></a>
-						<a class="dropdown-item" href="#" th:href="@{remove-pages}" th:classappend="${currentPage}=='remove-pages' ? 'active' : ''" th:text="#{home.removePages.title}"></a>
-					</div>
-				</li>				
-				
-				
-				
-				<li class="nav-item"><a class="nav-link" href="#"
-						th:href="@{add-image}"
-						th:classappend="${currentPage}=='add-image' ? 'active' : ''"></a></li>
-					
-					<li class="nav-item"><a class="nav-link" href="#"
-						th:href="@{compress-pdf}"
-						th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''"></a></li>	
-									
-					<input type="checkbox" id="toggle-dark-mode" checked="true"
-						th:onclick="javascript:toggleDarkMode()">
-					<a class="nav-link" href="#" for="toggle-dark-mode" th:text="#{navbar.darkmode}"></a>
-					
-					
-					<li class="nav-item dropdown">
-				  <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-				    Language
-				  </a>
-				  <div class="dropdown-menu" aria-labelledby="languageDropdown">
-				    <a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_US">English (US)</a>
-					<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_GB">English (UK)</a>
-					<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ar_AR">العربية</a>
-					<a class="dropdown-item lang_dropdown-item" href="" data-language-code="de_DE">German</a>
-					<a class="dropdown-item lang_dropdown-item" href="" data-language-code="fr_FR">Français</a>
+					<li class="nav-item">
+						<a class="nav-link" href="#" th:href="@{merge-pdfs}" th:classappend="${currentPage}=='merge-pdfs' ? 'active' : ''" th:text="#{home.merge.title}"></a>
+					</li>
 
-				  </div>
-				</li>
+					<li class="nav-item">
+						<a class="nav-link" href="#" th:href="@{split-pdfs}" th:classappend="${currentPage}=='split-pdfs' ? 'active' : ''" th:text="#{home.split.title}"></a>
+					</li>
+
+					<li class="nav-item">
+						<a class="nav-link" href="#" th:href="@{pdf-organizer}" th:classappend="${currentPage}=='pdf-organizer' ? 'active' : ''" th:text="#{home.pdfOrganiser.title}"></a>
+					</li>
+
+					<li class="nav-item">
+						<a class="nav-link" href="#" th:href="@{rotate-pdf}" th:classappend="${currentPage}=='rotate-pdf' ? 'active' : ''" th:text="#{home.rotate.title}"></a>
+					</li>
+
+					<li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' ? 'active' : ''">
+						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  th:text="#{navbar.convert}"></a>
+						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+							<a class="dropdown-item" href="#" th:href="@{pdf-to-img}" th:classappend="${currentPage}=='pdf-to-img' ? 'active' : ''"  th:text="#{home.pdfToImage.title}"></a>
+							<a class="dropdown-item" href="#" th:href="@{img-to-pdf}" th:classappend="${currentPage}=='img-to-pdf' ? 'active' : ''" th:text="#{home.imageToPdf.title}"></a>
+						</div>
+					</li>
+
+					<li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='change-permissions' OR ${currentPage}=='add-watermark' ? 'active' : ''">
+						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  th:text="#{navbar.security}"></a>
+						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+							<a class="dropdown-item" href="#" th:href="@{add-password}" th:classappend="${currentPage}=='add-password' ? 'active' : ''" th:text="#{home.addPassword.title}"></a>
+							<a class="dropdown-item" href="#" th:href="@{remove-password}" th:classappend="${currentPage}=='remove-password' ? 'active' : ''" th:text="#{home.removePassword.title}"></a>
+							<a class="dropdown-item" href="#" th:href="@{change-permissions}" th:classappend="${currentPage}=='change-permissions' ? 'active' : ''" th:text="#{home.permissions.title}"></a>
+							<a class="dropdown-item" href="#" th:href="@{add-watermark}" th:classappend="${currentPage}=='add-watermark' ? 'active' : ''"  th:text="#{home.watermark.title}"></a>
+						</div>
+					</li>
+
+					<li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='add-image' OR ${currentPage}=='compress-pdf' ? 'active' : ''">
+						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="#{navbar.other}"></a>
+						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+							<a class="dropdown-item" href="#" th:href="@{add-image}" th:classappend="${currentPage}=='add-image' ? 'active' : ''" th:text="#{home.addImage.title}"></a>
+							<a class="dropdown-item" href="#" th:href="@{compress-pdf}" th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''" th:text="#{home.compressPdfs.title}"></a>
+							<a class="dropdown-item" href="#" th:href="@{remove-pages}" th:classappend="${currentPage}=='remove-pages' ? 'active' : ''" th:text="#{home.removePages.title}"></a>
+						</div>
+					</li>
+
+					<li class="nav-item">
+						<a class="nav-link" href="#" th:href="@{add-image}" th:classappend="${currentPage}=='add-image' ? 'active' : ''"></a>
+					</li>
+
+					<li class="nav-item">
+						<a class="nav-link" href="#" th:href="@{compress-pdf}" th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''"></a>
+					</li>
+
+					<input type="checkbox" id="toggle-dark-mode" checked="true" th:onclick="javascript:toggleDarkMode()">
+
+					<a class="nav-link" href="#" for="toggle-dark-mode" th:text="#{navbar.darkmode}"></a>
+
+					<li class="nav-item dropdown">
+						<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							<i class="bi bi-globe2"></i>
+						</a>
+						<div class="dropdown-menu" aria-labelledby="languageDropdown">
+							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_US">English (US)</a>
+							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_GB">English (UK)</a>
+							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ar_AR">العربية</a>
+							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="de_DE">German</a>
+							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="fr_FR">Français</a>
+						</div>
+					</li>
 
 				</ul>
 
-				
-				
 				<script>
-				document.addEventListener('DOMContentLoaded', function() {
-					  // Get the dropdown items
-					  var dropdownItems = document.querySelectorAll('.lang_dropdown-item');
-					  
-					  // Loop through the dropdown items
-					  for (var i = 0; i < dropdownItems.length; i++) {
-						  dropdownItems[i].classList.remove('active');
-						  if(dropdownItems[i].dataset.languageCode ===  localStorage.getItem('languageCode')){
-						 	dropdownItems[i].classList.add('active');
-					  	}
-					    // Add a click event listener to each dropdown item
-					    dropdownItems[i].addEventListener('click', function(event) {
-					    	
+					document.addEventListener('DOMContentLoaded', function() {
+						// Get the dropdown items
+						var dropdownItems = document.querySelectorAll('.lang_dropdown-item');
 
-					      // Prevent the default link behavior
-					      event.preventDefault();
-	
-					      // Get the language code
-					      var languageCode = this.dataset.languageCode;
+						// Loop through the dropdown items
+						for (var i = 0; i < dropdownItems.length; i++) {
+							dropdownItems[i].classList.remove('active');
+							if (dropdownItems[i].dataset.languageCode ===  localStorage.getItem('languageCode')) {
+								dropdownItems[i].classList.add('active');
+							}
 
-					      // Save the language code to local storage
-					      localStorage.setItem('languageCode', languageCode);
+							// Add a click event listener to each dropdown item
+							dropdownItems[i].addEventListener('click', function(event) {
 
-					      // Get the current URL
-					      var currentUrl = window.location.href;
+								// Prevent the default link behavior
+								event.preventDefault();
 
-					      // Check if the URL already contains a "?lang" query parameter
-					      if (currentUrl.indexOf('?lang=') === -1) {
-					        // Update the URL with the "?lang" query parameter
-					        window.location.href = currentUrl + '?lang=' + languageCode;
-					      } else {
-					        // Replace the "?lang" query parameter with the new value
-					        window.location.href = currentUrl.replace(/\?lang=\w{2,}/, '?lang=' + languageCode);
-					      }
-					    });
-					  }
+								// Get the language code
+								var languageCode = this.dataset.languageCode;
+
+								// Save the language code to local storage
+								localStorage.setItem('languageCode', languageCode);
+
+								// Get the current URL
+								var currentUrl = window.location.href;
+
+								// Check if the URL already contains a "?lang" query parameter
+								if (currentUrl.indexOf('?lang=') === -1) {
+									// Update the URL with the "?lang" query parameter
+									window.location.href = currentUrl + '?lang=' + languageCode;
+								} else {
+									// Replace the "?lang" query parameter with the new value
+									window.location.href = currentUrl.replace(/\?lang=\w{2,}/, '?lang=' + languageCode);
+								}
+							});
+						}
 					});
-				
 				</script>
+
 			</div>
 		</div>
 	</nav>
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 50bdf4ff..8b04facc 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 
 <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index bab357ae..3326e55d 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{merge.title})}"></th:block>
 
diff --git a/src/main/resources/templates/pdf-organizer.html b/src/main/resources/templates/pdf-organizer.html
index 0fa6037f..08fd4013 100644
--- a/src/main/resources/templates/pdf-organizer.html
+++ b/src/main/resources/templates/pdf-organizer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{pdfOrganiser.title})}"></th:block>
 
diff --git a/src/main/resources/templates/remove-pages.html b/src/main/resources/templates/remove-pages.html
index 7d9fd38c..cd255ff3 100644
--- a/src/main/resources/templates/remove-pages.html
+++ b/src/main/resources/templates/remove-pages.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{pageRemover.title})}"></th:block>
 
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index d4bfae95..c9ef32b6 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -1,55 +1,49 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 
 <th:block th:insert="~{fragments/common :: head(title=#{rotate.title})}"></th:block>
 
 
 <body>	<div id="page-container">
-		<div id="content-wrap">
-	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
-	<br>
-	<br>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col-md-6">
-				<h2 th:text="#{rotate.header}"></h2>
+	<div id="content-wrap">
+		<div th:insert="~{fragments/navbar.html :: navbar}"></div>
+		<br>
+		<br>
+		<div class="container">
+			<div class="row justify-content-center">
+				<div class="col-md-6">
+					<h2 th:text="#{rotate.header}"></h2>
 
-				<form action="#" th:action="@{rotate-pdf}" th:object="${rotateForm}" method="post" enctype="multipart/form-data">
-					<div th:replace="fragments/common :: fileSelector(name='fileInput', multiple=false)"></div>
-					<input type="hidden" id="angleInput" name="angle" value="0">
+					<form action="#" th:action="@{rotate-pdf}" th:object="${rotateForm}" method="post" enctype="multipart/form-data">
+						<div th:replace="fragments/common :: fileSelector(name='fileInput', multiple=false)"></div>
+						<input type="hidden" id="angleInput" name="angle" value="0">
 
-					<div id="editSection" style="display: none">
-						<div class="previewContainer">
-							<img id="pdf-preview"/>
+						<div id="editSection" style="display: none">
+							<div class="previewContainer">
+								<img id="pdf-preview"/>
+							</div>
+
+							<div class="buttonContainer">
+								<button type="button" class="btn btn-secondary" onclick="rotate(-90)">
+									<i class="bi bi-arrow-counterclockwise"></i>
+								</button>
+								<button type="submit" class="btn btn-primary" th:text="#{rotate.submit}"></button>
+								<button type="button" class="btn btn-secondary" onclick="rotate(90)">
+									<i class="bi bi-arrow-clockwise"></i>
+								</button>
+							</div>
 						</div>
+					</form>
 
-						<div class="buttonContainer">
-							<button type="button" class="btn btn-secondary" onclick="rotate(-90)">
-								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-									<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
-									<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
-								</svg>
-							</button>
-							<button type="submit" class="btn btn-primary" th:text="#{rotate.submit}"></button>
-							<button type="button" class="btn btn-secondary" onclick="rotate(90)">
-								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-									<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
-									<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</form>
-
+				</div>
 			</div>
 		</div>
 	</div>
-	</div>
-		<div th:insert="~{fragments/footer.html :: footer}"></div>
-	</div>
+	<div th:insert="~{fragments/footer.html :: footer}"></div>
+</div>
 
-	<script>
+<script>
 		const angleInput = document.getElementById("angleInput");
 		const fileInput = document.getElementById("fileInput-input");
 		const preview = document.getElementById("pdf-preview");
@@ -96,7 +90,7 @@
 			angleInput.value = newAngle;
 		}
 	</script>
-	<style>
+<style>
 		#pdf-preview {
 			margin: 0 auto;
 			display: block;
diff --git a/src/main/resources/templates/security/add-password.html b/src/main/resources/templates/security/add-password.html
index 858806b9..cbd52bb9 100644
--- a/src/main/resources/templates/security/add-password.html
+++ b/src/main/resources/templates/security/add-password.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{addPassword.title})}"></th:block>
 
diff --git a/src/main/resources/templates/security/add-watermark.html b/src/main/resources/templates/security/add-watermark.html
index 2da5c29e..9a7d220d 100644
--- a/src/main/resources/templates/security/add-watermark.html
+++ b/src/main/resources/templates/security/add-watermark.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{watermark.title})}"></th:block>
 
diff --git a/src/main/resources/templates/security/change-permissions.html b/src/main/resources/templates/security/change-permissions.html
index 80b531ad..71cb5bab 100644
--- a/src/main/resources/templates/security/change-permissions.html
+++ b/src/main/resources/templates/security/change-permissions.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{permissions.title})}"></th:block>
 
diff --git a/src/main/resources/templates/security/remove-password.html b/src/main/resources/templates/security/remove-password.html
index 720750c9..d180d109 100644
--- a/src/main/resources/templates/security/remove-password.html
+++ b/src/main/resources/templates/security/remove-password.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{removePassword.title})}"></th:block>
 
diff --git a/src/main/resources/templates/split-pdfs.html b/src/main/resources/templates/split-pdfs.html
index 79f22b37..b26fa20d 100644
--- a/src/main/resources/templates/split-pdfs.html
+++ b/src/main/resources/templates/split-pdfs.html
@@ -1,51 +1,54 @@
 <!DOCTYPE html>
-<html th:lang="${#locale.language}" xmlns:th="http://www.thymeleaf.org">
+<html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:insert="~{fragments/common :: head(title=#{split.title})}"></th:block>
 
 
 <body>
 
- <div id="page-container">
-   <div id="content-wrap">
-	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
-	<br>
-	<br>
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col-md-6">
-				<h1 th:text="#{split.header}"></h1>
-				<p th:text="#{split.desc.1}"></p>
-				<p th:text="#{split.desc.2}"></p>
-				<p th:text="#{split.desc.3}"></p>
-				<p th:text="#{split.desc.4}"></p>
-				<p th:text="#{split.desc.5}"></p>
-				<p th:text="#{split.desc.6}"></p>
-				<p th:text="#{split.desc.7}"></p>
-				<p th:text="#{split.desc.8}"></p>
+<div id="page-container">
+	<div id="content-wrap">
 
-				<form th:action="@{split-pages}" method="post"
-					enctype="multipart/form-data">
-					<div class="custom-file">
-						<input type="file" class="custom-file-input" id="fileInput"
-							name="fileInput" required> <label
-							class="custom-file-label" for="fileInput" th:text="#{pdfPrompt}"></label>
-					</div>
+		<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 
-					<div class="form-group">
-						<label for="pages" th:text="#{split.splitPages}"></label> <input
-							type="text" class="form-control" id="pages" name="pages"
-							placeholder="1,3,5-10" required>
-					</div>
-					<br>
-					<button type="submit" class="btn btn-primary" th:text="#{split.submit}"></button>
-				</form>
-				<th:block th:insert="~{fragments/common :: filelist}"></th:block>
+		<br>
+		<br>
+
+		<div class="container">
+			<div class="row justify-content-center">
+				<div class="col-md-6">
+					<h1 th:text="#{split.header}"></h1>
+
+					<p th:text="#{split.desc.1}"></p>
+					<p th:text="#{split.desc.2}"></p>
+					<p th:text="#{split.desc.3}"></p>
+					<p th:text="#{split.desc.4}"></p>
+					<p th:text="#{split.desc.5}"></p>
+					<p th:text="#{split.desc.6}"></p>
+					<p th:text="#{split.desc.7}"></p>
+					<p th:text="#{split.desc.8}"></p>
+
+					<form th:action="@{split-pages}" method="post" enctype="multipart/form-data">
+						<div class="custom-file">
+							<input type="file" class="custom-file-input" id="fileInput" name="fileInput" required>
+							<label class="custom-file-label" for="fileInput" th:text="#{pdfPrompt}"></label>
+						</div>
+						<div class="form-group">
+							<label for="pages" th:text="#{split.splitPages}"></label>
+							<input type="text" class="form-control" id="pages" name="pages" placeholder="1,3,5-10" required>
+						</div>
+						<br>
+						<button type="submit" class="btn btn-primary" th:text="#{split.submit}"></button>
+					</form>
+
+					<th:block th:insert="~{fragments/common :: filelist}"></th:block>
+
+				</div>
 			</div>
 		</div>
-	</div>
+
 	</div>
 	<div th:insert="~{fragments/footer.html :: footer}"></div>
-	</div>
+</div>
 </body>
 </html>
\ No newline at end of file