网站概述
这是一个“活动报名落地页”前端模板，具备科技感与商务正式的视觉风格，覆盖从课程介绍、讲师团队、价格方案、报名表单到FAQ的完整信息架构。页面包含首屏倒计时与CTA、信息卡片展示、价格卡与对比表、FAQ手风琴、学员评价滑块、滚动触发动画与数字递增、移动端粘性底部CTA、主题色配置、分享按钮、返回顶部、轻量统计埋点占位与Cookie提示，同时具备基础SEO与开放图设置。代码采用语义化HTML5、CSS3（Flex/Grid）、原生JavaScript交互，无需外部依赖，即可本地运行。
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>科技与商务 · 高阶课程活动报名 | 企业增长与产品创新</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="面向企业与产品从业者的高阶课程活动，聚焦增长战略、数据驱动与产品创新。立即报名，席位有限。" />
<meta name="keywords" content="活动报名, 企业培训, 产品创新, 增长战略, 科技课程" />
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://example.com/activity" />
<!-- Open Graph -->
<meta property="og:title" content="科技与商务 · 高阶课程活动报名" />
<meta property="og:description" content="面向企业与产品从业者的高阶课程活动，聚焦增长战略、数据驱动与产品创新。立即报名，席位有限。" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/activity" />
<meta property="og:image" content="assets/og-image.png" />
<meta name="theme-color" content="#2b7cff" />
<link rel="stylesheet" href="styles.css" />
<script src="main.js" defer></script>
</head>
<body>
<a class="skip-link" href="#main">跳到主要内容</a>
<header class="site-header" role="banner">
<div class="container header-inner">
<a href="#" class="logo" aria-label="主页">
<span class="logo-mark" aria-hidden="true">▲</span>
<span class="logo-text">TechBiz Academy</span>
</a>
<nav class="site-nav" aria-label="主导航">
<ul>
<li><a href="#about">课程介绍</a></li>
<li><a href="#instructors">讲师团队</a></li>
<li><a href="#pricing">价格方案</a></li>
<li><a href="#faq">常见问题</a></li>
<li><a class="btn nav-cta" href="#signup" data-track="nav_cta">报名</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="btn outline small" id="shareBtn" aria-label="分享页面" data-track="share_click">分享</button>
<button id="toggleTheme" class="icon-btn" aria-label="切换主题色" title="主题色">
🎨
</button>
</div>
</div>
</header>
<main id="main">
<!-- Hero -->
<section class="hero" id="hero" data-event-date="2025-12-31T09:00:00+08:00" data-animate>
<div class="container hero-inner">
<div class="hero-content">
<h1>科技与商务 · 高阶课程活动</h1>
<p class="subtitle">聚焦企业增长与产品创新，数据驱动决策，实战案例拆解。</p>
<div class="countdown" aria-label="活动倒计时">
<div class="cd-item"><span class="num" id="cdDays">00</span><span class="label">天</span></div>
<div class="cd-item"><span class="num" id="cdHours">00</span><span class="label">时</span></div>
<div class="cd-item"><span class="num" id="cdMinutes">00</span><span class="label">分</span></div>
<div class="cd-item"><span class="num" id="cdSeconds">00</span><span class="label">秒</span></div>
</div>
<div class="hero-cta">
<a href="#signup" class="btn primary large" data-track="hero_cta">立即报名</a>
<a href="#about" class="btn ghost large">了解课程</a>
</div>
<ul class="hero-highlights">
<li><span class="dot"></span> 实战框架与落地工具</li>
<li><span class="dot"></span> 数据分析驱动增长</li>
<li><span class="dot"></span> 企业级最佳实践</li>
</ul>
</div>
</div>
<div class="hero-bg" aria-hidden="true"></div>
</section>
<!-- Highlights & Info -->
<section class="section" id="about" data-animate>
<div class="container">
<h2>课程亮点与活动信息</h2>
<div class="grid highlights">
<article class="card">
<h3>模块化课程</h3>
<p>从战略到执行，模块化教学，适配不同岗位与行业场景。</p>
</article>
<article class="card">
<h3>案例拆解</h3>
<p>精选互联网与传统企业成功案例，提供可复制打法。</p>
</article>
<article class="card">
<h3>工具与模板</h3>
<p>提供数据看板、实验设计、增长策略模板，助力快速上手。</p>
</article>
<article class="card info-card">
<h3>时间与地点</h3>
<ul class="info-list">
<li>时间：2025年12月31日 09:00-17:30</li>
<li>地点：上海 · 张江高科路演中心</li>
<li>形式：线下+线上直播</li>
</ul>
</article>
</div>
<div class="metrics">
<div class="metric" data-count-to="500"> <span class="value">0</span><span class="label">+ 已报名</span></div>
<div class="metric" data-count-to="120"> <span class="value">0</span><span class="label">+ 企业合作</span></div>
<div class="metric" data-count-to="98"> <span class="value">0</span><span class="label">% 满意度</span></div>
</div>
</div>
</section>
<!-- Instructors -->
<section class="section" id="instructors" data-animate>
<div class="container">
<h2>讲师团队</h2>
<div class="grid instructors">
<article class="card instructor">
<div class="avatar" aria-hidden="true">A</div>
<div>
<h3>张涵 · 增长负责人</h3>
<p>前某独角兽公司增长总监，擅长实验设计与留存优化。</p>
</div>
</article>
<article class="card instructor">
<div class="avatar" aria-hidden="true">B</div>
<div>
<h3>李然 · 数据科学家</h3>
<p>10年数据建模经验，专注因果推断与A/B测试。</p>
</div>
</article>
<article class="card instructor">
<div class="avatar" aria-hidden="true">C</div>
<div>
<h3>王珂 · 产品专家</h3>
<p>曾任多款爆品PM，关注用户体验与商业化平衡。</p>
</div>
</article>
</div>
</div>
</section>
<!-- Pricing -->
<section class="section" id="pricing" data-animate>
<div class="container">
<h2>价格方案</h2>
<div class="pricing-cards">
<article class="price-card">
<h3>基础票</h3>
<div class="price"><span class="currency">¥</span>999</div>
<ul class="features">
<li>线下入场或线上观看（二选一）</li>
<li>课程资料打包</li>
</ul>
<a class="btn outline" href="#signup" data-select-course="基础票">选择基础票</a>
</article>
<article class="price-card featured">
<h3>专业票</h3>
<div class="price"><span class="currency">¥</span>1999</div>
<ul class="features">
<li>线下入场+线上观看</li>
<li>讲师答疑与作业点评</li>
<li>企业实战案例库</li>
</ul>
<a class="btn primary" href="#signup" data-select-course="专业票">选择专业票</a>
</article>
<article class="price-card">
<h3>VIP票</h3>
<div class="price"><span class="currency">¥</span>3999</div>
<ul class="features">
<li>优先前排座位</li>
<li>闭门圆桌 & 人脉交流</li>
<li>一对一策略咨询（30min）</li>
</ul>
<a class="btn outline" href="#signup" data-select-course="VIP票">选择VIP票</a>
</article>
</div>
<div class="table-wrap">
<table class="compare" aria-label="方案对比表">
<thead>
<tr>
<th>功能</th>
<th>基础票</th>
<th>专业票</th>
<th>VIP票</th>
</tr>
</thead>
<tbody>
<tr>
<td>线下入场</td><td>✔️</td><td>✔️</td><td>✔️</td>
</tr>
<tr>
<td>线上观看</td><td>✔️</td><td>✔️</td><td>✔️</td>
</tr>
<tr>
<td>资料打包</td><td>✔️</td><td>✔️</td><td>✔️</td>
</tr>
<tr>
<td>讲师答疑</td><td>—</td><td>✔️</td><td>✔️</td>
</tr>
<tr>
<td>案例库</td><td>—</td><td>✔️</td><td>✔️</td>
</tr>
<tr>
<td>圆桌交流</td><td>—</td><td>—</td><td>✔️</td>
</tr>
<tr>
<td>策略咨询</td><td>—</td><td>—</td><td>✔️</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Signup -->
<section class="section" id="signup" data-animate>
<div class="container">
<h2>报名表单</h2>
<form id="signupForm" novalidate>
<div class="form-grid">
<div class="form-field">
<label for="name">姓名</label>
<input type="text" id="name" name="name" required maxlength="30" placeholder="请输入姓名" />
<small class="error" id="nameError" aria-live="polite"></small>
</div>
<div class="form-field">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required placeholder="name@example.com" />
<small class="error" id="emailError" aria-live="polite"></small>
</div>
<div class="form-field">
<label for="phone">手机号</label>
<input type="tel" id="phone" name="phone" required inputmode="numeric" placeholder="11位手机号" />
<small class="error" id="phoneError" aria-live="polite"></small>
</div>
<div class="form-field">
<label for="course">课程选择</label>
<select id="course" name="course" required>
<option value="">请选择</option>
<option>基础票</option>
<option selected>专业票</option>
<option>VIP票</option>
</select>
<small class="error" id="courseError" aria-live="polite"></small>
</div>
<div class="form-field full">
<label class="checkbox">
<input type="checkbox" id="agree" name="agree" required />
<span>我已阅读并同意 <button type="button" class="link" id="openTerms">《报名条款》</button></span>
</label>
<small class="error" id="agreeError" aria-live="polite"></small>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn primary" data-track="form_submit">提交报名</button>
<p class="form-tip">提交后将收到邮件确认，请及时查收。</p>
</div>
<div class="form-status" role="status" aria-live="polite" id="formStatus"></div>
</form>
<dialog id="termsDialog" aria-labelledby="termsTitle">
<h3 id="termsTitle">报名条款（示例）</h3>
<div class="dialog-body">
<p>本活动为示例页面，条款内容请根据实际情况补充。报名信息仅用于活动通知与服务提供，不作其他用途。</p>
</div>
<div class="dialog-actions">
<button class="btn" id="closeTerms">关闭</button>
</div>
</dialog>
</div>
</section>
<!-- Testimonials Slider -->
<section class="section" id="testimonials" data-animate>
<div class="container">
<h2>学员评价</h2>
<div class="slider" aria-roledescription="carousel" aria-label="学员评价滑块">
<div class="slides">
<figure class="slide" aria-label="评价 1">
<blockquote>课程框架非常清晰，回去立刻落地实验，效果显著。</blockquote>
<figcaption>— 陈*, 互联网运营负责人</figcaption>
</figure>
<figure class="slide" aria-label="评价 2">
<blockquote>讲师经验丰富，案例真实有启发，值得推荐。</blockquote>
<figcaption>— 孙*, 产品经理</figcaption>
</figure>
<figure class="slide" aria-label="评价 3">
<blockquote>从数据到策略的闭环非常实用，团队受益很大。</blockquote>
<figcaption>— 郑*, 企业数据负责人</figcaption>
</figure>
</div>
<div class="slider-controls">
<button class="icon-btn" id="prevSlide" aria-label="上一条">◀</button>
<button class="icon-btn" id="nextSlide" aria-label="下一条">▶</button>
</div>
<div class="slider-dots" aria-hidden="true"></div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section" id="faq" data-animate>
<div class="container">
<h2>常见问题</h2>
<div class="faq">
<details>
<summary>是否支持线上观看？</summary>
<p>支持。基础票可选择线下或线上其一，专业票与VIP票同时支持。</p>
</details>
<details>
<summary>是否提供发票？</summary>
<p>支持增值税普通发票，报名后请在邮件中填写开票信息。</p>
</details>
<details>
<summary>是否有退款政策？</summary>
<p>活动开始前一周可申请退款，具体以报名条款为准。</p>
</details>
<details>
<summary>线下场地如何到达？</summary>
<p>地铁2号线至张江高科站，步行约10分钟，具体指引将通过邮件发送。</p>
</details>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<div class="footer-col">
<h4>联系方式</h4>
<ul>
<li>邮箱：contact@example.com</li>
<li>电话：400-000-0000</li>
</ul>
</div>
<div class="footer-col">
<h4>快速链接</h4>
<ul>
<li><button class="link" id="openPrivacy">隐私政策</button></li>
<li><button class="link" id="openTermsFooter">报名条款</button></li>
<li><a href="#signup" class="link">立即报名</a></li>
</ul>
</div>
<div class="footer-col">
<h4>主题色</h4>
<div class="theme-picker">
<label for="themeColor">选择主题色：</label>
<input type="color" id="themeColor" value="#2b7cff" aria-label="主题色选择器" />
</div>
</div>
</div>
<div class="container footer-base">
<small>© 2025 公司名称. 保留所有权利。</small>
<button id="backToTop" class="back-to-top" aria-label="返回顶部">↑</button>
</div>
</footer>
<!-- Cookie Banner -->
<div class="cookie-banner" role="dialog" aria-live="polite" aria-label="Cookie 提示" hidden>
<div class="container cookie-inner">
<p>本页面使用本地存储以进行轻量统计（占位），用于优化体验。您可同意或拒绝。</p>
<div class="cookie-actions">
<button class="btn ghost" id="cookieReject">拒绝</button>
<button class="btn primary" id="cookieAccept">同意</button>
</div>
</div>
</div>
<!-- Mobile Sticky CTA -->
<div class="sticky-cta" role="region" aria-label="移动端报名快捷栏">
<a href="#signup" class="btn primary full" data-track="sticky_cta">立即报名</a>
</div>
</body>
</html>
CSS样式
/* CSS变量与基础设置 */
:root {
--primary: #2b7cff;
--primary-600: #1f5ed1;
--accent: #00d4ff;
--bg: #0b1020;
--text: #12161d;
--muted: #6b7280;
--surface: #ffffff;
--surface-alt: #f6f8fb;
--border: #e5e7eb;
--radius: 12px;
--shadow: 0 8px 24px rgba(16,24,40,0.12);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--text);
background: #fff;
line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4 { margin: 0 0 12px; line-height: 1.25; }
p { margin: 0 0 12px; }
ul { padding-left: 18px; }
/* 跳过链接 */
.skip-link {
position: absolute; left: -999px; top: -999px;
}
.skip-link:focus {
left: 12px; top: 12px; background: #fff; border: 1px solid var(--border); padding: 8px; z-index: 9999;
}
/* 头部导航 */
.site-header {
position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.logo-mark { color: var(--primary); font-size: 18px; }
.site-nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.site-nav a { padding: 8px 10px; border-radius: 8px; }
.site-nav a:hover { background: var(--surface-alt); text-decoration: none; }
.nav-cta { margin-left: 8px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-600); }
.btn.outline { border-color: var(--border); color: var(--text); background: #fff; }
.btn.outline:hover { border-color: var(--primary); color: var(--primary); }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn.large { padding: 14px 20px; font-size: 16px; }
.btn.small { padding: 6px 10px; font-size: 14px; }
.btn.full { width: 100%; }
.icon-btn { padding: 8px 12px; border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; }
.icon-btn:hover { border-color: var(--primary); }
/* 首屏 */
.hero { position: relative; color: #fff; background: linear-gradient(180deg, #0b1020 0%, #0f1730 60%, #0b1020 100%); padding: 68px 0; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1fr; align-items: center; }
.hero-content h1 { font-size: 36px; }
.hero .subtitle { color: #d1d5db; font-size: 18px; margin-bottom: 20px; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(72px, 120px)); gap: 12px; margin: 20px 0; }
.cd-item { background: rgba(255,255,255,0.1); backdrop-filter: blur(6px); padding: 12px; border-radius: 10px; text-align: center; border: 1px solid rgba(255,255,255,0.15); }
.cd-item .num { display: block; font-size: 28px; font-weight: 800; letter-spacing: 1px; }
.hero-cta { display: flex; gap: 12px; margin-top: 8px; }
.hero-highlights { display: flex; gap: 16px; list-style: none; margin-top: 16px; padding: 0; flex-wrap: wrap; }
.hero-highlights .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; display: inline-block; margin-right: 8px; }
.hero-bg::before {
content: ""; position: absolute; inset: -40% -20% auto -20%; height: 300px;
background: radial-gradient(600px 150px at 30% 20%, rgba(43,124,255,0.35), transparent),
radial-gradient(600px 150px at 70% 20%, rgba(0,212,255,0.25), transparent);
transform: rotate(-6deg);
}
/* 通用区块 */
.section { padding: 56px 0; }
.grid { display: grid; gap: 16px; }
.highlights { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px; box-shadow: var(--shadow);
}
.info-card .info-list { list-style: none; padding: 0; margin: 0; }
.info-card .info-list li { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.info-card .info-list li:last-child { border: none; }
.metrics { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.metric {
flex: 1 1 160px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius);
padding: 16px; text-align: center;
}
.metric .value { font-size: 28px; font-weight: 800; color: var(--primary); margin-right: 6px; }
.instructors { grid-template-columns: repeat(3, minmax(0,1fr)); }
.instructor { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
.avatar {
width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent));
display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px;
}
/* 价格方案 */
.pricing-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.price-card { padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.price-card .price { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.price-card .features { list-style: none; padding: 0; margin: 0 0 14px; }
.price-card .features li { padding: 6px 0; }
.price-card.featured { border-color: var(--primary); box-shadow: 0 10px 30px rgba(43,124,255,0.25); transform: translateY(-2px); }
.table-wrap { overflow-x: auto; margin-top: 16px; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { border: 1px solid var(--border); padding: 10px; text-align: center; }
.compare th { background: var(--surface-alt); }
/* 报名表单 */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
label { font-weight: 600; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], select {
padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); outline: none; background: #fff;
}
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(43,124,255,0.15); }
.checkbox { display: flex; align-items: center; gap: 8px; }
.error { color: #b91c1c; min-height: 18px; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.form-tip { color: var(--muted); }
.form-status { margin-top: 10px; }
dialog {
border: none; border-radius: var(--radius); padding: 18px; max-width: 560px; width: calc(100% - 40px);
box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0,0,0,0.35); }
/* 评价滑块 */
.slider { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.slides { display: flex; transition: transform 0.5s ease; }
.slide { min-width: 100%; padding: 20px; }
.slider-controls { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.slider-dots { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.slider-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.slider-dots .dot.active { background: var(--primary); }
/* FAQ */
.faq details { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface); box-shadow: var(--shadow); }
.faq details + details { margin-top: 10px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin-top: 10px; color: var(--muted); }
/* 页脚 */
.site-footer { background: var(--surface-alt); border-top: 1px solid var(--border); margin-top: 24px; }
.footer-inner { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; padding: 20px 0; }
.footer-base { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 20px; }
.back-to-top { border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px; background: #fff; cursor: pointer; }
/* Cookie Banner */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--border); z-index: 40; }
.cookie-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.cookie-actions { display: flex; gap: 8px; }
/* Sticky CTA（移动端） */
.sticky-cta {
position: sticky; bottom: 0; background: rgba(255,255,255,0.96); border-top: 1px solid var(--border);
padding: 10px 20px; display: none; z-index: 30;
}
/* 滚动动画 */
[data-animate] { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; }
[data-animate].revealed { opacity: 1; transform: none; }
/* 响应式 */
@media (max-width: 992px) {
.highlights { grid-template-columns: repeat(2, minmax(0,1fr)); }
.instructors { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pricing-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {
.hero-content h1 { font-size: 28px; }
.countdown { grid-template-columns: repeat(4, 1fr); }
.form-grid { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; }
.sticky-cta { display: block; }
.site-nav ul { display: none; } /* 可根据需要实现移动端菜单 */
}
JavaScript功能
(function () {
const $ = (sel, parent = document) => parent.querySelector(sel);
const $$ = (sel, parent = document) => Array.from(parent.querySelectorAll(sel));
// 轻量统计埋点占位
const analytics = {
enabled: false,
track(event, payload = {}) {
if (!this.enabled) return;
// 占位：实际埋点在此处接入
console.log("[analytics]", event, payload);
}
};
window.analytics = analytics;
// Cookie Banner
const cookieBanner = $(".cookie-banner");
const acceptBtn = $("#cookieAccept");
const rejectBtn = $("#cookieReject");
const consent = localStorage.getItem("consent");
if (!consent) {
cookieBanner.hidden = false;
} else {
analytics.enabled = consent === "accepted";
}
acceptBtn?.addEventListener("click", () => {
localStorage.setItem("consent", "accepted");
analytics.enabled = true;
cookieBanner.hidden = true;
analytics.track("consent_accepted");
});
rejectBtn?.addEventListener("click", () => {
localStorage.setItem("consent", "rejected");
analytics.enabled = false;
cookieBanner.hidden = true;
analytics.track("consent_rejected");
});
// 平滑滚动与返回顶部
$("#backToTop")?.addEventListener("click", () => window.scrollTo({ top: 0, behavior: "smooth" }));
$$('a[href^="#"]').forEach(a => {
a.addEventListener("click", (e) => {
const id = a.getAttribute("href");
const target = id && $(id);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
// 倒计时
function startCountdown() {
const hero = $("#hero");
const dateStr = hero?.getAttribute("data-event-date");
if (!dateStr) return;
const eventTime = new Date(dateStr).getTime();
function update() {
const now = Date.now();
let diff = Math.max(0, eventTime - now);
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
diff -= days * 24 * 60 * 60 * 1000;
const hours = Math.floor(diff / (1000 * 60 * 60));
diff -= hours * 60 * 60 * 1000;
const minutes = Math.floor(diff / (1000 * 60));
diff -= minutes * 60 * 1000;
const seconds = Math.floor(diff / 1000);
$("#cdDays").textContent = String(days).padStart(2, "0");
$("#cdHours").textContent = String(hours).padStart(2, "0");
$("#cdMinutes").textContent = String(minutes).padStart(2, "0");
$("#cdSeconds").textContent = String(seconds).padStart(2, "0");
}
update();
setInterval(update, 1000);
}
// 滚动触发动画
function initReveal() {
const items = $$("[data-animate]");
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) e.target.classList.add("revealed");
});
}, { threshold: 0.15 });
items.forEach((el) => io.observe(el));
}
// 数字递增
function initCounters() {
const counters = $$(".metric[data-count-to]");
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (!e.isIntersecting) return;
const el = e.target;
const target = parseInt(el.getAttribute("data-count-to"), 10);
const valueEl = $(".value", el);
let start = 0;
const duration = 1200;
const startTime = performance.now();
function tick(now) {
const p = Math.min(1, (now - startTime) / duration);
const eased = p < 0.5 ? 2 * p * p : -1 + (4 - 2 * p) * p; // easeInOut
const v = Math.round(start + (target - start) * eased);
valueEl.textContent = v;
if (p < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
io.unobserve(el);
});
}, { threshold: 0.6 });
counters.forEach((el) => io.observe(el));
}
// 分享
$("#shareBtn")?.addEventListener("click", async () => {
const shareData = {
title: document.title,
text: "推荐一个高阶课程活动报名页面：",
url: location.href
};
try {
if (navigator.share) {
await navigator.share(shareData);
analytics.track("share_native");
} else {
await navigator.clipboard.writeText(location.href);
alert("链接已复制到剪贴板");
analytics.track("share_copy");
}
} catch (err) {
console.warn("分享取消或失败", err);
}
});
// 主题色配置
const themePicker = $("#themeColor");
const toggleThemeBtn = $("#toggleTheme");
const savedColor = localStorage.getItem("themeColor");
if (savedColor) {
document.documentElement.style.setProperty("--primary", savedColor);
themePicker.value = savedColor;
}
themePicker?.addEventListener("input", (e) => {
const val = e.target.value;
document.documentElement.style.setProperty("--primary", val);
localStorage.setItem("themeColor", val);
analytics.track("theme_change", { color: val });
});
toggleThemeBtn?.addEventListener("click", () => themePicker?.focus());
// 表单校验
const form = $("#signupForm");
const fields = {
name: $("#name"),
email: $("#email"),
phone: $("#phone"),
course: $("#course"),
agree: $("#agree")
};
const errors = {
name: $("#nameError"),
email: $("#emailError"),
phone: $("#phoneError"),
course: $("#courseError"),
agree: $("#agreeError")
};
const statusEl = $("#formStatus");
function validateName() {
const v = fields.name.value.trim();
if (!v) { errors.name.textContent = "请填写姓名"; return false; }
if (v.length > 30) { errors.name.textContent = "姓名长度不超过30"; return false; }
errors.name.textContent = ""; return true;
}
function validateEmail() {
const v = fields.email.value.trim();
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!v) { errors.email.textContent = "请填写邮箱"; return false; }
if (!pattern.test(v)) { errors.email.textContent = "邮箱格式不正确"; return false; }
errors.email.textContent = ""; return true;
}
function validatePhone() {
const v = fields.phone.value.trim();
const patternCN = /^1\d{10}$/; // 中国大陆手机号示例
if (!v) { errors.phone.textContent = "请填写手机号"; return false; }
if (!patternCN.test(v)) { errors.phone.textContent = "手机号格式不正确（11位数字，以1开头）"; return false; }
errors.phone.textContent = ""; return true;
}
function validateCourse() {
const v = fields.course.value;
if (!v) { errors.course.textContent = "请选择课程"; return false; }
errors.course.textContent = ""; return true;
}
function validateAgree() {
if (!fields.agree.checked) { errors.agree.textContent = "请勾选同意条款"; return false; }
errors.agree.textContent = ""; return true;
}
function validateAll() {
return [validateName(), validateEmail(), validatePhone(), validateCourse(), validateAgree()].every(Boolean);
}
["input", "blur", "change"].forEach(evt => {
fields.name.addEventListener(evt, validateName);
fields.email.addEventListener(evt, validateEmail);
fields.phone.addEventListener(evt, validatePhone);
fields.course.addEventListener(evt, validateCourse);
fields.agree.addEventListener(evt, validateAgree);
});
form?.addEventListener("submit", (e) => {
e.preventDefault();
statusEl.textContent = "";
if (!validateAll()) {
statusEl.textContent = "请检查表单并修正错误后再提交。";
analytics.track("form_invalid");
return;
}
// 模拟提交：不发送外部请求
const payload = {
name: fields.name.value.trim(),
email: fields.email.value.trim(),
phone: fields.phone.value.trim(),
course: fields.course.value
};
analytics.track("form_submit", payload);
statusEl.textContent = "提交成功！我们已向您的邮箱发送确认信息（示例）。";
form.reset();
});
// 条款对话框
const termsDialog = $("#termsDialog");
$("#openTerms")?.addEventListener("click", () => termsDialog.showModal());
$("#closeTerms")?.addEventListener("click", () => termsDialog.close());
$("#openTermsFooter")?.addEventListener("click", () => termsDialog.showModal());
// 价格CTA选择课程自动填充
$$("[data-select-course]").forEach(btn => {
btn.addEventListener("click", () => {
const val = btn.getAttribute("data-select-course") || "";
$("#course").value = val;
analytics.track("select_course", { course: val });
});
});
// 评价滑块
const slidesWrap = $(".slides");
const slides = $$(".slide", slidesWrap);
const dotsWrap = $(".slider-dots");
let idx = 0, timer;
function renderDots() {
dotsWrap.innerHTML = "";
slides.forEach((_, i) => {
const dot = document.createElement("div");
dot.className = "dot" + (i === idx ? " active" : "");
dot.addEventListener("click", () => go(i));
dotsWrap.appendChild(dot);
});
}
function go(i) {
idx = (i + slides.length) % slides.length;
slidesWrap.style.transform = `translateX(-${idx * 100}%)`;
renderDots();
}
function autoplay() {
clearInterval(timer);
timer = setInterval(() => go(idx + 1), 5000);
}
$("#prevSlide")?.addEventListener("click", () => { go(idx - 1); autoplay(); });
$("#nextSlide")?.addEventListener("click", () => { go(idx + 1); autoplay(); });
// 初始化
startCountdown();
initReveal();
initCounters();
renderDots();
autoplay();
// 埋点：CTA点击
$$("[data-track]").forEach(el => {
el.addEventListener("click", () => {
const e = el.getAttribute("data-track");
analytics.track(e || "click");
});
});
})();
使用说明
- 将HTML、CSS、JavaScript分别保存为 index.html、styles.css、main.js 文件，并置于同一目录。
- 本地打开 index.html 即可运行，无需任何外部依赖。
- 修改主题色：在页面右上角点击调色按钮或使用底部主题色选择器，选择后将自动持久化存储。
- 设置活动时间：在首屏section元素的 data-event-date 属性中填入ISO日期时间（含时区），倒计时将自动更新。
- 课程选择联动：价格卡片的“选择XX票”按钮会自动填充报名表课程选项。
- 埋点与Cookie：页面包含轻量统计占位，不会对外发送数据。用户同意后仅在控制台输出模拟事件。可在 main.js 的 analytics.track 中接入真实埋点。
- SEO与开放图：请将 assets/og-image.png 替换为实际图片，并修改 head 中的 canonical 与 og:url 为真实地址。
定制建议
- 视觉强化：可为首屏添加品牌背景图或SVG粒子动效，提高科技感（确保不影响性能）。
- 移动端导航：可增加移动菜单按钮与抽屉导航，以适配更复杂导航结构。
- 表单增强：接入后端API（POST）完成真实报名流程，并添加验证码与防刷机制；确保HTTPS与CSRF防护。
- 多语言支持：通过data-i18n与语言包实现中英文切换。
- 内容管理：将课程亮点、讲师信息、价格方案抽象为JSON配置，前端动态渲染便于维护。
- 可用性与无障碍：完善键盘操作、焦点管理与ARIA标签，对滑块与对话框提供更强的辅助功能支持。
- 性能优化：按需懒加载图片、使用content-visibility与prefers-reduced-motion适配低性能设备用户。
- 分析与A/B：基于轻量埋点接入真实分析平台，定义转化事件（Hero CTA、Sticky CTA、Form Submit）并做文案/样式A/B测试。
