created user settings in the settings page

py_app/app/static/style.css

@@ -6,7 +6,7 @@ body {
 }
 
 .container {
-    width: 98%;
+    width: 100%;
     margin: auto;
     overflow: hidden;
     padding: 0; /* Remove padding */
@@ -17,10 +17,11 @@ body {
 
 .login-page {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
+    align-items: center; /* Vertically center the content */
+    justify-content: space-between; /* Space between the logo and the form container */
+    height: 100vh; /* Full height of the viewport */
     background-color: #f4f4f9;
+    padding: 0 20px; /* Add padding to the sides */
 }
 
 header {
@@ -92,12 +93,13 @@ header {
 }
 
 .form-container {
-    width: 600px; /* Set a fixed width for the login container */
+    width: 600px; /* Fixed width for the login container */
     background: #fff;
-    padding: 15px 30px 15px 15px; /* Add 30px padding to the right */
+    padding: 15px 30px; /* Add padding inside the container */
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 0 0 0 20px; /* Move the container closer to the picture */
+    margin: 0; /* Remove any extra margin */
+    align-self: center; /* Vertically center the form container */
 }
 
 .form-container h2 {
@@ -228,18 +230,17 @@ body.dark-mode .card {
 
 /* Common card styles */
 .card {
-    width: 400px; /* Fixed width */
-    height: 150px; /* Fixed height */
+    width: 600px;
+    background: #fff;
     border-radius: 5px;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 20px auto; /* Center the card horizontally */
+    margin: 20px auto;
     text-align: center;
-    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
 }
 
 .card h3 {
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     font-size: 1.5em;
 }
 
@@ -261,4 +262,134 @@ body.dark-mode .card {
 
 .card .btn:hover {
     background-color: #0056b3;
+}
+
+.user-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 20px 0;
+}
+
+.user-list li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.user-name {
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.user-role {
+    font-size: 0.9em;
+    color: #555;
+    margin-left: 10px;
+}
+
+.btn {
+    padding: 5px 10px;
+    font-size: 1em;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
+
+.create-btn {
+    margin-top: 20px;
+    background-color: #28a745;
+}
+
+.create-btn:hover {
+    background-color: #218838;
+}
+
+.popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+}
+
+/* Light mode styles for pop-ups */
+body.light-mode .popup-content {
+    background: #fff;
+    color: #000;
+    border: 1px solid #ddd;
+}
+
+/* Dark mode styles for pop-ups */
+body.dark-mode .popup-content {
+    background: #1e1e1e;
+    color: #fff;
+    border: 1px solid #444;
+}
+
+/* Common styles for pop-ups */
+.popup-content {
+    padding: 20px;
+    border-radius: 5px;
+    width: 400px;
+    text-align: center;
+    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
+}
+
+.popup-content h3 {
+    margin-bottom: 20px;
+    font-size: 1.2em;
+}
+
+.popup-content form {
+    display: flex;
+    flex-direction: column;
+}
+
+.popup-content label {
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.popup-content input,
+.popup-content select {
+    margin-bottom: 15px;
+    padding: 10px;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 100%;
+}
+
+.popup-content input[readonly] {
+    background-color: #e9ecef;
+    cursor: not-allowed;
+}
+
+.cancel-btn {
+    background-color: #dc3545;
+}
+
+.cancel-btn:hover {
+    background-color: #c82333;
+}
+
+.delete-confirm-btn {
+    background-color: #dc3545;
+}
+
+.delete-confirm-btn:hover {
+    background-color: #c82333;
 }