Upload 5 files

app.py

@@ -0,0 +1,397 @@
+from flask import Flask, jsonify, render_template, request
+import pandas as pd
+import re
+from datetime import datetime, timedelta
+
+app = Flask(__name__)
+
+# 加载学生数据表
+student_file_path = r"./数据表/区队-学号-姓名-1.xlsx"
+try:
+    student_data = pd.read_excel(student_file_path)
+except Exception as e:
+    print(f"加载学生数据失败: {e}")
+    student_data = pd.DataFrame()
+
+# 加载班级课表数据（包含所有年级的课程信息）
+grade_file_path = r"./数据表/班级课表20250830202202.xls"
+try:
+    grade_data = pd.read_excel(grade_file_path)
+    print(f"成功加载课程数据，共{len(grade_data)}条记录")
+except Exception as e:
+    print(f"加载课程数据失败: {e}")
+    grade_data = pd.DataFrame()
+
+# 加载 Excel 数据 - 教师课程数据
+teacher_files = {
+    "2024-2025学年第一学期": r"./数据表/教学安排表20250829113240.xls",
+}
+
+# 加载教室课表数据
+classroom_files = {
+    "五合校区": r"./数据表/全校课表(按教室) 五合校区.xls",
+    "仙葫校区": r"./数据表/全校课表(按教室) 仙葫校区.xls",
+}
+
+# 预加载教师课程数据
+teacher_dataframes = {}
+for semester, file_path in teacher_files.items():
+    try:
+        df = pd.read_excel(file_path)
+        df["学年学期"] = semester  # 添加学年学期字段
+        teacher_dataframes[semester] = df
+    except Exception as e:
+        print(f"加载教师课程数据失败: {e}")
+        continue
+
+teacher_data = pd.concat(teacher_dataframes.values(), ignore_index=True) if teacher_dataframes else pd.DataFrame()
+
+# 预加载教室课表数据
+classroom_dataframes = {}
+for campus, file_path in classroom_files.items():
+    try:
+        # 读取HTML格式的Excel文件
+        df = pd.read_html(file_path, encoding='gbk')[0]  # 取第一个表格
+        df["校区"] = campus  # 添加校区字段
+        classroom_dataframes[campus] = df
+        print(f"成功加载{campus}教室数据，共{len(df)}条记录")
+        print(f"数据列名: {df.columns.tolist()}")
+    except Exception as e:
+        print(f"加载{campus}教室数据失败: {e}")
+        continue
+
+classroom_data = pd.concat(classroom_dataframes.values(), ignore_index=True) if classroom_dataframes else pd.DataFrame()
+print(f"教室数据总计: {len(classroom_data)}条记录")
+
+# 第一周的开始日期
+first_week_start_date = datetime(2024, 9, 2)  # 第一周星期一的日期
+
+
+
+def parse_weeks(weeks_str):
+    if not weeks_str or pd.isna(weeks_str):
+        return set()
+    weeks = set()
+    for part in weeks_str.split(","):
+        try:
+            if "-" in part:
+                start, end = map(int, part.split("-"))
+                weeks.update(range(start, end + 1))
+            else:
+                weeks.add(int(part))
+        except ValueError:
+            print(f"跳过无效周次: {part}")
+            continue
+    return weeks
+
+
+# print(parse_weeks("1-2,4,7-9"))
+# 星期与节次解析函数
+def parse_day_and_period(period_str):
+    if not period_str or pd.isna(period_str):
+        return None
+    try:
+        day_match = re.search(r"[一二三四五六日]", period_str)
+        # 修复正则表达式，同时支持 [数字-数字节] 和 [数字-数字] 两种格式
+        period_match = re.search(r"\[(\d+)-(\d+)节?\]", period_str)
+
+        if day_match and period_match:
+            day = "一二三四五六日".index(day_match.group()) + 1
+            start, end = map(int, period_match.groups())
+            periods = list(range(start, end + 1))
+            return day, periods
+        else:
+            # 移除调试打印，解析失败时静默返回None
+            pass
+    except Exception as e:
+        print(f"解析异常: {period_str}, 错误: {e}")
+    return None
+
+# 根据周次和星期计算实际日期
+def calculate_date(week, day):
+    days_from_start = (week - 1) * 7 + (day - 1)  # 从第一周开始的天数差
+    return first_week_start_date + timedelta(days=days_from_start)
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+@app.route("/teachers")
+def teacher_page():
+    return render_template("teacher.html")
+# 学生课程相关 API
+@app.route("/api/student_courses")
+def get_student_courses():
+    week = request.args.get("week", 1)
+    grade = request.args.get("grade", None)
+    admin_class = request.args.get("admin_class", None)
+
+    # 筛选数据
+    filtered_data = grade_data
+    
+    # 注意：新的数据文件中没有'grade'列，所以跳过grade筛选
+    # if grade:
+    #     filtered_data = filtered_data[filtered_data["grade"] == grade]
+        
+    if admin_class:
+        filtered_data = filtered_data[filtered_data["行政班级"].str.contains(admin_class, na=False)]
+
+    # 筛选课程类型：只要必修课
+    filtered_data = filtered_data[filtered_data["课程类别"].str.contains("必修课", na=False)]
+
+    if week:
+        week = int(week)
+        filtered_data = filtered_data[
+            filtered_data["周次"].apply(lambda x: week in parse_weeks(x) if pd.notna(x) else False)
+        ]
+
+    # 解析课程信息
+    results = []
+    for _, row in filtered_data.iterrows():
+        day_and_period = parse_day_and_period(row["节次"])
+        if day_and_period:
+            day, periods = day_and_period
+            course_date = calculate_date(week, day)  # 计算课程日期
+            
+            # 根据地点判断校区
+            location = row["地点"].split("（")[0] if "（" in row["地点"] else row["地点"]
+            campus = "仙葫" if "仙葫" in str(row["地点"]) else "五合"
+            
+            results.append({
+                "课程": row["课程"].split("]")[1] if "]" in row["课程"] else row["课程"],
+                "教师": row["教师"],
+                "地点": location,
+                "星期": day,
+                "日期": course_date.strftime("%Y-%m-%d"),  # 格式化为字符串
+                "节次": periods,
+                "节次范围": f"第{periods[0]}-{periods[-1]}节",
+                "周次": row["周次"],
+                "校区": campus,
+                "上课班级": str(row["行政班级"]) if "行政班级" in row else ""
+            })
+
+    # 按星期和节次排序
+    results = sorted(results, key=lambda x: (x["星期"], x["节次"][0]))
+    return jsonify(results)
+
+@app.route("/api/classes")
+def get_classes():
+    classes = grade_data["行政班级"].dropna().unique().tolist()
+    return jsonify(sorted(classes))
+
+# 教师课程相关 API
+@app.route("/api/teachers")
+def get_teachers():
+    teachers = teacher_data["教师"].dropna().unique().tolist()
+    return jsonify(sorted(teachers))
+
+@app.route("/api/teacher_courses")
+def get_courses_by_teacher():
+    week = request.args.get("week", 1)
+    teacher = request.args.get("teacher", None)
+
+    # 筛选数据
+    filtered_data = teacher_data
+    if teacher:
+        filtered_data = filtered_data[filtered_data["教师"] == teacher]
+    if week:
+        week = int(week)
+        filtered_data = filtered_data[filtered_data["周次"].apply(lambda x: week in parse_weeks(x) if pd.notna(x) else False)]
+
+    # 解析课程信息
+    results = []
+    for _, row in filtered_data.iterrows():
+        day_and_period = parse_day_and_period(row["节次"])
+        if day_and_period:
+            day, periods = day_and_period
+            course_date = calculate_date(week, day)  # 计算课程日期
+            
+            # 根据地点判断校区
+            location = row["地点"].split("（")[0] if "（" in row["地点"] else row["地点"]
+            campus = "仙葫" if "仙葫" in str(row["地点"]) else "五合"
+            
+            results.append({
+                "课程": row["课程"].split("]")[1] if "]" in row["课程"] else row["课程"],
+                "教师": row["教师"],
+                "地点": location,
+                "星期": day,
+                "日期": course_date.strftime("%Y-%m-%d"),  # 格式化为字符串
+                "节次": periods,
+                "节次范围": f"第{periods[0]}-{periods[-1]}节",
+                "周次": row["周次"],
+                "校区": campus,
+                "上课班级": str(row["行政班级"]) if "行政班级" in row else ""
+            })
+
+    # 按星期和节次排序
+    results = sorted(results, key=lambda x: (x["星期"], x["节次"][0]))
+    return jsonify(results)
+
+# 路由：学生查询页面
+@app.route("/students")
+def student_page():
+    return render_template("student.html")
+
+@app.route("/classrooms")
+def classroom_page():
+    return render_template("classroom.html")
+
+@app.route("/api/students")
+def get_students():
+    students = student_data["姓名"].dropna().unique().tolist()
+    return jsonify(sorted(students))
+
+# 教室相关 API
+@app.route("/api/campuses")
+def get_campuses():
+    if classroom_data.empty:
+        return jsonify([])
+    campuses = classroom_data["校区"].dropna().unique().tolist()
+    return jsonify(sorted(campuses))
+
+@app.route("/api/classrooms")
+def get_classrooms():
+    campus = request.args.get("campus", None)
+    print(f"请求校区: {campus}")
+    print(f"classroom_data是否为空: {classroom_data.empty}")
+    
+    if classroom_data.empty:
+        print("教室数据为空，返回空列表")
+        return jsonify([])
+    
+    filtered_data = classroom_data
+    if campus:
+        filtered_data = filtered_data[filtered_data["校区"] == campus]
+        print(f"筛选后的数据条数: {len(filtered_data)}")
+    
+    classrooms = filtered_data["教室"].dropna().unique().tolist()
+    print(f"找到的教室数量: {len(classrooms)}")
+    print(f"前5个教室: {classrooms[:5] if classrooms else '无'}")
+    return jsonify(sorted(classrooms))
+
+@app.route("/api/classroom_courses")
+def get_courses_by_classroom():
+    week = request.args.get("week", 1)
+    classroom = request.args.get("classroom", None)
+    campus = request.args.get("campus", None)
+    
+
+    
+    if classroom_data.empty:
+        return jsonify({"error": "教室数据未加载"}), 500
+    
+    # 筛选数据
+    filtered_data = classroom_data
+    
+    if campus:
+        filtered_data = filtered_data[filtered_data["校区"] == campus]
+    if classroom:
+        filtered_data = filtered_data[filtered_data["教室"] == classroom]
+    
+    if week:
+        week = int(week)
+        filtered_data = filtered_data[
+            filtered_data["周次"].apply(lambda x: week in parse_weeks(str(x)) if pd.notna(x) else False)
+        ]
+    
+    # 解析课程信息
+    results = []
+    for _, row in filtered_data.iterrows():
+        day_and_period = parse_day_and_period(str(row["节次"]))
+        if day_and_period:
+            day, periods = day_and_period
+            course_date = calculate_date(week, day)
+            results.append({
+                "课程": str(row["课程名称"]).split("]")[1] if "]" in str(row["课程名称"]) else str(row["课程名称"]),
+                "教师": str(row["教师"]),
+                "地点": str(row["教室"]),
+                "星期": day,
+                "日期": course_date.strftime("%Y-%m-%d"),
+                "节次": periods,
+                "节次范围": f"第{periods[0]}-{periods[-1]}节",
+                "周次": str(row["周次"]),
+                "校区": str(row["校区"]),
+                "上课班级": str(row["行政班级"]) if "行政班级" in row else ""
+            })
+    
+    # 按星期和节次排序
+    results = sorted(results, key=lambda x: (x["星期"], x["节次"][0]))
+    return jsonify(results)
+
+@app.route("/api/student_courses_v2")
+def get_student_courses_v2():
+    week = request.args.get("week", 1)
+    student_name = request.args.get("student_name", "").strip()
+
+    if not student_name:
+        return jsonify({"error": "缺少学生姓名参数"}), 400
+
+    # 使用拷贝的数据，避免修改原始 student_data
+    student_data_copy = student_data.copy()
+    student_data_copy["区队"] = student_data_copy["区队"].str.extract(r"\](.*)$")[0].str.strip()
+
+    # 查找匹配的学生信息
+    matching_students = student_data_copy[student_data_copy["姓名"].str.contains(student_name, na=False)]
+    
+    if matching_students.empty:
+        return jsonify([])  # 返回空数组而不是错误对象
+
+    # 获取学生所在班级
+    admin_classes = matching_students["区队"].unique()
+
+    # 筛选课程数据
+    if '行政班级' in grade_data.columns:
+        filtered_data = grade_data[grade_data["行政班级"].isin(admin_classes)]
+    else:
+        return jsonify([])
+
+    # 按课程类型筛选
+    if '课程类别' in filtered_data.columns:
+        filtered_data = filtered_data[filtered_data["课程类别"].str.contains("必修课", na=False)]
+
+    # 按周次筛选
+    if week:
+        week = int(week)
+        if '周次' in filtered_data.columns:
+            filtered_data = filtered_data[
+                filtered_data["周次"].apply(lambda x: week in parse_weeks(x) if pd.notna(x) else False)
+            ]
+    
+    # 如果没有找到课程数据
+    if filtered_data.empty:
+        return jsonify([])  # 返回空数组而不是错误对象
+
+    # 解析课程信息
+    results = []
+    for _, row in filtered_data.iterrows():
+        day_and_period = parse_day_and_period(row["节次"])
+        if day_and_period:
+            day, periods = day_and_period
+            course_date = calculate_date(week, day)  # 计算课程日期
+            
+            # 根据地点判断校区
+            location = row["地点"].split("（")[0] if "（" in row["地点"] else row["地点"]
+            campus = "仙葫" if "仙葫" in str(row["地点"]) else "五合"
+            
+            results.append({
+               "课程": row["课程"].split("]")[1] if "]" in row["课程"] else row["课程"],
+                "教师": row["教师"],
+                "地点": location,
+                "星期": day,
+                "日期": course_date.strftime("%Y-%m-%d"),  # 格式化为字符串
+                "节次": periods,
+                "节次范围": f"第{periods[0]}-{periods[-1]}节",
+                "周次": row["周次"],
+                "校区": campus,
+                "上课班级": str(row["行政班级"]) if "行政班级" in row else ""
+            })
+
+    # 按星期和节次排序
+    results = sorted(results, key=lambda x: (x["星期"], x["节次"][0]))
+    return jsonify(results)
+
+
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860, debug=False)
+

templates/classroom.html

@@ -0,0 +1,1203 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>教室课表</title>
+    <style>
+        /* 全局样式 */
+        body {
+            font-family: 'Roboto', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+            color: #333;
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        /* 背景动画 */
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        /* 磨砂玻璃背景层 */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            z-index: -1;
+            pointer-events: none;
+        }
+        
+        /* 浮动粒子效果 */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
+                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
+                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08) 3px, transparent 3px);
+            background-size: 200px 200px, 150px 150px, 300px 300px;
+            animation: particleFloat 20s linear infinite;
+            z-index: -1;
+            pointer-events: none;
+        }
+        
+        @keyframes particleFloat {
+            0% { transform: translateY(0px) rotate(0deg); }
+            100% { transform: translateY(-100vh) rotate(360deg); }
+        }
+        h1 {
+            text-align: center;
+            margin: 20px 0;
+            font-size: 28px;
+            font-weight: bold;
+            color: #0078d4;
+            letter-spacing: 1.2px;
+        }
+        /* 控制区域样式 */
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            color: #0078d4;
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            margin: 20px;
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                0 2px 8px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+            position: relative;
+            z-index: 10;
+        }
+        
+        .controls::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            border-radius: 15px;
+            z-index: -1;
+            animation: controlsShimmer 3s ease-in-out infinite;
+        }
+        
+        @keyframes controlsShimmer {
+            0%, 100% { opacity: 0.5; }
+            50% { opacity: 0.8; }
+        }
+        .controls div {
+            flex: 1;
+            text-align: center;
+        }
+        .controls label {
+            font-weight: bold;
+            margin-right: 10px;
+        }
+        .controls select,
+        .controls button {
+            padding: 12px 24px;
+            font-size: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .controls button {
+            background: linear-gradient(135deg, rgba(0, 120, 212, 0.8) 0%, rgba(0, 90, 158, 0.9) 100%);
+            color: white;
+            box-shadow: 
+                0 4px 15px rgba(0, 120, 212, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        }
+        
+        .controls button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
+            transition: left 0.5s;
+        }
+
+        .controls select {
+            background: rgba(255, 255, 255, 0.9);
+            color: #0078d4;
+            font-weight: bold;
+            box-shadow: 
+                0 2px 10px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        .controls select:hover,
+        .controls button:hover {
+            transform: translateY(-2px);
+        }
+        
+        .controls button:hover {
+            background: linear-gradient(135deg, rgba(0, 90, 158, 0.9) 0%, rgba(0, 120, 212, 1) 100%);
+            box-shadow: 
+                0 8px 25px rgba(0, 120, 212, 0.4),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+        }
+        
+        .controls button:hover::before {
+            left: 100%;
+        }
+        
+        .controls select:hover {
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 
+                0 4px 15px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.7);
+        }
+        .controls select:focus,
+        .controls button:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
+        }
+        /* 导航按钮样式 */
+        .nav-button {
+            padding: 10px 15px;
+            font-size: 14px;
+            border: none;
+            border-radius: 5px;
+            background-color: #fff;
+            color: #0078d4;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin: 0 5px;
+        }
+        .nav-button:hover {
+            background-color: #eaf4fc;
+        }
+        .nav-button:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
+        }
+        /* 时间表头样式 */
+        .time-header {
+            display: grid;
+            grid-template-columns: 70px repeat(7, 1fr);
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            color: #0078d4;
+            text-align: center;
+            margin: 20px;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 12px 0;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                0 2px 8px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .time-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            animation: headerShimmer 4s ease-in-out infinite;
+        }
+        
+        @keyframes headerShimmer {
+            0% { left: -100%; }
+            50% { left: 100%; }
+            100% { left: 100%; }
+        }
+        .time-header div {
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 8px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            z-index: 1;
+        }
+        .time-header div:last-child {
+            border-right: none;
+        }
+        .time-header div:hover {
+            transform: translateY(-3px) scale(1.02);
+            background: rgba(255, 255, 255, 0.4);
+            backdrop-filter: blur(15px);
+            cursor: pointer;
+            border-radius: 8px;
+            box-shadow: 
+                0 8px 25px rgba(0, 120, 212, 0.2),
+                0 4px 12px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        /* 课程表网格样式 */
+        .schedule-grid {
+            display: grid;
+            grid-template-columns: 70px repeat(7, 1fr);
+            gap: 2px;
+            margin: 20px;
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                0 2px 8px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+            position: relative;
+        }
+        
+        .schedule-grid::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            pointer-events: none;
+        }
+        /* 时间列样式 */
+        .time-column {
+            background-color: #f8f9fa;
+            text-align: center;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 20px 5px;
+            border-right: 1px solid #ddd;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #0078d4;
+        }
+        /* 网格单元格样式 */
+        .grid-cell {
+            background: rgba(255, 255, 255, 0.4);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            min-height: 120px;
+            padding: 8px;
+            position: relative;
+            border-radius: 8px;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 
+                0 2px 10px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4);
+        }
+        .grid-cell:hover {
+            transform: translateY(-3px) scale(1.01);
+            background: rgba(255, 255, 255, 0.5);
+            box-shadow: 
+                0 8px 25px rgba(0, 0, 0, 0.1),
+                0 4px 12px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        /* 课程样式 */
+        .course {
+            background: linear-gradient(135deg, rgba(167, 216, 222, 0.9) 0%, rgba(128, 199, 205, 0.8) 100%);
+            backdrop-filter: blur(10px);
+            color: #2c3e50;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 10px;
+            padding: 10px;
+            font-size: 14px;
+            margin: 3px;
+            box-shadow: 
+                0 6px 20px rgba(0, 0, 0, 0.1),
+                0 2px 8px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            border-left: 4px solid rgba(0, 120, 212, 0.8);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .course::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            transition: left 0.6s ease;
+        }
+        
+        .course:hover {
+            transform: scale(1.05) translateY(-2px);
+            background: linear-gradient(135deg, rgba(167, 216, 222, 1) 0%, rgba(128, 199, 205, 0.95) 100%);
+            box-shadow: 
+                0 12px 30px rgba(0, 0, 0, 0.15),
+                0 4px 15px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+        }
+        
+        .course:hover::before {
+            left: 100%;
+        }
+        .course strong {
+            display: block;
+            font-size: 15px;
+            margin-bottom: 4px;
+            color: #0078d4;
+        }
+        .course .teacher,
+        .course .class,
+        .course .period {
+            font-size: 13px;
+            color: #666;
+            margin: 2px 0;
+        }
+        /* 无课程提示 */
+        .no-courses {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 40px;
+            color: #999;
+            font-size: 16px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            margin: 20px;
+        }
+        /* 周次选择器样式 */
+        .week-selector {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        /* 合并课程样式 */
+        .course {
+            cursor: pointer;
+        }
+        
+        /* 课程指示器样式 */
+        .course-indicator {
+            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+            color: #333;
+            border-radius: 8px;
+            padding: 15px 8px;
+            font-size: 14px;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, background-color 0.3s ease;
+            border-left: 4px solid #2196f3;
+            cursor: pointer;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .course-indicator:hover {
+            transform: scale(1.02);
+            background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
+        }
+        
+        .course-indicator .has-course {
+            font-weight: bold;
+            color: #1976d2;
+            margin-bottom: 5px;
+            font-size: 15px;
+        }
+        
+        .course-indicator .course-count {
+            font-size: 13px;
+            color: #666;
+        }
+        
+        .course-summary {
+            background: linear-gradient(135deg, #a7d8de 0%, #80c7cd 100%);
+            color: #333;
+            border-radius: 8px;
+            padding: 8px;
+            font-size: 14px;
+            margin: 2px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, background-color 0.3s ease;
+            border-left: 4px solid #0078d4;
+            cursor: pointer;
+        }
+        .course-summary:hover {
+            transform: scale(1.02);
+            background: linear-gradient(135deg, #80c7cd 0%, #5fb3ba 100%);
+        }
+        .course-summary .course-count {
+            font-size: 12px;
+            color: #0078d4;
+            font-weight: bold;
+            margin-bottom: 2px;
+        }
+        .course-summary .course-list {
+            font-size: 13px;
+            line-height: 1.3;
+        }
+        .course-summary .teacher-list {
+            font-size: 12px;
+            color: #666;
+            margin-top: 4px;
+        }
+        /* 模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+        .modal-content {
+            background-color: #fff;
+            margin: 10% auto;
+            padding: 20px;
+            border-radius: 10px;
+            width: 80%;
+            max-width: 500px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #0078d4;
+        }
+        .modal-title {
+            color: #0078d4;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .close {
+            color: #999;
+            font-size: 24px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+        .close:hover {
+            color: #0078d4;
+        }
+        .course-detail {
+            margin: 10px 0;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+            border-left: 4px solid #0078d4;
+        }
+        .course-detail .course-name {
+            font-weight: bold;
+            color: #0078d4;
+            margin-bottom: 5px;
+        }
+        .course-detail .course-info {
+            font-size: 14px;
+            color: #666;
+            margin: 2px 0;
+        }
+        /* 移动端适配 */
+        @media (max-width: 768px) {
+            body {
+                font-size: 14px;
+                padding: 5px;
+            }
+            h1 {
+                font-size: 20px;
+                margin: 15px 0;
+            }
+            .controls {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                padding: 10px;
+                margin: 5px;
+            }
+            .controls div {
+                flex: none;
+                text-align: center;
+            }
+            .controls select,
+            .controls button,
+            .controls input {
+                padding: 8px;
+                font-size: 12px;
+                margin: 2px;
+                min-width: 80px;
+            }
+            
+            .classroom-search {
+                width: 100%;
+                padding: 8px 12px !important;
+                font-size: 12px !important;
+                border: 1px solid #0078d4;
+                border-radius: 5px;
+                color: #333;
+                box-sizing: border-box;
+            }
+            
+            .search-results {
+                position: absolute;
+                top: calc(100% + 2px);
+                left: 0;
+                width: 100%;
+                background: #f0f8ff;
+                border: 1px solid #0078d4;
+                max-height: 150px;
+                overflow-y: auto;
+                z-index: 1000;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                border-radius: 5px;
+                box-sizing: border-box;
+            }
+            .nav-button {
+                padding: 8px 12px;
+                font-size: 12px;
+                margin: 2px;
+            }
+            .time-header {
+                grid-template-columns: 50px repeat(7, 1fr);
+                font-size: 12px;
+                padding: 8px 0;
+                margin: 5px;
+            }
+            .schedule-grid {
+                grid-template-columns: 50px repeat(7, minmax(0, 1fr));
+                margin: 5px;
+                gap: 1px;
+            }
+            .time-column {
+                font-size: 12px;
+                padding: 15px 2px;
+            }
+            .grid-cell {
+                min-height: 100px;
+                padding: 3px;
+            }
+            .course {
+                font-size: 10px;
+                padding: 4px;
+                margin: 1px;
+            }
+            .course strong {
+                font-size: 11px;
+            }
+            .course .teacher,
+            .course .class,
+            .course .period {
+                font-size: 11px;
+            }
+            /* 移动端模态��样式 */
+            .modal-content {
+                width: 95%;
+                margin: 5% auto;
+                padding: 15px;
+            }
+            .modal-title {
+                font-size: 18px;
+            }
+            .course-detail {
+                margin: 8px 0;
+                padding: 8px;
+            }
+            .course-detail .course-name {
+                font-size: 16px;
+            }
+            .course-detail .course-info {
+                font-size: 14px;
+            }
+            .course-summary .course-count {
+                font-size: 11px;
+            }
+            .course-summary .course-list {
+                font-size: 12px;
+            }
+            .course-summary .teacher-list {
+                font-size: 11px;
+            }
+        }
+        
+        /* 搜索结果样式 */
+        .search-results {
+            background: #f0f8ff;
+            border: 1px solid #0078d4;
+            border-radius: 5px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        
+        .search-results div {
+            padding: 10px 15px;
+            cursor: pointer;
+            border-bottom: 1px solid #e0e0e0;
+            transition: background-color 0.2s ease;
+        }
+        
+        .search-results div:last-child {
+            border-bottom: none;
+        }
+        
+        .search-results div:hover {
+            background-color: #e3f2fd;
+            color: #0078d4;
+        }
+        
+        .classroom-search:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
+        }
+        
+        .classroom-search:hover {
+            background: rgba(255, 255, 255, 1);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+        }
+    </style>
+</head>
+<body>
+    <h1>教室课表查询</h1>
+    
+    <div class="controls">
+        <div>
+            <button class="nav-button" onclick="location.href='/'">班级查询</button>
+            <button class="nav-button" onclick="location.href='/students'">学生查询</button>
+            <button class="nav-button" onclick="location.href='/teachers'">教师查询</button>
+        </div>
+        
+        <div>
+            <label>校区:</label>
+            <button id="campus-btn" class="nav-button" onclick="toggleCampus()">仙葫校区</button>
+        </div>
+        
+        <div class="search-container" style="position: relative;">
+            <label for="classroom-search">教室:</label>
+            <input type="text" id="classroom-search" class="classroom-search" placeholder="搜索教室名称" style="padding: 12px 24px; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; background: rgba(255, 255, 255, 0.9); color: #0078d4; font-weight: bold; cursor: text; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);">
+            <div id="classroom-search-results" class="search-results" style="display: none; position: absolute; top: calc(100% + 2px); left: 0; width: 100%; background: #f0f8ff; border: 1px solid #0078d4; max-height: 150px; overflow-y: auto; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 5px; box-sizing: border-box;"></div>
+        </div>
+        
+        <div class="week-selector">
+            <label for="week">周次:</label>
+            <select id="week" onchange="changeWeekBySelect()">
+                <option value="1">第1周</option>
+                <option value="2">第2周</option>
+                <option value="3">第3周</option>
+                <option value="4">第4周</option>
+                <option value="5">第5周</option>
+                <option value="6">第6周</option>
+                <option value="7">第7周</option>
+                <option value="8">第8周</option>
+                <option value="9">第9周</option>
+                <option value="10">第10周</option>
+                <option value="11">第11周</option>
+                <option value="12">第12周</option>
+                <option value="13">第13周</option>
+                <option value="14">第14周</option>
+                <option value="15">第15周</option>
+                <option value="16">第16周</option>
+                <option value="17">第17周</option>
+                <option value="18">第18周</option>
+                <option value="19">第19周</option>
+                <option value="20">第20周</option>
+            </select>
+        </div>
+    </div>
+
+    <div class="time-header">
+        <div>节次</div>
+        <div>周一</div>
+        <div>周二</div>
+        <div>周三</div>
+        <div>周四</div>
+        <div>周五</div>
+        <div>周六</div>
+        <div>周日</div>
+    </div>
+
+    <div class="schedule-grid" id="schedule-container">
+        <!-- 课程表将通过JavaScript动态生成 -->
+        <!-- 示���结构 -->
+        <div class="time-column">第1-3节</div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        
+        <div class="time-column">第4-5节</div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        
+        <div class="time-column">第6-8节</div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        
+        <div class="time-column">第9-11节</div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+        <div class="grid-cell"></div>
+    </div>
+
+    <!-- 课程详情模态框 -->
+    <div id="courseModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">课程详情</div>
+                <span class="close" onclick="closeModal()">&times;</span>
+            </div>
+            <div id="courseDetails">
+                <!-- 课程详情将在这里动态生成 -->
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let currentWeek = 1;
+        let classroomList = [];
+        
+        // 页面加载完成后初始化
+        window.onload = function() {
+            loadClassrooms(); // 先加载教室列表
+            loadSchedule();
+        };
+        
+        // 搜索教室功能
+        function searchClassrooms() {
+            const searchInput = document.getElementById("classroom-search").value.toLowerCase();
+            const searchResults = document.getElementById("classroom-search-results");
+            searchResults.innerHTML = "";
+            
+            if (searchInput.trim() === "") {
+                searchResults.style.display = "none";
+                return;
+            }
+            
+            const filteredClassrooms = classroomList.filter(classroom =>
+                classroom.toLowerCase().includes(searchInput)
+            );
+            
+            if (filteredClassrooms.length > 0) {
+                searchResults.style.display = "block";
+                filteredClassrooms.forEach(classroom => {
+                    const resultDiv = document.createElement("div");
+                    resultDiv.textContent = classroom;
+                    resultDiv.onclick = () => selectClassroom(classroom);
+                    searchResults.appendChild(resultDiv);
+                });
+            } else {
+                searchResults.style.display = "none";
+            }
+        }
+        
+        // 选择教室
+        function selectClassroom(classroom) {
+            document.getElementById("classroom-search").value = classroom;
+            document.getElementById("classroom-search-results").style.display = "none";
+            loadSchedule();
+        }
+        
+        // 点击其他地方隐藏搜索结果
+        document.addEventListener('click', function(event) {
+            const searchContainer = document.querySelector('.search-container');
+            const searchResults = document.getElementById('classroom-search-results');
+            if (!searchContainer.contains(event.target)) {
+                searchResults.style.display = 'none';
+            }
+        });
+
+        // 切换校区
+        function toggleCampus() {
+            const campusBtn = document.getElementById('campus-btn');
+            const currentCampus = campusBtn.textContent;
+            
+            if (currentCampus === '仙葫校区') {
+                campusBtn.textContent = '五合校区';
+            } else {
+                campusBtn.textContent = '仙葫校区';
+            }
+            
+            loadClassrooms();
+        }
+        
+        // 根据校区获取教室列表
+        function loadClassrooms() {
+            const campus = document.getElementById('campus-btn').textContent;
+            const classroomSearch = document.getElementById('classroom-search');
+            
+            // 清空教室搜索框
+            classroomSearch.value = '';
+            classroomList = [];
+            
+            if (!campus) {
+                loadSchedule();
+                return;
+            }
+            
+            fetch(`/api/classrooms?campus=${encodeURIComponent(campus)}`)
+                .then(response => response.json())
+                .then(classrooms => {
+                    classroomList = classrooms.sort(); // 按字母顺序排序
+                    // 添加搜索事件监听器
+                    classroomSearch.addEventListener('input', searchClassrooms);
+                })
+                .catch(error => {
+                    console.error('获取教室列表失败:', error);
+                });
+            
+            // 重新加载课程表
+            loadSchedule();
+        }
+
+        // 加载课程表
+        function loadSchedule() {
+            const campus = document.getElementById('campus-btn').textContent;
+            const classroom = document.getElementById('classroom-search').value;
+            
+            if (!classroom) {
+                clearSchedule();
+                return;
+            }
+
+            let url = `/api/classroom_courses?week=${currentWeek}&classroom=${encodeURIComponent(classroom)}`;
+            if (campus) {
+                url += `&campus=${encodeURIComponent(campus)}`;
+            }
+            
+            fetch(url)
+                .then(response => response.json())
+                .then(courses => {
+                    renderSchedule(courses);
+                })
+                .catch(error => {
+                    console.error('获取课程表失败:', error);
+                });
+        }
+
+        // 渲染课程表
+        function renderSchedule(courses) {
+            // 清空现有课程
+            clearSchedule();
+            
+            if (courses.length === 0) {
+                // 如果没有课程，显示提示信息
+                document.getElementById('schedule-container').innerHTML = '<div class="no-courses">本周该教室没有安排课程</div>';
+                return;
+            }
+
+            // 定义时间槽配置
+            const timeSlots = [
+                { id: 1, start: 1, end: 3, label: '第1-3节' },
+                { id: 2, start: 4, end: 5, label: '第4-5节' },
+                { id: 3, start: 6, end: 8, label: '第6-8节' },
+                { id: 4, start: 9, end: 11, label: '第9-11节' }
+            ];
+            
+            // 将课程按星期和时间槽分组
+            const schedule = {};
+            courses.forEach(course => {
+                const day = course.星期;
+                const periods = course.节次;
+                
+                if (!schedule[day]) {
+                    schedule[day] = {};
+                }
+                
+                // 确定课程属于哪个时间槽 - 修复逻辑：课程必须完全在时间槽范围内
+                const firstPeriod = periods[0];
+                const lastPeriod = periods[periods.length - 1];
+                
+                // 查找匹配的时间槽 - 课程必须完全包含在时间槽内
+                const timeSlot = timeSlots.find(slot => 
+                    firstPeriod >= slot.start && lastPeriod <= slot.end
+                );
+                
+                // 将课程添加到对应时间槽
+                if (timeSlot) {
+                    if (!schedule[day][timeSlot.id]) {
+                        schedule[day][timeSlot.id] = [];
+                    }
+                    // 添加节次范围信息到课程对象中
+                    const courseWithPeriod = {...course, 节次范围: `第${firstPeriod}-${lastPeriod}节`};
+                    schedule[day][timeSlot.id].push(courseWithPeriod);
+                }
+            });
+
+            // 填充课程到表格中
+            const container = document.getElementById('schedule-container');
+            const cells = container.querySelectorAll('.grid-cell');
+            
+            cells.forEach((cell, index) => {
+                const day = (index % 7) + 1; // 星期一到星期日为1-7
+                const timeSlotId = Math.floor(index / 7) + 1; // 时间槽 1-4
+                
+                // 查找该时段的课程
+                if (schedule[day] && schedule[day][timeSlotId]) {
+                    const courses = schedule[day][timeSlotId];
+                    
+                    // 简化显示，只显示有课程的标识
+                    const courseElement = document.createElement('div');
+                    courseElement.className = 'course-indicator';
+                    courseElement.innerHTML = `
+                        <div class="has-course">有课程</div>
+                        <div class="course-count">${courses.length}门</div>
+                    `;
+                    courseElement.onclick = () => showCourseDetails(courses);
+                    cell.appendChild(courseElement);
+                }
+            });
+        }
+
+        // 清空课程表
+        function clearSchedule() {
+            const container = document.getElementById('schedule-container');
+            
+            // 恢复初始结构
+            container.innerHTML = `
+                <div class="time-column">第1-3节</div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                
+                <div class="time-column">第4-5节</div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                
+                <div class="time-column">第6-8节</div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                
+                <div class="time-column">第9-11节</div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+                <div class="grid-cell"></div>
+            `;
+        }
+
+        // 通过下拉选择器更改周次
+        function changeWeekBySelect() {
+            const weekSelect = document.getElementById('week');
+            currentWeek = parseInt(weekSelect.value);
+            loadSchedule();
+        }
+        
+        // 更改周次（保留原函数以防其他地方调用）
+        function changeWeek(delta) {
+            currentWeek += delta;
+            if (currentWeek < 1) currentWeek = 1;
+            if (currentWeek > 20) currentWeek = 20;
+            document.getElementById('week').value = currentWeek;
+            loadSchedule();
+        }
+        
+        // 显示课程详情模态框
+        function showCourseDetails(courses) {
+            const modal = document.getElementById('courseModal');
+            const detailsContainer = document.getElementById('courseDetails');
+            
+            // 清空之前的内容
+            detailsContainer.innerHTML = '';
+            
+            // 为每个课程创建详情卡片
+            courses.forEach(course => {
+                const courseDetail = document.createElement('div');
+                courseDetail.className = 'course-detail';
+                courseDetail.innerHTML = `
+                    <div class="course-name">${course.课程}</div>
+                    <div class="course-info">教师: ${course.教师}</div>
+                    <div class="course-info">班级: ${course.上课班级}</div>
+                    <div class="course-info">时间: ${course.节次范围}</div>
+                `;
+                detailsContainer.appendChild(courseDetail);
+            });
+            
+            // 显示模态框
+            modal.style.display = 'block';
+        }
+        
+        // 关闭模态框
+        function closeModal() {
+            const modal = document.getElementById('courseModal');
+            modal.style.display = 'none';
+        }
+        
+        // 点击模态框外部关闭
+        window.onclick = function(event) {
+            const modal = document.getElementById('courseModal');
+            if (event.target === modal) {
+                modal.style.display = 'none';
+            }
+        }
+        
+        // 鼠标轨迹粒子效果
+        class MouseTrailParticle {
+            constructor(x, y) {
+                this.x = x;
+                this.y = y;
+                this.vx = (Math.random() - 0.5) * 4;
+                this.vy = (Math.random() - 0.5) * 4;
+                this.life = 1.0;
+                this.decay = 0.02 + Math.random() * 0.02;
+                this.size = 2 + Math.random() * 4;
+                this.color = `hsl(${Math.random() * 60 + 200}, 70%, 70%)`;
+            }
+            
+            update() {
+                this.x += this.vx;
+                this.y += this.vy;
+                this.vx *= 0.98;
+                this.vy *= 0.98;
+                this.life -= this.decay;
+                this.size *= 0.98;
+            }
+            
+            draw(ctx) {
+                ctx.save();
+                ctx.globalAlpha = this.life;
+                ctx.fillStyle = this.color;
+                ctx.shadowBlur = 10;
+                ctx.shadowColor = this.color;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+            
+            isDead() {
+                return this.life <= 0 || this.size <= 0.1;
+            }
+        }
+        
+        // 创建画布
+        const canvas = document.createElement('canvas');
+        canvas.style.position = 'fixed';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        canvas.style.width = '100%';
+        canvas.style.height = '100%';
+        canvas.style.pointerEvents = 'none';
+        canvas.style.zIndex = '9999';
+        document.body.appendChild(canvas);
+        
+        const ctx = canvas.getContext('2d');
+        const particles = [];
+        let mouseX = 0;
+        let mouseY = 0;
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+        
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        
+        function addParticles(x, y) {
+            const distance = Math.sqrt((x - lastMouseX) ** 2 + (y - lastMouseY) ** 2);
+            if (distance > 5) {
+                for (let i = 0; i < 3; i++) {
+                    particles.push(new MouseTrailParticle(x + (Math.random() - 0.5) * 10, y + (Math.random() - 0.5) * 10));
+                }
+                lastMouseX = x;
+                lastMouseY = y;
+            }
+        }
+        
+        function animate() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // 更新和绘制粒子
+            for (let i = particles.length - 1; i >= 0; i--) {
+                const particle = particles[i];
+                particle.update();
+                particle.draw(ctx);
+                
+                if (particle.isDead()) {
+                    particles.splice(i, 1);
+                }
+            }
+            
+            requestAnimationFrame(animate);
+        }
+        
+        // 事件监听
+        document.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+            addParticles(mouseX, mouseY);
+        });
+        
+        window.addEventListener('resize', resizeCanvas);
+        
+        // 初始化
+        resizeCanvas();
+        animate();
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,1074 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <!-- 适配不同设备 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>课程表</title>
+    <style>
+        /* 全局样式 */
+        body {
+            font-family: 'Roboto', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+            color: #333;
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        /* 背景动画 */
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        /* 磨砂玻璃背景层 */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            z-index: -1;
+            pointer-events: none;
+        }
+        
+        /* 浮动粒子效果 */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
+                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
+                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08) 3px, transparent 3px);
+            background-size: 200px 200px, 150px 150px, 300px 300px;
+            animation: particleFloat 20s linear infinite;
+            z-index: -1;
+            pointer-events: none;
+        }
+        
+        @keyframes particleFloat {
+            0% { transform: translateY(0px) rotate(0deg); }
+            100% { transform: translateY(-100vh) rotate(360deg); }
+        }
+        h1 {
+            text-align: center;
+            margin: 20px 0;
+            font-size: 28px;
+            font-weight: bold;
+            color: #fff;
+            letter-spacing: 1.2px;
+            text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
+            animation: titleGlow 3s ease-in-out infinite alternate;
+        }
+        
+        @keyframes titleGlow {
+            0% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3); }
+            100% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.5); }
+        }
+        /* 控制区域样式 */
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 20px;
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            border-radius: 15px;
+            margin: 10px 20px;
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2),
+                0 1px 0 rgba(255, 255, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .controls::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+            animation: shimmer 3s infinite;
+        }
+        
+        @keyframes shimmer {
+            0% { left: -100%; }
+            100% { left: 100%; }
+        }
+        .controls div {
+            flex: 1; /* 保证每个div等宽 */
+            text-align: center; /* 中心对齐 */
+        }
+        .controls label {
+            font-weight: bold;
+            margin-right: 10px;
+        }
+        .controls select,
+        .controls button {
+            padding: 8px 12px;
+            font-size: 14px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.9);
+            color: #333;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+            box-shadow: 
+                0 2px 8px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        .controls select::before,
+        .controls button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.6), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .controls select:hover,
+        .controls button:hover {
+            background: rgba(255, 255, 255, 0.95);
+            transform: translateY(-1px);
+            box-shadow: 
+                0 4px 16px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.7),
+                0 0 20px rgba(255, 255, 255, 0.3);
+        }
+        
+        .controls select:hover::before,
+        .controls button:hover::before {
+            opacity: 1;
+        }
+        
+        .controls select:focus,
+        .controls button:focus {
+            outline: none;
+            box-shadow: 
+                0 0 0 3px rgba(255, 255, 255, 0.3),
+                0 4px 16px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.7);
+        }
+        /* 导航按钮样式 */
+        .nav-button {
+            padding: 10px 15px;
+            font-size: 14px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.9);
+            color: #333;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+            box-shadow: 
+                0 2px 8px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        .nav-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.6), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .nav-button:hover {
+            background: rgba(255, 255, 255, 0.95);
+            transform: translateY(-1px);
+            box-shadow: 
+                0 4px 16px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.7),
+                0 0 20px rgba(255, 255, 255, 0.3);
+        }
+        
+        .nav-button:hover::before {
+            opacity: 1;
+        }
+        
+        .nav-button:focus {
+            outline: none;
+            box-shadow: 
+                0 0 0 3px rgba(255, 255, 255, 0.3),
+                0 4px 16px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.7);
+        }
+        /* 时间表头样式 */
+        .time-header {
+            display: grid;
+            grid-template-columns: 70px repeat(7, 1fr);
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            text-align: center;
+            margin: 10px 20px;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 10px 0;
+            border-radius: 12px;
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2),
+                0 0 30px rgba(255, 255, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .time-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, 
+                rgba(255, 255, 255, 0.1) 0%, 
+                transparent 50%, 
+                rgba(255, 255, 255, 0.1) 100%);
+            animation: headerShimmer 4s ease-in-out infinite;
+        }
+        
+        @keyframes headerShimmer {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 0.7; }
+        }
+        .time-header div {
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 5px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            z-index: 1;
+        }
+        
+        .time-header div:last-child {
+            border-right: none;
+        }
+        
+        .time-header div:hover {
+            transform: translateY(-3px) scale(1.02);
+            background: rgba(255, 255, 255, 0.25);
+            cursor: pointer;
+            box-shadow: 
+                0 4px 16px rgba(255, 255, 255, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+        }
+        /* 时间列样式 */
+        .time-column {
+            background-color: #f8f9fa;
+            text-align: center;
+            font-size: 14px;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+        .time-column div {
+            flex: 1;
+            padding: 10px 0;
+            border-top: 1px solid #ddd;
+            font-weight: bold;
+        }
+        .time-column div:first-child {
+            border-top: none;
+        }
+        /* 每日课程样式 */
+        .day {
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 5px;
+            height: 500px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            border-radius: 12px;
+            overflow: hidden;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 
+                0 4px 16px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        }
+        
+        .day::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.1) 0%, 
+                transparent 50%, 
+                rgba(255, 255, 255, 0.05) 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        
+        .day:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 
+                0 16px 40px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3),
+                0 0 30px rgba(255, 255, 255, 0.2);
+        }
+        
+        .day:hover::before {
+            opacity: 1;
+        }
+        /* 时间槽样式 */
+        .time-slot {
+            flex: 1;
+            position: relative;
+            border-top: 1px solid #eee;
+            overflow: hidden;
+        }
+        .time-slot:first-child {
+            border-top: none;
+        }
+        /* 课程样式 */
+        .time-slot .course {
+            position: absolute;
+            background: linear-gradient(135deg, 
+                rgba(167, 216, 222, 0.9) 0%, 
+                rgba(128, 199, 205, 0.9) 100%);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: #333;
+            border-radius: 10px;
+            padding: 25px;
+            font-size: 15px;
+            font-weight: bold;
+            text-align: center;
+            margin: 5px;
+            width: 75%;
+            box-shadow: 
+                0 4px 16px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                0 0 20px rgba(167, 216, 222, 0.3);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            height: 50%;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .time-slot .course::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, 
+                transparent, 
+                rgba(255, 255, 255, 0.3), 
+                transparent);
+            transition: left 0.6s ease;
+        }
+        
+        .time-slot .course:hover {
+            transform: scale(1.08) translateY(-2px);
+            background: linear-gradient(135deg, 
+                rgba(167, 216, 222, 0.95) 0%, 
+                rgba(128, 199, 205, 0.95) 100%);
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5),
+                0 0 40px rgba(167, 216, 222, 0.5);
+        }
+        
+        .time-slot .course:hover::before {
+            left: 100%;
+        }
+        /* 网格容器样式 */
+        .schedule-container {
+            display: grid;
+            grid-template-columns: 70px repeat(7, 1fr);
+            gap: 2px;
+            margin: 10px 20px;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2),
+                0 1px 0 rgba(255, 255, 255, 0.1);
+            position: relative;
+        }
+        
+        .schedule-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.05) 0%, 
+                transparent 50%, 
+                rgba(255, 255, 255, 0.05) 100%);
+            pointer-events: none;
+        }
+
+        /* 课程详情模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(8px);
+            animation: modalFadeIn 0.3s ease-out;
+        }
+        
+        @keyframes modalFadeIn {
+            from {
+                opacity: 0;
+                backdrop-filter: blur(0px);
+            }
+            to {
+                opacity: 1;
+                backdrop-filter: blur(8px);
+            }
+        }
+        
+        .modal-content {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            margin: 10% auto;
+            padding: 0;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 15px;
+            width: 80%;
+            max-width: 500px;
+            box-shadow: 
+                0 16px 64px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                0 0 40px rgba(255, 255, 255, 0.2);
+            animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        @keyframes modalSlideIn {
+            from {
+                transform: translateY(-50px) scale(0.9);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0) scale(1);
+                opacity: 1;
+            }
+        }
+        
+        .modal-content::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.1) 0%, 
+                transparent 50%, 
+                rgba(255, 255, 255, 0.05) 100%);
+            pointer-events: none;
+        }
+        
+        .modal-header {
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            padding: 15px 20px;
+            border-radius: 15px 15px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+            z-index: 1;
+            box-shadow: 
+                0 2px 16px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+        }
+        
+        .modal-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.15) 0%, 
+                rgba(255, 255, 255, 0.05) 100%);
+            border-radius: 15px 15px 0 0;
+        }
+        
+        .modal-title {
+            font-size: 18px;
+            font-weight: bold;
+            position: relative;
+            z-index: 2;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+        }
+        
+        .close {
+            color: white;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+            line-height: 1;
+            position: relative;
+            z-index: 2;
+            transition: all 0.3s ease;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+        }
+        
+        .close:hover {
+            opacity: 0.8;
+            transform: scale(1.1);
+            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
+        }
+        
+        .course-detail {
+            padding: 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            position: relative;
+            z-index: 1;
+            backdrop-filter: blur(5px);
+            transition: all 0.3s ease;
+        }
+        
+        .course-detail:hover {
+            background: rgba(255, 255, 255, 0.1);
+            transform: translateX(5px);
+        }
+        
+        .course-detail:last-child {
+            border-bottom: none;
+        }
+        
+        .course-name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 10px;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+        }
+        
+        .course-info {
+            margin: 5px 0;
+            color: #555;
+            text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
+        }
+
+        /* 移动端适配 */
+        @media (max-width: 768px) {
+             body {
+                font-size: 14px;
+                padding: 5px;
+            }
+            h1 {
+                font-size: 20px;
+                margin: 15px 0;
+            }
+             .controls {
+                    display: flex;
+                    flex-direction: row; /* 保持在一行内 */
+                    flex-wrap: nowrap; /* 禁止换行 */
+                    justify-content: space-around; /* 均匀分布各个控件 */
+                    align-items: center; /* 纵向居中 */
+                    padding: 10px 5px; /* 增加一些内边距，使其不显得太拥挤 */
+                    margin: 5px;
+                    gap: 5px; /* 控制组件之间的间距 */
+                }
+                .controls select,
+                .controls button {
+                    padding: 6px; /* 适当减少内边距以适应小屏幕 */
+                    font-size: 12px; /* 调整字体大小适应小屏幕 */
+                    margin: 2px;
+                    min-width: 80px; /* 设置最小宽度，确保控件在小屏幕上仍可点击 */
+                }
+
+            .time-header {
+                grid-template-columns: 25px repeat(7, 1fr);
+                font-size: 12px; /* 调整字体大小以适合移动端 */
+                padding: 12px 5px; /* 增加上下的内边距使其看起来更高 */
+                width: 95%;
+                margin: 10px 5px;
+            }
+            .schedule-container {
+                grid-template-columns: 22px repeat(7, minmax(0, 1fr));
+                margin: 3px;
+                display: grid;
+                gap: 1px;
+
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+
+            }
+            .day {
+                padding: 3px;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+            }
+            .time-column {
+                grid-column: 1;
+                text-align: center;
+                font-size: 15px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                line-height: 1.2;
+
+            }
+            .time-slot .course {
+                font-size: 12px;
+                padding: 1px;
+                /*height: auto;*/
+                width: auto;
+                word-break: break-word; /* 确保长单词在小屏幕上也会换行 */
+                white-space: normal; /* 允许文本换行 */
+                overflow-wrap: break-word; /* 处理可能过长的文本，强制其换行 */
+                 margin: 1px;
+                height: 90%;
+            }
+        }
+        /*   .time-slot .course {*/
+        /*    position: absolute;*/
+        /*    background-color: #a7d8de;*/
+        /*    color: #333;*/
+        /*    border-radius: 5px;*/
+        /*    padding: 25px;*/
+        /*    font-size: 10px;*/
+        /*    font-weight: bold;*/
+        /*    text-align: center;*/
+        /*    margin: 5px;*/
+        /*    width: 65%;*/
+        /*    !* height: 100%; *!*/
+        /*    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);*/
+        /*    transition: transform 0.3s ease, background-color 0.3s ease;*/
+        /*}*/
+
+    </style>
+</head>
+
+<body>
+    <h1>信息技术课表</h1>
+    <div class="controls">
+        <div>
+            <label for="week-select">周次：</label>
+            <select id="week-select"></select>
+        </div>
+        <div>
+            <button class="nav-button" onclick="navigateToSection_01()">学生查询</button>
+            <button class="nav-button" onclick="navigateToSection_02()">教师查询</button>
+            <button class="nav-button" onclick="window.location.href='/classrooms'">教室查询</button>
+        </div>
+        <div>
+            <label for="grade-select">年级：</label>
+            <select id="grade-select">
+                <option value="22级">22级</option>
+                <option value="23级">23级</option>
+                <option value="24级">24级</option>
+            </select>
+            <label for="class-select">班级：</label>
+            <select id="class-select">
+                <!-- 动态生成 -->
+            </select>
+        </div>
+    </div>
+
+    <div class="time-header" id="time-header">
+        <div>时间</div>
+        <div><span>09/02</span><br><span>周一</span></div>
+        <div><span>09/03</span><br><span>周二</span></div>
+        <div><span>09/04</span><br><span>周三</span></div>
+        <div><span>09/05</span><br><span>周四</span></div>
+        <div><span>09/06</span><br><span>周五</span></div>
+        <div><span>09/07</span><br><span>周六</span></div>
+        <div><span>09/08</span><br><span>周日</span></div>
+    </div>
+
+    <div class="schedule-container" id="schedule">
+        <div class="time-column">
+            <div>1-3节</div>
+            <div>4-5节</div>
+            <div>6-8节</div>
+            <div>9-11节</div>
+        </div>
+    </div>
+
+    <!-- 课程详情模态框 -->
+    <div id="courseModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">课程详情</div>
+                <span class="close" onclick="closeModal()">&times;</span>
+            </div>
+            <div id="courseDetails">
+                <!-- 课程详情将在这里动态生成 -->
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function navigateToSection_01() {
+        window.location.href = "/students";
+    }
+    function navigateToSection_02() {
+        window.location.href = "/teachers";
+    }
+        let currentWeek = getCurrentWeek(); // 使用 getCurrentWeek() 函数获取当前周次
+
+        function initializeWeeks() {
+            const weekSelect = document.getElementById("week-select");
+            for (let i = 1; i <= 18; i++) {
+                const option = document.createElement("option");
+                option.value = i;
+                option.textContent = `第${i}周`;
+                if (i === currentWeek) {
+                    option.selected = true; // 默认选中当前周次
+                }
+                weekSelect.appendChild(option);
+            }
+        }
+
+        function getCurrentWeek() {
+            const firstWeekStartDate = new Date("2024-09-02"); // 假设第一周从2024年9月2日（周一）开始
+            const today = new Date();
+            const timeDifference = today - firstWeekStartDate;
+            const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+            return Math.floor(daysDifference / 7) + 1; // 根据天数计算当前周次
+        }
+        function loadClasses() {
+            const gradeSelect = document.getElementById("grade-select").value;
+            fetch(`/api/classes`)
+                .then(response => response.json())
+                .then(classes => {
+                    const classSelect = document.getElementById("class-select");
+                    classSelect.innerHTML = ""; // 清空班级选项
+                    const defaultOption = document.createElement("option");
+                    defaultOption.value = "";
+                    defaultOption.textContent = "请选择班级";
+                    defaultOption.selected = true;
+                    classSelect.appendChild(defaultOption);
+                    const filteredClasses = classes.filter(cls => cls.includes(gradeSelect.replace("级", "")));
+                    filteredClasses.forEach(cls => {
+                        const option = document.createElement("option");
+                        option.value = cls;
+                        option.textContent = cls;
+                        classSelect.appendChild(option);
+                    });
+                });
+        }
+        function randomColor() {
+            const colors = ["#ffcccb", "#c6e2ff", "#d5f5e3", "#f7dc6f", "#f1948a", "#aed6f1", "#d7bde2"];
+            return colors[Math.floor(Math.random() * colors.length)];
+        }
+
+        // 显示课程详情模态框
+        function showCourseDetails(courses) {
+            const modal = document.getElementById('courseModal');
+            const detailsContainer = document.getElementById('courseDetails');
+            
+            // 清空之前的内容
+            detailsContainer.innerHTML = '';
+            
+            // 为每个课程创建详情卡片
+            courses.forEach(course => {
+                const courseDetail = document.createElement('div');
+                courseDetail.className = 'course-detail';
+                courseDetail.innerHTML = `
+                    <div class="course-name">${course.课程}</div>
+                    <div class="course-info">教师: ${course.教师}</div>
+                    <div class="course-info">班级: ${course.上课班级}</div>
+                    <div class="course-info">时间: ${course.节次范围}</div>
+                    <div class="course-info">地点: ${course.地点}</div>
+                    <div class="course-info">校区: ${course.校区}</div>
+                    <div class="course-info">周次: ${course.周次}</div>
+                `;
+                detailsContainer.appendChild(courseDetail);
+            });
+            
+            // 显示模态框
+            modal.style.display = 'block';
+        }
+        
+        // 关闭模态框
+        function closeModal() {
+            const modal = document.getElementById('courseModal');
+            modal.style.display = 'none';
+        }
+        
+        // 点击模态框外部关闭
+        window.onclick = function(event) {
+            const modal = document.getElementById('courseModal');
+            if (event.target === modal) {
+                modal.style.display = 'none';
+            }
+        }
+
+        // 生成一周的日期
+        function generateWeekDates(startDate) {
+            const dates = [];
+            for (let i = 0; i < 7; i++) {
+                const date = new Date(startDate);
+                date.setDate(date.getDate() + i);
+                dates.push(date);
+            }
+            return dates;
+        }
+
+        // 更新时间表头
+        function updateTimeHeader(weekStartDate) {
+            const timeHeader = document.getElementById("time-header");
+            const weekDates = generateWeekDates(weekStartDate);
+            // 清空表头后重新生成
+            timeHeader.innerHTML = `
+                <div>时间</div>
+            `;
+            weekDates.forEach((date, index) => {
+                const dayOfWeek = "一二三四五六日"[index];
+                const formattedDate = date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
+                const headerDiv = document.createElement("div");
+                headerDiv.innerHTML = `
+                    <span>${formattedDate}</span>
+                    <br />
+                    <span>周${dayOfWeek}</span>
+                `;
+                timeHeader.appendChild(headerDiv);
+            });
+        }
+        function loadSchedule() {
+            const gradeSelect = document.getElementById("grade-select");
+            const classSelect = document.getElementById("class-select");
+            const weekSelect = document.getElementById("week-select");
+            const selectedGrade = gradeSelect.value;
+            const selectedClass = classSelect.value;
+            const selectedWeek = weekSelect.value;
+            if (!selectedClass) {
+                const scheduleContainer = document.getElementById("schedule");
+                scheduleContainer.innerHTML = "<p style='text-align: center; color: #777;'>请选择班级以查看课程表。</p>";
+                return;
+            }
+            let apiUrl = `/api/student_courses?week=${selectedWeek}`;
+            if (selectedGrade) apiUrl += `&grade=${encodeURIComponent(selectedGrade)}`;
+            if (selectedClass) apiUrl += `&admin_class=${encodeURIComponent(selectedClass)}`;
+            fetch(apiUrl)
+                .then(response => response.json())
+                .then(data => {
+                    const scheduleContainer = document.getElementById("schedule");
+                    scheduleContainer.innerHTML = `
+                        <div class='time-column'>
+                            <div>1-3节</div>
+                            <div>4-5节</div>
+                            <div>6-8节</div>
+                            <div>9-11节</div>
+                        </div>
+                    `;
+                    // 获取第一天日期（从后端返回或计算）
+                    const firstDayDate = new Date(data[0]?.日期 || "2024-09-02"); // 默认值为 9 月 2 日
+                    updateTimeHeader(firstDayDate);
+                    // 初始化空白的课程表
+                    const groupedByDay = Array.from({ length: 7 }, () => ({
+                        intervals: Array.from({ length: 4 }, () => []),
+                    }));
+                    // 填充有课程的时间段
+                    data.forEach(course => {
+                        const dayIndex = course.星期 - 1;
+                        const startPeriod = course.节次[0];
+                        let intervalIndex = 0;
+                        if (startPeriod >= 1 && startPeriod <= 3) {
+                            intervalIndex = 0;
+                        } else if (startPeriod >= 4 && startPeriod <= 5) {
+                            intervalIndex = 1;
+                        } else if (startPeriod >= 6 && startPeriod <= 8) {
+                            intervalIndex = 2;
+                        } else if (startPeriod >= 9 && startPeriod <= 11) {
+                            intervalIndex = 3;
+                        }
+                        if (!groupedByDay[dayIndex].intervals[intervalIndex].length) {
+                            groupedByDay[dayIndex].intervals[intervalIndex].push(course);
+                        }
+                    });
+                    // 渲染课程表
+                    groupedByDay.forEach((dayData, dayIndex) => {
+                        const dayDiv = document.createElement("div");
+                        dayDiv.className = "day";
+                        dayData.intervals.forEach((intervalCourses, intervalIndex) => {
+                            const intervalDiv = document.createElement("div");
+                            intervalDiv.className = "time-slot";
+                            if (intervalCourses.length > 0) {
+                                const course = intervalCourses[0]; // 只展示一个课程
+                                const courseDiv = document.createElement("div");
+                                courseDiv.className = "course";
+                                courseDiv.innerHTML = `${course.课程} ${course.校区} ${course.地点}`;
+                                courseDiv.style.backgroundColor = randomColor(); // 随机背景颜色
+                                courseDiv.onclick = () => showCourseDetails([course]);
+                                courseDiv.style.cursor = "pointer";
+                                intervalDiv.appendChild(courseDiv);
+                            }
+                            dayDiv.appendChild(intervalDiv);
+                        });
+                        scheduleContainer.appendChild(dayDiv);
+                    });
+                });
+        }
+        document.getElementById("week-select").addEventListener("change", loadSchedule);
+        document.getElementById("grade-select").addEventListener("change", () => {
+            loadClasses();
+            loadSchedule();
+        });
+        document.getElementById("class-select").addEventListener("change", loadSchedule);
+        initializeWeeks();
+        loadClasses();
+        
+        // 鼠标轨迹粒子效果
+        class MouseTrailParticle {
+            constructor(x, y) {
+                this.x = x;
+                this.y = y;
+                this.vx = (Math.random() - 0.5) * 4;
+                this.vy = (Math.random() - 0.5) * 4;
+                this.life = 1.0;
+                this.decay = 0.02 + Math.random() * 0.02;
+                this.size = 2 + Math.random() * 4;
+                this.color = `hsl(${Math.random() * 60 + 200}, 70%, 70%)`;
+            }
+            
+            update() {
+                this.x += this.vx;
+                this.y += this.vy;
+                this.vx *= 0.98;
+                this.vy *= 0.98;
+                this.life -= this.decay;
+                this.size *= 0.98;
+            }
+            
+            draw(ctx) {
+                ctx.save();
+                ctx.globalAlpha = this.life;
+                ctx.fillStyle = this.color;
+                ctx.shadowBlur = 10;
+                ctx.shadowColor = this.color;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+            
+            isDead() {
+                return this.life <= 0 || this.size <= 0.1;
+            }
+        }
+        
+        // 创建画布
+        const canvas = document.createElement('canvas');
+        canvas.style.position = 'fixed';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        canvas.style.width = '100%';
+        canvas.style.height = '100%';
+        canvas.style.pointerEvents = 'none';
+        canvas.style.zIndex = '9999';
+        document.body.appendChild(canvas);
+        
+        const ctx = canvas.getContext('2d');
+        const particles = [];
+        let mouseX = 0;
+        let mouseY = 0;
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+        
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        
+        function addParticles(x, y) {
+            const distance = Math.sqrt((x - lastMouseX) ** 2 + (y - lastMouseY) ** 2);
+            if (distance > 5) {
+                for (let i = 0; i < 3; i++) {
+                    particles.push(new MouseTrailParticle(x + (Math.random() - 0.5) * 10, y + (Math.random() - 0.5) * 10));
+                }
+                lastMouseX = x;
+                lastMouseY = y;
+            }
+        }
+        
+        function animate() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // 更新和绘制粒子
+            for (let i = particles.length - 1; i >= 0; i--) {
+                const particle = particles[i];
+                particle.update();
+                particle.draw(ctx);
+                
+                if (particle.isDead()) {
+                    particles.splice(i, 1);
+                }
+            }
+            
+            requestAnimationFrame(animate);
+        }
+        
+        // 事件监听
+        document.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+            addParticles(mouseX, mouseY);
+        });
+        
+        window.addEventListener('resize', resizeCanvas);
+        
+        // 初始化
+        resizeCanvas();
+        animate();
+    </script>
+</body>
+</html>

templates/student.html

@@ -0,0 +1,1100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>教师课表</title>
+    <style>
+        /* 全局样式 */
+        body {
+            font-family: 'Roboto', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+            color: #333;
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        /* 背景动画 */
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        /* 磨砂玻璃背景层 */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            z-index: -1;
+            pointer-events: none;
+        }
+        
+        /* 浮动粒子效果 */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
+                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
+                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08) 3px, transparent 3px);
+            background-size: 200px 200px, 150px 150px, 300px 300px;
+            animation: particleFloat 20s linear infinite;
+            z-index: -1;
+            pointer-events: none;
+        }
+        
+        @keyframes particleFloat {
+            0% { transform: translateY(0px) rotate(0deg); }
+            100% { transform: translateY(-100vh) rotate(360deg); }
+        }
+
+        h1 {
+            text-align: center;
+            margin: 20px 0;
+            font-size: 28px;
+            font-weight: bold;
+            color: #0078d4;
+            letter-spacing: 1.2px;
+        }
+
+        /* 控制区域样式 */
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 20px;
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            color: #0078d4;
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            margin: 10px 20px;
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                0 2px 8px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+            position: relative;
+            z-index: 10;
+        }
+        
+        .controls::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            border-radius: 15px;
+            z-index: -1;
+            animation: controlsShimmer 3s ease-in-out infinite;
+        }
+        
+        @keyframes controlsShimmer {
+            0%, 100% { opacity: 0.5; }
+            50% { opacity: 0.8; }
+        }
+
+        .controls > div {
+            flex: 1; /* 让每个子元素均匀分布 */
+            text-align: center; /* 居中对齐子元素 */
+        }
+
+        .nav-button {
+            padding: 10px 15px;
+            font-size: 14px;
+            border: none;
+            border-radius: 5px;
+            background-color: #fff;
+            color: #0078d4;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .nav-button:hover {
+            background-color: #eaf4fc;
+        }
+        .nav-button:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
+        }
+
+
+        .controls label {
+            font-weight: bold;
+            margin-right: 10px;
+        }
+
+        .controls select, .controls button {
+            padding: 12px 24px;
+            font-size: 14px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.9);
+            color: #0078d4;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+            box-shadow: 
+                0 2px 10px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+        
+        .controls button {
+            background: linear-gradient(135deg, rgba(0, 120, 212, 0.8) 0%, rgba(0, 90, 158, 0.9) 100%);
+            color: white;
+            box-shadow: 
+                0 4px 15px rgba(0, 120, 212, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        }
+        
+        .controls button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
+            transition: left 0.5s;
+        }
+
+        .controls select:hover, .controls button:hover {
+            transform: translateY(-2px);
+            box-shadow: 
+                0 8px 25px rgba(0, 120, 212, 0.4),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+        }
+        
+        .controls button:hover {
+            background: linear-gradient(135deg, rgba(0, 90, 158, 0.9) 0%, rgba(0, 120, 212, 1) 100%);
+        }
+        
+        .controls button:hover::before {
+            left: 100%;
+        }
+        
+        .controls select:hover {
+            background: rgba(255, 255, 255, 1);
+            transform: translateY(-1px);
+            box-shadow: 
+                0 4px 15px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.7);
+        }
+
+        .controls select:focus, .controls button:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
+        }
+
+        /* 时间表头样式 */
+        .time-header {
+            display: grid;
+            grid-template-columns: 70px repeat(7, 1fr);
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            color: #0078d4;
+            text-align: center;
+            margin: 10px 20px;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 10px 0;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                0 2px 8px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .time-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            animation: headerShimmer 4s ease-in-out infinite;
+        }
+        
+        @keyframes headerShimmer {
+            0% { left: -100%; }
+            50% { left: 100%; }
+            100% { left: 100%; }
+        }
+
+        .time-header div {
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 8px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            z-index: 1;
+        }
+
+        .time-header div:last-child {
+            border-right: none;
+        }
+
+        /* 鼠标悬停时样式 */
+        .time-header div:hover {
+            transform: translateY(-3px) scale(1.02);
+            background: rgba(255, 255, 255, 0.4);
+            backdrop-filter: blur(15px);
+            cursor: pointer;
+            border-radius: 8px;
+            box-shadow: 
+                0 8px 25px rgba(0, 120, 212, 0.2),
+                0 4px 12px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+
+
+        /* 时间列样式 */
+        .time-column {
+            background-color: #f8f9fa;
+            text-align: center;
+            font-size: 14px;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .time-column div {
+            flex: 1;
+            padding: 10px 0;
+            border-top: 1px solid #ddd;
+            font-weight: bold;
+        }
+
+        .time-column div:first-child {
+            border-top: none;
+        }
+
+        /* 每日课程样式 */
+        .day {
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 8px;
+            height: 500px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            border-radius: 12px;
+            overflow: hidden;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 
+                0 4px 20px rgba(0, 0, 0, 0.1),
+                0 1px 4px rgba(0, 0, 0, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+        }
+        
+        .day::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+
+        .day:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 
+                0 12px 40px rgba(0, 0, 0, 0.15),
+                0 4px 12px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4);
+        }
+        
+        .day:hover::before {
+            opacity: 1;
+        }
+
+        /* 时间槽样式 */
+        .time-slot {
+            flex: 1;
+            position: relative;
+            border-top: 1px solid #eee;
+            overflow: hidden;
+        }
+
+        .time-slot:first-child {
+            border-top: none;
+        }
+
+        /* 课程样式 */
+        .time-slot .course {
+            position: absolute;
+            background: linear-gradient(135deg, rgba(167, 216, 222, 0.9) 0%, rgba(135, 206, 235, 0.8) 100%);
+            backdrop-filter: blur(10px);
+            color: #2c3e50;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 10px;
+            padding: 25px;
+            font-size: 15px;
+            font-weight: bold;
+            text-align: center;
+            margin: 5px;
+            width: 75%;
+            box-shadow: 
+                0 8px 25px rgba(0, 0, 0, 0.15),
+                0 3px 10px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            height: 50%;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .time-slot .course::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            transition: left 0.6s ease;
+        }
+        
+        .time-slot .course:hover {
+            transform: translateY(-5px) scale(1.05);
+            background: linear-gradient(135deg, rgba(167, 216, 222, 1) 0%, rgba(135, 206, 235, 0.95) 100%);
+            box-shadow: 
+                0 15px 35px rgba(0, 0, 0, 0.2),
+                0 5px 15px rgba(0, 0, 0, 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.5),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+        }
+        
+        .time-slot .course:hover::before {
+            left: 100%;
+        }
+
+
+        .search-container {
+
+
+            position: relative; /* 使搜索结果相对搜索框定位 */
+        }
+
+        /* 课程详情模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(8px);
+            animation: modalFadeIn 0.3s ease-out;
+        }
+        
+        @keyframes modalFadeIn {
+            from {
+                opacity: 0;
+                backdrop-filter: blur(0px);
+            }
+            to {
+                opacity: 1;
+                backdrop-filter: blur(8px);
+            }
+        }
+        
+        .modal-content {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            margin: 10% auto;
+            padding: 0;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 15px;
+            width: 80%;
+            max-width: 500px;
+            box-shadow: 
+                0 20px 60px rgba(0, 0, 0, 0.3),
+                0 8px 25px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.4);
+            animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .modal-content::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            pointer-events: none;
+        }
+        
+        @keyframes modalSlideIn {
+            from {
+                transform: translateY(-50px) scale(0.9);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0) scale(1);
+                opacity: 1;
+            }
+        }
+        
+        .modal-header {
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(15px);
+            color: #0078d4;
+            padding: 20px;
+            border-radius: 15px 15px 0 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+            box-shadow: 
+                0 4px 15px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+        }
+        
+        .modal-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            pointer-events: none;
+        }
+        
+        .modal-title {
+            font-size: 20px;
+            font-weight: bold;
+            position: relative;
+            z-index: 1;
+            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
+        }
+        
+        .close {
+            color: #0078d4;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+            line-height: 1;
+            position: relative;
+            z-index: 1;
+            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
+            transition: all 0.3s ease;
+        }
+        
+        .close:hover {
+            transform: scale(1.1);
+            color: #005a9e;
+            text-shadow: 0 2px 4px rgba(0, 120, 212, 0.3);
+        }
+        
+        .course-detail {
+            padding: 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(5px);
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        
+        .course-detail:hover {
+            background: rgba(255, 255, 255, 0.1);
+            transform: translateX(5px);
+        }
+        
+        .course-detail:last-child {
+            border-bottom: none;
+        }
+        
+        .course-name {
+            font-size: 18px;
+            font-weight: bold;
+            color: #0078d4;
+            margin-bottom: 10px;
+            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
+        }
+        
+        .course-info {
+            margin: 8px 0;
+            color: #555;
+            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
+        }
+
+        .teacher-search {
+            width: 150px; /* 搜索框固定宽度 */
+            padding: 8px 12px;
+            font-size: 14px;
+            border: 1px solid #0078d4; /* 蓝色边框 */
+            border-radius: 5px;
+            color: #333;
+            box-sizing: border-box; /* 确保宽度包含内边距和边框 */
+        }
+
+        .search-results {
+            position: absolute; /* 使结果相对于搜索框容器定位 */
+            top: calc(100% + 4px); /* 紧贴搜索框下方，并增加 4px 间距 */
+            left: 42.5%; /* 确保左对齐 */
+            width: 150px; /* 与搜索框宽度一致 */
+            background: #f0f8ff; /* 浅蓝背景 */
+            border: 1px solid #0078d4; /* 与搜索框相同的蓝色边框 */
+            max-height: 150px; /* 最大高度 */
+            overflow-y: auto; /* 启用滚动条 */
+            z-index: 1000; /* 确保结果在顶层显示 */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影 */
+            border-radius: 5px; /* 与搜索框一致的圆角 */
+        }
+
+        .search-results div {
+            padding: 8px 12px; /* 每个选项的内边距 */
+            font-size: 14px; /* 字体大小 */
+            color: #333; /* 默认文字颜色 */
+            cursor: pointer; /* 鼠标悬停时显示为手型 */
+            transition: background 0.3s, color 0.3s; /* 添加平滑过渡效果 */
+        }
+
+        .search-results div:hover {
+            background-color: #0078d4; /* 鼠标悬停时背景色 */
+            color: #fff; /* 悬停时文字颜色 */
+        }
+
+
+
+
+
+        /* 网格容器样式 */
+        .schedule-container {
+            display: grid;
+            grid-template-columns: 70px repeat(7, 1fr);
+            gap: 2px;
+            margin: 10px 20px;
+            background-color: #fff;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+         @media (max-width: 768px) {
+             body {
+                font-size: 14px;
+                padding: 5px;
+            }
+            h1 {
+                font-size: 20px;
+                margin: 15px 0;
+            }
+             .controls {
+                    display: flex;
+                    flex-direction: row; /* 保持在一行内 */
+                    flex-wrap: nowrap; /* 禁止换行 */
+                    justify-content: space-around; /* 均匀分布各个控件 */
+                    align-items: center; /* 纵向居中 */
+                    padding: 10px 5px; /* 增加一些内边距，使其不显得太拥挤 */
+                    margin: 5px;
+                    gap: 5px; /* 控制组件之间的间距 */
+                }
+                .controls select,
+                .controls button {
+                    padding: 6px; /* 适当减少内边距以适应小屏幕 */
+                    font-size: 12px; /* 调整字体大小适应小屏幕 */
+                    margin: 2px;
+                    min-width: 80px; /* 设置最小宽度，确保控件在小屏幕上仍可点击 */
+                }
+
+            .time-header {
+                grid-template-columns: 25px repeat(7, 1fr);
+                font-size: 12px; /* 调整字体大小以适合移动端 */
+                padding: 12px 5px; /* 增加上下的内边距使其看起来更高 */
+                width: 95%;
+                margin: 10px 5px;
+            }
+            .schedule-container {
+                grid-template-columns: 22px repeat(7, minmax(0, 1fr));
+                margin: 3px;
+                display: grid;
+                gap: 1px;
+
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+
+            }
+            .day {
+                padding: 3px;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+            }
+            .time-column {
+                grid-column: 1;
+                text-align: center;
+                font-size: 15px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                line-height: 1.2;
+
+            }
+            .time-slot .course {
+                font-size: 12px;
+                padding: 1px;
+                /*height: auto;*/
+                width: auto;
+                word-break: break-word; /* 确保长单词在小屏幕上也会换行 */
+                white-space: normal; /* 允许文本换行 */
+                overflow-wrap: break-word; /* 处理可能过长的文本，强制其换行 */
+                margin: 1px;
+                height: 90%;
+            }
+            .teacher-search {
+                width: 100%; /* 搜索框固定宽度 */
+                padding: 8px 12px;
+                font-size: 14px;
+                border: 1px solid #0078d4; /* 蓝色边框 */
+                border-radius: 5px;
+                color: #333;
+                box-sizing: border-box; /* 确保宽度包含内边距和边框 */
+            }
+            .search-results {
+                position: absolute;
+                top: calc(100% + 2px); /* 列表紧贴搜索框下方，留 2px 的间隙 */
+                left: 0%; /* 与搜索框左侧完全对齐 */
+                width: 100%; /* 列表宽度与搜索框保持一致 */
+                background: #f0f8ff; /* 浅蓝背景 */
+                border: 1px solid #0078d4; /* 边框颜色 */
+                max-height: 150px; /* 最大高度，超出部分滚动 */
+                overflow-y: auto; /* 启用垂直滚动条 */
+                z-index: 1000; /* 确保显示在最上层 */
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+                border-radius: 5px; /* 圆角边框 */
+                box-sizing: border-box; /* 确保宽度计算准确 */
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>学生课表</h1>
+    <div class="controls">
+
+
+            <div class="search-container">
+                <label for="teacher-search">学生：</label>
+                <input type="text" id="teacher-search" class="teacher-search" placeholder="搜索学生名字">
+                <div id="search-results" class="search-results"></div>
+            </div>
+
+        <div>
+            <button class="nav-button" onclick="window.location.href='/'">班级查询</button>
+            <button class="nav-button" onclick="window.location.href='/teachers'">教师查询</button>
+            <button class="nav-button" onclick="window.location.href='/classrooms'">教室查询</button>
+        </div>
+        <div>
+            <label for="week-select">周次：</label>
+            <select id="week-select"></select>
+        </div>
+    </div>
+
+    <div class="time-header" id="time-header">
+        <div>时间</div>
+        <div>周一</div>
+        <div>周二</div>
+        <div>周三</div>
+        <div>周四</div>
+        <div>周五</div>
+        <div>周六</div>
+        <div>周日</div>
+    </div>
+
+    <div class="schedule-container" id="schedule">
+        <div class="time-column">
+            <div>1-3节</div>
+            <div>4-5节</div>
+            <div>6-8节</div>
+            <div>9-11节</div>
+        </div>
+    </div>
+
+    <!-- 课程详情模态框 -->
+    <div id="courseModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">课程详情</div>
+                <span class="close" onclick="closeModal()">&times;</span>
+            </div>
+            <div id="courseDetails">
+                <!-- 课程详情将在这里动态生成 -->
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let currentWeek = getCurrentWeek(); // 使用 getCurrentWeek() 函数获取当前周次
+        let teacherList = [];
+        function initializeWeeks() {
+        const weekSelect = document.getElementById("week-select");
+        for (let i = 1; i <= 18; i++) {
+            const option = document.createElement("option");
+            option.value = i;
+            option.textContent = `第${i}周`;
+            if (i === currentWeek) {
+                option.selected = true; // 默认选中当前周次
+            }
+            weekSelect.appendChild(option);
+        }
+        }
+        function getCurrentWeek() {
+            const firstWeekStartDate = new Date("2024-09-02"); // 假设第一周从2024年9月2日（周一）开始
+            const today = new Date();
+            const timeDifference = today - firstWeekStartDate;
+            const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+            return Math.floor(daysDifference / 7) + 1; // 根据天数计算当前周次
+        }
+        function loadTeachers() {
+            fetch("/api/students")
+                .then(response => response.json())
+                .then(teachers => {
+                    teacherList = teachers.sort((a, b) => {
+                        if (a === "秦振凯") return -1;
+                        if (b === "秦振凯") return 1;
+                        return a.localeCompare(b);
+                    });
+                })
+                .catch(error => console.error("加载学生列表出错:", error));
+        }
+
+        function searchTeachers() {
+            const searchInput = document.getElementById("teacher-search").value.toLowerCase();
+            const searchResults = document.getElementById("search-results");
+            searchResults.innerHTML = "";
+
+            if (searchInput.trim() === "") {
+                return;
+            }
+
+            const filteredTeachers = teacherList.filter(teacher =>
+                teacher.toLowerCase().includes(searchInput)
+            );
+
+            filteredTeachers.forEach(teacher => {
+                const resultDiv = document.createElement("div");
+                resultDiv.textContent = teacher;
+                resultDiv.onclick = () => selectTeacher(teacher);
+                searchResults.appendChild(resultDiv);
+            });
+        }
+
+        function selectTeacher(teacher) {
+            document.getElementById("teacher-search").value = teacher;
+            document.getElementById("search-results").innerHTML = "";
+            loadSchedule();
+        }
+
+        function loadSchedule() {
+            const teacherSearch = document.getElementById("teacher-search").value;
+            const weekSelect = document.getElementById("week-select");
+            const selectedWeek = parseInt(weekSelect.value);
+            const apiUrl = `/api/student_courses_v2?week=${selectedWeek}&student_name=${encodeURIComponent(teacherSearch)}`;
+
+            // 先清空之前的表头和课程表内容，避免混淆
+            document.getElementById("time-header").innerHTML = '';
+            document.getElementById("schedule").innerHTML = `
+                <div class='time-column'>
+                    <div>1-3节</div>
+                    <div>4-5节</div>
+                    <div>6-8节</div>
+                    <div>9-11节</div>
+                </div>
+            `;
+
+            // 获取所选周次的起始日期
+            const firstWeekStartDate = new Date("2024-09-02"); // 假设第一周从2024年9月2日（周一）开始
+            const selectedWeekStartDate = new Date(firstWeekStartDate);
+            selectedWeekStartDate.setDate(firstWeekStartDate.getDate() + (selectedWeek - 1) * 7);
+
+            // 更新时间表头
+            updateTimeHeader(selectedWeekStartDate);
+
+            fetch(apiUrl)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.length === 0) {
+                        console.warn("未获取到课程数据");
+                        return;
+                    }
+
+                    // 初始化空白课程表
+                    const groupedByDay = Array.from({ length: 7 }, () => ({
+                        intervals: Array.from({ length: 4 }, () => [])
+                    }));
+
+                    // 填充课程
+                    data.forEach(course => {
+                        const dayIndex = course.星期 - 1;  // 星期一为0，星期日为6
+                        const startPeriod = course.节次[0];
+
+                        let intervalIndex = 0;
+                        if (startPeriod >= 1 && startPeriod <= 3) intervalIndex = 0;
+                        else if (startPeriod >= 4 && startPeriod <= 5) intervalIndex = 1;
+                        else if (startPeriod >= 6 && startPeriod <= 8) intervalIndex = 2;
+                        else if (startPeriod >= 9 && startPeriod <= 11) intervalIndex = 3;
+
+                        groupedByDay[dayIndex].intervals[intervalIndex].push(course);
+                    });
+
+                    // 渲染课程表
+                    const scheduleContainer = document.getElementById("schedule");
+                    groupedByDay.forEach((dayData, dayIndex) => {
+                        const dayDiv = document.createElement("div");
+                        dayDiv.className = "day";
+
+                        dayData.intervals.forEach((intervalCourses, intervalIndex) => {
+                            const intervalDiv = document.createElement("div");
+                            intervalDiv.className = "time-slot";
+
+                            if (intervalCourses.length > 0) {
+                                const course = intervalCourses[0];
+                                const courseDiv = document.createElement("div");
+                                courseDiv.className = "course";
+                                courseDiv.innerHTML = `${course.课程} ${course.校区} ${course.地点}`;
+                                courseDiv.style.backgroundColor = randomColor();
+                                courseDiv.onclick = () => showCourseDetails([course]);
+                                courseDiv.style.cursor = "pointer";
+                                intervalDiv.appendChild(courseDiv);
+                            }
+
+                            dayDiv.appendChild(intervalDiv);
+                        });
+
+                        scheduleContainer.appendChild(dayDiv);
+                    });
+                })
+                .catch(error => console.error("加载课程表出错:", error));
+        }
+
+        function updateTimeHeader(weekStartDate) {
+            const timeHeader = document.getElementById("time-header");
+            const weekDates = generateWeekDates(weekStartDate);
+
+            // 清空表头后重新生成
+            timeHeader.innerHTML = `
+                <div>时间</div>
+            `;
+            weekDates.forEach((date, index) => {
+                const dayOfWeek = "一二三四五六日"[index];
+                const formattedDate = date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
+
+                const headerDiv = document.createElement("div");
+                headerDiv.innerHTML = `
+                    <span>${formattedDate}</span>
+                    <br />
+                    <span>周${dayOfWeek}</span>
+                `;
+                timeHeader.appendChild(headerDiv);
+            });
+        }
+
+        function generateWeekDates(startDate) {
+            const dates = [];
+            for (let i = 0; i < 7; i++) {
+                const date = new Date(startDate);
+                date.setDate(date.getDate() + i);
+                dates.push(date);
+            }
+            return dates;
+        }
+
+        function navigateToSection_01() {
+        window.location.href = "/";
+        }
+        function navigateToSection_02() {
+            window.location.href = "/teachers";
+        }
+        function randomColor() {
+            const colors = ["#ffcccb", "#c6e2ff", "#d5f5e3", "#f7dc6f", "#f1948a", "#aed6f1", "#d7bde2"];
+            return colors[Math.floor(Math.random() * colors.length)];
+        }
+
+        // 显示课程详情模态框
+        function showCourseDetails(courses) {
+            const modal = document.getElementById('courseModal');
+            const detailsContainer = document.getElementById('courseDetails');
+            
+            // 清空之前的内容
+            detailsContainer.innerHTML = '';
+            
+            // 为每个课程创建详情卡片
+            courses.forEach(course => {
+                const courseDetail = document.createElement('div');
+                courseDetail.className = 'course-detail';
+                courseDetail.innerHTML = `
+                    <div class="course-name">${course.课程}</div>
+                    <div class="course-info">教师: ${course.教师}</div>
+                    <div class="course-info">班级: ${course.上课班级}</div>
+                    <div class="course-info">时间: ${course.节次范围}</div>
+                    <div class="course-info">地点: ${course.地点}</div>
+                    <div class="course-info">校区: ${course.校区}</div>
+                    <div class="course-info">周次: ${course.周次}</div>
+                `;
+                detailsContainer.appendChild(courseDetail);
+            });
+            
+            // 显示模态框
+            modal.style.display = 'block';
+        }
+        
+        // 关闭模态框
+        function closeModal() {
+            const modal = document.getElementById('courseModal');
+            modal.style.display = 'none';
+        }
+        
+        // 点击模态框外部关闭
+        window.onclick = function(event) {
+            const modal = document.getElementById('courseModal');
+            if (event.target === modal) {
+                modal.style.display = 'none';
+            }
+        }
+
+        document.getElementById("week-select").addEventListener("change", loadSchedule);
+        document.getElementById("teacher-search").addEventListener("input", searchTeachers);
+
+        initializeWeeks();
+        loadTeachers();
+        
+        // 鼠标轨迹粒子效果
+        class MouseTrailParticle {
+            constructor(x, y) {
+                this.x = x;
+                this.y = y;
+                this.vx = (Math.random() - 0.5) * 4;
+                this.vy = (Math.random() - 0.5) * 4;
+                this.life = 1.0;
+                this.decay = 0.02 + Math.random() * 0.02;
+                this.size = 2 + Math.random() * 4;
+                this.color = `hsl(${Math.random() * 60 + 200}, 70%, 70%)`;
+            }
+            
+            update() {
+                this.x += this.vx;
+                this.y += this.vy;
+                this.vx *= 0.98;
+                this.vy *= 0.98;
+                this.life -= this.decay;
+                this.size *= 0.98;
+            }
+            
+            draw(ctx) {
+                ctx.save();
+                ctx.globalAlpha = this.life;
+                ctx.fillStyle = this.color;
+                ctx.shadowBlur = 10;
+                ctx.shadowColor = this.color;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+            
+            isDead() {
+                return this.life <= 0 || this.size <= 0.1;
+            }
+        }
+        
+        // 创建画布
+        const canvas = document.createElement('canvas');
+        canvas.style.position = 'fixed';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        canvas.style.width = '100%';
+        canvas.style.height = '100%';
+        canvas.style.pointerEvents = 'none';
+        canvas.style.zIndex = '9999';
+        document.body.appendChild(canvas);
+        
+        const ctx = canvas.getContext('2d');
+        const particles = [];
+        let mouseX = 0;
+        let mouseY = 0;
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+        
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        
+        function addParticles(x, y) {
+            const distance = Math.sqrt((x - lastMouseX) ** 2 + (y - lastMouseY) ** 2);
+            if (distance > 5) {
+                for (let i = 0; i < 3; i++) {
+                    particles.push(new MouseTrailParticle(x + (Math.random() - 0.5) * 10, y + (Math.random() - 0.5) * 10));
+                }
+                lastMouseX = x;
+                lastMouseY = y;
+            }
+        }
+        
+        function animate() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // 更新和绘制粒子
+            for (let i = particles.length - 1; i >= 0; i--) {
+                const particle = particles[i];
+                particle.update();
+                particle.draw(ctx);
+                
+                if (particle.isDead()) {
+                    particles.splice(i, 1);
+                }
+            }
+            
+            requestAnimationFrame(animate);
+        }
+        
+        // 事件监听
+        document.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+            addParticles(mouseX, mouseY);
+        });
+        
+        window.addEventListener('resize', resizeCanvas);
+        
+        // 初始化
+        resizeCanvas();
+        animate();
+    </script>
+</body>
+</html>

templates/teacher.html

@@ -0,0 +1,712 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>教师课表</title>
+    <style>
+        /* 全局样式 */
+        body {
+            font-family: 'Roboto', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f6f9;
+            color: #333;
+        }
+
+        h1 {
+            text-align: center;
+            margin: 20px 0;
+            font-size: 28px;
+            font-weight: bold;
+            color: #0078d4;
+            letter-spacing: 1.2px;
+        }
+
+        /* 控制区域样式 */
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 20px;
+            background-color: #0078d4;
+            color: white;
+            border-radius: 10px;
+            margin: 10px 20px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .controls > div {
+            flex: 1; /* 让每个子元素均匀分布 */
+            text-align: center; /* 居中对齐子元素 */
+        }
+
+        .nav-button {
+            padding: 10px 15px;
+            font-size: 14px;
+            border: none;
+            border-radius: 5px;
+            background-color: #fff;
+            color: #0078d4;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .nav-button:hover {
+            background-color: #eaf4fc;
+        }
+        .nav-button:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
+        }
+
+
+        .controls label {
+            font-weight: bold;
+            margin-right: 10px;
+        }
+
+        .controls select, .controls button {
+            padding: 8px 12px;
+            font-size: 14px;
+            border: none;
+            border-radius: 5px;
+            background-color: #fff;
+            color: #0078d4;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .controls select:hover, .controls button:hover {
+            background-color: #eaf4fc;
+        }
+
+        .controls select:focus, .controls button:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
+        }
+
+        /* 时间表头样式 */
+        .time-header {
+            display: grid;
+            grid-template-columns: 70px repeat(7, 1fr);
+            background: linear-gradient(135deg, #0078d4 0%, #0056a6 100%);
+            color: white;
+            text-align: center;
+            margin: 10px 20px;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 10px 0;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .time-header div {
+            border-right: 1px solid #f0f0f0;
+            padding: 5px;
+            transition: transform 0.2s ease-in-out, background-color 0.2s; /* 添加平滑过渡效果 */
+        }
+
+        .time-header div:last-child {
+            border-right: none;
+        }
+
+        /* 鼠标悬停时样式 */
+        .time-header div:hover {
+            transform: translateY(-2px); /* 轻微上移 */
+            background-color: rgba(255, 255, 255, 0.2); /* 悬停背景高亮 */
+            cursor: pointer; /* 鼠标样式 */
+        }
+
+
+        /* 时间列样式 */
+        .time-column {
+            background-color: #f8f9fa;
+            text-align: center;
+            font-size: 14px;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .time-column div {
+            flex: 1;
+            padding: 10px 0;
+            border-top: 1px solid #ddd;
+            font-weight: bold;
+        }
+
+        .time-column div:first-child {
+            border-top: none;
+        }
+
+        /* 每日课程样式 */
+        .day {
+            background-color: white;
+            border: 1px solid #ddd;
+            padding: 5px;
+            height: 500px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            border-radius: 0 0 8px 8px;
+            overflow: hidden;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .day:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
+        }
+
+        /* 时间槽样式 */
+        .time-slot {
+            flex: 1;
+            position: relative;
+            border-top: 1px solid #eee;
+            overflow: hidden;
+        }
+
+        .time-slot:first-child {
+            border-top: none;
+        }
+
+        /* 课程样式 */
+        .time-slot .course {
+            position: absolute;
+            background-color: #a7d8de;
+            color: #333;
+            border-radius: 5px;
+            padding: 25px;
+            font-size: 15px;
+            font-weight: bold;
+            text-align: center;
+            margin: 5px;
+            width: 75%; /* 调整宽度为95% */
+            /*right: 2%; !* 调整位置，让它靠左边一些 *!*/
+            box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, background-color 0.3s ease;
+            height: 50%;
+        }
+
+
+        .search-container {
+
+
+            position: relative; /* 使搜索结果相对搜索框定位 */
+        }
+
+        /* 课程详情模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+        
+        .modal-content {
+            background-color: #fefefe;
+            margin: 10% auto;
+            padding: 0;
+            border: none;
+            border-radius: 10px;
+            width: 80%;
+            max-width: 500px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
+        
+        .modal-header {
+            background: linear-gradient(135deg, #0078d4 0%, #0056a6 100%);
+            color: white;
+            padding: 15px 20px;
+            border-radius: 10px 10px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .modal-title {
+            font-size: 18px;
+            font-weight: bold;
+        }
+        
+        .close {
+            color: white;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+            line-height: 1;
+        }
+        
+        .close:hover {
+            opacity: 0.7;
+        }
+        
+        .course-detail {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .course-detail:last-child {
+            border-bottom: none;
+        }
+        
+        .course-name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #0078d4;
+            margin-bottom: 10px;
+        }
+        
+        .course-info {
+            margin: 5px 0;
+            color: #666;
+        }
+
+        .teacher-search {
+            width: 150px; /* 搜索框固定宽度 */
+            padding: 8px 12px;
+            font-size: 14px;
+            border: 1px solid #0078d4; /* 蓝色边框 */
+            border-radius: 5px;
+            color: #333;
+            box-sizing: border-box; /* 确保宽度包含内边距和边框 */
+        }
+
+        .search-results {
+            position: absolute; /* 使结果相对于搜索框容器定位 */
+            top: calc(100% + 4px); /* 紧贴搜索框下方，并增加 4px 间距 */
+            left: 43.5%; /* 确保左对齐 */
+            width: 150px; /* 与搜索框宽度一致 */
+            background: #f0f8ff; /* 浅蓝背景 */
+            border: 1px solid #0078d4; /* 与搜索框相同的蓝色边框 */
+            max-height: 150px; /* 最大高度 */
+            overflow-y: auto; /* 启用滚动条 */
+            z-index: 1000; /* 确保结果在顶层显示 */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影 */
+            border-radius: 5px; /* 与搜索框一致的圆角 */
+        }
+
+        .search-results div {
+            padding: 8px 12px; /* 每个选项的内边距 */
+            font-size: 14px; /* 字体大小 */
+            color: #333; /* 默认文字颜色 */
+            cursor: pointer; /* 鼠标悬停时显示为手型 */
+            transition: background 0.3s, color 0.3s; /* 添加平滑过渡效果 */
+        }
+
+        .search-results div:hover {
+            background-color: #0078d4; /* 鼠标悬停时背景色 */
+            color: #fff; /* 悬停时文字颜色 */
+        }
+
+
+
+
+
+        /* 网格容器样式 */
+        .schedule-container {
+            display: grid;
+            grid-template-columns: 70px repeat(7, 1fr);
+            gap: 2px;
+            margin: 10px 20px;
+            background-color: #fff;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+         @media (max-width: 768px) {
+             body {
+                font-size: 14px;
+                padding: 5px;
+            }
+            h1 {
+                font-size: 20px;
+                margin: 15px 0;
+            }
+             .controls {
+                    display: flex;
+                    flex-direction: row; /* 保持在一行内 */
+                    flex-wrap: nowrap; /* 禁止换行 */
+                    justify-content: space-around; /* 均匀分布各个控件 */
+                    align-items: center; /* 纵向居中 */
+                    padding: 10px 5px; /* 增加一些内边距，使其不显得太拥挤 */
+                    margin: 5px;
+                    gap: 5px; /* 控制组���之间的间距 */
+                }
+                .controls select,
+                .controls button {
+                    padding: 6px; /* 适当减少内边距以适应小屏幕 */
+                    font-size: 12px; /* 调整字体大小适应小屏幕 */
+                    margin: 2px;
+                    min-width: 80px; /* 设置最小宽度，确保控件在小屏幕上仍可点击 */
+                }
+
+            .time-header {
+                grid-template-columns: 25px repeat(7, 1fr);
+                font-size: 12px; /* 调整字体大小以适合移动端 */
+                padding: 12px 5px; /* 增加上下的内边距使其看起来更高 */
+                width: 95%;
+                margin: 10px 5px;
+            }
+            .schedule-container {
+                grid-template-columns: 22px repeat(7, minmax(0, 1fr));
+                margin: 3px;
+                display: grid;
+                gap: 1px;
+
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+
+            }
+            .day {
+                padding: 3px;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+            }
+            .time-column {
+                grid-column: 1;
+                text-align: center;
+                font-size: 15px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                line-height: 1.2;
+
+            }
+            .time-slot .course {
+                font-size: 12px;
+                padding: 1px;
+                /*height: auto;*/
+                width: auto;
+                word-break: break-word; /* 确保长单词在小屏幕上也会换行 */
+                white-space: normal; /* 允许文本换行 */
+                overflow-wrap: break-word; /* 处理可能过长的文本，强制其换行 */
+                margin: 1px;
+                height: 90%;
+            }
+            .teacher-search {
+                width: 100%; /* 搜索框固定宽度 */
+                padding: 8px 12px;
+                font-size: 14px;
+                border: 1px solid #0078d4; /* 蓝色边框 */
+                border-radius: 5px;
+                color: #333;
+                box-sizing: border-box; /* 确保宽度包含内边距和边框 */
+            }
+            .search-results {
+                position: absolute;
+                top: calc(100% + 2px); /* 列表紧贴搜索框下方，留 2px 的间隙 */
+                left: 0%; /* 与搜索框左侧完全对齐 */
+                width: 100%; /* 列表宽度与搜索框保持一致 */
+                background: #f0f8ff; /* 浅蓝背景 */
+                border: 1px solid #0078d4; /* 边框颜色 */
+                max-height: 150px; /* 最大高度，超出部分滚动 */
+                overflow-y: auto; /* 启用垂直滚动条 */
+                z-index: 1000; /* 确保显示在最上层 */
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+                border-radius: 5px; /* 圆角边框 */
+                box-sizing: border-box; /* 确保宽度计算准确 */
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>教师课表</h1>
+    <div class="controls">
+
+
+            <div class="search-container">
+                <label for="teacher-search">教师：</label>
+                <input type="text" id="teacher-search" class="teacher-search" placeholder="搜索教师">
+                <div id="search-results" class="search-results"></div>
+            </div>
+
+        <div>
+            <button class="nav-button" onclick="window.location.href='/'">班级查询</button>
+            <button class="nav-button" onclick="window.location.href='/students'">学生查询</button>
+            <button class="nav-button" onclick="window.location.href='/classrooms'">教室查询</button>
+        </div>
+        <div>
+            <label for="week-select">周次：</label>
+            <select id="week-select"></select>
+        </div>
+    </div>
+
+    <div class="time-header" id="time-header">
+        <div>时间</div>
+        <div>周一</div>
+        <div>周二</div>
+        <div>周三</div>
+        <div>周四</div>
+        <div>周五</div>
+        <div>周六</div>
+        <div>周日</div>
+    </div>
+
+    <div class="schedule-container" id="schedule">
+        <div class="time-column">
+            <div>1-3节</div>
+            <div>4-5节</div>
+            <div>6-8节</div>
+            <div>9-11节</div>
+        </div>
+    </div>
+
+    <!-- 课程详情模态框 -->
+    <div id="courseModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">课程详情</div>
+                <span class="close" onclick="closeModal()">&times;</span>
+            </div>
+            <div id="courseDetails">
+                <!-- 课程详情将在这里动态生成 -->
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let currentWeek = getCurrentWeek(); // 使用 getCurrentWeek() 函数获取当前周次
+        let teacherList = [];
+        function initializeWeeks() {
+        const weekSelect = document.getElementById("week-select");
+        for (let i = 1; i <= 18; i++) {
+            const option = document.createElement("option");
+            option.value = i;
+            option.textContent = `第${i}周`;
+            if (i === currentWeek) {
+                option.selected = true; // 默认选中当前周次
+            }
+            weekSelect.appendChild(option);
+        }
+        }
+        function getCurrentWeek() {
+            const firstWeekStartDate = new Date("2024-09-02"); // 假设第一周从2024年9月2日（周一）开始
+            const today = new Date();
+            const timeDifference = today - firstWeekStartDate;
+            const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+            return Math.floor(daysDifference / 7) + 1; // 根据天数计算当前周次
+        }
+        function loadTeachers() {
+            fetch("/api/teachers")
+                .then(response => response.json())
+                .then(teachers => {
+                    teacherList = teachers.sort((a, b) => {
+                        if (a === "秦振凯") return -1;
+                        if (b === "秦振凯") return 1;
+                        return a.localeCompare(b);
+                    });
+                })
+                .catch(error => console.error("加载教师列表出错:", error));
+        }
+
+        function searchTeachers() {
+            const searchInput = document.getElementById("teacher-search").value.toLowerCase();
+            const searchResults = document.getElementById("search-results");
+            searchResults.innerHTML = "";
+
+            if (searchInput.trim() === "") {
+                return;
+            }
+
+            const filteredTeachers = teacherList.filter(teacher =>
+                teacher.toLowerCase().includes(searchInput)
+            );
+
+            filteredTeachers.forEach(teacher => {
+                const resultDiv = document.createElement("div");
+                resultDiv.textContent = teacher;
+                resultDiv.onclick = () => selectTeacher(teacher);
+                searchResults.appendChild(resultDiv);
+            });
+        }
+
+        function selectTeacher(teacher) {
+            document.getElementById("teacher-search").value = teacher;
+            document.getElementById("search-results").innerHTML = "";
+            loadSchedule();
+        }
+
+        function loadSchedule() {
+            const teacherSearch = document.getElementById("teacher-search").value;
+            const weekSelect = document.getElementById("week-select");
+            const selectedWeek = parseInt(weekSelect.value);
+            const apiUrl = `/api/teacher_courses?week=${selectedWeek}&teacher=${encodeURIComponent(teacherSearch)}`;
+
+            // 先清空之前的表头和课程表内容，避免混淆
+            document.getElementById("time-header").innerHTML = '';
+            document.getElementById("schedule").innerHTML = `
+                <div class='time-column'>
+                    <div>1-3节</div>
+                    <div>4-5节</div>
+                    <div>6-8节</div>
+                    <div>9-11节</div>
+                </div>
+            `;
+
+            // 获取所选周次的起始日期
+            const firstWeekStartDate = new Date("2024-09-02"); // 假设第一周从2024年9月2日（周一）开始
+            const selectedWeekStartDate = new Date(firstWeekStartDate);
+            selectedWeekStartDate.setDate(firstWeekStartDate.getDate() + (selectedWeek - 1) * 7);
+
+            // 更新时间表头
+            updateTimeHeader(selectedWeekStartDate);
+
+            fetch(apiUrl)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.length === 0) {
+                        console.warn("未获取到课程数据");
+                        return;
+                    }
+
+                    // 初始化空白课程表
+                    const groupedByDay = Array.from({ length: 7 }, () => ({
+                        intervals: Array.from({ length: 4 }, () => [])
+                    }));
+
+                    // 填充课程
+                    data.forEach(course => {
+                        const dayIndex = course.星期 - 1;  // 星期一为0，星期日为6
+                        const startPeriod = course.节次[0];
+
+                        let intervalIndex = 0;
+                        if (startPeriod >= 1 && startPeriod <= 3) intervalIndex = 0;
+                        else if (startPeriod >= 4 && startPeriod <= 5) intervalIndex = 1;
+                        else if (startPeriod >= 6 && startPeriod <= 8) intervalIndex = 2;
+                        else if (startPeriod >= 9 && startPeriod <= 11) intervalIndex = 3;
+
+                        groupedByDay[dayIndex].intervals[intervalIndex].push(course);
+                    });
+
+                    // 渲染课程表
+                    const scheduleContainer = document.getElementById("schedule");
+                    groupedByDay.forEach((dayData, dayIndex) => {
+                        const dayDiv = document.createElement("div");
+                        dayDiv.className = "day";
+
+                        dayData.intervals.forEach((intervalCourses, intervalIndex) => {
+                            const intervalDiv = document.createElement("div");
+                            intervalDiv.className = "time-slot";
+
+                            if (intervalCourses.length > 0) {
+                                const course = intervalCourses[0];
+                                const courseDiv = document.createElement("div");
+                                courseDiv.className = "course";
+                                courseDiv.innerHTML = `${course.课程} ${course.校区} ${course.地点}`;
+                                courseDiv.style.backgroundColor = randomColor();
+                                courseDiv.onclick = () => showCourseDetails([course]);
+                                courseDiv.style.cursor = "pointer";
+                                intervalDiv.appendChild(courseDiv);
+                            }
+
+                            dayDiv.appendChild(intervalDiv);
+                        });
+
+                        scheduleContainer.appendChild(dayDiv);
+                    });
+                })
+                .catch(error => console.error("加载课程表出错:", error));
+        }
+
+        function updateTimeHeader(weekStartDate) {
+            const timeHeader = document.getElementById("time-header");
+            const weekDates = generateWeekDates(weekStartDate);
+
+            // 清空表头后重新生成
+            timeHeader.innerHTML = `
+                <div>时间</div>
+            `;
+            weekDates.forEach((date, index) => {
+                const dayOfWeek = "一二三四五六日"[index];
+                const formattedDate = date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
+
+                const headerDiv = document.createElement("div");
+                headerDiv.innerHTML = `
+                    <span>${formattedDate}</span>
+                    <br />
+                    <span>周${dayOfWeek}</span>
+                `;
+                timeHeader.appendChild(headerDiv);
+            });
+        }
+
+        function generateWeekDates(startDate) {
+            const dates = [];
+            for (let i = 0; i < 7; i++) {
+                const date = new Date(startDate);
+                date.setDate(date.getDate() + i);
+                dates.push(date);
+            }
+            return dates;
+        }
+
+        function navigateToSection_01() {
+        window.location.href = "/";
+        }
+        function navigateToSection_02() {
+            window.location.href = "/students";
+        }
+        function randomColor() {
+            const colors = ["#ffcccb", "#c6e2ff", "#d5f5e3", "#f7dc6f", "#f1948a", "#aed6f1", "#d7bde2"];
+            return colors[Math.floor(Math.random() * colors.length)];
+        }
+
+        // 显示课程详情模态框
+        function showCourseDetails(courses) {
+            const modal = document.getElementById('courseModal');
+            const detailsContainer = document.getElementById('courseDetails');
+            
+            // 清空之前的内容
+            detailsContainer.innerHTML = '';
+            
+            // 为每个课程创建详情卡片
+            courses.forEach(course => {
+                const courseDetail = document.createElement('div');
+                courseDetail.className = 'course-detail';
+                courseDetail.innerHTML = `
+                    <div class="course-name">${course.课程}</div>
+                    <div class="course-info">教师: ${course.教师}</div>
+                    <div class="course-info">班级: ${course.上课班级}</div>
+                    <div class="course-info">时间: ${course.节次范围}</div>
+                    <div class="course-info">地点: ${course.地点}</div>
+                    <div class="course-info">校区: ${course.校区}</div>
+                    <div class="course-info">周次: ${course.周次}</div>
+                `;
+                detailsContainer.appendChild(courseDetail);
+            });
+            
+            // 显示模态框
+            modal.style.display = 'block';
+        }
+        
+        // 关闭模态框
+        function closeModal() {
+            const modal = document.getElementById('courseModal');
+            modal.style.display = 'none';
+        }
+        
+        // 点击模态框外部关闭
+        window.onclick = function(event) {
+            const modal = document.getElementById('courseModal');
+            if (event.target === modal) {
+                modal.style.display = 'none';
+            }
+        }
+
+        document.getElementById("week-select").addEventListener("change", loadSchedule);
+        document.getElementById("teacher-search").addEventListener("input", searchTeachers);
+
+        initializeWeeks();
+        loadTeachers();
+    </script>
+</body>
+</html>