国风心境小测

by EpicCobra11
137 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 临窗暖阳雅居 &nbsp;&nbsp; B 暖木清幽小屋 &nbsp;&nbsp; C 星垂静雅陋室
        </div>
        <div class="question">
            2. 望见翻涌江海，你的第一感受是？<br>
            A 心旷神怡 &nbsp;&nbsp; B 心绪烦乱 &nbsp;&nbsp; C 安然沉思
        </div>
        <div class="question">
            3. 四季天气里，你最钟情？<br>
            A 晴空万里 &nbsp;&nbsp; B 云淡风轻 &nbsp;&nbsp; C 细雨绵绵
        </div>
        <div class="question">
            4. 身心疲惫之时，你会如何舒缓？<br>
            A 与友闲谈解闷 &nbsp;&nbsp; B 独自静坐调息 &nbsp;&nbsp; C 安然小憩放空
        </div>
        <div class="question">
            5. 看到精致糕点，内心作何感想？<br>
            A 满心欢喜 &nbsp;&nbsp; B 心情平淡 &nbsp;&nbsp; C 毫无波澜
        </div>
        <div class="question">
            6. 回望近期日常，你常常感到？<br>
            A 满怀期许 &nbsp;&nbsp; B 平淡安然 &nbsp;&nbsp; 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.