hbti-prototype/index.html at main · WilliamClifton-dev/hbti-prototype · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="16 道题，发现你的代谢脾气。HBTI 是一个观察进食、恢复、压力和日常活动倾向的开源研究原型。"
    />
    <meta name="theme-color" content="#29465b" />
    <meta property="og:title" content="HBTI 代谢脾气测试" />
    <meta
      property="og:description"
      content="你更像自律永动机、奶茶雷达，还是压力囤囤兽？约 2 分钟，不登录，不上传答案。"
    />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="zh_CN" />
    <meta property="og:url" content="https://williamclifton-dev.github.io/hbti-prototype/" />
    <link rel="canonical" href="https://williamclifton-dev.github.io/hbti-prototype/" />
    <meta property="og:image" content="https://williamclifton-dev.github.io/hbti-prototype/docs/assets/hbti-homepage-preview-v2.png" />
    <title>HBTI 代谢脾气测试</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="./guidance.css" />
    <link rel="stylesheet" href="./assessment.css" />
  </head>
  <body>
    <main class="shell">
      <section class="hero">
        <div class="hero-topline">
          <p class="eyebrow" data-i18n="heroEyebrow">HBTI · 代谢脾气测试</p>
          <div class="hero-controls">
            <div class="language-switch" role="group" aria-label="语言 / Language">
              <button type="button" data-language="zh" aria-pressed="true">中文</button>
              <button type="button" data-language="en" aria-pressed="false">EN</button>
            </div>
            <span class="prototype-badge" data-i18n="prototype">研究原型</span>
          </div>
        </div>
        <h1 data-i18n-html="heroTitle">你的身体是哪种<br />「代谢脾气」？</h1>
        <p class="lede" data-i18n="heroCopy">
          16 道题，看看你更像「自律永动机」「奶茶雷达」，还是「压力囤囤兽」。
          不按胖瘦贴标签，只观察进食、恢复、压力和日常活动的倾向。
        </p>
        <div class="trust-strip" aria-label="测试说明" data-i18n-aria-label="trustAria">
          <span data-i18n="trustTime">约 2 分钟</span>
          <span data-i18n="trustQuestions">16 道选择题</span>
          <span data-i18n="trustLogin">无需登录</span>
          <span data-i18n="trustPrivacy">不上传答案</span>
        </div>
        <div class="value-strip" aria-label="测完你会得到什么" data-i18n-aria-label="valueAria">
          <article class="value-card">
            <strong data-i18n="value1Title">四维倾向剖面</strong>
            <span data-i18n="value1Copy">进食、食欲、恢复、日常活动四个维度的组合结果</span>
          </article>
          <article class="value-card">
            <strong data-i18n="value2Title">中文结果标签</strong>
            <span data-i18n="value2Copy">更容易记住和传播的外号、摘要和结果卡</span>
          </article>
          <article class="value-card">
            <strong data-i18n="value3Title">起步建议</strong>
            <span data-i18n="value3Copy">基于当前组合给出适合先调整的生活方式方向</span>
          </article>
        </div>
        <div class="hero-actions">
          <a class="pill-link pill-primary" href="#quiz" data-i18n="start">开始 2 分钟测评</a>
          <a class="text-link" href="#about" data-i18n="methods">查看研究边界与方法</a>
        </div>
        <p class="micro-disclaimer" data-i18n="heroDisclaimer">研究原型，仅用于自我观察、产品验证展示与后续研究设计。</p>
      </section>

      <section class="identity-preview" aria-label="结果示例" data-i18n-aria-label="samplesAria">
        <article><strong data-i18n="sample1Title">自律永动机</strong><span data-i18n="sample1Copy">节律稳 · 恢复快 · 爱活动</span></article>
        <article><strong data-i18n="sample2Title">奶茶雷达</strong><span data-i18n="sample2Copy">对甜食敏感 · 容易被口味吸引</span></article>
        <article><strong data-i18n="sample3Title">压力囤囤兽</strong><span data-i18n="sample3Copy">压力、食欲和省电反应互相拉扯</span></article>
      </section>

      <section class="card quiz-shell" id="quiz"></section>
      <section class="card hidden" id="result"></section>

      <section class="card showcase" id="about">
        <div class="section-head about-head">
          <div>
            <p class="eyebrow" data-i18n="researchEyebrow">研究说明</p>
            <h2 data-i18n="researchTitle">公开逻辑、公开边界，便于后续验证</h2>
          </div>
          <a class="pill-link pill-secondary" href="https://github.com/WilliamClifton-dev/hbti-prototype" data-i18n="github">查看 GitHub</a>
        </div>
        <div class="info-grid">
          <article class="info-card">
            <span class="info-number">01</span>
            <h3 data-i18n="info1Title">透明评分</h3>
            <p data-i18n="info1Copy">题目、四个维度和评分逻辑均公开，不做黑箱判断。</p>
          </article>
          <article class="info-card">
            <span class="info-number">02</span>
            <h3 data-i18n="info2Title">主动标注局限</h3>
            <p data-i18n="info2Copy">目前未完成医学和心理测量学验证，不替代专业建议。</p>
          </article>
          <article class="info-card">
            <span class="info-number">03</span>
            <h3 data-i18n="info3Title">准备验证</h3>
            <p data-i18n="info3Copy">已整理题项库、专家评审、认知访谈和预注册方案。</p>
          </article>
        </div>
        <div class="link-grid">
          <a class="doc-link" href="./docs/research/hbti-validation-study-plan.zh-CN.md">
            <strong data-i18n="doc1Title">验证研究方案</strong>
            <span data-i18n="doc1Copy">研究目标、样本与统计分析计划</span>
          </a>
          <a class="doc-link" href="./docs/research/hbti-item-bank.zh-CN.md">
            <strong data-i18n="doc2Title">候选题项库</strong>
            <span data-i18n="doc2Copy">四个维度的扩展题目与筛选思路</span>
          </a>
          <a class="doc-link" href="./docs/research/hbti-preregistration-draft.zh-CN.md">
            <strong data-i18n="doc3Title">预注册草稿</strong>
            <span data-i18n="doc3Copy">提前固定研究假设和分析边界</span>
          </a>
        </div>
      </section>

      <footer class="footer-note" data-i18n="footer">HBTI · 开源研究原型 · 数据仅在当前浏览器中计算</footer>
    </main>

    <script src="./hbti-data.js"></script>
    <script src="./hbti-i18n.js"></script>
    <script src="./hbti-avatar.js"></script>
    <script src="./app.js"></script>
  </body>
</html>