美化样式

.idea/webContexts.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="WebContextManager">
+    <option name="state">
+      <map>
+        <entry key="file://$PROJECT_DIR$/src/main/webapp/resources/css" value="file://$PROJECT_DIR$/src/main/webapp" />
+      </map>
+    </option>
+  </component>
+</project>

src/main/webapp/resources/css/auth.css

@@ -13,17 +13,11 @@ main {
 }
 
 section {
-    background: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     width: 40%;
-}
-
-h1 {
-    font-size: 24px;
-    margin-bottom: 20px;
-    color: #333;
+    background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */
 }
 
 .form-container {

src/main/webapp/resources/css/styles.css

@@ -1,5 +1,5 @@
 /* General body styling */
-html, body {
+html {
     font-family: Arial, sans-serif; /* Sets the default font to Arial, with a sans-serif fallback */
     margin: 0; /* Removes default margin */
     padding: 0; /* Removes default padding */
@@ -9,12 +9,26 @@ html, body {
     flex-direction: column;
 }
 
+body {
+    font-family: Arial, sans-serif; /* Sets the default font to Arial, with a sans-serif fallback */
+    margin: 0; /* Removes default margin */
+    padding: 0; /* Removes default padding */
+    /* Sets a light grey background color for the body */
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #f4f4f4 url("/web_assignment_war_exploded/resources/images/background.jpg") no-repeat center center fixed;
+    background-size: cover; /* Ensures the background image covers the entire area without distortion */
+}
+
 /* Header styling */
 header {
-    background-color: #333; /* Dark background color for the header */
+    background-color: rgba(51, 51, 51, 0.8); /* Dark background color with 80% opacity */
     color: #fff; /* White text color for the header */
     padding: 1em 0; /* Adds vertical padding to the header */
     text-align: center; /* Centers the text within the header */
+    position: relative; /* Ensures the header is above the blurred background */
+    z-index: 1;
 }
 
 /* Navigation list styling */
@@ -39,17 +53,19 @@ nav ul li a {
 main {
     padding: 2em; /* Adds padding around the main content */
     flex: 1;
+    z-index: 1;
+    position: relative; /* Ensures the main content is above the blurred background */
 }
 
 /* Footer styling */
 footer {
-    background-color: #333; /* Dark background color for the footer */
+    background-color: rgba(51, 51, 51, 0.8); /* Dark background color with 80% opacity */
     color: #fff; /* White text color for the footer */
     text-align: center; /* Centers the text within the footer */
     padding: 1em 0; /* Adds vertical padding to the footer */
     width: 100%; /* Ensures the footer spans the full width of the page */
-    /* position: absolute; */
-    /* bottom: 0; */
+    position: relative; /* Ensures the footer is above the blurred background */
+    z-index: 1;
 }
 
 /* Project list styling */
@@ -195,7 +211,7 @@ footer {
 /* Project list item styling */
 #project-list, #user-list {
     font-family: Arial, sans-serif;
-    background-color: #f9f9f9;
+    background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -204,6 +220,17 @@ footer {
     text-align: center;
 }
 
+#user-list {
+    font-family: Arial, sans-serif;
+    background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */
+    margin: 20px auto;
+    text-align: center;
+    min-height: 40vh;
+}
 
 #project-list h1 {
     color: #333;
@@ -212,7 +239,7 @@ footer {
 
 #project-details, #user-info {
     font-family: Arial, sans-serif;
-    background-color: #f9f9f9;
+    background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -251,12 +278,13 @@ footer {
 /* 通用样式 */
 .project-form, #user-info-edit {
     font-family: Arial, sans-serif;
-    background-color: #f9f9f9;
+    background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */
     margin: 20px auto;
+    backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
 }
 
 .project-form h2, #user-info-edit h2 {
@@ -315,12 +343,13 @@ footer {
 
 /* Section styling for About Me */
 #about-me {
-    background-color: #fff; /* 白色背景 */
+    background-color: rgba(255, 255, 255, 0.8); /* 白色半透明背景 */
     padding: 20px; /* 内边距 */
     border-radius: 10px; /* 圆角边框 */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 盒子阴影 */
     max-width: 80%; /* 设置最大宽度 */
     margin: 20px auto; /* 垂直外边距和水平居中 */
+    backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
 }
 
 /* Heading styling for About Me */