93 lines
4.2 KiB
HTML
93 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>课程选择主页</title>
|
|
<script src="/static/cdnback/jquery.min.js"></script>
|
|
|
|
<link href="/static/cdnback/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/cdnback/all.min.css">
|
|
<link rel="stylesheet" href="/static/css/dashboard.css">
|
|
<link rel="stylesheet" href="/static/css/search-section.css">
|
|
<script src="/static/cdnback/js/bootstrap.bundle.min.js"></script>
|
|
<link rel="stylesheet" href="/static/css/index.css">
|
|
</head>
|
|
<body>
|
|
{% include 'navbar.html' %}
|
|
|
|
<main>
|
|
<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="course-selection">
|
|
<h2>课程列表</h2>
|
|
<div class="course-cards" id="course-cards">
|
|
{% for course in courses_data %}
|
|
<!-- <div class="course-card" onclick="show_course_details('{{ course._id }}')">
|
|
<img src="{{ course.image_url }}" alt="{{ course.course_name }}">
|
|
<h3>{{ course.name }}</h3>
|
|
<p>{{ course.description }}</p>
|
|
{% if course._id in selected_courses %}
|
|
<button class="selected-button">已选择</button>
|
|
{% else %}
|
|
<button class="select-button" data-course-id="{{course._id}}">选择课程</button>
|
|
{% endif %}
|
|
</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" onclick="btn_view(event,'{{course._id}}')"><i class="far fa-eye me-1"></i> 课程</button>
|
|
{% if course._id in selected_courses %}
|
|
<button class="btn btn-process flex-fill selected-button" data-course-id="{{course._id}}">已选课</button>
|
|
{% else %}
|
|
<button class="btn btn-process flex-fill select-button" onclick="on_click_select_course(event)" data-course-id="{{course._id}}">选择课程</button>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
{% include 'footer-brief.html' %}
|
|
</body>
|
|
<script>
|
|
window.appData = {
|
|
user_selected_courses: JSON.parse(`{{selected_courses}}`.replace(/'/g, "\""))
|
|
}
|
|
</script>
|
|
<script src="/static/js/index.js"></script>
|
|
</html>
|
|
|