<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>数学人格测试 · MathBTI</title>
<meta name="description" content="12题发现你的数学人格类型——16种人格，4大族群">
  <link rel="stylesheet" href="/static/css/mathbti.css?v=4">
</head>
<body>

<div class="app" id="app">
  <!-- Intro Screen -->
  <div class="screen active" id="introScreen">
    <div class="intro-header">
      <div class="intro-logo">葫</div>
      <h1 class="intro-title">数学人格测试</h1>
      <p class="intro-sub">12题发现你的数学人格类型</p>
      <div class="intro-meta">⏱ 约2分钟 · 4选项 · 12人格</div>
    </div>
    <div class="intro-desc">
      <span>你习惯靠直觉还是靠推演？</span>
      <span>你更喜欢独自钻研还是和同伴讨论？</span>
      <span>你偏爱古典数学还是现代科技？</span>
    </div>
    <div class="intro-axes" id="introAxes"></div>
    <button class="btn-start" onclick="startQuiz()">开始测试</button>
  </div>

  <!-- Quiz Screen -->
  <div class="screen" id="quizScreen">
    <div class="quiz-progress-wrap">
      <div class="quiz-progress-bar"><div class="quiz-progress-fill" id="progressFill" style="width:0%"></div></div>
      <div class="quiz-progress-text" id="progressText">1/12</div>
    </div>
    <div class="quiz-question" id="quizQuestion"></div>
    <div class="quiz-options" id="quizOptions"></div>
    <button class="btn-next" id="btnNext" disabled onclick="nextQuestion()">下一题</button>
  </div>

  <!-- Result Screen -->
  <div class="screen" id="resultScreen">
    <div class="result-header">
      <div class="result-portrait-wrap" id="resultPortrait"></div>
      <h2 class="result-type-name" id="resultName"></h2>
      <p class="result-tagline" id="resultTagline"></p>
      <div class="result-mathematician" id="resultMathematician"></div>
    </div>
    <div class="result-keywords" id="resultKeywords"></div>
    <div class="result-card">
      <div class="result-card-title">你的数学人格画像</div>
      <p class="result-card-desc" id="resultDesc"></p>
      <p class="result-card-short" id="resultShort"></p>
    </div>
    <!-- Bio Expander -->
    <div class="bio-expander" id="bioExpander">
      <div class="bio-expander-header" id="bioHeader" onclick="toggleBio()">
        <div class="bio-expander-left">
          <span class="bio-expander-icon">📖</span>
          <span class="bio-expander-title" id="bioTitle">关于 拉马努金</span>
        </div>
        <span class="bio-arrow" id="bioArrow">▾</span>
      </div>
      <div class="bio-expander-body" id="bioBody">
        <div class="bio-inner">
          <p class="bio-text" id="bioText"></p>
          <div class="bio-fact-box">
            <span class="bio-fact-emoji">💡</span>
            <span class="bio-fact-text" id="bioFact"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="result-axes" id="resultAxes"></div>
    <div class="result-stats5" id="resultStats5"></div>
    <div class="result-adopt">
      <button class="btn-adopt" onclick="adoptPet()">🧬 领养你的数学精灵</button>
      <p class="adopt-hint">它将每天等你回来，喂经验、升级、解锁数学家的人生剧本</p>
    </div>
    <div class="result-card-notice" id="cardNotice">
      <div class="rcn-icon">🎴</div>
      <div class="rcn-text">恭喜获得「<span id="cardNoticeName">—</span>」数学人物小卡！</div>
      <div class="rcn-hint">去葫芦数学 <a href="/web" style="color:#A8907E;text-decoration:underline">查看我的卡册</a>，还有15张等你收集</div>
    </div>
    <div class="result-share">
      <button class="btn-share secondary" onclick="copyShare()">📋 复制结果</button>
      <button class="btn-share primary" onclick="generateShareCard()">📸 生成分享卡片</button>
      <button class="btn-share" onclick="shareResult()">📤 分享给朋友</button>
    </div>
    <div class="share-card-preview" id="shareCardPreview" style="display:none">
      <canvas id="shareCardCanvas" width="600" height="800" style="max-width:100%;border-radius:12px;margin-top:16px"></canvas>
      <button class="btn-share primary" onclick="downloadShareCard()" style="margin-top:8px">💾 保存图片</button>
    </div>
    <button class="btn-retry" onclick="retryQuiz()">↻ 重新测试</button>
  </div>
</div>

<div class="toast" id="toast"></div>

<script src="/static/js/mathbti.js?v=4"></script>
</body>
</html>
