diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0cafc1c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.venv/
\ No newline at end of file
diff --git a/test/css/login.css b/test/css/login.css
new file mode 100644
index 0000000..71cc78d
--- /dev/null
+++ b/test/css/login.css
@@ -0,0 +1,105 @@
+* {
+ all: unset;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+title {
+ display: none;
+}
+
+body {
+ font-family: "Arial", sans-serif;
+ background: linear-gradient(135deg, #5b727a, #355347);
+ display: flex;
+ align-items: center;
+ height: 100vh;
+ padding-right: 50px;
+}
+body .left-container {
+ flex: 1;
+ padding-left: 50px;
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+body .left-container .logo {
+ height: 190px;
+ max-width: 100%;
+ width: auto;
+ margin-bottom: 20px;
+ align-self: flex-start;
+}
+body .left-container h1 {
+ font-size: 36px;
+ color: #ffffff;
+ margin-bottom: 10px;
+}
+body .left-container p {
+ font-size: 18px;
+ color: rgba(207, 217, 215, 0.9);
+}
+body .login-container {
+ background-color: rgba(255, 255, 255, 0.9);
+ padding: 40px;
+ border-radius: 12px;
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+ width: 350px;
+ text-align: center;
+}
+body .login-container h2 {
+ display: block;
+ margin-bottom: 20px;
+ color: #5f5f5f;
+ font-size: 26px;
+}
+body .login-container form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+body .login-container form input[type=text],
+body .login-container form input[type=password] {
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 15px;
+ border: 1px solid rgba(232, 232, 232, 0.7);
+ border-radius: 6px;
+ font-size: 16px;
+ background-color: rgba(255, 255, 255, 0.95);
+ transition: border-color 0.3s, background-color 0.3s;
+}
+body .login-container form input[type=text]:hover,
+body .login-container form input[type=password]:hover {
+ border-color: #005f73;
+}
+body .login-container form input[type=text]:focus,
+body .login-container form input[type=password]:focus {
+ border-color: #005f73;
+ background-color: #fff;
+ outline: none;
+}
+body .login-container form button {
+ width: 100%;
+ padding: 12px;
+ background-color: #003f5c;
+ color: #fff;
+ border: none;
+ border-radius: 6px;
+ font-size: 18px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.3s, transform 0.3s;
+ box-shadow: 0 4px 10px rgba(0, 95, 115, 0.3);
+}
+body .login-container form button:hover {
+ background-color: #2f798a;
+}
+body .login-container form button:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 6px rgba(70, 70, 70, 0.2);
+}
+
+/*# sourceMappingURL=login.css.map */
diff --git a/test/css/login.css.map b/test/css/login.css.map
new file mode 100644
index 0000000..53419c1
--- /dev/null
+++ b/test/css/login.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;ACAJ;EACE;;;AAIF;EACE;EACA,YCV4B;EDW5B;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA,OCjCqB;EDkCrB;;AAGF;EACE;EACA,OCtCyB;;AD0C7B;EACE,kBC1CoB;ED2CpB;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OClDmB;EDmDnB;;AAGF;EACE;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,kBClEsB;EDmEtB;;AAEA;AAAA;EACI,cCpE0B;;ADsE9B;AAAA;EACE,cCtE4B;EDuE5B;EACA;;AAIJ;EACE;EACA;EACA,kBC9Ea;ED+Eb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBCxFiB;;AD2FnB;EACE;EACA","file":"login.css"}
\ No newline at end of file
diff --git a/test/html/login.html b/test/html/login.html
new file mode 100644
index 0000000..8954aec
--- /dev/null
+++ b/test/html/login.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Login Page
+
+
+
+
+
+
LDAP Manager
+
User management system
+
+
Login
+
+
+
+
+
diff --git a/test/images/logo.png b/test/images/logo.png
new file mode 100644
index 0000000..ad1cb4f
Binary files /dev/null and b/test/images/logo.png differ
diff --git a/test/images/logo2.png b/test/images/logo2.png
new file mode 100644
index 0000000..a513dda
Binary files /dev/null and b/test/images/logo2.png differ
diff --git a/test/scripts/csswatch.sh b/test/scripts/csswatch.sh
new file mode 100644
index 0000000..5646349
--- /dev/null
+++ b/test/scripts/csswatch.sh
@@ -0,0 +1,6 @@
+#!/bin/bash
+idir="/home/lcm/Works/ldapmanager/test/scss"
+odir="/home/lcm/Works/ldapmanager/test/css"
+inotifywait -e modify -m -r $idir | while read events; do
+ sass $idir/:$odir/
+done;
\ No newline at end of file
diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss
new file mode 100644
index 0000000..a33b303
--- /dev/null
+++ b/test/scss/_colors.scss
@@ -0,0 +1,15 @@
+// Login page colors
+$login-page-background-color: linear-gradient(135deg, #5b727a, #355347);
+$login-page-appname-color: #ffffff;
+$login-page-description-color: rgba(207, 217, 215, 0.9);
+$login-form-background: rgba(255, 255, 255, 0.9);
+$login-form-shadow-color: rgba(0, 0, 0, 0.2);
+$login-form-title-color: #5f5f5f;
+$login-form-input-background: rgba(255, 255, 255, 0.95);
+$login-form-input-border-color: rgba(232, 232, 232, 0.7);
+$login-form-input-hover-border-color: #005f73;
+$login-form-input-focus-border-color: #005f73;
+$login-button-color: #003f5c;
+$login-button-hover-color: #2f798a;
+$login-button-shadow: rgba(0, 95, 115, 0.3);
+$login-button-active-shadow: rgba(70, 70, 70, 0.2);
diff --git a/test/scss/_common.scss b/test/scss/_common.scss
new file mode 100644
index 0000000..1f2d385
--- /dev/null
+++ b/test/scss/_common.scss
@@ -0,0 +1,6 @@
+* {
+ all: unset;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/test/scss/login.scss b/test/scss/login.scss
new file mode 100644
index 0000000..7ae8cd9
--- /dev/null
+++ b/test/scss/login.scss
@@ -0,0 +1,111 @@
+@use "common";
+@use "colors" as *; // Import the color scheme
+
+// Hide the title
+title {
+ display: none;
+}
+
+// Basic body styling with a new color theme
+body {
+ font-family: 'Arial', sans-serif;
+ background: $login-page-background-color; // Use login background gradient
+ display: flex;
+ align-items: center;
+ height: 100vh;
+ padding-right: 50px; // Space between the form and the right edge
+
+ .left-container {
+ flex: 1; // Take available space on the left
+ padding-left: 50px; // Space from the left edge
+ text-align: left; // Align text to the left
+ display: flex;
+ flex-direction: column; // Stack elements vertically
+ justify-content: center; // Center elements vertically
+
+ .logo {
+ height: 190px; // Set logo height to 250px
+ max-width: 100%; // Ensure the logo doesn't exceed the container's width
+ width: auto; // Maintain aspect ratio
+ margin-bottom: 20px; // Space below the logo
+ align-self: flex-start; // Align logo to the start (left) of the container
+ }
+
+ h1 {
+ font-size: 36px; // Adjust font size for application name
+ color: $login-page-appname-color; // Use login main text color
+ margin-bottom: 10px; // Space below the heading
+ }
+
+ p {
+ font-size: 18px; // Adjust font size for the description
+ color: $login-page-description-color; // Use login description color
+ }
+ }
+
+ .login-container {
+ background-color: $login-form-background;
+ padding: 40px;
+ border-radius: 12px;
+ box-shadow: 0 8px 15px $login-form-shadow-color;
+ width: 350px;
+ text-align: center;
+
+ h2 {
+ display: block;
+ margin-bottom: 20px; // Add more space below the heading
+ color: $login-form-title-color; // Use login main text color
+ font-size: 26px;
+ }
+
+ form {
+ display: flex;
+ flex-direction: column;
+ align-items: center; // Center the form elements
+
+ input[type="text"],
+ input[type="password"] {
+ width: 100%; // Make the inputs full width of the form
+ padding: 12px;
+ margin-bottom: 15px;
+ border: 1px solid $login-form-input-border-color; // Use login input border color
+ border-radius: 6px;
+ font-size: 16px;
+ background-color: $login-form-input-background; // Use login input background color
+ transition: border-color 0.3s, background-color 0.3s;
+
+ &:hover {
+ border-color: $login-form-input-hover-border-color;
+ }
+ &:focus {
+ border-color: $login-form-input-focus-border-color; // Use focus border color
+ background-color: #fff;
+ outline: none;
+ }
+ }
+
+ button {
+ width: 100%; // Make the button full width of the form
+ padding: 12px;
+ background-color: $login-button-color; // Use login button color
+ color: #fff;
+ border: none;
+ border-radius: 6px;
+ font-size: 18px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.3s, transform 0.3s;
+ box-shadow: 0 4px 10px $login-button-shadow; // Use button shadow color
+
+ &:hover {
+ background-color: $login-button-hover-color; // Use login button hover
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 6px $login-button-active-shadow;
+ }
+ }
+ }
+ }
+}