60 lines
3.4 KiB
HTML
60 lines
3.4 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; }
|
||
/* 状态与地图选择控件紧凑停靠在顶部，把屏幕底部完整让给暗黑2原版 800CtrlPnl7 控制栏与血蓝球 */
|
||
#controls { top: 4px; right: 12px; padding: 3px 8px; display: flex; gap: 8px;
|
||
align-items: center; flex-wrap: wrap; max-width: 72vw; font-size: 12px; z-index: 4; }
|
||
#controls label { color: #9c8d78; }
|
||
select { background: #1c1813; color: #e8dcc8; border: 1px solid #33291f;
|
||
border-radius: 4px; padding: 2px 5px; font: inherit; max-width: 22vw; }
|
||
optgroup { background: #1c1813; color: #c8a15a; }
|
||
option { background: #1c1813; }
|
||
#status { left: 12px; top: 34px; padding: 3px 8px; max-width: 55vw; color: #9c8d78; font-size: 11px; opacity: 0.85; pointer-events: none; z-index: 3; }
|
||
#dialog { right: 12px; top: 42px; padding: 8px 12px; min-width: 240px; color: #e8dcc8; white-space: pre-wrap; font-size: 14px; background: rgba(30, 26, 21, .9); border-color: #c8a15a; z-index: 5; }
|
||
#d2-hud-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 6; pointer-events: none; image-rendering: pixelated; }
|
||
.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">I背包 · A角色 · T技能 · Q任务 · V小站 · ~腰带 · R奔跑 · W换手</span>
|
||
</div>
|
||
<div id="status" class="overlay">正在加载地图…</div>
|
||
<div id="dialog" class="overlay" hidden></div>
|
||
<div id="labels" style="position: fixed; inset: 0; pointer-events: none; z-index: 2;"></div>
|
||
<canvas id="view" width="960" height="560"></canvas>
|
||
<canvas id="d2-hud-canvas" width="800" height="600"></canvas>
|
||
<script type="module" src="/src/scene/act-scene.ts"></script>
|
||
</body>
|
||
</html>
|