copy dashboard

Html/app.py

@@ -10,7 +10,7 @@ app = create_app()
 if __name__ == "__main__":
     socketio.run(
         app,
-        host="127.0.0.1",
+        host="0.0.0.0",
         port=5551,
         debug=False,                # 开发期打开
         # allow_unsafe_werkzeug=True, # 避免 dev server 的安全限制提示

Html/apps/static/css/dashboard.css

@@ -47,155 +47,483 @@ body {
 }
 
 /* Dashboard 主体部分 */
-.dashboard {
+ 
-    max-width: 1200px;
+:root {
-    margin: 0 auto;
+    --primary-blue: #6A9FB5;
-    padding: 0 20px;
+    --secondary-blue: #8BB4C5;
+    --light-blue: #E1F0F7;
+    --accent-blue: #4A7B9D;
+    --text-dark: #2C3E50;
+    --text-light: #7F8C8D;
+    --card-shadow: 0 4px 12px rgba(106, 159, 181, 0.15);
 }
 
-.dashboard-title {
+body {
-    font-size: 28px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-weight: bold;
+    background-color: #F9FBFD;
-    margin-bottom: 20px;
+    color: var(--text-dark);
-    text-align: center;
+    line-height: 1.6;
-    
 }
 
-/* 课程卡片容器 */
+/* 导航栏样式 */
-.course-cards {
+.navbar {
-    display: flex;
+    background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
-    flex-wrap: nowrap;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    gap: 20px;
+    padding: 0.8rem 1rem;
-    justify-content: flex-start;
-    padding: 10px 0;
-    overflow: hidden;
-    position: relative;
-    
 }
 
-/* 课程卡片 */
+.navbar-brand {
-.course-card {
+    font-weight: 700;
-    width: 300px;
+    font-size: 1.5rem;
-    height: 500px;
+    color: white !important;
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    border-radius: 15px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    transition: transform 0.3s;
 }
 
-.select-button {
+.nav-link {
-    display: block;
+    color: rgba(255, 255, 255, 0.9) !important;
-    width: 100%;
+    font-weight: 500;
-    padding: 10px;
+    padding: 0.5rem 1rem !important;
-    background-color: #2575fc;
+    transition: all 0.3s ease;
-    color: white;
+    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    font-size: 16px;
-    margin-top: auto; /* 将按钮推到父元素的底部 */
 }
 
-.course-card:hover {
+.nav-link:hover,
-    transform: translateY(-10px); /* 提升效果 */
+.nav-link.active {
+    color: white !important;
+    background-color: rgba(255, 255, 255, 0.15);
 }
 
-.course-image {
+.user-avatar {
-    width: 100%;
+    width: 36px;
-    height: 200px;
+    height: 36px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.7);
     object-fit: cover;
 }
 
-.course-info {
+/* 学习路径区域 */
-    padding: 20px;
+.learning-path-section {
+    background: linear-gradient(135deg, var(--light-blue), #D4E9F2);
+    padding: 2rem 0;
+    border-radius: 0 0 20px 20px;
+    margin-bottom: 2rem;
 }
 
-.course-name {
+.section-title {
-    font-size: 22px;
+    color: var(--accent-blue);
-    font-weight: bold;
+    font-weight: 600;
-    color: #333;
+    margin-bottom: 1.5rem;
+    position: relative;
+    padding-bottom: 0.5rem;
+    font-size: 28px;
 }
 
-.course-description {
+.section-title:after {
-    font-size: 14px;
+    content: '';
-    color: #777;
+    position: absolute;
-    margin-top: 10px;
+    bottom: 0;
+    left: 0;
+    width: 60px;
+    height: 3px;
+    background-color: var(--primary-blue);
+    border-radius: 2px;
 }
-/* 右侧滑出进度卡片样式 */
+
-.course-progress {
+/* 专业选择器样式优化 */
-    position: fixed;
+.major-selector {
-    top: 0;
+    position: relative;
-    right: -400px;  /* 初始时在屏幕外 */
+    margin-bottom: 2rem;
-    width: 400px;
+}
+
+.major-selector label {
+    font-weight: 600;
+    color: var(--accent-blue);
+    margin-bottom: 0.5rem;
+    display: block;
+}
+
+.major-selector select {
+    appearance: none;
+    background-color: white;
+    border: 2px solid var(--primary-blue);
+    border-radius: 8px;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    color: var(--text-dark);
+    width: 100%;
+    max-width: 300px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.major-selector select:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(106, 159, 181, 0.3);
+    border-color: var(--accent-blue);
+}
+
+.major-selector::after {
+    content: '\f078';
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--primary-blue);
+}
+
+/* 学习路径图样式 - 横向流程图 */
+.path-flow {
+    background-color: white;
+    border-radius: 12px;
+    padding: 2rem;
+    box-shadow: var(--card-shadow);
+    overflow-x: auto;
+    position: relative;
+}
+
+.path-container {
+    display: flex;
+    min-width: 900px;
+    position: relative;
+}
+
+.path-step {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    padding: 0 1rem;
+}
+
+.step-connector {
+    position: absolute;
+    top: 40px;
+    left: -50%;
+    width: 100%;
+    height: 2px;
+    background-color: var(--primary-blue);
+    z-index: 1;
+}
+
+.step-node {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background-color: var(--light-blue);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+    position: relative;
+    z-index: 2;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.step-node:hover {
+    transform: scale(1.05);
+    background-color: var(--primary-blue);
+}
+
+.step-node:hover .step-icon {
+    color: white;
+}
+
+.step-icon {
+    font-size: 1.8rem;
+    color: var(--accent-blue);
+}
+
+.step-content {
+    text-align: center;
+    width: 100%;
+}
+
+.step-title {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--accent-blue);
+}
+
+.step-courses {
+    font-size: 0.9rem;
+    color: var(--text-light);
+    margin-bottom: 0.5rem;
+}
+
+.step-progress {
+    height: 6px;
+    background-color: #e9ecef;
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.step-progress-bar {
     height: 100%;
-    background-color: #fff;
+    background-color: var(--primary-blue);
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
-    padding: 30px;
+    transition: width 0.5s ease;
-    transition: right 0.3s ease;
-    z-index: 9999;
-    border-radius: 15px;  /* 添加圆角 */
 }
 
-.course-progress.open {
+.step-status {
-    right: 0;  /* 打开时显示 */
+    font-size: 0.8rem;
+    color: var(--text-light);
 }
 
-.progress-header {
+.step-completed .step-node {
+    background-color: var(--primary-blue);
+}
+
+.step-completed .step-icon {
+    color: white;
+}
+
+.step-active .step-node {
+    background-color: var(--accent-blue);
+    box-shadow: 0 0 0 4px rgba(74, 123, 157, 0.3);
+}
+
+.step-active .step-icon {
+    color: white;
+}
+
+/* 课程详情面板 */
+.course-panel {
+    display: none;
+    background-color: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: var(--card-shadow);
+    margin-top: 1.5rem;
+}
+
+.course-panel.active {
+    display: block;
+}
+
+.panel-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 20px;
+    margin-bottom: 1rem;
-    margin-bottom: 20px;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e9ecef;
 }
 
-.close-btn {
+.panel-title {
+    font-weight: 600;
+    color: var(--accent-blue);
+    margin: 0;
+}
+
+.close-panel {
     background: none;
     border: none;
-    font-size: 24px;
+    font-size: 1.2rem;
+    color: var(--text-light);
     cursor: pointer;
 }
 
-
+.course-list {
-/* 章节和子章节样式 */
+    display: grid;
-.chapter-list {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    list-style-type: none;
+    gap: 1rem;
-    padding-left: 0;
 }
 
-.chapter-item {
+.course-item {
-    margin: 5px 0;
+    display: flex;
-    padding: 5px;
+    align-items: center;
-    cursor: pointer;
+    padding: 0.75rem;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+    transition: all 0.3s ease;
 }
 
-.chapter-item .chapter-title {
+.course-item:hover {
-    font-size: 16px;
+    border-color: var(--primary-blue);
-    font-weight: bold;
+    box-shadow: 0 2px 8px rgba(106, 159, 181, 0.15);
 }
 
-.chapter-item .sub-chapter-list {
+.course-check {
-    display: none; /* 初始状态下子章节隐藏 */
+    margin-right: 0.75rem;
-    padding-left: 20px;
+    color: #28a745;
 }
 
-.chapter-item.open .sub-chapter-list {
+.course-info {
-    display: block; /* 展开时显示子章节 */
+    flex: 1;
 }
 
-.chapter-item:hover {
+.course-name {
-    background-color: #f1f1f1;
+    font-weight: 500;
-    border-radius: 5px;
+    margin-bottom: 0.25rem;
 }
 
-/* 子章节的样式 */
+.course-duration {
-.sub-chapter-item {
+    font-size: 0.8rem;
-    margin: 3px 0;
+    color: var(--text-light);
-    padding: 3px;
-    font-size: 14px;
 }
 
-.sub-chapter-item:hover {
+.course-action {
-    background-color: #e8e8e8;
+    margin-left: 0.75rem;
-}
+}
+
+/* 搜索区域 */
+.search-section {
+    padding: 2rem 0;
+}
+
+.search-container {
+    background-color: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: var(--card-shadow);
+}
+
+/* 课程卡片样式 */
+.course-card {
+    border: none;
+    border-radius: 12px;
+    box-shadow: var(--card-shadow);
+    transition: all 0.3s ease;
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+    background-color: white;
+}
+
+.course-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(106, 159, 181, 0.2);
+}
+
+.course-img {
+    height: 160px;
+    object-fit: cover;
+    width: 100%;
+}
+
+.course-category {
+    display: inline-block;
+    background-color: var(--light-blue);
+    color: var(--accent-blue);
+    font-size: 0.8rem;
+    padding: 0.3rem 0.8rem;
+    border-radius: 20px;
+    margin-bottom: 0.8rem;
+}
+
+.course-title {
+    font-weight: 600;
+    color: var(--text-dark);
+    margin-bottom: 0.5rem;
+    font-size: 1.1rem;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.course-instructor {
+    color: var(--text-light);
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+}
+
+.course-meta {
+    display: flex;
+    justify-content: space-between;
+    color: var(--text-light);
+    font-size: 0.85rem;
+    margin-bottom: 1rem;
+}
+
+.course-rating {
+    color: #FFC107;
+}
+
+.btn-view {
+    background-color: white;
+    color: var(--primary-blue);
+    border: 1px solid var(--primary-blue);
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.btn-view:hover {
+    background-color: var(--light-blue);
+    color: var(--accent-blue);
+}
+
+.btn-enroll {
+    background-color: var(--primary-blue);
+    color: white;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.btn-enroll:hover {
+    background-color: var(--accent-blue);
+    color: white;
+}
+
+/* 页脚样式 */
+.footer {
+    background-color: var(--text-dark);
+    color: white;
+    padding: 2.5rem 0 1.5rem;
+    margin-top: 3rem;
+}
+
+.footer-heading {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 1.2rem;
+    color: white;
+}
+
+.footer-links {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-links li {
+    margin-bottom: 0.5rem;
+}
+
+.footer-links a {
+    color: #BDC3C7;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.footer-links a:hover {
+    color: white;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .path-container {
+        min-width: 700px;
+    }
+
+    .step-node {
+        width: 60px;
+        height: 60px;
+    }
+
+    .step-icon {
+        font-size: 1.4rem;
+    }
+
+    .step-title {
+        font-size: 0.9rem;
+    }
+
+    .course-list {
+        grid-template-columns: 1fr;
+    }
+}

Html/apps/templates/dashboard copy.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>华实学伴 - 专业的在线学习平台</title>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome 图标 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="/static/css/dashboard.css">
+</head>
+<body>
+    {% include 'navbar.html' %}  <!-- 引入navbar.html -->
+            <section class="search-section">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8">
+                        <div class="search-container">
+                            <div class="input-group">
+                                <input type="text" class="form-control form-control-lg" placeholder="搜索您感兴趣的课程...">
+                                <button class="btn btn-primary btn-lg" type="button">
+                                    <i class="fas fa-search me-1"></i> 搜索
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    <div class="dashboard">
+        <h2 class="dashboard-title">——  我的选课  ——</h2>
+        <div class="course-cards" id="course-cards">
+            <!-- 循环生成课程卡片 -->
+             {% for course in user_selected_course %}
+             <!-- <div class="course-card" onclick="openCourseProgress('{{course._id}}')">
+                <img src="{{course.image_url}}" alt="课程封面" class="course-image">
+                <div class="course-info">
+                    <h3 class="course-name">{{course.name}}</h3>
+                    <p class="course-description">{{course.description}}</p>
+                </div>
+             </div> -->
+                <div class="col-md-6 col-lg-4">
+                    <div class="course-card card h-100" onclick="openCourseProgress('{{course._id}}')">
+                        <img src="{{course.image_url}}"
+                            class="course-img" alt="课程封面">
+                        <div class="card-body d-flex flex-column">
+                            <span class="course-category">艺术设计</span>
+                            <h5 class="course-title">{{course.name}}</h5>
+                            <p class="course-instructor">{{course.description}}</p>
+                            <div class="course-meta">
+                                <span><i class="far fa-user me-1"></i> 初级</span>
+                                <span class="course-rating"><i class="fas fa-star"></i> 4.7</span>
+                            </div>
+                            <div class="mt-auto d-grid gap-2 d-md-flex">
+                                <button class="btn btn-view flex-fill"><i class="far fa-eye me-1"></i> 查看课程</button>
+                                <button class="btn btn-enroll flex-fill"><i class="fas fa-plus me-1"></i> 选课</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+             {% endfor %}
+        </div>
+    </div>
+
+
+    <!-- 右侧滑出的学习进度卡片 -->
+    <div id="courseProgress" class="course-progress">
+        <div class="progress-header">
+            <span id="course-title"></span>
+            <button class="close-btn" onclick="closeCourseProgress()">×</button>
+        </div>
+        <div class="progress-content">
+            <p>当前学习进度: <span id="progress"></span></p>
+            <hr/>
+            <h3>章节列表：</h3> 
+            <ul id="chapter-list">
+                <!-- 章节列表会在点击课程时动态生成 -->
+            </ul>
+        </div>
+    </div>
+    <script src="/static/js/dashboard.js"></script>
+    <script>
+        // 解析用户数据和课程数据
+        console.log(`{{user_data}}`.replaceAll("&#39;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
+        console.log(`{{user_course_data}}`.replaceAll("&#34;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
+        let user_data = JSON.parse(`{{user_data}}`.replaceAll("&#39;", "\"").replaceAll("True", "true").replaceAll("False", "false"));
+        let user_course_data = JSON.parse(`{{user_course_data}}`.replaceAll("&#34;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
+        console.log(user_data)
+        console.log(user_course_data)
+        show_user_data(user_data, user_course_data)
+    </script>
+</body>
+</html>

Html/apps/templates/dashboard.html

@@ -3,24 +3,62 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>学生个人主页</title>
+    <title>华实学伴 - 专业的在线学习平台</title>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome 图标 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="stylesheet" href="/static/css/dashboard.css">
 </head>
 <body>
-    
     {% include 'navbar.html' %}  <!-- 引入navbar.html -->
+            <section class="search-section">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8">
+                        <div class="search-container">
+                            <div class="input-group">
+                                <input type="text" class="form-control form-control-lg" placeholder="搜索您感兴趣的课程...">
+                                <button class="btn btn-primary btn-lg" type="button">
+                                    <i class="fas fa-search me-1"></i> 搜索
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
     <div class="dashboard">
         <h2 class="dashboard-title">——  我的选课  ——</h2>
         <div class="course-cards" id="course-cards">
             <!-- 循环生成课程卡片 -->
              {% for course in user_selected_course %}
-             <div class="course-card" onclick="openCourseProgress('{{course._id}}')">
+             <!-- <div class="course-card" onclick="openCourseProgress('{{course._id}}')">
                 <img src="{{course.image_url}}" alt="课程封面" class="course-image">
                 <div class="course-info">
                     <h3 class="course-name">{{course.name}}</h3>
                     <p class="course-description">{{course.description}}</p>
-                </div> <!-- 补充闭合标签 -->
+                </div>
-             </div> <!-- 补充闭合标签 -->
+             </div> -->
+                <div class="col-md-6 col-lg-4">
+                    <div class="course-card card h-100" onclick="openCourseProgress('{{course._id}}')">
+                        <img src="{{course.image_url}}"
+                            class="course-img" alt="课程封面">
+                        <div class="card-body d-flex flex-column">
+                            <span class="course-category">艺术设计</span>
+                            <h5 class="course-title">{{course.name}}</h5>
+                            <p class="course-instructor">{{course.description}}</p>
+                            <div class="course-meta">
+                                <span><i class="far fa-user me-1"></i> 初级</span>
+                                <span class="course-rating"><i class="fas fa-star"></i> 4.7</span>
+                            </div>
+                            <div class="mt-auto d-grid gap-2 d-md-flex">
+                                <button class="btn btn-view flex-fill"><i class="far fa-eye me-1"></i> 查看课程</button>
+                                <button class="btn btn-enroll flex-fill"><i class="fas fa-plus me-1"></i> 选课</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
              {% endfor %}
         </div>
     </div>