OK much
This commit is contained in:
@@ -9,7 +9,6 @@
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 页眉导航栏 */
|
||||
@@ -18,7 +17,6 @@ body {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #2575fc;
|
||||
padding: 10px 30px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
@@ -74,14 +72,27 @@ body {
|
||||
.course-card {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #2575fc;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-top: auto; /* 将按钮推到父元素的底部 */
|
||||
}
|
||||
|
||||
.course-card:hover {
|
||||
transform: translateY(-10px); /* 提升效果 */
|
||||
}
|
||||
|
||||
@@ -1,38 +1,4 @@
|
||||
/* 页眉导航栏 */
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #2575fc;
|
||||
padding: 10px 30px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.navbar .logo h1 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin: 0 15px;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-links a:hover {
|
||||
color: #f1c40f;
|
||||
}
|
||||
|
||||
.navbar .avatar img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
}
|
||||
/* General reset */
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -42,12 +8,23 @@
|
||||
|
||||
|
||||
/* Body & Page Background */
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
footer {
|
||||
background-color: #f8f9fa;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
header {
|
||||
background-color: #2575fc;
|
||||
@@ -105,14 +82,31 @@ main {
|
||||
|
||||
.course-card {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #2575fc;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-top: auto; /* 将按钮推到父元素的底部 */
|
||||
}
|
||||
.course-card:hover {
|
||||
transform: translateY(-10px); /* 提升效果 */
|
||||
}
|
||||
.course-card img {
|
||||
width: 100%;
|
||||
height: 261px;
|
||||
@@ -131,19 +125,22 @@ main {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
|
||||
.select-button:hover {
|
||||
background-color: #113c86;
|
||||
}
|
||||
|
||||
.selected-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #2575fc;
|
||||
background-color: #8a8b8c;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.select-button:hover {
|
||||
background-color: #113c86;
|
||||
cursor: not-allowed;
|
||||
margin-top: auto; /* 将按钮推到父元素的底部 */
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
|
||||
@@ -31,10 +31,15 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const approveButton = document.createElement('button');
|
||||
approveButton.innerText = '批准';
|
||||
approveButton.data = element;
|
||||
approveButton.style.width = '100%';
|
||||
approveButton.style.maxHeight = '30px';
|
||||
approveButton.onclick = function(event) {
|
||||
console.log(element)
|
||||
socket.emit('message', JSON.stringify({type:'function', data:element}));
|
||||
event.currentTarget.disabled = true;
|
||||
event.currentTarget.style.backgroundColor = 'gray';
|
||||
event.currentTarget.style.color = 'white'; // 可选:设置文字颜色为白色,以便更清晰地显示
|
||||
event.currentTarget.style.border = 'none'; // 可选:去掉边框
|
||||
};
|
||||
// 将按钮添加到消息气泡中
|
||||
requestMessage.innerHTML = `<b>Function:</b> ${element.name}(${JSON.stringify(element.arguments)})<br>`;
|
||||
@@ -56,7 +61,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log(data)
|
||||
const scoreMessage = document.createElement('div');
|
||||
scoreMessage.className = 'chat-message server-message';
|
||||
scoreMessage.innerHTML = `<b>Chapter ${data.chapter_id} Score:</b> ${data.data}`;
|
||||
scoreMessage.innerHTML = `<b>Chapter ${data.chapter_id} Score:</b> ${JSON.stringify(data.data.content.speak)}`;
|
||||
document.getElementById('chatbox').appendChild(scoreMessage);
|
||||
document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
|
||||
})
|
||||
|
||||
@@ -1,70 +1,54 @@
|
||||
// dashboard.js
|
||||
let courseData;
|
||||
function show_user_data(user_data, course_brief_data_list){
|
||||
courseData = user_data.course_process_dict
|
||||
for (let i=0;i<course_brief_data_list.length;i++){
|
||||
course_brief_data = course_brief_data_list[i]
|
||||
console.log(course_brief_data)
|
||||
courseData[course_brief_data.course_id].course_id = course_brief_data.course_id;
|
||||
courseData[course_brief_data.course_id].title = course_brief_data.course_name;
|
||||
courseData[course_brief_data.course_id].lessons = course_brief_data.lessons;
|
||||
courseData[course_brief_data.course_id].course_img_path = course_brief_data.course_img_path;
|
||||
courseData[course_brief_data.course_id].course_description = course_brief_data.course_description;
|
||||
courseData[course_brief_data.course_id].course_create_date = course_brief_data.course_create_date;
|
||||
courseData[course_brief_data.course_id].course_update_data = course_brief_data.course_update_data;
|
||||
}
|
||||
for (var course in courseData){
|
||||
courseData[course].chapters = courseData[course].lessons
|
||||
console.log(courseData[course])
|
||||
}
|
||||
|
||||
let courseCardsContainer = document.getElementById('course-cards');
|
||||
courseCardsContainer.innerHTML = "";
|
||||
for (var course in courseData){
|
||||
course_id = course;
|
||||
course = courseData[course];
|
||||
let courseCard = document.createElement('div');
|
||||
|
||||
courseCard.className = 'course-card';
|
||||
courseCard.innerHTML = `
|
||||
<img src="${course.course_img_path}" alt="课程封面", class="course-image">
|
||||
<div class="course-info">
|
||||
<h3>${course.title}</h3>
|
||||
<p>${course.course_description}</p>
|
||||
</div>
|
||||
<button class="select-button" >查看目录</button>
|
||||
`;
|
||||
courseCardsContainer.appendChild(courseCard);
|
||||
courseCard.data = course_id
|
||||
courseCard.addEventListener('click',() => {
|
||||
openCourseProgress(courseCard.data);
|
||||
});
|
||||
}
|
||||
}
|
||||
function openCourseProgress(courseId) {
|
||||
const courseData = {
|
||||
'algorithm': {
|
||||
title: '算法分析与设计',
|
||||
progress: '50%',
|
||||
chapters: [
|
||||
{
|
||||
title: '第一章: 算法基础',
|
||||
subChapters: [
|
||||
{ title: '子章节1: 算法介绍', path: 'introduction' },
|
||||
{ title: '子章节2: 时间复杂度分析', path: 'time-complexity' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '第二章: 排序与查找',
|
||||
subChapters: [
|
||||
{ title: '子章节1: 排序算法', path: 'sorting-algorithms' },
|
||||
{ title: '子章节2: 查找算法', path: 'searching-algorithms' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '第三章: 图算法',
|
||||
subChapters: [
|
||||
{ title: '子章节1: 图的表示', path: 'graph-representation' },
|
||||
{ title: '子章节2: DFS 与 BFS', path: 'dfs-bfs' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
'data-structures': {
|
||||
title: '数据结构与算法',
|
||||
progress: '30%',
|
||||
chapters: [
|
||||
{
|
||||
title: '第一章: 数组与链表',
|
||||
subChapters: [
|
||||
{ title: '子章节1: 数组基础', path: 'array-basics' },
|
||||
{ title: '子章节2: 链表实现', path: 'linked-list' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '第二章: 栈与队列',
|
||||
subChapters: [
|
||||
{ title: '子章节1: 栈的实现', path: 'stack-implementation' },
|
||||
{ title: '子章节2: 队列的应用', path: 'queue-application' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '第三章: 二叉树',
|
||||
subChapters: [
|
||||
{ title: '子章节1: 二叉树的遍历', path: 'binary-tree-traversal' },
|
||||
{ title: '子章节2: 二叉查找树', path: 'binary-search-tree' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 可以继续添加其他课程的数据
|
||||
};
|
||||
|
||||
// 获取对应课程的数据
|
||||
console.log(courseId)
|
||||
const course = courseData[courseId];
|
||||
if (!course) return;
|
||||
|
||||
// 更新右侧滑出卡片的内容
|
||||
document.getElementById('course-title').textContent = course.title;
|
||||
///////////////////////// course.progress;还没有计算
|
||||
document.getElementById('progress').textContent = course.progress;
|
||||
|
||||
// 更新章节列表
|
||||
@@ -77,25 +61,43 @@ function openCourseProgress(courseId) {
|
||||
|
||||
const chapterTitle = document.createElement('div');
|
||||
chapterTitle.classList.add('chapter-title');
|
||||
chapterTitle.textContent = chapter.title;
|
||||
chapterTitle.textContent = chapter.lesson_id;
|
||||
chapterItem.appendChild(chapterTitle);
|
||||
|
||||
// 创建子章节
|
||||
if (chapter.subChapters && chapter.subChapters.length > 0) {
|
||||
const subChapterList = document.createElement('ul');
|
||||
subChapterList.classList.add('sub-chapter-list');
|
||||
|
||||
|
||||
chapter.subChapters.forEach(subChapter => {
|
||||
const subChapterItem = document.createElement('li');
|
||||
subChapterItem.classList.add('sub-chapter-item');
|
||||
subChapterItem.textContent = subChapter.title;
|
||||
|
||||
subChapterItem.textContent = subChapter;
|
||||
console.log('-------------------')
|
||||
console.log(course)
|
||||
// 查找学生进度
|
||||
for(let i = 0; i < course.lesson_processs.length; i++) {
|
||||
if (course.lesson_processs[i][1] == chapter.lesson_id) {//确定lesson_id对应正确
|
||||
console.log('-------------------')
|
||||
console.log(course.lesson_processs[i][0])
|
||||
lesson_chapters_progress = course.lesson_processs[i][0];//寻找对应的每一个章节的进度
|
||||
for (let j=0; j<lesson_chapters_progress.length;j++){
|
||||
chapter_progress = lesson_chapters_progress[j]
|
||||
if(chapter_progress.title == subChapter){
|
||||
subChapterItem.textContent += ("(已"+(chapter_progress.is_rebuttal?"申辩" : "完成")+" 得分"+ (chapter_progress.is_rebuttal?chapter_progress.rebuttal_score : chapter_progress.score) +")");
|
||||
}
|
||||
}
|
||||
if (course.lessons[i].progress === 1) {
|
||||
subChapterItem.classList.add('completed');
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加点击事件跳转到学习页面
|
||||
subChapterItem.addEventListener('click', () => {
|
||||
const userId = 'userid'; // 这里可以动态传入当前用户ID
|
||||
const courseName = encodeURIComponent(course.title); // 对课程名称进行编码
|
||||
const subChapterPath = subChapter.path; // 子章节路径
|
||||
const url = `/desktop/${userId}/${courseName}/${subChapterPath}`;
|
||||
const courseId = encodeURIComponent(course.course_id); // 对课程名称进行编码
|
||||
const url = `/desktop_nouser/${courseId}/${chapter.lesson_id}`;
|
||||
window.location.href = url; // 跳转到该学习页面
|
||||
});
|
||||
|
||||
|
||||
42
Html/static/js/index.js
Normal file
42
Html/static/js/index.js
Normal file
@@ -0,0 +1,42 @@
|
||||
function show_books(courses_data, user_selected_courses){
|
||||
console.log(courses_data)
|
||||
console.log(user_selected_courses)
|
||||
}
|
||||
function show_course_details(course_id){
|
||||
window.location.href = '/course/' + course_id
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const selectButtons = document.querySelectorAll('.select-button');
|
||||
|
||||
selectButtons.forEach(button => {
|
||||
button.addEventListener('click', function(event) {
|
||||
event.stopPropagation(); // 阻止事件冒泡
|
||||
const courseId = this.getAttribute('data-course-id');
|
||||
fetch(`/select_course`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() }}' // 如果使用 CSRF 保护
|
||||
},
|
||||
body: JSON.stringify({ course_id: courseId })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// 更新按钮样式或显示消息
|
||||
this.classList.remove('select-button');
|
||||
this.classList.add('selected-button');
|
||||
this.textContent = '已选择';
|
||||
alert('选择课程成功');
|
||||
} else {
|
||||
alert('选择课程失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('选择课程失败');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
39
Html/static/js/register.js
Normal file
39
Html/static/js/register.js
Normal file
@@ -0,0 +1,39 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const registerForm = document.getElementById('register-form');
|
||||
|
||||
registerForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault(); // 阻止表单默认提交行为
|
||||
|
||||
const username = document.getElementById('username').value;
|
||||
const email = document.getElementById('email').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const confirmPassword = document.getElementById('confirm-password').value;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
alert('密码和确认密码不一致');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/register_post', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token() }}' // 如果使用 CSRF 保护
|
||||
},
|
||||
body: JSON.stringify({ username, email, password })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('注册成功');
|
||||
window.location.href = '/login'; // 注册成功后跳转到登录页面
|
||||
} else {
|
||||
alert('注册失败: ' + data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('注册失败');
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user