console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>寻觅你的同频栖居地 | 城市匹配测试海报H5</title>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: PingFang SC, Microsoft YaHei, sans-serif;
}
body {
background-color: #E6D3C5;
color: #333333;
min-height: 100vh;
display: flex;
justify-content: center;
}
.container {
width: 100%;
max-width: 420px;
min-height: 100vh;
padding: 24px 20px;
position: relative;
}
.page {
display: none;
width: 100%;
min-height: calc(100vh - 48px);
flex-direction: column;
align-items: center;
}
.page.active {
display: flex;
}
/* 封面海报页 */
.poster-wrap {
width: 100%;
position: relative;
padding: 10px 0;
}
.poster-svg {
width: 100%;
margin-bottom: 32px;
}
.poster-badge {
position: absolute;
top: 0;
right: 0;
font-size: 11px;
color: #C97A5F;
border: 1px solid #C97A5F;
border-radius: 20px;
padding: 3px 8px;
}
.poster-title {
font-size: 28px;
font-weight: bold;
color: #333333;
text-align: center;
letter-spacing: 2px;
margin-bottom: 18px;
line-height: 1.3;
}
.poster-subtitle {
font-size: 14px;
color: #666666;
text-align: center;
line-height: 1.7;
padding: 14px;
background: rgba(255,255,255,0.35);
border-radius: 10px;
margin-bottom: 50px;
}
.poster-dim-list {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.dim-chip {
font-size: 12px;
color: #C97A5F;
border: 1px solid #C97A5F;
border-radius: 15px;
padding: 5px 10px;
}
.start-btn {
width: 170px;
height: 170px;
border-radius: 50%;
background-color: #C97A5F;
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
margin-bottom: 50px;
box-shadow: 0 6px 20px rgba(201,122,95,0.35);
transition: transform 0.2s;
}
.start-btn:active {
transform: scale(0.96);
}
.poster-footer {
font-size: 11px;
color: #888888;
text-align: center;
margin-top: auto;
}
/* 答题页 */
.progress-wrap {
width: 100%;
height: 8px;
background-color: #d8c2b2;
border-radius: 4px;
margin-bottom: 24px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #C97A5F;
border-radius: 4px;
width: 0%;
transition: width 0.3s ease;
}
.quiz-head {
width:100%;
display:flex;
justify-content: space-between;
align-items:center;
margin-bottom:16px;
font-size:13px;
color:#777;
}
.question-card {
width: 100%;
background: #fff;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(0,0,0,0.08);
padding: 24px 20px;
margin-bottom: 26px;
}
.dim-tag {
display: inline-block;
color: #C97A5F;
font-size: 13px;
margin-bottom: 16px;
font-weight: 500;
}
.q-text {
font-size: 18px;
font-weight: bold;
color: #333;
line-height: 1.5;
margin-bottom: 24px;
}
.option-item {
width: 100%;
padding: 14px 16px;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 12px;
background: #fff;
font-size: 15px;
color: #444;
cursor: pointer;
transition: all 0.2s;
text-align:left;
}
.option-item.selected {
border-color: #C97A5F;
color: #C97A5F;
background: #faf1ec;
}
.next-btn {
width: 100%;
padding: 14px;
background-color: #C97A5F;
color: #fff;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
margin-top: auto;
}
.next-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 结果海报页 */
#result-card {
width: 100%;
padding: 30px 20px;
text-align: center;
background: #E6D3C5;
}
.result-svg {
width:100%;
margin-bottom:20px;
}
.percent {
font-size: 36px;
font-weight: bold;
color: #C97A5F;
margin-bottom: 12px;
}
.city-name {
font-size: 28px;
font-weight: bold;
color: #333333;
margin-bottom: 20px;
}
.tag-row {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.city-tag {
border: 1px solid #C97A5F;
color: #C97A5F;
border-radius: 15px;
padding: 6px 12px;
font-size: 13px;
}
.reason-text {
font-size: 14px;
line-height: 1.8;
color: #666666;
margin-bottom: 20px;
}
.save-btn {
width: 100%;
padding: 14px;
background-color: #C97A5F;
color: #fff;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
}
.result-footer {
font-size: 11px;
color: #888888;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<!-- 第1页：网页海报封面 -->
<div class="page active" id="pageCover">
<div class="poster-wrap">
<span class="poster-badge">趣味H5测试</span>
<svg class="poster-svg" viewBox="0 0 380 80" fill="none">
<path d="M10 50 C 60 20, 110 70, 160 40 S 260 20, 310 55 S 370 45, 380 30" stroke="#C97A5F" stroke-width="2" stroke-linecap="round"/>
<path d="M20 65 C 70 45, 120 80, 170 58 S 270 40, 320 70 S 375 60, 380 50" stroke="#999" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<h1 class="poster-title">寻觅你的<br>同频栖居地</h1>
<p class="poster-subtitle">基于步调韵律、事业土壤、自然体感、人文底色四个维度，匹配你最契合的城市</p>
<div class="poster-dim-list">
<span class="dim-chip">步调韵律</span>
<span class="dim-chip">事业土壤</span>
<span class="dim-chip">自然体感</span>
<span class="dim-chip">人文底色</span>
</div>
</div>
<button class="start-btn" id="startBtn">开启栖居探索</button>
<p class="poster-footer">原创趣味测试 · 仅供娱乐</p>
</div>
<!-- 第2页：测试答题 -->
<div class="page" id="pageQuiz">
<div class="progress-wrap">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="quiz-head">
<span id="quizIndex">第 1 / 8 题</span>
<span>城市匹配测试</span>
</div>
<div class="question-card">
<span class="dim-tag" id="dimTag"></span>
<div class="q-text" id="qText"></div>
<div id="optionList"></div>
</div>
<button class="next-btn" id="nextBtn" disabled>下一题</button>
</div>
<!-- 第3页：结果海报 -->
<div class="page" id="pageResult">
<div id="result-card">
<svg class="result-svg" viewBox="0 0 380 60" fill="none">
<path d="M10 35 C 60 15, 110 55, 160 30 S 260 15, 310 45 S 370 38, 380 25" stroke="#C97A5F" stroke-width="2" stroke-linecap="round"/>
</svg>
<div class="percent" id="percentText"></div>
<div class="city-name" id="cityName"></div>
<div class="tag-row" id="tagRow"></div>
<p class="reason-text" id="reasonText"></p>
</div>
<button class="save-btn" id="saveBtn">保存分享海报图</button>
<p class="result-footer">原创趣味测试 · 维度重构 · 仅供娱乐，非科学评估</p>
</div>
</div>
<script>
// 题库
const questions = [
{
id: 1, dim: "步调韵律", dimColor: "#C97A5F",
q: "周末清晨醒来，你的第一直觉是？",
options: [
{ t: "自然醒，去逛老街菜场", v: { A: 2, B: 3, C: 1, D: 3 } },
{ t: "按计划表排满探索行程", v: { A: 2, B: 1, C: 3, D: 1 } },
{ t: "赖床到中午，随性看心情", v: { A: 1, B: 2, C: 1, D: 2 } }
]
},
{
id: 2, dim: "步调韵律", dimColor: "#C97A5F",
q: "处理日常琐事，你更习惯？",
options: [
{ t: "多线程，随时在线不拖沓", v: { A: 2, B: 1, C: 3, D: 1 } },
{ t: "慢慢来，喝杯茶再理思绪", v: { A: 1, B: 3, C: 1, D: 3 } },
{ t: "挑重点，其余随缘不纠结", v: { A: 2, B: 2, C: 2, D: 2 } }
]
},
{
id: 3, dim: "事业土壤", dimColor: "#C97A5F",
q: "理想的工作状态是？",
options: [
{ t: "浪潮前沿，拼杀中见成长", v: { A: 2, B: 1, C: 3, D: 1 } },
{ t: "细水长流，安稳且有边界", v: { A: 1, B: 3, C: 1, D: 2 } },
{ t: "自由游走，不被格子间困", v: { A: 2, B: 2, C: 1, D: 3 } }
]
},
{
id: 4, dim: "事业土壤", dimColor: "#C97A5F",
q: "你更看重城市的哪种资源？",
options: [
{ t: "创新土壤与跨界机会", v: { A: 3, B: 1, C: 3, D: 1 } },
{ t: "生活成本与舒适圈平衡", v: { A: 1, B: 3, C: 1, D: 2 } },
{ t: "志同道合的社群氛围", v: { A: 2, B: 2, C: 2, D: 3 } }
]
},
{
id: 5, dim: "自然体感", dimColor: "#C97A5F",
q: "对天气与环境的偏好？",
options: [
{ t: "温润水汽，哪怕有梅雨季", v: { A: 3, B: 3, C: 1, D: 3 } },
{ t: "干爽明朗，四季分明透亮", v: { A: 1, B: 1, C: 3, D: 1 } },
{ t: "常年如春，微风不燥最好", v: { A: 2, B: 2, C: 2, D: 3 } }
]
},
{
id: 6, dim: "自然体感", dimColor: "#C97A5F",
q: "闲暇时更爱哪片风景？",
options: [
{ t: "湖畔山林，绿意盎然治愈", v: { A: 3, B: 2, C: 1, D: 3 } },
{ t: "都市天际线，灯火璀璨", v: { A: 1, B: 1, C: 3, D: 1 } },
{ t: "街巷深处，梧桐树影斑驳", v: { A: 2, B: 3, C: 2, D: 2 } }
]
},
{
id: 7, dim: "人文底色", dimColor: "#C97A5F",
q: "夜晚的街道，你最眷恋？",
options: [
{ t: "霓虹闪烁，摩登夜生活", v: { A: 2, B: 1, C: 3, D: 1 } },
{ t: "摊贩烟火，喧闹且踏实", v: { A: 1, B: 3, C: 1, D: 2 } },
{ t: "静谧水岸，独处也自在", v: { A: 3, B: 2, C: 1, D: 3 } }
]
},
{
id: 8, dim: "人文底色", dimColor: "#C97A5F",
q: "你的精神角落偏向？",
options: [
{ t: "独立书店与先锋展览", v: { A: 2, B: 1, C: 3, D: 2 } },
{ t: "老茶馆与市井闲谈", v: { A: 1, B: 3, C: 1, D: 2 } },
{ t: "山野民宿，远离人群", v: { A: 2, B: 2, C: 1, D: 3 } }
]
}
];
// 结果城市数据
const results = {
A: {
name: "杭州",
tags: ["温润行者", "数字绿洲", "半城山水"],
reason: "你在紧凑与温润间找到了绝妙平衡。杭州恰好容纳了你的野心与诗意，既有互联网创新的土壤，又有西湖山水的治愈，步调与你高度同频。"
},
B: {
name: "成都",
tags: ["烟火闲人", "松弛感", "市井从容"],
reason: "你深谙细水长流的智慧，偏爱踏实且喧闹的烟火气。成都的舒缓节奏与安逸氛围，让你每一步都走得踏实，火锅与茶馆里活得尽兴。"
},
C: {
name: "上海",
tags: ["摩登弄潮", "高效前沿", "都市锋芒"],
reason: "你习惯随时在线，渴望在浪潮前沿拼杀。上海的干爽明朗与摩登底色，完美契合你对高效、多元与边界突破的追求。"
},
D: {
name: "大理",
tags: ["山野隐客", "自由漫游", "清雅独处"],
reason: "你灵魂向往自由游走与隐逸，不被格子间困住。大理常年如春，洱海畔与苍山下的微风，正是你精神角落的具象化。"
}
};
// DOM元素
const pageCover = document.getElementById('pageCover');
const pageQuiz = document.getElementById('pageQuiz');
const pageResult = document.getElementById('pageResult');
const startBtn = document.getElementById('startBtn');
const progressFill = document.getElementById('progressFill');
const quizIndex = document.getElementById('quizIndex');
const dimTag = document.getElementById('dimTag');
const qText = document.getElementById('qText');
const optionList = document.getElementById('optionList');
const nextBtn = document.getElementById('nextBtn');
const percentText = document.getElementById('percentText');
const cityName = document.getElementById('cityName');
const tagRow = document.getElementById('tagRow');
const reasonText = document.getElementById('reasonText');
const saveBtn = document.getElementById('saveBtn');
// 测试状态
let currentIndex = 0;
let selectedOption = null;
let score = { A:0, B:0, C:0, D:0 };
// 页面切换
function switchPage(page) {
pageCover.classList.remove('active');
pageQuiz.classList.remove('active');
pageResult.classList.remove('active');
page.classList.add('active');
}
// 渲染题目
function renderQuestion() {
const q = questions[currentIndex];
dimTag.textContent = q.dim;
qText.textContent = q.q;
quizIndex.textContent = `第 ${currentIndex+1} / ${questions.length} 题`;
optionList.innerHTML = '';
selectedOption = null;
nextBtn.disabled = true;
nextBtn.textContent = currentIndex === questions.length -1 ? "查看结果" : "下一题";
// 更新进度条
const percent = ((currentIndex) / questions.length) * 100;
progressFill.style.width = percent + "%";
q.options.forEach((opt) => {
const div = document.createElement('div');
div.className = 'option-item';
div.textContent = opt.t;
div.onclick = function() {
document.querySelectorAll('.option-item').forEach(el=>el.classList.remove('selected'));
div.classList.add('selected');
selectedOption = opt;
nextBtn.disabled = false;
}
optionList.appendChild(div);
})
}
// 点击开启测试
startBtn.onclick = function() {
switchPage(pageQuiz);
renderQuestion();
}
// 下一题按钮
nextBtn.onclick = function() {
if(!selectedOption) return;
// 累加ABCD分数
score.A += selectedOption.v.A;
score.B += selectedOption.v.B;
score.C += selectedOption.v.C;
score.D += selectedOption.v.D;
currentIndex++;
if(currentIndex >= questions.length) {
calcResult();
switchPage(pageResult);
} else {
renderQuestion();
}
}
// 计分，生成结果海报
function calcResult() {
const maxVal = Math.max(score.A, score.B, score.C, score.D);
let key = '';
if(score.A === maxVal) key = 'A';
else if(score.B === maxVal) key = 'B';
else if(score.C === maxVal) key = 'C';
else key = 'D';
const res = results[key];
const percent = Math.round(maxVal / 24 * 100);
percentText.textContent = percent + "%";
cityName.textContent = res.name;
tagRow.innerHTML = '';
res.tags.forEach(tag=>{
const span = document.createElement('span');
span.className = 'city-tag';
span.textContent = tag;
tagRow.appendChild(span);
})
reasonText.textContent = res.reason;
}
// 保存结果海报图片
saveBtn.onclick = function() {
html2canvas(document.getElementById('result-card'), {
backgroundColor: '#E6D3C5',
scale: 2
}).then(canvas=>{
const link = document.createElement('a');
link.download = '同频栖居地测试结果海报.png';
link.href = canvas.toDataURL('image/png');
link.click();
})
}
</script>
</body>
</html>