ClassFeedback/GESP成绩通知-单发家长版.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>GESP考试成绩通知</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px 16px;
  }

  /* 选择器区域（老师用） */
  .selector-bar {
    max-width: 420px;
    margin: 0 auto 20px;
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .selector-bar label {
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: 6px;
  }
  .selector-bar select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    background: white;
    cursor: pointer;
  }

  /* 家长看到的卡片 */
  .card {
    max-width: 420px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  }

  /* 通过版 - 绿色喜庆 */
  .card.pass {
    background: linear-gradient(180deg, #43e97b 0%, #38f9d7 100%);
  }
  /* 未通过版 - 蓝色温柔 */
  .card.fail {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  }

  .card-inner {
    padding: 40px 28px 32px;
    text-align: center;
    color: white;
  }

  .card .icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    backdrop-filter: blur(10px);
  }
  .card .icon-wrap svg {
    width: 40px;
    height: 40px;
    fill: white;
  }
  .card .greeting {
    font-size: 16px;
    opacity: 0.95;
    margin-bottom: 8px;
  }
  .card .student-name {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
  }

  .score-box {
    background: rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 24px 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
  }
  .score-box .score-label {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 6px;
  }
  .score-box .score-num {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
  }
  .score-box .level-tag {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 16px;
    background: rgba(255,255,255,0.3);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
  }

  .card .message {
    font-size: 15px;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 24px;
  }

  .card .footer {
    font-size: 13px;
    opacity: 0.8;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  .card .footer .teacher {
    font-weight: 600;
    margin-bottom: 4px;
  }
</style>
</head>
<body>

<!-- 老师选择学生用 -->
<div class="selector-bar">
  <label>选择学生（选好后截图发给对应家长）</label>
  <select id="studentSelect" onchange="showStudent()">
    <option value="">— 请选择学生 —</option>
  </select>
</div>

<!-- 家长看到的卡片 -->
<div class="card" id="card">
  <div class="card-inner" id="cardInner">
    <div style="color:#999; padding: 60px 20px;">请选择学生查看成绩</div>
  </div>
</div>

<script>
const students = [
  { name: '谢明泓', score: 94, level: '一级', pass: true,
    praise: '太棒了！94分的好成绩，说明你平时的努力都没有白费，继续保持这个状态，未来可期！' },
  { name: '张立坤', score: 83.5, level: '一级', pass: true,
    praise: '恭喜通过！这个分数非常扎实，你的认真和坚持老师都看在眼里，继续加油！' },
  { name: '汪子杰', score: 83.5, level: '一级', pass: true,
    praise: '恭喜通过！成绩很稳，看得出来你对知识点掌握得很扎实，继续保持哦！' },
  { name: '王佳琳', score: 82, level: '一级', pass: true,
    praise: '恭喜通过！你的进步大家有目共睹，继续保持这份热爱，未来会更棒！' },
  { name: '唐钎宸', score: 80, level: '一级', pass: true,
    praise: '恭喜通过！稳稳过线，说明你的学习态度很端正，继续加油，下次争取更高分！' },
  { name: '杨林轩', score: 72, level: '一级', pass: true,
    praise: '恭喜通过！顺利拿下一级，迈出了编程路上的重要一步，继续冲！' },
  { name: '欧俊宇', score: 70, level: '二级', pass: true,
    praise: '恭喜通过二级！成绩非常不错，继续保持这份学习热情，向更高等级冲刺！' },
  { name: '卢华琛', score: 33.5, level: '一级', pass: false,
    praise: '这次考试成绩不太理想，主要是知识点还不够熟练。别灰心，我们接下来针对性加强练习，下次一定能过！老师对你有信心。' },
  { name: '郑子煜', score: 28.5, level: '一级', pass: false,
    praise: '这次考试距离通过还有一段距离，主要是基础知识点还需要巩固。没关系，我们慢慢来，把基础打扎实，下次一定能顺利通过！' }
];

// 填充下拉框
const select = document.getElementById('studentSelect');
students.forEach((s, i) => {
  const opt = document.createElement('option');
  opt.value = i;
  opt.textContent = s.name + '（' + s.score + '分）';
  select.appendChild(opt);
});

function showStudent() {
  const idx = document.getElementById('studentSelect').value;
  const card = document.getElementById('card');
  const inner = document.getElementById('cardInner');

  if (idx === '') {
    card.className = 'card';
    inner.innerHTML = '<div style="color:#999; padding: 60px 20px;">请选择学生查看成绩</div>';
    return;
  }

  const s = students[idx];

  if (s.pass) {
    card.className = 'card pass';
    inner.innerHTML = `
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>
      </div>
      <div class="greeting">恭喜</div>
      <div class="student-name">${s.name}</div>
      <div class="score-box">
        <div class="score-label">本次考试成绩</div>
        <div class="score-num">${s.score}</div>
        <div class="level-tag">${s.level} 已通过</div>
      </div>
      <div class="message">${s.praise}</div>
      <div class="footer">
        <div class="teacher">橙子老师</div>
        <div>穹狼科创 · GESP编程等级考试</div>
      </div>
    `;
  } else {
    card.className = 'card fail';
    inner.innerHTML = `
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
      </div>
      <div class="greeting">致</div>
      <div class="student-name">${s.name}同学</div>
      <div class="score-box">
        <div class="score-label">本次考试成绩</div>
        <div class="score-num">${s.score}</div>
        <div class="level-tag">${s.level} 继续加油</div>
      </div>
      <div class="message">${s.praise}</div>
      <div class="footer">
        <div class="teacher">橙子老师</div>
        <div>穹狼科创 · GESP编程等级考试</div>
      </div>
    `;
  }
}
</script>

</body>
</html>