55 lines
2.8 KiB
HTML
55 lines
2.8 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>d2web · 暗黑破坏神 2 地图与法师</title>
|
||
<style>
|
||
:root { color-scheme: dark; }
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; height: 100%; background: #0b0906; color: #e8dcc8;
|
||
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; }
|
||
/* 画布铺满窗口；HUD 与控制器浮在上面 */
|
||
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
|
||
.overlay { position: fixed; z-index: 2; background: rgba(11, 9, 6, .82); border: 1px solid #33291f;
|
||
border-radius: 6px; backdrop-filter: blur(3px); }
|
||
header { top: 0; left: 0; right: 0; padding: 6px 12px; border-radius: 0; border-width: 0 0 1px 0;
|
||
display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
|
||
h1 { font-size: 13px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
|
||
a { color: #c8a15a; }
|
||
#hud { color: #9c8d78; }
|
||
#controls { left: 12px; bottom: 12px; padding: 8px 12px; display: flex; gap: 12px;
|
||
align-items: center; flex-wrap: wrap; max-width: calc(100vw - 24px); }
|
||
#controls label { color: #9c8d78; }
|
||
select { background: #1c1813; color: #e8dcc8; border: 1px solid #33291f;
|
||
border-radius: 4px; padding: 3px 6px; font: inherit; max-width: 28vw; }
|
||
optgroup { background: #1c1813; color: #c8a15a; }
|
||
option { background: #1c1813; }
|
||
/* 状态面板放在控件行上方：贴在右下角会压住"细分场景"那个下拉框 */
|
||
#status { right: 12px; bottom: 58px; padding: 6px 10px; max-width: 60vw; color: #9c8d78; }
|
||
.hint { color: #6d5a34; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="overlay">
|
||
<h1>d2web · 暗黑破坏神 2</h1>
|
||
<span id="hud">—</span>
|
||
</header>
|
||
<div id="controls" class="overlay">
|
||
<label>章节 <select id="act" disabled>
|
||
<option value="1">第一章</option>
|
||
<option value="2">第二章</option>
|
||
<option value="3">第三章</option>
|
||
<option value="4">第四章</option>
|
||
<option value="5">第五章</option>
|
||
</select></label>
|
||
<label>场景 <select id="scene" disabled><option>正在读取场景列表…</option></select></label>
|
||
<label>细分场景 <select id="variant" disabled></select></label>
|
||
<span class="hint" style="margin:0">WASD / 方向键移动 · 滚轮或 +/− 缩放 · 三个下拉框都会换图并更新地址栏</span>
|
||
</div>
|
||
<div id="status" class="overlay">正在加载地图…</div>
|
||
<canvas id="view" width="960" height="560"></canvas>
|
||
<script type="module" src="/src/scene/act-scene.ts"></script>
|
||
</body>
|
||
</html>
|