檢視Test1的原始碼

<div class="hp-wrapper">

  <!-- 背景层 -->
  <div class="hp-bg"></div>

  <!-- 主容器 -->
  <div class="hp-container">

    <!-- ======== Header ======== -->
    <header class="hp-header">
      <img class="hp-header-logo" src="https://via.placeholder.com/600x200/2a251e/dbc39e?text=一支烟工作室+LOGO" alt="一支烟工作室 Logo" />
      <!-- ↑ 请替换为您的实际 Logo 图片 URL -->
      <div class="hp-header-sub">✦ 因热爱 · 创未来 ✦</div>
    </header>

    <!-- ======== 欢迎弹窗 ======== -->
    <div class="hp-welcome" id="hpWelcome">
      <div class="hp-welcome-text">
        <h2><span>🎉</span> 欢迎来到一支烟工作室 Wiki！</h2>
        <p>社区协作 · 知识共享 · 因热爱而创造</p>
      </div>
      <div class="hp-welcome-actions">
        <button class="hp-btn" id="hpWelcomeClose">好的</button>
        <label>
          <input type="checkbox" id="hpWelcomeDismiss" /> 不再提醒
        </label>
      </div>
    </div>

    <!-- ======== 模块网格 (2x2 圆角框) ======== -->
    <div class="hp-grid" id="hpGrid">

      <!-- 模块 1: 关于一支烟工作室 -->
      <div class="hp-card" data-delay="0">
        <h3><span class="hp-icon">🚬</span> 关于一支烟工作室</h3>
        <p>一支烟工作室是一个由创作者、开发者与设计师组成的兴趣社群。我们以「因热爱而创造」为信条，在数字世界与文艺领域持续探索。</p>
        <p style="margin-top:4px; opacity:0.7; font-size:0.92rem;">→ 成立于 2024 · 活跃于创作与开源</p>
        <div class="hp-badge-list">
          <span>#创作</span>
          <span>#开源</span>
          <span>#设计</span>
        </div>
      </div>

      <!-- 模块 2: 关于本 Wiki -->
      <div class="hp-card" data-delay="80">
        <h3><span class="hp-icon">📖</span> 关于本 Wiki</h3>
        <p>这里是一支烟工作室的协作知识库，记录项目文档、创作指南、社区规则与历史档案。</p>
        <p style="margin-top:4px; opacity:0.7; font-size:0.92rem;">📌 欢迎每一位成员参与编辑与维护。</p>
        <div class="hp-badge-list">
          <span>协作</span>
          <span>知识库</span>
          <span>开放编辑</span>
        </div>
      </div>

      <!-- 模块 3: 相关链接 -->
      <div class="hp-card" data-delay="160">
        <h3><span class="hp-icon">🔗</span> 相关链接</h3>
        <div class="hp-link-list">
          <a href="#">🏠 工作室官网</a>
          <a href="#">💬 官方QQ频道</a>
          <a href="#">📦 项目仓库</a>
          <a href="#">📚 文档归档</a>
          <a href="#">✉️ 加入我们</a>
        </div>
        <div class="hp-more-link">
          <a href="#">查看全部链接 →</a>
        </div>
      </div>

      <!-- 模块 4: 最近更改 (动态) -->
      <div class="hp-card" data-delay="240">
        <h3><span class="hp-icon">📝</span> 最近更改</h3>
        <div id="hpRecentContainer">
          <div class="hp-loading">加载中</div>
        </div>
        <div class="hp-more-link">
          <a href="[[Special:RecentChanges]]">查看全部更改 →</a>
        </div>
      </div>

    </div><!-- /hp-grid -->

    <!-- ======== 底部 ======== -->
    <div class="hp-footer">— 一支烟工作室 · 因热爱而创造 —</div>

  </div><!-- /hp-container -->
</div><!-- /hp-wrapper -->