diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..39e74ee
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,203 @@
+/* 基本样式重置 */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Microsoft YaHei', Arial, sans-serif;
+ line-height: 1.6;
+ color: #333;
+ background-color: #f4f4f4;
+}
+
+.container {
+ width: 90%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+/* 头部样式 */
+header {
+ background-color: #3498db;
+ color: #fff;
+ padding: 1rem 0;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+header h1 {
+ margin: 0;
+ font-size: 1.8rem;
+}
+
+nav {
+ margin-top: 1rem;
+}
+
+nav ul {
+ list-style: none;
+ display: flex;
+}
+
+nav ul li {
+ margin-right: 20px;
+}
+
+nav ul li a {
+ color: #fff;
+ text-decoration: none;
+ padding: 5px 10px;
+ border-radius: 3px;
+ transition: background-color 0.3s;
+}
+
+nav ul li a:hover,
+nav ul li a.active {
+ background-color: rgba(255,255,255,0.2);
+}
+
+/* 页脚样式 */
+footer {
+ background-color: #333;
+ color: #fff;
+ padding: 1rem 0;
+ margin-top: 2rem;
+ text-align: center;
+}
+
+/* 主内容区域 */
+main {
+ padding: 2rem 0;
+}
+
+.welcome-section {
+ background-color: #fff;
+ padding: 2rem;
+ border-radius: 5px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ margin-top: 2rem;
+}
+
+/* 登录页面样式 */
+.login-page {
+ background-color: #f9f9f9;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.login-container {
+ width: 100%;
+ max-width: 400px;
+ padding: 1rem;
+}
+
+.login-box {
+ background-color: #fff;
+ padding: 2rem;
+ border-radius: 5px;
+ box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+}
+
+.login-box h1 {
+ text-align: center;
+ margin-bottom: 2rem;
+ color: #3498db;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: bold;
+}
+
+input[type="text"],
+input[type="password"] {
+ width: 100%;
+ padding: 0.8rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+ transition: border-color 0.3s;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+ border-color: #3498db;
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+.btn-login {
+ background-color: #3498db;
+ color: #fff;
+ border: none;
+ padding: 0.8rem;
+ width: 100%;
+ font-size: 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.btn-login:hover {
+ background-color: #2980b9;
+}
+
+.error-message {
+ color: #e74c3c;
+ font-size: 0.85rem;
+ margin-top: 5px;
+ display: block;
+}
+
+.form-message {
+ text-align: center;
+ margin-top: 1rem;
+ font-weight: bold;
+}
+
+.form-message.error {
+ color: #e74c3c;
+}
+
+.form-message.success {
+ color: #2ecc71;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 768px) {
+ header h1 {
+ font-size: 1.5rem;
+ }
+
+ nav ul {
+ flex-direction: column;
+ }
+
+ nav ul li {
+ margin-right: 0;
+ margin-bottom: 0.5rem;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .login-container {
+ padding: 0.5rem;
+ }
+
+ .login-box {
+ padding: 1.5rem;
+ }
+
+ .login-box h1 {
+ font-size: 1.5rem;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8d75afb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+ 首页 - 演示项目
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/login.js b/js/login.js
new file mode 100644
index 0000000..e6f9f35
--- /dev/null
+++ b/js/login.js
@@ -0,0 +1,121 @@
+/**
+ * 登录功能实现
+ * 原生JavaScript，不依赖框架
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+ const loginForm = document.getElementById('loginForm');
+ const usernameInput = document.getElementById('username');
+ const passwordInput = document.getElementById('password');
+ const usernameError = document.getElementById('username-error');
+ const passwordError = document.getElementById('password-error');
+ const formMessage = document.getElementById('form-message');
+
+ // 用于演示的模拟用户数据
+ const mockUsers = [
+ { username: 'admin', password: 'admin123' },
+ { username: 'user', password: 'user123' }
+ ];
+
+ /**
+ * 表单提交处理
+ */
+ loginForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ // 重置错误信息
+ resetErrors();
+
+ // 获取输入值
+ const username = usernameInput.value.trim();
+ const password = passwordInput.value.trim();
+
+ // 验证表单
+ let isValid = validateForm(username, password);
+
+ if (isValid) {
+ // 模拟登录请求
+ mockLogin(username, password);
+ }
+ });
+
+ /**
+ * 表单验证
+ */
+ function validateForm(username, password) {
+ let isValid = true;
+
+ // 验证用户名
+ if (username === '') {
+ displayError(usernameError, '请输入用户名');
+ isValid = false;
+ } else if (username.length < 3) {
+ displayError(usernameError, '用户名长度必须至少为3个字符');
+ isValid = false;
+ }
+
+ // 验证密码
+ if (password === '') {
+ displayError(passwordError, '请输入密码');
+ isValid = false;
+ } else if (password.length < 6) {
+ displayError(passwordError, '密码长度必须至少为6个字符');
+ isValid = false;
+ }
+
+ return isValid;
+ }
+
+ /**
+ * 显示错误信息
+ */
+ function displayError(element, message) {
+ element.textContent = message;
+ }
+
+ /**
+ * 重置错误信息
+ */
+ function resetErrors() {
+ usernameError.textContent = '';
+ passwordError.textContent = '';
+ formMessage.textContent = '';
+ formMessage.className = 'form-message';
+ }
+
+ /**
+ * 模拟登录
+ */
+ function mockLogin(username, password) {
+ // 显示加载状态
+ formMessage.textContent = '登录中...';
+ formMessage.className = 'form-message';
+
+ // 模拟网络延迟
+ setTimeout(function() {
+ // 检查用户是否存在
+ const user = mockUsers.find(user =>
+ user.username === username && user.password === password
+ );
+
+ if (user) {
+ // 登录成功
+ formMessage.textContent = '登录成功，即将跳转...';
+ formMessage.className = 'form-message success';
+
+ // 保存登录状态到本地存储
+ localStorage.setItem('isLoggedIn', 'true');
+ localStorage.setItem('username', username);
+
+ // 重定向到首页
+ setTimeout(function() {
+ window.location.href = 'index.html';
+ }, 1000);
+ } else {
+ // 登录失败
+ formMessage.textContent = '用户名或密码错误';
+ formMessage.className = 'form-message error';
+ }
+ }, 1000);
+ }
+});
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..f417269
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,56 @@
+/**
+ * 主页JavaScript
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+ // 检查用户是否已登录
+ checkLoginStatus();
+
+ // 初始化页面事件
+ initEvents();
+});
+
+/**
+ * 检查用户登录状态
+ */
+function checkLoginStatus() {
+ const isLoggedIn = localStorage.getItem('isLoggedIn');
+
+ if (!isLoggedIn) {
+ // 如果未登录，重定向到登录页面
+ window.location.href = 'login.html';
+ return;
+ }
+
+ // 获取并显示用户名
+ const username = localStorage.getItem('username');
+ if (username) {
+ document.getElementById('username').textContent = username;
+ }
+}
+
+/**
+ * 初始化页面事件
+ */
+function initEvents() {
+ // 退出登录
+ const logoutBtn = document.getElementById('logout');
+ if (logoutBtn) {
+ logoutBtn.addEventListener('click', function(e) {
+ e.preventDefault();
+ logout();
+ });
+ }
+}
+
+/**
+ * 退出登录
+ */
+function logout() {
+ // 清除本地存储中的登录信息
+ localStorage.removeItem('isLoggedIn');
+ localStorage.removeItem('username');
+
+ // 重定向到登录页面
+ window.location.href = 'login.html';
+}
\ No newline at end of file
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..8dd4c68
--- /dev/null
+++ b/login.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ 用户登录 - 演示项目
+
+
+
+
+
+
+
+
\ No newline at end of file