f3bdaa4e88
- Introduced a new script to check TypeScript lesson files for errors. - Created a main TypeScript file to render lessons and their details. - Added lesson definitions with starter and answer codes. - Implemented a user interface for navigating and running lessons. - Styled the application with CSS for a better user experience. - Updated README to reflect the new TypeScript section and usage instructions.
83 lines
1.9 KiB
HTML
83 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>学习面板</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 32px;
|
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
|
|
color: #0f172a;
|
|
}
|
|
|
|
.page {
|
|
width: min(900px, calc(100% - 24px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hero,
|
|
.panel,
|
|
.form-panel {
|
|
margin-top: 18px;
|
|
padding: 24px;
|
|
border-radius: 20px;
|
|
background: #ffffff;
|
|
border: 1px solid #dbe4f0;
|
|
}
|
|
|
|
.lesson-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
background: #f8fbff;
|
|
border: 1px solid #dbe4f0;
|
|
}
|
|
|
|
.lesson-item.done {
|
|
background: #dcfce7;
|
|
border-color: #bbf7d0;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
padding: 10px 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<section class="hero">
|
|
<h1>DOM + 事件 + 异步学习面板</h1>
|
|
<p id="status-text">正在初始化页面...</p>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>课程列表</h2>
|
|
<button id="load-btn" type="button">模拟加载课程</button>
|
|
<ul id="lesson-list"></ul>
|
|
</section>
|
|
|
|
<section class="form-panel">
|
|
<h2>添加课程</h2>
|
|
<form id="lesson-form">
|
|
<input id="lesson-input" type="text" placeholder="输入课程名称" />
|
|
<button type="submit">添加</button>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="./answer.js"></script>
|
|
</body>
|
|
</html>
|