diff --git a/Logic/chat.js b/Logic/chat.js
index 94ace07e78c7c21a7d9ce5be6511ef4e5079e19d..6ddc70e1d27b7abdd75a16093585a834dd926c2b 100644
--- a/Logic/chat.js
+++ b/Logic/chat.js
@@ -12,12 +12,23 @@ function fetchOnlineUsers() {
// 添加在线用户到列表中
users.forEach(function (user) {
var li = document.createElement('li');
- li.textContent = user.user_Name; // 假设 'username' 是用户表中用户名的字段
+ var userImage = document.createElement('img');
+ userImage.src = "../Logic/getimage.php?userId=" + encodeURIComponent(user.id);
+ userImage.alt = "User Avatar";
+ userImage.style.width = '50px'; // 设置头像大小
+ userImage.style.height = '50px';
+ userImage.style.borderRadius = '50%'; // 头像为圆形
+ userImage.style.marginRight = '10px';
+
+ var userName = document.createElement('span');
+ userName.textContent = user.user_Name;
+
+ li.appendChild(userImage);
+ li.appendChild(userName);
usersList.appendChild(li);
});
} catch (e) {
console.error("Parsing error:", e);
- // 此处可能需要处理错误
}
}
};
@@ -37,6 +48,7 @@ function fetchMessages() {
messages.forEach(function(message) {
var messageDiv = document.createElement('div');
+
var senderSpan = document.createElement('span');
senderSpan.textContent = message.user_Name + ': '; // 使用实际的字段名
senderSpan.classList.add('sender'); // 添加 CSS 类名
diff --git a/Logic/session_start.php b/Logic/session_start.php
new file mode 100644
index 0000000000000000000000000000000000000000..b6927c0239b1009698058953bf037fccdc20e16a
--- /dev/null
+++ b/Logic/session_start.php
@@ -0,0 +1,12 @@
+<?php
+session_start(); // 启动会话
+
+// 检查用户是否已登录，如果未登录则重定向到登录页面
+if (!isset($_SESSION['user_id'])) {
+ header("Location: LoginPage.php");
+ exit;
+}
+
+// 获取用户 ID
+$userID = $_SESSION['user_id'];
+?>
diff --git a/Presentation/chatPage.php b/Presentation/chatPage.php
index e4803fd55e941ce51a524f60dc0eb9cac71d6dcc..38a7d1671b264d40ecef175ba87ec39ed842c77c 100644
--- a/Presentation/chatPage.php
+++ b/Presentation/chatPage.php
@@ -1,52 +1,111 @@
+<?php require_once '../Logic/session_start.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Users</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
display: flex;
margin: 0;
padding: 0;
height: 100vh;
- font-family: Arial, sans-serif;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ background-color: #1E1E2E; /* 主背景色 */
+ color: #f3f3f3; /* 文本颜色 */
}
#sidebar {
width: 250px;
- background-color: #f3f3f3;
+ background-color: #232533; /* 侧边栏背景色 */
+ padding: 20px;
+ overflow-y: auto;
+ }
+
+ #sidebar h2 {
+ margin-top: 0;
+ color: #f3f3f3;
+ }
+
+ #sidebar ul {
+ list-style: none;
+ padding: 0;
+ }
+
+ #sidebar ul li {
+ display: flex;
+ align-items: center;
padding: 10px;
- overflow-y: auto; /* 如果用户列表很长可以滚动 */
+ border-bottom: 1px solid #2c2f3a;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ }
+
+ #sidebar ul li img {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%; /* 使头像显示为圆形 */
+ object-fit: cover; /* 确保图片内容适应容器 */
+ margin-right: 10px;
+ }
+
+ #sidebar ul li:hover {
+ background-color: #1E1E2E;
}
#chat-container {
flex-grow: 1;
- padding: 10px;
display: flex;
flex-direction: column;
+ background-color: #232533;
+ padding: 20px;
}
#chat-box {
flex-grow: 1;
overflow-y: auto;
- margin-bottom: 10px;
- border: 1px solid #ccc;
- padding: 10px;
+ margin-bottom: 20px;
+ background-color: #1E1E2E;
+ border: none;
+ padding: 20px;
}
#message-input {
display: flex;
+ margin-top: 10px;
}
#message-input input {
flex-grow: 1;
- margin-right: 5px;
+ padding: 10px;
+ border: 1px solid #2c2f3a;
+ background-color: #2c2f3a;
+ color: #f3f3f3;
+ border-radius: 4px;
+ margin-right: 10px;
+ }
+
+ #message-input button {
+ padding: 10px 20px;
+ border: none;
+ background-color: #4b4f5b;
+ color: white;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ border-radius: 4px;
+ }
+
+ #message-input button:hover {
+ background-color: #656a76;
}
#chat-box div {
- margin-bottom: 5px;
- padding: 5px;
+ background-color: #2c2f3a;
+ padding: 10px;
+ border-radius: 4px;
+ margin-bottom: 10px;
}
#chat-box div span {
@@ -56,11 +115,34 @@
#chat-box div span.sender {
font-weight: bold;
+ color: #7881a1; /* 发送者名字的颜色 */
}
- .sender {
- font-weight: bold;
- color: #333;
+ /*返回首页的按钮样式*/
+ #return-home-btn {
+ position: fixed;
+ left: 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>
@@ -78,11 +160,12 @@
</div>
<div id="message-input">
<input type="text" id="message" placeholder="输入消息...">
- <button onclick="sendMessage()">发送</button>
+ <button onclick="sendMessage()">Send</button>
</div>
</div>
-<script src="../Logic/chat.js">
-</script>
+<a href="interface.php" id="return-home-btn"><i class="fas fa-arrow-left"></i></a>
+
+<script src="../Logic/chat.js"></script>
</body>
</html>
diff --git a/Presentation/interface.php b/Presentation/interface.php
index c3908fc2226e387c82ca6b1d6391bfc8245fe2d5..2becaae7200ab67a05d891830e281f4b2d8256d5 100644
--- a/Presentation/interface.php
+++ b/Presentation/interface.php
@@ -1,15 +1,17 @@
<?php
-session_start(); // 启动会话
-
-// 检查用户是否已登录，如果未登录则重定向到登录页面
-if (!isset($_SESSION['user_id'])) {
- header("Location: LoginPage.php");
- exit;
-}
-
-// 获取用户 ID
-$userID = $_SESSION['user_id'];
-?>
+//session_start(); // 启动会话
+//
+//// 检查用户是否已登录，如果未登录则重定向到登录页面
+//if (!isset($_SESSION['user_id'])) {
+// header("Location: LoginPage.php");
+// exit;
+//}
+//
+//// 获取用户 ID
+//$userID = $_SESSION['user_id'];
+//?>
+
+<?php require_once '../Logic/session_start.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
@@ -119,10 +121,11 @@ $userID = $_SESSION['user_id'];
}
.message {
- display: flex;
- flex-direction: column;
- align-items: flex-start; /* Align bot messages to the left */
+ padding: 10px;
+ border-radius: 10px;
margin-bottom: 10px;
+ max-width: 60%;
+ word-wrap: break-word;
}
.message.user {
@@ -208,7 +211,7 @@ $userID = $_SESSION['user_id'];
<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="chatPage.php" class="sidebar-item" target="contentFrame">Campus Voices</a>
<a href="settings.php" class="sidebar-item" target="contentFrame"><i class="fas fa-home"></i> User Profile</a>
</div>
diff --git a/Presentation/map.php b/Presentation/map.php
index cbb9854d8cfe4f6890a8d98961a1cf3fb134219d..46f7aae493c22f0bb33fe98b09a8859b7faf5c65 100644
--- a/Presentation/map.php
+++ b/Presentation/map.php
@@ -1,12 +1,6 @@
-<?php require_once '../Logic/config.php';
-
-session_start(); // 启动会话
-
-// 检查用户是否已登录，如果未登录则重定向到登录页面
-if (!isset($_SESSION['user_id'])) {
- header("Location: LoginPage.php");
- exit;
-}
+<?php
+require_once '../Logic/config.php';
+require_once '../Logic/session_start.php';
$stmt = DB->prepare("SELECT * FROM building");
$stmt->execute();
@@ -15,7 +9,7 @@ $buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
<!DOCTYPE html>
<html>
<head>
-
+
<style>
body {
font-family: 'Roboto', sans-serif;
diff --git a/Presentation/settings.php b/Presentation/settings.php
index ee6318def85439c7bb7bb8fb52fab8aa2bbe8570..f975b156899b1134a40f6182110a29afd54190a5 100644
--- a/Presentation/settings.php
+++ b/Presentation/settings.php
@@ -1,16 +1,6 @@
<?php
require_once '../Logic/config.php';
-
-session_start(); // 启动会话
-
-// 检查用户是否已登录，如果未登录则重定向到登录页面
-if (!isset($_SESSION['user_id'])) {
- header("Location: LoginPage.php");
- exit;
-}
-
-// 获取用户 ID
-$userId = $_SESSION['user_id'];
+require_once '../Logic/session_start.php';
function updateUserInformation($userId, $name, $email, $major, $year)
{
@@ -29,7 +19,7 @@ function updateAccountInfo($account, $password, $userId)
// 检查是否有POST请求提交表单
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 检查是否存在userId参数
- $userId = isset($_POST['userId']) ? $_POST['userId'] : null;
+ $userID = isset($_POST['userId']) ? $_POST['userId'] : null;
// 处理表单提交的数据
if ($_POST["formType"] == "UserForm") {
@@ -39,11 +29,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$major = $_POST['major'];
$year = $_POST['year'];
// 调用函数更新用户信息
- updateUserInformation($userId, $name, $email, $major, $year);
+ updateUserInformation($userID, $name, $email, $major, $year);
} elseif ($_POST["formType"] == "ModalForm") {
$account = $_POST['account'];
$password = $_POST['password'];
- updateAccountInfo($account, $password, $userId);
+ updateAccountInfo($account, $password, $userID);
} elseif ($_POST["formType"] == "AvatarForm") {
// 读取文件内容
$avatar_name = $_FILES["avatar"]["name"];
@@ -57,14 +47,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$pdo = new PDO($dsn, 'root', 'czx2002819');
$data = addslashes(fread(fopen($avatar, "r"), filesize($avatar)));
- $result = $pdo->query("UPDATE avatar SET user_Avatar = '$data', filename = '$avatar_name', filesize = '$avatar_size', filetype = '$avatar_type' WHERE id = '$userId'");
+ $result = $pdo->query("UPDATE avatar SET user_Avatar = '$data', filename = '$avatar_name', filesize = '$avatar_size', filetype = '$avatar_type' WHERE id = '$userID'");
}
}
// 准备SQL查询
$stmt = DB->prepare("SELECT * FROM user WHERE id = ?");
-$stmt->execute([$userId]);
+$stmt->execute([$userID]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);
?>
@@ -325,7 +315,7 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
<div class="card">
<div class="avatar">
- <img src="../Logic/getimage.php?userId=<?php echo htmlspecialchars($userId); ?>" alt="User Avatar">
+ <img src="../Logic/getimage.php?userId=<?php echo htmlspecialchars($userID); ?>" alt="User Avatar">
</div>
<div class="input-group">
<label for="name">Name:</label>
@@ -361,7 +351,7 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
</div>
<input type="hidden" name="formType" value="AvatarForm">
<!-- 隐藏字段用于在提交表单时传递userid-->
- <input type="hidden" name="userId" value="<?php echo htmlspecialchars($userId); ?>">
+ <input type="hidden" name="userId" value="<?php echo htmlspecialchars($userID); ?>">
<button class="modern-button" type="submit">Save Changes</button>
</div>
</div>
@@ -401,7 +391,7 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
</div>
<input type="hidden" name="formType" value="ModalForm">
<!-- 隐藏字段用于在提交表单时传递userid-->
- <input type="hidden" name="userId" value="<?php echo htmlspecialchars($userId); ?>">
+ <input type="hidden" name="userId" value="<?php echo htmlspecialchars($userID); ?>">
<button class="modern-button" type="submit">Save Changes</button>
</div>
</div>