SOURCE

<!DOCTYPE html>
<html lang="en">
<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 {
      background-color: #000000;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Courier New', 'Consolas', monospace;
      padding: 16px;
    }
    .dialogue-box {
      background-color: #0a0a0a;
      border: 2px solid #ff1a1a;
      border-radius: 16px;
      box-shadow: 0 0 12px #ff1a1a55, 0 0 25px #ff000033;
      width: 100%;
      max-width: 620px;
      padding: 28px 24px 32px;
    }
    .content { color: #e0e0e0; font-size: 1.15rem; line-height: 1.6; }
    .main-text {
      font-size: 1.45rem;
      font-weight: 500;
      color: #f0f0f0;
      border-left: 6px solid #ff1a1a;
      padding-left: 18px;
      margin-bottom: 28px;
      text-shadow: 0 0 5px #ff1a1a40;
      min-height: 2rem;
    }
    .options, .sub-options { display: flex; flex-wrap: wrap; gap: 16px; }
    .btn {
      background: transparent;
      border: 2px solid #ff1a1a;
      border-radius: 10px;
      color: #ff4d4d;
      font-family: inherit;
      font-size: 1.25rem;
      font-weight: bold;
      padding: 10px 26px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 0 5px #ff000033;
    }
    .btn:hover {
      background-color: #ff1a1a20;
      color: #ff7b7b;
      box-shadow: 0 0 12px #ff1a1a88;
    }
    .sub-options .btn { font-size: 1.1rem; padding: 8px 22px; }
    .glow-hr {
      border: 0; height: 1px;
      background: linear-gradient(90deg, transparent, #ff1a1a, transparent);
      margin: 22px 0 8px; opacity: 0.6;
    }
  </style>
</head>
<body>

  <div class="dialogue-box">
    <div class="content" id="app">
      
      <!-- 这是第一页的内容，直接写死在HTML里 -->
      <div id="page-initial">
        <div class="main-text">是否开始对话</div>
        <div class="options">
          <button class="btn" onclick="showYesPage()">是</button>
          <button class="btn" onclick="showNoPage()">否</button>
        </div>
      </div>

      <!-- 点“是”显示的内容（默认隐藏） -->
      <div id="page-yes" style="display: none;">
        <div class="main-text">我注视到了您</div>
        <div class="sub-options">
          <button class="btn">风格</button>
          <button class="btn">自介</button>
          <button class="btn">板评</button>
        </div>
        <hr class="glow-hr">
        <div style="color: #ff4d4d80; font-size: 0.85rem; margin-top: 8px;">—— 邀请您了解我 ——</div>
      </div>

      <!-- 点“否”显示的内容（默认隐藏） -->
      <div id="page-no" style="display: none;">
        <div class="main-text" style="color: #ff4d4d;">您拒绝了与我的相遇</div>
        <div class="options" style="margin-top: 20px;">
          <button class="btn" onclick="resetPage()" style="font-size: 1rem; padding: 6px 20px;">重新开始</button>
        </div>
      </div>

    </div>
  </div>

  <script>
    function showYesPage() {
      document.getElementById('page-initial').style.display = 'none';
      document.getElementById('page-yes').style.display = 'block';
    }

    function showNoPage() {
      document.getElementById('page-initial').style.display = 'none';
      document.getElementById('page-no').style.display = 'block';
    }

    function resetPage() {
      document.getElementById('page-initial').style.display = 'block';
      document.getElementById('page-yes').style.display = 'none';
      document.getElementById('page-no').style.display = 'none';
    }
  </script>

</body>
</html>