可以跑了 准备做系统
This commit is contained in:
CakeCN
60
Html/templates/book.html
Normal file
60
Html/templates/book.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>课程详情</title>
|
||||
<link rel="stylesheet" href="/static/css/book.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{% include 'navbar.html' %} <!-- 引入navbar.html -->
|
||||
|
||||
<!-- 课程详情主体部分 -->
|
||||
<div class="course-details">
|
||||
<!-- 上半部分：课程封面和详情 -->
|
||||
<div class="course-overview">
|
||||
<div class="course-cover">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="课程封面" class="cover-image">
|
||||
</div>
|
||||
<div class="course-info">
|
||||
<h2 class="course-title">计算机科学导论</h2>
|
||||
<p class="course-author">作者：张教授</p>
|
||||
<p class="course-description">
|
||||
本课程将介绍计算机科学的基本概念，包括计算机的硬件结构、操作系统、编程语言等基础知识，适合初学者。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<br/>
|
||||
<!-- 下半部分：课程教案列表 -->
|
||||
<div class="lesson-plans">
|
||||
<!-- <h3>课程教案</h3> -->
|
||||
<div class="lesson-cards">
|
||||
<!-- 每个教案的卡片 -->
|
||||
<div class="lesson-card">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="教案封面" class="lesson-image">
|
||||
<div class="lesson-info">
|
||||
<h4 class="lesson-title">第一章：计算机概述</h4>
|
||||
<p class="lesson-description">介绍计算机的基础概念和发展历程。</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 继续添加其他教案 -->
|
||||
<div class="lesson-card">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="教案封面" class="lesson-image">
|
||||
<div class="lesson-info">
|
||||
<h4 class="lesson-title">第二章：操作系统基础</h4>
|
||||
<p class="lesson-description">学习操作系统的基本原理与结构。</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可以继续添加更多教案卡片 -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
var book_name = "{{book_name}}";
|
||||
|
||||
</script>
|
||||
</html>
|
||||
55
Html/templates/dashboard.html
Normal file
55
Html/templates/dashboard.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>学生个人主页</title>
|
||||
<link rel="stylesheet" href="/static/css/dashboard.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{% include 'navbar.html' %} <!-- 引入navbar.html -->
|
||||
|
||||
<!-- 主页主体部分 -->
|
||||
<div class="dashboard">
|
||||
<h2 class="dashboard-title">—— 我的选课 ——</h2>
|
||||
<div class="course-cards" >
|
||||
<!-- 每个课程的卡片 -->
|
||||
<div class="course-card"onclick="openCourseProgress('algorithm')">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="课程封面" class="course-image">
|
||||
<div class="course-info">
|
||||
<h3 class="course-name">算法分析与设计</h3>
|
||||
<p class="course-description">学习基本的算法知识概念，与算法实现。</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 继续添加其他课程卡片 -->
|
||||
<div class="course-card"onclick="openCourseProgress('data-structures')">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="课程封面" class="course-image">
|
||||
<div class="course-info">
|
||||
<h3 class="course-name">数据结构与算法</h3>
|
||||
<p class="course-description">深入学习数据结构和算法设计。</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可以继续添加课程卡片 -->
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
211
Html/templates/desktop.html
Normal file
211
Html/templates/desktop.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Code Development Platform</title>
|
||||
<style>
|
||||
</style>
|
||||
<link rel="stylesheet" href="/static/css/desktop.css">
|
||||
<script>
|
||||
document.cookie = "vscode-tkn=44edc269-6f88-46ab-9790-dc253f66ac36; path=/; SameSite=None; Secure";
|
||||
</script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/marked/13.0.2/marked.min.js"></script>
|
||||
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/split.js/dist/split.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="maxcontainer" id="maxcontainer">
|
||||
<!-- 左侧内容 -->
|
||||
<div class="sidebar" id="leftSidebar" style="width: 100%;height: 100%;">
|
||||
<div id="markdown-content"style="width: 100%;height: 95%;">
|
||||
<!-- 动态加载的 HTML 会显示在这里 -->
|
||||
</div>
|
||||
<div id="markdown-content-process"style="width: 100%;height: 5%;">
|
||||
|
||||
</div>
|
||||
<div id="progress-detail" style="position: absolute; top: 0; left: 0; display: none; padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; border-radius: 5px;">
|
||||
<!-- 这里将显示鼠标悬停的详情 -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="dragbar"></div>
|
||||
|
||||
<!-- 中间嵌入的 Vscode-web 窗口，带有 tkn 参数 -->
|
||||
<div class="vscode-web"id="vscodeWeb">
|
||||
<!-- <iframe src="http://127.0.0.1:9888/?workspace=/mnt/c/CAKE/vscode/example_folder&folder=/mnt/c/CAKE/vscode/example_folder" style="width: 100%;height: 100%;"></iframe> -->
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dragbar2"></div>
|
||||
<!-- 右侧内容 -->
|
||||
<div class="sidebar" id="rightSidebar"style="width: 100%;height: 100%;">
|
||||
<div class="chatbox-header">
|
||||
<div class="slider-container">
|
||||
<label for="fontSizeSlider">Aa</label>
|
||||
<input type="range" id="fontSizeSlider" min="12" max="24" value="16" />
|
||||
</div>
|
||||
<div class="language-toggle btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-outline-secondary " id="label_for_en">
|
||||
<input type="radio" name="language" id="english" autocomplete="off" > En
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary active" id="label_for_zh">
|
||||
<input type="radio" name="language" id="chinese" autocomplete="off" checked> Zn
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox" id="chatbox" style="width: 100%;height: 80%;">
|
||||
<!-- 消息会在这里显示 -->
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<textarea id="messageInput" rows="2" class="form-control" placeholder="输入你的消息 (支持 Markdown 语法)"></textarea>
|
||||
<button class="btn btn-primary" onclick="sendMessage()">发送</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.appData = {
|
||||
username:"{{user_id}}",
|
||||
folder:"{{path}}",
|
||||
}
|
||||
</script>
|
||||
<script src="/static/js/chatbox.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 实现左右边栏可拖动
|
||||
|
||||
const dragbar = document.getElementById('dragbar');
|
||||
const dragbar2 = document.getElementById('dragbar2');
|
||||
const container = document.getElementById('maxcontainer');
|
||||
let leftWidth = 300; // 设置左侧栏的初始宽度
|
||||
let rightWidth = 300; // 设置右侧栏的初始宽度
|
||||
|
||||
let isDraggingLeft = false;
|
||||
let isDraggingRight = false;
|
||||
|
||||
dragbar.addEventListener('mousedown', function() {
|
||||
isDraggingLeft = true;
|
||||
});
|
||||
|
||||
dragbar2.addEventListener('mousedown', function() {
|
||||
isDraggingRight = true;
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
if (isDraggingLeft) {
|
||||
leftWidth = e.clientX; // 更新左侧栏宽度
|
||||
container.style.gridTemplateColumns = `${leftWidth}px 5px 1fr 5px ${rightWidth}px`;
|
||||
} else if (isDraggingRight) {
|
||||
rightWidth = window.innerWidth - e.clientX; // 更新右侧栏宽度
|
||||
container.style.gridTemplateColumns = `${leftWidth}px 5px 1fr 5px ${rightWidth}px`;
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', function() {
|
||||
isDraggingLeft = false;
|
||||
isDraggingRight = false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 使用 fetch 发送请求到 Flask 服务器，获取 session 信息
|
||||
fetch('/get_session', {
|
||||
method: 'GET',
|
||||
credentials: 'include' // 包含 Cookie，确保 Flask 可以识别 session
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) return response.json();
|
||||
throw new Error('Failed to fetch session');
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Session data:', data);
|
||||
|
||||
// 在成功获取 session 后创建并插入 iframe
|
||||
const iframe = document.createElement('iframe');
|
||||
const sessionInfo = data
|
||||
iframe.src = 'http://127.0.0.1:9090/?workspace=/mnt/c/CAKE/vscode/{{user_id}}/{{path}}&folder=/mnt/c/CAKE/vscode/{{user_id}}/{{path}}';
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = '100%';
|
||||
|
||||
// 将 iframe 插入到指定的 div 中
|
||||
document.getElementById('vscodeWeb').appendChild(iframe);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching session:', error);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 动态加载 Markdown 文件
|
||||
function loadMarkdown(filename) {
|
||||
fetch(`/${filename}-markdown`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.html_url) {
|
||||
document.getElementById('markdown-content').innerHTML = `<iframe id="markdown-content-iframe" src="${data.html_url}"style="width: 100%;height: 100%;"></iframe>`;
|
||||
document.getElementById('markdown-content-iframe').addEventListener('load', function() {
|
||||
// 在这里执行你想要的操作
|
||||
console.log('Iframe has finished loading');
|
||||
next_chapter();
|
||||
});
|
||||
} else {
|
||||
console.error('Markdown file not found');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading markdown:', error);
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadMarkdown('{{path}}');
|
||||
});
|
||||
|
||||
|
||||
// function next_chapter(data) {
|
||||
// // 获取所有的 h3 元素
|
||||
// var iframe = document.getElementById('markdown-content-iframe');
|
||||
|
||||
// // 访问 iframe 的文档对象
|
||||
// var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
||||
|
||||
// var h3Elements = iframeDocument.querySelectorAll('h3');
|
||||
// console.log("h3Elements next")
|
||||
// console.log(iframeDocument)
|
||||
// if (currentChapterIndex >= h3Elements.length) {
|
||||
// return; // 如果已经到了最后一个章节，则不进行任何操作
|
||||
// }
|
||||
|
||||
// // 隐藏当前章节及其后的内容
|
||||
// for (let i = 0; i < h3Elements.length; i++) {
|
||||
// h3Elements[i].style.display = 'none';
|
||||
// let nextSibling = h3Elements[i].nextElementSibling;
|
||||
// while (nextSibling && nextSibling.tagName !== 'H3') {
|
||||
// nextSibling.style.display = 'none';
|
||||
// nextSibling = nextSibling.nextElementSibling;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 显示下一个章节及其后的内容，直到再下一个h3元素或结束
|
||||
// if (currentChapterIndex + 1 < h3Elements.length) {
|
||||
// h3Elements[currentChapterIndex + 1].style.display = 'block';
|
||||
// let nextSibling = h3Elements[currentChapterIndex + 1].nextElementSibling;
|
||||
// while (nextSibling && nextSibling.tagName !== 'H3') {
|
||||
// nextSibling.style.display = 'block';
|
||||
// nextSibling = nextSibling.nextElementSibling;
|
||||
// }
|
||||
// }
|
||||
// currentChapterIndex++;
|
||||
// }
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,154 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Code Development Platform</title>
|
||||
<style>
|
||||
</style>
|
||||
<title>课程选择主页</title>
|
||||
<link rel="stylesheet" href="/static/css/index.css">
|
||||
<script>
|
||||
document.cookie = "vscode-tkn=44edc269-6f88-46ab-9790-dc253f66ac36; path=/; SameSite=None; Secure";
|
||||
</script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/marked/13.0.2/marked.min.js"></script>
|
||||
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/split.js/dist/split.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="maxcontainer" id="maxcontainer">
|
||||
<!-- 左侧内容 -->
|
||||
<div class="sidebar" id="leftSidebar" style="width: 100%;height: 100%;">
|
||||
<div id="markdown-content"style="width: 100%;height: 100%;">
|
||||
<!-- 动态加载的 HTML 会显示在这里 -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="dragbar"></div>
|
||||
|
||||
<!-- 中间嵌入的 Vscode-web 窗口，带有 tkn 参数 -->
|
||||
<div class="vscode-web"id="vscodeWeb">
|
||||
<!-- <iframe src="http://127.0.0.1:9888/?workspace=/mnt/c/CAKE/vscode/example_folder&folder=/mnt/c/CAKE/vscode/example_folder" style="width: 100%;height: 100%;"></iframe> -->
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dragbar2"></div>
|
||||
<!-- 右侧内容 -->
|
||||
<div class="sidebar" id="rightSidebar"style="width: 100%;height: 100%;">
|
||||
<div class="chatbox-header">
|
||||
<div class="slider-container">
|
||||
<label for="fontSizeSlider">Aa</label>
|
||||
<input type="range" id="fontSizeSlider" min="12" max="24" value="16" />
|
||||
{% include 'navbar.html' %} <!-- 引入navbar.html -->
|
||||
<main>
|
||||
<div class="course-selection">
|
||||
<h2>课程列表</h2>
|
||||
<div class="course-list">
|
||||
<div class="course-card">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="课程1">
|
||||
<h3>课程名称 1</h3>
|
||||
<p>课程描述信息，简要介绍课程内容和学习目标。</p>
|
||||
<button class="select-button">选择课程</button>
|
||||
</div>
|
||||
<div class="language-toggle btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-outline-secondary active">
|
||||
<input type="radio" name="language" id="english" autocomplete="off" checked> En
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary">
|
||||
<input type="radio" name="language" id="chinese" autocomplete="off"> Zn
|
||||
</label>
|
||||
<div class="course-card">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="课程2">
|
||||
<h3>课程名称 2</h3>
|
||||
<p>课程描述信息，简要介绍课程内容和学习目标。</p>
|
||||
<button class="select-button">选择课程</button>
|
||||
</div>
|
||||
<div class="course-card">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="课程3">
|
||||
<h3>课程名称 3</h3>
|
||||
<p>课程描述信息，简要介绍课程内容和学习目标。</p>
|
||||
<button class="select-button">选择课程</button>
|
||||
</div>
|
||||
<!-- 添加更多课程卡片 -->
|
||||
</div>
|
||||
<div class="chatbox" id="chatbox" style="width: 100%;height: 80%;">
|
||||
<!-- 消息会在这里显示 -->
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<textarea id="messageInput" rows="2" class="form-control" placeholder="输入你的消息 (支持 Markdown 语法)"></textarea>
|
||||
<button class="btn btn-primary" onclick="sendMessage()">发送</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.appData = {
|
||||
username:"{{user_id}}",
|
||||
folder:"{{path}}",
|
||||
}
|
||||
</script>
|
||||
<script src="/static/js/chatbox.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 实现左右边栏可拖动
|
||||
|
||||
const dragbar = document.getElementById('dragbar');
|
||||
const dragbar2 = document.getElementById('dragbar2');
|
||||
const container = document.getElementById('maxcontainer');
|
||||
let leftWidth = 300; // 设置左侧栏的初始宽度
|
||||
let rightWidth = 300; // 设置右侧栏的初始宽度
|
||||
</main>
|
||||
|
||||
let isDraggingLeft = false;
|
||||
let isDraggingRight = false;
|
||||
|
||||
dragbar.addEventListener('mousedown', function() {
|
||||
isDraggingLeft = true;
|
||||
});
|
||||
|
||||
dragbar2.addEventListener('mousedown', function() {
|
||||
isDraggingRight = true;
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
if (isDraggingLeft) {
|
||||
leftWidth = e.clientX; // 更新左侧栏宽度
|
||||
container.style.gridTemplateColumns = `${leftWidth}px 5px 1fr 5px ${rightWidth}px`;
|
||||
} else if (isDraggingRight) {
|
||||
rightWidth = window.innerWidth - e.clientX; // 更新右侧栏宽度
|
||||
container.style.gridTemplateColumns = `${leftWidth}px 5px 1fr 5px ${rightWidth}px`;
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', function() {
|
||||
isDraggingLeft = false;
|
||||
isDraggingRight = false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// 动态加载 Markdown 文件
|
||||
function loadMarkdown(filename) {
|
||||
fetch(`/${filename}-markdown`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.html_url) {
|
||||
document.getElementById('markdown-content').innerHTML = `<iframe src="${data.html_url}"style="width: 100%;height: 100%;"></iframe>`;
|
||||
} else {
|
||||
console.error('Markdown file not found');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading markdown:', error);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
loadMarkdown('{{path}}');
|
||||
};
|
||||
|
||||
// 使用 fetch 发送请求到 Flask 服务器，获取 session 信息
|
||||
fetch('/get_session', {
|
||||
method: 'GET',
|
||||
credentials: 'include' // 包含 Cookie，确保 Flask 可以识别 session
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) return response.json();
|
||||
throw new Error('Failed to fetch session');
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Session data:', data);
|
||||
|
||||
// 在成功获取 session 后创建并插入 iframe
|
||||
const iframe = document.createElement('iframe');
|
||||
const sessionInfo = data
|
||||
iframe.src = 'http://127.0.0.1:9888/?workspace=/mnt/c/CAKE/vscode/{{user_id}}/{{path}}&folder=/mnt/c/CAKE/vscode/{{user_id}}/{{path}}';
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = '100%';
|
||||
|
||||
// 将 iframe 插入到指定的 div 中
|
||||
document.getElementById('vscodeWeb').appendChild(iframe);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching session:', error);
|
||||
});
|
||||
</script>
|
||||
<footer>
|
||||
<p>© 2024 学生管理系统 | 所有权利保留</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
35
Html/templates/login.html
Normal file
35
Html/templates/login.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>用户登录</title>
|
||||
<link rel="stylesheet" href="/static/css/login.css">
|
||||
<script src="/static/js/login.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h2 class="login-title">欢迎回来！</h2>
|
||||
<form class="login-form">
|
||||
<div class="input-group">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password" name="password" placeholder="请输入密码" required>
|
||||
</div>
|
||||
<button type="submit" class="login-btn">登录</button>
|
||||
<div class="forgot-password">
|
||||
<a href="#">忘记密码？</a>
|
||||
</div>
|
||||
</form>
|
||||
<div class="social-login">
|
||||
<button class="social-btn google">Google 登录</button>
|
||||
<button class="social-btn facebook">Facebook 登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
Html/templates/navbar.html
Normal file
14
Html/templates/navbar.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!-- 页眉导航栏 -->
|
||||
<header class="navbar">
|
||||
<div class="logo">
|
||||
<h1>学生管理系统</h1>
|
||||
</div>
|
||||
<nav class="navbar-links">
|
||||
<a href="/">首页</a>
|
||||
<a href="/dashboard">课程</a>
|
||||
<a href="/">成绩</a>
|
||||
</nav>
|
||||
<div class="avatar">
|
||||
<img src="/static/image/algorithm/book_cover.png" alt="个人头像" class="avatar-img">
|
||||
</div>
|
||||
</header>
|
||||
Reference in New Issue
Block a user