代码概述
本项目为“活动落地页 + 报名页 + 成功页”的静态网站模板，包含以下功能与特点：
- 活动倒计时：支持设置截止时间，自动显示剩余天/时/分/秒。
- 奖品展示区：海报风头图与奖品卡片，轻量动效。
- 报名表单：必填校验、Webhook提交、UTM参数自动采集、提交状态提示。
- 成功页：报名完成反馈与轻量祝贺动效。
- 一键替换品牌主色与文案：通过统一配置对象即可替换全站颜色、文案与图片。
- 基础SEO：可通过配置覆盖页面标题、描述、OG/Twitter卡片、JSON-LD结构化数据。
- 响应式设计与可访问性优化：语义化标签、焦点可视化、表单标签/提示、ARIA等。
结构说明：
- index.html：活动落地页（海报风头图、倒计时、奖品区、CTA）
- signup.html：报名页（倒计时、表单）
- success.html：报名成功页（反馈与动效）
- style.css：全站样式（含品牌色变量与响应式）
- main.js：交互逻辑与配置（一键替换文案/品牌色、倒计时、Webhook提交流程、SEO元信息注入）
默认品牌主色为 #2E6CF6，CTA为醒目按钮，大标题与海报风头图风格均已内置。
HTML代码
<!-- index.html -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title id="seo-title">2025品牌活动 - 官方报名</title>
<meta id="seo-description" name="description" content="加入2025品牌活动，赢取丰厚奖品，立即报名！" />
<meta name="keywords" content="品牌活动, 报名, 奖品, 参赛, 2025" />
<link rel="canonical" href="https://example.com/" />
<meta name="robots" content="index,follow" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" id="og-title" content="2025品牌活动 - 官方报名" />
<meta property="og:description" id="og-description" content="加入2025品牌活动，赢取丰厚奖品，立即报名！" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" id="og-image" content="assets/og-image.jpg" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" id="tw-title" content="2025品牌活动 - 官方报名" />
<meta name="twitter:description" id="tw-description" content="加入2025品牌活动，赢取丰厚奖品，立即报名！" />
<meta name="twitter:image" id="tw-image" content="assets/og-image.jpg" />
<!-- JSON-LD 会在 main.js 中动态注入，提供默认占位 -->
<script id="jsonld-placeholder" type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "2025品牌活动",
"startDate": "2025-12-31T23:59:59+08:00",
"eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
"eventStatus": "https://schema.org/EventScheduled",
"location": {
"@type": "VirtualLocation",
"url": "https://example.com/"
},
"image": ["assets/og-image.jpg"],
"description": "加入2025品牌活动，赢取丰厚奖品，立即报名！",
"organizer": {
"@type": "Organization",
"name": "品牌主办方"
}
}
</script>
<link rel="stylesheet" href="style.css" />
<noscript><style>.js-only{display:none!important}</style></noscript>
</head>
<body data-page="index">
<a class="skip-link" href="#main">跳至主要内容</a>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="index.html" aria-label="返回首页">
<span class="logo-mark" aria-hidden="true"></span>
<span class="logo-text" data-key="brandName">品牌主办方</span>
</a>
<nav class="header-nav">
<a href="#prizes">奖品</a>
<a href="signup.html" class="btn btn-ghost">立即报名</a>
</nav>
</div>
</header>
<main id="main">
<!-- 海报风头图 -->
<section class="hero">
<div class="hero-bg">
<img data-img-key="heroImage" src="assets/hero.jpg" alt="活动海报头图" />
<div class="hero-overlay"></div>
</div>
<div class="container hero-content">
<h1 class="hero-title" data-key="eventName">2025品牌活动</h1>
<p class="hero-subtitle" data-key="tagline">开启你的高光时刻</p>
<div class="countdown" aria-live="polite">
<div class="countdown-row js-only">
<div class="time-box"><span id="cd-days">00</span><p>天</p></div>
<div class="time-box"><span id="cd-hours">00</span><p>时</p></div>
<div class="time-box"><span id="cd-mins">00</span><p>分</p></div>
<div class="time-box"><span id="cd-secs">00</span><p>秒</p></div>
</div>
<p class="countdown-status" id="cd-status">距离活动开始还有</p>
</div>
<div class="hero-cta">
<a class="btn btn-primary btn-lg" href="signup.html" data-key="ctaText">立即报名</a>
</div>
</div>
</section>
<!-- 奖品区 -->
<section id="prizes" class="prize-section">
<div class="container">
<h2 class="section-title">活动奖品</h2>
<p class="section-desc">参与活动，即有机会赢取以下大奖！</p>
<div class="prize-grid" id="prize-grid" aria-live="polite">
<!-- 奖品卡片将由 main.js 根据配置注入 -->
</div>
</div>
</section>
<!-- 说明/条款 -->
<section class="note-section">
<div class="container">
<p class="note">活动规则与奖品发放以主办方最终解释为准。报名即视为同意活动条款。</p>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<p>© <span data-key="brandName">品牌主办方</span> <span id="year"></span>. 保留所有权利。</p>
<p>咨询邮箱：<a href="mailto:contact@example.com" data-key="contactEmail">contact@example.com</a></p>
</div>
</footer>
<script src="main.js" defer></script>
</body>
</html>
<!-- signup.html -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title id="seo-title">活动报名 - 官方通道</title>
<meta id="seo-description" name="description" content="填写报名信息，参与2025品牌活动，赢取丰厚奖品。" />
<link rel="canonical" href="https://example.com/signup.html" />
<meta name="robots" content="index,follow" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" id="og-title" content="活动报名 - 官方通道" />
<meta property="og:description" id="og-description" content="填写报名信息，参与2025品牌活动，赢取丰厚奖品。" />
<meta property="og:url" content="https://example.com/signup.html" />
<meta property="og:image" id="og-image" content="assets/og-image.jpg" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" id="tw-title" content="活动报名 - 官方通道" />
<meta name="twitter:description" id="tw-description" content="填写报名信息，参与2025品牌活动，赢取丰厚奖品。" />
<meta name="twitter:image" id="tw-image" content="assets/og-image.jpg" />
<link rel="stylesheet" href="style.css" />
<noscript><style>.js-only{display:none!important}</style></noscript>
</head>
<body data-page="signup">
<a class="skip-link" href="#main">跳至主要内容</a>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="index.html" aria-label="返回首页">
<span class="logo-mark" aria-hidden="true"></span>
<span class="logo-text" data-key="brandName">品牌主办方</span>
</a>
<nav class="header-nav">
<a href="index.html#prizes">奖品</a>
<a href="signup.html" class="btn btn-ghost is-active">报名</a>
</nav>
</div>
</header>
<main id="main">
<section class="signup-hero">
<div class="container">
<h1 class="page-title">报名信息</h1>
<p class="page-subtitle">请填写以下信息以完成报名。</p>
<div class="countdown inline" aria-live="polite">
<span class="label">报名截止</span>
<span id="cd-inline" class="inline-time">--:--:--</span>
</div>
</div>
</section>
<section class="signup-section">
<div class="container">
<form id="signup-form" novalidate>
<div class="form-row">
<label for="name">姓名 *</label>
<input id="name" name="name" type="text" required maxlength="50" autocomplete="name" />
<small class="field-hint">请输入真实姓名</small>
</div>
<div class="form-row">
<label for="email">邮箱 *</label>
<input id="email" name="email" type="email" required maxlength="100" autocomplete="email" />
<small class="field-hint">用于接收报名信息与通知</small>
</div>
<div class="form-row">
<label for="phone">手机号 *</label>
<input id="phone" name="phone" type="tel" required inputmode="numeric" pattern="^\\d{6,20}$" maxlength="20" autocomplete="tel" />
<small class="field-hint">仅数字，6-20位</small>
</div>
<div class="form-row">
<label for="company">公司/组织</label>
<input id="company" name="company" type="text" maxlength="100" autocomplete="organization" />
</div>
<div class="form-row">
<label for="role">职位/角色</label>
<input id="role" name="role" type="text" maxlength="100" />
</div>
<div class="form-row">
<label for="notes">备注</label>
<textarea id="notes" name="notes" rows="3" maxlength="500"></textarea>
</div>
<div class="form-row checkbox-row">
<input id="consent" name="consent" type="checkbox" required />
<label for="consent">我已阅读并同意活动条款与隐私政策 *</label>
</div>
<input type="hidden" id="eventName" name="eventName" value="2025品牌活动" />
<input type="hidden" id="utm" name="utm" value="" />
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-lg" id="submit-btn">
<span class="btn-label">提交报名</span>
<span class="btn-spinner" aria-hidden="true"></span>
</button>
<p id="form-msg" role="status" aria-live="polite" class="form-msg"></p>
</div>
<noscript>
<p class="noscript-msg">
您的浏览器未启用JavaScript，无法在线提交。请发送报名信息至：
<a href="mailto:contact@example.com">contact@example.com</a>
</p>
</noscript>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<p>© <span data-key="brandName">品牌主办方</span> <span id="year"></span>.</p>
<p>咨询邮箱：<a href="mailto:contact@example.com" data-key="contactEmail">contact@example.com</a></p>
</div>
</footer>
<script src="main.js" defer></script>
</body>
</html>
<!-- success.html -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title id="seo-title">报名成功 - 感谢参与</title>
<meta id="seo-description" name="description" content="报名成功！感谢你的参与，我们将尽快与您联系。" />
<link rel="canonical" href="https://example.com/success.html" />
<meta name="robots" content="noindex,follow" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" id="og-title" content="报名成功 - 感谢参与" />
<meta property="og:description" id="og-description" content="报名成功！感谢你的参与，我们将尽快与您联系。" />
<meta property="og:url" content="https://example.com/success.html" />
<meta property="og:image" id="og-image" content="assets/og-image.jpg" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" id="tw-title" content="报名成功 - 感谢参与" />
<meta name="twitter:description" id="tw-description" content="报名成功！感谢你的参与，我们将尽快与您联系。" />
<meta name="twitter:image" id="tw-image" content="assets/og-image.jpg" />
<link rel="stylesheet" href="style.css" />
</head>
<body data-page="success">
<a class="skip-link" href="#main">跳至主要内容</a>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="index.html" aria-label="返回首页">
<span class="logo-mark" aria-hidden="true"></span>
<span class="logo-text" data-key="brandName">品牌主办方</span>
</a>
<nav class="header-nav">
<a href="index.html">首页</a>
<a href="signup.html">报名</a>
</nav>
</div>
</header>
<main id="main">
<section class="success-hero">
<div class="container">
<div class="success-card">
<div class="success-icon" aria-hidden="true">✓</div>
<h1 class="success-title" data-key="successTitle">报名成功！</h1>
<p class="success-desc" id="success-desc" data-key="successMessage">我们已收到你的信息，稍后将通过邮箱或电话与您联系。</p>
<div class="success-actions">
<a class="btn btn-primary" href="index.html">返回首页</a>
<a class="btn btn-ghost" href="signup.html">继续报名</a>
</div>
</div>
<div id="confetti" class="confetti js-only" aria-hidden="true"></div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<p>© <span data-key="brandName">品牌主办方</span> <span id="year"></span>.</p>
<p>咨询邮箱：<a href="mailto:contact@example.com" data-key="contactEmail">contact@example.com</a></p>
</div>
</footer>
<script src="main.js" defer></script>
</body>
</html>
CSS样式
/* style.css */
/* 基础变量与重置 */
:root {
--brand-primary: #2E6CF6; /* 一键替换品牌主色 */
--brand-primary-600: #1f57d6;
--text-color: #1b1b1b;
--text-muted: #6b7280;
--bg-color: #ffffff;
--bg-alt: #f7f9fc;
--border: #e5e7eb;
--radius: 12px;
--shadow-sm: 0 3px 10px rgba(0,0,0,0.08);
--shadow-md: 0 8px 24px rgba(0,0,0,0.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--text-color);
background: var(--bg-color);
line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* 跳转链接 */
.skip-link {
position: absolute; left: -999px; top: -999px;
}
.skip-link:focus {
left: 12px; top: 12px; background: #fff; padding: 8px 12px; border-radius: 6px;
box-shadow: var(--shadow-sm);
}
/* 头部 */
.site-header {
position: sticky; top: 0; z-index: 20;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.header-inner {
display: flex; align-items: center; justify-content: space-between;
min-height: 64px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-color); }
.logo-mark {
width: 28px; height: 28px; border-radius: 8px; background:
radial-gradient(85% 85% at 20% 20%, #fff 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%),
var(--brand-primary);
box-shadow: 0 6px 16px rgba(46,108,246,0.4);
}
.header-nav { display: flex; gap: 16px; align-items: center; }
.header-nav a { color: var(--text-color); }
.header-nav .is-active { font-weight: 600; }
/* 按钮 */
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
font-weight: 600; transition: transform .06s ease, box-shadow .2s ease, background .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid rgba(46,108,246,0.35); outline-offset: 2px; }
.btn-primary {
background: var(--brand-primary); color: #fff; box-shadow: 0 8px 18px rgba(46,108,246,0.35);
}
.btn-primary:hover { background: var(--brand-primary-600); }
.btn-ghost {
background: transparent; color: var(--brand-primary); border-color: var(--brand-primary);
}
.btn-ghost:hover { background: rgba(46,108,246,0.08); }
.btn-lg { padding: 14px 22px; font-size: 18px; }
/* 英雄海报 */
.hero {
position: relative; overflow: hidden; color: #fff;
}
.hero-bg { position: relative; height: 420px; }
.hero-bg img {
width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2) contrast(1.05);
}
.hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.75) 100%),
radial-gradient(120% 80% at 20% 20%, rgba(46,108,246,0.45) 0%, rgba(46,108,246,0.05) 60%, transparent 100%);
mix-blend-mode: multiply;
}
.hero-content {
position: absolute; inset: 0; display: flex; align-items: flex-end;
padding: 20px; max-width: 1100px; margin: 0 auto;
}
.hero-title {
font-size: 38px; margin: 0 0 8px; text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.hero-subtitle { margin: 0 0 18px; font-size: 18px; color: #e5e7eb; }
.hero-cta { margin-bottom: 28px; }
/* 倒计时 */
.countdown { margin-top: 10px; }
.countdown-row { display: flex; gap: 12px; }
.time-box {
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
border-radius: 12px; padding: 10px 12px; text-align: center; min-width: 70px;
backdrop-filter: blur(6px);
}
.time-box span { font-size: 26px; font-weight: 700; display: block; }
.time-box p { margin: 0; font-size: 13px; color: #e5e7eb; }
.countdown-status { margin-top: 8px; color: #e5e7eb; }
.countdown.inline { display: flex; gap: 8px; color: var(--text-muted); }
.inline-time { font-weight: 700; color: var(--brand-primary); }
/* 奖品区 */
.prize-section { background: var(--bg-alt); padding: 40px 0; }
.section-title { font-size: 28px; margin: 0 0 6px; }
.section-desc { margin: 0 0 18px; color: var(--text-muted); }
.prize-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.prize-card {
background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .15s ease, box-shadow .2s ease;
}
.prize-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.prize-media { height: 160px; background: #eef2ff; display: flex; align-items: center; justify-content: center; }
.prize-media img { width: 100%; height: 100%; object-fit: cover; }
.prize-body { padding: 14px; }
.prize-title { font-size: 18px; margin: 0 0 6px; }
.prize-desc { margin: 0; color: var(--text-muted); }
/* 说明区 */
.note-section { padding: 16px 0 32px; }
.note { color: var(--text-muted); font-size: 14px; }
/* 报名页 */
.signup-hero { padding: 28px 0 8px; border-bottom: 1px solid var(--border); background: #fff; }
.page-title { margin: 0; font-size: 26px; }
.page-subtitle { margin: 8px 0 0; color: var(--text-muted); }
.signup-section { padding: 26px 0 40px; }
form { max-width: 680px; margin: 0 auto; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
label { font-weight: 600; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px;
transition: border-color .15s ease, box-shadow .15s ease; background: #fff;
}
input:focus, textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(46,108,246,0.15); }
.field-hint { color: var(--text-muted); font-size: 12px; }
.checkbox-row { flex-direction: row; align-items: center; gap: 10px; }
.form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.btn-spinner {
width: 18px; height: 18px; margin-left: 10px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.6); border-top-color: #fff; display: none;
animation: spin .9s linear infinite;
}
.btn.loading .btn-spinner { display: inline-block; }
.btn.loading { pointer-events: none; opacity: 0.9; }
.form-msg { min-height: 18px; font-size: 14px; color: var(--text-muted); }
.form-msg.success { color: #16a34a; }
.form-msg.error { color: #dc2626; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 成功页 */
.success-hero { padding: 60px 0; background: var(--bg-alt); }
.success-card {
max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 26px;
text-align: center;
}
.success-icon {
width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%;
background: var(--brand-primary); color: #fff; font-size: 36px; display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 20px rgba(46,108,246,0.35);
}
.success-title { margin: 8px 0 6px; font-size: 24px; }
.success-desc { margin: 0 0 18px; color: var(--text-muted); }
/* 轻量彩带 */
.confetti { position: relative; height: 0; }
.confetti .piece {
position: absolute; width: 10px; height: 16px; opacity: 0;
animation: drop 1.8s ease-in forwards;
}
@keyframes drop {
0% { transform: translateY(-20px) rotate(0); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(50px) rotate(140deg); opacity: 0; }
}
/* 页脚 */
.site-footer { border-top: 1px solid var(--border); background: #fff; }
.footer-inner { padding: 16px 0; color: var(--text-muted); }
/* 响应式 */
@media (max-width: 960px) {
.prize-grid { grid-template-columns: repeat(2, 1fr); }
.hero-bg { height: 380px; }
}
@media (max-width: 640px) {
.prize-grid { grid-template-columns: 1fr; }
.hero-title { font-size: 30px; }
.hero-bg { height: 320px; }
}
JavaScript代码
/* main.js */
/* 统一站点配置：一键替换品牌主色与文案、图片、SEO、Webhook */
const SITE_CONFIG = {
brandPrimary: "#2E6CF6",
brandName: "品牌主办方",
eventName: "2025品牌活动",
tagline: "开启你的高光时刻",
ctaText: "立即报名",
heroImage: "assets/hero.jpg",
eventDeadline: "2025-12-31T23:59:59+08:00", // 倒计时截止时间（ISO格式）
prizes: [
{ title: "特等奖：最新旗舰手机", desc: "一名，价值￥6999，性能强劲，影像领先。", image: "assets/prize-phone.jpg" },
{ title: "一等奖：高端蓝牙耳机", desc: "三名，沉浸音效与舒适佩戴体验。", image: "assets/prize-headphones.jpg" },
{ title: "二等奖：智能手环", desc: "五名，健康监测与运动记录好帮手。", image: "assets/prize-band.jpg" }
],
contactEmail: "contact@example.com",
webhookUrl: "https://example.com/webhook", // 替换为你的Webhook地址（需支持CORS）
seo: {
home: {
title: "2025品牌活动 - 官方报名",
description: "加入2025品牌活动，赢取丰厚奖品，立即报名！",
ogImage: "assets/og-image.jpg",
keywords: "品牌活动, 报名, 奖品, 参赛, 2025"
},
signup: {
title: "活动报名 - 官方通道",
description: "填写报名信息，参与2025品牌活动，赢取丰厚奖品。",
ogImage: "assets/og-image.jpg"
},
success: {
title: "报名成功 - 感谢参与",
description: "报名成功！感谢你的参与，我们将尽快与您联系。",
ogImage: "assets/og-image.jpg",
noindex: true
}
},
successTitle: "报名成功！",
successMessage: "我们已收到你的信息，稍后将通过邮箱或电话与您联系。"
};
/* 工具函数 */
const $ = (sel, root = document) => root.querySelector(sel);
const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
function setBrandColor(color) {
document.documentElement.style.setProperty("--brand-primary", color);
// 自动生成略深色（用于hover）
try {
const { r, g, b } = hexToRgb(color);
const darker = `rgb(${Math.max(r - 20, 0)}, ${Math.max(g - 20, 0)}, ${Math.max(b - 20, 0)})`;
document.documentElement.style.setProperty("--brand-primary-600", darker);
} catch (_) {}
}
function hexToRgb(hex) {
const h = hex.replace("#", "");
const bigint = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
return { r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255 };
}
function applyConfig() {
// 品牌色
setBrandColor(SITE_CONFIG.brandPrimary);
// 文案 & 图片
$$("[data-key]").forEach(el => {
const key = el.getAttribute("data-key");
if (key && SITE_CONFIG[key] != null) el.textContent = SITE_CONFIG[key];
});
$$("[data-img-key]").forEach(el => {
const key = el.getAttribute("data-img-key");
if (key && SITE_CONFIG[key]) el.setAttribute("src", SITE_CONFIG[key]);
});
// 年份
const yearEl = $("#year");
if (yearEl) yearEl.textContent = new Date().getFullYear();
// SEO 注入
const page = document.body.dataset.page;
const seoConf = SITE_CONFIG.seo[page === "index" ? "home" : page];
if (seoConf) {
document.title = seoConf.title;
setMeta("#seo-title", seoConf.title);
setMetaName("#seo-description", "description", seoConf.description);
setMetaProperty("#og-title", "og:title", seoConf.title);
setMetaProperty("#og-description", "og:description", seoConf.description);
setMetaProperty("#og-image", "og:image", seoConf.ogImage);
setMetaName("#tw-title", "twitter:title", seoConf.title);
setMetaName("#tw-description", "twitter:description", seoConf.description);
setMetaName("#tw-image", "twitter:image", seoConf.ogImage);
if (seoConf.keywords && $("#seo-keywords")) setMetaName("#seo-keywords", "keywords", seoConf.keywords);
if (seoConf.noindex) {
let robots = $('meta[name="robots"]');
if (robots) robots.setAttribute("content", "noindex,follow");
}
// JSON-LD Event 数据
injectJsonLd({
"@context": "https://schema.org",
"@type": "Event",
"name": SITE_CONFIG.eventName,
"startDate": SITE_CONFIG.eventDeadline,
"eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
"eventStatus": "https://schema.org/EventScheduled",
"location": {
"@type": "VirtualLocation",
"url": location.origin + (page === "index" ? "/" : `/${page}.html`)
},
"image": [seoConf.ogImage],
"description": seoConf.description,
"organizer": { "@type": "Organization", "name": SITE_CONFIG.brandName }
});
}
}
function setMeta(selectorOrElement, value) {
const el = typeof selectorOrElement === "string" ? $(selectorOrElement) : selectorOrElement;
if (el) el.textContent = value;
}
function setMetaName(sel, name, content) {
const el = typeof sel === "string" ? $(sel) : sel;
if (el) el.setAttribute("content", content);
else {
const meta = document.createElement("meta");
meta.setAttribute("name", name);
meta.setAttribute("content", content);
document.head.appendChild(meta);
}
}
function setMetaProperty(sel, prop, content) {
const el = typeof sel === "string" ? $(sel) : sel;
if (el) el.setAttribute("content", content);
else {
const meta = document.createElement("meta");
meta.setAttribute("property", prop);
meta.setAttribute("content", content);
document.head.appendChild(meta);
}
}
function injectJsonLd(obj) {
// 替换或追加 JSON-LD
let placeholder = $("#jsonld-placeholder");
const script = document.createElement("script");
script.type = "application/ld+json";
script.textContent = JSON.stringify(obj);
if (placeholder) {
placeholder.replaceWith(script);
} else {
document.head.appendChild(script);
}
}
/* 倒计时 */
function startCountdown(deadlineISO, onTick) {
const end = new Date(deadlineISO);
function tick() {
const now = new Date();
let diff = end.getTime() - now.getTime();
const status = diff > 0 ? "距离活动开始还有" : "活动已开始";
if (diff < 0) diff = 0;
const d = Math.floor(diff / (1000 * 60 * 60 * 24));
const h = Math.floor(diff / (1000 * 60 * 60)) % 24;
const m = Math.floor(diff / (1000 * 60)) % 60;
const s = Math.floor(diff / 1000) % 60;
onTick({ days: d, hours: h, mins: m, secs: s, status });
}
tick();
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}
/* 奖品注入 */
function renderPrizes() {
const grid = $("#prize-grid");
if (!grid) return;
grid.innerHTML = "";
SITE_CONFIG.prizes.forEach((p, i) => {
const card = document.createElement("article");
card.className = "prize-card";
card.setAttribute("tabindex", "0");
card.innerHTML = `
<div class="prize-media">
<img src="${p.image}" alt="${p.title}" loading="lazy">
</div>
<div class="prize-body">
<h3 class="prize-title">${p.title}</h3>
<p class="prize-desc">${p.desc}</p>
</div>
`;
grid.appendChild(card);
});
}
/* 表单提交（Webhook） */
async function handleForm() {
const form = $("#signup-form");
if (!form) return;
const submitBtn = $("#submit-btn");
const msgEl = $("#form-msg");
const utmHidden = $("#utm");
const eventHidden = $("#eventName");
// 填充隐藏字段
eventHidden.value = SITE_CONFIG.eventName;
utmHidden.value = JSON.stringify(getUtmParams());
form.addEventListener("submit", async (e) => {
e.preventDefault();
msgEl.textContent = "";
// 校验
const isValid = validateForm(form);
if (!isValid) {
msgEl.textContent = "请检查必填项是否填写正确。";
msgEl.className = "form-msg error";
return;
}
toggleLoading(submitBtn, true);
const payload = {
eventName: SITE_CONFIG.eventName,
name: form.name.value.trim(),
email: form.email.value.trim(),
phone: form.phone.value.trim(),
company: form.company.value.trim(),
role: form.role.value.trim(),
notes: form.notes.value.trim(),
consent: !!form.consent.checked,
utm: getUtmParams(),
ts: new Date().toISOString()
};
try {
const res = await fetch(SITE_CONFIG.webhookUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
mode: "cors"
});
if (!res.ok) throw new Error(`提交失败：${res.status}`);
// 可选：解析返回ID
let data = {};
try { data = await res.json(); } catch (_) {}
msgEl.textContent = "提交成功，即将跳转…";
msgEl.className = "form-msg success";
// 跳转成功页并携带查询信息
const params = new URLSearchParams({
name: payload.name || "",
email: payload.email || "",
rid: data.id || ""
});
setTimeout(() => {
location.href = `success.html?${params.toString()}`;
}, 800);
} catch (err) {
console.error(err);
msgEl.textContent = "提交失败，请稍后重试或联系主办方。";
msgEl.className = "form-msg error";
} finally {
toggleLoading(submitBtn, false);
}
});
}
function validateForm(form) {
let ok = true;
const requiredFields = ["name", "email", "phone", "consent"];
requiredFields.forEach(id => {
const field = form[id];
if (!field) return;
let valid = true;
if (field.type === "checkbox") valid = field.checked;
else valid = !!field.value.trim();
if (id === "email" && valid) valid = /\S+@\S+\.\S+/.test(field.value.trim());
if (id === "phone" && valid) valid = /^\d{6,20}$/.test(field.value.trim());
if (!valid) {
field.setAttribute("aria-invalid", "true");
field.classList.add("invalid");
ok = false;
} else {
field.removeAttribute("aria-invalid");
field.classList.remove("invalid");
}
});
return ok;
}
function toggleLoading(btn, isLoading) {
if (!btn) return;
btn.classList.toggle("loading", isLoading);
}
/* UTM 参数采集 */
function getUtmParams() {
const sp = new URLSearchParams(location.search);
const keys = ["utm_source","utm_medium","utm_campaign","utm_term","utm_content"];
const result = {};
keys.forEach(k => { if (sp.get(k)) result[k] = sp.get(k); });
return result;
}
/* 成功页彩带 */
function spawnConfetti() {
const box = $("#confetti");
if (!box) return;
const colors = [SITE_CONFIG.brandPrimary, "#f43f5e", "#fb923c", "#22c55e", "#06b6d4"];
for (let i = 0; i < 30; i++) {
const piece = document.createElement("div");
piece.className = "piece";
const left = Math.random() * 100;
const color = colors[Math.floor(Math.random() * colors.length)];
piece.style.left = `${left}%`;
piece.style.background = color;
piece.style.transform = `translateY(-${Math.random()*40 + 10}px) rotate(${Math.random()*180}deg)`;
piece.style.animationDelay = `${Math.random()*0.8}s`;
box.appendChild(piece);
setTimeout(() => piece.remove(), 2200);
}
}
/* Inline 倒计时渲染文本 */
function formatInlineCountdown(d) {
const pad = n => String(n).padStart(2, "0");
return `${pad(d.days)}天 ${pad(d.hours)}:${pad(d.mins)}:${pad(d.secs)}`;
}
/* 初始化 */
document.addEventListener("DOMContentLoaded", () => {
applyConfig();
const page = document.body.dataset.page;
// 倒计时
const stop = startCountdown(SITE_CONFIG.eventDeadline, (d) => {
const statusEl = $("#cd-status");
if (statusEl) statusEl.textContent = d.status;
const setText = (id, val) => { const el = $(id); if (el) el.textContent = String(val).padStart(2, "0"); };
setText("#cd-days", d.days);
setText("#cd-hours", d.hours);
setText("#cd-mins", d.mins);
setText("#cd-secs", d.secs);
const inlineEl = $("#cd-inline");
if (inlineEl) inlineEl.textContent = formatInlineCountdown(d);
});
if (page === "index") {
renderPrizes();
} else if (page === "signup") {
handleForm();
} else if (page === "success") {
// 成功页文案增强
const usp = new URLSearchParams(location.search);
const name = usp.get("name");
const email = usp.get("email");
const descEl = $("#success-desc");
if (descEl) {
const base = SITE_CONFIG.successMessage;
if (name || email) {
descEl.textContent = `${base}（${[name, email].filter(Boolean).join(" / ")}）`;
}
}
spawnConfetti();
}
});
使用说明
目录结构建议：
- index.html：活动落地页
- signup.html：报名页
- success.html：报名成功页
- style.css：样式文件
- main.js：交互与配置
- assets/：图片资源目录（hero.jpg、og-image.jpg、prize-phone.jpg 等）
一键替换品牌主色与文案：
- 在 main.js 顶部的 SITE_CONFIG 中修改以下字段：
- brandPrimary：品牌主色（如 #2E6CF6）
- brandName、eventName、tagline、ctaText：品牌与活动文案
- heroImage、prizes[].image、seo.*.ogImage：图片路径
- eventDeadline：倒计时截止时间（ISO格式，支持含时区）
- contactEmail：咨询邮箱
- seo：每页的标题/描述/OG图等基础SEO信息
- webhookUrl：你的Webhook接收地址（需支持跨域CORS）
倒计时：
- 通过 SITE_CONFIG.eventDeadline 控制，格式例如："2025-12-31T23:59:59+08:00"。
- 页面会自动显示剩余时间；到期后显示“活动已开始”。
奖品区：
- 在 SITE_CONFIG.prizes 数组中配置每个奖品的 title、desc 与 image。
- 页面会自动渲染为卡片并带轻量动效。
报名表单与Webhook提交：
- 在 signup.html 中填写信息，提交时 main.js 会以 POST JSON 调用 SITE_CONFIG.webhookUrl。
- 请求体示例：
{
"eventName": "2025品牌活动",
"name": "张三",
"email": "zhangsan@example.com",
"phone": "13800000000",
"company": "某公司",
"role": "市场经理",
"notes": "备注内容",
"consent": true,
"utm": { "utm_source": "xxx", ... },
"ts": "提交时间ISO"
}
- 成功后将跳转到 success.html，并携带 name/email 等查询参数用于展示。
- 若用户未启用JS，fallback文案提供邮箱联系方式。
基础SEO：
- 每个页面 head 部分包含基础 meta/OG/Twitter 标签。
- main.js 会根据 SITE_CONFIG.seo 为当前页面注入或覆盖标题与描述、图片。
- 结构化数据（JSON-LD/Event）也将自动注入。
- 如需最佳SEO效果，建议在生成部署前将最终文案直接写入各页面 head 中的标签。
可访问性与隐私：
- 所有表单字段均配有label与校验提示。
- 焦点状态可见，ARIA live region用于倒计时与表单状态。
- 请确保 webhook 接口安全、合规，避免收集不必要的敏感信息。
部署与使用步骤：
- 将上述文件保存到同一目录，创建 assets 文件夹并放置图片资源。
- 在 main.js 中修改 SITE_CONFIG（品牌主色、文案、图片、eventDeadline、webhookUrl 等）。
- 打开 index.html 验证效果；点击“立即报名”进入报名页测试提交流程。
- 部署到静态托管（如Vercel、Netlify、GitHub Pages、Nginx等）。
注意事项：
- Webhook 跨域：需在服务端允许 CORS（至少允许来自你站点的Origin），并接受 Content-Type: application/json。
- 表单校验为前端基础校验，建议服务端进行更严格验证与安全限制（防滥用/限流/CSRF等）。
- 图片建议使用合理体积（<300KB）以提升加载速度，并提供适当的 alt 文案。
- success.html 默认 robots 为 noindex，避免被搜索引擎收录。
浏览器兼容性
- 支持现代浏览器：Chrome 80+、Edge 80+、Safari 13+、Firefox 78+。
- 使用了以下现代特性：CSS变量、Flex/Grid、Fetch、URLSearchParams、Intersection-free基础动画。
- 对于更旧浏览器：
- CSS变量不支持时品牌色可能无法应用；可在 :root 下添加备选静态颜色。
- Fetch 与 Promise 在非常旧版本需通过 polyfill（本模板未内置）。
- 无JS时：报名页提供邮箱联系的降级提示；其余交互（倒计时、注入文案、Webhook）将不可用。
