From 9568a10df1965e786e24b8e0118164547f7583ee Mon Sep 17 00:00:00 2001
From: CXM <chenzixin202209@163.com>
Date: Mon, 18 Mar 2024 12:16:18 +0000
Subject: [PATCH] Put code styles into each's css file
---
Presentation/LoginPage.php | 67 +---------
Presentation/chatPage.php | 140 +-------------------
Presentation/chatbotpage.php | 110 +---------------
Presentation/interface.php | 180 +-------------------------
Presentation/map.php | 119 +----------------
Presentation/register.php | 118 +----------------
Presentation/settings.php | 241 +----------------------------------
css/LoginPage.css | 63 +++++++++
css/chatPage.css | 137 ++++++++++++++++++++
css/chatbotpage.css | 122 ++++++++++++++++++
css/interface.css | 177 +++++++++++++++++++++++++
css/map.css | 114 +++++++++++++++++
css/register.css | 115 +++++++++++++++++
css/settings.css | 236 ++++++++++++++++++++++++++++++++++
14 files changed, 971 insertions(+), 968 deletions(-)
create mode 100644 css/LoginPage.css
create mode 100644 css/chatPage.css
create mode 100644 css/chatbotpage.css
create mode 100644 css/interface.css
create mode 100644 css/map.css
create mode 100644 css/register.css
create mode 100644 css/settings.css
diff --git a/Presentation/LoginPage.php b/Presentation/LoginPage.php
index d0cfd90..114a62a 100644
--- a/Presentation/LoginPage.php
+++ b/Presentation/LoginPage.php
@@ -60,72 +60,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UWE Student Assistant Login</title>
- <link rel="stylesheet" href="style.css">
- <style>
- body, html {
- margin: 0;
- padding: 0;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #1E1E2E; /* 深灰色背景 */
- font-family: Arial, sans-serif;
- }
-
- .login-container {
- width: 300px;
- padding: 40px;
- background-color: #232533;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- position: relative;
- border-radius: 20px;
- color: #EAEAEA; /* 白色文字 */
- }
-
- .background-text {
- position: absolute;
- top: -40px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 25px;
- color: #888; /* Subtle contrast */
- text-align: center;
- }
-
- .form-group {
- margin-bottom: 15px;
- }
-
- .form-group label {
- display: block;
- margin-bottom: 5px;
- color: #A4A4A4; /* 标签颜色 */
- }
-
- .form-group input {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- background-color: #292A36; /* 深色input背景 */
- color: #EAEAEA; /* 文字颜色 */
- }
-
- button {
- width: 100%;
- padding: 10px;
- border: none;
- background-color: #1E1E2E;
- color: white;
- cursor: pointer;
- border-radius: 4px;
- }
-
- button:hover {
- background-color: #292A36;
- }
- </style>
+ <link rel="stylesheet" href="../css/LoginPage.css">
</head>
<body>
<div class="login-container">
diff --git a/Presentation/chatPage.php b/Presentation/chatPage.php
index 38a7d16..fc52bc1 100644
--- a/Presentation/chatPage.php
+++ b/Presentation/chatPage.php
@@ -6,145 +6,7 @@
<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: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- background-color: #1E1E2E; /* 主背景色 */
- color: #f3f3f3; /* 文本颜色 */
- }
-
- #sidebar {
- width: 250px;
- 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;
- 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;
- display: flex;
- flex-direction: column;
- background-color: #232533;
- padding: 20px;
- }
-
- #chat-box {
- flex-grow: 1;
- overflow-y: auto;
- margin-bottom: 20px;
- background-color: #1E1E2E;
- border: none;
- padding: 20px;
- }
-
- #message-input {
- display: flex;
- margin-top: 10px;
- }
-
- #message-input input {
- flex-grow: 1;
- 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 {
- background-color: #2c2f3a;
- padding: 10px;
- border-radius: 4px;
- margin-bottom: 10px;
- }
-
- #chat-box div span {
- display: inline-block;
- margin-right: 5px;
- }
-
- #chat-box div span.sender {
- font-weight: bold;
- color: #7881a1; /* 发送者名字的颜色 */
- }
-
- /*返回首页的按钮样式*/
- #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>
+ <link rel="stylesheet" href="../css/chatPage.css">
</head>
<body>
<!-- 在线用户列表容器 -->
diff --git a/Presentation/chatbotpage.php b/Presentation/chatbotpage.php
index 6d0cd8d..d6647e7 100644
--- a/Presentation/chatbotpage.php
+++ b/Presentation/chatbotpage.php
@@ -39,115 +39,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Interface</title>
- <style>
- html, body {
- height: 100%;
- margin: 0;
- display: flex;
- flex-direction: column;
- background-color: #1E1E2E; /* Deep gray background */
- }
- #chat-container {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: calc(100vh - 20px);
- margin: 10px;
- background: #1E1E2E;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
- overflow: hidden;
- margin-top: 50px;
- }
- #chat-history {
- flex-grow: 1;
- overflow-y: auto;
- padding: 20px;
- display: flex;
- flex-direction: column;
- gap: 12px; /* 增加消息之间的间隔 */
- background: #1E1E2E;
- }
- .user, .bot {
- max-width: 80%;
- padding: 10px 15px;
- border-radius: 20px;
- color: white;
- font-size: 16px;
- line-height: 1.4;
- word-wrap: break-word;
- }
- .user {
- align-self: flex-end;
- background-color: #555; /* 用户消息的颜色 */
- border-bottom-right-radius: 4px; /* 调整以使气泡看起来更自然 */
- }
- .bot {
- align-self: flex-start;
- background-color: #292A36; /* 机器人消息的颜色 */
- border-bottom-left-radius: 4px; /* 调整以使气泡看起来更自然 */
- }
-
- form {
- display: flex;
- padding: 10px;
- background: #1E1E2E;
- align-items: center; /* 确保表单元素垂直居中 */
- }
- /* 调整输入框和按钮的样式以保持界面整体美观 */
- input[type="text"], button {
- height: 40px;
- padding: 0 10px;
- }
- input[type="text"] {
- flex-grow: 1; /* 使输入框填充剩余空间 */
- border: none;
- margin-right: 10px;
- border-radius: 20px;
- padding-left: 15px;
- background-color: #414141; /* Dark input field */
- color: #EAEAEA;
- }
- button {
- padding: 0 20px;
- border-radius: 20px;
- background-color: #575757;
- color: white;
- border: none;
- cursor: pointer;
- }
- button:hover {
- background-color: #3A3B45;
- }
- /* 自定义滚动条样式 */
- #chat-history::-webkit-scrollbar {
- width: 8px; /* 控制滚动条的宽度 */
- }
- #chat-history::-webkit-scrollbar-track {
- background: #f1f1f1; /* 滚动条的轨道背景色 */
- border-radius: 10px; /* 轨道圆角 */
- }
- #chat-history::-webkit-scrollbar-thumb {
- background: #888; /* 滚动条本身的颜色 */
- border-radius: 10px; /* 滚动条圆角 */
- }
- #chat-history::-webkit-scrollbar-thumb:hover {
- background: #555; /* 滚动条在鼠标悬停时的颜色变化 */
- }
-
- @media (max-width: 600px) {
- #chat-container {
- height: calc(100vh - 10px);
- margin: 5px;
- }
- input[type="text"] {
- width: calc(100% - 90px);
- }
- button {
- width: 90px;
- }
- }
- </style>
+ <link rel="stylesheet" href="../css/chatbotpage.css">
</head>
<body>
<div id="chat-container">
diff --git a/Presentation/interface.php b/Presentation/interface.php
index 2becaae..3c0479d 100644
--- a/Presentation/interface.php
+++ b/Presentation/interface.php
@@ -20,185 +20,7 @@
<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 {
- padding: 10px;
- border-radius: 10px;
- margin-bottom: 10px;
- max-width: 60%;
- word-wrap: break-word;
- }
-
- .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>
+ <link rel="stylesheet" href="../css/interface.css">
</head>
<body>
diff --git a/Presentation/map.php b/Presentation/map.php
index 46f7aae..0a6fc58 100644
--- a/Presentation/map.php
+++ b/Presentation/map.php
@@ -9,127 +9,10 @@ $buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
<!DOCTYPE html>
<html>
<head>
-
- <style>
- body {
- font-family: 'Roboto', sans-serif;
- margin: 0;
- padding: 0;
- padding-top: 50px;
- background-color: #1E1E2E; /* 调整背景颜色与interface.html一致 */
- color: #EAEAEA; /* 调整文本颜色与interface.html一致 */
- }
-
- #place-search-bar, #place-nav {
- background-color: #232533; /* 调整搜索栏和导航栏背景色 */
- padding: 10px 0;
- text-align: center;
- }
-
- #map {
- /*height: 500px;*/
- /*width: 100%;*/
- height: 500px;
- width: calc(100% - 40px); /* 减去边距的宽度 */
- margin-bottom: 20px;
- border: 2px solid #292A36; /* 边框颜色和宽度 */
- border-radius: 15px; /* 圆角大小 */
- }
-
- #place-search-bar {
- margin-bottom: 20px;
- text-align: center;
-
- background-color: #232533; /* 背景色 */
- padding: 10px 20px; /* 内边距 */
- margin: 0 20px 20px 20px; /* 外边距 */
- border-radius: 15px; /* 圆角大小 */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
- }
-
- #place-search {
- width: 300px;
- height: 40px;
- padding: 5px 10px;
- margin: 10px;
- font-size: 16px;
- border: 1px solid #292A36; /* 输入框边框 */
- border-radius: 20px; /* 更圆的边框 */
- outline: none; /* 去掉焦点边框 */
- background-color: #292A36; /* 输入框背景色 */
- color: #EAEAEA; /* 输入框文本色 */
-
- }
-
- #place-nav {
- text-align: center;
- background-color: #232533; /* 背景色 */
- padding: 10px 20px; /* 内边距 */
- margin: 0 20px 20px 20px; /* 外边距 */
- border-radius: 15px; /* 圆角大小 */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
- display: flex;
- flex-wrap: wrap;
- justify-content: center; /* 按钮居中显示 */
- gap: 10px; /* 按钮之间的间隙 */
- }
-
- #place-nav button {
- background-color: #292A36; /* 按钮背景色 */
- color: #EAEAEA; /* 按钮文本色 */
- border: none;
- border-radius: 15px;
- padding: 10px 15px;
- font-size: 14px;
- transition: background-color 0.3s, transform 0.2s;
- }
-
- #place-nav button:hover {
- background-color: #3A3B45; /* 鼠标悬浮背景色 */
- transform: translateY(-2px); /* 点击效果 */
- }
-
- #place-info {
- background-color: #232533; /* 信息区背景色 */
- border-radius: 15px;
- padding: 20px;
- margin: 0 20px; /* 外边距 */
- max-width: calc(100% - 40px); /* 控制最大宽度 */
- color: #EAEAEA; /* 信息区文本颜色 */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
- }
-
- /* 其他样式 */
- #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">
<title>School Map Overlay</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-
+ <link rel="stylesheet" href="../css/map.css">
</head>
<body>
<div id="map" style="height: 500px; width: 100%;"></div>
diff --git a/Presentation/register.php b/Presentation/register.php
index 473bc3e..3e21a30 100644
--- a/Presentation/register.php
+++ b/Presentation/register.php
@@ -73,123 +73,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<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>
+ <link rel="stylesheet" href="../css/register.css">
</head>
<body>
<div class="container">
diff --git a/Presentation/settings.php b/Presentation/settings.php
index f975b15..ab036d2 100644
--- a/Presentation/settings.php
+++ b/Presentation/settings.php
@@ -65,246 +65,7 @@ $user = $stmt->fetch(PDO::FETCH_ASSOC);
<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>
-
+ <link rel="stylesheet" href="../css/settings.css">
</head>
<body>
<div class="container">
diff --git a/css/LoginPage.css b/css/LoginPage.css
new file mode 100644
index 0000000..0e758b4
--- /dev/null
+++ b/css/LoginPage.css
@@ -0,0 +1,63 @@
+body, html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #1E1E2E; /* 深灰色背景 */
+ font-family: Arial, sans-serif;
+}
+
+.login-container {
+ width: 300px;
+ padding: 40px;
+ background-color: #232533;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ position: relative;
+ border-radius: 20px;
+ color: #EAEAEA; /* 白色文字 */
+}
+
+.background-text {
+ position: absolute;
+ top: -40px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 25px;
+ color: #888; /* Subtle contrast */
+ text-align: center;
+}
+
+.form-group {
+ margin-bottom: 15px;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 5px;
+ color: #A4A4A4; /* 标签颜色 */
+}
+
+.form-group input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background-color: #292A36; /* 深色input背景 */
+ color: #EAEAEA; /* 文字颜色 */
+}
+
+button {
+ width: 100%;
+ padding: 10px;
+ border: none;
+ background-color: #1E1E2E;
+ color: white;
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+button:hover {
+ background-color: #292A36;
+}
diff --git a/css/chatPage.css b/css/chatPage.css
new file mode 100644
index 0000000..c228230
--- /dev/null
+++ b/css/chatPage.css
@@ -0,0 +1,137 @@
+body {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ background-color: #1E1E2E; /* 主背景色 */
+ color: #f3f3f3; /* 文本颜色 */
+}
+
+#sidebar {
+ width: 250px;
+ 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;
+ 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;
+ display: flex;
+ flex-direction: column;
+ background-color: #232533;
+ padding: 20px;
+}
+
+#chat-box {
+ flex-grow: 1;
+ overflow-y: auto;
+ margin-bottom: 20px;
+ background-color: #1E1E2E;
+ border: none;
+ padding: 20px;
+}
+
+#message-input {
+ display: flex;
+ margin-top: 10px;
+}
+
+#message-input input {
+ flex-grow: 1;
+ 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 {
+ background-color: #2c2f3a;
+ padding: 10px;
+ border-radius: 4px;
+ margin-bottom: 10px;
+}
+
+#chat-box div span {
+ display: inline-block;
+ margin-right: 5px;
+}
+
+#chat-box div span.sender {
+ font-weight: bold;
+ color: #7881a1; /* 发送者名字的颜色 */
+}
+
+/*返回首页的按钮样式*/
+#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;
+}
diff --git a/css/chatbotpage.css b/css/chatbotpage.css
new file mode 100644
index 0000000..a3bec5c
--- /dev/null
+++ b/css/chatbotpage.css
@@ -0,0 +1,122 @@
+html, body {
+ height: 100%;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ background-color: #1E1E2E; /* Deep gray background */
+}
+
+#chat-container {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: calc(100vh - 20px);
+ margin: 10px;
+ background: #1E1E2E;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ margin-top: 50px;
+}
+
+#chat-history {
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px; /* 增加消息之间的间隔 */
+ background: #1E1E2E;
+}
+
+.user, .bot {
+ max-width: 80%;
+ padding: 10px 15px;
+ border-radius: 20px;
+ color: white;
+ font-size: 16px;
+ line-height: 1.4;
+ word-wrap: break-word;
+}
+
+.user {
+ align-self: flex-end;
+ background-color: #555; /* 用户消息的颜色 */
+ border-bottom-right-radius: 4px; /* 调整以使气泡看起来更自然 */
+}
+
+.bot {
+ align-self: flex-start;
+ background-color: #292A36; /* 机器人消息的颜色 */
+ border-bottom-left-radius: 4px; /* 调整以使气泡看起来更自然 */
+}
+
+form {
+ display: flex;
+ padding: 10px;
+ background: #1E1E2E;
+ align-items: center; /* 确保表单元素垂直居中 */
+}
+
+/* 调整输入框和按钮的样式以保持界面整体美观 */
+input[type="text"], button {
+ height: 40px;
+ padding: 0 10px;
+}
+
+input[type="text"] {
+ flex-grow: 1; /* 使输入框填充剩余空间 */
+ border: none;
+ margin-right: 10px;
+ border-radius: 20px;
+ padding-left: 15px;
+ background-color: #414141; /* Dark input field */
+ color: #EAEAEA;
+}
+
+button {
+ padding: 0 20px;
+ border-radius: 20px;
+ background-color: #575757;
+ color: white;
+ border: none;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #3A3B45;
+}
+
+/* 自定义滚动条样式 */
+#chat-history::-webkit-scrollbar {
+ width: 8px; /* 控制滚动条的宽度 */
+}
+
+#chat-history::-webkit-scrollbar-track {
+ background: #f1f1f1; /* 滚动条的轨道背景色 */
+ border-radius: 10px; /* 轨道圆角 */
+}
+
+#chat-history::-webkit-scrollbar-thumb {
+ background: #888; /* 滚动条本身的颜色 */
+ border-radius: 10px; /* 滚动条圆角 */
+}
+
+#chat-history::-webkit-scrollbar-thumb:hover {
+ background: #555; /* 滚动条在鼠标悬停时的颜色变化 */
+}
+
+@media (max-width: 600px) {
+ #chat-container {
+ height: calc(100vh - 10px);
+ margin: 5px;
+ }
+
+ input[type="text"] {
+ width: calc(100% - 90px);
+ }
+
+ button {
+ width: 90px;
+ }
+}
diff --git a/css/interface.css b/css/interface.css
new file mode 100644
index 0000000..7286e5b
--- /dev/null
+++ b/css/interface.css
@@ -0,0 +1,177 @@
+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 {
+ padding: 10px;
+ border-radius: 10px;
+ margin-bottom: 10px;
+ max-width: 60%;
+ word-wrap: break-word;
+}
+
+.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;
+}
diff --git a/css/map.css b/css/map.css
new file mode 100644
index 0000000..e0036ef
--- /dev/null
+++ b/css/map.css
@@ -0,0 +1,114 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
+ padding: 0;
+ padding-top: 50px;
+ background-color: #1E1E2E; /* 调整背景颜色与interface.html一致 */
+ color: #EAEAEA; /* 调整文本颜色与interface.html一致 */
+}
+
+#place-search-bar, #place-nav {
+ background-color: #232533; /* 调整搜索栏和导航栏背景色 */
+ padding: 10px 0;
+ text-align: center;
+}
+
+#map {
+ /*height: 500px;*/
+ /*width: 100%;*/
+ height: 500px;
+ width: calc(100% - 40px); /* 减去边距的宽度 */
+ margin-bottom: 20px;
+ border: 2px solid #292A36; /* 边框颜色和宽度 */
+ border-radius: 15px; /* 圆角大小 */
+}
+
+#place-search-bar {
+ margin-bottom: 20px;
+ text-align: center;
+
+ background-color: #232533; /* 背景色 */
+ padding: 10px 20px; /* 内边距 */
+ margin: 0 20px 20px 20px; /* 外边距 */
+ border-radius: 15px; /* 圆角大小 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+}
+
+#place-search {
+ width: 300px;
+ height: 40px;
+ padding: 5px 10px;
+ margin: 10px;
+ font-size: 16px;
+ border: 1px solid #292A36; /* 输入框边框 */
+ border-radius: 20px; /* 更圆的边框 */
+ outline: none; /* 去掉焦点边框 */
+ background-color: #292A36; /* 输入框背景色 */
+ color: #EAEAEA; /* 输入框文本色 */
+
+}
+
+#place-nav {
+ text-align: center;
+ background-color: #232533; /* 背景色 */
+ padding: 10px 20px; /* 内边距 */
+ margin: 0 20px 20px 20px; /* 外边距 */
+ border-radius: 15px; /* 圆角大小 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center; /* 按钮居中显示 */
+ gap: 10px; /* 按钮之间的间隙 */
+}
+
+#place-nav button {
+ background-color: #292A36; /* 按钮背景色 */
+ color: #EAEAEA; /* 按钮文本色 */
+ border: none;
+ border-radius: 15px;
+ padding: 10px 15px;
+ font-size: 14px;
+ transition: background-color 0.3s, transform 0.2s;
+}
+
+#place-nav button:hover {
+ background-color: #3A3B45; /* 鼠标悬浮背景色 */
+ transform: translateY(-2px); /* 点击效果 */
+}
+
+#place-info {
+ background-color: #232533; /* 信息区背景色 */
+ border-radius: 15px;
+ padding: 20px;
+ margin: 0 20px; /* 外边距 */
+ max-width: calc(100% - 40px); /* 控制最大宽度 */
+ color: #EAEAEA; /* 信息区文本颜色 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+}
+
+/* 其他样式 */
+#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;
+}
diff --git a/css/register.css b/css/register.css
new file mode 100644
index 0000000..74b4904
--- /dev/null
+++ b/css/register.css
@@ -0,0 +1,115 @@
+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;
+}
diff --git a/css/settings.css b/css/settings.css
new file mode 100644
index 0000000..158f7e2
--- /dev/null
+++ b/css/settings.css
@@ -0,0 +1,236 @@
+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;
+}
--
GitLab