diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..0a8642fac084e27fe66d81f111393d179c2d95d6
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Zeppelin ignored files
+/ZeppelinRemoteNotebooks/
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000000000000000000000000000000000000..6560a98983ec708cf9d8b5c5c3776d7bd39c475b
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,36 @@
+<component name="InspectionProjectProfileManager">
+ <profile version="1.0">
+ <option name="myName" value="Project Default" />
+ <inspection_tool class="JavaDoc" enabled="true" level="WARNING" enabled_by_default="true">
+ <option name="TOP_LEVEL_CLASS_OPTIONS">
+ <value>
+ <option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
+ <option name="REQUIRED_TAGS" value="" />
+ </value>
+ </option>
+ <option name="INNER_CLASS_OPTIONS">
+ <value>
+ <option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
+ <option name="REQUIRED_TAGS" value="" />
+ </value>
+ </option>
+ <option name="METHOD_OPTIONS">
+ <value>
+ <option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
+ <option name="REQUIRED_TAGS" value="@return@param@throws or @exception" />
+ </value>
+ </option>
+ <option name="FIELD_OPTIONS">
+ <value>
+ <option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
+ <option name="REQUIRED_TAGS" value="" />
+ </value>
+ </option>
+ <option name="IGNORE_DEPRECATED" value="false" />
+ <option name="IGNORE_JAVADOC_PERIOD" value="true" />
+ <option name="IGNORE_DUPLICATED_THROWS" value="false" />
+ <option name="IGNORE_POINT_TO_ITSELF" value="false" />
+ <option name="myAdditionalJavadocTags" value="date" />
+ </inspection_tool>
+ </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/junitgenerator-prj-settings.xml b/.idea/junitgenerator-prj-settings.xml
new file mode 100644
index 0000000000000000000000000000000000000000..8e7c1e2a5645a409d68766669db953f333af1976
--- /dev/null
+++ b/.idea/junitgenerator-prj-settings.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="JUnitGeneratorProjectSettings">
+ <option name="outputFilePattern" value="SOURCEPATH/../../test/java/{PACKAGE}/${FILENAME}" />
+ <option name="selectedTemplateKey" value="JUnit 4" />
+ <option name="vmTemplates">
+ <map>
+ <entry key="JUnit 3" value="######################################################################################## ## ## Available variables: ## $entryList.methodList - List of method composites ## $entryList.privateMethodList - List of private method composites ## $entryList.fieldList - ArrayList of class scope field names ## $entryList.className - class name ## $entryList.packageName - package name ## $today - Todays date in MM/dd/yyyy format ## ## MethodComposite variables: ## $method.name - Method Name ## $method.signature - Full method signature in String form ## $method.reflectionCode - list of strings representing commented out reflection code to access method (Private Methods) ## $method.paramNames - List of Strings representing the method's parameters' names ## $method.paramClasses - List of Strings representing the method's parameters' classes ## ## You can configure the output class name using "testClass" variable below. ## Here are some examples: ## Test${entry.ClassName} - will produce TestSomeClass ## ${entry.className}Test - will produce SomeClassTest ## ######################################################################################## ## #macro (cap $strIn)$strIn.valueOf($strIn.charAt(0)).toUpperCase()$strIn.substring(1)#end ## Iterate through the list and generate testcase for every entry. #foreach ($entry in $entryList) #set( $testClass="${entry.className}Test") ## package test.$entry.packageName; import junit.framework.Test; import junit.framework.TestSuite; import junit.framework.TestCase; /** * ${entry.className} Tester. * * @author <Authors name> * @since <pre>$today</pre> * @version 1.0 */ public class $testClass extends TestCase { public $testClass(String name) { super(name); } public void setUp() throws Exception { super.setUp(); } public void tearDown() throws Exception { super.tearDown(); } #foreach($method in $entry.methodList) /** * * Method: $method.signature * */ public void test#cap(${method.name})() throws Exception { //TODO: Test goes here... } #end #foreach($method in $entry.privateMethodList) /** * * Method: $method.signature * */ public void test#cap(${method.name})() throws Exception { //TODO: Test goes here... #foreach($string in $method.reflectionCode) $string #end } #end public static Test suite() { return new TestSuite(${testClass}.class); } } #end" />
+ <entry key="JUnit 4" value="######################################################################################## ## ## Available variables: ## $entryList.methodList - List of method composites ## $entryList.privateMethodList - List of private method composites ## $entryList.fieldList - ArrayList of class scope field names ## $entryList.className - class name ## $entryList.packageName - package name ## $today - Todays date in MM/dd/yyyy format ## ## MethodComposite variables: ## $method.name - Method Name ## $method.signature - Full method signature in String form ## $method.reflectionCode - list of strings representing commented out reflection code to access method (Private Methods) ## $method.paramNames - List of Strings representing the method's parameters' names ## $method.paramClasses - List of Strings representing the method's parameters' classes ## ## You can configure the output class name using "testClass" variable below. ## Here are some examples: ## Test${entry.ClassName} - will produce TestSomeClass ## ${entry.className}Test - will produce SomeClassTest ## ######################################################################################## ## #macro (cap $strIn)$strIn.valueOf($strIn.charAt(0)).toUpperCase()$strIn.substring(1)#end ## Iterate through the list and generate testcase for every entry. #foreach ($entry in $entryList) #set( $testClass="${entry.className}Test") ## package $entry.packageName; import org.junit.Test; import org.junit.Before; import org.junit.After; /** * ${entry.className} Tester. * * @author <Authors name> * @since <pre>$date</pre> * @version 1.0 */ public class $testClass { @Before public void before() throws Exception { } @After public void after() throws Exception { } #foreach($method in $entry.methodList) /** * * Method: $method.signature * */ @Test public void test#cap(${method.name})() throws Exception { //TODO: Test goes here... } #end #foreach($method in $entry.privateMethodList) /** * * Method: $method.signature * */ @Test public void test#cap(${method.name})() throws Exception { //TODO: Test goes here... #foreach($string in $method.reflectionCode) $string #end } #end } #end" />
+ </map>
+ </option>
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000000000000000000000000000000000000..639900d13c6182e452e33a3bd638e70a0146c785
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectRootManager">
+ <output url="file://$PROJECT_DIR$/out" />
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000000000000000000000000000000000000..1f1d12787be78d153ad52ae97c5b3d4f5b12c57e
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectModuleManager">
+ <modules>
+ <module fileurl="file://$PROJECT_DIR$/.idea/zhushou.iml" filepath="$PROJECT_DIR$/.idea/zhushou.iml" />
+ </modules>
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000000000000000000000000000000000000..94a25f7f4cb416c083d265558da75d457237d671
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="VcsDirectoryMappings">
+ <mapping directory="$PROJECT_DIR$" vcs="Git" />
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/zhushou.iml b/.idea/zhushou.iml
new file mode 100644
index 0000000000000000000000000000000000000000..d6ebd4805981b8400db3e3291c74a743fef9a824
--- /dev/null
+++ b/.idea/zhushou.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+ <component name="NewModuleRootManager" inherit-compiler-output="true">
+ <exclude-output />
+ <content url="file://$MODULE_DIR$" />
+ <orderEntry type="inheritedJdk" />
+ <orderEntry type="sourceFolder" forTests="false" />
+ </component>
+</module>
\ No newline at end of file
diff --git a/Logic/config.php b/Logic/config.php
index b843673e36b3e9b58a699518ea24e16bf9ba75c8..2f860e427adc68106454d39d9a205dced3259462 100644
--- a/Logic/config.php
+++ b/Logic/config.php
@@ -4,13 +4,14 @@ define('DBNAME', 'zhushou');
define('USERNAME', 'root');
define('PASSWORD', 'czx2002819');
-function connect_to_database() {
+function connect_to_database()
+{
try {
- $db = new PDO('mysql:host='.HOST.';dbname='.DBNAME.';charset=utf8', USERNAME, PASSWORD);
+ $db = new PDO('mysql:host=' . HOST . ';dbname=' . DBNAME . ';charset=utf8', USERNAME, PASSWORD);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
- } catch(PDOExcpetion $e) {
+ } catch (PDOExcpetion $e) {
die($e->getMessage());
}
diff --git a/Presentation/LoginPage.php b/Presentation/LoginPage.php
index 758820d0a7034dcbe1241adfe594cb68db8de20b..2b3f3c6c1fa5441fa9b8e76648ae12c94867dac4 100644
--- a/Presentation/LoginPage.php
+++ b/Presentation/LoginPage.php
@@ -4,7 +4,7 @@ require_once '../Logic/config.php';
// 检查是否有POST请求提交表单
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 处理表单提交的数据
- if($_POST["formType"] == "loginForm") {
+ if ($_POST["formType"] == "loginForm") {
session_start(); // 启动会话
// 表单中获取的用户名和密码和学生id
@@ -132,35 +132,21 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
<div class="form-group">
<label for="studentId">Student ID:</label>
- <input type="text" id="studentId" name="studentId" pattern="\d{8}" required title="Student ID must be 8 digits." required>
+ <input type="text" id="studentId" name="studentId" pattern="\d{8}" required
+ title="Student ID must be 8 digits." required>
</div>
<div class="form-group">
<label for="password">Password:</label>
- <input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}" required title="Password must be at least 8 characters long, including 1 uppercase letter, 1 special character, and 1 number." required>
+ <input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}"
+ required
+ title="Password must be at least 8 characters long, including 1 uppercase letter, 1 special character, and 1 number."
+ required>
</div>
<input type="hidden" name="formType" value="loginForm">
<button type="submit">Login</button>
</form>
</div>
-<!--<script>-->
-<!-- document.getElementById('loginForm').addEventListener('submit', function(e) {-->
-<!-- e.preventDefault(); // Prevent the default form submission-->
-<!---->
-<!-- var username = document.getElementById('username').value;-->
-<!-- var studentId = document.getElementById('studentId').value;-->
-<!-- var password = document.getElementById('password').value;-->
-<!---->
-<!-- // Simple authentication logic-->
-<!-- if (username === 'admin' && password === 'Admin2002!' && studentId === '22042692') {-->
-<!-- // Redirect to the admin dashboard-->
-<!-- window.location.href = '/admin-dashboard.html';-->
-<!-- } else {-->
-<!-- // Redirect to the homepage for regular users-->
-<!-- window.location.href = 'interface.php';-->
-<!-- }-->
-<!-- });-->
-<!--</script>-->
</body>
</html>
diff --git a/Presentation/interface.php b/Presentation/interface.php
index d3ce7f7d74123f7a9253dd63b585d5cc96493d5b..63b7a1d51bfc35bca6f0f301b2da43fcf3f8c9be 100644
--- a/Presentation/interface.php
+++ b/Presentation/interface.php
@@ -29,6 +29,7 @@ $userID = $_SESSION['user_id'];
display: flex;
flex-direction: column; /* 使页面内容垂直排列 */
}
+
#appContainer {
display: flex;
width: 100%;
@@ -36,8 +37,9 @@ $userID = $_SESSION['user_id'];
overflow: hidden;
flex: 1; /* 允许appContainer填充剩余空间 */
}
+
#sidebar {
- width: 150px;/* 更瘦小的宽度 */
+ width: 150px; /* 更瘦小的宽度 */
background-color: #232533; /* Dark sidebar */
color: #fff;
padding: 20px;
@@ -54,6 +56,7 @@ $userID = $_SESSION['user_id'];
border-radius: 10px; /* 设置圆角 */
border-right: 1px solid #292A36; /* 添加边框线 */
}
+
.sidebar-item {
background-color: transparent; /* Transparent background */
color: #A4A4A4;
@@ -68,12 +71,14 @@ $userID = $_SESSION['user_id'];
transition: all 0.3s ease; /* 平滑过渡效果 */
display: block; /* 使每个项目成为块级元素 */
}
+
/* Highlight and rounded corners for sidebar items */
.sidebar-item:hover, .sidebar-item.active {
background-color: #292A36; /* 鼠标悬浮或激活状态的背景颜色 */
border-radius: 5px; /* 圆角 */
color: #FFFFFF;
}
+
#chatContainer {
flex-grow: 1;
background-color: #1E1E2E; /* Slightly lighter gray for contrast */
@@ -90,12 +95,14 @@ $userID = $_SESSION['user_id'];
height: calc(100% - 20px); /* 设置高度以填充剩余空间，减去任何必要的边距 */
position: relative; /* 为inputContainer提供定位上下文 */
}
+
#chatLog {
flex-grow: 1;
overflow-y: auto;
padding: 10px;
position: relative;
}
+
#chatLog::before {
content: "UWE Student Assistant";
position: absolute;
@@ -106,18 +113,22 @@ $userID = $_SESSION['user_id'];
font-size: 50px;
display: block;
}
+
#chatLog.has-messages::before {
content: none;
}
+
.message {
display: flex;
flex-direction: column;
align-items: flex-start; /* Align bot messages to the left */
margin-bottom: 10px;
}
+
.message.user {
align-items: flex-end; /* Align user messages to the right */
}
+
.text {
max-width: 70%;
background-color: #292A36; /* Bot message color */
@@ -125,9 +136,11 @@ $userID = $_SESSION['user_id'];
padding: 10px 15px;
border-radius: 15px; /* 更圆润的边框 */;
}
+
.message.user .text {
background-color: #555; /* User message color */
}
+
#inputContainer {
display: flex;
margin-top: 10px;
@@ -138,6 +151,7 @@ $userID = $_SESSION['user_id'];
padding: 0 15px; /* 保持内部内容与chatLog一致的padding */
box-sizing: border-box; /* 确保padding不影响宽度计算 */
}
+
#chatInput, #sendButton {
border: none;
outline: none;
@@ -147,17 +161,20 @@ $userID = $_SESSION['user_id'];
padding: 10px 15px;
border-radius: 15px; /* 统一圆润边框 */
}
+
#chatInput {
flex-grow: 1;
background-color: #414141; /* Dark input field */
color: #fff;
margin-right: 10px;
}
+
#sendButton {
background-color: #575757; /* Dark button */
color: #fff;
cursor: pointer;
}
+
#sendButton:hover {
background-color: #3A3B45; /* Highlight button on hover */
}
@@ -172,7 +189,7 @@ $userID = $_SESSION['user_id'];
top: 0; /* 顶部对齐 */
left: 0; /* 左侧对齐 */
z-index: 100; /* 确保它位于其他内容上方 */
- box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
#logo {
diff --git a/Presentation/register.php b/Presentation/register.php
new file mode 100644
index 0000000000000000000000000000000000000000..473bc3e9f3e118f679c04f6301ebc5ddaf34b61d
--- /dev/null
+++ b/Presentation/register.php
@@ -0,0 +1,238 @@
+<?php
+require_once '../Logic/config.php';
+
+// 检查是否有POST请求提交表单
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+// 处理表单提交的数据
+ if ($_POST["formType"] == "registerForm") {
+ session_start(); // 启动会话
+
+ // 表单中获取的用户名和密码和学生id
+ $account = $_POST['account'];
+ $studentId = $_POST['studentId'];
+ $password = $_POST['password'];
+ $confirm_password = $_POST['confirm_password'];
+ $teleNumber = $_POST['teleNumber'];
+
+ // 检查用户表中是否已存在相同ID的学生
+ $stmt = DB->prepare("SELECT * FROM user WHERE id = ?");
+ $stmt->execute([$studentId]);
+ $existingUser = $stmt->fetch(PDO::FETCH_ASSOC);
+
+ if ($existingUser) {
+ // 学生已存在，提示用户已注册
+ echo "<script>alert('您已注册');</script>";
+ echo "<script>window.location.href = 'LoginPage.php';</script>";
+ exit;
+ }
+
+ //判断密码是否相同
+ if ($password != $confirm_password) {
+ echo "<script>alert('密码与确定密码不匹配！');</script>";
+ echo "<script>window.location.href = 'register.php';</script>";
+ exit;
+ }
+
+ $stmt = DB->prepare("SELECT * FROM student");
+ $stmt->execute();
+ $students = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+ $match = false; // 用于标记是否找到匹配的学生
+
+ foreach ($students as $student) {
+ if ((string)$student['id'] == $studentId) {
+ $match = true; // 找到匹配的学生
+ $_SESSION['user_id'] = $student['id']; // 将用户 ID 存储在会话中
+ //在数据库中创建新用户
+ $sql = "INSERT INTO user(user_Name, user_Major, enrollment_Year, email, account, password, tele_Num, id, user_Type) VALUES (?, ?, ?, ?, ?, ?, ?, ?, 'user')";
+ $stmt = DB->prepare($sql);
+ $stmt->execute([$student['student_name'], $student['major'], $student['enrollment_year'], $student['email'], $account, $password, $teleNumber, $studentId]);
+
+ $sql = "INSERT INTO avatar(id) VALUES (?)";
+ $stmt = DB->prepare($sql);
+ $stmt->execute([$studentId]);
+
+ echo "<script>window.location.href = 'LoginPage.php';</script>";
+ exit;
+ }
+ }
+
+ // 循环结束后，检查是否找到匹配的学生
+ if (!$match) {
+ // 注册失败，显示提示消息
+ echo "<script>alert('抱歉，您不是本校学生/老师');</script>";
+ echo "<script>window.location.href = 'register.php';</script>";
+ exit;
+ }
+ }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Registration</title>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+ }
+
+ .container {
+ display: flex;
+ height: 100vh;
+ }
+
+ .left {
+ background-color: #333;
+ color: #fff;
+ flex: 1;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .left-content {
+ text-align: left;
+ }
+
+ .right {
+ background-color: #F5F5DC;
+ flex: 1;
+ padding: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .form-container {
+ width: 70%; /* 设置表单容器宽度为右边div的百分之70 */
+ padding: 50px 30px; /* 增加上下内边距 */
+ border-radius: 10px;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between; /* 让表单内容均匀分布 */
+ }
+
+ .form-container h2 {
+ margin-bottom: 20px;
+ text-align: center;
+ }
+
+ /* 调整表单项之间的垂直间距 */
+ .form-group {
+ display: flex;
+ margin-bottom: 20px;
+ }
+
+ /*表单内框项样式*/
+ .form-container input[type="text"],
+ .form-container input[type="email"],
+ .form-container input[type="password"] {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ box-sizing: border-box;
+ }
+
+ /*按钮及点击按钮时样式*/
+ .form-container button {
+ width: 100%;
+ padding: 15px;
+ border: none;
+ background-color: #333;
+ color: #fff;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ }
+
+ .form-container button:hover {
+ background-color: #444;
+ }
+
+ /*实现左div内文字的出现效果*/
+ @keyframes fadeInText {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .left-content h1,
+ .left-content h3,
+ .left-content h2 {
+ opacity: 0;
+ animation: fadeInText 1s ease forwards;
+ }
+
+ /* 设置逐个延迟显示 */
+ .left-content h1 {
+ animation-delay: 0.5s; /* h1 最先显示 */
+ }
+
+ .left-content h2 {
+ animation-delay: 1.5s; /* 第一个 h3 后于 h1 */
+ }
+
+ .left-content h3 {
+ animation-delay: 2s;
+ }
+ </style>
+</head>
+<body>
+<div class="container">
+ <div class="left">
+ <div class="left-content">
+ <h1>Welcome to New International Student Helper</h1>
+ <h2>Bridging Cultures, Empowering Students - Your Guide to UWE & Bristol Life!</h2>
+ <h3>Feel free to explore our services!</h3>
+ </div>
+ </div>
+ <div class="right">
+ <div class="form-container">
+ <h2>Register</h2>
+ <form id="registerForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" οnsubmit="return on_submit()">
+ <div class="form-group">
+ <input type="text" name="account" placeholder="Account" required>
+ </div>
+ <div class="form-group">
+ <input type="password" id="password" name="password" placeholder="Password"
+ pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}" required
+ title="Password must be at least 8 characters long, including 1 uppercase letter, 1 special character, and 1 number."
+ required>
+ </div>
+ <div class="form-group">
+ <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm Password"
+ required>
+ <span id="password_match_message"></span>
+ </div>
+ <div class="form-group">
+ <input type="text" id="studentId" name="studentId" placeholder="Your student ID" pattern="\d{8}"
+ required title="Student ID must be 8 digits." required>
+ </div>
+ <div class="form-group">
+ <input type="text" id="teleNumber" name="teleNumber" placeholder="Telephone Number" required>
+ </div>
+ <div class="form-group">
+ <input type="hidden" name="formType" value="registerForm">
+ <button type="submit">Register</button>
+ </div>
+ </form>
+ </div>
+ </div>
+</div>
+</body>
+</html>
+
diff --git a/Presentation/settings.php b/Presentation/settings.php
index a77a7cc02335a7e9185ada3793d856ec98dfc908..d52c63107ce3247d087d8a933fc509ff787cf01f 100644
--- a/Presentation/settings.php
+++ b/Presentation/settings.php
@@ -12,13 +12,15 @@ if (!isset($_SESSION['user_id'])) {
// 获取用户 ID
$userId = $_SESSION['user_id'];
-function updateUserInformation($userId, $name, $email, $major, $year) {
+function updateUserInformation($userId, $name, $email, $major, $year)
+{
$sql = "UPDATE user SET user_Name = ?, email = ?, user_Major = ?, enrollment_Year = ? WHERE id = ?";
$stmt = DB->prepare($sql);
return $stmt->execute([$name, $email, $major, $year, $userId]);
}
-function updateAccountInfo($account, $password, $userId) {
+function updateAccountInfo($account, $password, $userId)
+{
$sql = "UPDATE user SET account = ?, password = ? WHERE id = ?";
$stmt = DB->prepare($sql);
return $stmt->execute([$account, $password, $userId]);
@@ -30,7 +32,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$userId = isset($_POST['userId']) ? $_POST['userId'] : null;
// 处理表单提交的数据
- if($_POST["formType"] == "UserForm") {
+ if ($_POST["formType"] == "UserForm") {
// 获取表单数据
$name = $_POST['name'];
$email = $_POST['email'];
@@ -69,244 +71,249 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>User Information Management</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
- <style>
- body {
- font-family: 'Roboto', sans-serif;
- background-color: #1E1E2E; /* 使用与interface.html相同的背景颜色 */
- color: #EAEAEA; /* 使用与interface.html相同的文字颜色 */
- margin: 0;
- padding: 0;
- overflow: auto;
- }
-
- .container {
- margin: auto;
- padding: 50px;
- flex-direction: column;
- align-items: center; /* 居中对齐卡片 */
- }
-
- #topbar {
- background-color: #292A36;
- color: #EAEAEA; /* 白色文字 */
- text-align: left; /* 文字居中 */
- padding: 25px 0; /* 上下内边距10px，左右0 */
- width: 100%; /* 宽度为100% */
- position: fixed; /* 固定位置 */
- top: 0; /* 顶部对齐 */
- left: 0; /* 左侧对齐 */
- z-index: 100; /* 确保它位于其他内容上方 */
- box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
- }
-
- #logo {
- margin-left: 30px;
- }
-
- .card {
- background-color: #232533; /* 卡片背景颜色 */
- padding: 20px;
- border-radius: 8px;
- box-shadow: 0 4px 8px rgba(0,0,0,.3);
- text-align: center;
- min-width: 200px; /* Minimum width of the card */
- max-width: 600px; /* Maximum width of the card */
- margin: 20px auto; /* 上下各20px间隙，左右自动（保持水平居中） */
- }
- .card h2, .card p {
- margin: 10px 0;
- }
- .button {
- background-color: #292A36; /* 按钮背景颜色 */
- border: none;
- color: #FFFFFF; /* 按钮文字颜色 */
- padding: 10px 20px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- margin: 4px 2px;
- cursor: pointer;
- border-radius: 4px;
- transition: background-color .3s;
- }
- .button:hover {
- background-color: #3A3B45; /* 鼠标悬浮时按钮的背景颜色 */
- }
- .avatar {
- width: 100px;
- height: 100px;
- border-radius: 50%;
- overflow: hidden;
- display: block;
- margin: 20px auto;
- }
- .avatar img {
- width: 100%;
- height: auto;
- }
-
- .modern-button {
- padding: 12px 24px;
- font-family: Arial, sans-serif;
- font-size: 18px;
- text-align: center;
- cursor: pointer;
- outline: none;
- color: #FFFFFF; /* 按钮文字颜色 */
- background-color: #292A36; /* 按钮背景颜色 */
- border: none;
- border-radius: 5px;
- box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
- transition: all 0.3s ease;
- }
-
- .modern-button:hover {
- background-color: #3A3B45; /* 鼠标悬浮时按钮的背景颜色 */
- box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
- }
-
- .modern-button:active {
- background-color: #1f1f1f;
- box-shadow: 0 6px 12px 0 rgba(0,0,0,.2);
- transform: translateY(2px);
- }
-
- .input-group {
- display: flex; /* 使用flex布局 */
- align-items: center; /* 垂直居中对齐 */
- justify-content: start; /* 从行的起始端开始排列 */
- margin-bottom: 10px; /* 与下一个input-group的间隔 */
- }
-
- .input-group label {
- margin-right: 10px; /* 标签与输入框之间的间隔 */
- color: #A4A4A4; /* 标签颜色 */
- }
-
- .input-group input[type="text"],
- .input-group input[type="password"] {
- color: #EAEAEA; /* 输入框文字颜色 */
- flex-grow: 1; /* 输入框会占据剩余空间 */
- margin-right: 10px; /* 输入框与按钮之间的间隔 */
- background-color: transparent; /* 设置输入框背景为透明 */
- border: none; /* 移除输入框边框 */
- }
-
- #newUsername, #newPassword {
- border: none; /* 移除输入框边框 */
- flex-grow: 1; /* 输入框会占据剩余空间 */
- margin-right: 10px; /* 输入框与按钮之间的间隔 */
- }
-
- .toggle-btn {
- display: block; /* 使按钮单独占一行 */
- margin-top: 10px; /* 按钮与输入框之间的间隔 */
- color: #EAEAEA; /* 切换按钮颜色 */
- background-color: transparent;
- cursor: pointer;
- margin-left: 10px;
- /* 其他样式保持不变 */
- }
-
- .toggle-btn:hover {
- color: #bbb; /* 悬浮时的颜色变化 */
- }
-
- .AI-button {
- display: block; /* 使按钮单独占一行 */
- margin-top: 20px; /* 按钮与上方元素之间的间隔 */
- padding: 12px 24px;
- font-family: Arial, sans-serif;
- font-size: 18px;
- text-align: center;
- cursor: pointer;
- outline: none;
- color: #FFFFFF;
- background-color: #333333;
- border: none;
- border-radius: 5px;
- box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
- transition: all 0.3s ease;
- }
-
- /* 模态框样式 */
- .modal {
- display: none; /* 初始状态下隐藏模态框 */
- position: fixed;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgba(0,0,0,0.4); /* 添加半透明背景 */
- }
-
- /* 模态框内容样式 */
- .modal-content {
- background-color: #1E1E2E;
- margin: 15% auto;
- padding: 20px;
- border: 1px solid #888;
- width: 80%;
- border-radius: 8px; /* 与 card 样式保持一致 */
- box-shadow: 0 4px 8px rgba(0,0,0,.3); /* 与 card 样式保持一致 */
- text-align: center;
- min-width: 200px; /* 与 card 样式保持一致 */
- max-width: 600px; /* 与 card 样式保持一致 */
- position: relative;
- }
-
- /* 关闭按钮样式 */
- .close {
- position: absolute;
- top: 10px;
- right: 10px;
- color: #aaa;
- font-size: 28px;
- font-weight: bold;
- cursor: pointer;
- }
-
- .close:hover,
- .close:focus {
- color: black;
- text-decoration: none;
- }
-
- /*返回首页的按钮样式*/
- #return-home-btn {
- position: fixed;
- right: 20px; /* 放置在右下角 */
- bottom: 20px;
- width: 50px; /* 宽度，使其更接近正方形 */
- height: 50px; /* 高度 */
- background-color: #333; /* 按钮背景色 */
- color: white; /* 图标颜色 */
- border-radius: 10px; /* 轻微的圆角 */
- text-align: center;
- line-height: 50px; /* 与按钮高度相同，使图标垂直居中 */
- text-decoration: none;
- border: none;
- cursor: pointer;
- transition: background-color 0.3s; /* 平滑的背景色变化效果 */
- }
-
- #return-home-btn:hover {
- background-color: #555; /* 鼠标悬停时的背景色 */
- }
-
- #return-home-btn i {
- font-size: 20px; /* 图标大小 */
- vertical-align: middle;
- }
-
- </style>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>User Information Management</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+ <style>
+ body {
+ font-family: 'Roboto', sans-serif;
+ background-color: #1E1E2E; /* 使用与interface.html相同的背景颜色 */
+ color: #EAEAEA; /* 使用与interface.html相同的文字颜色 */
+ margin: 0;
+ padding: 0;
+ overflow: auto;
+ }
+
+ .container {
+ margin: auto;
+ padding: 50px;
+ flex-direction: column;
+ align-items: center; /* 居中对齐卡片 */
+ }
+
+ #topbar {
+ background-color: #292A36;
+ color: #EAEAEA; /* 白色文字 */
+ text-align: left; /* 文字居中 */
+ padding: 25px 0; /* 上下内边距10px，左右0 */
+ width: 100%; /* 宽度为100% */
+ position: fixed; /* 固定位置 */
+ top: 0; /* 顶部对齐 */
+ left: 0; /* 左侧对齐 */
+ z-index: 100; /* 确保它位于其他内容上方 */
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
+ }
+
+ #logo {
+ margin-left: 30px;
+ }
+
+ .card {
+ background-color: #232533; /* 卡片背景颜色 */
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
+ text-align: center;
+ min-width: 200px; /* Minimum width of the card */
+ max-width: 600px; /* Maximum width of the card */
+ margin: 20px auto; /* 上下各20px间隙，左右自动（保持水平居中） */
+ }
+
+ .card h2, .card p {
+ margin: 10px 0;
+ }
+
+ .button {
+ background-color: #292A36; /* 按钮背景颜色 */
+ border: none;
+ color: #FFFFFF; /* 按钮文字颜色 */
+ padding: 10px 20px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ cursor: pointer;
+ border-radius: 4px;
+ transition: background-color .3s;
+ }
+
+ .button:hover {
+ background-color: #3A3B45; /* 鼠标悬浮时按钮的背景颜色 */
+ }
+
+ .avatar {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ overflow: hidden;
+ display: block;
+ margin: 20px auto;
+ }
+
+ .avatar img {
+ width: 100%;
+ height: auto;
+ }
+
+ .modern-button {
+ padding: 12px 24px;
+ font-family: Arial, sans-serif;
+ font-size: 18px;
+ text-align: center;
+ cursor: pointer;
+ outline: none;
+ color: #FFFFFF; /* 按钮文字颜色 */
+ background-color: #292A36; /* 按钮背景颜色 */
+ border: none;
+ border-radius: 5px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
+ transition: all 0.3s ease;
+ }
+
+ .modern-button:hover {
+ background-color: #3A3B45; /* 鼠标悬浮时按钮的背景颜色 */
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
+ }
+
+ .modern-button:active {
+ background-color: #1f1f1f;
+ box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .2);
+ transform: translateY(2px);
+ }
+
+ .input-group {
+ display: flex; /* 使用flex布局 */
+ align-items: center; /* 垂直居中对齐 */
+ justify-content: start; /* 从行的起始端开始排列 */
+ margin-bottom: 10px; /* 与下一个input-group的间隔 */
+ }
+
+ .input-group label {
+ margin-right: 10px; /* 标签与输入框之间的间隔 */
+ color: #A4A4A4; /* 标签颜色 */
+ }
+
+ .input-group input[type="text"],
+ .input-group input[type="password"] {
+ color: #EAEAEA; /* 输入框文字颜色 */
+ flex-grow: 1; /* 输入框会占据剩余空间 */
+ margin-right: 10px; /* 输入框与按钮之间的间隔 */
+ background-color: transparent; /* 设置输入框背景为透明 */
+ border: none; /* 移除输入框边框 */
+ }
+
+ #newUsername, #newPassword {
+ border: none; /* 移除输入框边框 */
+ flex-grow: 1; /* 输入框会占据剩余空间 */
+ margin-right: 10px; /* 输入框与按钮之间的间隔 */
+ }
+
+ .toggle-btn {
+ display: block; /* 使按钮单独占一行 */
+ margin-top: 10px; /* 按钮与输入框之间的间隔 */
+ color: #EAEAEA; /* 切换按钮颜色 */
+ background-color: transparent;
+ cursor: pointer;
+ margin-left: 10px;
+ /* 其他样式保持不变 */
+ }
+
+ .toggle-btn:hover {
+ color: #bbb; /* 悬浮时的颜色变化 */
+ }
+
+ .AI-button {
+ display: block; /* 使按钮单独占一行 */
+ margin-top: 20px; /* 按钮与上方元素之间的间隔 */
+ padding: 12px 24px;
+ font-family: Arial, sans-serif;
+ font-size: 18px;
+ text-align: center;
+ cursor: pointer;
+ outline: none;
+ color: #FFFFFF;
+ background-color: #333333;
+ border: none;
+ border-radius: 5px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
+ transition: all 0.3s ease;
+ }
+
+ /* 模态框样式 */
+ .modal {
+ display: none; /* 初始状态下隐藏模态框 */
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0, 0, 0, 0.4); /* 添加半透明背景 */
+ }
+
+ /* 模态框内容样式 */
+ .modal-content {
+ background-color: #1E1E2E;
+ margin: 15% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+ border-radius: 8px; /* 与 card 样式保持一致 */
+ box-shadow: 0 4px 8px rgba(0, 0, 0, .3); /* 与 card 样式保持一致 */
+ text-align: center;
+ min-width: 200px; /* 与 card 样式保持一致 */
+ max-width: 600px; /* 与 card 样式保持一致 */
+ position: relative;
+ }
+
+ /* 关闭按钮样式 */
+ .close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ color: #aaa;
+ font-size: 28px;
+ font-weight: bold;
+ cursor: pointer;
+ }
+
+ .close:hover,
+ .close:focus {
+ color: black;
+ text-decoration: none;
+ }
+
+ /*返回首页的按钮样式*/
+ #return-home-btn {
+ position: fixed;
+ right: 20px; /* 放置在右下角 */
+ bottom: 20px;
+ width: 50px; /* 宽度，使其更接近正方形 */
+ height: 50px; /* 高度 */
+ background-color: #333; /* 按钮背景色 */
+ color: white; /* 图标颜色 */
+ border-radius: 10px; /* 轻微的圆角 */
+ text-align: center;
+ line-height: 50px; /* 与按钮高度相同，使图标垂直居中 */
+ text-decoration: none;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.3s; /* 平滑的背景色变化效果 */
+ }
+
+ #return-home-btn:hover {
+ background-color: #555; /* 鼠标悬停时的背景色 */
+ }
+
+ #return-home-btn i {
+ font-size: 20px; /* 图标大小 */
+ vertical-align: middle;
+ }
+
+ </style>
</head>
<body>
@@ -316,34 +323,35 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
<div id="logo">UWE Student Assistant</div>
</div>
- <form action="settings.php" method="post" id="editForm" enctype="multipart/form-data">
- <div class="card">
- <div class="avatar">
- <img src="getimage.php?userId=<?php echo htmlspecialchars($userId); ?>" alt="User Avatar" >
- </div>
- <div class="input-group">
- <label for="name">Name:</label>
- <input type="text" id="name" name="name" value="<?php echo htmlspecialchars($user['user_Name']); ?>">
- </div>
- <div class="input-group">
- <label for="email">Email:</label>
- <input type="text" id="email" name="email" value="<?php echo htmlspecialchars($user['email']); ?>">
- </div>
- <div class="input-group">
- <label for="major">Major:</label>
- <input type="text" id="major" name="major" value="<?php echo htmlspecialchars($user['user_Major']); ?>">
- </div>
- <div class="input-group">
- <label for="year">Enrollment Year:</label>
- <input type="text" id="year" name="year" value="<?php echo htmlspecialchars($user['enrollment_Year']); ?>">
- </div>
- <input type="hidden" name="formType" value="UserForm">
-<!-- 隐藏字段用于在提交表单时传递userid-->
- <input type="hidden" name="userId" value="<?php echo htmlspecialchars($userId); ?>">
- <button type="submit" class="button">Save Changes</button>
- <button class="button" onclick="openAvaModal(event)">Change Avatar</button>
- </div>
- </form>
+ <form action="settings.php" method="post" id="editForm" enctype="multipart/form-data">
+ <div class="card">
+ <div class="avatar">
+ <img src="getimage.php?userId=<?php echo htmlspecialchars($userId); ?>" alt="User Avatar">
+ </div>
+ <div class="input-group">
+ <label for="name">Name:</label>
+ <input type="text" id="name" name="name" value="<?php echo htmlspecialchars($user['user_Name']); ?>">
+ </div>
+ <div class="input-group">
+ <label for="email">Email:</label>
+ <input type="text" id="email" name="email" value="<?php echo htmlspecialchars($user['email']); ?>">
+ </div>
+ <div class="input-group">
+ <label for="major">Major:</label>
+ <input type="text" id="major" name="major" value="<?php echo htmlspecialchars($user['user_Major']); ?>">
+ </div>
+ <div class="input-group">
+ <label for="year">Enrollment Year:</label>
+ <input type="text" id="year" name="year"
+ value="<?php echo htmlspecialchars($user['enrollment_Year']); ?>">
+ </div>
+ <input type="hidden" name="formType" value="UserForm">
+ <!-- 隐藏字段用于在提交表单时传递userid-->
+ <input type="hidden" name="userId" value="<?php echo htmlspecialchars($userId); ?>">
+ <button type="submit" class="button">Save Changes</button>
+ <button class="button" onclick="openAvaModal(event)">Change Avatar</button>
+ </div>
+ </form>
<!-- 模态框 -->
<form action="settings.php" method="post" enctype="multipart/form-data">
@@ -364,57 +372,60 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
</form>
<div class="card">
- <h2>Account Information</h2>
- <div class="input-group">
- <label for="username">User Account:</label>
- <input type="text" id="username" name="account" value="<?php echo htmlspecialchars($user['account']); ?>">
- </div>
- <div class="input-group">
- <label for="password">Password:</label>
- <input type="password" id="password" name="password" value="<?php echo htmlspecialchars($user['password']); ?>">
- <button class="toggle-btn" onclick="togglePasswordVisibility()">👁</button>
+ <h2>Account Information</h2>
+ <div class="input-group">
+ <label for="username">User Account:</label>
+ <input type="text" id="username" name="account" value="<?php echo htmlspecialchars($user['account']); ?>">
+ </div>
+ <div class="input-group">
+ <label for="password">Password:</label>
+ <input type="password" id="password" name="password"
+ value="<?php echo htmlspecialchars($user['password']); ?>">
+ <button class="toggle-btn" onclick="togglePasswordVisibility()">👁</button>
+ </div>
+ <button class="modern-button" onclick="openModal()">Edit Your Info</button>
</div>
- <button class="modern-button" onclick="openModal()">Edit Your Info</button>
- </div>
<!-- 模态框 -->
<form action="settings.php" method="post">
- <div id="myModal" class="modal">
- <div class="modal-content">
- <span class="close" onclick="closeModal()">×</span>
- <h2>Edit Credentials</h2>
- <div class="input-group">
- <label for="newUsername">New Username:</label>
- <input id="newUsername" name="account">
- </div>
- <div class="input-group">
- <label for="newPassword">New Password:</label>
- <input id="newPassword" name="password">
+ <div id="myModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeModal()">×</span>
+ <h2>Edit Credentials</h2>
+ <div class="input-group">
+ <label for="newUsername">New account:</label>
+ <input id="newUsername" name="account">
+ </div>
+ <div class="input-group">
+ <label for="newPassword">New Password:</label>
+ <input id="newPassword" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}"
+ required
+ title="Password must be at least 8 characters long, including 1 uppercase letter, 1 special character, and 1 number.">
+ </div>
+ <input type="hidden" name="formType" value="ModalForm">
+ <!-- 隐藏字段用于在提交表单时传递userid-->
+ <input type="hidden" name="userId" value="<?php echo htmlspecialchars($userId); ?>">
+ <button class="modern-button" type="submit">Save Changes</button>
</div>
- <input type="hidden" name="formType" value="ModalForm">
- <!-- 隐藏字段用于在提交表单时传递userid-->
- <input type="hidden" name="userId" value="<?php echo htmlspecialchars($userId); ?>">
- <button class="modern-button" type="submit">Save Changes</button>
</div>
- </div>
</form>
- <div class="card">
- <h2>More information</h2>
- <p>if you wanna get your marks, documents or know your tution fee, pls go this link👇</p>
- <button onclick="window.location.href='https://my.uwe.ac.uk/uPortal/f/u28l1s4100/normal/render.uP';" class="modern-button">Go to myuwe</button>
- </div>
-
- <form action="../Logic/logout.php" method="post">
<div class="card">
- <h2>Log Out</h2>
- <p>Click the button below to log out of your account.</p>
- <button class="modern-button" type="submit">Log Out</button>
+ <h2>More information</h2>
+ <p>if you wanna get your marks, documents or know your tution fee, pls go this link👇</p>
+ <button onclick="window.location.href='https://my.uwe.ac.uk/uPortal/f/u28l1s4100/normal/render.uP';"
+ class="modern-button">Go to myuwe
+ </button>
</div>
-<!-- </form>再加一个模态框来确定用户是否退出账号-->
-</div>
-
+ <form action="../Logic/logout.php" method="post">
+ <div class="card">
+ <h2>Log Out</h2>
+ <p>Click the button below to log out of your account.</p>
+ <button class="modern-button" type="submit">Log Out</button>
+ </div>
+ <!-- </form>再加一个模态框来确定用户是否退出账号-->
+</div>
<a href="interface.php" id="return-home-btn"><i class="fas fa-arrow-left"></i></a>
diff --git a/Presentation/test.html b/Presentation/test.html
deleted file mode 100644
index 5b3158fcdab677d7bc08b596f197b8793120ebcc..0000000000000000000000000000000000000000
--- a/Presentation/test.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!--<?php require_once 'php/config.php'; ?>-->
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Chat Interface with Aligned Messages</title>
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
- <style>
- body, html {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- font-family: 'Roboto', sans-serif;
- background-color: #1E1E2E; /* Deep gray background */
- display: flex;
- flex-direction: column; /* 使页面内容垂直排列 */
- }
- #appContainer {
- display: flex;
- width: 100%;
- height: 100%;
- overflow: hidden;
- flex: 1; /* 允许appContainer填充剩余空间 */
- }
- #sidebar {
- width: 150px;/* 更瘦小的宽度 */
- background-color: #232533; /* Dark sidebar */
- color: #fff;
- padding: 20px;
- box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); /* 设置阴影，使其看起来悬浮 */
- display: flex;
- flex-direction: column;
- align-items: center;
- position: fixed; /* 固定位置 */
- top: 10%; /* 设置顶部为视口的50% */
- left: 15px; /* 与左侧边缘保持一定距离 */
- bottom: 0; /* 底部对齐 */
- overflow-x: hidden; /* 隐藏水平滚动条 */
- z-index: 1000; /* 设置z-index确保它在其他内容之上 */
- border-radius: 10px; /* 设置圆角 */
- border-right: 1px solid #292A36; /* 添加边框线 */
- }
- .sidebar-item {
- background-color: transparent; /* Transparent background */
- color: #A4A4A4;
- padding: 10px 20px;
- text-decoration: none; /* 去除下划线 */
- width: 100%;
- text-align: center;
- border-radius: 5px; /* 轻微的圆角 */
- margin: 10px 0; /* 添加一些上下外边距 */
- margin-right: 10px;
- font-size: 14px; /* 字体尺寸调整 */
- transition: all 0.3s ease; /* 平滑过渡效果 */
- display: block; /* 使每个项目成为块级元素 */
- }
- /* Highlight and rounded corners for sidebar items */
- .sidebar-item:hover, .sidebar-item.active {
- background-color: #292A36; /* 鼠标悬浮或激活状态的背景颜色 */
- border-radius: 5px; /* 圆角 */
- color: #FFFFFF;
- }
- #chatContainer {
- flex-grow: 1;
- background-color: #1E1E2E; /* Slightly lighter gray for contrast */
- display: flex;
- flex-direction: column;
- /*flex: 1; !* 允许chatContainer自动填充剩余空间 *!*/
- padding: 15px;
- color: #EAEAEA;
- margin-left: 230px; /* 与侧边栏宽度匹配 */
- margin-top: 10%;
- margin-top: 5%;
- transition: margin-left 0.3s; /* 平滑过渡效果 */
- overflow-y: auto; /* 允许在垂直方向上滚动 */
- height: calc(100% - 20px); /* 设置高度以填充剩余空间，减去任何必要的边距 */
- position: relative; /* 为inputContainer提供定位上下文 */
- }
- #chatLog {
- flex-grow: 1;
- overflow-y: auto;
- padding: 10px;
- position: relative;
- }
- #chatLog::before {
- content: "UWE Student Assistant";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: rgba(255, 255, 255, 0.5); /* 深色模式下的文字颜色，半透明 */
- font-size: 50px;
- display: block;
- }
- #chatLog.has-messages::before {
- content: none;
- }
- .message {
- display: flex;
- flex-direction: column;
- align-items: flex-start; /* Align bot messages to the left */
- margin-bottom: 10px;
- }
- .message.user {
- align-items: flex-end; /* Align user messages to the right */
- }
- .text {
- max-width: 70%;
- background-color: #292A36; /* Bot message color */
- color: #EAEAEA;
- padding: 10px 15px;
- border-radius: 15px; /* 更圆润的边框 */;
- }
- .message.user .text {
- background-color: #555; /* User message color */
- }
- #inputContainer {
- display: flex;
- margin-top: 10px;
- position: absolute; /* 绝对定位，基于chatContainer定位 */
- bottom: 15%; /* 距离底部的距离 */
- left: 0; /* 左对齐 */
- width: 100%; /* 宽度与chatContainer一致 */
- padding: 0 15px; /* 保持内部内容与chatLog一致的padding */
- box-sizing: border-box; /* 确保padding不影响宽度计算 */
- }
- #chatInput, #sendButton {
- border: none;
- outline: none;
- transition: background-color 0.3s;
- background-color: #232533; /* 输入和按钮背景色 */
- color: #EAEAEA; /* 输入和按钮文本颜色 */
- padding: 10px 15px;
- border-radius: 15px; /* 统一圆润边框 */
- }
- #chatInput {
- flex-grow: 1;
- background-color: #414141; /* Dark input field */
- color: #fff;
- margin-right: 10px;
- }
- #sendButton {
- background-color: #575757; /* Dark button */
- color: #fff;
- cursor: pointer;
- }
- #sendButton:hover {
- background-color: #3A3B45; /* Highlight button on hover */
- }
-
- #topbar {
- background-color: #292A36;
- color: #EAEAEA; /* 白色文字 */
- text-align: left; /* 文字居中 */
- padding: 25px 0; /* 上下内边距10px，左右0 */
- width: 100%; /* 宽度为100% */
- position: fixed; /* 固定位置 */
- top: 0; /* 顶部对齐 */
- left: 0; /* 左侧对齐 */
- z-index: 100; /* 确保它位于其他内容上方 */
- box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
- }
-
- #logo {
- margin-left: 30px;
- }
- </style>
-</head>
-<body>
-
-<div id="appContainer">
-
- <div id="topbar">
- <div id="logo">UWE Student Assistant</div>
- </div>
-
- <div id="sidebar">
- <a href="map.php" class="sidebar-item" target="contentFrame">Around Frenchay Campus</a>
- <a href="your-link-2.html" class="sidebar-item" target="contentFrame">Around Bristol</a>
- <a href="your-link-3.html" class="sidebar-item" target="contentFrame">Posts</a>
- <a href="settings.php" class="sidebar-item" target="contentFrame"><i class="fas fa-home"></i> User Profile</a>
- </div>
-
- <div id="chatContainer">
- <iframe id="contentFrame" src="chatbot.php" style="width: 100%; height: 100%; border: none;"></iframe>
- </div>
-
-</div>
-
-</body>
-</html>