470 lines
27 KiB
HTML
470 lines
27 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>{{第N周}} · {{班级简称}}课评</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;600&display=swap');
|
||
|
||
:root {
|
||
--coral: #e85d4c;
|
||
--coral-light: #f5a99e;
|
||
--coral-dark: #c44738;
|
||
--amber: #f0a84a;
|
||
--amber-light: #f5d08a;
|
||
--ink: #2c2420;
|
||
--ink-soft: #5a524e;
|
||
--paper: #faf6f1;
|
||
--paper-warm: #f5efe8;
|
||
--cream: #fffdf9;
|
||
--border: #e8e0d8;
|
||
--shadow-soft: rgba(44, 36, 32, 0.06);
|
||
--shadow-medium: rgba(44, 36, 32, 0.10);
|
||
--shadow-card: rgba(44, 36, 32, 0.08);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--paper);
|
||
min-height: 100vh;
|
||
color: var(--ink);
|
||
background-image:
|
||
radial-gradient(circle at 20% 50%, rgba(240, 168, 74, 0.03) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 20%, rgba(232, 93, 76, 0.02) 0%, transparent 50%),
|
||
radial-gradient(circle at 50% 80%, rgba(240, 168, 74, 0.02) 0%, transparent 40%);
|
||
}
|
||
|
||
.topbar {
|
||
position: sticky; top: 0; z-index: 100;
|
||
background: rgba(250, 246, 241, 0.92); backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 14px 28px; display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.topbar-title { font-family: 'Noto Serif SC', serif; font-size: 1.05em; font-weight: 600; color: var(--ink); letter-spacing: 0.5px; }
|
||
.topbar-meta { font-size: 0.8em; color: var(--ink-soft); margin-top: 2px; }
|
||
.topbar-actions { display: flex; gap: 10px; }
|
||
.btn { padding: 8px 18px; border-radius: 10px; font-size: 0.85em; font-weight: 500; cursor: pointer; transition: all 0.25s ease; border: none; font-family: inherit; }
|
||
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--ink-soft); }
|
||
.btn-outline:hover { border-color: var(--coral); color: var(--coral); background: rgba(232, 93, 76, 0.05); }
|
||
.btn-success { background: var(--coral); color: white; }
|
||
.btn-success:hover { background: var(--coral-dark); }
|
||
.btn-success:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
|
||
.main { max-width: 680px; margin: 0 auto; padding: 28px 20px 160px; position: relative; }
|
||
|
||
.course-hero {
|
||
background: linear-gradient(135deg, var(--cream) 0%, var(--paper-warm) 100%);
|
||
border-radius: 20px; padding: 36px 32px 32px; margin-bottom: 24px;
|
||
border: 1px solid var(--border); position: relative; overflow: hidden;
|
||
box-shadow: 0 2px 8px var(--shadow-soft), 0 8px 32px var(--shadow-card);
|
||
}
|
||
.course-hero::before { content: ''; position: absolute; top: -60px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 93, 76, 0.08) 0%, transparent 70%); }
|
||
.course-hero::after { content: ''; position: absolute; bottom: -40px; left: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 168, 74, 0.06) 0%, transparent 70%); }
|
||
|
||
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%); color: white; font-size: 0.75em; font-weight: 600; padding: 6px 16px; border-radius: 20px; margin-bottom: 16px; position: relative; z-index: 1; letter-spacing: 0.5px; }
|
||
.hero-title { font-family: 'Noto Serif SC', serif; font-size: 2.2em; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 8px; position: relative; z-index: 1; letter-spacing: 2px; }
|
||
.hero-subtitle { font-size: 0.95em; color: var(--ink-soft); margin-bottom: 20px; position: relative; z-index: 1; }
|
||
.hero-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--coral), var(--amber)); border-radius: 2px; margin-bottom: 20px; position: relative; z-index: 1; }
|
||
.hero-info { display: flex; flex-wrap: wrap; gap: 16px; position: relative; z-index: 1; }
|
||
.hero-info-item { display: flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--ink-soft); }
|
||
.hero-info-item .icon { font-size: 1.1em; }
|
||
|
||
.goals-section { background: var(--cream); border-radius: 16px; padding: 24px; margin-bottom: 28px; border: 1px solid var(--border); box-shadow: 0 2px 12px var(--shadow-soft); }
|
||
.goals-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
|
||
.goals-title { font-family: 'Noto Serif SC', serif; font-size: 1em; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
|
||
.goals-title .title-icon { font-size: 1.2em; }
|
||
.goals-toggle { font-size: 0.78em; color: var(--ink-soft); cursor: pointer; background: var(--paper-warm); border: 1px solid var(--border); font-family: inherit; padding: 5px 12px; border-radius: 8px; transition: all 0.2s ease; }
|
||
.goals-toggle:hover { background: var(--coral); color: white; border-color: var(--coral); }
|
||
.goals-list { list-style: none; display: block; }
|
||
.goals-list.collapsed { display: none; }
|
||
.goals-list li { padding: 12px 16px; background: var(--paper); border-radius: 10px; margin-bottom: 10px; font-size: 0.9em; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 12px; border-left: 3px solid transparent; transition: all 0.2s ease; }
|
||
.goals-list li:hover { border-left-color: var(--coral); background: var(--cream); transform: translateX(4px); }
|
||
.goals-list li:last-child { margin-bottom: 0; }
|
||
.goal-num { background: linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%); color: white; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.78em; font-weight: 600; flex-shrink: 0; margin-top: 1px; }
|
||
.goal-text { flex: 1; line-height: 1.6; }
|
||
|
||
.cards-slider-wrapper { position: relative; border-radius: 16px; margin-bottom: 20px; overflow: hidden; }
|
||
.cards-slider { position: relative; min-height: 300px; }
|
||
|
||
.student-card {
|
||
background: var(--cream); border-radius: 16px; border: 1px solid var(--border);
|
||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
position: absolute; width: 100%; top: 0; left: 0;
|
||
opacity: 0; transform: translateX(60px) scale(0.96); pointer-events: none;
|
||
box-shadow: 0 4px 20px var(--shadow-card);
|
||
}
|
||
.student-card.active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; position: relative; }
|
||
.student-card.prev { transform: translateX(-60px) scale(0.96); opacity: 0; }
|
||
.student-card:hover { box-shadow: 0 8px 32px var(--shadow-medium); }
|
||
|
||
.card-header { padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(250, 246, 241, 0.5) 0%, rgba(245, 239, 232, 0.5) 100%); border-radius: 16px 16px 0 0; }
|
||
.student-name { font-family: 'Noto Serif SC', serif; font-size: 1.15em; font-weight: 600; color: var(--ink); letter-spacing: 1px; }
|
||
.card-badge { font-size: 0.75em; padding: 5px 12px; border-radius: 20px; font-weight: 500; }
|
||
.badge-normal { background: #e8f5e9; color: #2e7d32; }
|
||
.badge-makeup { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); color: #e65100; }
|
||
.badge-absent { background: #fce4ec; color: #c2185b; }
|
||
|
||
.card-body { padding: 24px; }
|
||
.feedback-content { font-size: 0.92em; line-height: 2; color: var(--ink-soft); margin-bottom: 20px; }
|
||
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||
.metric-item { padding: 14px; background: var(--paper); border-radius: 10px; border: 1px solid transparent; transition: all 0.2s ease; }
|
||
.metric-item:hover { border-color: var(--border); background: var(--cream); }
|
||
.metric-label { font-size: 0.72em; color: #999; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.metric-value { font-size: 0.88em; font-weight: 500; color: var(--ink); }
|
||
.metric-stars { color: var(--amber); letter-spacing: 1px; }
|
||
|
||
.star-rating { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
|
||
.star-rating .star { font-size: 1.3em; color: #ddd5cc; cursor: default; transition: all 0.15s ease; user-select: none; line-height: 1; }
|
||
.star-rating .star.filled { color: var(--amber); }
|
||
.star-score { font-size: 0.78em; color: var(--ink-soft); margin-left: 6px; font-weight: 500; min-width: 28px; }
|
||
.metric-comment { margin-top: 8px; padding: 8px 10px; background: var(--paper); border-radius: 8px; font-size: 0.82em; color: var(--ink-soft); line-height: 1.5; border: 1px solid transparent; min-height: 32px; }
|
||
|
||
.side-nav-btn {
|
||
position: fixed; top: 50%; transform: translateY(-50%); z-index: 90;
|
||
width: 52px; height: 80px; border: none;
|
||
background: rgba(250, 246, 241, 0.85); backdrop-filter: blur(12px);
|
||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.4em; color: var(--ink-soft); transition: all 0.3s ease;
|
||
box-shadow: 0 4px 16px var(--shadow-medium);
|
||
}
|
||
.side-nav-btn:hover:not(:disabled) { background: var(--cream); color: var(--coral); width: 60px; box-shadow: 0 6px 24px rgba(232, 93, 76, 0.15); }
|
||
.side-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
|
||
.side-nav-btn.prev-btn { left: 0; border-radius: 0 12px 12px 0; border-right: 1px solid var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-right: 4px; }
|
||
.side-nav-btn.next-btn { right: 0; border-radius: 12px 0 0 12px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-left: 4px; }
|
||
.side-nav-btn .arrow { transition: transform 0.3s ease; }
|
||
.side-nav-btn:hover .arrow.prev-arrow { transform: translateX(-3px); }
|
||
.side-nav-btn:hover .arrow.next-arrow { transform: translateX(3px); }
|
||
|
||
.nav-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 16px; }
|
||
.page-indicator { font-family: 'Noto Serif SC', serif; font-size: 0.95em; color: var(--ink-soft); font-weight: 500; min-width: 70px; text-align: center; letter-spacing: 1px; }
|
||
|
||
.progress-dots { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
|
||
.progress-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all 0.3s ease; position: relative; }
|
||
.progress-dot.active { background: var(--coral); width: 28px; border-radius: 4px; }
|
||
.progress-dot:hover:not(.active) { background: var(--coral-light); transform: scale(1.3); }
|
||
|
||
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: white; padding: 12px 28px; border-radius: 10px; font-size: 0.85em; opacity: 0; transition: all 0.3s ease; pointer-events: none; z-index: 200; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
|
||
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
|
||
.footer { text-align: center; padding: 36px 20px; color: #bbb; font-size: 0.78em; font-family: 'Noto Serif SC', serif; letter-spacing: 1px; }
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-title { font-size: 1.7em; }
|
||
.side-nav-btn { width: 40px; height: 60px; font-size: 1.1em; }
|
||
.main { padding: 20px 16px 160px; }
|
||
.course-hero { padding: 28px 20px 24px; }
|
||
}
|
||
</style>
|
||
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- ========== 顶栏 ========== -->
|
||
<div class="topbar">
|
||
<div>
|
||
<div class="topbar-title">{{第N周}} · {{班级简称}}班课评</div>
|
||
<div class="topbar-meta">{{日期中文}} · 《{{课程名称}}》 · {{老师}}老师</div>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<button class="btn btn-outline" onclick="exportText()">📋 导出</button>
|
||
<button class="btn btn-success" id="screenshotBtn" onclick="downloadAllScreenshots()">📸 全部下载</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== 左右切换按钮 ========== -->
|
||
<button class="side-nav-btn prev-btn" id="sidePrevBtn" onclick="prevCard()" title="上一张"><span class="arrow prev-arrow">‹</span></button>
|
||
<button class="side-nav-btn next-btn" id="sideNextBtn" onclick="nextCard()" title="下一张"><span class="arrow next-arrow">›</span></button>
|
||
|
||
<!-- ========== 主内容区 ========== -->
|
||
<div class="main">
|
||
<!-- 课程头部 -->
|
||
<div class="course-hero">
|
||
<div class="hero-badge">📚 本周课程</div>
|
||
<h1 class="hero-title">《{{课程名称}}》</h1>
|
||
<p class="hero-subtitle">{{课程副标题}} · 第{{课次}}课</p>
|
||
<div class="hero-divider"></div>
|
||
<div class="hero-info">
|
||
<div class="hero-info-item"><span class="icon">📅</span><span>{{日期中文}}</span></div>
|
||
<div class="hero-info-item"><span class="icon">⏰</span><span>{{上课时间}}</span></div>
|
||
<div class="hero-info-item"><span class="icon">👩🏫</span><span>{{老师}}老师</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 知识点 -->
|
||
<div class="goals-section">
|
||
<div class="goals-header">
|
||
<span class="goals-title"><span class="title-icon">🎯</span>本周知识点</span>
|
||
<button class="goals-toggle" onclick="toggleGoals()">收起</button>
|
||
</div>
|
||
<ul class="goals-list" id="goalsList">
|
||
{{知识点列表}}
|
||
<!-- 示例格式：
|
||
<li><span class="goal-num">1</span><span class="goal-text">知识点内容</span></li>
|
||
-->
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 学生卡片区（由 JS 动态生成） -->
|
||
<div class="cards-slider-wrapper">
|
||
<div class="cards-slider" id="cardsSlider"></div>
|
||
</div>
|
||
|
||
<!-- 页码指示器 -->
|
||
<div class="nav-controls"><span class="page-indicator" id="pageIndicator"></span></div>
|
||
<div class="progress-dots" id="progressDots"></div>
|
||
|
||
<div class="footer">{{底部文案}}</div>
|
||
</div>
|
||
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<script>
|
||
// ============================================================
|
||
// 📝 配置区：填写以下数据即可生成课评网页
|
||
// ============================================================
|
||
|
||
// 页面元信息
|
||
var PAGE = {
|
||
weekLabel: '{{第N周}}', // 如 "第17周"
|
||
classShort: '{{班级简称}}', // 如 "K4"
|
||
courseName: '{{课程名称}}', // 如 "成语接龙"
|
||
courseSubtitle: '{{课程副标题}}', // 如 "列表 · 插入与查找元素"
|
||
lessonNum: '{{课次}}', // 如 "17"
|
||
dateCN: '{{日期中文}}', // 如 "2026年6月26日"
|
||
dateISO: '{{日期ISO}}', // 如 "2026-06-26"
|
||
timeSlot: '{{上课时间}}', // 如 "周五 19:00-20:30"
|
||
teacher: '{{老师}}', // 如 "橙子"
|
||
footerText: '{{底部文案}}' // 如 "穹狼科创 · K4班 · 橙子老师"
|
||
};
|
||
|
||
// 知识点列表（数组，每项一条）
|
||
var GOALS = [
|
||
// 示例：
|
||
// '理解词语接龙的游戏规则：下一个词的首字必须等于上一个词的末字',
|
||
// '学习使用变量"旧词语"和列表"词语表"存储和管理接龙数据',
|
||
];
|
||
|
||
// 学生数据（数组，每项一个学生）
|
||
// badge: 'normal' | 'makeup' | 'absent'
|
||
// metrics: [{ label, score(1-5), comment }, ...]
|
||
var STUDENTS = [
|
||
// 示例：
|
||
// {
|
||
// name: '陈圆振',
|
||
// badge: 'normal',
|
||
// badgeText: '正常上课',
|
||
// feedback: '圆振这节课表现很积极～...',
|
||
// metrics: [
|
||
// { label: '课堂互动', score: 5, comment: '积极回答问题' },
|
||
// { label: '知识理解', score: 5, comment: '理解透彻' },
|
||
// ]
|
||
// },
|
||
];
|
||
|
||
// 截图下载的文件名格式：{姓名}-第{课次}课{课程名称}.png
|
||
function getScreenshotFilename(studentName) {
|
||
return studentName + '-第' + PAGE.lessonNum + '课' + PAGE.courseName + '.png';
|
||
}
|
||
|
||
// ============================================================
|
||
// 🔧 以下为渲染引擎，一般无需修改
|
||
// ============================================================
|
||
|
||
var totalCards = STUDENTS.length;
|
||
var currentCard = 0;
|
||
|
||
// 渲染知识点
|
||
(function renderGoals() {
|
||
var html = '';
|
||
GOALS.forEach(function(g, i) {
|
||
html += '<li><span class="goal-num">' + (i + 1) + '</span><span class="goal-text">' + g + '</span></li>';
|
||
});
|
||
document.getElementById('goalsList').innerHTML = html;
|
||
})();
|
||
|
||
// 渲染学生卡片
|
||
(function renderCards() {
|
||
var badgeClassMap = { normal: 'badge-normal', makeup: 'badge-makeup', absent: 'badge-absent' };
|
||
var scoreLabels = ['未评', '需加强', '合格', '良好', '优秀', '超棒'];
|
||
var cardsHtml = '';
|
||
STUDENTS.forEach(function(s, idx) {
|
||
var isActive = idx === 0 ? ' active' : '';
|
||
cardsHtml += '<div class="student-card' + isActive + '" data-index="' + idx + '">';
|
||
cardsHtml += '<div class="card-header"><span class="student-name">' + s.name + '</span><span class="card-badge ' + (badgeClassMap[s.badge] || 'badge-normal') + '">' + s.badgeText + '</span></div>';
|
||
cardsHtml += '<div class="card-body">';
|
||
cardsHtml += '<div class="feedback-content" data-student="' + s.name + '">' + s.feedback + '</div>';
|
||
cardsHtml += '<div class="metrics">';
|
||
s.metrics.forEach(function(m) {
|
||
var starsHtml = '';
|
||
for (var si = 1; si <= 5; si++) {
|
||
starsHtml += '<span class="star' + (si <= m.score ? ' filled' : '') + '" data-val="' + si + '">★</span>';
|
||
}
|
||
cardsHtml += '<div class="metric-item" data-metric="' + m.label + '">';
|
||
cardsHtml += '<div class="metric-label">' + m.label + '</div>';
|
||
cardsHtml += '<div class="star-rating" data-score="' + m.score + '">' + starsHtml + '<span class="star-score">' + (scoreLabels[m.score] || '未评') + '</span></div>';
|
||
cardsHtml += '<div class="metric-comment" data-metric-comment="' + m.label + '">' + m.comment + '</div>';
|
||
cardsHtml += '</div>';
|
||
});
|
||
cardsHtml += '</div></div></div>';
|
||
});
|
||
document.getElementById('cardsSlider').innerHTML = cardsHtml;
|
||
})();
|
||
|
||
// 渲染进度点
|
||
(function renderDots() {
|
||
var dotsHtml = '';
|
||
for (var i = 0; i < totalCards; i++) {
|
||
dotsHtml += '<div class="progress-dot' + (i === 0 ? ' active' : '') + '" onclick="goToCard(' + i + ')"></div>';
|
||
}
|
||
document.getElementById('progressDots').innerHTML = dotsHtml;
|
||
document.getElementById('pageIndicator').textContent = '1 / ' + totalCards;
|
||
})();
|
||
|
||
// 卡片切换
|
||
var allCards, sidePrevBtn, sideNextBtn, pageIndicatorEl, progressDots;
|
||
|
||
function initSliderRefs() {
|
||
allCards = document.querySelectorAll('.student-card');
|
||
sidePrevBtn = document.getElementById('sidePrevBtn');
|
||
sideNextBtn = document.getElementById('sideNextBtn');
|
||
pageIndicatorEl = document.getElementById('pageIndicator');
|
||
progressDots = document.querySelectorAll('.progress-dot');
|
||
updateSlider();
|
||
}
|
||
|
||
function updateSlider() {
|
||
if (!allCards) return;
|
||
allCards.forEach(function(card, i) {
|
||
card.classList.remove('active', 'prev');
|
||
if (i === currentCard) card.classList.add('active');
|
||
else if (i < currentCard) card.classList.add('prev');
|
||
});
|
||
if (pageIndicatorEl) pageIndicatorEl.textContent = (currentCard + 1) + ' / ' + totalCards;
|
||
if (sidePrevBtn) sidePrevBtn.disabled = currentCard === 0;
|
||
if (sideNextBtn) sideNextBtn.disabled = currentCard === totalCards - 1;
|
||
if (progressDots) progressDots.forEach(function(dot, i) { dot.classList.toggle('active', i === currentCard); });
|
||
}
|
||
|
||
function nextCard() { if (currentCard < totalCards - 1) { currentCard++; updateSlider(); } }
|
||
function prevCard() { if (currentCard > 0) { currentCard--; updateSlider(); } }
|
||
function goToCard(i) { currentCard = i; updateSlider(); }
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'ArrowLeft') prevCard();
|
||
if (e.key === 'ArrowRight') nextCard();
|
||
});
|
||
|
||
var touchStartX = 0;
|
||
document.getElementById('cardsSlider').addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; });
|
||
document.getElementById('cardsSlider').addEventListener('touchend', function(e) {
|
||
var dx = e.changedTouches[0].screenX;
|
||
if (touchStartX - dx > 50) nextCard();
|
||
if (dx - touchStartX > 50) prevCard();
|
||
});
|
||
|
||
initSliderRefs();
|
||
|
||
// 知识点展开/收起
|
||
function toggleGoals() {
|
||
var list = document.getElementById('goalsList');
|
||
var btn = document.querySelector('.goals-toggle');
|
||
list.classList.toggle('collapsed');
|
||
btn.textContent = list.classList.contains('collapsed') ? '展开' : '收起';
|
||
}
|
||
|
||
// Toast 提示
|
||
function showToast(msg) {
|
||
var toast = document.getElementById('toast');
|
||
toast.textContent = msg;
|
||
toast.classList.add('show');
|
||
setTimeout(function() { toast.classList.remove('show'); }, 2000);
|
||
}
|
||
|
||
// 导出文本
|
||
function exportText() {
|
||
var sep = '═══════════════════════════════════════';
|
||
var text = PAGE.weekLabel + PAGE.classShort + '班课评\n';
|
||
text += PAGE.dateCN + ' · 《' + PAGE.courseName + '》 · ' + PAGE.teacher + '老师\n';
|
||
text += sep + '\n\n';
|
||
text += '🎯 本周知识点\n';
|
||
text += '─────────────────────────────────────\n';
|
||
GOALS.forEach(function(g, i) { text += (i + 1) + '. ' + g + '\n'; });
|
||
text += '\n' + sep + '\n\n';
|
||
|
||
STUDENTS.forEach(function(s) {
|
||
text += '【' + s.name + '】' + s.badgeText + '\n';
|
||
text += '─────────────────────────────────\n';
|
||
text += s.feedback + '\n\n';
|
||
});
|
||
|
||
navigator.clipboard.writeText(text).then(function() {
|
||
showToast('✓ 已复制到剪贴板，可直接粘贴发送');
|
||
}).catch(function() {
|
||
var ta = document.createElement('textarea');
|
||
ta.value = text; document.body.appendChild(ta); ta.select();
|
||
document.execCommand('copy'); document.body.removeChild(ta);
|
||
showToast('✓ 已复制到剪贴板');
|
||
});
|
||
}
|
||
|
||
// 📸 批量截图下载
|
||
function downloadAllScreenshots() {
|
||
var btn = document.getElementById('screenshotBtn');
|
||
var originalText = btn.textContent;
|
||
btn.disabled = true;
|
||
btn.textContent = '⏳ 截图准备中...';
|
||
|
||
var savedCard = currentCard;
|
||
var goalsEl = document.getElementById('goalsList');
|
||
var goalsCollapsed = goalsEl.classList.contains('collapsed');
|
||
var sidePrev = document.getElementById('sidePrevBtn');
|
||
var sideNext = document.getElementById('sideNextBtn');
|
||
var mainEl = document.querySelector('.main');
|
||
|
||
if (goalsCollapsed) goalsEl.classList.remove('collapsed');
|
||
|
||
function captureOne(i) {
|
||
if (i >= totalCards) {
|
||
goToCard(savedCard);
|
||
if (goalsCollapsed) goalsEl.classList.add('collapsed');
|
||
btn.disabled = false;
|
||
btn.textContent = originalText;
|
||
sidePrev.style.display = '';
|
||
sideNext.style.display = '';
|
||
mainEl.style.paddingBottom = '';
|
||
showToast('✓ ' + totalCards + '张截图已下载');
|
||
return;
|
||
}
|
||
|
||
btn.textContent = '⏳ 截图 ' + (i + 1) + '/' + totalCards;
|
||
goToCard(i);
|
||
sidePrev.style.display = 'none';
|
||
sideNext.style.display = 'none';
|
||
mainEl.style.paddingBottom = '40px';
|
||
|
||
setTimeout(function() {
|
||
html2canvas(mainEl, {
|
||
backgroundColor: '#faf6f1',
|
||
scale: 2,
|
||
useCORS: true
|
||
}).then(function(canvas) {
|
||
var link = document.createElement('a');
|
||
link.download = getScreenshotFilename(STUDENTS[i].name);
|
||
link.href = canvas.toDataURL('image/png');
|
||
link.click();
|
||
captureOne(i + 1);
|
||
}).catch(function() {
|
||
captureOne(i + 1);
|
||
});
|
||
}, 450);
|
||
}
|
||
|
||
captureOne(0);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|