Echo-Tavern/templates/index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Echo Tavern - 大厅</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
</head>
<body class="lobby-page" data-user='{{ user | tojson | safe if user else "null" }}' data-theme="{{ user.theme if user else 'dopamine' }}">
  <header class="lobby-topbar">
    <div class="brand-block">
      <h1>Echo Tavern</h1>
      <p>多人联机派对文字冒险</p>
    </div>
    <div class="top-actions" id="top-actions">
      {% if user %}
      <span id="top-user-badge" class="user-badge {% if user.avatar_url %}has-avatar{% endif %}" style="--avatar-color: {{ user.avatar_color }}; --avatar-url: url('{{ user.avatar_url }}')" data-avatar-url="{{ user.avatar_url }}">
        <i></i>{{ user.username }}
      </span>
      {% if user.role == 'admin' %}
      <a class="link-btn" href="{{ url_for('admin_page') }}">管理后台</a>
      {% endif %}
      <a class="link-btn" href="{{ url_for('user_profile_page', username=user.username) }}">我的主页</a>
      <a class="link-btn" href="{{ url_for('user_achievements_page', username=user.username) }}">我的成就</a>
      <a class="link-btn" href="{{ url_for('wallet_page') }}">积分中心</a>
      <a class="link-btn" href="{{ url_for('store_page') }}">积分商城</a>
      <a class="link-btn" href="{{ url_for('season_page') }}">赛季中心</a>
      <a class="link-btn" href="{{ url_for('rooms_page') }}">联机大厅</a>
      <a class="link-btn" href="{{ url_for('leaderboard_page') }}">玩家排行</a>
      <a class="link-btn" href="{{ url_for('plaza_page') }}">游戏卡广场</a>
      <button id="logout-btn" class="ghost-btn" type="button">退出登录</button>
      {% else %}
      <a class="link-btn" href="{{ url_for('login_page') }}">登录</a>
      <a class="link-btn" href="{{ url_for('register_page') }}">注册</a>
      {% endif %}
    </div>
  </header>

  <main class="lobby-grid">
    <section class="card">
      <h2>创建房间</h2>
      <form id="create-form">
        <p class="helper-text" id="create-name-hint">将使用用户名创建房间</p>

        <label for="create-card">选择游戏卡</label>
        <select id="create-card" name="card_id"></select>
        <div id="create-card-gallery" class="card-select-grid"></div>
        <article id="selected-card-detail" class="selected-card-detail"></article>
        <section id="create-module-section" class="module-select hidden">
          <h3>扩展模组（DLC）</h3>
          <p class="helper-text">可选启用该游戏卡的扩展内容（新角色/新场景/新结局等）。</p>
          <div id="create-module-list" class="module-select-list"></div>
        </section>

        <button type="submit">创建并进入</button>
      </form>
    </section>

    <section class="card">
      <h2>加入房间</h2>
      <form id="join-form">
        <label for="join-room">房间码</label>
        <input id="join-room" name="room_id" maxlength="6" placeholder="例如：A1B2C3" required />
        <button type="submit">加入游戏</button>
      </form>
      <p class="helper-text">将使用用户名加入。支持断线重连：输入同房间码会优先恢复你在该房间的身份。公开房间列表请前往“联机大厅”。</p>
    </section>

    <section class="card">
      <h2>快速重连</h2>
      <ul id="rejoin-list" class="compact-list"></ul>
    </section>

    <section class="card" id="profile-card">
      <h2>账号个性化</h2>
      <form id="profile-form">
        <p class="helper-text">游戏内统一使用登录账号：<strong id="profile-username">{{ user.username if user else '' }}</strong></p>

        <label for="profile-color">头像主色</label>
        <div class="color-row">
          <input id="profile-color" type="color" value="{{ user.avatar_color if user else '#0070f2' }}" />
          <span id="profile-color-preview" class="color-preview"></span>
        </div>

        <label for="profile-avatar-url">头像图片 URL（可选）</label>
        <input id="profile-avatar-url" maxlength="280" placeholder="例如：https://... 或 /static/..." />

        <label for="profile-bio">个性签名</label>
        <textarea id="profile-bio" maxlength="160" placeholder="一句话介绍你的玩法风格"></textarea>

        <label for="profile-theme">界面主题</label>
        <select id="profile-theme">
          <option value="dopamine">多巴胺主题</option>
          <option value="minimal">简约主题</option>
          <option value="midnight">午夜霓虹</option>
          <option value="mint">薄荷雾光</option>
          <option value="sunset">落日胶片</option>
          <option value="aurora">极光谱系</option>
          <option value="graphite">石墨工业</option>
        </select>

        <label for="profile-active-badge">职业徽章</label>
        <select id="profile-active-badge">
          <option value="">未选择</option>
        </select>
        <p id="profile-badge-desc" class="helper-text">加载中...</p>
        <div id="profile-badge-catalog" class="compact-list"></div>

        <button type="submit">保存个性化</button>
      </form>
    </section>
  </main>

  <section id="status" class="status-banner"></section>

  <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
  <script src="{{ url_for('static', filename='js/invite_notify.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lobby.js') }}"></script>
</body>
</html>