Files
nct-registration/public/beijiao/index.html

321 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2026 暑假 Kitten 图形化编程等级考试集训 | 北滘校区</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Hero -->
<div class="hero">
<div class="hero-content">
<span class="hero-badge">🎯 2026 暑假集训</span>
<h1>Kitten 图形化编程<br>等级考试集训</h1>
<p class="subtitle">NCT 青少年编程能力等级测试 · 北滘校区</p>
<div class="hero-stats">
<div class="hero-stat">
<div class="num">100%</div>
<div class="label">集训学员通过率</div>
</div>
<div class="hero-stat">
<div class="num">75W+</div>
<div class="label">全国考生累计</div>
</div>
<div class="hero-stat">
<div class="num">8人</div>
<div class="label">小班精品教学</div>
</div>
</div>
</div>
</div>
<!-- 倒计时 -->
<div class="countdown-section">
<div class="countdown-title">距离 NCT 考试还有</div>
<div class="countdown-boxes">
<div class="countdown-box">
<div class="num" id="cd-days">--</div>
<div class="unit"></div>
</div>
<div class="countdown-box">
<div class="num" id="cd-hours">--</div>
<div class="unit"></div>
</div>
<div class="countdown-box">
<div class="num" id="cd-mins">--</div>
<div class="unit"></div>
</div>
<div class="countdown-box">
<div class="num" id="cd-secs">--</div>
<div class="unit"></div>
</div>
</div>
</div>
<!-- NCT 是什么 -->
<div class="section fade-up">
<div class="section-header">
<h2>什么是 NCT</h2>
<p>国内最权威的青少年编程能力等级测试</p>
</div>
<div class="info-grid">
<div class="info-card">
<div class="info-icon orange">🏛️</div>
<div>
<h3>中国软件行业协会主办</h3>
<p>NCT 由<strong>中国软件行业协会</strong>盖章颁发等级证书,是国家民政部认可的首批 AAA 级行业协会,唯一代表中国计算机软件产业界的全国性一级行业组织。</p>
</div>
</div>
<div class="info-card">
<div class="info-icon blue">🌐</div>
<div>
<h3>国内国际双认证</h3>
<p>通过<strong>教育部 CELTSC</strong> 标准符合性认证,同时通过国际教育技术协会 <strong>ISTE</strong> 认证,是国内首家获得 ISTE Seal of Alignment 的编程测评项目。</p>
</div>
</div>
<div class="info-card">
<div class="info-icon purple">🎓</div>
<div>
<h3>联合国教科文组织合作项目</h3>
<p>2021 年成为<strong>联合国教科文组织亚非地区青少年编程教育合作项目</strong>AAYC指定测评服务平台获得国际认可。</p>
</div>
</div>
<div class="info-card">
<div class="info-icon green">👨‍🎓</div>
<div>
<h3>全国超过 75 万考生参与</h3>
<p>覆盖中国 34 个省级行政区、全球 25+ 国家及地区3000+ 所学校和机构参与,新东方、编程猫、童程童美等知名品牌合作。</p>
</div>
</div>
</div>
</div>
<!-- 证书价值 -->
<div class="section fade-up">
<div class="section-header">
<h2>考级证书的价值</h2>
<p>不只是一张证书,更是孩子成长的里程碑</p>
</div>
<div class="value-grid">
<div class="value-card">
<div class="value-emoji">🏅</div>
<h3>权威认证</h3>
<p>中国软件行业协会盖章颁发,含金量高</p>
</div>
<div class="value-card">
<div class="value-emoji">📋</div>
<h3>科技特长</h3>
<p>可作为信息科技特长参考依据,综合素质评价加分</p>
</div>
<div class="value-card">
<div class="value-emoji">🧠</div>
<h3>能力提升</h3>
<p>锻炼逻辑思维、拆题能力与问题解决能力</p>
</div>
<div class="value-card">
<div class="value-emoji">🎯</div>
<h3>阶段目标</h3>
<p>清晰的等级体系,给孩子学习锚定方向与动力</p>
</div>
</div>
</div>
<!-- 考试日期 -->
<div class="section fade-up" style="padding-top: 0;">
<div class="exam-card">
<h3>NCT 考试时间</h3>
<div class="exam-date">2026 年 8 月 22 23 日</div>
<p class="exam-note">具体考试场次 6 月上旬公布</p>
</div>
</div>
<!-- 集训时间安排 -->
<div class="section fade-up">
<div class="section-header">
<h2>集训时间安排</h2>
<p>三期可选,内容一致,根据时间灵活选择</p>
</div>
<div class="period-section">
<span class="period-badge orange">第一期</span>
<h3>7 月集训 · 第一期</h3>
<p class="period-info">2 周 · 周一至周六 · 每周日休息 · 每节课 2.5 小时</p>
<div style="font-size:18px;font-weight:700;color:#1A1A2E;margin:12px 0 8px">7 月 13 日 7 月 25 日</div>
<div class="reg-input-row">
<input class="reg-input" type="text" placeholder="填写孩子姓名" maxlength="20">
<button class="reg-btn orange" onclick="register(this, '第一期7月13日7月25日')">我要报名</button>
</div>
</div>
<div class="period-section">
<span class="period-badge blue">第二期</span>
<h3>78 月集训 · 第二期</h3>
<p class="period-info">2 周 · 周一至周六 · 每周日休息 · 每节课 2.5 小时</p>
<div style="font-size:18px;font-weight:700;color:#1A1A2E;margin:12px 0 8px">7 月 27 日 8 月 8 日</div>
<div class="reg-input-row">
<input class="reg-input" type="text" placeholder="填写孩子姓名" maxlength="20">
<button class="reg-btn blue" onclick="register(this, '第二期7月27日8月8日')">我要报名</button>
</div>
</div>
<div class="period-section">
<span class="period-badge orange">第三期</span>
<h3>8 月集训 · 第三期</h3>
<p class="period-info">2 周 · 周一至周六 · 每周日休息 · 每节课 2.5 小时</p>
<div style="font-size:18px;font-weight:700;color:#1A1A2E;margin:12px 0 8px">8 月 10 日 8 月 22 日</div>
<div class="reg-input-row">
<input class="reg-input" type="text" placeholder="填写孩子姓名" maxlength="20">
<button class="reg-btn orange" onclick="register(this, '第三期8月10日8月22日')">我要报名</button>
</div>
</div>
<div class="highlight-strip">
<p>💡 三期集训内容完全一致,家长可根据孩子时间安排自由选择。每周日休息。<br>填写孩子姓名后点击<strong>「我要报名」</strong>即可提交,老师会主动联系您确认。</p>
</div>
</div>
<!-- 报名门槛 -->
<div class="section fade-up" style="padding-top: 0;">
<div class="section-header">
<h2>报名条件</h2>
</div>
<div class="info-grid">
<div class="info-card">
<div class="info-icon orange">📐</div>
<div>
<h3>K2 阶段学员</h3>
<p>报考 <strong>NCT 一级</strong>,夯实基础,建立信心</p>
</div>
</div>
<div class="info-card">
<div class="info-icon blue">🔬</div>
<div>
<h3>K4 阶段学员</h3>
<p>报考 <strong>NCT 二级</strong>,挑战进阶,证明实力</p>
</div>
</div>
</div>
<div class="highlight-strip" style="margin-top: 16px;">
<p>📌 未考过一级的学生需先考一级,不可跳级。所有在读 Kitten 学员均可报名。</p>
</div>
</div>
<!-- 费用说明 -->
<div class="section fade-up" style="padding-top: 0;">
<div class="section-header">
<h2>费用说明</h2>
</div>
<div class="fee-table">
<div class="fee-row">
<div class="fee-label">📝 NCT 官方报名费</div>
<div class="fee-value">300 元 / 人</div>
</div>
<div class="fee-row">
<div class="fee-label">🎒 集训费用</div>
<div class="fee-value">正常课时扣费</div>
</div>
<div class="fee-row">
<div class="fee-label">⏱️ 课时规则</div>
<div class="fee-value">每节扣 2 课时</div>
</div>
</div>
<div class="highlight-strip" style="margin-top: 16px;">
<p>🏆 <strong>奖学金激励:</strong>成绩优异的学员可获得校区颁发的奖学金,既是荣誉也是激励!</p>
</div>
</div>
<!-- 常见问题 -->
<div class="section fade-up" style="padding-top: 0;">
<div class="section-header">
<h2>常见问题</h2>
</div>
<div class="faq-item">
<div class="faq-q">
<span>孩子零基础可以参加吗?</span>
<span class="arrow"></span>
</div>
<div class="faq-a">
集训面向在读 Kitten 学员。K2 阶段报一级、K4 阶段报二级,难度与孩子当前学习进度匹配,老师全程指导,可以放心参加。
</div>
</div>
<div class="faq-item">
<div class="faq-q">
<span>考试形式是什么样的?</span>
<span class="arrow"></span>
</div>
<div class="faq-a">
NCT 采用线上考试形式支持居家和线下考点在线考试。AI 智能监考系统保证考试公正、专业,足不出户即可参加。
</div>
</div>
<div class="faq-item">
<div class="faq-q">
<span>集训会不会影响暑假出行?</span>
<span class="arrow"></span>
</div>
<div class="faq-a">
集训每期内容一样,选一期参加即可。每周日休息,三期覆盖整个暑假,合理安排完全不会影响家庭出行计划。
</div>
</div>
<div class="faq-item">
<div class="faq-q">
<span>通过率怎么样?</span>
<span class="arrow"></span>
</div>
<div class="faq-a">
参加集训的学员通过率基本达到 <strong>100%</strong>。集训内容紧扣考级知识点,系统刷题 + 模拟实操,帮助孩子充分准备。
</div>
</div>
<div class="faq-item">
<div class="faq-q">
<span>证书长什么样?有含金量吗?</span>
<span class="arrow"></span>
</div>
<div class="faq-a">
新版证书采用 PU 皮革材质、烫金凹印技术、圆角裁剪工艺,精美大气。由中国软件行业协会盖章颁发,通过顺丰快递寄送。该证书通过教育部 CELTSC 标准认证和国际 ISTE 认证,是目前国内外双认证的权威编程等级证书。
</div>
</div>
</div>
<!-- 报名入口 -->
<div class="cta-section">
<div class="cta-box">
<h2>🚀 暑假集训,助孩子高效拿证</h2>
<p>小班精品教学 · 系统备考方案 · 权威等级证书<br>名额有限,每班仅限 8 人,先到先得!</p>
<a href="#" class="cta-btn" onclick="showToast('请往上滑,填写孩子姓名\n并点击「我要报名」提交', 3000); return false;">立即咨询报名</a>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<p>穹狼科创 · 北滘校区 · 2026 年暑假</p>
<p style="margin-top: 6px;">NCT 青少年编程能力等级测试</p>
</div>
<!-- Toast 提示 -->
<div class="toast" id="toast"></div>
<!-- 报名确认弹窗 -->
<div class="modal-overlay" id="regModal">
<div class="modal">
<h3>确认报名</h3>
<div class="modal-period" id="modalPeriod"></div>
<input class="modal-input" id="modalName" type="text" placeholder="请输入孩子姓名" maxlength="20" style="margin-bottom:10px">
<select class="modal-select" id="modalTeacher" onchange="this.classList.toggle('has-value', this.value)">
<option value="" disabled selected>选择负责老师</option>
<option value="东东老师">东东老师</option>
<option value="橙子老师">橙子老师</option>
<option value="福福老师">福福老师</option>
<option value="坦克老师">坦克老师</option>
<option value="菠萝老师">菠萝老师</option>
</select>
<button class="modal-submit" id="modalSubmit" onclick="submitReg()">确认提交</button>
<br>
<button class="modal-cancel" onclick="closeModal()">取消</button>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>