99 lines
5.3 KiB
HTML
99 lines
5.3 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; cursor: none; }
|
||
.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; }
|
||
select.non-default, .non-default {
|
||
border: 1px solid #e74c3c !important;
|
||
color: #ff6b6b !important;
|
||
}
|
||
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; }
|
||
#status:empty { display: none; }
|
||
#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; cursor: none; }
|
||
.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="hero" disabled>
|
||
<option value="so">法师 (Sorceress)</option>
|
||
<option value="am">亚马逊 (Amazon)</option>
|
||
<option value="ne">死灵法师 (Necromancer)</option>
|
||
<option value="pa">圣骑士 (Paladin)</option>
|
||
<option value="ba">野蛮人 (Barbarian)</option>
|
||
<option value="dz">德鲁伊 (Druid)</option>
|
||
<option value="ai">刺客 (Assassin)</option>
|
||
</select></label>
|
||
<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>
|
||
<label>光照 <select id="lighting">
|
||
<option value="auto">自动 (原版 1.13c)</option>
|
||
<option value="noon">正午 (明亮日光)</option>
|
||
<option value="morning">清晨 (晨曦暖金)</option>
|
||
<option value="sunset">黄昏 (暮色紫金)</option>
|
||
<option value="night">午夜 (幽暗蓝月)</option>
|
||
<option value="cave">深渊地牢 (火炬暗黑)</option>
|
||
<option value="hell">地狱血月 (第四幕猩红)</option>
|
||
<option value="eclipse">蚀日之咒 (幽蓝暗蚀)</option>
|
||
<option value="off">关闭光照 (全亮无光影)</option>
|
||
</select></label>
|
||
<label>密度 <select id="density">
|
||
<option value="0.5">0.5x</option>
|
||
<option value="1" selected>Density: 1x (1.13c)</option>
|
||
<option value="2">2x</option>
|
||
<option value="4">4x</option>
|
||
<option value="8">8x</option>
|
||
</select></label>
|
||
<label>精英 <select id="elite">
|
||
<option value="0.5">0.5x</option>
|
||
<option value="1" selected>Elite: 1x (1.13c)</option>
|
||
<option value="2">2x</option>
|
||
<option value="4">4x</option>
|
||
<option value="all">All Elite</option>
|
||
</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>
|