国风心境小测
by EpicCobra11137 lines6.4 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>国风心境小测 | 你的内心是晴是雨</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "微软雅黑", "宋体", sans-serif;
background-color: #FFF5EE;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e8c8b8' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
text-align: center;
padding: 30px 15px;
}
.main-box {
max-width: 520px;
margin: 0 auto;
background: #fffef8;
border: 2px solid #d4a373;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(212, 163, 115, 0.3);
padding: 30px 25px;
}
h1 {
color: #8b4513;
font-size: 24px;
margin-bottom: 10px;
letter-spacing: 2px;
}
.desc {
color: #a0522d;
font-size: 15px;
margin-bottom: 25px;
line-height: 1.6;
}
.question {
background: #fff3e8;
border-radius: 12px;
padding: 16px;
margin: 14px 0;
color: #5c3a21;
font-size: 16px;
line-height: 1.7;
}
.btn-check {
background: #c87e4f;
color: #fff;
border: none;
border-radius: 30px;
padding: 12px 35px;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-check:hover {
background: #b06c3e;
transform: translateY(-2px);
}
#result {
margin-top: 25px;
padding: 20px;
border-radius: 12px;
font-size: 17px;
line-height: 1.8;
font-weight: 500;
}
</style>
</head>
<body>
<div class="main-box">
<h1>🍃 国风心境小测 🍃</h1>
<p class="desc">凭第一直觉选择答案,A=3分 B=2分 C=1分,算好总分后点击下方按钮查看结果</p>
<div class="question">
1. 若择一处雅居,你更偏爱?<br>
A 临窗暖阳雅居 B 暖木清幽小屋 C 星垂静雅陋室
</div>
<div class="question">
2. 望见翻涌江海,你的第一感受是?<br>
A 心旷神怡 B 心绪烦乱 C 安然沉思
</div>
<div class="question">
3. 四季天气里,你最钟情?<br>
A 晴空万里 B 云淡风轻 C 细雨绵绵
</div>
<div class="question">
4. 身心疲惫之时,你会如何舒缓?<br>
A 与友闲谈解闷 B 独自静坐调息 C 安然小憩放空
</div>
<div class="question">
5. 看到精致糕点,内心作何感想?<br>
A 满心欢喜 B 心情平淡 C 毫无波澜
</div>
<div class="question">
6. 回望近期日常,你常常感到?<br>
A 满怀期许 B 平淡安然 C 身心倦乏
</div>
<button class="btn-check" onclick="showResult()">查看你的心境</button>
<div id="result"></div>
</div>
<script>
function showResult() {
let score = prompt("请输入你的总分(范围6-18):");
score = parseInt(score);
let resBox = document.getElementById("result");
let content = "";
if (score >= 16 && score <= 18) {
content = "☀️ 【晴光满庭】\n你的内心一片晴朗,元气十足!心态豁达开朗,很少被琐事困扰。你热爱生活,对未来满怀憧憬,自带温暖气场。\n💫 心语寄语:保持这份明媚,一路向阳而行。";
resBox.style.background = "#fff9d9";
resBox.style.color = "#946b2d";
} else if (score >= 11 && score <= 15) {
content = "⛅ 【云卷云舒】\n当下心绪平和,偶有细碎压力萦绕,属于多云之境。你处事稳重,懂得调节情绪,只是偶尔会觉得身心紧绷。\n💫 心语寄语:闲看庭前云卷云舒,适时放慢脚步便好。";
resBox.style.background = "#eef4f8";
resBox.style.color = "#4a5c6c";
} else if (score >= 6 && score <= 10) {
content = "🌧️ 【细雨绵绵】\n近期身心偏疲惫,压力累积较多,如同细雨连绵。你习惯默默承担情绪,容易陷入低落,需要好好休整。\n💫 心语寄语:允许自己短暂停歇,善待身心,雨过自会天晴。";
resBox.style.background = "#e8f0f7";
resBox.style.color = "#3c5470";
} else {
content = "❀ 分数输入有误,请重新计算后再来测试哦~";
resBox.style.background = "#ffe9e9";
resBox.style.color = "#c74444";
}
resBox.innerText = content;
}
</script>
</body>
</html>Game Source: 国风心境小测
Creator: EpicCobra11
Libraries: none
Complexity: moderate (137 lines, 6.4 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: -epiccobra11" to link back to the original. Then publish at arcadelab.ai/publish.