110 lines
4.6 KiB
HTML
110 lines
4.6 KiB
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('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>
|
|
|
|
<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>
|
|
<h2 style="margin-top: 1rem;">玩家排行榜</h2>
|
|
<p class="helper-text">按胜场、参与局数和回合数综合排序。</p>
|
|
<ul id="leaderboard-list" class="compact-list"></ul>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>联机大厅</h2>
|
|
<p class="helper-text">房主公开后的房间会显示在这里，可直接加入或观战。</p>
|
|
<ul id="public-rooms-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>
|
|
|
|
<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/lobby.js') }}"></script>
|
|
</body>
|
|
</html>
|