added css for prettier page styling

src/main/resources/static/index.css

@@ -1,3 +1,13 @@
+:root {
+    --primary-color: #333;
+    --accent-color: #a00000;
+    --background-color: #F4F4F9;
+    --confirm-button-color: #28a745;
+    --confirm-button-color-hover: #218838;
+    --header-background-color: darkgray;
+}
+
+
 /* General Reset */
 * {
   margin: 0;
@@ -5,23 +15,68 @@
   box-sizing: border-box;
 }
 
+html {
+    background-color: var(--background-color)
+}
+
+header {
+    background-color: var(--header-background-color);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+nav a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.25rem;
+    margin: 10px;
+    margin-top: 0;
+    padding: 5px 10px 5px 10px;
+    border: solid 1px white;
+    border-radius: 5px
+}
+
+footer {
+  background-color: black;
+  color: white;
+  text-align: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 /* Body Styling */
 body {
   font-family: 'Arial', sans-serif;
   background-color: #f4f4f9;
-  color: #333;
+  color: var(--primary-color);
   line-height: 1.6;
   padding: 20px;
+  margin-top: 120px
 }
 
 /* Heading Styling */
-h1 {
+h1, h2 {
   text-align: center;
   font-size: 2.5rem;
-  color: #0044cc;
+  color: var(--accent-color);
   margin-bottom: 30px;
 }
 
+h2 {
+    font-size: 1.5rem;
+}
+
 /* Form Styling */
 form {
   display: flex;
@@ -41,7 +96,7 @@ input[type="text"] {
 button {
   padding: 10px 20px;
   font-size: 1rem;
-  background-color: #0044cc;
+  background-color: var(--accent-color);
   color: #fff;
   border: none;
   border-radius: 4px;
@@ -50,7 +105,7 @@ button {
 }
 
 button:hover {
-  background-color: #0056b3;
+  background-color: var(--accent-color);
 }
 
 /* Table Styling */
@@ -70,8 +125,9 @@ th, td {
 }
 
 th {
-  background-color: #f4f4f9;
-  color: #0044cc;
+  background-color:
+  var(--background-color);
+  color: var(--accent-color);
   font-size: 1.2rem;
 }
 
@@ -81,17 +137,17 @@ td {
 
 td a {
   text-decoration: none;
-  color: #0044cc;
+  color: var(--accent-color);
   font-weight: bold;
   transition: color 0.3s ease;
 }
 
 td a:hover {
-  color: #0056b3;
+  color: var(--accent-color);
 }
 
 tbody tr:hover {
-  background-color: #f9f9f9;
+  background-color: var(--background-color);
 }
 
 /* Responsive Styling */
@@ -118,7 +174,7 @@ tbody tr:hover {
 
 
 .add-member-button {
-    background-color: #28a745; /* Green color */
+    background-color: var(--confirm-button-color); /* Green color */
     color: white;
     padding: 10px 20px;
     text-decoration: none;
@@ -130,5 +186,5 @@ tbody tr:hover {
 
 /* Change button color on hover */
 .add-member-button:hover {
-    background-color: #218838; /* Darker green on hover */
+    background-color: var(--confirm-button-color-hover); /* Darker green on hover */
 }