53 lines
3.2 KiB
HTML
53 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="color-scheme" content="dark" />
|
|
<title>lolskin · 皮肤工坊</title>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="titlebar">
|
|
<div class="titlebar-content">
|
|
<div class="brand"><span class="brand-mark" aria-hidden="true">✦</span> lolskin <span class="brand-divider"></span><span class="brand-subtitle">皮肤工坊</span></div>
|
|
<span class="titlebar-label">LEAGUE OF LEGENDS</span>
|
|
</div>
|
|
</header>
|
|
<main class="workspace">
|
|
<aside class="library" aria-labelledby="libraryTitle">
|
|
<div class="library-heading"><div><span class="eyebrow">CHAMPIONS</span><h1 id="libraryTitle">英雄</h1></div><span id="championCount" class="count">—</span></div>
|
|
<div class="search-box">
|
|
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4.5 4.5"/></svg>
|
|
<input id="search" class="search" type="search" aria-label="搜索英雄名称、称号或英文名" placeholder="搜索英雄、称号或英文名" autocomplete="off" />
|
|
</div>
|
|
<div class="library-toolbar">
|
|
<button id="current" class="text-button" disabled>当前英雄</button>
|
|
<div class="sizes" id="sizes" role="group" aria-label="英雄卡片大小">
|
|
<button data-size="72" aria-pressed="false">小</button>
|
|
<button data-size="92" class="on" aria-pressed="true">中</button>
|
|
<button data-size="120" aria-pressed="false">大</button>
|
|
</div>
|
|
</div>
|
|
<section id="champions" class="champ-grid" aria-label="英雄列表" aria-busy="true"></section>
|
|
<div class="library-footer">
|
|
<label class="follow-control"><input id="follow" type="checkbox" checked /><span class="switch" aria-hidden="true"></span>跟随游戏选人</label>
|
|
<button id="reload" class="icon-button" title="刷新英雄列表" aria-label="刷新英雄列表"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 7v5h-5M4 17v-5h5"/><path d="M6.1 6.1a8 8 0 0 1 13.4 4M4.5 13.9a8 8 0 0 0 13.4 4"/></svg></button>
|
|
</div>
|
|
</aside>
|
|
<section id="detail" class="detail" aria-label="皮肤预览">
|
|
<div class="detail-empty"><span class="empty-mark" aria-hidden="true">✦</span><span class="eyebrow">SKIN COLLECTION</span><h2>选择一位英雄</h2><p>皮肤与炫彩将在这里展示</p></div>
|
|
</section>
|
|
</main>
|
|
<footer class="statusbar">
|
|
<div id="status" class="status" role="status"><span class="status-dot" aria-hidden="true"></span><span id="connectionLabel">连接中…</span></div>
|
|
<span class="status-divider"></span><span id="profileLabel">—</span>
|
|
<span id="injectionStatus">注入未运行</span><span id="packageCount" class="package-count">皮肤包 —</span>
|
|
<button id="update" class="text-button">检查更新</button>
|
|
<button id="clean" class="text-button">清理残留</button>
|
|
</footer>
|
|
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
|
<script src="/renderer.js"></script>
|
|
</body>
|
|
</html>
|