hsa/Html/apps/templates/learning-path.html

<link rel="stylesheet" href="/static/css/learning-path.css">
<!-- 学习路径区域 -->
<section class="learning-path-section">
    <div class="container">
        <h2 class="section-title">学习路径</h2>

        <!-- 专业选择器 -->
        <div class="major-selector">
            <label for="majorSelect">选择专业方向：</label>
            <select class="form-select" id="majorSelect">
                <option value="computer">计算机科学与技术</option>
                <option value="data">数据科学与大数据</option>
                <option value="business">工商管理</option>
                <option value="design">艺术设计</option>
                <option value="language">语言文学</option>
            </select>
        </div>

        <!-- 学习路径流程图 -->
        <div class="path-flow">
            <div class="path-container">
                <!-- 阶段1：已完成 -->
                <div class="path-step step-completed">
                    <div class="step-connector"></div>
                    <div class="step-node">
                        <i class="fas fa-code step-icon"></i>
                    </div>
                    <div class="step-content">
                        <div class="step-title">编程基础</div>
                        <div class="step-courses">3门课程</div>
                        <div class="step-progress">
                            <div class="step-progress-bar" style="width: 100%"></div>
                        </div>
                        <div class="step-status">已完成</div>
                    </div>
                </div>

                <!-- 阶段2：已完成 -->
                <div class="path-step step-completed">
                    <div class="step-connector"></div>
                    <div class="step-node">
                        <i class="fas fa-project-diagram step-icon"></i>
                    </div>
                    <div class="step-content">
                        <div class="step-title">数据结构</div>
                        <div class="step-courses">2门课程</div>
                        <div class="step-progress">
                            <div class="step-progress-bar" style="width: 100%"></div>
                        </div>
                        <div class="step-status">已完成</div>
                    </div>
                </div>

                <!-- 阶段3：进行中 -->
                <div class="path-step step-active">
                    <div class="step-connector"></div>
                    <div class="step-node">
                        <i class="fas fa-brain step-icon"></i>
                    </div>
                    <div class="step-content">
                        <div class="step-title">算法设计</div>
                        <div class="step-courses">3门课程</div>
                        <div class="step-progress">
                            <div class="step-progress-bar" style="width: 67%"></div>
                        </div>
                        <div class="step-status">进行中</div>
                    </div>
                </div>

                <!-- 阶段4：未开始 -->
                <div class="path-step">
                    <div class="step-connector"></div>
                    <div class="step-node">
                        <i class="fas fa-database step-icon"></i>
                    </div>
                    <div class="step-content">
                        <div class="step-title">数据库原理</div>
                        <div class="step-courses">2门课程</div>
                        <div class="step-progress">
                            <div class="step-progress-bar" style="width: 0%"></div>
                        </div>
                        <div class="step-status">未开始</div>
                    </div>
                </div>

                <!-- 阶段5：未开始 -->
                <div class="path-step">
                    <div class="step-connector"></div>
                    <div class="step-node">
                        <i class="fas fa-laptop-code step-icon"></i>
                    </div>
                    <div class="step-content">
                        <div class="step-title">Web开发</div>
                        <div class="step-courses">5门课程</div>
                        <div class="step-progress">
                            <div class="step-progress-bar" style="width: 0%"></div>
                        </div>
                        <div class="step-status">未开始</div>
                    </div>
                </div>
            </div>

            <!-- 课程详情面板（默认隐藏，点击阶段显示） -->
            <div class="course-panel" id="algorithm-panel">
                <div class="panel-header">
                    <h3 class="panel-title">算法设计 - 课程列表</h3>
                    <button class="close-panel"><i class="fas fa-times"></i></button>
                </div>
                <div class="course-list">
                    <div class="course-item">
                        <i class="fas fa-check-circle course-check"></i>
                        <div class="course-info">
                            <div class="course-name">算法基础与复杂度分析</div>
                            <div class="course-duration">12课时</div>
                        </div>
                        <div class="course-action">
                            <button class="btn btn-sm btn-primary">继续学习</button>
                        </div>
                    </div>
                    <div class="course-item">
                        <i class="fas fa-check-circle course-check"></i>
                        <div class="course-info">
                            <div class="course-name">排序与搜索算法</div>
                            <div class="course-duration">15课时</div>
                        </div>
                        <div class="course-action">
                            <button class="btn btn-sm btn-primary">继续学习</button>
                        </div>
                    </div>
                    <div class="course-item">
                        <i class="far fa-circle course-check"></i>
                        <div class="course-info">
                            <div class="course-name">动态规划与贪心算法</div>
                            <div class="course-duration">18课时</div>
                        </div>
                        <div class="course-action">
                            <button class="btn btn-sm btn-outline-primary">开始学习</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/js/learning-path.js"></script>
</section>