class123

Sleeping

App Files Files Community

ikun520 commited on Sep 2, 2025

Commit

32b55b9

verified ·

1 Parent(s): 629f016

Upload 5 files

Browse files

Files changed (5) hide show

templates/classroom.html +1207 -0
templates/index.html +1075 -0
templates/schedule_overlap.html +929 -0
templates/student.html +1100 -0
templates/teacher.html +712 -0

templates/classroom.html ADDED Viewed

	@@ -0,0 +1,1207 @@

+<!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 .course-name {
+            font-weight: bold;
+            color: #1976d2;
+            margin-bottom: 5px;
+            font-size: 14px;
+            line-height: 1.2;
+            text-align: center;
+        }
+        .course-indicator .course-teacher {
+            font-size: 12px;
+            color: #666;
+            text-align: center;
+        }
+        .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 firstCourse = courses[0];
+                    const courseElement = document.createElement('div');
+                    courseElement.className = 'course-indicator';
+                    courseElement.innerHTML = `
+                        <div class="course-name">${firstCourse.课程}</div>
+                        <div class="course-teacher">${firstCourse.教师}</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 ADDED Viewed

	@@ -0,0 +1,1075 @@

+<!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>
+            <button class="nav-button" onclick="window.location.href='/schedule-overlap'">课表叠加</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("2025-09-01"); // 假设第一周从2025年9月1日（周一）开始
+            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]?.日期 || "2025-09-01"); // 默认值为 9 月 1 日
+                    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/schedule_overlap.html ADDED Viewed

	@@ -0,0 +1,929 @@

+<!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;
+        }
+        h1 {
+            text-align: center;
+            color: #fff;
+            font-size: 28px;
+            margin: 20px 0;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+            font-weight: 700;
+        }
+        .controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 20px;
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(15px);
+            border-radius: 15px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        .controls label {
+            font-weight: bold;
+            color: #fff;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+        }
+        .controls select,
+        .controls 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);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .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);
+        }
+        .nav-button {
+            background: rgba(255, 255, 255, 0.2) !important;
+            color: #fff !important;
+            border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        }
+        .nav-button:hover {
+            background: rgba(255, 255, 255, 0.3) !important;
+        }
+        .class-legend {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 20px;
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(15px);
+            border-radius: 15px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #fff;
+            font-weight: bold;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+        }
+        .legend-color {
+            width: 20px;
+            height: 20px;
+            border-radius: 4px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+        .time-header {
+            display: grid;
+            grid-template-columns: 80px repeat(7, 1fr);
+            gap: 2px;
+            margin: 20px;
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            font-weight: bold;
+            text-align: center;
+        }
+        .schedule-container {
+            display: grid;
+            grid-template-columns: 80px repeat(7, 1fr);
+            gap: 2px;
+            margin: 20px;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+        .time-column {
+            display: flex;
+            flex-direction: column;
+            background: #f8f9fa;
+            font-weight: bold;
+            text-align: center;
+        }
+        .time-slot {
+            padding: 10px 5px;
+            border-bottom: 1px solid #ddd;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 80px; /* 固定高度而不是最小高度 */
+            font-size: 12px;
+        }
+        .day {
+            display: flex;
+            flex-direction: column;
+        }
+        .day-slot {
+            height: 90px;
+            border-bottom: 1px solid #ddd;
+            position: relative;
+            padding: 5px;
+            display: flex;
+            flex-direction: column;
+            gap: 1px;
+            overflow: hidden;
+        }
+        .course {
+            background: rgba(167, 216, 222, 0.8);
+            color: #333;
+            border-radius: 4px;
+            padding: 10px 5px;
+            font-size: 16px;
+            font-weight: bold;
+            text-align: center;
+            margin: 1px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: 80px;
+            overflow: hidden; /* 防止文本溢出 */
+            word-wrap: break-word; /* 长文本换行 */
+        }
+        .course:hover {
+            transform: scale(1.05);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+            z-index: 10;
+        }
+        .course-23 { background: rgba(255, 182, 193, 0.8); }
+        .course-24-1 { background: rgba(173, 216, 230, 0.8); }
+        .course-24-2 { background: rgba(144, 238, 144, 0.8); }
+        .course-24-3 { background: rgba(255, 218, 185, 0.8); }
+        .course-24-info { background: rgba(221, 160, 221, 0.8); }
+        .free-slot {
+            background: rgba(144, 238, 144, 0.3);
+            color: #2d5a2d;
+            border-radius: 4px;
+            padding: 4px;
+            font-size: 14px;
+            font-weight: bold;
+            text-align: center;
+            margin: 1px;
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px dashed #90ee90;
+            min-height: 0;
+            word-wrap: break-word;
+            white-space: normal;
+            line-height: 1.2;
+        }
+        /* 模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(5px);
+        }
+        .modal-content {
+            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+            margin: 5% auto;
+            padding: 0;
+            border-radius: 15px;
+            width: 90%;
+            max-width: 600px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            animation: modalSlideIn 0.3s ease-out;
+        }
+        @keyframes modalSlideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-50px) scale(0.9);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+        .modal-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 15px 15px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .modal-title {
+            font-size: 20px;
+            font-weight: bold;
+            margin: 0;
+        }
+        .close {
+            color: white;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .close:hover {
+            transform: scale(1.1);
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+        }
+        #courseDetails {
+            padding: 20px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .course-info {
+            margin: 10px 0;
+            padding: 10px;
+            background: rgba(0, 0, 0, 0.05);
+            border-radius: 8px;
+            border-left: 4px solid #667eea;
+        }
+        /* 移动端适配 */
+        @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;
+                width: 100%;
+                text-align: center;
+            }
+            .controls select,
+            .controls button {
+                padding: 8px 12px;
+                font-size: 14px;
+                margin: 2px;
+                min-width: 80px;
+            }
+            .time-header {
+                grid-template-columns: 50px repeat(7, minmax(0, 1fr));
+                margin: 5px;
+                gap: 1px;
+                font-size: 12px;
+                padding: 12px 5px;
+            }
+            .schedule-container {
+                grid-template-columns: 50px repeat(7, minmax(0, 1fr));
+                margin: 5px;
+                gap: 1px;
+                display: grid;
+                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: 12px;
+                padding: 15px 2px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                line-height: 1.2;
+            }
+            .time-slot {
+                height: 152px;
+                font-size: 12px;
+                padding: 3px;
+                min-height: 100px;
+            }
+            .day-slot {
+                min-height: 160px;
+                padding: 0px;
+            }
+            .course {
+                font-size: 14px;
+                padding: 0px;
+                margin: 1px;
+                height: auto;
+                width: auto;
+                word-break: break-word;
+                white-space: normal;
+                overflow-wrap: break-word;
+            }
+            .free-slot {
+                background: rgba(144, 238, 144, 0.3);
+                color: #2d5a2d;
+                border-radius: 4px;
+                padding: 0px;
+                font-size: 14px;
+                font-weight: bold;
+                text-align: center;
+                margin: 0px;
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 1px dashed #90ee90;
+                min-height: 0;
+                word-wrap: break-word;
+                white-space: normal;
+                line-height: 1.1;
+            }
+            .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-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: 8px 0;
+            padding: 5px 0;
+            color: #555;
+            border-bottom: 1px solid #eee;
+            text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
+        }
+        .course-info:last-child {
+            border-bottom: none;
+        }
+        .course-section {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 10px 0;
+            border-left: 4px solid #007bff;
+            display: flex;
+            flex-direction: column;
+            min-height: 120px;
+        }
+        /* 确保课程内容在固定高度内正确显示 */
+        .course .course-name {
+            font-size: 9px;
+            line-height: 1.1;
+            margin-bottom: 2px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .course .course-info {
+            font-size: 8px;
+            line-height: 1.0;
+            margin: 1px 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
+        .free-section {
+            background: #d4edda;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 10px 0;
+            border-left: 4px solid #28a745;
+            display: flex;
+            flex-direction: column;
+            min-height: 100px;
+        }
+        .student-list {
+            background: #fff;
+            border-radius: 5px;
+            padding: 10px;
+            margin-top: auto;
+            border: 1px solid #dee2e6;
+            font-size: 14px;
+            line-height: 1.4;
+            flex-grow: 1;
+        }
+        .course-info {
+            margin: 3px 0;
+            line-height: 1.4;
+        }
+        .course-name {
+            font-weight: bold;
+            font-size: 1.1em;
+            margin-bottom: 8px;
+            padding-bottom: 5px;
+            border-bottom: 1px solid #eee;
+        }
+    </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="window.location.href='/'">返回主页</button>
+            <button class="nav-button" onclick="window.location.href='/students'">学生查询</button>
+            <button class="nav-button" onclick="window.location.href='/teachers'">教师查询</button>
+            <button class="nav-button" onclick="window.location.href='/classrooms'">教室查询</button>
+        </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 class="time-slot">1-3节</div>
+            <div class="time-slot">4-5节</div>
+            <div class="time-slot">6-8节</div>
+            <div class="time-slot">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();
+        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("2025-09-01");
+            const today = new Date();
+            const timeDifference = today - firstWeekStartDate;
+            const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+            return Math.floor(daysDifference / 7) + 1;
+        }
+        function updateTimeHeader(firstDayDate) {
+            const timeHeader = document.getElementById("time-header");
+            const dayNames = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+            // 确保从周一开始计算
+            const mondayDate = new Date(firstDayDate);
+            const dayOfWeek = mondayDate.getDay(); // 0=周日, 1=周一, ..., 6=周六
+            const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // 计算到周一的天数差
+            mondayDate.setDate(mondayDate.getDate() + daysToMonday);
+            for (let i = 1; i <= 7; i++) {
+                const dayDate = new Date(mondayDate);
+                dayDate.setDate(mondayDate.getDate() + i - 1);
+                const dayDiv = timeHeader.children[i];
+                dayDiv.innerHTML = `<span>${(dayDate.getMonth() + 1).toString().padStart(2, '0')}/${dayDate.getDate().toString().padStart(2, '0')}</span><br><span>${dayNames[i - 1]}</span>`;
+            }
+        }
+        function getClassColor(className) {
+            if (className === "23大数据1区") return "course-23";
+            if (className === "24大数据1区") return "course-24-1";
+            if (className === "24大数据2区") return "course-24-2";
+            if (className === "24大数据3区") return "course-24-3";
+            if (className === "24信息安全技术应用1区") return "course-24-info";
+            return "course";
+        }
+        function formatFreeClasses(freeClasses) {
+            if (freeClasses.length === 0) return '';
+            // 如果全部班级都没课
+             const allClasses = ["23大数据1区", "24大数据1区", "24大数据2区", "24大数据3区", "24信息安全技术应用1区"];
+             if (freeClasses.length === allClasses.length) {
+                 return '实验室都没课';
+             }
+            // 分离不同类型的班级
+            const class23 = freeClasses.filter(cls => cls.includes('23'));
+            const class24Data = freeClasses.filter(cls => cls.includes('24') && cls.includes('大数据'));
+            const class24Info = freeClasses.filter(cls => cls.includes('24') && cls.includes('信息安全'));
+            let result = [];
+            // 处理23级
+            if (class23.length > 0) {
+                result.push(class23.join('、'));
+            }
+            // 处理24级大数据专业
+            if (class24Data.length > 0) {
+                if (class24Data.length >= 3) {
+                    result.push('24级大数据全区');
+                } else if (class24Data.length === 2) {
+                    const regions = class24Data.map(cls => cls.match(/\d+区/)[0]);
+                    result.push(`24级大数据${regions.join('、')}`);
+                } else {
+                    result.push(class24Data[0]);
+                }
+            }
+            // 处理24级信息安全专业
+            if (class24Info.length > 0) {
+                result.push(class24Info.join('、'));
+            }
+            return result.join('、');
+        }
+        function loadScheduleOverlap() {
+            const selectedWeek = document.getElementById("week-select").value;
+            const apiUrl = `/api/schedule_overlap?week=${selectedWeek}`;
+            fetch(apiUrl)
+                .then(response => response.json())
+                .then(data => {
+                    const scheduleContainer = document.getElementById("schedule");
+                    // 清空现有内容，保留时间列
+                    scheduleContainer.innerHTML = `
+                        <div class='time-column'>
+                            <div class='time-slot'>1-3节</div>
+                            <div class='time-slot'>4-5节</div>
+                            <div class='time-slot'>6-8节</div>
+                            <div class='time-slot'>9-11节</div>
+                        </div>
+                    `;
+                    // 更新时间头
+                    const firstDayDate = new Date(data[0]?.日期 || "2025-09-01");
+                    updateTimeHeader(firstDayDate);
+                    // 初始化课程表数据结构
+                    const scheduleData = {};
+                    for (let day = 1; day <= 7; day++) {
+                        scheduleData[day] = {
+                            1: [], // 1-3节
+                            2: [], // 4-5节
+                            3: [], // 6-8节
+                            4: []  // 9-11节
+                        };
+                    }
+                    // 填充课程数据
+                    data.forEach(course => {
+                        const day = course.星期;
+                        const startPeriod = course.节次[0];
+                        let timeSlot = 1;
+                        if (startPeriod >= 1 && startPeriod <= 3) timeSlot = 1;
+                        else if (startPeriod >= 4 && startPeriod <= 5) timeSlot = 2;
+                        else if (startPeriod >= 6 && startPeriod <= 8) timeSlot = 3;
+                        else if (startPeriod >= 9 && startPeriod <= 11) timeSlot = 4;
+                        scheduleData[day][timeSlot].push(course);
+                    });
+                    // 渲染课程表
+                    for (let day = 1; day <= 7; day++) {
+                        const dayDiv = document.createElement("div");
+                        dayDiv.className = "day";
+                        for (let timeSlot = 1; timeSlot <= 4; timeSlot++) {
+                            const slotDiv = document.createElement("div");
+                            slotDiv.className = "day-slot";
+                            const courses = scheduleData[day][timeSlot];
+                            // 获取所有目标班级
+                            const allClasses = ["23大数据1区", "24大数据1区", "24大数据2区", "24大数据3区", "24信息安全技术应用1区"];
+                            const classesWithCourse = courses.map(c => c.班级);
+                            const freeClasses = allClasses.filter(cls => !classesWithCourse.includes(cls));
+                            if (freeClasses.length > 0) {
+                                // 显示没有课的区队（合并显示）
+                                const freeDiv = document.createElement("div");
+                                freeDiv.className = "free-slot";
+                                const freeText = formatFreeClasses(freeClasses);
+                                // 如果已经包含"没课"字样，就不再添加
+                                if (freeText.includes('没课')) {
+                                    freeDiv.innerHTML = freeText;
+                                } else {
+                                    freeDiv.innerHTML = freeText + "没课";
+                                }
+                                freeDiv.onclick = () => showTimeSlotDetails(courses, freeClasses, day, timeSlot);
+                                slotDiv.appendChild(freeDiv);
+                            } else {
+                                // 所有班级都有课
+                                const busyDiv = document.createElement("div");
+                                busyDiv.className = "course";
+                                busyDiv.innerHTML = "全部有课";
+                                busyDiv.onclick = () => showTimeSlotDetails(courses, freeClasses, day, timeSlot);
+                                slotDiv.appendChild(busyDiv);
+                            }
+                            dayDiv.appendChild(slotDiv);
+                        }
+                        scheduleContainer.appendChild(dayDiv);
+                    }
+                })
+                .catch(error => {
+                    console.error('加载课表数据失败:', error);
+                    alert('加载课表数据失败，请稍后重试');
+                });
+        }
+        // 缓存学生数据，避免重复请求
+         const studentCache = new Map();
+         async function getStudentList(className) {
+             if (studentCache.has(className)) {
+                 return studentCache.get(className);
+             }
+             try {
+                 const response = await fetch(`/api/class_students?class_name=${encodeURIComponent(className)}`);
+                 const students = await response.json();
+                 studentCache.set(className, students);
+                 return students;
+             } catch (error) {
+                 console.error('获取学生名单失败:', error);
+                 return [];
+             }
+         }
+         async function showTimeSlotDetails(courses, freeClasses, day, timeSlot) {
+             const dayNames = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+             const timeSlotNames = ["1-3节", "4-5节", "6-8节", "9-11节"];
+             let detailsHtml = `<h3>${dayNames[day-1]} ${timeSlotNames[timeSlot-1]}</h3>`;
+             // 显示空闲的班级及其学生信息
+             if (freeClasses.length > 0) {
+                 detailsHtml += `<h4 style="color: #28a745; margin-bottom: 15px;">🟢 没有课的区队：</h4>`;
+                 for (const freeClass of freeClasses) {
+                     const students = await getStudentList(freeClass);
+                     detailsHtml += `
+                         <div class="free-section">
+                             <div class="course-name" style="color: #28a745;">${freeClass}</div>
+                             <div class="student-list">
+                                 <strong>空闲学生名单：</strong><br>
+                                 ${students.length > 0 ? students.join('、') : '暂无学生信息'}
+                             </div>
+                         </div>
+                     `;
+                 }
+             }
+             // 显示有课的班级详细信息
+             if (courses.length > 0) {
+                 detailsHtml += `<h4 style="color: #dc3545; margin-top: 20px; margin-bottom: 15px;">📚 有课的区队：</h4>`;
+                 // 按班级分组，每个区队显示一个框
+                 const classCourses = {};
+                 courses.forEach(course => {
+                     if (!classCourses[course.班级]) {
+                         classCourses[course.班级] = [];
+                     }
+                     classCourses[course.班级].push(course);
+                 });
+                 for (const [className, classCourseList] of Object.entries(classCourses)) {
+                     // 获取该班级的学生名单（使用缓存）
+                     const students = await getStudentList(className);
+                     // 构建课程列表（只显示课程名称，合并成一行）
+                     const courseNames = classCourseList.map(course => {
+                         // 去除课程编号和所有括号，只保留课程名称
+                         let courseName = course.课程;
+                         // 匹配并去除 [编号][课程名称] 格式，提取课程名称
+                         const match = courseName.match(/\[[^\]]+\]\[([^\]]+)\]/);
+                         if (match) {
+                             courseName = match[1]; // 提取第二个括号内的内容
+                         } else {
+                             // 如果格式不匹配，尝试去除所有方括号
+                             courseName = courseName.replace(/\[[^\]]*\]/g, '');
+                         }
+                         // 去除末尾的数字标识，如 -1、-2 等
+                         courseName = courseName.replace(/-\d+$/, '');
+                         return courseName.trim();
+                     });
+                     const uniqueCourseNames = [...new Set(courseNames)]; // 去重
+                     // 限制显示前三个课程，如果超过三个则显示"等X门课程"
+                     let courseListHtml;
+                     if (uniqueCourseNames.length <= 3) {
+                         courseListHtml = uniqueCourseNames.join('、');
+                     } else {
+                         const firstThree = uniqueCourseNames.slice(0, 3);
+                         courseListHtml = firstThree.join('、') + `等${uniqueCourseNames.length}门课程`;
+                     }
+                     detailsHtml += `
+                          <div class="course-section">
+                              <div class="course-name">${className}</div>
+                              <div class="course-info">
+                                  ${courseListHtml}
+                              </div>
+                              <div class="student-list">
+                                  <strong>学生名单：</strong><br>
+                                 ${students.length > 0 ? students.join('、') : '暂无学生信息'}
+                             </div>
+                         </div>
+                     `;
+                 }
+            }
+            document.getElementById("courseDetails").innerHTML = detailsHtml;
+            document.getElementById("courseModal").style.display = "block";
+        }
+        function closeModal() {
+            document.getElementById("courseModal").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", loadScheduleOverlap);
+        // 初始化
+        initializeWeeks();
+        loadScheduleOverlap();
+    </script>
+</body>
+</html>

templates/student.html ADDED Viewed

	@@ -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("2025-09-01"); // 假设第一周从2025年9月1日（周一）开始
+            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("2025-09-01"); // 假设第一周从2025年9月1日（周一）开始
+            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 ADDED Viewed

	@@ -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("2025-09-01"); // 假设第一周从2025年9月1日（周一）开始
+            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("2025-09-01"); // 假设第一周从2025年9月1日（周一）开始
+            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>